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

osx Command Files

  1. #!/bin/bash
  2. cd "$(dirname "$0")"
  3. . ~/.nvm/nvm.sh
  4.  
  5. nvm use stable && npm run dev

Then name that file “whatever.command”. When you double-click it, it’ll launch a terminal and run the command. I pop these in my dock for projects I’m always opening…

// javascript // osx // tricks

Escape HTML

  1. const el = document.createElement('div')
  2. const txt = document.createElement('textarea')
  3. txt.innerHTML = '&times; &copy; <script>alert("bang!")<\/script>'
  4. el.innerText = txt.innerText
  5. document.body.appendChild(el)
  6.  
  7. const theHtml = document.createElement('div')
  8. theHtml.innerText = txt.innerHTML
  9. document.body.appendChild(theHtml)

Just a hack to escape html strings… guessing most would use a lib for this…

// html // strings // tricks

Label Thoughts

  1. main:{
  2.   header:{
  3.     {'Tasker'}
  4.     newCol:{'New Column'}
  5.   }
  6.  
  7.   columns:{
  8.     scroll:{
  9.       NoteCols:{}
  10.     }
  11.   }
  12. }
  13.  
  14. NoteCol:{
  15.   title:{['editable', 'focus']
  16.     close:{
  17.       {'&times;'}
  18.     }
  19.   }
  20.   newNote:{['editable', 'placeholder="New Note..."']}
  21.   hr:{}
  22.   noteContainer:{
  23.     Notes:{}
  24.   }
  25. }
  26.  
  27. Note:{['focus']
  28.   close:{
  29.     {'&times;'}
  30.   }
  31.   checkbox:{}
  32.   content:{['edtiable']}
  33. }
  34.  
  35. console.log('no errors :D');

The above is actually valid javascript, just a bunch of labels, blocks and a few arrays

// javascript // tricks // ui

selectAll Thoughts

  1. const lookup = new WeakMap() 
  2.  
  3. let id = 0;
  4.  
  5. export const els = selectAll(document.body)
  6. export const parentOf = el => lookup.get(el)
  7.  
  8. export function selectAll(parent) {
  9.   const els = { id, el: parent, all: {} }
  10.   const allEls = [...parent.querySelectorAll('*')]
  11.  
  12.   id++
  13.  
  14.   for (let i in allEls) {
  15.     const el = allEls[i]
  16.  
  17.     // any element can lookup `els`
  18.     lookup.set(el, els)
  19.  
  20.     const tag = el.tagName.toLowerCase()
  21.  
  22.     if (el.id) {
  23.       els[el.id] = el
  24.  
  25.       tag === 'template' &&
  26.         (els[el.id + 'Tmpl'] = () => {
  27.           const instanceEl = el.content
  28.             .cloneNode(true)
  29.             .firstElementChild
  30.           return selectAll(
  31.             instanceEl
  32.           )
  33.         })
  34.     }
  35.  
  36.     if (el.classList.length > 0) {
  37.       const name = el.classList[0]
  38.  
  39.       if (!els[name]) { 
  40.         els[name] = el
  41.         els.all[name] = [el]
  42.       } else {
  43.         els.all[name].push(el)
  44.       }
  45.     }
  46.   }
  47.   return els;
  48. }

Whenever I code a vanilla gui for some personal project/experiment I write some variation of this. I did this one a few days back to see how it would work with template tags.

// tricks // ui

charAt

  1. '0123'.charAt('1') // -> '1'
  2. '0123'.charAt(1.45) // -> '1'
  3. '0123'.charAt(true) // -> '1'
  4. '0123'.charAt() // -> '0'
  5. '0123'.charAt(NaN) // -> '0'
  6. '0123'.charAt(-1) // -> ''
  7.  
  8. Number.prototype.charAt = String.prototype.charAt
  9. NaN.charAt() // -> 'N'
  10.  
  11. Boolean.prototype.charAt = Boolean.prototype.charAt
  12. true.charAt() // -> t

Funny snippet from Räphael’s creator Dmitry Baranovskiy’s talk Zen of JavaScript

Here is the part where he talks about this:

// strings // tricks
Older Posts
Newer Posts

Recent

Archive

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