An End to Typographic Widows on the Web — The new text-wrap:balance declaration (defined in CSS Text Module Level 4) is currently shipping in Chrome Canary, and is soon to be in Blink-based browsers including Edge. It’s a relatively new bit of CSS which promises to all but end typographic widows (single overhanging words on new lines – really an orphan in this case). Tyler Sticka also looks at the headline balancing potential.

Richard Rutter

2023 Web Framework Performance Report — The folks working on the up and coming Astro Web framework looked at data from over 100,000+ real websites to understand how different frameworks actually perform in the real-world across core web vitals, Lighthouse and more.

Fred Schott (Astro)

Anjana Vakil on the JavaScript Fundamentals — This video course covers the core skills needed to become a professional JavaScript programmer, including writing reusable code with functions, conditionals, fetching data from APIs, and more. It's everything you need to continue your journey to become effective at JavaScript.

Frontend Masters sponsor

The Web Needs a Native .visually-hidden — If you want to hide something visually, but still expose it to assistive technologies such as screenreaders, what do you do? That’s where a .visually-hidden utility class may come in. Ben makes the case that it’s time that we made this a web standard.

Ben Myers

Tether Elements to Each Other with CSS Anchor Positioning — A new (and experimental) API is coming to the web platform to help you position elements in an adaptive way with no tricks.

Chrome Developers

The Complete Guide to CSS Media Queries — We shared this very thorough guide on all things CSS media queries a few years ago, and it’s just been updated. It remains a good primer, well worth bookmarking.

Polypane

Everything You Need to Know About the Gap After the List Marker — Have you ever used the ::marker pseudo-element? Here’s a look at all the ways in which you can use it, and what you need to know about custom list markers too.

Šime Vidas

How We Built Our Multi-Platform Design System at Booking.com — A case-study from the travel giant looking at how they built a design system that works at scale (think 150+ product teams, used by 200+ designers).

Nicole Saidy

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

ARIA vs HTML — As Adrian notes “fighting use of ARIA for content just because it is not HTML might be wasted energy. Once you start making interactive bits, however, you risk technical debt if you lack rigor”.

Adrian Roselli

A Beginner's Guide to Manual Accessibility Testing — Learn how to do manual testing with a keyboard, screen reader, and zoom testing.

Whitney Lewis beginner

tints.dev: A Tailwind CSS 10-Color Palette Generator and API — The motivation for this tool is to avoid Tailwind’s built-in color tools that tend to make every project look the same. There’s an associated blog post here.

simeon Griggs

StatiCrypt: A Way to Password Protect Static HTML — This generates a password protected HTML page that can be decrypted in-browser via a UI prompt and is also available via CLI. Try this example.

Robin Moisson

Need Help with Your React.js Project? Hire Our Team of Senior Devs

OmbuLabs | Lean Software Boutique sponsor

Text Highlighter: Highlight Search Results in Textareas — Responsively highlight search results within a textarea element without interfering with its operation. There’s a live demo.

Walter Staeblein