#​554 — August 10, 2022 | Read on the web

Astro 1.0: A Web Framework for Building Fast, Content-Focused Sites — This popular framework, used by the likes of Google, IKEA, and The Guardian, and well known for its 'islands architecture' approach, has just hit 1.0, with image optimization improvements, MDX support, an upgraded build engine, and more. There’s a lot of praise for the project from the wider community here too.

Fred Schott

🛠 Core Web Vitals Tools to Boost Your Web Performance Scores — A collection of tools to help you identify, compare, analyze and fix your Core Web Vitals scores and boost the performance of your sites.

Zara Cooper

Participate in Our Dev Tools Survey and Win $25 Gift Card — Help us solve the right problems and create better products! If you are part of the software development world, fill our survey on developer tooling, it should take you less than 10 minutes. The first 400 respondents will win a $25 gift card.

Progress Telerik sponsor

Not All Zeros are Equal — There’s an established ‘best practice’ that CSS authors (as well as many linters and minifiers) should remove units from any 0 value. Miriam explains that it’s “a fine rule in most cases, but there are a few common situations where it will break your code”.

Miriam Suzanne

:has(): The Family Selector — Support for the :has() selector has now landed in Chromium 105. Jhey takes a look at some of the awesome powers it can bring to our CSS. Lots of good examples here.

Jhey Tompkins (Chrome Developers)


📙 Tutorials, Articles & Opinion

Illustration by Alex Castro  

The Hidden History of Screen Readers — The author spotted a Hacker News thread in which an engineer asked: “I’m going blind, how should I prepare?” — in researching how to answer, Sheon delved into the topic, and wrote this piece as a result. It highlights the work of pioneering blind programmers who have been at work creating the tools their community needs for decades.

Sheon Han

The Ballad of Text Overflow — James makes the case that the CSS text-overflow property, used to show a visual indication for text that’s been clipped by its container, should “never be used”.

James Edwards

Send Slack Alerts from Your Node.js Application — Slack has 119,000 paying customers. These are your customers too. Send important alerts to Slack to ensure engagement.

Courier.com sponsor

Designing for Long-Form Articles — Designing for long-form web articles needs plenty of consideration if striving for a relaxed/comfortable reading experience. This article points out a few design choices to consider that can make longer content nicer to read — plus there’s a roundup of good examples.

Daniel Schwarz

Best Practices for Inclusive Textual Websites — This a lengthy guide to making simple and inclusive sites that are focused on content before form.

Rohan Kumar

Forms in Modals: The UX Case — Some thoughts on why you should “think twice before putting forms (especially complex ones) inside modal windows”.

Victor Ponamariov

CSS Border Animations — This looks at several ways you can go about animating a border in CSS.

Bramus Van Damme

Puzzlescript: A Dev's Guide to an HTML5 Puzzle Game Engine
David Eastman


Sr Frontend Developer For a VA.gov Team (Remote) — Use React to improve Veterans’ access to healthcare & benefits at VA.gov. We work on meaningful problems with productive stacks.

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

🌒 dark-mode-toggle: Custom Element to Easily Add a Dark Mode Toggle or Switch to a Site — Will initially revert to user preferences based on prefers-color-scheme with the option for the user to override this.

Google Chrome Labs

HTML Size Analyzer: Analyze and Look for 'Bloat' in Your HTML — You can paste HTML directly or check via URL. As the description explains, this tool can help you “catch bloat like inline images, large React hydration state, or code duplication.”


Join Polywork: The Professional Network Built for the Future of Work

Polywork sponsor

Nativefier: Make Any Web Page a Desktop App — A basic Node.js-powered tool for creating a desktop ‘app’ for any Web site using Electron as the webview. For Windows, macOS and Linux.

Goh Jia Hao

Markdown-Tag: Add Markdown to any HTML using a <md> Web Component — Note the GPL license.

Marketing Pipeline


Simple Icons 7.6 – SVG icons for popular brands and tools.
Juice 8.1 – Inlines CSS stylesheets into your HTML source.
Tailwind CSS 3.1.8 – Three fixes in this version of the popular utility-first framework for UI development.