I was working on a bug ticket the other day where it was reported that an icon was sitting low in a button. Just not aligned like it should be. I had to go on a little journey to figure out how to replicate it before I could fix it. Read more…
I use this line, or one like it, in a lot of quick demos. Not that it’s not a production-worthy line of code—I just tend to be a bit more explicit on bigger projects. html { font: 110%/1.4 system-ui; } Someone wrote in confused by it, and I could see Read more…
Delan Azabani digs into the (hopefully) coming soon ::spelling-error and ::grammar-error pseudo selectors in CSS. Design control is always nice. Hey, if we can style scrollbars and style selected text, why not this? The squiggly lines that indicate possible spelling or grammar errors have been a staple of word processing on computers for decades. Read more…
I needed to select some elements between two fixed indexes the other day — like literally the second through fifth elements. Ironically, I have a whole post on “Useful :nth-child Recipes” but this wasn’t one of them. The answer, it turns out, isn’t that complicated. But it did twist my brain a Read more…
I think we’re all largely aware of colors like this: color: OldLace; background: rebeccapurple; I guess you’d just call those “named colors” in CSS. Those aren’t the only kind of named colors there are though. Some of them are a bit more fluid. Jim Nielsen was blowin’ minds the other Read more…
Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn’t resize when the browser window resized. Back then, it affected Chrome 20 and Safari 6, but the bug still persists today in Safari when a calc() involves viewport units. Sara credits Martin Auswöger Read more…
Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts. Recently, I have been experimenting with CSS Grid and alignment properties to create component layouts that contain multiple overlapping elements. These layouts could be styled using absolute Read more…
To make some terminology clear here: CMS = Content Management System CRM = Customer Relationship Management Both are essentially database-backed systems for managing data. HubSpot is both, and much more. Where a CMS might be very focused on content and the metadata around making content useful, a CRM is focused Read more…
I am part of that 82% that got it wrong in Lea’s quiz (tweet version). Here’s the code: :root { –accent-color: skyblue; } div { –accent-color: revert; background: var(–accent-color, orange); } So what background do I expect <div> to have? My brain goes like this: Well, –accent-color is declared, so Read more…
I recently had to create a widget in React that fetches data from multiple API endpoints. As the user clicks around, new data is fetched and marshalled into the UI. But it caused some problems. One problem quickly became evident: if the user clicked around fast enough, as previous network Read more…
