Frontend Focus

#​488 — April 28, 2021 | Read on the web

A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors — The CSS Working Group Editor’s Draft for Selectors Level 4 includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today.

Stephanie Eckles

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

Getting Started with CSS Custom Properties — Andy looks at just how useful Custom properties in CSS can be, “not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces”. This short guide will get you up to speed with how they work and how to use them.

Andy Bell

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Generating and Solving Sudokus in CSS — “I love to make CSS do stuff it shouldn’t”. This is a fun look at just how to approach tackling such an experiment.

Lee Meyer

How to Bake Layers of Accessibility Testing Into Your Process — Accessibility experts Kate Kalcevich and Mike Gifford introduce “layered accessibility testing”, a practice of using a variety of tools/approaches at different stages in a product lifecycle to catch accessibility issues early (when it’s easier and cheaper to fix them).

Smashing Magazine

The Complete Guide to Google's Core Web Vitals Performance Metrics — A solid overview of all the key terms of Google’s performance metrics. We featured a handy guide along similar lines in last week’s issue.

Craig Buckler

A Webpack Tutorial for Beginners: A Step-by-Step Guide — If you’ve tried other bundler options but haven’t looked into webpack (maybe because of the bigger learning curve), this introductory tutorial might be a good starting point.

Louis Lazaris beginner

[Guide] The Truth About Developer Productivity Metrics — What you need to know to avoid weaponizing metrics for performance reviews, and use them to accelerate releases instead.

Sleuth sponsor

Customizing Tailwind CSS — A look at how to make Tailwind look different whilst “keeping all the underlying goodies”.

Ben Mann

How to Test Website Speed the Right Way — A step-by-step tutorial on how to properly run tests to ensure optimum page load times and performance.

John Demian

The Making (and Potential Benefits) of a CSS Font — A way to render text without using any font at all.

Levi Szekeres

Live Webinar: Building Editor X’s Award-Winning Homepage

Editor X sponsor

How to Style and Define The Color of Radio and Checkbox Inputs
Stefan Judis

▶  Build and Deploy a Responsive Gallery Portfolio using HTML and CSS
Ania Kubów

A Web Developer's Guide to AVIF Images
Darek Kay

🔧 Code, Tools and Resources

Lighthouse Metrics: Global Performance Insights for Your Site — Enter a URL and this tool will give you Lighthouse scores based on different geographic locations (US East, EU North, Asia Pacific North, etc).

Lighthouse Metrics

Grid.js: An Advanced Table Control — A lightweight, advanced table plugin that can work alongside React, Angular, Vue, or, well, nothing. Check out some of the examples for more on how to use it. It uses Preact under the hood.

Afshin Mehrabani

Uncut: An Open Source Typeface Catalogue, Focusing On Somewhat Contemporary Type — Currently features about 50 fonts that are available for direct download, and it seems the fonts are all free or open source.

uncut

WinBox: An HTML5 Window Manager for the Web — Very thoroughly documented and works pretty well, but feels a bit like Web-based UI experiments of 10+ years ago..? GitHub repo.

WinBox

Inkline: A Customizable Vue.js UI/UX Library — Includes 50+ components designed for mobile-first apps with out-of-the-box accessibility support via WAI-ARIA.

Alex Grozav

stylelint: A 'Mighty' Modern Style Linter — A linter with over 170 built-in rules to help “catch errors, apply limits and enforce stylistic conventions”. GitHub repo.

stylelint

Jobs

Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.
Komoot

Find Frontend Jobs from 13K+ Remote Companies on Arc — Close those tabs! Arc aggregates all remote F/E developer jobs. Get hired by companies like Spotify & HubSpot.
Arc.dev

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