Frontend Focus

#​493 — June 2, 2021 | Read on the web

Looking Fine with Firefox 89 — Version 89 of Firefox has just arrived, bringing with it some significant UI changes (chiefly a more minimalist look). This post outlines the developer highlights but you can dive into all the developer changes here, and you can find the end-user release notes here.

Chris Mills (Mozilla)

Useful VS Code Extensions For Front-End Developers — A look at useful VS Code add-ons, from basic productivity boosters to advanced debugging helpers.

Cosima Mielke

Learn How to Structure Your Remote Hiring Process — A new era of remote work suddenly arrived and Managers need to enhance their recruiting process if they want to win the best talent for their companies. This guide shows you how GitLab, Zapier and other companies build thriving remote teams.

Revelo sponsor

New CSS Functional Pseudo-Class Selectors :is() and :where() — Adam takes a look at how these seemingly small additions to CSS selector syntax are going to have a big impact.

Adam Argyle

We Need to Talk About WCAG — It’s said that over 95% of websites have accessibility issues. Rian shares her concerns and opinion, noting that we need to do better, and find a different approach.

Rian Rietveld

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

The Perfect Link — There’s more to a link than just a clickable word or image. Here, Rian dives into creating the ‘perfect’ link that works “for everyone on every device”.

Rian Rietveld

Front-End Testing is For Everyone — A good primer that covers the most popular and widely used types of frontend testing.

Evgeny Klimenchenko

Inherit, Initial, Unset, Revert — A look at a few special CSS keywords you can use on any CSS property: inherit, initial, revert, and unset. Plus, where and when to use them to the greatest effect, and if we need more of these type of keywords.

Peter-Paul Koch

5 Reasons Not to Write Your JavaScript Data Grid from Scratch — Data grids are essential for many business apps. You may be tempted (or kindly asked) to write one. Before you start...

Progress Kendo UI for Angular sponsor

An Introduction to Trigonometry in CSS and JavaScript — A three-part overview of trigonometry, understanding how it can be useful, and diving into some creative applications in CSS and JavaScript.

Michelle Barker

A Thorough Analysis of CSS-in-JS — I'm not overly keen on the approach, but Andrei does a good job at selling the benefits and compares some techniques.

Andrei Pfeiffer

How to Code a Crosshair Mouse Cursor with Distortion Hover Effect — A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover. It’s a neat effect.

Mary Lou

A New Way To Reduce Font Loading Impact: CSS Font Descriptors
Barry Pollard

"Why Prefetch Is Broken"
Jeff Kaufman

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.

🔧 Code, Tools and Resources

Fluid Typography: Generate CSS for Text That Scales with The Window Size — This uses the CSS clamp() feature, which now has pretty good support in modern browsers.

Erik André Jakobsen

CandyGraph: A Fast, Flexible 2D Plotting Library — A flexible and fast-by-default 2D plotting library tuned for rendering huge datasets on the GPU at interactive speeds. And if that sounds like a boast, hit up the examples (the animated ones lower down are the most interesting).

Rye Terrell

Our Team Researched the Best PostgreSQL GUIs So You Don’t Have To

Retool sponsor

Flagpack: 260+ Open Source Flag Icons to Use in Your Design Tool or Code Project — Download the assets for Sketch and Figma or install via npm for React, Vue, and Angular.

YUMMYGUM

Iconoir: 900+ Open Source SVG Icons — The design of the icons is simple and all are categorized and filterable via keyword.

Luca Burgio

eslint-plugin-tailwindcss: ESLint Plugin for Tailwind CSS Usage
Francois Massart