~frontendfocus | Issue 652 - All the selectors you need (17)

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.

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.

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.

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

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.

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.

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

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

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

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.

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.

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.

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.

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.

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.

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.