I enjoyed Lee Robinson’s take on How I’m Writing CSS in 2024. Rather than jump right into tools and syntax, it starts with the user: Agreed! Number 3, and to some degree 4, are almost more in...
https://blog.codepen.io/2024/03/25/chris-corner-real-world-css/
Lossy compression can be good. For something like a JPG, that naturally uses compression that can be adjusted, that compression leads to lost image data. In a good way. The image may end up being...
I was darn impressed by Scott Jehl’s personal charge to bring back an idea known as “responsive video”. If you’ve seen the
https://blog.codepen.io/2024/03/04/chris-corner-performance-is-good-for-brains/
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.”...
https://blog.codepen.io/2024/02/26/chris-corner-some-advicss/
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, be...
https://blog.codepen.io/2024/02/19/chris-corner-scroll-driven-delight/
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 ...
https://blog.codepen.io/2024/02/12/chris-corner-more-like-scalable-vector-goodness/
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’r...
https://blog.codepen.io/2024/02/05/chris-corner-people-be-doing-web-components/
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...
https://blog.codepen.io/2024/01/29/chris-corner-more-like-celebrating-style-skills/
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....
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 ...
https://blog.codepen.io/2024/01/08/chris-corner-swinging-for-it/
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
Let’s do a Web Components issue this week. We gotta do it. As Scott Vandehey says: HTML Web Components Are Having a Moment. Scott links to a pretty healthy stew of other people’s writing whe...
https://blog.codepen.io/2023/12/20/chris-corner-very-simple-web-components/
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 le...
https://blog.codepen.io/2023/12/11/chris-corner-more-surprising-powers-of-css/
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 A...
https://blog.codepen.io/2023/12/04/chris-corner-mentals-and-models/
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 lar...
https://blog.codepen.io/2023/11/27/chris-corner-good-useful-ideas/
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...
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...
https://blog.codepen.io/2023/11/14/chris-corner-galleries-grids-and-greenprimarydark6/
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 jus...
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 Java...
https://blog.codepen.io/2023/10/30/chris-corner-considering-code/
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...
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 i...
https://blog.codepen.io/2023/10/16/chris-corner-naming-tiles-and-simplicity/
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 sati...
https://blog.codepen.io/2023/10/09/chris-corner-can-has-blurs-filters-and-masks/
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 hea...
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 animat...
https://blog.codepen.io/2023/09/25/chris-corner-better-css-animation/
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...
https://blog.codepen.io/2023/09/20/why-i-chose-codepen-pro-over-copilot/
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 maj...
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 t...
https://blog.codepen.io/2023/09/11/chris-corner-variations-on-what-not-to-do/
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, ...
https://blog.codepen.io/2023/09/04/chris-corner-web-components-dont-need-you/
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 wrot...
https://blog.codepen.io/2023/08/28/chris-corner-even-more-svg-tricks/
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...
https://blog.codepen.io/2023/08/21/chris-corner-the-tao-of-demos%C2%B9/
There is something about 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...
The