Chris Coyier

I was compelled by the original release of Zed: Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter. Atom was a pretty darn fine code editor, only scuttled by the fact that Microsoft bought GitHub back in 2018. Atom was GitHub’s thing, and Microsoft already had VS Code. At the […]

I found this review of Letterboxd onboarding, ostensibly about the “Jobs to be Done” theory, really nicely done. If you’re going to critique something, this is an awfully helpful way to do it. These guys Dan Benoni and Louis-Xavier Lavallee have a bunch of these “story format” things.

I’m a fan of just chucking SVG icons right into the HTML where you need them: This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons). But, putting your SVG icons in CSS can be advantageous too. This converter is handy. […]

Andrey Sitnik does a good job each year investigating what websites actually need in terms of doing the best we can for site favicons. The 2024 edition is out, and it looks like this: It’s worth knowing what you actually need, as there are quite a few “favicon generator” websites out there that spit out […]

The caption on this image in Niko Kitsakis’s article In Praise of Buttons speaks to me.

There was quite a long period of time (say 2011-2024) where if you wanted to style scrollbars in CSS, your best bet was using the pseudo elements ::-webkit-scrollbar and friends (there were about 7 of them). That got you custom scrollbars in Safari and Chrome and offshoots. Firefox never supported those. They were never really […]

Ryan Mulligan digs into a Jhey Tompkins Pen and discovers a neat little trick involving two @keyframe animations. The first is a “trigger” animation that triggers when a certain element comes into view, and flips a –trigger custom property. Via a Style Query, that triggers the actual animation. Why bother? Scroll-driven animation durations are, well… […]

A quick reminder that if you have the inclination to do some technical writing, we’re looking for more of that around here at Frontend Masters Boost. Here’s an informational page about it. Reach out!

Clever idea idea from Rauno Freiberg then explained by Brad Woods. To create a line drawn on scroll effect, we render a line down the page. Then, use a clip-path to show only part of it. As the user scrolls, we translate the clip-path down the page.

One of the Top Pens of 2023 was this Glowy Hover Effect by Ines. When I was taking a look at it, it finally clicked how it works. In a nutshell, there are two copies of the same HTML layered on top of one another. The top one has a fancy colors and such, but […]