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