~frontendfocus | Bookmarks (278)

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.

Optimizing Bug Reproduction Workflows — Join our live stream later today where we’ll cover practical ways to improve your bug reporting workflow.

Zoom, Zoom, and Zoom — A post exploring the intricacies of the three types of browser magnification and their CSS equivalents. If you want to understand zoom in the browser, this is a good place to start.

How Keyboard Navigation Works in a CSS Game — You may recall a few issues ago we featured this Chromium-only CSS Mario game — now here’s a look at how it works, specifically moving Mario with keyboard input. All HTML/CSS, no JavaScript.

CSS One-Liners to Improve (Almost) Every Project — A collection of handy, simple one-line CSS solutions to add little improvements to any web page.

"If" CSS Gets Inline Conditionals — Distilling some thoughts on the potential if CSS conditional, along with some additional details and tidbits that are worth knowing about this proposed idea.

The Magic of Clip Path — This post sets out to “inspire you and show you that thinking outside the box can lead to some great animations” — all via the magic of the very powerful clip-path CSS property.

Batman-Comic.CSS — A fun caped crusader comic library that allows “children to play with HTML and quickly see the power of CSS”.

Font Interceptor: Download the Fonts in Use on a Target Site — Enter a URL and this tool will generate direct links to all the fonts the page uses. Sounds sketchy but it’s replacing the extra steps needed to do this with your browser’s DevTools.

Braille-Tools: CSS and JavaScript to Display Braille — Designed for displaying English Braille Grade 1 for sighted people and available in three different styles (big, small, small 3D). Lots of demos here.

Nho: Tiny JS Library for Easy Web Component Development — A simple solution for kickstarting your Web Components, to avoid the sometimes unnecessary stuff found in similar tools.

▶  Are Web Components Worth It? — Jake and Surma chat about web components, why they were invented, what they’re useful for, and how they could improve.

15 Page Speed Optimizations That Sites Ignore (at Their Own Risk) — Optimizations to put in place, including some fairly easy low-hanging fruit, to improve your page performance.

Want to Dive Deeper into Stories of the Software Industry? — The Stack Overflow Podcast is the best place to learn about what’s happening in software development today. Join the Stack home team for conversations with fascinating guests to help you understand how technology is made and where it’s headed.

Interop 2024 Mid-Year Update — As we head into the second half of the year, Rachel shares a look over how Interop 2024 has helped improve web interoperability this year so far and what key Baseline features we’ve seen up to this point.

State of Text Rendering 2024 — A highly detailed look at free and open source fonts, how the text rendering landscape has advanced over the past decade or so, and where support for various features currently lies. There was plenty of related discussion for this one over on Hacker News.

Exploring the Challenges in Creating an Accessible Sortable List — The accessibility team at GitHub consider drag and drop actions to be a “high-risk pattern” — as such they’ve been working on developing a more accessible solution for this highly interactive interface. This post looks at the challenges faced, and how they solved them.

Script Integrity — This web platform feature (the integrity attribute on script and link elements) can help against third parties changing the code that they are providing.