What’s new for web developers

// Web Animations API Code Example

let needle = document.getElementById("needle");
let logo = document.getElementById("logo");
logo.addEventListener("click", () => {
    needle.animate({
        transform: [
            "rotateX(35deg) rotateZ(13deg)", 
            "rotateX(35deg) rotateZ(733deg)",
        ],
        easing: ["ease-out"],
    }, 800);
});

// Resize Observer Example

let formatPanelObserver = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
        let container = entry.target;
        container.classList.toggle("small", entry.contentRect.width < 175);
   }
});

formatPanelObserver.observe(document.getElementById("format-panel"));

// Programmatic copy
copyButtonElement.addEventListener("click", (event) => {
    navigator.clipboard.writeText("Plain text to copy.").then(() => {
       // Successful copy
    }, () => {
       // Copy failed
    });
});

// Programmatic copy
copyButtonElement.addEventListener("click", (event) => {
    navigator.clipboard.writeText("Plain text to copy.").then(() => {
       // Successful copy
    }, () => {
       // Copy failed
    });
});

// Programmatic paste
pasteButtonElement.addEventListener("click", (event) => {
    navigator.clipboard.readText().then((clipText) => {
        document.querySelector(".editor").innerText += clipText);
    });
});

<template id="format-button">
    <button class="format">
        <span class="icon"></span>
        <span class="label"></span>
    </button>
</template>

let template = document.getElementById("format-button");
window.customElements.define(template.id, class extends HTMLElement {
    constructor() {
        super();

        this.attachShadow({mode: "open"});
        let newButtonElement = template.content.cloneNode(true);

        let parts = newButtonElement.querySelectorAll("span");
        parts[0].textContent = this.getAttribute("data-icon");
        parts[1].textContent = this.textContent;

        this.shadowRoot.appendChild(newButtonElement);
        this.addEventListener("click", this.handleClick.bind(this));
    }
});

<format-button id="bold" data-icon="B">Bold</format-button>
<format-button id="italic" data-icon="I">Italic</format-button>
<format-button id="underline" data-icon="U">Underline</format-button>
<format-button id="strikethrough" data-icon="S">Strikethrough</format-button>
<format-button id="paste" data-icon="&#x1f4cb;">Paste</format-button>

<template id="format-button">
    <button class="format">
        <span class="icon"></span>
        <span class="label"></span>
    </button>
</template>

<template id="format-button">
    <button class="format">
        <span part="icon" class="icon"></span>
        <span part="label" class="label"></span>
    </button>
</template>

#bold::part(icon) {
    color: var(--formatting-button-icon-color);
    font-weight: bold;
}

#italic::part(icon) {
    color: var(--formatting-button-icon-color);
    font-style: italic;
}

#underline::part(icon) {
    color: var(--formatting-button-icon-color);
    text-decoration: underline;
}

<div id="editor" contenteditable="true" enterkeyhint="send"></div>

font-family: system-ui;
font-family: ui-sans-serif;
font-family: ui-serif;
font-family: ui-monospace;
font-family: ui-rounded;

body {
    font-family: system-ui;
    font-family: ui-sans-serif;
}

body {
   font-family: ui-serif;
}

body {
   font-family: ui-monospace;
}

body {
   font-family: ui-rounded;
}

code {
    line-break: auto;
}

code {
    line-break: anywhere;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 3em;
}

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
    margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 3em;
}

h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
h2 + h3, h2 + h3, h2 + h4, h2 + h5, h2 + h6,
h3 + h4, h3 + h3, h3 + h4, h3 + h5, h3 + h6,
h4 + h5, h4 + h3, h4 + h4, h4 + h5, h4 + h6,
h5 + h6, h5 + h3, h5 + h4, h5 + h5, h5 + h6 {
    margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 3em;
}

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}

:is(.intro, .pullquote, #hero) + p {
    text-transform: uppercase;
}

h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
    text-transform: none;
}

:where(.intro, .pullquote, #hero) + p {
    text-transform: uppercase;
}
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
    text-transform: none;
}

<picture>
  <source srcset="example.webp" type="image/webp">
  <img src="example.jpg" alt="Example Image">
</picture>

<picture>
  <source srcset="example.webp" type="image/webp">
  <img src="example.jpg" alt="Example Image">
</picture>

Accept: image/webp,image/png,image/svg+xml,image/*;…

<img src="MexicoCity.png">

<img src="MexicoCity.png" width="560" height="747">

image-orientation: from-image;

image-orientation: none;

<style>
@media only screen (dynamic-range: high) {
    /* HDR-only CSS rules */
}
</style>

<style>
@media only screen (dynamic-range: high) {
    /* HDR-only CSS rules */
}
</style>

<script>
if (window.matchMedia("dynamic-range: high")) {
    // HDR-specific JavaScript
}
</script>

<video id="videoElement" src="https://site.example/video.mp4"></video>
<button id="deviceButton">Send video to a remote device</button>

<script>
    let videoElement = document.getElementById("videoElement");
    let deviceButton = document.getElementById("deviceButton");
    deviceButton.addEventListener("click", (event) => {
        videoElement.remote.prompt().then(updateRemotePlaybackState);
    });
</script>

<video id="videoElement" src="https://site.example/video.mp4"></video>
<button id="pipButton">Enter picture-in-picture mode</button>

<script>
    let videoElement = document.getElementById("videoElement");
    let pipButton = document.getElementById("pipButton");
    pipButton.addEventListener("click", (event) => {
        videoElement.requestPictureInPicture().then(handlePictureInPicture);
    });
</script>

let bigInt = BigInt(Number.MAX_SAFE_INTEGER);
// 9007199254740991n

console.log(8n / 2n);
// 4n

console.log(9n / 2n);
// 4n

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName ?? "Unknown";
        this.lastName = lastName ?? "Unknown";
        this.age = age ?? NaN;
   }
}

console.log(new Person());  
// { firstName: "Unknown", lastName: "Unknown", age: NaN }

console.log(new Person(false, false, true));
// { firstName: false, lastName: false, age: true }

console.log(new Person("John", "", 0));  
// { firstName: "John", lastName: "", age: 0 }

console.log(new Person("John", "Appleseed", 42));  
// { firstName: "John", lastName: "Appleseed", age: 42 }

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName ?? "Unknown";
        this.lastName = lastName ?? "Unknown";
        this.age = age ?? NaN;
        this.name = { firstName: this.firstName, lastName: this.lastName };
  }
}

function register(person) {
    // Before optional chaining
    if (person !== undefined && person.name !== undefined)
        console.log(person.name.firstName);
}

register(new Person());
// undefined

register(new Person("John", "Appleseed"));
// "John"

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName ?? "Unknown";
        this.lastName = lastName ?? "Unknown";
        this.age = age ?? NaN;
        this.name = { firstName: this.firstName, lastName: this.lastName };
  }
}

function register(person) {
    // With optional chaining
    console.log(person?.name.firstName);
}

register(new Person());
􀆊 undefined

register(new Person("John", "Appleseed"));
􀆊 "John"

// Without optional chaining
console.log(person.children[0]);
// TypeError: undefined is not an object

// With optional chaining
console.log(person.children?.[0]);
// undefined

// Without optional chaining
console.log(person.fullName());
􀆊 TypeError: person.fullName is not a function.

// With optional chaining
console.log(person.fullName?.());
􀆊 undefined

a &&= b // and assignment operator
a ||= b // or assignment operator
a ??= b // nullish assignment operator

// Nullish coalescing approach
element.innerHTML = element.innerHTML ?? "Hello World!"

a &&= b // and assignment operator
a ||= b // or assignment operator
a ??= b // nullish assignment operator

// Nullish coalescing approach
element.innerHTML = element.innerHTML ?? "Hello World!"

// Logical assignment operator
element.innerHTML ??= "Hello World!"

class Person {
    firstName = "";
    lastName = "";
    age = NaN;
    children = [];

    constructor(firstName, lastName, age) {
        this.firstName = firstName ?? "Unknown";
        this.lastName = lastName ?? "Unknown";
        this.age = age ?? NaN;
    }
}

"This doesn't work, and doesn't make sense".replace ("doesn't", "does");
› This does work, and doesn't make sense

"This doesn't work, and doesn't make sense".replaceAll("doesn't",
"does");
› This does work, and does make sense

<meta name="apple-itunes-app"
      content="app-id=myAppStoreID,
               app-clip-bundle-id=clipBundleID,
               affiliate-data=myAffiliateData,
               app-argument=myURL">