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.