Snippet Zone

console.log Hijack

```
const log = console.log;
```

const consoleUI = document.body.appendChild(

```
  document.createElement('div')
```
```
);
```
```
document.body.style.margin = 0;
```
```
Object.assign(consoleUI.style, {
```
```
  position: 'fixed',
```
```
  bottom: 0,
```
```
  width: '100%',
```
```
  height: '30%',
```
```
  maxHeight: '450px',
```
```
  minHeight: '200px',
```
```
  background: 'rgb(68, 68, 81)',
```
```
  overflow: 'scroll'
```
```
});
```
```
function consoleRow(str) {
```

  const row = document.createElement('div');

```
  consoleUI.prepend(row);
```
```
  row.innerText = str;
```
```
  Object.assign(row.style, {
```
```
    padding: '.5em',
```
```
    fontFamily: 'sans-serif',
```
```
    color: 'white',
```

    borderBottom: '1px solid rgba(255, 255, 255, .1)',

```
    whiteSpace: 'pre-wrap'
```
```
  });
```
```
}
```
```
 
```
```
console.log = (...args) => {
```
```
  const formatted = args.map(val => {
```
```
    return typeof val === 'object' ? 
```

      JSON.stringify(val, null, 2) : val;

```
  });
```
```
  consoleRow(formatted.join(' '));
```
```
  log.apply(console, args);
```
```
};
```
```
 
```
```
// test it out
```
```
 
```
```
console.log(1, 2, 3, 4);
```
```
console.log(new Date());
```
```
 
```
```
const someObject = {
```
```
  test: 123,
```
```
  testing: { x: 1, y: 2, z: 3 }
```
```
};
```
```
console.log(someObject);
```
```
 
```
```
console.log(3, 2, 1, 0);
```

I’m thinking about adding a little fake console to the Snippet Zone Quick Editor – just whipped this up as a proof of concept – something like this should work…

August 30, 2021

// css // hacks // javascript // meta // strings // tricks // ui

Range Slider and Progress Bar

```
const NUM = 8;
```
```
const NUM_M_1 = NUM - 1;
```

const ui = document.createElement('div')

```
ui.innerHTML = `
```
```
  <div class="ui">
```
```
    <div class="progress" data-ref>
```

      <div class="progressFill" data-ref></div>

```
    </div>
```
```
    <div class="text" data-ref>
```
```
    0% of 100%
```
```
    </div>
```
```
 
```
```
    <div class="dots" data-ref>
```
```
    ${
```
```
      `<div></div>`.repeat(NUM)
```
```
    }
```
```
    </div>
```
```
 
```
```
    <label>
```
```
      drag the slider...
```

      <input class="slider" type="range" min="0" max="100" step="1" value="0" data-ref/>

```
    </label>
```
```
  </div>
```
```
  <style>
```
```
    body {
```
```
      font-family: sans-serif;
```
```
    }
```
```
    .progress, .dots {
```
```
      position: relative;
```
```
      width: 80%;
```
```
      margin: 0 auto;
```
```
      height: 30px;
```
```
      border: 1px solid black;
```
```
    }
```
```
    .progressFill {
```
```
      height: 100%;
```
```
      width: 0;
```
```
      background: red;
```
```
    }
```
```
    .text {
```
```
      padding: 1em;
```
```
      background: #ccc;
```
```
      margin: .5em;
```
```
      font-weight: bold;
```
```
    }
```
```
    label {
```
```
      display: block;
```
```
      margin: 1em;
```
```
    }
```
```
    .slider {
```
```
      cursor: pointer;
```
```
    }
```
```
    .dots {
```
```
      border: none;
```
```
    }
```
```
    .dots div {
```
```
      height: 100%;
```
```
      width: ${100 / NUM}%;
```
```
      float: left;
```

      transition: background 400ms ease-out;

```
      background: transparent;
```
```
      border-radius: 500px;
```

      box-shadow: inset 0 0px 0 3px blue;

```
    }
```
```
    .dots div:nth-child(1) {
```
```
      background: red;
```
```
    }
```
```
 
```
```
  </style>
```
```
`;
```
```
document.body.appendChild(ui);
```
```
 
```
```
// select everything with a `data-ref`
```
```
const els = {};
```

;[...document.querySelectorAll('[data-ref]')]

```
  .forEach(el => {
```
```
    els[el.classList[0]] = el;
```
```
  });
```
```
 
```
```
function update(e) {
```
```
 
```
```
  // normal prog bar
```
```
  const val = e.target.value;
```

  els.progressFill.style.width = `${val}%`;

```
  els.text.innerHTML = `
```
```
    ${val}% of 100%
```
```
  `;
```
```
 
```
```
  // segmented dot prog bar
```

  const idx = Math.floor(val / (100 / NUM));

```
  if (idx < NUM) { 
```
```
    for (let i = 0; i < NUM; i++) {
```
```
      els.dots.children[i]
```

        .style.background = i <= idx ? 'red' : 'white'

```
    }
```
```
  }
```
```
}
```
```
 
```

els.slider.addEventListener('input', update);

els.slider.addEventListener('change', update);

Drag slider and watch two progress bars and a text readout update. There are some interesting vanilla tricks in this one.

This trick and a variety of variations on it is pretty powerful:

```
const els = {};
```

[...document.querySelectorAll('[data-ref]')].forEach(el => {

```
  els[el.classList[0]] = el;
```
```
});
```

August 26, 2021

// css // dom // graphics // javascript // math // strings // tricks // ui

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

Mini Markdown Parser

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

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

```
    const 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 (line.startsWith('- ')) {
```

      lines[i] = `${!wasLi ? '<ul>' : ''}

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

```
      wasLi = true;
```
```
    } else if (wasLi) {
```
```
      lines[i - 1] += '</ul>\n';
```
```
      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 = `# Mini Markdown Subset
```
```
 
```
```
This is a subset of markdown stuff
```
```
 
```
```
## It includes
```
```
 
```
```
- headers
```
```
- **bold styles**
```

- _italic styles, <br> multiline fine..._

```
- \`code style\`
```
```
 
```

Other than ~~strikethrough~~ that is pretty much it... oh and **hr** tags

```
***
```
```
***
```

_here is some italic text with some bold text **nested** <br>within it etc..._

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

This code takes a string and formats a few parts of it with markdown syntax. This only handles a small subset of actual markdown.

I was thinking about markdown in code comments last night as I was working on a forthcoming snippet.zone github repo. Anyway, I decided to speed-code the main things I find myself using in markdown so that maybe I can do markdown formatted comments at some point…

August 19, 2021

// javascript // regex // strings // tricks

Older Posts

Newer Posts

console.log Hijack

Range Slider and Progress Bar

Replace with “O”

Mini Markdown with Lists

Mini Markdown Parser

Recent

Archive