Frontend  Focus

#476 — February 3, 2021 | Read on the web

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 — The W3C and IETF announced last week 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)

Fast, Reliable Feature Management for the Modern Enterprise — 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 — 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' — 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 on desktop.

Fast Company

Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More — 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.


⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

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 — 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 — 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? — 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 — 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 — 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 — Container queries don’t exist just yet, so how can you fake ‘em?


💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.


Find a Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.


🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here.

🔧 Code, Tools and Resources

Type Scale Clamp Generator: Generate CSS with clamp() — 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 — 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 sponsor

Tailwind Components: A Free Repository for Community Components Using Tailwind — 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 — 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 — 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

z creative labs

🕰 ICYMI (Some older stuff that's worth checking out...)