Together with  Frontend Masters logo
🚀 Frontend Focus

#​644 — May 22, 2024 | Read on the web

🧠 Sessions from Google I/O

Last week, Google's annual developer conference took place, and now we've got a handful of relevant videos to share with you from the show. There's a full playlist here if you'd rather pick your own to watch.

What's New in the Web — Covers new, interoperable features available across browsers, and how Baseline helps highlight these.
Rachel Andrew

The Latest in Web UI — Una highlights the latest CSS developments, UI components, and interactions on the web platform, along with what the Chrome team are doing to push things forward.
Una Kravets

From Fast Loading to Instant Loading — A half hour talk looking at how we can achieve ‘near-instant page loads’ using the new Speculation Rules API.
Barry Pollard

What You Need to Know About Third-Party Cookie Deprecation
Sam Dutton, Erin Walsh

Automate Browser Testing with Tools & Best Practices From Chrome
Matthias Rohmer, Demian Renzulli

Web AI: On-Device Machine Learning Models and Tools for Your Next Project
Jason Mayes, Na Li

Master CSS Grid & Layout Techniques — Grid is the most important tool in a web developer's toolkit for laying out pages — and with this extensive video course you'll learn to achieve complex layouts with minimal code. There's plenty of CodePen exercises too to help best understand the techniques you'll need.

Frontend Masters sponsor

Rethinking Text Resizing on the Web — An in-depth look at how Airbnb approached improving web accessibility at scale, particularly around text size, going beyond browser zoom settings, the challenge such changes could introduce, and the subsequent benefits.

Steven Bassett (Airbnb)

What UI Density Means and How to Design for It — A thoughtful look at how user interface density has changed over the past twenty or so years, defining what such a term means today, along with some thoughts on which approach we should be taking.

Matthew Ström

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

On Compliance vs Readability: Generating Text Colors with CSS — Can we emulate the upcoming CSS contrast-color() function with features that have already widely shipped?

Lea Verou

We’ve Got Container Queries Now, But Are We Actually Using Them? — Posits that container query adoption isn’t particularly high, and then shares some reasons as to why that may be the case (beyond it just being new, and any potential browser support concerns).

Chris Coyier

contrast-color() is a Good Thing, But Also Solving the Problem at the Wrong Layer — On the other hand.. some considered thoughts on the new CSS contrast-color() function and how it may placing the effort in the ‘wrong’ place.

Eric Bailey

Open-Source JavaScript Form Builder to Create Dynamic Forms Right in Your App — With SurveyJS library suite, you can build JSON-driven forms in a fully-integrated no-code form builder and store responses in any backend, inc. PHP, ASP.NET Core, and Node.js.

SurveyJS sponsor

Navigating the Variety of Web Accessibility Evaluation Tools — A handy, in-depth guide on web accessibility evaluation tools, their features, and effective usage.

Caitlin de Rooij

Weighing In on CSS Masonry — “Should masonry be its own display method outside grid? Absolutely.

Keith J. Grant

<style>: Inline Optimizations for the Bold — Some brief thoughts on the potential performance bump of inline CSS.

Morgan Murrah

Hidden vs. Disabled In UX — Considerations for hiding versus disabling, along with possible alternatives to improve your UX.

Vitaly Friedman

We Need to Talk More About Conformance, If We Want to Stop Fantasy HTML
Jens Oliver Meiert

CSS3? Pfff. Get Ready for CSS6!
Jared White

🔧 Code, Tools & Resources

CSS Pattern: Fancy Backgrounds with CSS Gradients — A collection of nice background patterns, now 144 strong, made with just CSS. We first shared this last year, but it's had lots of updates since.

Temani Afif

Instant, Detailed Online Store Performance Analysis for Devs — Analyze site performance and get clear next steps for improvement with Elastic Path’s free Storefront Grader™.

Elastic Path sponsor

Vue Fluid DnD: An Animated Drag-and-Drop Library for Vue — Designed for lists of items and you can view a variety of examples here, including one where the items are draggable using handles. GitHub repo.

Carlos Jorge Rodriguez

Gradientor: A Minimalist, Beautiful Radial Background Generator — Mostly for inspiration, the tool lets you click, move the mouse, and scroll to change the color, position, and size of the gradient and you can choose from three types of colors (vibrant, pastel, or monochromatic).

rodolfo fanti

🤔 ...and finally

Daily Quiz: A Gallery of JavaScript Quiz Questions — A decent way to learn some of the quirky and esoteric parts of the language. Click any of the examples to view some code, after which you can guess the output using a multiple-choice format.

with code example