If you’re an AI skeptic, I get it. I was one too , and still am in some ways. I don’t see any benefit to stuffing a chatbot into most of the apps and websites I use. I don’t care about a summary of an email I received or a meeting I attended. In that regard, there’s stock-price-driven hype train that I’m ready to get past. However, that’s not all there is to it. It helped me make BBQ ¶ I have made…
One of the most common pieces of feedback I leave in code reviews, at least in the realm of code readability, is to reduce nesting. In general, the more deeply-nested code is, the more complex it is to track mentally. This is especially the case with if statements. A have placed a code snippet below; which you can imagine might appear as part of a larger function. This code is doing something…
I’ve just released a huge update to the Theme Machine . This is a tool a first put online last summer for building color palettes and exporting them as CSS custom properties. If you haven’t played with it yet, go a head and give it a try. Note: I made the tool responsive, so you can play around with it on mobile and see what it does, but it’s really designed to be used on desktop as part of a web…
As I wrote the both editions of CSS in Depth , I worked hard to stay on top of emerging features in CSS and where browsers were at in regards to adding support. The book writing process is lengthy, so this sometimes involved making my best estimates about what features would have browser support in at least one major browser by the time the book went to print. This approach enabled me to be one of…
Yesterday, I announced the release of the Theme Machine, a tool for generating custom palettes as CSS custom properties. I hope this tool proves useful for many developers, but it’s really only the first step in managing color in CSS. I think it’s worth stepping back and looking at the bigger picture of custom property management in general. If you’re anything like me, you’ve probably tried a…
Sometimes, I just want to start building a project. I’ll create a new stylesheet, define my base styles and a handful of custom properties, and start coding. Before I know it, I realize I need a couple more colors. I’ll either just define an ad-hoc color right there in the stylesheet, or, if I’m being disciplined, I’ll define a new custom property for it and use it accordingly. But I always find I…
I’ve started on a project recently and realized it’s a perfect use case for web components. It’s an Eleventy site that’s primarily markdown, so dropping custom elements into the markdown is just too easy. It requires basically no new plumbing beyond the bare bones esbuild setup I’ve already got in place. This is my first time in web components doing anything more involved than a quick dabble, so I…
I’m so excited to say I’m just finishing up reviews of the final copyedits for the second edition of my book, CSS in Depth ! If you’ve ordered a print edition of the book, it’ll be on its way soon. If you haven’t ordered a copy, you can order now on manning.com — both the print edition and eBook will get you immediate access to the early access (“MEAP”) eBook while the publisher finishes…
Altman Sam Sam Altman That Sam Altman That Sam Altman! I do not like that Sam Altman. Do you like these LLMs? I do not like them, AI Man. I do not like these LLMs. Would you like them Here and there? I would not like them here or there. I would not like them anywhere. I do not like these LLMs. I do not like them, Sam Altman. Would you like them on your phone? Would you like them to run your home?…
I love to see the discussion moving on CSS “masonry” (or “waterfall” or whatever the name may eventually be). The key question at this point seems to be whether this specification should continue to live as a part of grid, or if it should be its own thing. Kicking off the discussion are this Webkit blog post and this Chrome blog post . I want to give my take. Should masonry be its own display…
Every now and then, I see someone post their latest and greatest set of CSS resets. Here’s mine: @layer reset { *, *::before, *::after { box-sizing : border-box ; } body { margin : unset ; } button, input, textarea, select { font : inherit ; } img, picture, svg, canvas { display : block ; max-inline-size : 100% ; block-size : auto ; } @media ( prefers-reduced-motion : reduce ) { *, *::before,…
“Boy, that’s a cool new browser feature. It’s a shame I won’t be able to use it for ten years.” I’ve been seeing a sentiment a lot lately, a sort of despair that some new browser feature won’t be reasonably available for production use for years. And I get it; it was this way for a long time. We web developers still have a lingering bit of emotional trauma from the early days of flexbox, web…
CSS has a great new feature where you can specify the color space to use by adding in <colorspace> to the gradient (not yet supported in Firefox). This is especially useful for avoiding the gray dead zone that comes from rectangular color spaces like the default sRGB. Just look at the difference between a blue-to-yellow gradient in srgb compared to oklch with the same beginning and end:…
When CSS grid first arrived, there were a lot of people saying, “Why do we need this? We already have flexbox!” I’m getting very much the same vibe now with @scope , especially from enthusiasts of web components and shadow DOM. But here’s the thing: CSS @scope and shadow DOM are not competing standards. They’re complementary. They meet different needs entirely — but with enough healthy overlap in…
Modern web frameworks are built entirely on the concept of components. In the realm of these frameworks, a component is a reusable piece of application code. All logic is encapsulated in one place, so the component can be dropped into the application anywhere it’s needed. Components are nested within one another to compose the structure of the page. Vitally, it must be in control of its own…
It’s been a while since I considered what unit I should use in media queries. In the past, I (and many others) have recommended using ems rather than px, because “it’s the only unit that performs consistently in all major browsers.” In the past, Safari has been a bit quirky here, but I know they’ve made some major improvements recently, so I figure this is worth revisiting. Unfortunately, what I…
A while back, Zach Leatherman commented that Eleventy will need to maintain a presence on Twitter to stay in touch with portions of the webdev community. In particular, the “JavaScript folks” that have “dug in there,” and this really struck a cord with something I’ve been feeling in my gut for a while now. I’m afraid the web development community has fractured in two. On one side, we have the…
Several years ago, I made a plea to save scoped CSS . One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from the community, it died. Well, great news — it’s back. And it’s so much better than the previous version. Even better, the W3C spec is mostly stable, and there’s a working prototype in Chrome now. We just need a little interest from the…
One of my longstanding annoyances with CSS has been the inability to transition to height auto . It’s an incredibly common use-case that’s needed for dropdowns and accordions and all sorts of other UI patterns. Unfortunately, this just doesn’t work: /* Doesn't work */ .dropdown { height : 0 ; transition : height 0.5 s ease-out ; } .dropdown .is-open { height : auto ; } It’ll open and close…
If you’re anything like me, looking at all the things happening in CSS lately involving color, you’re probably a bit overwhelmed. For a long time, HSL was promoted as the human readable alternative to hex or RGB. For about a decade, HSL has been the best option for working comfortably with color on the web. But now, somewhat suddenly, we’ve got several new options thrown into the mix: hwb() ,…
Oh man, it always feels good to roll out a fresh site design! I had a lot of fun with this one, especially since it’s my first chance to really dig in to some newer CSS features. And floats. Who would have guessed I’d be using several of those in 2023? I’ve still got some rough edges to clean up, but I’m feeling good enough to go live with this design. While working on this design, I spent a fair…
It seems to be trendy to trash on React again. Look, I know these criticisms aren’t targeted at me, but I can’t help but feel defensive when I see post after post accusing React of “taking us back to the days of Flash” or being “Facebook’s way to control JavaScript” or that it’s full of “cultish worship” and a “goddamn awful technology and community”. These are direct quotes, from just some of the…
…and I don’t mean a single-user one for your own personal use. This is happening ¶ Hi! I hope you had a great weekend. While you were off, you know, having a life in the real world, something crazy happened online: users signed up for Mastodon. More than one person every second . All weekend long. I logged in this morning to a full feed of content that I still haven’t finished reading. Even…
It seems to me one individual has convinced our entire industry to stop shallow rendering, and to abandon unit testing in favor of (almost) exclusively using integration tests and I gotta be honest, I don’t buy it. I agree with many of the arguments in that post, but not the conclusion. And I think the state of unit testing in React is worse off today than it was three years ago because of this…
Disclaimer: this is an _idea_. At this point, I’m not entirely convinced it’s a _good_ idea, but it’s an idea nonetheless. This is something I thought of about a year ago, and recent discussions brought it back to mind. The point of this post is to flush out the idea a bit, as a sort of thought experiment. Take this with a grain of salt, and I’d gladly welcome feedback and critique. So the web has…
This is Part 3 in a series exploring short-form posting, the IndieWeb, and taking control of your own online social workflow for your statically-generated site: A Low-Friction Workflow for Short-form Posting on A Statically Generated Site Preparing Your Site for Posting Notes Adding Webmention Support to a Static Site Using Micropub to Post to a Static Site — Coming soon Webmentions are a key…
This is Part 2 in a series exploring short-form posting, the IndieWeb, and taking control of your own online social workflow for your statically-generated site: A Low-Friction Workflow for Short-form Posting on A Statically Generated Site Preparing Your Site for Posting Notes Adding Webmention Support to a Static Site Using Micropub to Post to a Static Site — Coming soon If you’re eager to get…
This is Part 1 in a series exploring short-form posting, the IndieWeb, and taking control of your own online social workflow for a statically-generated site: A Low-Friction Workflow for Short-form Posting on A Statically Generated Site Preparing Your Site for Posting Notes Adding Webmention Support to a Static Site Using Micropub to Post to a Static Site — Coming soon I am thrilled to see more and…
Almost four years ago, I chimed in on the debate surrounding CSS. Is it good? Is it broken ? Does CSS-in-JS solve anything? The discussion has evolved since then, as has CSS-in-JS tooling, but we are still seeing regularly recurring heated arguments on Twitter. The most recent happened — checks watch — an hour ago. It’s interesting to read my original article now. There are elements I still agree…
Here we are again. Arguing about CSS, the cascade, and CSS-in-JS. And you know what? We’ll be here again in a few months. Because that seems to be the cycle. Somebody tweets something , usually rather innocuous. This gets spun a few times with various reactions. Then it escalates . So often conflicts arise from lack of communication, false assumptions, or confusion. Mr. Rogers Since this is…
With the recent discontentment on Twitter (and social media in general), I’ve seen a resurgence of people returning to blogging. In particular, I’ve noticed more folks posting short entries, or notes , to their blog — either in addition to Twitter, or in place of it. If you are interested in doing this, micropub is a great way to make it a frictionless experience. Micropub is a new W3C standard,…
I’ve spent a lot of time thinking about what defines a CSS mindset. Some people seem to “get” it, and others don’t. It’s always felt to me that if I could put my finger on that, maybe CSS would make more sense to those who have struggled with it. One piece of my motivation in writing CSS in Depth was to try to articulate some of those things. Today I want to take a different tack. I want to look…
A little while ago, I wrote about the <dialog> element . But there are plenty of interesting HTML elements that have been around longer, since HTML5 was first introduced, so I’ve decided to expand it into a series. Every now and then, I stumble across an element I haven’t heard of before. Some are interactive, and provide a surprising amount of functionality with little to no JavaScript. Others…
A little over a year ago, my wife bought me a copy of Liquid Intelligence by Dave Arnold. It’s a book by a renowned bartender on making cocktails. I enjoyed making drinks before this, but this book really got me hooked. In the time since, I’ve been honing my skills. And I’ve been collecting cocktail recipes. Testing them, tweaking them, and sharing them. I have a little book of notecards on a…
HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss. I’ve embedded a full working demo at the end of this article, but if you want to check it out as you read along, you can see it here . Here is the markup…
My new site design is live! I’ve been working on this one for a while, and it just so happened to coincide with the #newwwyear activity on Twitter. I’m calling this theme Shindig . Have a look around. I’ve got some new fonts and colors that I hope I can stick with for a while, even across projects and into new redesigns. I’ve added full page transitions everywhere. (Try it! They’re fun!) And, of…
OOCSS was the first of the many CSS methodologies. Since it arrived on the scene, the industry has moved on to newer, more strongly prescriptive methodologies like SMACSS, BEM, and ITCSS. These newer approaches dominate the conventional wisdom today. But CSS grid is here now, and I find it presents some challenges to this wisdom. I think it’s time we give OOCSS a little attention again, because it…
I’m going to make two declarations that might sound contradictory: CSS is code. CSS is not a programming language. Many developers get these backwards. It is code in that it requires discipline and rigor. It requires forethought, planning, and both big-picture and small-picture thinking. You need to consider edge cases and strive to keep your CSS logically organized. At the same time, it is not a…
In, CSS, you can’t transition a background gradient. It sure would be nice if you could: .gradient { background-image : linear-gradient ( to right , hsl ( 211 , 100% , 50% ) , hsl ( 179 , 100% , 30% ) ) ; transition : background-image 0.5s linear ; } .gradient:hover { background-image : linear-gradient ( to bottom , hsl ( 344 , 100% , 50% ) , hsl ( 31 , 100% , 40% ) ) ; } But, no. It jumps from…
One of the best programming books I’ve ever read is Clean Code by Robert C. Martin. If you have never read it, add it to your list. Every comment represents a failure to make the code self explanatory. Robert C. Martin In one section, Martin discusses code comments, and makes a strong argument against them. I won’t repeat all his arguments, but in short he maintains they have a tendency to fall…
Do you often find yourself looking up a Flexbox cheat sheet ? Wish you could just commit all those properties to memory and be done with it? Here’s how I memorized them. Learn “flex” ¶ If you’ve worked with flexbox much, you might already have this one committed to memory. The flex property is itself shorthand for three other properties: flex-grow , flex-shrink , and flex-basis . But most of the…
There’s a kind of narrative out there that’s basically, “Silly CSS wonks: first they tell us tables are bad, now they give us grid.” Nevermind that this is completely ignorant of the original argument against tables for layout (tables were never bad for layout because of the way they looked on screen; they were bad because of what they did to your markup). It’s true that grid looks a lot like…
QWOP , if you haven’t played it, is a ridiculous running game. Instead of pressing, say, the right arrow key to run, you must control each of the runner’s muscles independently. Pressing the keys Q, W, O, and P will each extend one leg or bend one knee. Coordinating them all is incredibly difficult, and you are usually lucky if you can make a full stride before falling on your head. This is also…
Coding in any language is hard before you spend time mastering it. Imagine what your JavaScript would look like if you never took the time to learn about OOP or functional programming principles? Just because you expect CSS to be easy, doesn’t mean the language is broken when you find it is not. A lot of people have gone on about how horrible JavaScript is . JavaScript is not horrible. It is an…
At a previous job, I was brought in to a team of Java devs to provide a little JS support. They had been using something called PrimeFaces, basically a bunch of front-end components you drop into JSF pages. Working with it was horrid. In short, these devs knew nothing about JavaScript or the front-end, but this tool let them sort of hack a UI together. It abstracted away all the tools needed for…
There’s an old hack for creating elements with a fixed aspect ratio that involves using a percentage-based padding. You may be familiar with it. It looks something like this: .tile { height : 0 ; overflow : hidden ; padding-bottom : 25% ; background-color : bisque ; } The element is forced to have no height, then its bottom padding is set to the actual desired height. This produces an element…
I’m a JavaScript developer. I have experience working in large web applications and dealing with the problems that come from scaling up. I studied Computer Science in college and love solving problems of software architecture. I’m also (in case you somehow missed it ) a “CSS Guy”. I learned CSS during its infancy in the mid-nineties and have worked to stay up to speed ever since. When I look out…
It’s a new year, so it’s time for a new design! Only this time, the update is more than just a CSS revamp. This year, I join the “IndieWeb”. If you don’t know what that is, read on. Let me introduce you to the newest social network: it’s called the World Wide Web and it’s more than 25 years old. The decentralized social web ¶ Social networks bother me. I don’t mean the privacy issues or mysterious…
There’s been a lot of talk lately about good old Separation of Concerns — primarily in the context of React and the use of inline styles or CSS-in-JS. Advocates of these approaches argue that the language we use (be it JS, HTML, or CSS) is an arbitrary line to draw. And I would say: Yes, language is, for the most part, an arbitrary line. But that’s beside the point. So let’s get one thing…
Recently, after I mentioned that I was the only one on my team that writes the CSS, someone replied, “You’re lucky”. It stuck with me, and I’ve been thinking about it since. The thing is, it’s not luck. It was a deliberate decision made early when the team was first put together. And I think the rest of the developers on my team would think themselves lucky for not having to touch the CSS. It is…