UI Dev Newsletter Issue #82

Transitions

Chrome Developers share a module where you will learn how to define transitions between states of an element and use transitions to improve user experience by providing visual feedback to user interaction.

Developer Tools secrets that shouldn’t be secrets

Christian Heilmann shares DevTools tips that could help you log and debug your code more efficiently.

A Deep Dive Into object-fit And background-size In CSS

Ahmad Shadeed explains how object-fit and background-size work, when and why we can use them and discusses practical use cases and recommendations.

Favicons: How to Make Sure Browsers Only Download the SVG Version

Chris Coyier explains how to prevent browsers from downloading both .ico and .svg icons by adding sizes attribute.

Record, replay and measure user flows

Jecelyn Yeen introduces User Flows support in Chrome DevTools and Lighthouse to help you record, replay, and measure interactions beyond page load.

Lazy loading JS by visibility

Jonathan Neal shares Fred K. Schott’s solution for dynamically loading JS using “Islands Architecture,” a strategy where small HTML placeholders are progressively upgraded with dynamic or interactive content as needed.

Parametric Color Mixer

Dawid Woldu shares a color palette composer inspired by audio parametric equalizers to create beautiful color palettes with scientific precision.

Happy Hues

Mackenzie Child shares color palettes where every color gives you the context of how that color could be used for your design or illustration projects, plus an explanation of color terminology and the psychology of color.