Together with  Frontend Masters logo
🚀 Frontend Focus

#​652 — July 17, 2024 | Read on the web

CSS Selectors — A thorough, complete guide/reference covering all of the various methods we have to select elements in CSS (such as pseudo-selectors, nested selectors, attribute selectors, etc) and how to use them for applying styles.

Geoff Graham

Seamless SVG Copy-Paste on the Web — Support has been added to Chromium browsers for SVG files in the Async Clipboard API. This means copying and pasting SVG data across any app that wants to use SVG, whether it’s native or web, becomes possible.

Taylore Givens and Patrick Brosset

Figma Isn't Just for Designers — Steve Kinney shares how devs can leverage Figma to bridge the gap between design and development. Learn to use constraints, grids, and auto layout, explore component properties, variables, and modes to create flexible UI elements and truly responsive designs.

Frontend Masters sponsor

@property: Next-Gen CSS Variables Now with Universal Browser Support — The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers.

Una Kravets

Private Browsing 2.0 in Safari — First included as a feature in Safari almost twenty years ago, ‘Private Browsing’ has been getting a big revamp over the past year. The WebKit team explains what changes and enhancements have occurred and the mitigations to prevent breaking existing sites.

The WebKit Team

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

An Update on Invokers: Invoker Commands in HTML — An overview of this experimental syntax which will allow devs to assign behavior to elements in a declarative and accessible way.

Brecht De Ruyte

▶  Dialog Dilemmas and Modal Mischief: A Deep Dive into Popovers — A talk from the All Day Hey! conference on dialogs, including the new popover attribute, “modality” and using the top layer.

Hidde de Vries

ViteConf is Back! — ViteConf will be returning to the virtual stage on October 3rd. Get your tickets now!

StackBlitz sponsor

▶  Utility First CSS Isn’t Inline Styles — A 52-minute talk on the comparison often made between utility first options versus inline styling. Related slides here.

Sarah Dayan

Embracing Functional CSS: Have We Moved On? — A look at the positives of utility-first CSS, and why we’ve become accustomed to introducing it to our workflows.

Oliver Creswell

JPEG History: Compressing It Down, Keeping the Essence — How the JPEG file — and the lossy compression it allowed and encouraged — became the dominant way we shared digital photos on the internet.

Ernie Smith

How to Try Experimental CSS Features
Chen Hui Jing

▶  Understanding the European Accessibility Act and Its Impact on Websites
WP Tavern podcast

WebAuthn: Enhancing Security with Minimal Effort
Taylor Beseda

📰 Classifieds

Meetings should be more like code reviews. We're building a product for that and looking for software leaders to join the beta. Apply here.

🔧 Code, Tools & Resources

CSS Grid Generator — A handy browser-based tool that can create custom CSS grid layouts. The generator allows you to specify the number of columns, rows, and gutter size.

Kristjan Retter

Eruda 3.1: A Console for Mobile Browsers — If you’re in a situation where you have no access to DevTools, you can add Eruda to your page and it provides a sort of virtual devtools you can use from any browser, including on mobile.


Stop Worrying About Your Auth. Let FusionAuth Handle It — Flexible deployment. Advanced features like MFA, SSO, and more. Check out the Go SDK.

FusionAuth sponsor

Linefont: A Typeface for Rendering Line Chart Data — A one-of-a-kind font that’s part of Google Fonts that technically falls under the “display” fonts category. This interactive demo lets you adjust the weight, width, and size to get an idea of what’s possible.

Dmitry Ivanov

Hyphenopoly 6.0: A Polyfill for Client-Side Hyphenation — Hyphenates text if the user agent does not support CSS hyphenation (a feature that’s part of Baseline but with widely varying support) or not for the language present. An interesting use of WebAssembly too.

Mathias Nater

unplugin-turbo-console: Improve the Developer Experience of console.log() — Part of UnJS’s Unplugin ecosystem, this enhancement to console.log() allows you to print the file name, line number, variable name, has highlighting for different file types, and features jump-to-source with one click.


🕰️ ICYMI (Older links, still worth checking out)