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 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 |
|
📙 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 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
|
Building React + Vue Support for Tailwind UI
|
Build a Web App with Modern JavaScript and Web Components
|
💻 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 Player — Try 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 |