--- title: "Exploring the magic of clip-path" publication: "Frontend Focus" issue: 651 published_at: "2024-07-10" canonical_url: "https://frontendfoc.us/issues/651" --- Plus CSS one-liners to improve any project. | Together with [![The Stack Overflow Podcast\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_1280,h_605/e_make_transparent/co_white,e_outline:35/bv4dpbjtwozts7mrxt8s.png)](https://stackoverflow.blog/podcast) 🚀 **Frontend** Focus #​651 — July 10, 2024 | [Read on the web](https://frontendfoc.us/issues/651) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1720610116/dvdebgikaigpan52iu8d.png)](https://emilkowal.ski/ui/the-magic-of-clip-path) [The Magic of Clip Path](https://emilkowal.ski/ui/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. Emil Kowalski [15 Page Speed Optimizations That Sites Ignore (at Their Own Risk)](https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/) — Optimizations to put in place, including some fairly easy low-hanging fruit, to improve your page performance. Tammy Everts [![\](https://copm.s3.amazonaws.com/c921d9cb.png)](https://stackoverflow.blog/podcast) [Want to Dive Deeper into Stories of the Software Industry?](https://stackoverflow.blog/podcast) — 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. The Stack Overflow Podcast sponsor [Interop 2024 Mid-Year Update](https://web.dev/blog/interop-2024-midyear?hl=en) — As we head into the second half of the year, Rachel shares a look over how [Interop 2024](https://wpt.fyi/interop-2024) has helped improve web interoperability this year so far and what key Baseline features we’ve seen up to this point. Rachel Andrew [State of Text Rendering 2024](https://behdad.org/text2024/) — 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](https://news.ycombinator.com/item?id=40911869). Behdad Esfahbod ⚡️ Quick Links - 💬 Salma Alam-Naylor quickly makes the case for why you might want to [avoid using custom fonts](https://x.com/whitep4nth3r/status/1810961874441080924). - 🦊 [Version 128 of Firefox](https://www.mozilla.org/en-US/firefox/128.0/releasenotes/) is out now. [Here are the developer notes](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/128). - ⏱️ The [`@starting-style` CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style), used to define initial values for properties that will update/change, is set to [land in all three major browser engines](https://front-end.social/@floscholz/112761020096320324) soon. - 🤔 Scott Hanselman shares [what he's learned from over 900 podcast interviews](https://www.freecodecamp.org/news/what-scott-hanselman-learned-from-900-podcast-interviews-with-devs-podcast-131/) with developers. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1720605971/gy0yigmucsytblr5yene.png)](https://github.blog/2024-07-09-exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/) [Exploring the Challenges in Creating an Accessible Sortable List](https://github.blog/2024-07-09-exploring-the-challenges-in-creating-an-accessible-sortable-list-drag-and-drop/) — 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. Kendall Gassner (GitHub) [Script Integrity](https://frontendmasters.com/blog/script-integrity/) — This web platform feature ([the `integrity` attribute](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) on script and link elements) can help against third parties changing the code that they are providing. Chris Coyier [Optimizing Bug Reproduction Workflows](https://www.crowdcast.io/c/bug-repros?utm_source=fe-focus&utm_medium=secondary) — Join our live stream later today where we’ll cover practical ways to improve your bug reporting workflow. StackBlitz sponsor [Zoom, Zoom, and Zoom](https://www.oddbird.net/2024/07/09/zoomies/) — 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. Miriam Suzanne [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1720602888/mzbqhm4bnykt5sfzsjyu.png)](https://frontendmasters.com/blog/how-keyboard-navigation-works-in-a-css-game/) [How Keyboard Navigation Works in a CSS Game](https://frontendmasters.com/blog/how-keyboard-navigation-works-in-a-css-game/) — You may recall a few issues ago we featured [this Chromium-only CSS Mario game](https://codepen.io/t_afif/full/OJYbVWP) — now here’s a look at how it works, specifically moving Mario with keyboard input. All HTML/CSS, no JavaScript. Temani Afif [CSS One-Liners to Improve (Almost) Every Project](https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project) — A collection of handy, simple one-line CSS solutions to add little improvements to any web page. Alvaro Montoro ["If" CSS Gets Inline Conditionals](https://css-tricks.com/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. Geoff Graham ▶[Are Web Components Worth It?](https://offthemainthread.tech/episode/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. Off The Main Thread podcast [YouTube Embeds are 'Bananas Heavy' and It’s Fixable](https://frontendmasters.com/blog/youtube-embeds-are-bananas-heavy-and-its-fixable/) — A good performance PSA worth remembering. Chris Coyier [Essential Resources to Design Complex Data Tables](https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables/) Stéphanie Walter [How to Create a Chrome Extension with Vanilla JavaScript](https://webdesign.tutsplus.com/how-to-create-a-chrome-extension-with-vanilla-javascript--cms-108762t) Esther Vaati [How to Use Container Queries _Now_](https://frontendmasters.com/blog/how-to-use-container-queries-now/) Chris Coyier 🧑‍💻 JOBS [Want to kill meetings?](https://docs.google.com/forms/d/e/1FAIpQLSdBPMJathunNduH8LKM5EPcUSIyFGzL3K3zPq_dpOZJ1ImIuQ/viewform) — We’re looking for software engineering leaders to join the beta for a product aiming to do just that. [Apply here](https://docs.google.com/forms/d/e/1FAIpQLSdBPMJathunNduH8LKM5EPcUSIyFGzL3K3zPq_dpOZJ1ImIuQ/viewform). Sleuth 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1720603748/jwdcsi8lsgvu206qeimz.png)](https://alvaromontoro.com/blog/68056/batman-comic-css) [Batman-Comic.CSS](https://alvaromontoro.com/blog/68056/batman-comic-css) — A fun caped crusader comic library that allows “_children to play with HTML and quickly see the power of CSS_”. Alvaro Montoro [Trans_form_ Your Workflow with a Fully Integrated Form Management Platform](https://surveyjs.io/?utm_source=frontend_focus&utm_medium=email) — SurveyJS is an open-source JS library suite for secure form creation and data collection in your application. Build better forms, faster and without manual coding. SurveyJS sponsor [Font Interceptor: Download the Fonts in Use on a Target Site](https://fontinterceptor.mschfmag.com/) — 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. MSCHF MAG [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1720604829/edple8beyydkmfqdjsqr.png)](https://github.com/evoluteur/braille-tools) [Braille-Tools: CSS and JavaScript to Display Braille](https://github.com/evoluteur/braille-tools) — Designed for displaying English Braille Grade 1 for sighted people and available in three different styles (big, small, small 3D). [Lots of demos here](https://evoluteur.github.io/braille-tools/index.html). Olivier Giulieri [Nho: Tiny JS Library for Easy Web Component Development](https://github.com/anh-ld/nho) — A simple solution for kickstarting your Web Components, to avoid the sometimes unnecessary stuff found in similar tools. Daniel Le 🕰️ ICYMI (_Older links, still worth checking out_) - JavaScript runtimes and engines are often [incorrectly referred to as the same thing](https://humanwhocodes.com/blog/2024/03/javascript-engines-runtimes/) — do you know the difference? - Did you know that [CAPTCHA often excludes disabled users](https://zeldman.com/2024/03/22/captcha-excludes-disabled-web-users/)? The [W3C suggests some kinder alternatives](https://www.w3.org/TR/turingtest/). - Here's a sound [primer on free fonts and when you can and can't use them](https://the-brandidentity.com/insight/whats-the-deal-with-free-fonts-and-when-can-you-use-them-we-asked-itf-monotype-and-cotype) (with advice from ITF, Monotype and CoType). 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/651/*|UID|*?ipx=t)