Tutorials

:

CSS Intermediate

:has() Is the Parent Selector We Waited Twenty Years For

Style a form field wrapper based on the input inside it, a card based on whether it has an image, a layout based on its content - all in pure CSS with :has().

May 28, 2024 2 min 4,662 Read →

W

PHP Intermediate

window.onerror + 20 Lines of PHP = Your Own Error Tracker

Users almost never report the JavaScript errors they hit. A global error handler, sendBeacon and a tiny PHP endpoint give you a self-hosted crash log for free.

May 22, 2024 2 min 3,119 Read →

T

JavaScript Advanced

Tagged Template Literals: The Feature Behind Every html`` You've Seen

That html`...` syntax in lit and friends is not magic - it is a plain JavaScript feature you can use to build an XSS-safe HTML helper in fifteen lines.

May 16, 2024 2 min 2,402 Read →

F

JavaScript Beginner

Format Currencies and "1.2K" Counts Without a Library

Intl.NumberFormat handles currencies, compact notation, percentages and units in the user's locale - the kind of formatting everyone installs a package for.

May 12, 2024 2 min 1,644 Read →

R

JavaScript Intermediate

Responsive JavaScript Without Resize Listeners

Checking window.innerWidth on every resize event is wasteful and drifts out of sync with your CSS. matchMedia gives JavaScript the same breakpoints CSS uses, with change events.

May 3, 2024 2 min 4,822 Read →

S

JavaScript Beginner

Serialize an Entire Form in One Line with FormData

new FormData(form) reads every field in one call, posts natively with fetch, and Object.fromEntries turns it into JSON. You may never write form.elements loops again.

Apr 25, 2024 2 min 3,273 Read →

T

JavaScript Beginner

The <dialog> Element Probably Replaces Your Modal Library

Focus trapping, Escape to close, a backdrop, top-layer stacking above every z-index - the native dialog element does all of it with zero JavaScript dependencies.

Apr 16, 2024 2 min 837 Read →

L

JavaScript Intermediate

Let Users Paste Screenshots Straight into Your App

Ctrl+V with an image on the clipboard fires a paste event carrying a real File object. Ten lines of code turn any form into a screenshot-friendly uploader.

Apr 12, 2024 2 min 4,974 Read →

D

JavaScript Advanced

Do the Boring Work When the Browser Is Bored: requestIdleCallback

Analytics batching, prefetching, cache warming - none of it should compete with user interaction. requestIdleCallback runs your low-priority work in the gaps.

Apr 6, 2024 2 min 4,153 Read →

C

JavaScript Advanced

Catching DOM Changes You Didn't Make: MutationObserver in Practice

When a third-party script injects, moves or mangles your markup, you cannot patch their code - but you can watch the DOM itself and react the instant it changes.

Mar 28, 2024 2 min 1,692 Read →

I

JavaScript Intermediate

Infinite Scroll Without a Single Scroll Listener

Scroll listeners fire hundreds of times per second and need throttling, math and luck. IntersectionObserver watches a sentinel element and calls you exactly when it matters.

Mar 19, 2024 2 min 1,736 Read →

T

JavaScript Beginner

The One-Line Browser Trick That Makes Any Page Editable

Type document.designMode = "on" in the console and the entire page becomes editable like a document. Absurdly useful for copy reviews, screenshots and layout testing.

Mar 12, 2024 2 min 5,169 Read →