~frontendfocus | Issue 645 - Do you really need that framework? (21)

Old Dogs, New CSS Tricks? — We might be in the middle of a CSS renaissance, but with low uptake of many modern features, Max questions if 'feature fatigue' is setting in. He also considers what we can do to ensure uptake of these nice new features and how to fit them into our thought processes.

📊 Here’s What We Learned From the First State of HTML Survey — A helpful recap of the key findings from the State of HTML survey results — a survey that over 20,000 of you filled out.

Catch Page Speed Regressions Before They Happen! — "We actually don't need to log in much. We've set up performance budgets and deploy-based testing. We just wait to get alerts and then dive in to fix things". Track the metrics that matter, including Core Web Vitals. Stay fast. Find out how.

Modern CSS Layouts: You Might Not Need a Framework For That — Various modern CSS features now offer simpler and more flexible approaches to styling and layout, without the added dependencies or abstractions that a framework may introduce. As such, Brecht is keen to encourage confidence in using CSS for those things that we tend to avoid doing ourselves.

A Comprehensive Guide to JS Performance Analysis with Chrome DevTools — A surprisingly thorough walkthrough of the practicalities of using Chrome DevTools for digging into performance issues.

▶  “Act on Press” - John Carmack's Hot Take on UI — A video response to a recent, lengthy tweet from John Carmack (of Quake and Armadillo Aerospace fame) on user interface interaction responsiveness. Theo says: “onMouseDown might be my goto in the future”. Lots of debate on the right approach.

Masonry and Reading Order — There’s been plenty of debate lately around so-called masonry layouts, and Rachel (of the Chrome team) wants to address some additional questions around it, specifically on the content reordering issue that masonry presents.

5 Easy Tips to Improve Your Personal Website Performance — Salma Alam-Naylor shares easy ways to give your personal website (and all other websites, in fact) a performance boost.

City in a Bottle: Raycasting in 256 Bytes of HTML and CSS — Frank has a reputation for putting together stunning visual demos with the tiniest amounts of code. This is no exception. He goes into a lot of detail about how it works here. Who needs megabytes?

/ Slash Pages: A Guide to Common Base-Level Web Site Pages — Some suggestions for what pages (such as /about, /contact, /sitemap, etc.) you may want to consider adding to your site.

Stop Resizing Your Browser: Improve Testing for Responsiveness — “When you resize your browser, you’re not testing for responsiveness. You’re testing the side effect of how a layout looks when you resize a browser.”

Modern WordPress - Yikes? — Sharing some frustrations on the current state of WordPress and the ‘code-within-code’ inception found within the codebase. “I loathe what WordPress development has become”.

Fontsource: 1700+ Open Source Fonts in npm Packages — On the surface, it’s a handy way to browse and filter over a thousand different Web fonts (from Google Fonts as well as other sources), but go a step further and you can integrate fonts into your apps in a version-locked manner by way of npm (or just grab a ZIP, if you prefer).

Signature Pad 5.0: Smooth Signature Drawing for the Web — If you need people to give you their signature or similar scrawls on the Web, you can use this to let them scribble away easily. GitHub repo.

Drawing the Auth Owl at Userfront | Transformational Auth & Identity — Read the story behind Userfront. Including the vision behind the company and what auth should (and shouldn't) have.

selectlist-polyfill: Polyfill for the Proposed <selectlist> Element — Based on a proposal from Open UI, seen here, this polyfill (which depends on the Popover API) aims to overcome the styling and interoperability problems inherent in using the <select> element.

jessquery: A Lightweight jQuery Alternative for the Modern Web — Aims to provide a similar experience to using jQuery by offering a wrapper around the DOM API for easier DOM manipulation at a fraction of the size. It’s well-documented and works with TypeScript.

Bau.js: A Small, Reactive Library and Components for Building User Interfaces — You can check out the 50+ styleable components here, and the library itself boasts no JSX, no templating, no virtual DOM, a CSS-in-JS solution, integration with Astro, among other features.

OKLCH Color Variations — A neat Figma plugin for creating accessible color palettes using the OKLCH color space.

CodeMender: A Platform to Help Frontend Devs Master the Art of Debugging — Includes a small collection of free and premium real-world JavaScript project bugs of varying difficulty levels, to help you sharpen your debugging skills.

Super CSS Mario — A slightly wobbly but CSS-only keyboard game in which Mario has to collect some coins whilst avoiding Goombas – the usual story. It’s a Chromium-only experiment, so won’t work in Firefox or Safari. (If you're on a non-Chromium browser, here's another Mario flavored visualization to play with.)