Color Alpha Anywhere

In my “Different Degrees of Custom Property Usage” article, I noted a situation about colors and CSS custom properties where I went “too far” with breaking up HSL color values. Breaking every single color into its H, S, and L parts is may be a step too far. But you probably do want to split it […]

Other Looks at the Conditional Border Radius Trick

Remember when Ahmad Shadeed wrote about that border-radius “toggle” he found in Facebook’s CSS? It was interesting! I covered it. A few weeks after that surge of linkage, a couple of articles came out digging into it a little deeper. In “Evaluating Clever CSS Solutions,” Michelle Barker wonders how clever is too clever? While undoubtedly […]

Interactive Rebase: Clean up your Commit History

This article is part of our “Advanced Git” series. Be sure to follow Tower on Twitter or sign up for their newsletter to hear about the next articles. Interactive Rebase is the Swiss Army knife of Git commands: lots of use cases and lots of possibilities! It’s really a great addition to any developer’s tool […]

Semantic menu context

Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a list. I would suspect the intention is much like <nav> is today, but I really don’t know. Short story: HTML 4 deprecated […]

Easy Dark Mode (and Multiple Color Themes!) in React

I was working on a large React application for a startup, and aside from just wanting some good strategies to keep our styles organized, I wanted to give this whole “dark mode” thing a shot. With the huge ecosystem around React, you might think that there would be a go-to solution for style themes, but […]

Don’t Snore on CORS

Whatever, I just needed a title. Everyone’s favorite web security feature has crossed my desk a bunch of times lately and I always feel like that is a sign I should write something because that’s what blogging is. The main problem with CORS is that developers don’t understand CORS. The basic concept of it is […]

Detecting Specific Text Input with HTML and CSS

Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where: You have to press a special combination of keys on a keyboard. Then type a secret password. From there, a special message pops up on the screen. Easily JavaScript territory, but no, this is done here entirely in HTML […]

CSS Grid Can Do Auto Height Transitions

Bonafide CSS trick alert! Nelson Menezes figured out a new way (that only works in Firefox for now) that is awfully clever. Perhaps you know that CSS cannot animate to auto dimensions, which is super unfortunate. Animating from zero to “whatever is necessary” would be very helpful very often. We’ve documented the available techniques. They […]

Favicons: How to Make Sure Browsers Only Download the SVG Version

Šime Vidas DM’d me the other day about this thread from subzey on Twitter. My HTML for favicons was like this: <!– Warning! Typo! –> <link rel=”icon” href=”/favicon.ico” size=”any”> <link rel=”icon” href=”/favicon.svg” type=”image/svg+xml”> The attribute size is a typo there, and should be sizes. Like this: <!– Correct –> <link rel=”icon” href=”/favicon.ico” sizes=”any”> <link rel=”icon” […]

Yes, Design Systems Do Improve Developer Efficiency and Design Consistency

One of the toughest things about being someone who cares deeply about design systems is making the case for a dedicated design system. Folks in leadership will often ask you to prove the value of it. Why should we care about good front-end development and consistency? Sure, sure, sure, they say—everyone wants a flashy design […]

Pin It on Pinterest