--- title: "Where are the extensions Safari?" publication: "Frontend Focus" issue: 474 published_at: "2021-01-21" canonical_url: "https://frontendfoc.us/issues/474" --- ...plus what's new in Chrome. | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #474 — January 21, 2021 | [Read on the web](https://frontendfoc.us/issues/474) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1611143467/wyuqhkb3qycrhax5gqpz.jpg)](https://sixcolors.com/post/2021/01/safari-14-added-webextensions-support-so-where-are-the-extensions/) [Safari 14 Added WebExtensions Support. So Where Are The Extensions?](https://sixcolors.com/post/2021/01/safari-14-added-webextensions-support-so-where-are-the-extensions/) — At WWDC 2020, Apple announced it would support browser extensions via the WebExtensions API, though not in as simple a fashion as with Chrome or Firefox. The extra work involved seems to be limiting what’s yet available. Jason Snell [Understanding Clip Path in CSS](https://ishadeed.com/article/clip-path/) — A solid introduction to CSS `clip-path`, showing how it works, its various values, plus some neat interactive examples and use-cases. Ahmad Shadeed [![\](https://copm.s3.amazonaws.com/d9e94b78.jpg)](https://imagekit.io/blog/how-to-resize-image-in-html/?utm_source=Cooperpress&utm_medium=email&utm_campaign=Frontendfocus_Newsletter&utm_content=PrimaryLink_ImageResize) [[Guide\] Ultimate List of Techniques to Resize Images in HTML](https://imagekit.io/blog/how-to-resize-image-in-html/?utm_source=Cooperpress&utm_medium=email&utm_campaign=Frontendfocus_Newsletter&utm_content=PrimaryLink_ImageResize) — Learn different techniques to resize images in HTML - Check out some useful CSS properties, know when and why you should avoid browser-side resizing, and the right ways to manipulate and serve images on the web. ImageKit.io sponsor [What's New in Chrome 88](https://developers.google.com/web/updates/2021/01/nic88) — Version 88 of Chrome is rolling out now, featuring support for the CSS `aspect-ratio` property, support for extensions built with [Manifest v3](https://developer.chrome.com/docs/extensions/mv3/intro/), and more. Pete LePage [What's New In DevTools for Chrome 89](https://developers.google.com/web/updates/2021/01/devtools) — If you’re using Canary, then here’s a look at the developer facing changes in Chrome _89_, including debugging support for Trusted Types violations, the introduction of Lighthouse 7, various CSS changes in the Elements panel, cookie updates, and much more. Jecelyn Yeen **⚡️ Quick bits:** - The first _public working draft_ of [Cascade 5 is now live](https://www.w3.org/TR/css-cascade-5/). Cascade layers, which provide a structured way to organize and balance concerns within a single origin, are new here. - If you nest elements with rounded corners (using `border-radius`) here's [a tip for keeping the level of roundness](https://twitter.com/JoshWComeau/status/1349782080021028865) visually pleasing. - Vivaldi is another Chromium/Blink-based browser and its creators have written about [how it differs to Chrome.](https://vivaldi.com/blog/vivaldi-browser-vs-google-chrome/) - Never played with custom elements before? [This Twitter thread](https://twitter.com/__akash__19/status/1350446671495262209) shows off the absolute basics in an easy to follow, visual way. - The Brave browser now has [IPFS support](https://brave.com/ipfs-support/). - Here's [details on the latest Dev channel update](https://techcommunity.microsoft.com/t5/discussions/dev-channel-update-to-89-0-767-0-is-live/m-p/2076060) for Microsoft Edge. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1611145495/rn3p78hiz8xthwvg4s9t.png)](https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90) [Why Tailwind Isn't for Me](https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90) — A well-reasoned opinion piece in which the author muses on why Tailwind isn’t the direction they wish to see the web head in as a whole. Jared White [On Auto-Generated Atomic CSS](https://css-tricks.com/on-auto-generated-atomic-css/) — In response to Robin Weser’s [The Shorthand-Longhand Problem in Atomic CSS](https://weser.io/blog/the-shorthand-longhand-problem-in-atomic-css) article, Chris Coyier offers up his thoughts on CSS-in-JS that produces Atomic CSS. There’s five libraries that demonstrate the concept in action at the end of the article if you’re curious. CSS-Tricks [Let's Bring Spacer GIFs Back](https://www.joshwcomeau.com/react/modern-spacer-gif/) — Back in the 90s spacer GIFs were a common hack put into practice to format web pages into shape — here, Josh explains a modern technique for solving layout problems. Josh W. Comeau [Finally, a Headless CMS That Writers Don't Need Training to Use](https://gathercontent.com/headless-cms?utm_source=frontendfocus&utm_medium=sponsorednewsletter&utm_campaign=headless-cms) — GatherContent provides a familiar editing experience for writers, without compromising on headless CMS principles. GatherContent sponsor [Use CSS Clamp to Create A More Flexible Wrapper Utility](https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility) — A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control. Andy Bell [The Complexities of Creating a New Capability at the BBC](https://medium.com/bbc-design-engineering/a-brief-insight-into-the-complexities-of-creating-a-new-capability-at-the-bbc-b52c464ed7ee) — In an organization as complex as the BBC, adding a new feature to their Web site platform involves a lot of collaboration, planning, and process. Dave Lee (BBC) [![\](https://res.cloudinary.com/cpress/image/upload/v1611146003/utdpmvokhtbbqokojdrz.png)](https://www.smashingmagazine.com/2021/01/web-design-trends-report-2021/) [Web Design Trends 2021: The Report](https://www.smashingmagazine.com/2021/01/web-design-trends-report-2021/) — Suzanne Scacca takes a look over the [Web Design in 2021](https://www.editorx.com/prowebsites/web-design-trends) report from Editor X, offering up her thoughts on the various design predictions made for the year ahead. Smashing Magazine [My Top Six Frontend Trends and Predictions for 2021](https://t.co/Yfm8XcWNQX?amp=1) — Roberto Hernandez has taken a look over the latest Stack Overflow Survey, State of JS, State of Frontend, etc, pulling together what he thinks are things to look out for this year. Better Programming [Drawing 2D Metaballs with WebGL2](https://tympanus.net/codrops/2021/01/19/drawing-2d-metaballs-with-webgl2/) — An in-depth tutorial on how to code 2D visuals using WebGL2 (the newest version of WebGL and [supported by most browsers](https://caniuse.com/webgl2) save for Safari.) Georgi Nikolov [HTML Video Sources Should Be Responsive](https://www.filamentgroup.com/lab/video-with-sizes/) — The case for adding media support back into HTML video is about having sources that are tailored to responsiveness on mobile. Scott Jehl [How to Create A “Typing Effect” in CSS and JS](https://medium.com/front-end-weekly/how-to-create-typing-effect-in-css-and-js-3252dd807f0a) — Shows how to create a dynamic ‘typing and deleting’ text animation. JW ▶[Understand The CSS `calc()` Method in 10 Minutes](https://www.youtube.com/watch?v=g-mrYAtU-WU) Dipesh Malvia beginner [Seven Ways to Test for Accessibility of Your Web Site with Browser Developer Tools](https://christianheilmann.com/2021/01/11/seven-ways-to-test-for-accessibility-of-your-web-site-with-browser-developer-tools/) Christian Heilmann [Should The Web Expose Hardware Capabilities?](https://www.smashingmagazine.com/2021/01/web-expose-hardware-capabilities/) Noam Rosenthal 💻 **Jobs** [Find a Job Through Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1611143560/kklc68shhlich0o6ulba.png)](https://blocks.wickedtemplates.com/) [Wicked Blocks: A Growing Collection of 120+ Layout Blocks and Components Built with Tailwind](https://blocks.wickedtemplates.com/) — These are divided into 11 categories and are beautifully designed. Just grab the HTML for any component and drop it into your Tailwind project. Michael Andreuzza [JPEG.rocks: A Privacy-Aware JPEG Optimizer](https://jpeg.rocks/) — Online lossless optimization of your JPEG files done client side. Choose how much compression, which _apparently_ doesn’t change the image to the naked eye, even with a strong setting. Tommaso Pifferi [EStimator.dev: The Modern JavaScript Savings Calculator](https://estimator.dev/) — Enter a URL and this tool will tell you how much faster the site could be if the code was switched over to modern JavaScript. Read about it [here](https://web.dev/publish-modern-javascript/). Google Chrome Labs [Try Buildkite for Faster CI/CD for All Your Software Projects](https://buildkite.com/signup?utm_campaign=CPress&utm_source=ppc&utm_medium=cp-frontend&utm_term=continuous-integration&utm_content=cicd) Buildkite sponsor [7.css: A Design System for Building Recreations of Old UIs](https://khang-nd.github.io/7.css/) — The style is similar to Windows 7, hence the name, and is built on top of [XP.css](https://github.com/botoxparty/XP.css), a similar project released last year. Khang Nguyen Duy [ButtonBuddy: Accessible Button Contrast Generator](https://buttonbuddy.dev/) Stephanie Eckles 📬 **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://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)