Snippet Zone

Set Multiple Attributes (hack)

// hacky way to set many attributes - just for fun

```
const el = document.body.appendChild(
```
```
  document.createElement('button'));
```
```
let i, a;
```
```
el.innerHTML = 'hello';
```
```
for (i in a = {
```
```
  id: 'xyz',
```
```
  title: 'hi there...',
```
```
  style: `
```
```
    background: red; 
```
```
    color:white;
```
```
    font-size: 1.4em;
```
```
  `
```
```
}) el.setAttribute(i, a[i]);
```

Chances are you don’t want to use this unless you are just speed coding, prototyping or playing around

If you do want to set multiple attributes, you’ll likely be doing so in an abstract way with one of the many popular js libs or frameworks.

In my personal projects I usually don’t use DOM related libs or frameworks, so I do this or something like it:

```
function attrs(el, attrs) {
```
```
  for (let i in attrs) {
```
```
    el.setAttribute(i, attrs[i])
```
```
  }
```
```
}
```

I’ll always miss jQuery, used it for many years and found it extremely intuitive and a huge time saver… The above attrs function is just a crappier version of the jQuery attr method. Read more about that here in the docs.

August 24, 2021

// dom // hacks // javascript

Rectangle Intersection

function testRectIntersection(divA, divB) {

  const rectA = divA.getBoundingClientRect();

  const rectB = divB.getBoundingClientRect();

```
 
```
```
  return (
```
```
    rectA.left < rectB.right &&
```
```
    rectA.right > rectB.left &&
```
```
    rectA.top < rectB.bottom &&
```
```
    rectA.bottom > rectB.top
```
```
  );
```
```
}
```
```
 
```

function rect(color, x, y, width = 100, height = 100) {

  const el = document.body.appendChild(document.createElement('div'));

```
  Object.assign(el.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}px`,
```
```
    top: `${y}px`,
```
```
    width: `${width}px`,
```
```
    height: `${height}px`,
```
```
    background: color
```
```
  });
```
```
 
```
```
  return el;
```
```
}
```
```
 
```

const redBox = rect('red', 20, 20, 100, 100);

const mover = rect('green', 130, 20, 100, 100);

// with a `mousemove` only this won't be _great_ on mobile

document.addEventListener('mousemove', e => {

```
  Object.assign(mover.style, {
```

    left: `${e.clientX - parseFloat(mover.style.width) / 2}px`,

    top: `${e.clientY - parseFloat(mover.style.height) / 2}px`

```
  });
```
```
 
```

  if (testRectIntersection(mover, redBox)) {

```
    redBox.style.background = 'blue';
```
```
  } else {
```
```
    redBox.style.background = 'red';
```
```
  }
```
```
});
```

Move your mouse so that the green rectangle touches the red.

This snippet shows how to test the if two non-rotated rectangles are intersecting. The only real part of the code that does this is:

```
rectA.left < rectB.right &&
```
```
rectA.right > rectB.left &&
```
```
rectA.top < rectB.bottom &&
```
```
rectA.bottom > rectB.top
```

With an understanding of how x/y coordinates work on the web, it can be fun to draw this out and figure out why it works on your own.

I’ve used getBoundingClientRect to obtain the rectangles of two divs here. In the rare case where you need to calculate many many intersections frequently, getBoundingClientRect should be avoided if possible as it can get slow for a variety of reasons. The alternative to getBoundingClientRect is to keep track of all the rectangle coordinate and size information yourself.

August 23, 2021

// css // dom // graphics // javascript // math // tricks

Replace with “O”

```
const txt = document.body.appendChild(
```
```
  document.createElement('textarea')
```
```
);
```
```
 
```
```
document.body.style.margin = 0;
```
```
Object.assign(txt.style, {
```
```
  position: 'relative',
```
```
  width: '90%',
```
```
  fontSize: '1.5em',
```
```
  borderRadius: 0,
```
```
  padding: '1em',
```
```
  outline: 'none'
```
```
});
```

txt.setAttribute('placeholder', 'enter some text');

```
 
```

const result = document.body.appendChild(

```
  document.createElement('div')
```
```
);
```
```
 
```
```
Object.assign(result.style, {
```
```
  padding: '1em', 
```
```
  fontSize: '2em'
```
```
});
```
```
 
```
```
txt.addEventListener('input', () => { 
```

  result.innerHTML = txt.value.replace(/[aeiou]/gi, 'o');

```
});
```

This snippet takes input into a textfield and replaces all vowels with the letter “o”. I saw a meme that did something like this with musical instruments piano = poono, guitar = gootor etc..

August 22, 2021

// css // dom // regex // strings

Mini Markdown with Lists

  const isLi = val => val.match(/(^\s+)?- /)

```
 
```
```
  function mark(str) {
```
```
    const lines = str.split`\n`;
```
```
    let wasLi = false
```
```
    let lastDepth = 0;
```
```
    let depth;
```
```
 
```

  for (let i = 0; i < lines.length; i++) {

```
    let curr = lines[i];
```
```
    const line = curr.trim();
```

    const hdr = line.split`#`.length - 1;

```
 
```
```
    if (line === '') {
```
```
      lines[i] = '<br>';
```
```
    } else if (hdr > 0) {
```

      lines[i] = `<h${hdr} style="margin-bottom:0">

        ${curr.replace(/#/g, '')}</h${hdr}>`;

```
    } else if (line === '***') {
```
```
      lines[i] = '<hr>';
```
```
    } else if (isLi(curr)) {
```

      depth = curr.split('-')[0].length + 1;

```
 
```
```
      lines[i] = '';
```
```
      if (depth < lastDepth) {
```

        const diff = (lastDepth - depth) / 2

```
 
```

        lines[i] += '</ul>'.repeat(diff);

```
        lastDepth = depth 
```
```
      }
```
```
 
```

      lines[i] += `${depth > lastDepth ? '<ul>' : ''}

        <li>${curr.replace(/-\s+/, '')}</li>`;

```
 
```
```
      lastDepth = depth;
```
```
 
```
```
      wasLi = true;
```
```
    } else if (wasLi) {
```

      lines[i - 1] = '</ul>\n'.repeat(lastDepth)

```
      wasLi = false
```
```
    }
```
```
  }
```
```
 
```
```
  return lines.join`\n`
```

    .replace(/\*\*(.+)\*\*/gm, '<b>$1</b>')

```
    .replace(/_(.+)_/gm, '<i>$1</i>')
```

    .replace(/~~(.+)~~/gm, '<strike>$1</strike>')

    .replace(/`(.+)`/gm, '<code>$1</code>');

```
}
```
```
 
```
```
// try it out
```
```
 
```

const md = document.body.appendChild(document.createElement('div'));

```
md.style.fontFamily = 'sans-serif';
```
```
md.innerHTML = `
```
```
#Snippet Zone
```
```
 
```

This snippet renders a subset of markdown.

```
 
```
```
- **bold** and _italic text_
```
```
- lists 
```
```
  - this particulate
```
```
    - snippet can render 
```
```
    - nested
```
```
  - lists
```
```
 
```
```
- _**~~strikethrough text~~**_
```
```
 
```

In a real project you will probably want to use

something more complete like the great <a href="https://github.com/markedjs/marked" target="blank" rel="noopener">marked.js</a> library.

```
`;
```
```
md.innerHTML = mark(md.innerHTML);
```

This snippet renders a small subset of markdown. This is the same as a post from the other day with the addition of support for nested lists.

August 21, 2021

// javascript // regex // strings

Line to Line Intersection

// line to line intersection https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection

function lineIntersection(p1, p2, p3, p4) {

```
  let ip = { x: 0, y: 0 };
```

  // rare case where I use `_` in a non-constant variable name

  // to make this easy to read to with the wikipedia info

```
  const x4_x3 = p4.x - p3.x;
```
```
  const y4_y3 = p4.y - p3.y;
```
```
  const x2_x1 = p2.x - p1.x;
```
```
  const y2_y1 = p2.y - p1.y;
```
```
  const x1_x3 = p1.x - p3.x;
```
```
  const y1_y3 = p1.y - p3.y;
```
```
  let nx, ny, dn;
```
```
 
```
```
  nx = x4_x3 * y1_y3 - y4_y3 * x1_x3;
```
```
  ny = x2_x1 * y1_y3 - y2_y1 * x1_x3;
```
```
  dn = y4_y3 * x2_x1 - x4_x3 * y2_y1;
```
```
 
```
```
  nx /= dn;
```
```
  ny /= dn;
```
```
 
```
```
  // has intersection
```

  if (nx >= 0 && nx <= 1 && ny >= 0 && ny <= 1) {

```
    ny = p1.y + nx * y2_y1;
```
```
    nx = p1.x + nx * x2_x1;
```
```
    ip.x = nx;
```
```
    ip.y = ny;
```
```
  } else {
```
```
    // no intersection
```
```
    ip = null;
```
```
  }
```
```
  return ip;
```
```
}
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div'));
```
```
 
```

// hard coding line values for simplicity and ease of understanding

```
el.innerHTML = `
```

  <svg width="100%" height="100%" viewBox="0 0 550 496">

    <path id='path' d="M 10 10 L 300 300 M 100 10 L 160 320" stroke="black" fill='none' vector-effect="non-scaling-stroke"/>

    <rect id="intersecton" x="0" y="0" width="10" height="10" fill="red" />

```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
    }
```
```
  </style>
```
```
`;
```
```
 
```
```
const loc = lineIntersection(
```
```
  {x: 10, y: 10}, {x: 300, y:300},
```
```
  {x: 100, y: 10}, {x: 160, y:320}
```
```
);
```
```
 
```

// subtract half the size of the rect from both axis to center it

intersecton.x.baseVal.value = loc.x - 5;

```
 
```

// @NOTE: using the `id` global `window.intersection`

// is just good for demos - little risky for real stuff

// since it lends itself to easy collision

window.intersecton.y.baseVal.value = loc.y - 5;

Line to line intersection rendered with SVG.

August 20, 2021

// graphics // javascript // math // matrix // svg // tricks

Older Posts

Newer Posts

Set Multiple Attributes (hack)

Rectangle Intersection

Replace with “O”

Mini Markdown with Lists

Line to Line Intersection

Recent

Archive