Frontend  Focus

#480 — March 3, 2021 | Read on the web

Diving into the ::before and ::after Pseudo-Elements — These pseudo-elements are incredibly versatile tools in your CSS toolkit and can be used in a wide-range of situations. This article does a good job of explaining them, and shows how to use them in practice.

Will Boyd

State Of GDPR: Cookie Consent For Designers And Developers — GDPR has undoubtedly impacted our professional lives, and its worth knowing that a fair bit has changed since its initial introduction back in 2018. Here Danny looks at cookie consent — specifically how to comply with regulations whilst being reliant on services such as Google Analytics.

Danny Bluestone

The Definitive Guide to Feature Management — Feature management is a new class of software development tools/techniques powered by feature flags. A feature management platform like LaunchDarkly fills the gaps of conventional feature toggles. Learn the ins & outs of feature management today.

LaunchDarkly sponsor

Hiding Content Responsibly — All the ways to hide something, be it through HTML or CSS, and when to use which.

Kitty Giraudel

10 Years of Open-Source Visualization with D3.js — The creator of D3.js (the popular data visualization library) reflects on ten years since D3 1.0 was released with what he’s learnt from both developing D3 and leading a prominent project for so long. Congratulations, Mike!

Mike Bostock

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Disabling a Link for Ten Seconds with Pure CSS — The goal here is to prevent access to discussion threads unless you decide, after ten seconds, you really want to participate.. but there are surely other uses for this neat trick.

Jesse Li

CSS-in-JS Support in DevTools — Google’s take on managing your CSS with JavaScript using the facilities available with their DevTools.

Alex Rudenko

Builds Run Faster on Buildkite. Get Started with a Free Trial Today 🚀 — Buildkite is a platform for running fast, secure, and scalable continuous integration pipelines on your own infrastructure.

Buildkite sponsor

Preparing for The Display Modes of Tomorrow — Did you know that the display_override property can be used to define a customized fallback chain of display modes. Note: It’s only got limited browser support, and in almost all circumstances the regular display property is what developers should really be reaching for.

Thomas Steiner

How to Map Mouse Position in CSS — Here’s how to get a user’s mouse position and map it into CSS custom properties: --positionX and --positionY, without using JavaScript.

Amit Sheen

A CSS Grid Tutorial for Beginners (with Interactive Examples) — A fairly comprehensive post that includes lots of interactive CodePen examples illustrating the primary features of the Grid Layout specification.

Louis Lazaris beginners

Stop Using Icon Fonts — “Icon fonts became popular over a decade ago. But their convenience comes at a high cost to your visitors.

Michael Irigoyen

Keeping Count of User Visits — Using client-side storage to keep track of user visits to a site.

Raymond Camden

Slow Site Speed Is Still The Biggest Cause of Web Stress

Simon Hearne

Building User Trust In UX Design

Adam Fard

💻 Jobs

Technology Lead (Calgary, Canada) — We’re a digital experience design agency seeking a senior tech lead. Help us deliver on fast paced, creative campaigns with your knowledge of HTML, CSS, jQuery and JavaScript, building accessible, scalable, and performant web apps.

Critical Mass

Front End Developer (Calgary, Canada) — We’re seeking an experienced frontend dev to join our design agency. Use your jQuery, HTML and CSS skills to help us develop cutting-edge responsive websites.

Critical Mass

Find Your Next 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.


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

🔧 Code, Tools and Resources

jQuery 3.6.0 Released — Version 3.6.0 of the (still very popular) JavaScript library jQuery is out now, featuring various bug fixes and minor improvements.

jQuery Foundation

Microlink Cards: Share Dynamic Social Images At Scale — An editor to generates social images on demand, ready to be embedded in your page’s meta tags. Here’s how to use it.


ress: A Modern CSS Reset — A reset based on Normalize.css with some customizations for another take on the CSS reset. Not a new project, but it’s at version 3.0 since last year.

Filipe Linhares

Dasha AI: Add Human-Like Voice Conversational Capabilities to Your Website or App

Dasha sponsor

Bootstrap-Themes: Free Open Source Bootstrap Themes — Currently includes about a dozen fairly diverse themes covering various topics and industries.


element-resize-detector: Optimized Cross-Browser Resize Listener for Elements

Lucas Wiener