Bi-Weekly Frontend News

Collective #787


Transition animations: a practical guide

Dongkyu Lee's article is about the principles of transition animation in product design, emphasizing their importance in enhancing user experience, and it provides six key principles for creating better transition animations with practical examples and considerations.

Read it

The Negative Impact of Mobile-First Web Design on Desktop

This article discusses the concept of "content dispersion" in modern website design, which occurs when responsive web pages designed for mobile devices appear overly large and stretched out on desktop screens, leading to usability issues such as increased cognitive load, higher interaction costs, difficulty in understanding content, and user frustration.

Read it

CSS Findings From Photoshop Web Version

Ahmad Shadeed enjoys discovering what makes interfaces tick and this time he inspects the web version of Adobe Photoshop, highlighting details such as the use of flexbox, CSS grid, CSS variables, and layout strategies to recreate the design and understand the CSS structure of the popular design application.

Read it

Scroll-Driven State Transfer

In his fourth article about scroll-driven animations, Roman Komarov explores a technique that allows for transferring the state of one element to another element in a different part of a web page using a unique identifier in CSS via a timeline-scope.

Read it

The Three Cs: Concatenate, Compress, Cache

Harry Roberts discusses the optimization of web file serving and storage, focusing on factors like concatenation, compression, caching, connection speed, and client-side considerations, to achieve a balance between ergonomics and performance.

Read it


The article discusses the importance of avatars in online products, particularly in cases where users cannot upload their profile pictures themselves, and explores various avatar services and fallback options, including Gravatar, Unavatar, Vercel Avatar, Tiley, and Boring Avatar, offering insights and recommendations for choosing the most suitable service based on user attributes and preferences.

Check it out

What’s new in CSS?

Bramus Van Damme's article on his presentation at the Frontmania event in Utrecht, which covers recent and upcoming developments in CSS, including new features, improvements, and their potential benefits for frontend developers.

Check it out

An Anchored Navbar Solution

Eric Meyer shows how to use anchor positioning for creating a dashed navbar connector between a navigation bar and the current page, replacing a previously used method involving layered backgrounds.

Read it

The State of WebAssembly 2023

The post by Colin Eberhardt discusses the results of the State of WebAssembly 2023 survey, highlighting trends and developments in the use of WebAssembly for web application development, serverless computing, and as a plugin environment, along with insights into programming languages, runtimes, and the desires and challenges of the WebAssembly community.

Read it


Game+Logo is a growing compilation of video game logos, shared on Twitter by Dan Clarke of Arkotype, North England.

Check it out

System Design 101

A comprehensive collection of visual explanations for complex systems, presented in an easily understandable manner.

Check it out
LiquidWeb From our partner

Liquid Web: Codrops' Choice for Web Hosting!

At Codrops, we've chosen Liquid Web as our trusted web hosting provider for over 7 years. They consistently deliver with a remarkable uptime and offer round-the-clock human support. Whether you're looking for VPS or Dedicated Cloud Hosting, Liquid Web has solutions tailored for every project. Plus, every time you opt for Liquid Web via this link, you're supporting Codrops by helping us manage our server costs.

Check it out