Remove npm funding advertisements

When I run npm install or update I try to read the results to see if something went wrong. NPM floods this output with funding advertisements making it harder to read. This can be turned off with a config command:

npm config set fund false --location=global

Escape strings for querySelector

You can sanitize strings passed to document.querySelector with CSS.escape

document.querySelectorAll(`.${CSS.escape("hover:bg-blue-400")}`);
=> NodeList(9)

Stimulus action options can preventDefault

Stimulus has action options like :prevent that will call prevent default on an event for you.

<button data-action="checkout#handleClick:prevent">click here</button>

This will cause the button's HTMLEvent to have event.preventDefault() called before it gets passed to the handleClick function. You can also add your own custom options.

The head tag can be referenced directly

Older methods of adding elements to the head of a document would search the document by tag names. Now a days you can reference head directly on document:

const script = document.createElement("script")
document.head.appendChild(script)

Older methods relied on document.getElementsByTagName("head")[0]

Today I learned about setInterval() & setTimeout()

I was shown how to utilize these properly when refreshing a page.

 let reloadIntervalId
  onMount(async () => {
    await load()
    loadSessionStorageData()
    reloadIntervalId = window.setInterval( function() {
      load()
    }, 30000);
  })
  onDestroy(() => {
   clearInterval(reloadIntervalId)
  })

Listen for trackpad pinch events in javascript

Desktop browsers do not implement the gesture events, so trackpads on desktop do not register pinch events like they do on mobile devices. However, pinch events come through as wheel events with the ctrl key depressed events 🤷‍♂️

let scale = 1;

document.body.addEventListener("wheel", function(e) {
  if (e.ctrlKey) {
    scale += e.deltaY * -0.01;
  }
});