Embracing the Weird

# 😊
          > The joy we get from tinkering is what separates us from the machines.

---

# 😅

### I learned JS by trial and error, often through mad experiments
          
          ---

![](./ilus/favjs.png)

---

### 2001: How it started

---

```js
 function a(){
 setTimeout('a()',0)
 setTimeout('a()',0)
 }
 a()
 ```
 first 5 lines of JS I've written
 
 ---
 
 ![](./ilus/win98.png)
 
 ---
 
 ![](./ilus/win98done.png) 
 
 ---

# `¯\_(ツ)_/¯`

---

### 2002: no progress really
 
 
 I was really impressed with a girl who knew how to do shadow on text in IE6 (I never met her)
 
 ---

### 2007: a website that's editable in-place

```
 <iframe contenteditable="true"></iframe>

document.execCommand('insertText', false, 'some text')
          ```

---

### 2009: Got multiple language spellcheck to work on one page

Only time I got paid to write a Java HTTP server 😂

---
          Opera Unite came out in 2009 but I was too noob for an async server
          ---

### 2011: full-site heatmaps

![](./ilus/heatmap.png)
          
          With blur derived from Pixastic FastBlur

```js
 for (var i=0;i<steps;i+=skip) {
 var scaledWidth = Math.max(1,Math.round(smallWidth - i));
 var scaledHeight = Math.max(1,Math.round(smallHeight - i));
 copyCtx.clearRect(0,0,smallWidth,smallHeight);
 copyCtx.drawImage(buffer,0,0,ww,hh,0,0,scaledWidth,scaledHeight);
 ctx.clearRect(0, 0, ww, hh);
 ctx.drawImage(copy,0,0,scaledWidth,scaledHeight,0,0,ww,hh);
 }
 ```

---

### useful for a space-themed game too

![](./ilus/game.png)

[https://naugtur.pl/game/](https://naugtur.pl/game/)

---

<!-- ### 2012: 150KB of data in GET requests in production

- Send user activity data cross-origin
          - CORS not widely supported yet
          - URL length limit unaffected by compression
          - Roll my own LZW and heuristic compression
           -->

### 2012: discovered Node.js

Socket.io based multiplayer sticky notes on a wall

---

### 2013: leaked 4GB of RAM in one tab

- Learned about GC and heap snapshots
          
          ---

### 2014: Got banned from stackoverflow

for a library that used CSS animations to detect DOM insertions (an Idea I didn't properly attribute to https://backalleycoder.com/)

```js
          addEventListener("animationstart", (event) => { })
          * { animation-name: 'insertionquery'; animation-duration: 0.001s; }
          ```
          ---

### 2015: almost created a 3D audio game engine

---

### I went to the invisible exhibition

![](./ilus/invisible.png)

Me finding a hairdryer in the sink

---

### I went to the invisible exhibition

![](./ilus/invisible.png)

Me discovering an electric stove is no longer hot

---

*Did you know people who can't see play games too?*

---
          ### 2015: almost created a 3D audio game engine

Got stuck on how hard it was to test RX.js code 🙈

All of the fancy 3D math for binaural sound is in the browser
          [MDN: Web audio spatialization basics](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)

And when you can't see, all collisions are simple sphere collisions 😝
 ---

### 2016: I got into JS security...

And learned my first JS was a Denial of Service attack
          ---

# ⏳

how are we on time?

---

### Have you noticed I never mentioned framewors?

Frameworks make you do reasonable things, and where's the fun in that?

### These days, I'm writing security software that uses `with` statements 
          ---
          ### what's inside?

![lavamoat](./ilus/lavamoat-underthe.png)
          ---
          ![](./ilus/hardenedjs.svg)

## Hardened Javascript

Provides a secure environment for running code.
          
          ---
          
          ![](./ilus/endo.svg)

Node, Deno, Endo, we're not *Done* yet
          
          ---

## different globals per module?

Took me 2 months to believe it's even possible

---

```js [15-16|5-6|12-18|8-10|1-3]
          Object.freeze(Object.prototype)
          Object.freeze(Array.prototype)
          Object.freeze(Function.prototype)

const pretendGlobalObject = { console, location }
          pretendGlobalObject.globalThis = pretendGlobalObject

const scopeCeiling = new Proxy(pretendGlobalObject, {
            has: () => true
          })

with (scopeCeiling) {
 (function (){
 'use strict';
 console.log(location.href) // works 
 document.cookie // error: document is undefined 
 }).call(pretendGlobalObject)
 }
 ```
 Not exactly how HardenedJS works 😅

---

Scope Ceiling at TC39 next week

![](./ilus/tcmodules.png)

---

#### 🚀 TIP for getting started with ECMAScript Spec

[![](./ilus/doom.jpg)](https://www.youtube.com/watch?v=QHRuTYtSbJQ)

---

### BTW, please use LavaMoat to protect your apps

![](./ilus/lavamoat-logo.png)

Start with `@lavamoat/allow-scripts`

25 years of embracing the weird

Enjoy!