~frontendfocus | Issue 651 - Exploring the magic of clip-path (18)

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.

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.

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.

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

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.