Collective #725

Inspirational Website of the Week: CIETY
An eccentric, bold design with vibrant colors and a fun scrolling experience.
Get inspired
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
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
Awesome Demos Roundup #21
A fresh roundup of the most interesting code experiments from the past couple of weeks.
Check it out
Fullscreen Scrolling Slideshow
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.
Check it out