Skip to content


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>


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;


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 });


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

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


You can use JavaScript Vibration API to vibrate devices.

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


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>


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`;


You can use the (Network Information API)[] to get information about the connection a device is using.

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


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;


CSS: When an item is being hovered, select all the other items, but not the one that is being hovered.

.grid:has(.item:hover) .item:not(:hover) {
mix-blend-mode: luminosity;