Collective #650

Inspirational Website of the Week: Léonard – Inventive Agency
Creative and unique with wonderful typography and soft effects. Our pick this week.
Get inspired

BugHerd: the easiest way to track bugs & manage website feedback
Get feedback that’s visual not vague. Pin feedback to elements on a website and capture the technical information to help replicate bugs and solve issues.
Try it free

Annual Awards 2020
Find out who 2020’s best designers, developers, studios and agencies are.
Check it out

Create Responsive Image Effects With CSS Gradients And aspect-ratio
Stephanie Eckles explains how to use the new `aspect-ratio` property in combination with `object-fit` in order to maintain the aspect ratio of images across related components.
Read it

The Future of CSS: Scroll-Linked Animations with @scroll-timeline
Bramus experiments with the upcoming Scroll-linked Animations Specification that defines a way for creating animations that are linked to a scroll offset of a scroll container.
Read it

Blobmixer
A fantastic toy for creating and sharing 3D blobs.
Check it out

SVG Repo
Search more than 300.000 mono or multi color vectors for commercial use.
Check it out

What the heck, z-index??
Josh W Comeau explores stacking contexts, one of the most misunderstood mechanisms in CSS.
Read it

Getting Deep into Shadows
A great article by Rob O’Leary where he shares many interesting things about shadows.
Read it

Diving into the ::before and ::after Pseudo-Elements
An in-depth look at pseudo elements and how to use them to solve interesting CSS problems.
Check it out

Symphosizer
A really cool sound activated typographic instrument.
Check it out

Streams — The definitive guide
Learn how to use readable, writable, and transform streams with the Streams API. By Thomas Steiner.
Read it

Building a ‘Table Of Contents’ with active indicator using JavaScript Intersection Observers
A tutorial by Ben Frain that covers a modern way of automatically creating a table of contents for a blog post that updates with a ‘current position’ indicator.
Read it

Debugging layout repaint issues triggered by CSS Transition
Dzhavat Ushev shares some valuable insight on a repaint issue caused by a hover transition.
Read it

SVG: The Good, the Bad and the Ugly
A very interesting article about SVG, what its problems are and how a better solution would look like.
Read it

Ray.so
Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.
Check it out

Hiding Content Responsibly
Hugo Giraudel discusses all the ways to hide something, be it through HTML or CSS, and when to use which.
Read it

Veloren
Veloren is a multiplayer voxel RPG written in Rust. The game is in an early stage of development, but is playable.
Check it out

State of Design 2021
1,000 designers shared how they work, what they value, and what kinds of challenges they’re facing.
Check it out

How to Create a Diverging Bar Chart with a JavaScript Charting Library
A tutorial by Shachee Swadia that will teach you how to create an interactive diverging bar chart.
Read it

Experience Japan Pictograms
A novel set of visual symbols developed for people of all cultures and ages to enhance their tourism experience in Japan.
Check it out

Maximally optimizing image loading for the web in 2021
In case you missed it: Learn 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
Read it

Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders
A tutorial explaining how to build an infinite circular gallery that can be dragged and scrolled using WebGL with OGL and GLSL Shaders.
Check it out