No, Absolutely Not
November 19th, 2019
I think the difference between a junior and senior front-end developer isn’t in their understanding or familiarity with a particular tech stack, toolchain, or whether they can write flawless code. Instead, it all comes down to this: how they push back against bad ideas. What I’ve learned this year is that web performance will suffer…
How Do You Remove Unused CSS From a Site?
November 19th, 2019
Here’s what I’d like you to know upfront: this is a hard problem. If you’ve landed here because you’re hoping to be pointed at a tool you can run that tells you exactly what CSS you can delete from your project, well… there are tools out there, but I’m warning you to be very careful…
Teaching CSS
November 18th, 2019
I’ve been using CSS as a web developer since CSS became something we could actually use. My first websites were built using <font> tags and <table>s for layout. I remember arguments about whether this whole CSS thing was a good idea at all. I was quickly convinced, mostly due to the ability to easily change…
The Best Cocktail in Town
November 18th, 2019
I admit I’ve held in a lot of pent-up frustration about the direction web development has taken the past few years. There is the complexity. It requires a steep learning curve. It focuses more on more configuration than it does development. That’s not exactly great news for folks like me who consider themselves to be…
Finally, it Will Be Easy to Change the Color of List Bullets
November 14th, 2019
In my germinating years, the general advice was this: <ul> <li><span>List item</span></li> <!– … –> </ul> li { color: red; } /* bullet */ li span (color: black; } /* text */ Not terrible, but not great. You’re “resetting” everything at the span level, so it gets more complicated the more you do. Things are…
Oh Hey, Padding Percentage is Based on the Parent Element’s Width
November 13th, 2019
I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It’s weird having top padding based on width, but that’s how…
Thoughts After Looking at the Web Almanac’s Chapter on CSS
November 13th, 2019
Woah, I didn’t see this coming! The HTTP Archive dropped this big “state of the web” report called Web Almanac with guest writers exploring data from 5.8 million websites. Una Kravetz and Adam Argyle wrote the CSS chapter. The point is to squeeze a digestible amount of insight out of a mountain’s worth of data….
A Super Weird CSS Bug That Affects Text Selection
November 11th, 2019
You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug. If you: Leave that selector empty Link it from an external stylesheet (rather than <style> block) Selecting text will have no style at all. 😳😬😕 In other words, if you…
Pac-Man… in CSS!
November 11th, 2019
You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property. See the Pen Animated Pac-Man by Maks Akymenko (@maximakymenko) on CodePen. Are you excited?…
Two-Value Display Syntax (and Sometimes Three)
November 8th, 2019
You know the single-value syntax: .thing { display: block; }. The value “block” being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element. Somewhat intuitive, but much better…