HomePostsTagsBitsProjects

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>

20

It’s possible to identify how many separate fingers are touching the screen.

document.body.addEventListener("touchstart", (e) => {
  document.body.textContent = `${e.touches.length} fingers`;
});

19

You can use the (Network Information API)[https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation] to get information about the connection a device is using.

console.log(navigator.connection)


// Prints
NetworkInformation {
  downlink: 10,
  effectiveType: "4g",
  onchange: null,
  rtt: 250,
  saveData: false
}

18

Target the button of an <input> of <type="file"> using the ::file-selector-button selector.

<label for="upload">Select file</label><br />
<input type="file" id="upload" />
[type="file"]::file-selector-button {
  background-color: hotpink;
  padding: 0.5rem 1rem;
  border: 2px solid fuchsia;
  margin-block-end: 1rem;
  display: block;
  border-radius: 3px;
}


[type="file"]::file-selector-button:hover {
  background-color: aqua;
}
Previous Next