Together with  SpeedCurve
frontend focus

#​603 — July 26, 2023 | Read on the web

Core Web Vitals for Search Engine Optimization: What Do We Need to Know? — Harry aims to clear up any misunderstandings around core web vitals metrics and how they might impact SEO. A well-sourced article.

Harry Roberts

Legibility: How and Why Typography Affects Ease of Reading — A free seven chapter book from a typographic expert covering letter spacing, alignment, layout, rendering, aesthetics, and much more. An excellent resource on typographic variables that’s well worth a read for getting up to speed on all things legibility, readability and usability.

Mary C. Dyson

Get a Complete Picture of Your Site’s Performance — Track Core Web Vitals and learn how users experience the speed of your site. Use Lighthouse audits to fix issues. Measure the impact of slowdowns on business metrics and user engagement. Integrate with your CI/CD process to stay fast.

SpeedCurve sponsor

The Arc Browser Reaches v1.0 — I’ve seen plenty of folks advocating for this new Chromium-powered browser — and now, following a period of being invite only, it's finally publicly downloadable as a 1.0 release. (Release notes here)

The Browser Company

Google's 'Web Environment Integrity' Draft Draws Developer Ire — This is a developing story worth keeping an eye on. Google has proposed an idea called Web Environment Integrity (WEI) as a way for clients to establish their ‘integrity’ with a server by way of a third party. “In simpler terms, WEI provides a way for a browser to prove it is working as a website operator expects, and hasn’t been manipulated.” Unsurprisingly, many folks see where this could lead..

The Register

⚡️ IN BRIEF

📙 Tutorials, Articles & Opinion

▶  DX in the Frontend Developer Ecosystem — A half-hour talk about frontend trends, new tools, and browser features, asking if we’re all busy reinventing the wheel for a reason or if sites built ‘yesterday’ may be as a good as those on the cutting edge.

Stefan Judis

Scroll Driven Animations in CSS are a Joy to Play Around With — A look at some of the fun we can have with scroll driven animations — giving us the chance to animate elements based on a scroll instead of time. This post looks at the basics, shares some ideas, and neat demos.

Brecht De Ruyte

Server-Side Rendering Is Having a Moment - by Sentry — Server-side rendering-supported frameworks like Next.js are buzzing. But can they make blazing fast web apps? Read on.

Sentry sponsor

Recreating YouTube’s Ambient Mode Glow Effect — A look at how a little Canvas and requestAnimationFrame can come together to create that subtle glowing effect you see around YouTube videos.

Adrian Bece

WebGPU: The Cross-Platform Graphics API of Tomorrow? — Learn how to build an app with WebGPU (using C++) for the web and specific platforms.

François Beaufort

How to Use CSS object-fit and object-position — Learn how to use CSS object-fit to determine how images fit within a given space, and how to position those images with object-position.

Ralph Mason

Can We Query the Root Container? — The complexities of containment, overflow, and ‘propagation’.

Miriam Suzanne

Easy SVG Sparklines — With just a little SVG you can easily create sparkline charts that’ll render in the browser and don’t require any JavaScript at all.

Alex Plescan

The Rise of JPEG XL: Apple's Support and Image Compression Insights — On the significance of Apple’s support for JPEG XL and what this means for the widespread adoption of this next-generation image compression format.

JON SNEYERS

Designing for Accessibility: Creating Inclusive and User-Centric Products
Stéphanie Walter

The Problem with Auto-Generated Alternative Texts for Images
Daniela Kubesch

Tailwind CSS Tips and Tricks Worth Knowing
Yoav Ganbar

🧑‍💻 JOBS

Senior Software Engineer (Frontend Lead) — Come lead Emerge's web platform, used by teams like DoorDash, Square, Dropbox & Airbnb (our stack: Next.js, React, TS, Vercel).
🛸 Emerge Tools

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired

🔧 Code, Tools & Resources

TOAST UI Grid: A Customizable Grid Control for the Web — A powerful MIT-licensed grid-style control for the display, editing, and management of data. It comes from the same folks as TUI Editor and TUI Calendar and while it’s happy on its own, there are wrappers for Vue and React too. GitHub repo.

NHN

wavesurfer.js 7: Audio Waveform Player — If you’re creating a podcast player, audio experience, or anything where seeing an interactive audio waveform could be useful, check this out. GitHub repo.

katspaugh and contributors

You Look Like You Could Use a T-Shirt. And a Better Auth Provider — Spin up a local instance of FusionAuth in just 5 minutes. Send us a screenshot and we’ll send you a t-shirt. It's free.

FusionAuth sponsor

Detect Scroll: A Fast, Light JS Module for Detecting Scroll Activity — Expands on the browser’s limited scroll event listener to allow you to accurately detect direction and location on both axes.

Jordan Egstad

Winded: A Tool to Test Responsive Designs in Different Viewport Sizes Simultaneously — Created for Tailwind sites (hence the name) but useful for testing any responsive design. Scanning multiple device sizes at a glance is a nice feature.

Winded

Tabler Icons: Over 4500 Vector Icons for the Web — Open source icons you can use by either copying or downloading SVGs or PNGs or use one of the helper libraries like @tabler/icons-react to take them direct into a React app, say.

Tabler

React Tweet: A Fresh Way to Embed Tweets in a React App — Vercel has come up with an elegant way to embed posts from the site formerly known as Twitter that's faster and smaller than the official mechanism and supports React Server Components and ‘any React framework.’ Now let's just hope Elon doesn’t turn off the taps..

Vercel

Ipx.