#​547 — June 22, 2022 | Read on the web

What Would a Chromium-Only Web Look Like?

Browser engines do much of the heavy lifting of managing the complexity and nuances of the web — and we’re blessed to have three major, open source ones — but if some in the Chromium community are arguing for “a Chromium-only Web” (and there are some strong rebuttals to this claim), then just what happens if that one day becomes a reality? Mark Nottingham shares his thoughts on the matter.

→  mnot.net/blog/2022/06/22/chromium-only

Don’t Let Your Issue Tracker Be a Four-Letter Word — Frustrated with your project management software? Shortcut is a goldilocks solution for software engineers, product managers, and designers, providing the ease of use of a simple tool with the power and flexibility of an overly complex one.

Shortcut (formerly Clubhouse.io) sponsor

Release Notes for Safari Technology Preview 147 with Safari 16 Features — Available for download for macOS Monterey 12.3 or later and the macOS Ventura beta. Includes several of the new Safari 16 features that debuted at WWDC, such as: Passkeys, Safari Web Extensions improvements, Web Inspector Extensions, Flexbox Inspector, and more

Jon Davis

Pop-ups Are Dead, Long Live Pop-ups: Or 'The Bait-and-Switch Hidden in a Cookie Announcement' — The UK government is said to be planning to ‘kill cookie pop-ups’ as part of its post-Brexit Data Reform Bill, but there’s more to it than that, as Heather expertly lays out in this opinionated piece.

Heather Burns

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Precise Timing with the Web Animations API — Working with timers in JavaScript can quickly get complicated. Kirill takes a look at how the Web Animations API could eliminate the need for such timers in certain cases.

Kirill Myshkin

Better Scrolling Through Modern CSS — We typically don’t spend a ton of time thinking about scrollbars, but here’s a few things you can quickly do to customise them.

Mayank

How GitHub Thinks About Browsers — This is an interesting dive into how GitHub is used across various browsers, what the company does to monitor such usage, and what they then do to ensure a solid user experience across the board (progressive enhancements, older browser support, etc).

Keith Cirkel

Observability for Your Frontend Tests — Get instant, real-time visibility into the performance of your test suite with Buildkite Test Analytics.

Buildkite Test Analytics sponsor

The Guide to Windows High Contrast Mode — How to go about making your sites friendly for Windows High Contrast Mode users by using a good set of practices, including the media query forced-colors and its toolset.

Cristian Díaz

text-overflow: ellipsis Considered Harmful? — A note on the downsides of constraining content through CSS.

Eric Eggert

Internet Explorer Still Hasn't Gone Away — As is always the case, there are some exceptions to the rule.

Adrian Roselli

Conditionally Styling Selected Elements in a Grid Container
Preethi

The Rise and Fall of Neumorphism
Jeff Cardello

Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team

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

🔧 Code, Tools & Resources

Scroll Btween: Use Scroll Position to Tween Any CSS Values on DOM Elements — Scrolling/parallax libraries tend to feel the same but this one demonstrates some diverse examples with colors, images, and text — all with no dependencies.

Olivier Blanc

Grid Auto Fit for Tailwind CSS: A Tailwind Plugin to Create a Responsive Grid Without Media Queries — A useful CSS technique regardless of Tailwind, but this uses grid-template-columns: autofit as a basis for the concept.

Thirus

Startups Like Brex, Doordash, Plaid and Ramp Use Retool to Build Internal Tools 10x Faster

Retool sponsor

TinyWow: A Collection of Online Tools to Manipulate Files — Various utilities to edit, convert, and otherwise work with PDFs, images, videos, CSV, EPUB, URLs, and more.

Box20

#HEXWORDS: A Gallery of Searchable Hex Colors That Are Also Words — A niche use case admittedly, but a bit of fun nonetheless — examples include the well-known #BADA55 along with more obscure ones like #DEC0DE, #CABB1E, #EFFACE, and so on.

Paolo Ricciuti

QUICK RELEASES

This is a new section we'll include from time to time, quickly highlighting some recently updated and popular projects and GitHub repos of relevance in the frontend space:

html-react-parser 2.0.0 – HTML to React parser on server or client.
Boring Avatars 1.7 – Generates custom, SVG-based avatars.
simple-icons 7.2 – SVG icons for popular brands.
PrimeVue 3.15 – A set of open source UI Components for Vue.
flag-icons 6.5.1 – An SVG collection of all country flags — plus the CSS.
Adapt Framework 5.20 – A toolkit for creating HTML e-learning courses.

Ipx.