)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Fibonacci Triangle Golfed

  1. // by Arnauld - https://codegolf.stackexchange.com/users/58563/arnauld
  2. f=(n,a=b=1,p)=>n?''.padEnd(p)+a+`+${b}=${b+=a}
  3. `+f(n-1,b-a,(a+"").length-~p):''
  4.  
  5. console.log(f(20))

Great golfed solution to this question at codegolf stackexchange by user Arnauld

Thinking about DOM

  1. const liveData = {}
  2. const dom = new Proxy(liveData, {
  3.   get(o, key) {
  4.     if (o[key]) {
  5.       return o[key]
  6.     } else {
  7.       const fn  = node.bind(null, key)
  8.       return fn
  9.     }
  10.   }
  11. });
  12.  
  13. const tags = {}
  14. const isTag = tag => { 
  15.   if (tags[tag] != null) {
  16.     // already calculated
  17.     return tags[tag]
  18.   }
  19.   const result = !/Unknown/.test(document.createElement(tag) + '')
  20.   tags[tag] = result
  21.   return result
  22. }
  23.  
  24. const click = new WeakMap()
  25.  
  26. function pointerUp(e) { 
  27.   const curr = e.target;
  28.   if (!curr) return
  29.  
  30.   const action = click.get(curr)
  31.   if (action) action(e)
  32.  
  33.   // bubble to parent
  34.   if (curr?.parentNode?.tagName != 'BODY') {
  35.     pointerUp({ target: e.target.parentNode })
  36.   }
  37. }
  38.  
  39. document.addEventListener('pointerup', e => {
  40.   pointerUp(e)
  41. })
  42.  
  43. function attrs(el, props) {
  44.   const keys = Reflect.ownKeys(props)
  45.   for (let i = 0; i < keys.length; i++) {
  46.     const key = keys[i];
  47.     const val = props[key]
  48.     if (typeof val != 'function') {
  49.       el.setAttribute(key, val)
  50.     } else if (key === 'click') {
  51.       click.set(el, val)
  52.     }
  53.   }
  54. }
  55.  
  56. const textarea = document.createElement('textarea')
  57.  
  58. function node(type, ...args) {
  59.   let el;
  60.   const namedEl = isTag(type);
  61.   if (namedEl) {
  62.     el = document.createElement(type)
  63.   } else {
  64.     el = document.createElement('div')
  65.     el.className = type
  66.   }
  67.  
  68.   const leng = args.length
  69.   for (let i = 0; i < leng; i++) {
  70.     const arg = args[i]
  71.     if ((i === 1 || leng === 1)
  72.       && typeof arg === 'string') {
  73.         if (arg.includes('&')) {
  74.           textarea.innerHTML = arg
  75.           el.innerText = textarea.innerHTML
  76.         } else { 
  77.           el.innerText = arg
  78.         }
  79.     } else if (i === 0 && typeof arg === 'string') {
  80.       el.classList.add(arg)
  81.     } else { 
  82.       if (typeof arg === 'object') {
  83.         if (arg.el) { 
  84.           el.appendChild(arg.el)
  85.         } else {
  86.           attrs(el, arg)
  87.         }
  88.       } 
  89.     }
  90.   }
  91.   document.body.appendChild(el)
  92.   return { el }
  93. }
  94.  
  95.  
  96. const { header, h1, h2, style, div, button } = dom
  97.  
  98. style(`
  99.   body, html {
  100.     font-family: sans-serif;
  101.   }
  102.   .edit-me {
  103.     margin: 1em;
  104.     outline: 1px solid red;
  105.     padding: .5em;
  106.   }
  107. `)
  108.  
  109. header(
  110.   h1('Dom Thoughts'),
  111.   h2('sub-header', 'Can\'t help playing with this', 
  112.     { style: 'font-style: italic;' }
  113.   )
  114. )
  115. div('main', 
  116.   button('hello', 'Hello', { click: () => alert('hello') }),
  117.   div('edit-me', 'Edit Me', { contentEditable: true })
  118. )

Just playing around with DOM creation syntax, kind of reacty… This is the main part:

  1. const { header, h1, h2, style, div, button } = dom
  2.  
  3. style(`
  4.   body, html {
  5.     font-family: sans-serif;
  6.   }
  7.   .edit-me {
  8.     margin: 1em;
  9.     outline: 1px solid red;
  10.     padding: .5em;
  11.   }
  12. `)
  13.  
  14. header(
  15.   h1('Dom Thoughts'),
  16.   h2('sub-header', 'Can\'t help playing with this', 
  17.     { style: 'font-style: italic;' }
  18.   )
  19. )
  20. div('main', 
  21.   button('hello', 'Hello', { click: () => alert('hello') }),
  22.   div('edit-me', 'Edit Me', { contentEditable: true })
  23. )

What is Clicked?

  1. document.addEventListener('click', e => console.log(e.target))

Try that one in your console and then click on stuff. I use that frequently when debugging…

// dom // tricks // ui

Cut Hole in Canvas (eraser)

  1. document.body.style.background = 'gray';
  2. const canvas = document.createElement('canvas');
  3. const c = canvas.getContext('2d');
  4.  
  5. canvas.width = 300;
  6. canvas.height = 300;
  7.  
  8. c.fillStyle='rgba(255, 0, 0, 0.8)'
  9. c.fillRect(0, 0, canvas.width, canvas.height);
  10.  
  11. c.globalCompositeOperation = 'destination-out';
  12. c.fillStyle = 'black';
  13. c.fillRect(100, 100, 150, 50);
  14.  
  15. document.body.appendChild(canvas);

destination-out is great for creating masks and eraser tools – things like that – in this case a 150×50 rectangle is cut out of a red background.

Acronym Definition Generator

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Acro</title>
  6.  
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <style>
  10.  
  11.       body {
  12.         font-family: sans-serif;
  13.         margin: 3em;
  14.       }
  15.  
  16.       button {
  17.         cursor: pointer;
  18.         font-size: 1em;
  19.         padding: .6em;
  20.         margin-bottom: 2em;
  21.       }
  22.  
  23.       h1 {
  24.         font-size: 3em;
  25.         text-decoration: underline;
  26.       }
  27.  
  28.       hr {
  29.         border: none;
  30.         border-bottom: 1px dashed gray;  
  31.       }
  32.  
  33.       i {
  34.         text-transform: lowercase;
  35.       }
  36.  
  37.       #acro {
  38.         position: relative;
  39.         width: 100%;
  40.         min-width: 350px;
  41.         max-width: 700px;
  42.         margin: 0 auto;
  43.  
  44.       }
  45.  
  46.       input[type=text] {
  47.         padding: .5em;  
  48.         margin-right: 1em;
  49.         text-transform: uppercase;
  50.       }
  51.  
  52.       #go {
  53.         margin-right: .5em;  
  54.       }
  55.  
  56.       #btn {
  57.         float: right;  
  58.       }
  59.  
  60.       .row {
  61.         width: 100%;
  62.         clear: both;
  63.       }
  64.       .uiBreak { display: none; }
  65.  
  66.       @media only screen and (max-width: 600px) {
  67.         body {
  68.           font-size: .8em;
  69.           margin: 1em;
  70.         }
  71.  
  72.       }
  73.  
  74.       @media only screen and (max-width: 400px) {
  75.         .uiBreak { display: block; }
  76.         #btn {
  77.           float: left;
  78.           display: block;
  79.           clear: both;
  80.         }
  81.       }
  82.  
  83.     </style>
  84.   </head>
  85.   <body>
  86.     <div id=acro>
  87.       <h1>Acro</h1>
  88.       <div>
  89.         <input id=input type=text placeholder="enter acronym">
  90.         <button id=go>go...</button>
  91.         <br class=uiBreak>
  92.         <button id=btn>generate random...</button>
  93.       </div>
  94.  
  95.       <div id=acros></div>
  96.     </div>
  97.     <script>
  98. (() => {
  99.  
  100.   const min = 3
  101.   const max = 5
  102.   const diff = max - min
  103.  
  104.   const { random } = Math
  105.  
  106.   const wordsByLetter = {}
  107.   const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split``
  108.   let words;
  109.  
  110.   alphabet.forEach(let => wordsByLetter[let] = [])
  111.  
  112.   console.log('loading...')
  113.  
  114.   fetch('words.txt')
  115.     .then(data => data.text())
  116.     .then(text => {
  117.       console.log('prepping...')
  118.  
  119.       words = text.split(/\s+/m).sort()
  120.  
  121.       const chunk = 500
  122.       const ticks = ~~(words.length / chunk)
  123.  
  124.       let idx = 0
  125.       let count = 0
  126.  
  127.       let interval = setInterval(() => {
  128.         if (count === ticks) {
  129.           start()
  130.           clearInterval(interval)
  131.           return
  132.         }
  133.  
  134.         for (let i = 0; i < chunk; i++) {
  135.           const word = words[idx]
  136.           if (word[0]) {
  137.             const firstLetter = word[0].toUpperCase()
  138.             wordsByLetter[firstLetter]?.push(word)
  139.           }
  140.           idx++
  141.         }
  142.         count++
  143.       }, 1)
  144.     })
  145.  
  146.   function start() {
  147.     console.log('starting...')
  148.  
  149.     const rando = _ => {
  150.       const leng =  ~~(min + diff * random())
  151.       let word = ''
  152.       for (let i = 0; i < leng; i++) {
  153.         word += alphabet[~~(random() * alphabet.length)]
  154.       }
  155.       return word
  156.     }
  157.  
  158.     const gen = custom => {
  159.       if (!custom) return
  160.       custom = custom.toUpperCase()
  161.       const leng = custom.length
  162.       const def = []
  163.  
  164.       for (let i = 0; i < leng; i++) {
  165.         const sourceWords = wordsByLetter[custom[i]]
  166.         def[i] = sourceWords[~~(random() * sourceWords.length)]
  167.       }
  168.       const div = document.createElement`div`
  169.       div.className = 'row'
  170.       div.innerHTML = `
  171.         <h2>${custom}</h2>
  172.         <i>${def.join` `}</i>
  173.         <hr>
  174.       `
  175.       acros.prepend(div)
  176.     }
  177.  
  178.     btn.onclick = () => {
  179.       gen(rando())
  180.     }
  181.  
  182.     go.onclick = () => gen(input.value);
  183.     document.onkeydown = e => {
  184.       if (e.key === 'Enter') gen(input.value);
  185.     }
  186.  
  187.   }
  188. })()
  189.     </script>
  190.   </body>
  191. </html>


A friend of mine had this idea the other night so I coded it up…

Update: I forgot to mention, this uses this list of words from google…

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