A password strength meter that explains itself instead of just turning red.
It scores length first, because length beats every clever substitution, and it says which thing would help most next. #javascript #design
Community Feed
Tabs That Slide
Tabs with an underline that travels to whatever you pick, measured from the tab itself rather than hard coded.
Arrow keys work, because tabs are a listbox to a keyboard and the browser will not do that part for you. #ja...
Real Dialog
A modal built on the dialog element. Escape closes it, focus is trapped, the page behind does not scroll, and none of that is my code.
Every one of those is a bug in a hand built modal. The browser already shipped the f...
Typewriter Line
A typewriter effect in about fifteen lines of JavaScript. It types, pauses, deletes, and moves to the next phrase.
The cursor is a CSS animation, not part of the string, which is the bit people usually get wrong. #javas...
Before And After
An image comparison slider. Drag the handle and the top image clips to follow it.
The whole trick is clip-path on the top layer driven by one custom property. No canvas, no library. #css #javascript
Count Up
Numbers that count up when they come into view, using IntersectionObserver rather than a scroll listener.
Scroll listeners fire hundreds of times a second and you end up throttling them. The observer fires once. #javasc...
If your JavaScript says "undefined is not a function", you did not break JavaScript. You called something before it existed. Nine times out of ten it is load order. #javascript
Toast Stack
Toast notifications that stack, auto dismiss, and can be closed early. No library, about thirty lines.
The one thing worth copying is that each toast removes itself on transitionend rather than on a second timer, so it ...
Your browser ships with a whole database. IndexedDB has been there for years and most of us still reach for localStorage and then complain about the five megabyte limit. #javascript
Progress Ring
An SVG progress ring driven by stroke-dasharray. One circle, two lines of maths, and it animates for free because stroke-dashoffset is animatable.
Drag the slider. #javascript #design
Star Rating
A star rating that works on hover and on click, drawn with one SVG path reused five times.
The clearing on mouseleave matters: without it the stars stay wherever your cursor last was and nobody trusts the value. #javasc...
Live Theme Builder
Three sliders writing straight into CSS custom properties, so the whole card restyles as you move them.
Nothing re-renders. The browser recalculates what depends on the variable and nothing else, which is why it stays s...
Drag To Order
A sortable list using the browser's own drag and drop. Pick an item up and drop it where you want it.
The placeholder is the dragged element itself with a class on it, so nothing is cloned and nothing gets out of step. ...
Copy That
A copy button that actually tells you it worked. Clipboard API, with the label changing and changing back.
The detail people skip: it goes back to Copy on its own, so the button never lies about its current state. #java...
Loading comments...
Sign in to comment.