Optimize Interaction to Next Paint — A look at how to optimize for the experimental Interaction to Next Paint (INP) metric — a way to assess a page’s overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur.

Jeremy Wagner & Philip Walton

Does 'www' Still Belong in URLs? — “a small pedantry war has been raging in our address bars” — and this post explores some for and against arguments on the humble W(orld) W(ide) W(eb).

Pieter De Decker

Updated 'Complete Intro to React' Course — Learn to build real-world apps using modern React and the latest tools in the React ecosystem like Vite, ESLint, TailwindCSS, React Router, and React Query!

Frontend Masters sponsor

Inside the Mind of a Frontend Developer: Article Layout — A new article in Ahmad’s series exploring “how a frontend developer thinks” — this time looking at the various considerations whilst building a layout for an article.

Ahmad Shadeed

Introducing Passkeys in Chrome — Passkey support is now available in Chrome Stable M108.

Ali Sarraf (Google)

Accessible Frontend Patterns for Responsive Tables — There’s no universal solution for making every kind of table responsive and usable on smaller screens, so we have to rely on various patterns — which this blog post explores/explains, complete with code examples.

Adrian Bece

'Contrast Is Boring — Can't Someone Else Do It?' — Having sufficient contrast on your website is important, and the experimental color-contrast() function is hoping to make compliance easier. It ensures your text always passes WCAG AA standards.

Magnus Rand

The Developer’s Guide to Designing Notification Systems

Courier.com sponsor

PX or REM in CSS? Just Use REM — When choosing between pixels and REM units in CSS, Austin says you should “almost always use rems”. This article explains why.

Austin Gil

New Viewport Units — Eric reviews the newly available units to manage space within large, small, and dynamic viewport spaces.

Eric A. Meyer

One Day We'll Have a Fully Customizable Select — A look at a proposed HTML feature that “may end up replacing” a lot of <div> based custom input components: <selectmenu>.

Hidde de Vries

View Transitions API — An overview of the work-in-progress native API for animating page and element transitions.

Ryan Trimble

CSS Infinite Slider Flipping Through Polaroid Images — A slider/carousel that flips through a stack of Polaroid-style images. A neat effect.

Temani Afif

Mesher: A CSS Mesh Gradients Generator — Apparently all the cool kids are using mesh gradients and so should you! :) This tool has a nice UI to customize the gradient, you can generate random gradients, then export as CSS.

css hero

You Focus on Code. Zigi Handles Your Workflow, Right from Slack — Zigi handles your day-to-day tasks from Jira & GitHub, and sends you actionable updates only when they’re relevant to you.

Zigi sponsor

CodeLink: Share Code with Context — A VS Code and JetBrains extension that lets you link to blocks of code in your repo, open in your IDE, and share with others.

codelingo

Scene.js 1.7: A CSS Timeline-Based Animation Library — Plenty of examples on the site. Has components for React, Vue and Svelte too.

Daybrush

vectormaker: An Online Tool to Convert Raster Images to SVG — Upload a PNG or JPEG image and this tool will spit out a colorized SVG version of the file that looks somewhat like a drawing or art rendering of the original. Results vary and simpler images will convert better.

Burak Tokak

❄️ Snow.js: Add A Snow Effect to a Web Page — It’s that time… (in our part of the world at least.)

embed.im