Get ahead of the curve with the latest insights, trends, and analysis in the tech world.
Get it?! Like “advice”, but for CSS. When should you nest CSS? Scott Vandehey says: There’s a simple answer and a slightly more complicated answer. The simple answer is “avoid nesting.” The more practical, but also more complex answer is “nest pseudo-selectors, parent modifiers, media queries, and selectors that don’t work without nesting.” The big […]
I’m pretty hot on Scroll-Driven Animations! What a wonderful idea that we can tie @keyframe animations timelines to scroll positions. And I’m sure the creators of it thought long and hard, because the API makes a ton of things possible. It’s not just “how far the entire page has scrolled”, although that’s possible. The progress […]
I’m going to do an SVG issue here, because I find that technology persistently interesting. It’s a bit of a superpower for front-end developers who know how it works and can leverage it when needed to pull of interesting effects. For example, this compelling line drawing scroll effect is powered by SVG features. There have […]
Native Web Components are still enjoying something of a moment lately. Lots of chatter, and a good amount of it positive. Other sentiment may be critical, but hopeful. Even more important, we’re seeing people actually use Web Components more and more. Like make them and share them proudly. Here are some recently: Interesting point here: […]
It’s January and we’re seeing a little round of CSS wishlists make the rounds. Phew! That’s a lot of people taking the time to be pumped about CSS and make clear what they want. The way CSS is going lately I would not be surprised to see massive progress again in 2024. Stephanie Eckles points […]
I’m in the mood for a typography focused edition. I have some links saved up I’ve been meaning to read. I’m going to start reading now and the links that turn out any good I’ll put below. Mike Mai put together a Typography Manual (for type on the web). It’s a pretty random spattering of […]
New year, new local code editor? It’s maybe worth a peak at Zed, at least. They do a good job in the one-sentence pitch: Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter. All tech things have to be fast, so check. No shade either, speed is vital in all […]
The “switch” is a pretty common design pattern on the web. It’s pretty much a checkbox. In fact, under the HTML hood, it really ought to be an or perhaps a with just two s (or a third if there is an indeterminate state). But unfortunately, the web doesn’t give us any […]
Let’s do a Web Components issue this week. We gotta do it. As Scott Vandehey says: HTML Web Components Are Havinga Moment. Scott links to a pretty healthy stew of other people’s writing where they have their own ah-ha moments where they can picture the usefulness of native Web Components in their own work. I […]
Kilian Valkhof has a good one this week, You don’t need JavaScript for that, as part of the HTMLHell yearly Advent Calendar (of blog posts). He opens with the rule of least power: Choose the least powerful language suitable for a given purpose. That’s fun for us CSS nerds, because CSS is a pretty low […]
Josh Comeau has a new learning guide out for CSS grid: An Interactive Guide to CSS Grid. I like how Josh gets into the “mental model” right away, because that’s the biggest thing with big APIs like this: you need to get the basics of how it works in your head so you know when […]
If you haven’t been able to keep up with my blistering pace of one blog post per year, I don’t blame you. There’s a lot going on right now. It’s a busy time. But let’s pause and take a moment
I was ogling the idea of Exit Animations recently, that is, a recent proposal for (something like) @exit-style which could allow us to animate elements as we remove them from the DOM. That is largely just a proposal at the moment, with many challenges ahead. But there is new tech that helps with exit (and […]
I’m a sucker for a new coding font. I generally don’t think what coding font you use affects productivity in any significant way (unless it’s distracting) so farting around and switching it up is just a fun little thing to do. Like pushing around the furniture in your room or taking a different bike route […]
Footer.design is a pretty fun gallery site, itself, of course, with a pretty weird/bold footer. I’ve designed my fair share of footers over the years and it’s certainly an area where you just wanna look at like 50 footers before you start in. See what other people are doing. Can you be clever? Should you […]
If you ever need some inspiration for buttons, definitely check out Lucas Bonomi’s buttons.cool. This is a better-than-it-needs-to-be one-off site just for beautiful buttons: But it’s not just a design gallery, it’s made for front-end developers in that you can see the code, see them being live-rendered right on the page, and of course, the […]
I enjoyed Stefan Baumgartner’s 5 Inconvenient Truths about TypeScript. I like some philosophical hard-truths from someone who is clearly pretty close to the technology. It doesn’t “fix JavaScript”, it’s complicated, and ironically, it’s not truly type-safe. Every team is going to have to do their own math on whether they find it worth it or […]
I like the feeling of a good fresh typeface. Like design itself, type design has trends, and without being able to articulate it particularly well, I feel like I can feel a fresh type look from a stale one. That’s probably the thinking of an amateur, and I’m sure the world’s fanciest designers probably used […]
They say “naming things is hard” not because picking any ol’ name is hard, but because picking a useful, long-lasting, meaningful, understandable, deeply communicative name is hard. Screw it up and you can confuse yourself and others unnecessarily. We’re in a dev cycle right now on CodePen itself that has me seeing PRs on the […]
You’ve seen CSS’ new :has() selector right? There are all these “basic” use cases that leave me smiling because the solutions of the past were inelegant at best, and now are easy and satisfying. Here’s one: One approach to this with :has() is just a few lines and reads very clearly to me: But as […]
Lea Verou helped craft the State of HTML 2023 Survey — the first of it’s kind! HTML, you say? What is there to ask? HTML isn’t exactly what I’d think of as a fast-moving technology. I hear there is a element now, so that’s new. It’s sugar for . I like it. Is […]
CSS animation rules. Just have a look at… CodePen lol. There was a (long) time when it didn’t exist, though. My old buddy Jonathan Snook wrote in 2007 that he didn’t like the idea of animation coming to CSS at all, but had changed his mind by 2009. They’ve evolved a bit since those early […]
Strange premise from Jon Ellwood, right? He explains: I will acknowledge that CodePen and Copilot are two different products, and it might seem odd to be comparing the two – but the commonality for me is that my budget only allows for one of them to get my money each month. While Copilot could give […]
Chrome 117 went stable this past week. There is a website where you can see what the plan is for Chrome releases, by the way, which is handy when you care about such things. Chrome releases a major version about once a month, and I usually don’t feel ultra compelled to write anything about it […]
I think the nail is in coffin now: you should never design something for the web with only one (or even a narrow set) of particular viewport sizes in mind. It’s just so darn tempting to think that way. You have a couple of pretty specific screen sizes in front of you right now, you […]
Dave Rupert blogged a bunch of reasons about why you probably aren’t using them yet. Some of it is technological, and more of it is historical, marketing, and psychological reasons. Then Dave, a pretty avid Web Components follower and advocate, followed up with another surprise. Should you rewrite your app to use them? Probably not. […]
SVG has so many tricks up its sleeve. It’s really a full-featured drawing API literally designed for the web, but few of us really truly understand it nor reach for it enough. Heck, I even wrote a book about it, and I don’t. At the time, just getting people to use SVG for icons felt […]
CodePen is a place where you can make demos. A Pen can be anything (a painting, a game, a landing page), but by and large, Pens today are demos. Why would you make a demo? Fam, why wouldn’t you make a demo? Demos are one of the most powerful tools we have as designers and […]
There is something about [INSERT MOST POPULAR THING] that inspires people to philosophize. Sometimes it’s a bummer. It’s tough to avoid the never-ending stream of “news” about Elon Musk, which strongarms your brain into having an opinion about him. WordPress, by the numbers, is pretty popular, so I’ll bet you have some kind of opinion […]
The is one of the grand enemies of responsive design. They don’t wrap (that wouldn’t make much sense) so they can “blow out” the width of a mobile device pretty easily. The overflow property also doesn’t work on them. So you gotta find a way, and it really depends on the data. Sometimes a […]
If you think frosted glass effect in CSS, you probably think of the backdrop-filter property. Just backdrop-filter: blur(10px); will do the trick. I still think the look is kind of cool and fresh, but I should check myself a little here as the effect was popularized in the iOS 7 release which was 10 years […]
Yuri Mikhin and Travis Turner over at Evil Martians implore us: Don’t wait, let’s use the browser ContactPicker API now. As I write, it’s only available essentially on Chrome for Android. But the spec exists and iOS also has an experimental flag for it. I’m an iOS guy so I flipped it on. I actually […]
We gotta talk about CSS! That’s my favorite thing! It’s always on the table for a good Chris’ Corner edition, but sometimes focusing on it entirely is best. Klint Finley called it “The modern web’s underrated powerhouse” for GitHub’s publication The ReadME Project back in February, and I’m inclined to agree. Although the days of […]
Have you seen The Grug Brained Developer? It’s an essay with a URL. It’s written like a caveman became a developer and put together a philosophy that is largely a rally against complexity. Cavemen have dumb simple brains, get it? It has good points, and I largely agree with it. The caveman angle is a […]
Rauno Freiberg wrote an article getting into the CSS implementation of some of the neat features of the most recent Next.js website. Gotta love an article showing off how things work on a really top-notch modern design. Thoughts as I go down the list: • The randomized dots on the switchboard look super cool. Just […]