Issue 536 - Is designing in the browser true design? (16)

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

Filestack File Uploader & File Upload API — Advanced features include OCR, virus scanning & more. Get started with a free account.