CSS-Tricks Chronicle XXXIX

I’ve been lucky enough to be a guest on some podcasts and at some events, so I thought I’d do a quick little round-up here! These Chronicle posts are just that: an opportunity to share some off-site stiff that I’ve been up to. This time, it’s all different podcasts. Web Rush Episode 122: Modern We..

A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation

Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel — one that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive. If that is the thing you..

Through the pipeline: An exploration of front-end bundlers

I really like the kind of tech writing where a fellow developer lays out some specific needs, tries out different tech to fulfill those needs, and documents how it went for them. That’s exactly what Andrew Walpole did here. He wanted to try out bundlers in the context of WordPress themes and needi..

Through the pipeline: An exploration of front-end bundlers

I really like the kind of tech writing where a fellow developer lays out some specific needs, tries out different tech to fulfill those needs, and documents how it went for them. That’s exactly what Andrew Walpole did here. He wanted to try out bundlers in the context of WordPress themes and needi..

Weekly Platform News: Focus Rings, Donut Scope, Ditching em Units, and Global Privacy Control

In this week’s news, Chrome tackles focus rings, we learn how to get “donut” scope, Global Privacy Control gets big-name adoption, it’s time to ditch pixels in media queries, and a snippet that prevents annoying form validation styling. Chrome will stop displaying focus rings when clicking buttons ..

Exploring @property and its Animating Powers

Uh, what’s @property? It’s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never been able to do before. While everything about @property is exciting, perhaps the most interesting thing is that it provides a way to specify ..

How to Develop and Test a Mobile-First Design in 2021

The internet has connected 4.66 billion people with each other as of October 2020. A total of 59% of the world’s total population. Amazingly, this is not even the surprising part. The stat to look out for is mobile users and their rise in the internet world. Out of 4.66 billion people connected to t..

A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders

UI components like spinners and skeleton loaders make waiting for a page load less frustrating and might even affect how loading times are perceived when used correctly. They won’t completely prevent users from abandoning the website, but they might encourage them to wait a bit longer. Animated spin..

React Without Build Tools

Jim Nielsen: I think you’ll find it quite refreshing to use React A) with a JSX-like syntax, and B) without any kind of build tooling. Refreshing indeed: CodePen Embed Fallback It’s not really the React that’s the hard part to pull off without build tools (although I do wonder what we lose from ..

How to Animate the Details Element

Here’s a nice simple demo from Moritz Gießmann on animating the triangle of a
element, which is the affordance that tells people this thing can be opened. Animating it, then is another kind of affordance that tells people this thing is opening now. The tricks? Turn off the default trian..