Collective #653
Inspirational Website of the Week: Bridge Tour
A beautiful interactive visual narrative with a slick scroll experience.
Get inspired
Auth without complexity
Add login, SSO, access control, and multi-tenancy to any application with Userfront. A modern, simpler alternative to Auth0.
Try it free
Debugging layout shifts
A very informative article by Katie Hempenius on how to identify and fix layout shifts.
Read it
Aladino – your magic WebGL carpet
Aladino is a tiny, dependency-free JavaScript library that allows to enhance your site using "shader effects" with progressive enhancement and accessibility in mind. By Luigi De Rosa.
Check it out
Rethinking the JavaScript ternary operator
An article by James Sinclair where he takes a very close look at ternaries and if-statements.
Read it
Gorillas’ nav: a case study
An article about everything that went into the navigation of the Gorillas website, from accessibility to behavior to design. By Kitty Giraudel.
Read it
Haikei
A web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more.
Check it out
Creating Patterns With SVG Filters
Learn how to use SVG filters in such a way to make great looking patterns in this article by Bence Szabó.
Read it
Creative Code algorithms & techniques
A fantastic visual overview of creative coding techniques and algorithms compiled by Raphaël de Courville and Taru Muhonen.
Check it out
100 underline/overlay animations
Temani Afif spoils us with an extensive collection of hover animations for menu items and links.
Check it out
Writex.io
Writex.io is an online editor offering lots of possibilities and a customized writing experience.
Check it out
Free Font: Brique
A wide serif display font designed by Henta Zakharia.
Check it out
Practical accessibility, part 1: Markup semantics & ARIA
Maggie Wachs shares this first part of an invaluable list that "when followed ensures a solidly accessible and usable experience".
Read it
CSS Generators
A short series of posts that aims to highlight some of the useful tools and techniques for developers and designers. This one is about CSS Generators. By Iris Lješnjanin.
Check it out
Charts.css
Charts.css is a modern CSS framework that uses CSS utility classes to style HTML elements as charts.
Check it out
smoothstep.io
Smoothstep.io is a toolkit for building animations in the WebGL Shader language.
Check it out
Fluid Space Calculator
Using the same base values from the fluid type calculator, this tool helps you to create a related fluid space system for responsive designs.
Check it out
Font Follows Feeling – A brief type classification
An article and video that will give you a broad overview of how to categorize typefaces to figure out what kind or moods they can evoke and for what sorts of text they are suited.
Check it out
Free Font: SpaceType
A fantastic type project by Filip Starý.
Check it out
Conditional animations with CSS properties
Christian Heilmann shows how to use a custom property to avoid repeating the settings when using prefers-reduced-motion media queries.
Read it
How can I improve this GSAP particle animation code?
A GSAP forum thread where you can learn all about animating particles.
Check it out
F****** user interface design, I swear
A gentle reminder by Mark Dominus that obvious things should be considered when designing a UI :)
Read it
Manim
Manim is an animation engine for explanatory math videos. It’s used to create precise animations programmatically, as seen in the videos at 3Blue1Brown. There's also a community edition which is updated more frequently.
Check it out
Tropical Particles Rain Animation with Three.js
A WebGL particle rain animation resulting in an interesting image effect made with Three.js.
Check it out