Boilerplate for simple demo apps, based on mvp.css
classList is a set of CSS classes.
document.body.classList.add("active");
document.body.classList.remove("active");The built-in combo box can source from a static or dynamically-created list.
<input type="text" name="fruit" list="fruit-list" />
<datalist id="fruit-list">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</datalist>You can create collapsible menus or trees with details.
<details>
<summary>Debug Info</summary>
This info is hidden until revealed by clicking the arrow.
</details><details name="beefy" open>
<summary>Ham</summary>
Made from the pig.
</details>
<details name="beefy">
<summary>Burger</summary>
Made from the cow.
</details>
<details>
<summary>Hotdog</summary>
Made from... something.
</details>There are native dictionary-style definition lists.
<dl>
<dt>Hogwarts</dt>
<dd>A school for wizards.</dd>
<dt>Gryffindor</dt>
<dd>
A house for the brave ones. They get 10 points almost every time. Except for
when they don't.
</dd>
<dt>Hufflepuff</dt>
<dd>A house for the delicate ones.</dd>
<dt>Ravenclaw</dt>
<dd>A house for the smart ones.</dd>
<dt>Slytherin</dt>
<dd>A house for the cunning ones.</dd>
</dl>- https://caniuse.com/mdn-html_elements_dl
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
You can use either <picture> or srcset= to load multiple images.
<picture>
<source srcset="logo-2x.png" media="(min-width: 800px)" />
<source srcset="logo-1x.png" media="(max-width: 799px)" />
<img src="logo-default.png" alt="The ACME Logo" />
</picture><img
srcset="logo-1x.png 1x, logo-2x.png 2x"
sizes="(max-width: 600px) 100vw, 50vw"
src="logo-default.png"
alt="The ACME Logo"
/>The browser has a built-in modal dialog.
<dialog onclick="document.querySelector('dialog').close();">
Woo-hoo! That tickles!
</dialog>
<button onclick="document.querySelector('dialog').show();">Click me</button>You can use HTML Templates to efficiently rewrite or add contents in JavaScript.
<div>
<template>
<div>A place for document fragments and shadow DOM</div>
</template>
</div>- https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
- https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
The browser has a built-in, efficient css selector that can be used instead of
getElementById() and similar.
let $dialog = document.querySelector(
'section.active dialog[data-name="popup"]',
);
$dialog.show();let nodeList = document.querySelectorAll("dialog");
let $dialogs = Array.from(nodeList);document.querySelector("dialog").querySelector("button");- https://caniuse.com/mdn-api_element_queryselectorall
- https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
- https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
Requesting to batch DOM manipulations in an animation frame via
requestAnimationFrame(fn) can prevent unwanted redraws and boost performance.
requestAnimationFrame(function () {
document.body.classList.add("ready");
});- https://caniuse.com/requestanimationframe
- https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
String-building HTML and inserting adjacent to an element can be very efficient.
(beforebegin, afterbegin, beforeend, 'afterend')
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->- https://caniuse.com/insertadjacenthtml
- https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
textContent is an efficient replacement for innerText.
document.body.textContent = "Hello, World!";