Collective #653
Publikováno: 18.3.2021
Debugging layout shifts * Aladino * Haikei * Rethinking the JavaScript ternary operator
The post Collective #653 appeared first on Codrops.
Inspirational Website of the Week: Bridge Tour
A beautiful interactive visual narrative with a slick scroll experience.
Auth without complexity
Add login, SSO, access control, and multi-tenancy to any application with Userfront. A modern, simpler alternative to Auth0.
Debugging layout shifts
A very informative article by Katie Hempenius on how to identify and fix layout shifts.
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.
Rethinking the JavaScript ternary operator
An article by James Sinclair where he takes a very close look at ternaries and if-statements.
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.
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.
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ó.
Creative Code algorithms & techniques
A fantastic visual overview of creative coding techniques and algorithms compiled by Raphaël de Courville
and Taru Muhonen.
100 underline/overlay animations
Temani Afif spoils us with an extensive collection of hover animations for menu items and links.
Writex.io
Writex.io is an online editor offering lots of possibilities and a customized writing experience.
Free Font: Brique
A wide serif display font designed by Henta Zakharia.
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”.
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.
Charts.css
Charts.css is a modern CSS framework that uses CSS utility classes to style HTML elements as charts.
smoothstep.io
Smoothstep.io is a toolkit for building animations in the WebGL Shader language.
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.
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.
Free Font: SpaceType
A fantastic type project by Filip Starý.
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.
How can I improve this GSAP particle animation code?
A GSAP forum thread where you can learn all about animating particles.
F****** user interface design, I swear
A gentle reminder by Mark Dominus that obvious things should be considered when designing a UI 
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.
Tropical Particles Rain Animation with Three.js
A WebGL particle rain animation resulting in an interesting image effect made with Three.js.
The post Collective #653 appeared first on Codrops.