Together with  SpeedCurve
🚀 Frontend Focus

#​645 — May 29, 2024 | Read on the web

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.

Max Böck

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

Sacha Greif

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.

SpeedCurve sponsor

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.

Brecht De Ruyte

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.

Jiayi Hu

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

▶  “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.

Theo Browne

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.

Rachel Andrew

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.

Sentry sponsor

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?

Frank Force

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

Robb Knight

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.

jen chan

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

David Bushell

Best Practices for Naming Design Tokens, Components, Variables, and More
Cosima Mielke

Creating an Accessible Toggle Switch in Tailwind CSS
Kyndrea Martinez

🔧 Code, Tools & Resources

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

Fontsource

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.

Szymon Nowak

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.

Userfront sponsor

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.

Wesley Luyten

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.

Jesse Pence

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.

GruCloud

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

Abhishek Y

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.

CodeMender

🍄 ...and finally

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

Temani Afif Codepen

Ipx.