Together with  Frontend Masters logo

#​583 — March 8, 2023 | Read on the web

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)

🚀 In related news, the Astro project has unveiled an all new look.

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.



📙 Tutorials, Articles & Opinion

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

▶  Progressive Web Apps (PWA) for Beginners — This new, beginner-focused video series covers how to build PWAs, what capabilities they have, the pros and cons of building them, and more over the course of 17 tutorial videos.

Microsoft Developer beginner

How We Built Our Multi-Platform Design System at — 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 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

Are You Making These Five Mistakes When Writing Alt Text?
Daniel Sage

Simplified Dark Mode with Style Queries
Stephanie Eckles

▶  Five Useful & Responsive Layouts, No Media Queries Required
Kevin Powell

Nesting in PostCSS — Which Way to Go?
Chris Coyier

🔧 Code, Tools & Resources 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

Favpie: A CLI Tool to Generate All Necessary Favicons & Web Manifest File
Pixel Point

Svelte Headless-UI: Unofficial Implementation of Tailwind HeadlessUI for Svelte
Simon Green

🧑‍💻 JOBS

Software Engineer (Frontend) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers.
Sticker Mule

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.