Frontend Focus Issue 517: November 17, 2021

Frontend Focus Issue 517

What's New in Lighthouse 9.0 — Version 9.0 of Google’s popular website auditing tool arrives with a refreshed report and a preview of support for user flows. It’s available in Chrome Canary now, and will land in the stable release of Chrome 98.

Brendan Kenny

Powerful Terminal and Command-Line (CLI) Tools for Modern Web Development — What’s your favorite command-line tool? In this post, Louis shares a collection of relevant command-line apps and utilities that he has personally come across in the past few years.

Louis Lazaris

Video API Built to Create Stunning Visual Experiences — Are videos impacting your page's load time? Now, deliver optimized videos in the right format, quality & size based on the user's device in real-time. Delivering stunning visual experiences just got simpler, Try ImageKit's forever-free plan today.

ImageKit.io sponsor

Release Notes for Safari Technology Preview 135 — Here are the release notes for the latest preview build of Safari, which is available now. Most notably this version adds lazy loading image support, along with support for accent-color, the requestVideoFrameCallback API, and new viewport units.

Jon Davis (Apple)

Using Position Sticky with CSS Grid — Explains how the default CSS grid stretch behavior affects position: sticky, and how to override it to make it work as expected.

Ahmad Shadeed

⚡️ Quick bits:

• Version 96 of Chrome is rolling out now, so here's what's new in DevTools.
• You can now download Firefox directly from the Windows Store.
• Chris Siebenmann details how both Edge and Chrome may start restricting requests to private networks in order to resolve a security threat.

? Tutorials, Articles & Opinion

Using Web Workers to Boost Third-Party Script Performance — A look at Partytown, a new experimental library that aims to improve third-party script performance using Web Worker technology.

Arek Nawo

▶  Responsive Navbar Tutorial using HTML, CSS & JS — I’ve always found creating navigation components a bit of a pain so any pointers or help is always welcome.

Kevin Powell

Put the “Flow” in Your Workflows with Shortcut — Looking for an intuitive white-board style project management tool? Collaboration has never been easier with Shortcut.

Shortcut (formerly Clubhouse.io) sponsor

Why Your Website Should Not Use Dithered Images — “Despite claims that dithered images will reduce your image’s file size, there are much better ways to compress your website’s images”. Once upon a time, color depth limitations on displays made dithering desirable, but this is rarely the case anymore.

Austin Carr

Your CSS is an Interface — How human-friendly CSS class names can help someone use your website or web app.

Eric Bailey

“AMP Has Irreparably Damaged Publishers’ Trust in Google-led Initiatives”
Sarah Gooding opinion

Generate a Pull Request of Static Content with a Simple HTML Form
Hilman Ramadhan

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

Grow a Design System at Addepar — Work with a talented team of designers and engineers on the foundation for Addepar’s expanding UX. We’re building tools that keep our customer experience one of the best in Fintech.
Addepar

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired

? Code, Tools and Resources

Splide: Lightweight and Accessible Slider/Carousel — It’s nice to see a clean, modern spin on the often maligned UI element. The homepage is packed with demos too. No dependencies, written in TypeScript, and boasts a clean report from Lighthouse. GitHub repo.

Naotoshi Fujita

CSS Shadow Palette Generator — A tool to help you create lush, realistic shadows in CSS. box-shadow can look fantastic, but can require a bunch of crafty tricks. This tool builds those tricks in, and makes them easy to use.

John W. Comeau

Visualize Your IoT Data with Highcharts and InfluxDB

InfluxData sponsor

couleur.io: A Simple Tool to Build Harmonious Color Palettes — Based on HSL color values and it spits out a palette of 10 color values of varying lightness levels but using a common hue and saturation level, thus the palette is ‘harmonized’.

couleur.io

IconKitchen: Mobile App Icon Generator — An interactive UI to customize your app icon with clipart, text, custom image, plus various settings for icon type, color, gradient, padding, etc., before downloading a ZIP file.

Roman Nurik

TuiCss: A Text-Based User Interface CSS Library — If you’re old enough to remember what DOS apps looked like (or, arguably, some Linux shell ones, even now) this may appeal to you. Get Borland Turbo Vision-esque visuals but on the web with this. Is it a good idea? Less sure.

Vinicius Reif Biavatti

Vant: 65+ Mobile UI Components Built with Vue & TypeScript
youzan

tailwindcss-aria-attributes: Tailwind Variants for aria-* Attributes
thoughtbot