Frontend  Focus

#​486 — April 14, 2021 | Read on the web

What's New in Chrome 90 for Developers — Version 90 of Google Chrome is rolling out now, and it includes a new value for the CSS overflow property, the renaming of the Feature Policy API to Permissions Policy, a new way to implement and use Shadow DOM directly in HTML, and more. Here’s a 90s style video running through the changes if you prefer.

Pete LePage (Google)

Modern CSS Upgrades To Improve Accessibility — Modern CSS provides us with various capabilities that we can leverage to make layouts more accessibly inclusive for users of all abilities across any device. This considered post covers several topics such as focus visibility, zoom and reflow, sizing interactive targets, and more.

Stephanie Eckles

Get to Know Chrome’s Dev Tools — Join Jon Kuperman for this introduction to Google’s Chrome Developer Tools. You’ll learn how to edit, debug and profile you web apps in this detailed video course.

Frontend Masters sponsor

A Complete Guide To HTML Email — A dive into all things HTML email, looking at tools, templates and guides for both designers and developers.

Vitaly Friedman

Comparing the New Generation of Build Tools — A detailed evaluation of a bunch of new developer tools (like Snowpack, rebuild, etc) and how they improve the developer experience.

Hugh Haworth

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Say Hello To CSS Container Queries — A solid look at how CSS container queries work with lots of examples, visuals, and use-cases.

Ahmad Shadeed

Visually Impaired Users Complain After Rail Websites Go Greyscale in Tribute to Prince Philip — This gesture somewhat backfired as customers rightly highlighted the accessibility issues this change brought about.

Rhi Storer

How to Convince Your Boss to Care About Speed — Provides tips and pointers on a strategic way to approach conversations about web performance, plus arguments that might just help you win the case.

Karolina Szczur

Let’s Create an Image Pop-Out Effect With SVG Clip Path — This is a neat little hover effect that uses the SVG <clipPath> element, that also takes in account any SEO and accessibility issues that arise.

Adrian Bece

HTML Inputs and Labels: A Love Story — Tips on pairing proper, semantic labels with input.

Amber Wilson

Need Developers? Revelo Helps You Hire Pre-Vetted Remote Devs

Revelo sponsor

Debug Web Vitals in The Field — Learn how to attribute your Web Vitals data with debug information to help you identify and fix real-user issues with analytics

Philip Walton

'My Current HTML Boilerplate' — Every element used for a basic structure of a HTML document, with straightforward explanations as to why.

Manuel Matuzović

Sticky Headers: Five Ways to Make Them Better
Page Laubheimer

Building React + Vue Support for Tailwind UI
Adam Wathan

Build a Web App with Modern JavaScript and Web Components
Camilo Reyes

💻 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

Waterfaller: Find Slowdowns On Your Web Page & Create Tasks to Boost Speed and Core Web Vital Scores — You can enter a URL into this Google Pagespeed Insights alternative and it will generate a detailed waterfall view of all loaded resources to determine potential bottlenecks or other problems, along with suggested solutions.

Tim Bednar

Cumulative Layout Shift Debugger: Rate and Visualize the Cumulative Layout Shifts of Any Webpage — Enter a URL and get a score along with graphics demonstrating amount of layout shift during load time, to see if the page needs improvement according to Google’s Core Web Vitals.

fili wiese

Drag-n-Drop Email Editor for Your App — Unlayer is a drag-n-drop email template builder that makes it easy to add an email editor to your React, Angular or Vue apps.

Unlayer sponsor

Frontend Toolkit: A Small Collection of Useful Online Optimizers and Converters — Currently a set of 10 tools that you can arrange on screen that includes an SVG or image optimizer, CSS formatter, and a quick lookup to find out the size of any npm package.

Damian Frizzi

CSS-Select 4.0: A CSS Selector Compiler and Engine — Turns CSS selectors into functions that tests if elements match them.

Felix Böhm

moovie.js: A Movie-Focused HTML5 Media PlayerTry it here. No dependencies, responsive, customizable, keyboard shortcuts, and includes support for .vtt or .srt caption/subtitle files.

Bruno Vieira

Kaboom.js: A Fun JS Game Programming Library and Environment — Lets you edit your code, sprites, and sounds in one place and includes helpers to assist in building certain types of games faster. Project homepage.

replit