Adam Argyle’s Sick Mouse-Out CSS Hover Effect
I was killing some time browsing my CodePen feed for some eye candy and didn’t need to go past the first page before spotting a neat CSS hover effect by Adam Argyle.…
2021 Roundup of Web Research
Last year, we kicked out a roundup of published surveys, research, and other findings from around the web. There were some nice nuggets in there, like a general sentiment that the web needs more documentation, Tailwind CSS dun …
Read Your Website
When’s the last time you read your website? Like out loud in the lobby of a Starbucks on a weekday afternoon, over the phone to your parents, or perhaps even as a bedtime story for your kids.
No worries, this …
Recreating the Apple Music Hits Playlist Animation in CSS
Apple Music has this “Spatial Audio” feature where the direction of the music in your headphones is based on the location of the device. It’s tough to explain just how neat it is. But that’s not what I’m here to …
Line length revisited: following the research
Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that shorter lines do not necessarily lead to faster reading. If you’re looking for a definitive answer …
What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?
It’s not uncommon for my front-end workflow to go something like this:
- Work on thing.
- See that thing in an automatically refreshed browser.
- See something wrong with that thing.
- Inspect and correct the thing in DevTools.
- Apply the correct code
Front-End Dev Shortcuts in iOS 15
I was pretty stoked when Chris shared a way to “View Source” on mobile. Sure, it’s not the same as a built-in feature but it allows iOS users like myself a way to peek at a site’s code the …
CSS Pseudo Commas
A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.…
accent-color
The accent-color property in CSS is capable of re-tinting the accented color of form controls provided by the browser’s default styles with a custom color value.
.element {
accent-color: #f8a100;
}accent-color is defined in CSS Basic User Interface Module …
A Cornucopia of Container Queries
I don’t know about y’all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on …
I could build this during the weekend
How many times have you heard that (or even uttered it under your own breath)? I know I’ve heard it in conversations. I also know I’ve wondered the same thing about a product or two — hey, the idea here …
