Collective #725

Inspirational Website of the Week: CIETY
An eccentric, bold design with vibrant colors and a fun scrolling experience.
Get inspired

This content is sponsored via BuySellAds
Power up your Form Submissions
Add access controls, business process management and communication to your form submission results.
Find out more

GSAP 3.11 Released with matchMedia
A new GSAP release with the amazing gsap.matchMedia() which is a game-changer for responsive, accessible-friendly animations.
Check it out

Why React Re-Renders
In this tutorial, Josh W Comeau unpacks when and why React re-renders, and how we can use this information to optimize the performance of our React apps.
Read it

Physically Based
Built as an open API, this database provides CG artists with physically based values.
Check it out

cohost!
Cohost is a new social media platform built from the ground up by a small team of developers and designers who like sharing things on the internet. It allows to use custom CSS in an update.
Check it out

Recoded
Recoded lets you create beautiful images or videos of your code. Made by Siddharth Roy.
Check it out

An Introduction to Constraint Based Design Systems
A very interesting article by Cole Peters on constraint based design systems and how effective designs optimize for constraints.
Read it

Can browsers optimize the loading of third-party resources?
Addy Osmani shares some insight on future ways and experiments that could potentially protect the user experience from the detrimental impact of third-party scripts.
Read it

Vertex Gallery
Vertex gallery is a virtual art gallery that shows 34 new art pieces every day. These art pieces change every night at 22:00 UTC.
Check it out

Loading Disco
Joe Bell shares a beautiful alternative to the loading spinner.
Check it out

CSS Grid and Custom Shapes, Part 1
Learn how to combine CSS Grid techniques with CSS clip-path and mask to create fancy grids of images of different shapes.
Read it

The horizontal overflow problem
Hui Jing Chen explains how to avoid the unintended horizontal over-scrolling on mobile.
Read it

On ratings and meters
Lea Verou created a proper web component for star ratings based on the meter element.
Check it out

Color and Contrast
A comprehensive guide to color and contrast for user interface designers.
Check it out

Do you know about overflow: clip?
You probably know overflow: hidden, overflow: scroll and overflow: auto, but do you know overflow: clip? Kilian Valkhof shows what this CSS value does.
Read it

A simple carousel with a few lines of CSS
Pawel Grzybek shows how there’s no more the need to use a carousel plugin but only CSS instead.
Check it out

How I Added Scroll Snapping To My Twitter Timeline
Šime Vidas shows how to use CSS Scroll Snap for a better Twitter scroll experience.
Read it

The Ballad of Text Overflow
The text-overflow property can be used to show visual indication of truncated text. Read why it’s inherently inaccessible.
Read it

Poly: Generate design assets with A.I.
Poly is a place to generate all kinds of design assets in seconds using advanced A.I. Create textures, graphics, icons, sprites, and more.
Check it out

Optimizing for JavaScript is hard
Jeroen Engels elaborates why JavaScript is a very hard language to optimize, especially as a compilation target.
Read it

system.css
A design system for building retro Apple-inspired interfaces.
Check it out

Outline is your friend
Don‘t rely on properties like background-color or box-shadow alone for focusing styling. An article by Manuel Matuzović.
Read it

Coder
With Coder you can offload your team’s development from local workstations to cloud servers.
Check it out

Alphredo
Alphredo generates translucent colors looking the same as their opaque counterparts when placed against the same background.
Check it out

Intersection Observer Scrolling Effects
Awesome scroll effects for making items appear with a cool animation. By Jhey Thompkins.
Check it out

From Our Blog
Checkerboard Transition for Text in Three.js
A coding session where you’ll learn how to recreate the checkerboard transition from Gleec.
Check it out

From Our Blog
Awesome Demos Roundup #21
A fresh roundup of the most interesting code experiments from the past couple of weeks.
Check it out

From Our Blog
Fullscreen Scrolling Slideshow
A fullscreen scroll-based slideshow with a content view powered by GreenSock’s Observer plugin.
Check it out