Frontend Focus

#​491 — May 19, 2021 | Read on the web

Five Steps to Faster Web Fonts — Iain clearly outlines a handful of steps that you can take to improve font performance, each of which can have a benefit on its own, but when used together can lead to big wins.

Iain Bean

Introducing Firefox’s New Site Isolation Security Architecture — With Site Isolation enabled on Firefox for Desktop, Mozilla takes its security guarantees to the next level.

Mozilla Hacks

[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

Google Docs Shifting to Canvas Based Rendering — I think this could be a more substantial long term move than it appears at first as it’s a whole new way to approach rendering content in the browser (and one more commonly associated with games and graphics, so far). They’ve rigged up this demo of the approach.

Google

▶  Frontend Development in 2021: A Complete Guide — A tight 20-minute look at the frontend landscape, covering the libraries and tech you’ll want to know.

Harry Wolff

Learn CSS — A free, wide-ranging CSS course and reference from Google to help you level up your CSS / web styling expertise. Looks like a solid resource.

Google

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Building A Media Scroller Component — A foundational overview of how to build a responsive horizontal scrollview for TVs, phones, desktops, etc.

Adam Argyle

No, Utility Classes Aren't the Same As Inline Styles — “Anyone is welcome to dislike utility classes, but comparing them to inline styles is a fallacy”. This deep dive into the specifics of utility classes will help you understand why.

Sarah Dayan

Enough with The Role-Play Let's Get Back to The Basics — If your HTML has role attributes throughout, Ian says chances are there are better native elements you should use instead.

Ian Floyd

Create a CSV Importer in 2 Minutes — Build a data parser before? We know the pain. Let Flatfile do the heavy lifting with an elegant, turnkey data parser.

Flatfile Portal sponsor

Plans to Improve Navigation on GOV.UK — With over half a million pages the UK government website poses quite the navigation challenge. Here’s some insight into how they’re thinking about improving things.

Sam Dub

Distributed Persistent Rendering (DPR) — As usual, Chris does a great job of breaking down a complicated term, specifically Netlify’s recent DPR proposal, into what is practical and meaningful for developers.

Chris Coyier

What Do Lighthouse Scores Look Like Across The Web? — A solid bit of analysis, now with a refreshed set of results.

Barry Pollard

Cumulative Layout Shift: Measure and Avoid Visual Instability — Reduce frustration and content shifts by monitoring the Core Web Vital metric.

Karolina Szczur

Using CSS to More Efficiently Cache User-Specific Content
Ognjen Regoje

An Up to Date Roundup of DevTools for CSS Layouts
Chen Hui Jing

How to Add a Double Border to SVG Shapes
Mariana Beldi

A Beginner’s Guide to Applying Color in UI Design
George Francis

🔧 Code, Tools and Resources

DOM Events: A Way to Visualize and Experiment with the DOM Event System — A visualiser to help you learn about the DOM Event system, not always the easiest thing to fathom out, through exploration.

Alex Reardon

Heroicons: Beautiful Hand-Crafted SVG Icons by The Makers of Tailwind CSS — We’ve included these icons before but they now have a dedicated web space, more icons, official React and Vue libraries, and Figma assets – all outlined in the v1.0 release post.

Heroicons

SVG Filter Builder: Create and Learn About SVG Filters in A Drag & Drop Designer — This is a feature-rich way to mess around with the different parts of the SVG filters spec. Lets you add your own graphics and grab the code output easily.

client.IO

New Mobile Chat Kit From Stream

Stream sponsor

Coding Fantasy: Learn Flexbox by Playing a Coding Game — Ultimately this project aims to include other frontend technologies, but currently the game teaches you Flexbox, with Grid Layout coming soon.

nick bull

Dragit: An Online Drag & Drop Email Editor — Includes a modest free plan for building responsive emails (and the pay plan lets you embed the editor in your own product).

FunFirst

A DevTools Extension for Chrome to Examine/Inspect CSS Stacking Contexts
Andrea Dragotta

Picsvg: Convert Any Image to a Line Drawing in SVG Format
Picsvg

Jobs

Web Designer (UK Remote) — Join the team who are changing the face of cyber security education.
Helical Levity

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

🧑‍💻 Got a job listing to share? Here's how.

😖 ...and finally

Terms & Conditions Apply: A Mini-Game About Pop-ups and The Deviousness of Websites and Apps

Wieden+Kennedy