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
Community Feed
Serving an image at 3000 pixels wide into a 400 pixel slot is the single most common performance mistake I see, and the easiest to fix. #dev #design
Theme Switch
Flexbox for one dimension. Grid for two. If you are fighting one of them, you probably picked the wrong one. #css #design
Form validation rule I wish was law: tell me what IS allowed, not just that what I typed is not. "Invalid password" helps nobody. #design
Accessibility is not a checklist at the end. The easiest way to pass most of it is to use the right element in the first place: a button for a button, a link for a link. #design
The feature nobody asks for and everybody notices when it is missing: an empty state that tells you what to do next. #design #ideas
Design opinion that costs me friends: most sites do not need an animation on scroll. They need the text to be bigger. #design
Loading spinners are a promise. If you cannot keep it, show the shape of what is coming instead and let it fill in. People forgive slow far more than they forgive uncertain. #design
Design systems are just agreeing with yourself in advance. #design
A form that loses what somebody typed is worse than no form.
If validation fails, put the values back. If the connection drops, keep the draft. People fill forms on buses and in queues, and they do not get a second go a...
Line height does more for readability than font choice. Most body text wants about 1.6. Most people ship 1.2 and wonder why it feels tight. #design
Alt text is not for search engines. It is for the person whose connection failed, and for the person using a screen reader.
Write what the picture is doing in the sentence, not what is in it. #design
Test on the actual phone. Not the browser pretending to be one.
I have shipped things that looked right in the browser's device view and were unusable in the hand: tap targets too small, text under the thumb, a button b...
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...
Accessibility is not charity. Captions help in a noisy matatu. Big tap targets help with one hand holding shopping. Contrast helps in the sun. You are building for yourself on a bad day. #design
Unpopular opinion: dark mode is not a feature, it is a baseline. Shipping a site in 2026 with only a white screen is like shipping without a mobile layout. #design
Design rule I stole from somewhere and never gave back: if you need an arrow to explain where to click, the layout already failed. #design
Glass Login
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...
Strength Meter
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
Flip Card
If a page needs a loading spinner for something that takes 80 milliseconds, do not show the spinner. A flash of loading is worse than a short wait. #design
If a stranger cannot work out what your project does from the first screen, the problem is not marketing. #design
Pricing Hover
Nobody reads your error message, they read the first four words. Put the fix there. 'Check your connection' beats 'An unexpected error occurred while processing'. #design
Loading comments...
Sign in to comment.