CSS Container Queries Are Finally Here — A solid and succinct overview of how container queries work (style elements based on the size of a container, rather than the viewport), how we can use them, and what the syntax looks like, along with real-life examples — all done in Ahmad’s usual digestible style. Here's a related post from Fimber Elemuwa explaining when and where to use them. (And by 'finally here', they're in Chrome 105 and Safari 16 – Firefox is due to follow soon.)

Ahmad Shadeed

@container and :has(): Two Powerful New Responsive APIs Landing in Chromium 105 — This blog post is from earlier this month, but as container queries are now here (as noted above) and they have just hit Chrome’s stable channel it feels apt to share this with you now.

Una Kravets

Weekly Conversations on the Art and Practice of Programming — Hosted by Ben Popper, Cassidy Williams, Ceora Ford and Matt Kiernander, The Stack Overflow Podcast brings you candid conversations with fascinating guests about how technology is made and where it’s headed.

Stack Overflow sponsor

More Thoughts on What Makes a Great Toggle Button — We linked to part one last week, and now the second post has arrived to look through the complex list of visual cues that are used by toggle buttons, how they communicate their state, and what you can do to ensure yours don’t have users hesitating about if they are active or not.

Eduard Kuric

Modern Alternatives to BEM — Brainstorming a handful of new CSS organization acronyms. CUBE, HECS, WILS, or how about GPC..?

Dave Rupert

Things Not Available When Someone Blocks All Cookies? — A surprisingly long list — and you might be surprised at the scale of the impact here — as Chrome will block APIs like localStorage, Service Workers, CacheStorage, sessionStorage and more.

Thomas Steiner

Creative List Styling — A look at some useful and creative ways to style a list, along with practical advice on markup and styling.

Michelle Barker

Code Capsules: The Simplest Way to Deploy Your Code — Host a static website with Code Capsules to show off your portfolio. No DevOps knowledge required.

Code Capsules sponsor

DevTools Tip: How to Speed Up Your Workflow with Console Shortcuts — How to use the various shortcuts provided by the Console Utilities API to quickly refer to recent elements, query objects, monitor events and function calls, and more.

Sofia Emelianova

'CSS Classes Considered Harmful' — “I humbly put forward that modern web development provides us all the utilities to move away from class names and implement something much more robust, with some fairly straightforward changes”.

Keith Cirkel opinion

Vanilla Breeze: Convert Tailwind CSS to Semantic CSS — There’s also a well-considered related blog post here explaining just why you might want to convert your CSS in this way.

Jared White

Same Energy: A Visual Image Search Engine — Search by keyword then click any image to find others with the ‘same energy’. You can even paste an image for similar results and limit the search to Creative Commons-licensed images.

Jacob Jackson

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

Lusift: A JavaScript Library to Create Product Walkthroughs for Your Web App — Compatible with React and Vue and you can read the docs and try a demo here.

Lusift

Pie Chart Maker: Online Tool to Generate Pie Charts — You can customize just about anything on the pie chart, including the labels and values, and you can flip a toggle to make it a 3D pie chart too — downloadable as PNG, JPEG, or SVG.

Atharv Tathe & Sujit Mali

Request Map Generator: Generate a 'Node Map' of All Requests on a Page, Powered by WebPageTest

Simon Hearne

nnneon: SVG Generator for Futuristic-Looking Glowing Shapes

Sébastien Noël