Frontend Focus

#​498 — July 7, 2021 | Read on the web

When a Click is Not Just a Click — There are nuances to consider when listening for a click event (such as a ‘click’ sent from a keyboard versus one from a mouse). This post dives into how you can distinguish different types, and what opportunities arise from identifying them.

Travis Almand

RenderingNG: Ready for The Next Generation of Web Content — Chrome’s rendering lead outlines how work on the next-generation of rendering architecture for Chromium is nearing completion. They are hoping to “complete the process of designing, building and shipping this architecture” in 2021.

Chris Harrelson

Learn to Build Scalable React Apps — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course.

Frontend Masters sponsor

The Internet Is Rotting — Link rot and content drift is a massive growing issue for the web as a whole, and sadly too much has been lost already. Funnily enough, I remember reading Jakob Nielsen complaining about this problem 23 years ago too!

Jonathan Zittrain

A Complete Guide to Grid — This comprehensive guide to CSS Grid has recently been updated. It focuses on all the settings both for the grid parent container and the grid child elements. A valuable resource worth bookmarking.

Chris House

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

▶  Building a Responsive Layout with CSS Grid and Container Queries — Watch along as Steph Eckles creates a layout that starts as a standard grid and gets additional styles (if the browser supports container queries).

Alex Trost

Improving Cumulative Layout Shift at Telegraph Media Group — How The Telegraph, a leading UK news website, managed to reduce their CLS scores by 250%.

Chris Boakes

Stop Using ‘Pop-up’ — When you say pop-up do you mean a new window, a browser dialog, a tool-tip, or maybe something else? Adrian pleads with us to choose a term that accurately describes the control you want.

Adrian Roselli

Monitor Lighthouse Scores and Core Web Vitals — DebugBear continuously monitors site speed and provides front-end developers with the data they need to improve it.

DebugBear sponsor

Experimenting with WebTransport — A new API offering low-latency, bidirectional, client-server messaging.

Jeff Posnick

Improving CSS Variables in WebKit
Tyler Wilcock

Adding Shadows to SVG Icons With CSS and SVG Filters
Joel Olawanle

Creating A Scalable "Star Rating" Without JS (and No SVG/Image for the Star)
Temani Afif

Animate On Scroll using IntersectionObserver


Senior Frontend Developer (Vue, Nuxt) - Remote — We’re seeking an engineer to join our team at Upwork. You’ll be building apps (using Vue & Nuxt) that are used by millions of our users daily.

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.

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.

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

🔧 Code, Tools and Resources

Introducing Flicking V4 with More Customization and UI Preserving — Here’s a major new version of Naver’s popular open source carousel library.

Wood Neck

GradientArt: An Advanced CSS Gradient Editor — This is a gorgeous visual gradient editor that lets you customize just about every aspect of a CSS gradient’s properties. You can even quickly scale, rotate, or reposition the gradient as needed before grabbing the CSS.

Yoav Kadosh

Typographic Scale Calculator: Choose The Right Font Size From A Harmonious Type Scale (Inspired by The Way Music Works) — Choose a base font size, ratio, and scale and the values are generated automatically. A similar tool is found here.

Jean-Lou Désiré

Milkdown: A Plugin-Driven WYSIWYG Markdown Editor — Built on top of CodeMirror, the plugin system lets you easily enable or disable features like tables, LaTex support, and slash commands. Try it out here.

Saul Mirone

margin-margin-revolution.css: A Game to Help You Never Forget the Order of Margins in CSS — Ha! It's a sort of plain text version of Dance Dance Revolution.

Chris Johnson

Free Chat/Messaging UI Kits for Your Website or App

Stream sponsor

Content Placeholder for Tailwind CSS — This Tailwind plugin adds utility classes for showing placeholders during a ‘loading’ state for your UI elements.

Javis V. Pérez

Instant Vitals: Tools to Track Core Web Vitals Metrics

Instant Domain Search

🕰 ICYMI (Older links still worth checking out)

The Simplest Way to Download SVG/DOM Elements — An easy, practical guide on how to download SVG or any DOM element as SVG, PNG or PDF.
Fabian Wolff

The Future of Web Software Is HTML-Over-WebSockets — HTML-over-Websockets continues having a moment - here's the history of how we got here, and why the new approach takes the best of that history to make the future.
Matt E. Patterson

Measuring Frontend Latency: A Strategy to Simplify The Complex — How retailer Glossier got serious about measuring web performance; enabling them to reduce latency by nearly a third.
Aaron Suggs

Revealing Contents on Scroll Using JavaScript’s Intersection Observer API
David Herbert

Intrinsic Typography is the Future of Styling Text on the Web
Scott Kellum

Testing Fonts for Accessibility
Colin Shanley