|
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. |
▶ 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. |
|
📙 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 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
|
An Up to Date Roundup of DevTools for CSS Layouts
|
How to Add a Double Border to SVG Shapes
|
A Beginner’s Guide to Applying Color in UI Design
|
🔧 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
|
Picsvg: Convert Any Image to a Line Drawing in SVG Format
|
|
😖 ...and finally |
Terms & Conditions Apply: A Mini-Game About Pop-ups and The Deviousness of Websites and Apps Wieden+Kennedy |