~frontendfocus | Issue 647 - Apple's Safari updates from WWDC (17)

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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

👁️ 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.

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.

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.

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.

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.