UI Dev Newsletter Issue #55
In this issue: Core Web Vitals tips, Flexbox tutorial, CSS color-contrast() function and more.
The Humble img Element And Core Web Vitals
Addy Osmani describes how images impact Core Web Vitals and how to improve them.
Advanced Core Web Vitals: A Technical SEO Guide
Jamie Indigo writes an in-depth guide on Core Web Vitals from an SEO perspective.
CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet
Joy Shaheb explains how CSS Flexbox works and describes the CSS Flexbox basics for responsive sites. Cute animal graphics included.
Windows 10 grid hover effect using HTML, CSS, and vanilla JS
Jash Gopani explains the process of recreating the Windows 10 grid hover effect with CSS and JS.
Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools
Bramus Van Damme shows how to use DevTools to dissect and peek inside HTML elements like input type=file and audio.
How to disable scaling for stroke width
Stefan Judis shows how to use a vector-effect attribute to control how transformations affect stroke width.
Exploring color-contrast() for the First Time
Chris Coyier shares impressions on a color-contrast() function and shares a video for easier understanding.
165+ Developer Resources I Discovered in 2020-2021
Gedalya Krycer shares a comprehensive, well-organized list of helpful web dev resources — from HTML, CSS, and JavaScript to WordPress, Git, and design.