Tweaking in the Browser? — Some well-reasoned thoughts here on the nuance behind designing in the browser and how it often results in a process of constant context switching and tweaking. Ahmad goes on to share his approach, and the place design tools like Figma have in his workflow.

Ahmad Shadeed

Designing a Better Infinite Scroll — There are a lot of considerations when it comes to implementing a sound, user friendly infinite scroll. This article digs in to them (pagination, load more, URL changes on scroll, footer reveal, etc), with plenty of visual examples too.

Vitaly Friedman

Filestack: The Premier File Handling Service — Filestack is the all-in-one solution for your file handling needs, from blazing fast uploads to swift, reliable, delivery. Take advantage of image intelligence features like optical character recognition or object tagging to level up your app today.

Filestack sponsor

Accessible Description Exposure — A helpful bit of work from Adrian here, digging into how aria-describedby is exposed across a half dozen screen readers and browsers. Lots of videos showing how things vary. The takeaway: “Definitely do not rely on the accessible description to convey critical information”.

Adrian Roselli

A Guide to Hover and Pointer Media Queries — Food for thought here on how to adapt your sites to the various scenarios of a device pointer, plus a look at how to go about properly using media queries such as hover, pointer, any-hover and any-pointer to help.

Cristian Diaz

Building an Interactive Sparkline Graph with D3 — Goes into a lot of implementation depth – a good tutorial.

Michelle Barker

How To Build a Progressively Enhanced, Accessible, Filterable and Paginated List — Ever wondered how to build a paginated list that works with and without JavaScript? This article explains just how you can leverage progressive enhancement to do just that with Eleventy and Alpine.js.

Manuel Matuzović

Locate Front-End Issues on Web Applications in Real-Time with Datadog — Identify and resolve front-end issues on your web applications before your customers notice. Start a free trial today.

Datadog Real User Monitoring sponsor

Performance Tool in Firefox DevTools Reloaded — Version 98 of Firefox features a new version of the ‘Performance’ panel in the DevTools Toolbox. Here’s a quick look at how to use it.

Jan Honza Odvarko, Nicolas Chevobbe (Mozilla)

Optimizing Core Web Vitals on SPAs — Single-page applications often present some unique challenges for measuring and optimizing core web vitals — here’s a review of some key optimisations you should be making for yours.

Simon Hearne

Draw 'Handdrawn' Diagrams in VS Code with Excalidraw — Excalidraw is a popular online drawing tool for creating ‘hand drawn’ diagrams, and one of its coolest features is being able to export in SVG for lossless use in your pages. This VS Code extension brings it.. well, into VS Code, and is now blessed as being the official VS Code Excalidraw extension.

Visual Studio Marketplace / Achille Lacoin

a11y-dialog: A Lightweight, Accessible Way to Create Dialogs — It’s possible to replace JS dialogs with the <dialog> element in many cases now, but that’s not always desired. This is a nice implementation – demo.

Kitty Giraudel

Porkbun.com. The Best Home for Your Next Online Project. Start Today

Porkbun.com sponsor

Martian Mono: An Open-Source Monospace Type Family — Consisting of a variable font and 28 styles. Contains only basic Latin, figures, punctuation, and essential symbols right now, but ligatures for code, italics, and other language support are said to be in progress.

Evil Martians

pppalette: A Friendly Color Palette Generator for Beautiful Colors — Another useful tool from Sébastien, this one to generate different color palettes, and optionally choose a color to use with various blending options for a more cohesive palette.

Sébastien Noël

Snipt: A Code Snippet Search Engine — Search code snippets from 15+ programming languages, sourced from code snippets created in various ways using the Codiga code snippet service. Of course, the first thing I tried was centering an item with CSS.. and it worked :-)

codiga

Detergent: An Online Tool to Prepare Text for Pasting into HTML — Text should be HTML-encoded, have no invisible characters, use smart characters where possible.. things like that.

Codsen