Collective #787
Inspirational Website of the Week: Vucko
Engaging interaction details and impeccable typography make this website another level. Amazing collaboration between Gil Huybrecht and Jesper Landberg.
Get inspired
From our sponsor Book this sponsorship
Flexible document workflow automation APIs that boost your business
Introducing APIs that scale with the changing needs of your document workflows. Easily embed eSignature, document generation, PDF editing, and set up conditional workflows with multiple steps and approvers. All from the convenience of one platform & the lowest TCO.
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
Styling External Links with Attribute Selectors
Michelle Barker explains how to style external links on a website using CSS, particularly focusing on applying custom styling to links that lead to external websites based on their href attribute.
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
Avatars
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
Puffer Sticker Effect
Artur Bień shares an amazing puffy sticker hover effect with incredibly realistic lightning.
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 Power of Variable Fonts: An Interview with Jason Pamental
Jason Pamental discusses how variable fonts are revolutionizing typography on the web, offering benefits such as improved performance, creative opportunities, and enhanced user experiences, and explores their increasing adoption in web design and print applications.
Read it
Custom chatbots made easy: How to build your own ChatGPT agents
Steffen Bewersdorff built a lightweight CLI tool called SiegfriedAI, which is designed to help users organize, optimize, and launch prompt templates for ChatGPT, making it easier to create custom chat agents for various tasks.
Check it out
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
Game+Logo is a growing compilation of video game logos, shared on Twitter by Dan Clarke of Arkotype, North England.
Check it out
The selected date must be within the last 10 years
This article discusses the challenges and lessons learned when implementing date validation for a form, specifically focusing on ensuring that the selected date falls within the last ten years. By Gerardo Rodriguez.
Read it
App Motion
A great collection of hand-picked mobile app motion designs for inspiration.
Check it out
Limit the reach of your selectors with the CSS `@scope` at-rule
In this article you will learn how to use @scope to select elements only within a limited subtree of your DOM. By Bramus Van Damme.
Read it
System Design 101
A comprehensive collection of visual explanations for complex systems, presented in an easily understandable manner.
Check it out
Forest Trail
A very cool 3D switch made by Jesse Zhou with Three.js and Rapier Physics.
Check it out
Ideas for Image Motion Trail Animations
Some ideas for mouse/touch responsive animations where images are shown along the path of the user motion.
Check it out
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