Frontend Focus

🇺🇦 #​536 — April 6, 2022 | Read on the web

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

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

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

How Does Firefox's Reader View Work?

▶  Why to Start Using the color-scheme CSS Property
Zoran Jambor


Fullstack Developer — Konrad is hiring Fullstack developers to join our team in building products for the world’s most exciting companies.
Konrad Group

Senior Software Engineer at This Dot Labs (Remote, Worldwide) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more.
This Dot Labs

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools & Resources

Draw 'Handdrawn' Diagrams in VS Code with ExcalidrawExcalidraw 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 The Best Home for Your Next Online Project. Start Today 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 :-)


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.


Six Useful Browser Bookmarklets to Boost Web Development
Daniel Schwarz

💌 Our Other Newsletters

Beyond Frontend Focus we also publish a handful of other helpful email newsletters that you might not know about. You can see the latest issues of each directly on their homepages:

💛 JavaScript Weekly, as you might expect, covers all things JavaScript and the wider JS ecosystem, including TypeScript, WebAssembly, Vue.js, and more.

⚛️ React Status dives into the the React and React Native world, whereas Node Weekly goes deeper on all things Node.js, the npm ecosystem, and other server-side JS platforms like Deno.

⚡️ Serverless Status focuses entirely on serverless platforms, the idea of functions as a service, and the increasing number of new places serverless ideas keep popping up.

🍓 JAMstacked is Brian Rinaldi's fortnightly update on the quickly evolving JAMstack ecosystem.

🐘 Both Postgres Weekly and Go(lang) Weekly round out our collection (hopefully it's obvious what they're about). I hope you'll take a look and find something of interest :-)

Chris Brandrick, Editor