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

Mutation Observer

  1. // Select the node that will be observed for mutations
  2. const targetNode = document.getElementById('some-id');
  3.  
  4. // Options for the observer (which mutations to observe)
  5. const config = { attributes: true, childList: true, subtree: true };
  6.  
  7. // Callback function to execute when mutations are observed
  8. const callback = function(mutationsList, observer) {
  9.     // Use traditional 'for loops' for IE 11 (goodbye IE11!!!!)
  10.     for(const mutation of mutationsList) {
  11.         if (mutation.type === 'childList') {
  12.             console.log('A child node has been added or removed.');
  13.         }
  14.         else if (mutation.type === 'attributes') {
  15.             console.log('The ' + mutation.attributeName + ' attribute was modified.');
  16.         }
  17.     }
  18. };
  19.  
  20. // Create an observer instance linked to the callback function
  21. const observer = new MutationObserver(callback);
  22.  
  23. // Start observing the target node for configured mutations
  24. observer.observe(targetNode, config);
  25.  
  26. // Later, you can stop observing
  27. observer.disconnect();

This is pure gold if you haven’t used it… (from MDN)

// dom // events // graphics // html // javascript // ui

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

Toggle a Class

  1. // lazy hack for css
  2. document.body.innerHTML = `
  3.   <style> 
  4.     button { 
  5.       cursor: pointer; 
  6.     }
  7.     .red { 
  8.       background-color: red; 
  9.     } 
  10.   </style>
  11. `
  12.  
  13. const btn = document.body.appendChild(
  14.   Object.assign(
  15.     document.createElement('button'), 
  16.     { innerText: 'click me' }
  17.   )
  18. )
  19.  
  20. btn.addEventListener('click', e => {
  21.   e.target.classList.toggle('red')
  22. })

classList.toggle brings back memories…

// css // dom // ui

PointerUp Before Click

  1. document.body.innerHTML += 'click/tap anywhere<br>'
  2.  
  3. document.addEventListener('click', () => {
  4.   document.body.innerHTML += 'click<br>'
  5. })
  6.  
  7. document.addEventListener('pointerup', () => {
  8.   document.body.innerHTML += 'pointerup<br>'
  9. })

pointerup fires before click

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
snippet.zone ~ 2021-22 /// {s/z}