👋 Hi folks. Your usual editor, Chris Brandrick, is enjoying a week off, so it's over to me, Peter Cooper (you may know me from such newsletters as JavaScript Weekly..) to fill in for a week. It's been a long time since I've taken the frontend reins, but hopefully you enjoy this issue nonetheless ;-)
Peter Cooper, your (temporary) editor

Frontend Focus

#​507 — September 8, 2021 | Read on the web

Vector? Raster? Why Not Both! — Sometimes it’s obvious when a vector based approach or a bitmap based approach will work best, but at other times there may be opportunity to combine the two.. such as in this example turning a 10MB outcome into a mere 78KB one.

Zach Leatherman

Interactive Learning Tools for Front-End Developers — There are lots of different ways to learn: hit the specs, follow some tutorials, or.. play some games? This post is a neat roundup of various interactive learning tools for learning things like CSS, JavaScript, SQL, React, Vim, and regular expressions that try to keep things light and fun.

Louis Lazaris

Here's the Right Way to Manage and Deliver Images on the Web — Ever been stuck while trying to choose between image quality and user experience? Automate image optimization and deliver next-gen formats like AVIF, WEBP images based on the user's device and network. Store. Transform. Optimize with ease. Try today.

ImageKit.io sponsor

htmlq: Like jq, But For HTMLjq is a popular and long standing command line tool for parsing and processing JSON files, and htmlq, written in Rust, gives you similar Swiss army knife-esque powers over HTML.

Michael Maclean

⭐️  An Interactive Guide to Keyframe Animations — CSS keyframe animations are incredibly flexible and powerful but, says Josh, they’re also “a bit weird.” This is a deep-dive into how CSS keyframes work from the ground up and how to go about using them to build high quality Web animations.

Josh W Comeau

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Exploring the CSS Paint API: Blob Animation — A fun effect currently supported only on Chrome (and Edge) for getting gooey/blobby shapes going with CSS enhanced by JavaScript via the Paint API.

Temani Afif

'I completely ignored the front end development scene for 6 months. It was fine.' — Given that we publish a weekly newsletter helping you keep up to date with the front end development scene, maybe it’s tricky to share such opinions, but the author isn’t wrong! It’s possible to take a break and not miss out on too much.. plus you can catch up with our issues later ;-)

Rach Smith

Why Use a Time Series Platform for Application Performance Monitoring — Learn how to use time series data for real-time observability into application performance, systems and network metrics.

InfluxData sponsor

Reducing Carbon Emissions on the Web — Whether or not you’re an active environmentalist, you may be intrigued to know there are things you can do as a Web developer to improve the carbon footprint of your creations.

Berwyn Powell

Creating Accessible CSS Art — Art and visual effects generated in pure CSS are not inherently accessible but there are some ways to improve matters.

Alvaro Montoro

The Fixed Background Attachment Hack — A look at a little trick/workaround if you want the body background in a fixed position where it stays put on scroll and have it work on mobile.

Martuzaali Surti

An Analysis of Feed URLs — There’s no real standard when it comes to feed/RSS/Atom URLs, but it may be worth following the crowd.

Jim Nielsen


Frontend Engineer (React, New York) — Dovetale helps Shopify merchants like KontrolFreek and Italic grow their creator community. Built in NYC and backed by Uber founders.

Walmart is Hiring Software Engineers — Impact millions of customers and associates while developing some of the biggest technologies.
Walmart Global Tech

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

🔧 Code, Tools and Resources

SKWAR: An Extremely Straight-Edged Variable Font — It’s ‘very square’, monospaced, but does have variable width and weight support.

Heydon Pickering

Shoelace: 'A Forward-Thinking Library of Web Components' — A collection of well designed every day UI components (buttons, drawers, inputs, menus, color pickers, and more) built in a framework agnostic way (though there are React wrappers available).

Cory LaViska

timefind: Search a Web Site's History — A Node-based tool (which you can use from the terminal) for quickly flipping through the Web Archive’s snapshots.

Nathan Manceaux-Panot

Shortcut Puts the Agile in Agile and the 'Can' in Kanban

Shortcut sponsor

bundle: A Quick npm Package Size Checker — Enter a package name, then hit the “run” button and this tool will give you the minified, bundled, and gzipped size of the package.

Okiki Ojo

HTTP Nowhere: A Chrome Extension to Upgrade (or Stop) Non-Secure Requests

Chris Palmer

Fiddly: Create Beautiful and Simple HTML Pages From Your readme.md FilesGitHub repo.

Sara Vieira