Community Feed

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... Read more

Glassmorphism login card. backdrop-filter does all the work, the rest is a border with a bit of white in it.

Works best over something with colour behind it, which is why the background is a gradient and not a flat grey... Read more

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... Read more

A logo ticker that loops with no gap and no JavaScript. The list is duplicated once and the track slides exactly half its width, so the seam never shows.

It pauses on hover, because a moving thing you cannot read is jus... Read more

An accordion built on details and summary. Open one and the others close, which normally needs JavaScript, except the name attribute on details does it natively now.

Keyboard works out of the box because the browser wro... Read more

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... Read more

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. ... Read more

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... Read more

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... Read more

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... Read more

A masonry layout in six lines of CSS using columns. Items of different heights pack together with no gaps and no library.

The catch worth knowing: columns read top to bottom, not left to right, so the order is different... Read more

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... Read more

A dark and light switch that remembers nothing and still works, because the colours are custom properties and the toggle only flips one attribute on the root.

If you add localStorage later, you change one line. #css #de... Read more

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 ... Read more