Steve Fulghum

I'm excited to be launching a tool today that I've been tinkering on for a while now. My daughter is learning to read, and I thought a tool to build word searches for her would be a fun build. It was a blast. Check it out at beta.worksheet.tools/wordsearch/v1! #webdev #css #angular #wordnerds

So it turns out a bunch of rem values in the stylesheet is off because Figma was calculating them off of 16px rather than the base of 14px we use. Thankfully that got caught early, but now I've got a bunch of weird values like 1.7143rem. Gonna make lemonade and try using round(). #css

Is anyone familiar with how Chrome "prints" a PDF? Is it simply rendering the page at a given paper width with the print styles, and then chopping the resulting height into X pages? Or is it converting the HTML into PostScript and doing some magic with page breaks? #webdev #css #html #chrome

Coming up on four years since CSS-Tricks published my article on the CSS Paint API. css-tricks.com/simulating-d... I'm disappointed that CSS Houdini never took off as I thought it might in 2020, but glad that the Properties and Values API and Typed OM are still slowly working their way in. #css

The other day, a friend asked for help debugging some CSS in a side project he was helping out with. A complicated piece of UI was busted. Turns out, a component he was using had been updated, and now had a few internal divs for utility flex styling that blew up his own layout. #webdev #html #css

3. If you're adding layer upon layer of flexy divs just to achieve a 2D layout of rows and columns, just write your own CSS grid. Flexbox is awesome, but understanding its limits and where, when and how to use CSS grid is part of the job. Play a round of code golf and get rid of some extra markup.

The other day, a friend asked for help debugging some CSS in a side project he was helping out with. A complicated piece of UI was busted. Turns out, a component he was using had been updated, and now had a few internal divs for utility flex styling that blew up his own layout. #webdev #html #css

A few takeaways. 1. Be careful updating the markup of shared components. Adding markup can wreck someone else's selectors that expect a particular pattern. Ideally, you bump your library's major version. But if that isn't feasible, or you're not using a library, make sure to test your use cases.

Gave style queries a try with a component I’m updating. I needed to toggle some styles in its child, and rather than add a selector in the parent, thought it would be fun to key off of a flag set on the container. Here’s an example: codepen.io/steve_fulghu... #CSS

Once I got it working, it felt a little roundabout and verbose; why go through the trouble of setting up a flag and wire the query in the child? A basic selector in the parent could handle this easily (and quickly). But… I still kinda liked the pattern.