Together with  The Software House
🚀 Frontend Focus

#​647 — June 12, 2024 | Read on the web

WebKit in Safari 18 Beta — Lots of news from WWDC24 for Safari, with this new beta adding in nearly 50 new web platform features, including View Transitions API support, Style Queries, new Passkeys features, and even WebXR experiences in Safari for visionOS. Plenty to dive into here.

WebKit (Apple)

🍏 If you want more from WWDC, lots of session videos are being added to Apple's developer site and YouTube channel throughout this week.

How To 'Hack' Your Google Lighthouse Scores In 2024 — Lighthouse is influenced by a number of things that can be manipulated and bent to make sites seem more performant than they really are, as demonstrated here. Stuff like this is well worth knowing to ensure you’re not led down a path and misinformed on performance.

Salma Alam-Naylor

State of Frontend 2024 Survey Is Live! Click Now to Join Us — Every input will contribute to a useful, free report on the present and future of frontend development! Whether you're a junior or a CTO, your opinion matters. Perfect for a drink break or a really boring meeting.

The Software House sponsor

Promises from the Ground Up — Josh notes that in order to truly understand promises, a fundamental part of modern JS development, we need “a surprisingly deep understanding of how JavaScript works and what its limitations are”. Luckily, this tutorial covers all the critical context you need.

Josh W Comeau

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

CSS Container Queries — A handy (and certainly bookmarkable) resource on container queries, outlining why you should care about them, what they can do, and when to reach for them. Plenty of solid examples and code here too.

Geoff Graham

A Modern Approach to Browser Support — Puts forward two foundational principles: the first touches upon accessible content and core functionality, with the second highlighting how it’s ok for sites to look different in different browsers.

Richard Rutter

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products and best practices of top startups.

PostHog sponsor

Find Slow Interactions in the Field — This article has recently been updated with fresh guidance on Interaction to Next Paint (INP), helping you figure out if you have an INP issue, how to measure for it and, in turn, interpret any data.

Jeremy Wagner

How Chrome Achieved the Highest Score Ever on Speedometer 3 — A look at how the Chrome browser has been further optimized thanks to the Speedometer 3.0 benchmark, resulting in performance gains for users.

Thomas Nattestad (Chrome)

Highlighting Areas the Browser Engine Repaints — A quick look at how to highlight repainted areas of a page from Chrome, Edge, and Safari devtools.

Patrick Brosset

Nested Anchor Links using CSS — What to do when you want to nest an <a> tag within another <a> tag? (And why you might want to.)

Amit Merchant

The History of Browser Engines from 1990 to Now — An interesting overview and timeline of browser engine marketshare over the past ~33 years.

Alphonse Eylenburg

Responsive Video Works Now. These Features Could Make It Work Better
Scott Jehl

How to Use rem Units in CSS for Accessible Design
Florian Schroiff

A Guide to Building Your First Chrome Extension
Lizzie Paris

🔧 Code, Tools & Resources

👁️ Find Out Who Can Use Your Color Combination — A really handy tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

Corey Ginnivan

Share URL: Share a URL with Web Share, Copy to Clipboard or to Social Media — A collection of simple and straightforward ways to provide a link sharing feature.

Nigel O Toole

Tracing: Frontend Issues with Backend Solutions — Join our live workshop to learn the sources for poor web vitals and how to trace issues at the code-level.

Sentry sponsor

JsonTree.js: A Lightweight Library to Render Customizable Tree Views for JSON Data — No dependencies, lots of customizations, and it’s easy to theme the trees using CSS variables. Try out some examples.

William Troup

Reshot: 40,000+ Free Icons & Illustrations — An extensive set of categorized icons and illustrations available in SVG and PNG formats, instantly downloadable, no attribution required, and available for commercial use.

envato

🫖 The TEA Stack: A Starter Template for Building Projects with Tailwind, Eleventy, and Alpine.js
Matt Waler

Ipx.