)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

x.x()

  1. function x() {
  2.   return { x }
  3. }
  4. x.x = x
  5.  
  6. x(x(x.x.x).x(x)).x(
  7.   x().x(x.x())
  8. ).x
  9. .x
  10. .x
  11. .x.x.x.x()
// hacks // tricks

React Vanilla

  1. <style>*{ font-family: sans-serif; margin-bottoM: .5em;}</style>
  2.  
  3. <h3>TODO</h3>
  4. <ul id=todos></ul>
  5. <label>What needs to be done?<br>
  6.   <input id=todo onchange="newTodo()"/><br>
  7. </label>
  8. <button id=add onclick="newTodo()">Add #1</button>
  9.  
  10. <script>
  11.   let count = 1
  12.   function newTodo() {
  13.     if (todo.value.length > 0) {
  14.       todos.innerHTML += `<li>${todo.value}</li>`
  15.       todo.value = ''
  16.       add.innerText = `Add #${++count}`
  17.     }
  18.   }
  19. </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:

  1. class TodoApp extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = { items: [], text: '' };
  5.     this.handleChange = this.handleChange.bind(this);
  6.     this.handleSubmit = this.handleSubmit.bind(this);
  7.   }
  8.  
  9.   render() {
  10.     return (
  11.       <div>
  12.         <h3>TODO</h3>
  13.         <TodoList items={this.state.items} />
  14.         <form onSubmit={this.handleSubmit}>
  15.           <label htmlFor="new-todo">
  16.             What needs to be done?
  17.           </label>
  18.           <input
  19.             id="new-todo"
  20.             onChange={this.handleChange}
  21.             value={this.state.text}
  22.           />
  23.           <button>
  24.             Add #{this.state.items.length + 1}
  25.           </button>
  26.         </form>
  27.       </div>
  28.     );
  29.   }
  30.  
  31.   handleChange(e) {
  32.     this.setState({ text: e.target.value });
  33.   }
  34.  
  35.   handleSubmit(e) {
  36.     e.preventDefault();
  37.     if (this.state.text.length === 0) {
  38.       return;
  39.     }
  40.     const newItem = {
  41.       text: this.state.text,
  42.       id: Date.now()
  43.     };
  44.     this.setState(state => ({
  45.       items: state.items.concat(newItem),
  46.       text: ''
  47.     }));
  48.   }
  49. }
  50.  
  51. class TodoList extends React.Component {
  52.   render() {
  53.     return (
  54.       <ul>
  55.         {this.props.items.map(item => (
  56.           <li key={item.id}>{item.text}</li>
  57.         ))}
  58.       </ul>
  59.     );
  60.   }
  61. }
  62.  
  63. root.render(<TodoApp />);
// dom // globals // hacks // humor // ui

W3Schools Output Tag

  1. <!-- from w3schools.com -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5.  
  6. <h1>The output element</h1>
  7.  
  8. <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  9. <input type="range" id="a" value="50">
  10. +<input type="number" id="b" value="25">
  11. =<output name="x" for="a b"></output>
  12. </form>
  13.  
  14. <p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>
  15.  
  16. </body>
  17. </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…

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

Odd Gradient Notation

  1. // "Being clever is not clever"
  2. // -- Bjarne Stroustrup
  3. D = document
  4. ang = {
  5.   '|': 180,
  6.   '-': 90,
  7.   '\\': 135,
  8.   '/': 225
  9. }
  10.  
  11. box = def => {
  12.   def = def.split(/\s+/)
  13.   form = def.length
  14.   I = i => parseInt(def[i], 16)
  15.  
  16.   ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},
  17.     _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},
  18.     _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}
  19.   ][form]()
  20.  
  21.   c = c.split``
  22.  
  23.   ca = c[0]
  24.   ca = ca+ca+ca
  25.   cD = ang[c[1]]
  26.   cb = c[2]
  27.   cb = cb+cb+cb 
  28.  
  29.   D.body.appendChild(
  30.     D.createElement`div`
  31.   ).style = `
  32.     position: absolute; left: ${x}px; top: ${y}px;
  33.     width: ${w}px; height: ${h}px;
  34.     background: linear-gradient(${cD}deg, #${ca}, #${cb})
  35.   `
  36. }
  37.  
  38. const parse = prog => prog.trim()
  39.   .split(/\n+/m)
  40.   .map(line => box(line.trim()))
  41.  
  42. parse(`
  43.   0 64 0/f
  44.   64 64 0\\f
  45.   a0 f0 30 54 f\\0
  46.   0 6f 20 60 0-c
  47.   f 7f 20 60 0|c
  48.   1f 8f 30 30 c/0
  49. `)

Just playing around… odd micro-gradient notation:

  1. '0 64 0/f'
  2. // x=0 y=0 width=0x64 height=0x64
  3. // 0/f = gradient black to white top right to bottom left
  4.  
  5. '64 64 0\\f'
  6. // x=0 y=0 width=0x64 height=0x64
  7. // 0\\f = black to to white gradient top left to bottom right
  8.  
  9. '0 6f 20 60 0-c'
  10. // x=0 y=0x6f width=0x20 height=0x60
  11. // 0-c = gradient black to grey (#ccc) left to right
  12.  
  13. // etc... ( | ) is top to bottom grad
// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

Fake RNG

  1. let anchors
  2. let idx
  3. let leng = 10
  4. let size = 200
  5. let px = 0
  6. let py = 0
  7.  
  8. function seed() {
  9.   idx = 0
  10.   anchors = (Date.now() + '').split``
  11.     .reverse()
  12.     .map(v => parseFloat(v) / 10)
  13.     .splice(0, leng)
  14. }
  15.  
  16. let last = 0
  17. let zoom = 1
  18. function rand() {
  19.   if (idx > size * size) seed()
  20.  
  21.   px += zoom
  22.   py += ~~(px / size)
  23.  
  24.   if (px >= size) px = 0
  25.   if (py >= size) py = 0
  26.  
  27.   const point = {
  28.     x: anchors[idx % leng],
  29.     y: anchors[(idx + 1) % leng]
  30.   }
  31.   idx++
  32.  
  33.   let dists = []
  34.   for (let i = 0; i < anchors.length; i += 2) {
  35.     let dx = px - anchors[i] * size
  36.     let dy = py - anchors[i + 1] * size
  37.     dists.push(Math.sqrt(dx * dx + dy * dy))
  38.   }
  39.   dists.sort()
  40.   last += (dists[0] / size - last) / 4
  41.   return last
  42. }
  43.  
  44. seed()
  45.  
  46. let d = document
  47. let b = d.body
  48. with (b.appendChild(
  49.   Object.assign(d.createElement`canvas`, { width: 400, height: 400 })
  50. ).getContext`2d`) {
  51.   fillStyle = 'black'
  52.   fillRect(0, 0, 400, 400)
  53.  
  54.   for (let i = 0; i < 200; i++) {
  55.     for (let j = 0; j < 200; j++) {
  56.       const c = rand() * 255
  57.       fillStyle = `rgb(${c}, ${c}, ${c})`
  58.       fillRect(j * 2, i * 2, 1, 2)
  59.     }
  60.   }
  61. }

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

// canvas // graphics // hacks // math // random // speedcoding
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}