HomePostsTagsBitsProjects

30

You can inspect the X (clear all) that shows up when you type in <input type="search" /> by enabling “Show user agent shadow DOM” in DevTools under “preferences”.

29

Code snippets: Svelte action that redirect focus to element when a character key is pressed.

function keyRedirect(node: HTMLElement) {
  function handleKeydown(e: KeyboardEvent) {
    if (node === document.activeElement) {
      return;
    }
    if (e.code.match(/\w/g)) {
      node.focus();
    }
  }
  window.addEventListener("keydown", handleKeydown);
  return {
    destroy() {
      window.removeEventListener("keydown", handleKeydown);
    },
  };
}

28

You can remove an element’s default styling with a single line of CSS.

button {
  all: unset;
}

27

You can use the :scope pseudo class to select direct children of an element with .querySelectorAll().

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>


<p>D</p>

With the HTML above, you can do:

console.log(document.body.querySelectorAll("*"));
// NodeList(5) [ul, li, li, li, p]


console.log(document.body.querySelectorAll(":scope > *"));
// NodeList(2) [ul, p]

26

You can mailto multiple email addresses.

<!-- comma separated list without spaces and/or url encoded with %20 -->
<a href="mailto:[email protected],[email protected]"> Send email </a>


<!-- or with ?to= parameter -->
<a href="mailto:[email protected][email protected]"> Send email </a>

25

Adding an i before the closing bracket in CSS attribute selector causes the value to be compared case-insensitively.

<button class="mybutton">Send</button>
<!-- red border -->
<button class="myButton">Send</button>
<!-- green border -->

With the HTML above, we can do this:

[class*="button" i] {
  /* matches mybutton and myButton */
  border: 10px solid green;
}


[class*="button"] {
  /* matches only mybutton */
  border-color: red;
}

24

You can add the option { once: true } to an event listener to automatically remove it when has been invoked.

btn.addEventListener("click", handleClick, { once: true });

23

JSON.stringify takes 3 parameters. The third parameter can be used to pretty-print the output.

JSON.stringify({ n: 4 }, null, 2);

22

You can use JavaScript Vibration API to vibrate devices.

// Vibrate for 200ms
window.navigator.vibrate(200);


// Vibrate for 200ms, pause for 100ms, vibrate for 300ms
window.navigator.vibrate([200, 100, 300]);

21

You can change the filename of a downloadable file by defining a value in the download attribute.

<a href="file_9081241377.pdf" download="report.pdf"> Download Report </a>
Previous Next