Frontend Focus

#​487 — April 21, 2021 | Read on the web

An In-Depth Guide To Measuring Core Web Vitals — How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Barry Pollard takes a look. Jess B Peck's The Almost-Complete Guide to Cumulative Layout Shift is another useful guide digging deeper into one aspect.

Smashing Magazine

Introducing CSS Grid Inspector in Safari — Safari now has a CSS Grid Layout Inspector (you can try it as of Safari Technology Preview 123), this post looks at how to use it.

Razvan Caliman (WebKit)

Live Webinar: Building Editor X’s Award-Winning Homepage — Discover best practices for building a homepage. Go behind the scenes of the award-winning new Editor X homepage and explore the process from concept to build. Join design & marketing experts for a webinar about creating a powerful homepage. Save your spot now⇢

Editor X sponsor

'CSS is a Strongly Typed Language' — “As strongly-typed JavaScript becomes more popular, it is my hope that it helps developers become more comfortable with the firm, yet flexible approach of CSS”. Head to the comments for the expected 'CSS isn't a programming language' debate ;-)

Eric Bailey

Resolving Overflow Issues in CSS — Explores the causes of overflow issues and how to solve them, and looks at how modern features in the developer tools can make the process of fixing and debugging easier.

Ahmad Shadeed

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Best Practices for Cookie Notices — A look at how cookie notices can affect performance, performance measurement, and UX, along with advice on how to optimise their overall usability.

Katie Hempenius

Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript — Dozens of developers took a year to convert 1,100 files and 95,000 lines of code from JavaScript to TypeScript. This is one of those “we did a complicated thing and here’s what we learnt” pieces you’ll want to point to if your workplace attempts a similar thing.

Priscila Oliveira and Mark Story (Sentry)

Floating an Element to the Bottom Corner — Pushing an element to the right or the left is easy enough with the float property, but here’s a CSS-only solution to position something to the bottom of an element.

Temani Afif

State of Internal Tools Report 2021 — We surveyed 650 developers on how and why they build internal front ends. Find out the most popular tools.

Retool sponsor

A Real World CSS vs. CSS-in-JS Performance Comparison — No huge surprise here, I suspect.

Tomas Pustelnik

The Best Approach to Lazy Load Images for Maximum Performance
Adrian Bece

Debugging JavaScript Efficiently with Chrome DevTools
Victoria Lo

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
Jhey Tompkins

🧐 FLoC Off?

Earlier this year Google shared an update on their planned replacement for third-party cookies — however it's fair to say this proposal for a 'Federated Learning of Cohorts' (or FLoC for short) hasn't gone down well, with backlash from Mozilla, Brave, DuckDuckGo, and others. It's looking like Google may be going it alone on this one.

🔧 Code, Tools and Resources

Style Check: Audit The Effect of Different CSS Sources on Plain HTML Elements — Shows you a comprehensive set of HTML elements to which you can apply a selected library (Bootstrap, Normalize, etc) or import one via URL to see how the elements behave.

Austin Gil

Font Brief: Discover Fonts Based on Font Attributes — Search a curated collection of paid and free fonts using specific font qualities like elegance, friendliness, classic, and so forth.

kore

New Next.js Blog Starter: Headless CMS with Sitemap and Page Management

AGILITY CMS sponsor

Soft UI Dashboard: A Free Bootstrap 5 Dashboard — Includes individual page components you can view here or check out the full demo.

Creative Tim

Alternative Tweet Embeds: Embed Tweets Without Compromising Your Users' Privacy and Your Site's Performance

Stefan Bohacek

Sergey: A Tiny Static Site Generator — A no-configuration SSG that will render your HTML, include partials, and render out slots. The sort of thing you'd use if even Eleventy is too much.

Trys Mudford

Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team

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