Frontend  Focus

#474 — January 21, 2021 | Read on the web

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 — A solid introduction to CSS clip-path, showing how it works, its various values, plus some neat interactive examples and use-cases.

Ahmad Shadeed

[Guide] Ultimate List of Techniques to Resize Images in HTML — 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 — Version 88 of Chrome is rolling out now, featuring support for the CSS aspect-ratio property, support for extensions built with Manifest v3, and more.

Pete LePage

What's New In DevTools for Chrome 89 — 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:

📙 Tutorials, Articles & Opinion

Why Tailwind Isn't for Me — 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 — In response to Robin Weser’s 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 — 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 — 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 — 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 — 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)

Web Design Trends 2021: The Report — Suzanne Scacca takes a look over the Web Design in 2021 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 — 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 — An in-depth tutorial on how to code 2D visuals using WebGL2 (the newest version of WebGL and supported by most browsers save for Safari.)

Georgi Nikolov

HTML Video Sources Should Be Responsive — 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 — Shows how to create a dynamic ‘typing and deleting’ text animation.

JW

▶  Understand The CSS calc() Method in 10 Minutes

Dipesh Malvia beginner

Seven Ways to Test for Accessibility of Your Web Site with Browser Developer Tools

Christian Heilmann

Should The Web Expose Hardware Capabilities?

Noam Rosenthal

💻 Jobs

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.

Hired

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

🔧 Code, Tools and Resources

Wicked Blocks: A Growing Collection of 120+ Layout Blocks and Components Built with Tailwind — 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 — 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 — 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.

Google Chrome Labs

Try Buildkite for Faster CI/CD for All Your Software Projects

Buildkite sponsor

7.css: A Design System for Building Recreations of Old UIs — The style is similar to Windows 7, hence the name, and is built on top of XP.css, a similar project released last year.

Khang Nguyen Duy

ButtonBuddy: Accessible Button Contrast Generator

Stephanie Eckles