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

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.

// canvas // color // graphics // tricks

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
Older Posts
Newer Posts

Recent

Archive

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