Eric Meyer shows off max-inline-size

You Don’t Need a UI Framework — You’ve got an app or a site to build so you reach for Bootstrap or Material UI and.. well, maybe you shouldn’t, says Josh, who argues they’re not needed for most projects and makes his case here.

Josh Comeau

🎂  Celebrating Firefox 100: How Mozilla Got There — Just a month behind Chrome 100 comes Firefox 100, and how far Firefox has come since its birth as Phoenix, a lightweight rethinking of the former Netscape browser suite. Firefox 100 is broadly not a developer oriented release but there are release notes nonetheless.

Mozilla

Build a More Accessible Web App with axe DevTools — Start accessibility testing in your browser in just minutes. Avoid wasted time with inaccurate results. Easily fix issues with in-product guidance. Install the free axe DevTools Chrome extension and start building a more accessible app today.

Deque sponsor

Flexibly Centering an Element with Side-Aligned Content — I'm old enough to remember when folks like Eric had to come up with complicated solutions for Web layout issues, so it’s fantastic things have progressed that such solutions are now simple, yet still clever enough to involve CSS properties I've not used before such as max-inline-size here.

Eric Meyer

Microsoft Edge Overtakes Safari as 2nd Most Popular Desktop Browser — So now the #1 and #2 browser are, essentially, both Chromium under the hood for a total of 76.7% share between them. Safari is still huge in the mobile space, however, due to Apple’s rules around browser engines (or lack thereof) on iOS devices.

MacRumors

📙 Tutorials, Articles & Opinion

Creating Realistic Reflections with CSS — The idea is you have a copy of something (like some text) then use CSS transforms to flip it vertically and apply some extra styling. It’s a neat effect.

Preethi (CSS Tricks)

Generating SVG 'Mountain Ridge' Dividers — I see this as being a bit more like a ‘torn paper’ effect, but whatever it’s called, it’s neat to see how to generate SVG on the fly to represent it.

Alistair Shepherd

Level-Up Your Cypress Testing Knowledge for Free

Cypress.io sponsor

Creating the DigitalOcean Logo in 3D with CSS — Finally DigitalOcean are taking full advantage of their acquisition of CSS Tricks(!) :-) Regardless of the commercial intent, this tutorial digs a lot further into using CSS to create and work with logos and symbols than I expected and should be a learning experience for all.

Jhey Tompkins

Starting a Blank Jekyll Site with Tailwind CSS in 2022
Giorgi Mezurnishvili

Build a Lightweight Web Component with Lit.js
Clara Ekekenta

My Browser Support Strategy
Michelle Barker

The Appeal of Using Plain HTML Pages
Chris Siebenmann

🔧 Code, Tools & Resources

Pyscript: Run Python in Your HTML — A framework for creating Python apps in the browser by way of HTML. You get bi-directional communication with JavaScript, too. Unsurprisingly, WebAssembly is what does the heavy lifting and makes this all possible. More background here.

Anaconda Inc.

Frappe Gantt: A JavaScript Gantt Chart Control — Gantt charts are commonly used in project management to show the progress and connection between activities spread over a timeline. There’s a live demo on this page, or you can head to the GitHub repo.

Frappe

Speed Up Your Builds with Buildkite’s New Plan — Set up CI/CD pipelines, frontend builds, ML training, Ops automation, security scanning, or IOT testing 📦

Buildkite sponsor

CSS Generators: Custom Borders — A CSS-only generator for zig-zag, rounded and wavy-style borders.

Temani Afif

HyperUI: Open Source Tailwind CSS Components — Popups, inputs, pagination, cards, and a lot more besides.

Mark Mead

Peaks 2.0: UI Component for Interacting with Audio Waveforms
BBC