A Faster Web in 2024 — The responsiveness metric Google uses in the Core Web Vitals assessment is changing in 2024 (to INP – 'Interaction to Next Paint'). Rick outlines how this metric is uncovering issues that have been flying under the radar, and what we’re going to need to do as a result. There’s also a ▶️ video presentation for this piece, if you’d prefer.

Rick Viscomi

On HTML Web Components — “With web components, you might even say React’s component model is being ported to the browser. But it’s being done in a way that works to enhance how the web already works, not replace it”.

Jim Nielsen

Tackle Any HTML & CSS Challenge — Join Jen Kramer for this video course to practice and refine your CSS skills. Work through five projects leveraging various CSS layout techniques such as flexbox and grid, learn responsive design strategies, develop a strategy for supporting multiple devices, and more.

Frontend Masters sponsor

Designing Web Design Documentation — Highlights the importance of good documentation for safeguarding best practices across web design and development. Documentation “must be like its medium — interactive and constantly evolving”.

Frederick O'Brien

Surprising Facts About New CSS Selectors — Scott digs into how the :is() selector and its various, functional pseudo-class siblings :not(), :has(), and :where() work.

Scott Vandehey

Mastering DOM Manipulation with Plain JavaScript — A mega collection of hundreds of examples of doing things like selecting text, manipulating elements, resizing things, scrolling, and such – all by using the DOM and browser APIs with no external libraries. You Might Not Need jQuery is another classic resource in a similar vein.

Phuoc Nguyen

Why a Low Friction User Sign Up Process Is Crucial for Your Business — This article explores using Customer Identity and Access Management strategies to boost conversion rates and enhance UX.

FusionAuth sponsor

Moving Back to React (from Preact) — Preact felt like a logical, lightweight choice to this team at one time, but they’ve switched to React for better compatibility with Next.js, among other things. Their page weight is up slightly, but they feel the tradeoff is worth it.

Ante Barić (Daily․Dev)

Modern Frontend Testing with Vitest, Storybook and Playwright — A look at why frontend testing is worth the effort, why it possibly had a bad reputation in the past, and shares an approach to making tests easy to write and maintain.

Ian VanSchooten

The URL, Explained — A quick breakdown of the different parts that make up the URLs we all know and love.

IT Tavern

Perfect-Freehand — Your results may vary here depending on just how good you are at free-handing with a mouse or trackpad (that’s my shabby attempt above) — but this site lets you draw something out, dynamically smoothen it out, alter the result, and export the finished creation as an SVG. Here's the associated repo if you want to integrate the feature into your own apps.

Steve Ruiz

scroll-timeline: A Polyfill for the Scroll-Driven Animations API — More specifically, this covers the ScrollTimeline and ViewTimeline APIs, which are detailed in the spec here, and still currently experimental in terms of browser support.

Robert Flack

Simplify Your Releases and Debug Faster — Monitor deployments, fix issues, and automate app and error monitoring. Are your releases that easy? Join our group demo.

Sentry sponsor

Ribbon Shapes: A Gallery of 100+ Pure CSS Ribbons — You certainly won’t need all of these – but there’s any ribbon style you can imagine here! They’re quite attractive and easy to copy and paste into your code.

Temani Afif

HTMLrev: A Directory of Categorized Frontend Templates, Free for Commercial Use — The site doesn’t hold any templates, but merely links to the resources. You can filter by any of the tech categories (HTML, React, Next, Tailwind, etc.) which include landing pages, portfolios, dashboards, etc. Naturally, your mileage may vary.

HTMLrev