Snippet Zone

Little Galaxy ES5

var canvas = document.createElement('canvas'),

```
    c = canvas.getContext('2d'), 
```
```
    SIZE = 350;
```
```
 
```
```
canvas.width = SIZE;
```
```
canvas.height = SIZE;
```
```
 
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black';
```
```
c.fillRect(0, 0, SIZE, SIZE);
```
```
 
```
```
c.fillStyle = 'white';
```
```
 
```
```
var spa = function(ts) {
```
```
  var r = 0, t =  0;
```

  var jitterX, jitterY, jitterT, jitterR;

```
  for (var i = 0; i < 100; i += 0.5) {
```
```
    t = ts + i / 15;
```
```
    r = i;
```
```
    jitterR = 5 + i / 5;
```

    jitterT = Math.random() * 2 * Math.PI;

    jitterX = Math.random() * jitterR * Math.sin(jitterT);

    jitterY = Math.random() * jitterR * Math.cos(jitterT);

    c.fillStyle = `hsl(${t / Math.PI * 180}deg, 50%, 50%)`;

```
    c.fillRect(
```

      SIZE / 2 + r * Math.cos(t) + jitterX,

      SIZE / 2 + r * Math.sin(t) + jitterY,

```
      3, 3
```
```
    );
```
```
  }
```
```
}
```
```
 
```
```
spa(0);
```
```
spa(Math.PI);
```

I made this in response to a question from a friend of mine a few years back…

February 14, 2022

// canvas // graphics

Object Key Order and Reflect.ownKeys

const obj = { 11: 'eleven', 23: 'twenty-three', 1: 'one', 2: 'two', '-1': 'negative 1' };

```
 
```
```
console.log(Reflect.ownKeys(obj))
```

I noticed that for in.. over an object was giving me weirdly consistent results across all browsers the other day and stumbled upon this.

Great news, but it’s Reflect.ownKeys for me… now that IE11 is dying/dead.

February 13, 2022

// arrays // objects // oldschool

selectAll Thoughts

```
const lookup = new WeakMap() 
```
```
 
```
```
let id = 0;
```
```
 
```

export const els = selectAll(document.body)

export const parentOf = el => lookup.get(el)

```
 
```
```
export function selectAll(parent) {
```

  const els = { id, el: parent, all: {} }

  const allEls = [...parent.querySelectorAll('*')]

```
 
```
```
  id++
```
```
 
```
```
  for (let i in allEls) {
```
```
    const el = allEls[i]
```
```
 
```
```
    // any element can lookup `els`
```
```
    lookup.set(el, els)
```
```
 
```

    const tag = el.tagName.toLowerCase()

```
 
```
```
    if (el.id) {
```
```
      els[el.id] = el
```
```
 
```
```
      tag === 'template' &&
```
```
        (els[el.id + 'Tmpl'] = () => {
```
```
          const instanceEl = el.content
```
```
            .cloneNode(true)
```
```
            .firstElementChild
```
```
          return selectAll(
```
```
            instanceEl
```
```
          )
```
```
        })
```
```
    }
```
```
 
```
```
    if (el.classList.length > 0) {
```
```
      const name = el.classList[0]
```
```
 
```
```
      if (!els[name]) { 
```
```
        els[name] = el
```
```
        els.all[name] = [el]
```
```
      } else {
```
```
        els.all[name].push(el)
```
```
      }
```
```
    }
```
```
  }
```
```
  return els;
```
```
}
```

Whenever I code a vanilla gui for some personal project/experiment I write some variation of this. I did this one a few days back to see how it would work with template tags.

February 12, 2022

// tricks // ui

xPath contains (document.evaulate)

// hack to shove some html on the page since snippet.zone

// quick editor does not yet support HTML :P

```
document.body.innerHTML += `
```
```
  <p>This is some text to search...</p>
```

  <p>Here are some random words "Robot, Cat, Swan, Shadow"...</p>

```
  <button>Say Hello Robot</button>
```
```
`;
```
```
 
```
```
///////////
```
```
 
```
```
// find elements with the word `search`
```
```
let els = document.evaluate(
```
```
  "//p[contains(., 'search')]",
```
```
  document,
```
```
  null,
```
```
  XPathResult.ANY_TYPE,
```
```
  null
```
```
);
```
```
let el;
```
```
while (el = els.iterateNext()) {
```
```
  console.log('match "search"', el);
```
```
}
```
```
 
```
```
els = document.evaluate(
```
```
  "//body/*[contains(., 'Robot')]",
```
```
  document,
```
```
  null,
```
```
  XPathResult.ANY_TYPE,
```
```
  null
```
```
);
```
```
while (el = els.iterateNext()) {
```
```
  console.log('match "Robot"', el);
```
```
}
```

Now that IE is almost dead… we can use xPath – take a look at your console

February 11, 2022

// javascript // xPath

xPath and svg

// hack to shove some html on the page since snippet.zone

// quick editor does not yet suppor HTML :P

```
document.body.innerHTML += `
```
```
  <svg style="overflow:visible">
```

  <rect x="10" y="10" fill="red" width="30" height="10" />

  <rect x="10" y="20" fill="blue" width="30" height="10" />

  <rect x="10" y="30" fill="purple" width="30" height="10" />

```
  </svg>
```
```
`;
```
```
 
```

const svgPrefix = pre => pre === 'svg' && 'http://www.w3.org/2000/svg';

```
 
```

// https://stackoverflow.com/questions/31162358/extract-svg-element-by-using-document-evaluate

```
let els = document.evaluate(
```
```
  '//svg:svg/*[@fill="blue"]',
```
```
  document,
```
```
  svgPrefix,
```
```
  XPathResult.ANY_TYPE,
```
```
  null
```
```
);
```
```
 
```
```
const results = [];
```
```
while ((el = els.iterateNext())) {
```

  // save results to avoid mutation error

```
  results.push(el);
```
```
}
```
```
results[0].x.baseVal.value = 50;
```

results[0].setAttribute('stroke', 'orange');

results[0].setAttribute('stroke-width', 2);

Now that IE 11 is almost dead… we can use document.evaluate – I knew there would be some trick to get it to work on svg… Found the answer from user Martin Honnen on stackoverflow – very cool.

Of course this one can be done with document.querySelectorAll('*[fill="blue"]') – but xPath can do some other stuff that css selectors can’t exactly do yet…

February 10, 2022

// svg // xPath

Older Posts

Newer Posts

Little Galaxy ES5

Object Key Order and Reflect.ownKeys

selectAll Thoughts

xPath contains (document.evaulate)

xPath and svg

Recent

Archive