--- title: "Widespread support for the aspect-ratio property" publication: "Frontend Focus" issue: 476 published_at: "2021-02-03" canonical_url: "https://frontendfoc.us/issues/476" --- ...plus, have Firefox walked away from PWAs? | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #476 — February 3, 2021 | [Read on the web](https://frontendfoc.us/issues/476) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1612355437/jg0qwiakyh1oe4yrj6rl.jpg)](https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/) [Things You Can Do With CSS Today](https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/) — Andy Bell digs into some of the neat stuff you can do with modern CSS _now_, including masonry layouts, using the `:is` selector, updated text decoration, `clamp()`, and more. Smashing Magazine [WebRTC Is Now a W3C and IETF Standard](https://web.dev/webrtc-standard-announcement/) — The W3C and IETF [announced last week](https://www.w3.org/2021/01/pressrelease-webrtc-rec.html.en) that the Web Real-Time Communications family of technologies (as commonly used by many live streaming or Web-based telephony services) is now finally a formal standard. Here’s a solid overview of its history, architecture, use cases, and future. Huib Kleinhout (Google) [![\](https://copm.s3.amazonaws.com/813400fe.jpg)](http://launchdarkly.com/?utm_source=cooperpress&utm_medium=display&utm_campaign=q4-cooperpress) [Fast, Reliable Feature Management for the Modern Enterprise](http://launchdarkly.com/?utm_source=cooperpress&utm_medium=display&utm_campaign=q4-cooperpress) — LaunchDarkly is a feature management platform that empowers teams to safely deliver & control software through feature flags. By separating code deployments from feature releases, we enable you to deploy faster, reduce risk, and iterate continuously. LaunchDarkly sponsor [Making GitHub’s New Homepage Fast and Performant](https://github.blog/2021-01-29-making-githubs-new-homepage-fast-and-performant/) — If you’re not logged in, GitHub’s new homepage is essentially a laundry list of GitHub’s features (with screenshots, videos, etc.) coupled with a live updating 3D-globe of GitHub activity. This is a _lot_ for a browser to handle at once, so they’ve had to do a lot of work to keep it fast. Tobias Ahlin (GitHub) ['Firefox Just Walked Away From A Key Piece of The Open Web'](https://www.fastcompany.com/90597411/mozilla-firefox-no-ssb-pwa-support) — Jared Newman writes “_Mozilla has always championed the open web. So why is it abandoning desktop web apps, the most powerful alternative to proprietary App Stores?_” - following news that [Firefox won’t support PWAs](https://bugzilla.mozilla.org/show_bug.cgi?id=1682593#c8) on desktop. Fast Company [Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More](https://blog.chromium.org/2021/01/chrome-89-beta-advanced-hardware.html) — Version 89 is now in beta and adds Web NFC support (by default on Android), the ability to decode AVIF image contents, full `filter` property support on SVGs, a few CSS changes, and more. Google **⚡️ Quick bits:** - The WHATWG review drafts of both HTML and DOM are now [endorsed as W3C recommendations](https://www.w3.org/blog/2021/01/whatwg-review-drafts-of-html-and-dom-endorsed-as-w3c-recommendations/). - Here's a look at [the developer facing changes](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/85) in Firefox 85. - The always excellent [CityJS conference returns this March](https://cityjsconf.org) complete with a fun virtual space to visit. - Here's the [release notes for the latest Safari Technology Preview](https://webkit.org/blog/11525/release-notes-for-safari-technology-preview-119/). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1612356307/qlq8vz4rdt3wfcb8alv7.png)](https://nooshu.github.io/blog/2021/01/23/the-importance-of-font-face-source-order-when-used-with-preload/) [The Importance of `@font-face` Source Order When Used with Preload](https://nooshu.github.io/blog/2021/01/23/the-importance-of-font-face-source-order-when-used-with-preload/) — Some real sound advice here on getting your font loading strategy in order. Matt Hobbs [New `aspect-ratio` CSS Property Supported in Chromium, Safari Technology Preview, and Firefox Nightly](https://web.dev/aspect-ratio/) — Maintaining aspect ratio within images and elements in responsive layouts is now easier to achieve thanks to the `aspect-ratio` property. Une Kravets [4 Ways Figma Has Transformed (And Improved) Stream’s Design Team](https://getstream.io/blog/4-ways-figma-has-transformed-and-improved-streams-design-team/?utm_medium=promoted&utm_source=frontend_focus) — Figma helps streamline so much of our work that we’re certain it is here to stay, even when we’re back in the office. Stream sponsor [Core Web Vitals - A Vital Aspect of User Experience in 2021?](https://www.wholegraindigital.com/blog/core-web-vitals/) — If you’ve been meaning to look into Google’s new ranking factor, this is a good overview of what you need to know. Tom Greenwood [The Unreasonable Effectiveness of Simple HTML](https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/) — Whether it’s an old TV, or an ageing games console, Terence reminds us here of not forgetting that some users _will_ be using alternative tech to access your site. Terence Eden [The Minimum Content Size In CSS Grid](https://ishadeed.com/article/min-content-size-css-grid/) — Ever built a component, only to find an unwanted horizontal scroll bar shows up? Ahmad dives into the problem. Ahmad Shadeed [Faking Container Queries with CSS Grid](https://polypane.app/blog/faking-container-queries-with-css-grid/) — Container queries don’t exist just yet, so how can you fake ‘em? Polypane 💻 **Jobs** [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [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/v1612356307/oqyahrbb3jqpctvlg3io.png)](https://maximeroudier.com/typeScaleClampGenerator/) [Type Scale Clamp Generator: Generate CSS with `clamp()`](https://maximeroudier.com/typeScaleClampGenerator/) — A tool to generate the CSS for a descending type scale using CSS’s relatively new `clamp()` function value, which now has pretty good browser support. And, apparently, you're amazing if you try it ;-) maxime roudier [Cheval 2.0: 'Copy to The Clipboard' using JavaScript Without Writing JS](https://github.com/ryanpcmcquen/cheval) — If you want to keep things _really_ simple but offer a “copy to the clipboard” feature on your pages, this takes care of the whole thing once you’ve added some classes to a couple of HTML elements. Ryan McQuen [How Smart Crop Can Help Deliver Perfect-Responsive Images on Your Site](https://imagekit.io/blog/smart-crop-deliver-perfect-responsive-images/?utm_source=Cooperpress&utm_medium=email&utm_campaign=Frontendfocus_Newsletter&utm_content=BriefLink_SmartCrop) ImageKit.io sponsor [Tailwind Components: A Free Repository for Community Components Using Tailwind](https://tailwindcomponents.com/) — These are sorted by category and there are landing page templates to choose from too. Since this is community driven, you can also upload your own. Highscore Studio [post-me: Communicate with Web Workers and Other Windows](https://github.com/alesgenova/post-me/) — A promise-based API for an app and its child workers or windows to expose methods and custom events to each other. Alessandro Genova [Motion Blur Scrolling Demo](https://pie6k.github.io/motionblur/) — Your mileage may vary with this demo depending on your browser, but it’s an interesting way to see how smooth (or not) things perform from an FPS perspective. Adam Pietrasiak demo [Get Waves: An SVG 'Wave' Generator](https://getwaves.io/) z creative labs 🕰 **ICYMI** _(Some older stuff that's worth checking out...)_ - Anthony Ricaud runs through [some HTML and CSS techniques](https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/) you can put into practice to reduce your JavaScript - Here's a [handful of examples on how to use CSS pseudo elements](https://www.lindaojo.com/blog/advanced-styling-using-css-pseudo-elements/) for some neat advanced styling. - Beyang Liu, an ex-Googler, shares [a guide to all things dev tools](https://about.sourcegraph.com/blog/ex-googler-guide-dev-tools/). - Malte Ubl has put together a collection of [eight image loading optimization techniques](https://www.industrialempathy.com/posts/image-optimizations/) worth knowing. 📬 **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|*)