はてなブックマーク

SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously-cool things we can do with this massively underrated tool. ✨ Keep reading.

Filed underGeneraloninApril 14th, 2025.Apr 2025.Last updatedoninApril 15th, 2025.Apr 2025. Two years ago, in March 2023, I published a blog post called “The End of Front-End Development”. This was right after OpenAI released its GPT-4 showcase, and the general reaction was that human software developers were about to be made redundant, that software would soon be written exclusively by machines. I

Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet. Keep reading.

IntroductionI don’t know if you’ve noticed, but the CSS world has been on fire recently. 🔥 Behind the scenes, all major browser vendors and the CSS specification authors have been working together to deliver tons of highly-requested CSS features. Things like container queries, native CSS nesting, relative color syntax, balanced text, and so much more. One of these new features is the :has pseudo-

CSS in React Server Components Understanding the future of CSS-in-JS and React Filed underReactoninApril 15th, 2024.Apr 2024.Last updatedoninJune 9th, 2025.Jun 2025. IntroductionOn May 4th, 2023, Vercel announced the stable release of Next 13.4, becoming the first React framework to be built on top of React Server Components. This is a big deal! RSC (React Server Components) gives us an official w

First, we need to constrain the element's width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can't really center something that is full-width. I could constrain the width with a fixed value (eg. 200px), but really what I want in this case is for the element to shrinkwrap around its content. fit-content is a magical value that does exactly this.

Filed underCSSoninNovember 21st, 2023.Nov 2023.Last updatedoninMay 9th, 2025.May 2025. IntroductionCSS Grid is one of the most amazing parts of the CSS language. It gives us a ton of new tools we can use to create sophisticated and fluid layouts. It's also surprisingly complex. It took me quite a while to truly become comfortable with CSS Grid! In this tutorial, I'm going to share the biggest 💡 l

Filed underReactoninSeptember 6th, 2023.Sep 2023.Last updatedoninMay 9th, 2025.May 2025. IntroductionSo, here's something that makes me feel old: React celebrated its 10th birthday this year! In the decade since React was first introduced to a bewildered dev community, it’s gone through several evolutions. The React team has not been shy when it comes to radical changes: if they discover a better

I should note that I have a vested interest in this topic: I teach software development online. It would be bad for my business if developer jobs start disappearing. That said, everything in this blog post is based on my true beliefs. You can decide for yourself if those beliefs are biased or not. Link to this headingHere we go again The CSS language was first released in 1996, in Internet Explore

Filed underCSSoninNovember 28th, 2022.Nov 2022.Last updatedoninJune 30th, 2023.Jun 2023. IntroductionCSS has a whole slew of different color formats: hex codes, rgb(), hsl(), lch(), the list goes on! Which one should we use? It might seem like an inconsequential decision, but there are some pretty important differences between them. And, honestly, I think most of us are prioritizing the wrong thin

This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1”(opens in new tab) codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses fluid principles to create a layout that flows seamlessly. Here's the relevant CSS: form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; } .name { flex-grow: 1; flex-basis: 160px

Understanding useMemo and useCallback A roadtrip through two of React's most notorious hooks Filed underReactoninAugust 30th, 2022.Aug 2022.Last updatedoninMay 9th, 2025.May 2025. IntroductionIf you've struggled to make sense of useMemo and useCallback, you're not alone! I've spoken with so many React devs who have been scratching their heads about these two hooks. My goal in this blog post is to

Filed underReactoninAugust 16th, 2022.Aug 2022.Last updatedoninMay 9th, 2025.May 2025. IntroductionSo, I'll be honest. I had been working professionally with React for years without really understanding how React's re-rendering process worked. 😅 I think this is true for lots of React developers. We understand enough to get by, but if you ask a group of React developers a question like “What trigg

Filed underCSSoninMay 17th, 2022.May 2022.Last updatedoninMay 15th, 2025.May 2025. IntroductionShould I use pixels or ems/rems?! This is a question I hear a lot. Often with a dollop of anxiety or frustration behind the words. 😅 It's an emotionally-charged question because there are a lot of conflicting opinions out there, and it can be overwhelming. Maybe you've heard that rems are better for acc

Filed underJavaScriptoninApril 19th, 2022.Apr 2022.Last updatedoninAugust 22nd, 2025.Aug 2025. IntroductionModern front-end frameworks like React, Angular, and Vue rely heavily on the terminal. If you're not comfortable with command line interfaces, you'll struggle to run a local development server or build your application! There's something deeply ironic about this. Our whole job is to build gra

Understanding Layout Algorithms The mental model shift that makes CSS more intuitive Filed underCSSoninMarch 28th, 2022.Mar 2022.Last updatedoninJanuary 28th, 2025.Jan 2025. A few years ago, I had a Eureka! moment with CSS. Up until that moment, I had been learning CSS by focusing on the properties and values we write, things like z-index: 10 or justify-content: center. I figured that if I underst

Filed underReactoninMarch 15th, 2022.Mar 2022.Last updatedoninOctober 2nd, 2024.Oct 2024. IntroductionReact is famously unopinionated when it comes to file/directory structure. How should you structure the files and directories in your applications? Well, there is no one “right” way, but I've tried lots of different approaches since I started using React in 2015, and I've iterated my way to a solu

So here's a CSS linear gradient, going from pure yellow to pure blue: Notice that it gets kinda washed out and muddy in the middle there? This is what Erik Kennedy has coined the “gray dead zone”. Unless you're really careful when selecting colors for your gradients, you'll often wind up with a desaturated midsection in your CSS gradients. As it turns out, though, we can absolutely avoid the gray

Filed underCSSoninNovember 23rd, 2021.Nov 2021.Last updatedoninMay 9th, 2025.May 2025. IntroductionWhenever I start a new project, the first order of business is to sand down some of the rough edges in the CSS language. I do this with a functional set of custom baseline styles. For a long time, I used Eric Meyer's famous CSS Reset(opens in new tab). It's a solid chunk of CSS, but it's a bit long i

:root { --shadow-color: 286deg 36% 56%; --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34); --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow

IntroductionIn my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it's clear that most shadows aren't as rich as they could be. The web is covered in fuzzy grey boxes that don't really look much like shadows. In this t

Filed underCSSoninAugust 9th, 2021.Aug 2021.Last updatedoninJanuary 6th, 2025.Jan 2025. IntroductionLike so many things in CSS, the transform property is surprisingly remarkable. At first glance, it may seem like a pretty niche thing. How often do we need to rotate or skew something, after all? And yet, the more I learn about transform, the more I find myself taking advantage of it. In my blog's c

Filed underReactoninJune 21st, 2021.Jun 2021.Last updatedoninJuly 17th, 2025.Jul 2025. When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-componen

Filed underGeneraloninApril 20th, 2021.Apr 2021.Last updatedoninJanuary 28th, 2025.Jan 2025. This article refers to the 2021 version of my blog, built using the Next.js Pages router. In 2024, I rebuilt the blog using the App router. You can read all about the current version of my blog here: I’m leaving this post up because it does contain additional detail not found in the new post, so for the mo