Frontend Focus

#​503 — August 11, 2021 | Read on the web

The World of CSS Transforms — Another excellent blog post from Josh, this time looking at the power of CSS transforms. Expect a detailed look at the transform property, with some nifty examples of what it can do.

Josh W Comeau

HTTP/3 From A To Z: Core Concepts — What exactly is HTTP/3? Why was it needed so soon after HTTP/2 (which was only finalized in 2015)? How can or should you use it? And especially, how does this improve web performance? Find out here.

Robin Marx

Walkthrough of an Easy Angular Data Grid with Examples — You could write your own data grid, but why would you when this one already exists. See how easy it is to set up, bind data, group, sort, page, and more. Fiddle with the live samples or install it and try it for yourself, but don’t miss it.

Progress Kendo UI for Angular sponsor

Firefox 91 Introduces 'Enhanced Cookie Clearing' — The latest version of Mozilla’s browser introduces a new, major privacy enhancement to cookie handling — letting you fully erase your browser history for any website. Here’s the full release notes and notable developer changes for this version.

Zühlcke, Hofmann and Edelstein (Mozilla)

Writing Great Alt Text: Emotion Matters — Getting alt text right can be tricky, as this post outlines how both context and emotion can play an important role in any decision as to what you ultimately end up writing, if anything.

Jake Archibald

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

There Is No Such Thing as a CSS Absolute Unit — What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? This article sets out to explain why CSS absolute units aren’t so absolute.

Elad Shechter

CSS Logical Properties and Values — Cross-browser support is at a tipping point, so it’s a good time to take a look at logical properties and values. Ollie covers some convenient new shorthands worth knowing about.

Ollie Williams

CSS Architecture and Performance in Micro Frontends — This an interesting dive into how to manage CSS-related architecture and web performance at scale.

Mateusz Krzeszowiak

Ensure Frontend Issues Don’t Impair User Experience with Datadog — Monitor frontend errors and performance errors by analyzing user sessions and receiving actionable alerts from Datadog. Start a free trial.

Datadog Real User Monitoring sponsor

Creating a 'Superhero' Animation Effect with SVG Filters — See how to create and animate a comic book style transitionary illustration effect using SVG filters and masks.

Abner Nascimento

Print Media Style 'Drop Caps' With Only CSS — It’s that classical bookish effect where the first letter in a paragraph is much larger than any other.

Amit Merchant

▶ A Weekly Podcast on Web Design and Development
Amy Dutton and James Q Quick podcast

Exploring the CSS Paint API: Image Fragmentation Effect
Temani Afif


Senior Frontend Engineer - React (Remote) — With over 7 million clients, Kraken is one of the world's largest, most successful bitcoin exchanges.

Full Stack Utviklere — Visma søker utvikler i Norge eller Sverige. Avansert javascriptutvikling som minner mer om spillprogrammering enn tradisjonell koding.

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

Bootstrap 5.1.0 — The first minor release of Bootstrap 5 adds experimental support for CSS Grid, a new placeholders component (shown above), horizontal collapse support, new helpers, new CSS variables in our utilities, refactored JavaScript, and more.

Mark Otto

View Source: A Way to View a Page's Source If You Otherwise Can't — Given a URL, this page lets you look at the HTML returned. Handy on mobile or kiosk devices, perhaps, where the natural ‘view source’ functionality isn’t available. (Feed the tool's URL back to itself if you want a laugh.)


Glassmorphism CSS Generator: Generate CSS for a Frosted Glass Effect on Various UI Components


If You Can Write It with JavaScript and an API, You Can Build It 10x Faster in Retool

Retool sponsor

inLine: A Simple JavaScript WYSIWYG Editor

Felice Gattuso

Livemark — Livemark allows you to add interactive charts, tables, and scripts to Markdown and generate HTML.

Frictionless Data

Slinkity — Slinkity is basically what you’d get if you tried to build Astro on top of Eleventy. It allows component frameworks (React, Vue, and Svelte) for writing page/layout templates and hydrates component-driven pages on the client.

Ben Holmes