Snippet Zone

React Vanilla

<style>*{ font-family: sans-serif; margin-bottoM: .5em;}</style>

```
 
```
```
<h3>TODO</h3>
```
```
<ul id=todos></ul>
```
```
<label>What needs to be done?<br>
```

  <input id=todo onchange="newTodo()"/><br>

```
</label>
```

<button id=add onclick="newTodo()">Add #1</button>

```
 
```
```
<script>
```
```
  let count = 1
```
```
  function newTodo() {
```
```
    if (todo.value.length > 0) {
```

      todos.innerHTML += `<li>${todo.value}</li>`

```
      todo.value = ''
```
```
      add.innerText = `Add #${++count}`
```
```
    }
```
```
  }
```
```
</script>
```

I don’t really like React… Don’t get me wrong, I don’t mind it and I even kind of like using it – there’s something fun about it… But it’s surprising to me that UI work is still so bulky… I think React and most other UI libraries are overly complex… Every now and then I do evil style vanilla js versions of the React homepage examples as a sort of rebellion 😀 This is the React version of the above snippet:

```
class TodoApp extends React.Component {
```
```
  constructor(props) {
```
```
    super(props);
```

    this.state = { items: [], text: '' };

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

```
  }
```
```
 
```
```
  render() {
```
```
    return (
```
```
      <div>
```
```
        <h3>TODO</h3>
```

        <TodoList items={this.state.items} />

        <form onSubmit={this.handleSubmit}>

```
          <label htmlFor="new-todo">
```
```
            What needs to be done?
```
```
          </label>
```
```
          <input
```
```
            id="new-todo"
```

            onChange={this.handleChange}

```
            value={this.state.text}
```
```
          />
```
```
          <button>
```

            Add #{this.state.items.length + 1}

```
          </button>
```
```
        </form>
```
```
      </div>
```
```
    );
```
```
  }
```
```
 
```
```
  handleChange(e) {
```

    this.setState({ text: e.target.value });

```
  }
```
```
 
```
```
  handleSubmit(e) {
```
```
    e.preventDefault();
```
```
    if (this.state.text.length === 0) {
```
```
      return;
```
```
    }
```
```
    const newItem = {
```
```
      text: this.state.text,
```
```
      id: Date.now()
```
```
    };
```
```
    this.setState(state => ({
```

      items: state.items.concat(newItem),

```
      text: ''
```
```
    }));
```
```
  }
```
```
}
```
```
 
```

class TodoList extends React.Component {

```
  render() {
```
```
    return (
```
```
      <ul>
```
```
        {this.props.items.map(item => (
```

          <li key={item.id}>{item.text}</li>

```
        ))}
```
```
      </ul>
```
```
    );
```
```
  }
```
```
}
```
```
 
```
```
root.render(<TodoApp />);
```

April 3, 2022

// dom // globals // hacks // humor // ui

W3Schools Output Tag

```

```
```
<!DOCTYPE html>
```
```
<html>
```
```
<body>
```
```
 
```
```
<h1>The output element</h1>
```
```
 
```

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

```
<input type="range" id="a" value="50">
```

+<input type="number" id="b" value="25">

```
=<output name="x" for="a b"></output>
```
```
</form>
```
```
 
```

<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>

```
 
```
```
</body>
```
```
</html>
```

I like w3Schools.

This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…

March 11, 2022

// hacks // html // humor // speedcoding

Odd Gradient Notation

```
// "Being clever is not clever"
```
```
// -- Bjarne Stroustrup
```
```
D = document
```
```
ang = {
```
```
  '|': 180,
```
```
  '-': 90,
```
```
  '\\': 135,
```
```
  '/': 225
```
```
}
```
```
 
```
```
box = def => {
```
```
  def = def.split(/\s+/)
```
```
  form = def.length
```
```
  I = i => parseInt(def[i], 16)
```
```
 
```

  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},

    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},

    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}

```
  ][form]()
```
```
 
```
```
  c = c.split``
```
```
 
```
```
  ca = c[0]
```
```
  ca = ca+ca+ca
```
```
  cD = ang[c[1]]
```
```
  cb = c[2]
```
```
  cb = cb+cb+cb 
```
```
 
```
```
  D.body.appendChild(
```
```
    D.createElement`div`
```
```
  ).style = `
```

    position: absolute; left: ${x}px; top: ${y}px;

```
    width: ${w}px; height: ${h}px;
```

    background: linear-gradient(${cD}deg, #${ca}, #${cb})

```
  `
```
```
}
```
```
 
```
```
const parse = prog => prog.trim()
```
```
  .split(/\n+/m)
```
```
  .map(line => box(line.trim()))
```
```
 
```
```
parse(`
```
```
  0 64 0/f
```
```
  64 64 0\\f
```
```
  a0 f0 30 54 f\\0
```
```
  0 6f 20 60 0-c
```
```
  f 7f 20 60 0|c
```
```
  1f 8f 30 30 c/0
```
```
`)
```

Just playing around… odd micro-gradient notation:

```
'0 64 0/f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0/f = gradient black to white top right to bottom left

```
 
```
```
'64 64 0\\f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0\\f = black to to white gradient top left to bottom right

```
 
```
```
'0 6f 20 60 0-c'
```
```
// x=0 y=0x6f width=0x20 height=0x60
```

// 0-c = gradient black to grey (#ccc) left to right

```
 
```
```
// etc... ( | ) is top to bottom grad
```

February 27, 2022

// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

Fake RNG

```
let anchors
```
```
let idx
```
```
let leng = 10
```
```
let size = 200
```
```
let px = 0
```
```
let py = 0
```
```
 
```
```
function seed() {
```
```
  idx = 0
```
```
  anchors = (Date.now() + '').split``
```
```
    .reverse()
```
```
    .map(v => parseFloat(v) / 10)
```
```
    .splice(0, leng)
```
```
}
```
```
 
```
```
let last = 0
```
```
let zoom = 1
```
```
function rand() {
```
```
  if (idx > size * size) seed()
```
```
 
```
```
  px += zoom
```
```
  py += ~~(px / size)
```
```
 
```
```
  if (px >= size) px = 0
```
```
  if (py >= size) py = 0
```
```
 
```
```
  const point = {
```
```
    x: anchors[idx % leng],
```
```
    y: anchors[(idx + 1) % leng]
```
```
  }
```
```
  idx++
```
```
 
```
```
  let dists = []
```

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

```
    let dx = px - anchors[i] * size
```
```
    let dy = py - anchors[i + 1] * size
```

    dists.push(Math.sqrt(dx * dx + dy * dy))

```
  }
```
```
  dists.sort()
```
```
  last += (dists[0] / size - last) / 4
```
```
  return last
```
```
}
```
```
 
```
```
seed()
```
```
 
```
```
let d = document
```
```
let b = d.body
```
```
with (b.appendChild(
```

  Object.assign(d.createElement`canvas`, { width: 400, height: 400 })

```
).getContext`2d`) {
```
```
  fillStyle = 'black'
```
```
  fillRect(0, 0, 400, 400)
```
```
 
```
```
  for (let i = 0; i < 200; i++) {
```
```
    for (let j = 0; j < 200; j++) {
```
```
      const c = rand() * 255
```

      fillStyle = `rgb(${c}, ${c}, ${c})`

```
      fillRect(j * 2, i * 2, 1, 2)
```
```
    }
```
```
  }
```
```
}
```

Another one for genuary “Create your own pseudo-random number generator and visually check the results.”

January 24, 2022

// canvas // graphics // hacks // math // random // speedcoding

Repeatedly Refresh Webpage

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
  <meta charset="UTF-8">
```

  <meta http-equiv="refresh" content="2">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

```
  <title>Title</title>
```
```
</head>
```
```
<body>
```
```
  <script>
```

    document.body.innerHTML = Math.random() * 100;

```
  </script>
```
```
</body>
```
```
</html>
```

Refresh a webpage every two seconds with:

```
<meta http-equiv="refresh" content="2">
```

January 16, 2022

// hacks // html

Older Posts

Newer Posts

React Vanilla

W3Schools Output Tag

Odd Gradient Notation

Fake RNG

Repeatedly Refresh Webpage

Recent

Archive