Issue 540 - Eric Meyer shows off max-inline-size (16)

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.

🎂  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.

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.

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.

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.

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.

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.

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.

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.

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 📦

Plyr React 4.0: A Responsive Media Player React Component — Supports video, audio, YouTube and Vimeo. GitHub repo.