:nth-child Between Two Fixed Indexes
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 lit..
System *Things
I think we’re all largely aware of named colors in CSS:
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 day when..
Working around the viewport-based fluid typography bug in Safari
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 for a super w..
Positioning Overlay Content with CSS Grid
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 ..
Scaling Organizations Should Consider Building a Website Backed by a CRM Platform
To make some terminology clear here:
CMS = Content Management SystemCRM = 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 C..
Custom Property Brain Twisters
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
to have?
My brain goes like this:
Well, --accent-color i..
How to Cancel Pending API Requests to Show Correct Data
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 requests ..
Chapter 9: Community
In April of 2009, Yahoo! shut down GeoCities. Practically overnight, the once beloved service had its signup page replaced with a vague message announcing its closure.
We have decided to discontinue the process of allowing new customers to sign up for GeoCities accounts as we focus on helping our c..
TablesNG — Improvements to table rendering in Chromium
When I blogged “Making Tables With Sticky Header and Footers Got a Bit Easier” recently, I mentioned that the “stickiness” improvement was just one of the features that got better for s in Chrome as part of the TablesNG upgrade. I ain’t the only one who’s stoked about it.
But Bramus took it ..