Collective #725
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_WOTW.jpg?x86293)
Inspirational Website of the Week: CIETY
An eccentric, bold design with vibrant colors and a fun scrolling experience.
Get inspired![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_kintone.png?x86293)
Power up your Form Submissions
Add access controls, business process management and communication to your form submission results.
Find out more![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_gsap.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_react.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_physicallybased.jpg?x86293)
Physically Based
Built as an open API, this database provides CG artists with physically based values.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_cohost.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_recoded.jpg?x86293)
Recoded
Recoded lets you create beautiful images or videos of your code. Made by Siddharth Roy.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_designsystem.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_addy.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_gallery.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_disco.jpg?x86293)
Loading Disco
Joe Bell shares a beautiful alternative to the loading spinner.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_shapesgrid.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_overflowscroll.jpg?x86293)
The horizontal overflow problem
Hui Jing Chen explains how to avoid the unintended horizontal over-scrolling on mobile.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_star.jpg?x86293)
On ratings and meters
Lea Verou created a proper web component for star ratings based on the meter element.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_contrast.jpg?x86293)
Color and Contrast
A comprehensive guide to color and contrast for user interface designers.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_clip.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_carousel.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_twitter.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_ballad.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_ai.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_optimizing.jpg?x86293)
Optimizing for JavaScript is hard
Jeroen Engels elaborates why JavaScript is a very hard language to optimize, especially as a compilation target.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_system.jpg?x86293)
system.css
A design system for building retro Apple-inspired interfaces.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_outline.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_coder.jpg?x86293)
Coder
With Coder you can offload your team's development from local workstations to cloud servers.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_alphredo.jpg?x86293)
Alphredo
Alphredo generates translucent colors looking the same as their opaque counterparts when placed against the same background.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_scrollitems.jpg?x86293)
Intersection Observer Scrolling Effects
Awesome scroll effects for making items appear with a cool animation. By Jhey Thompkins.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_yuri.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_demosroundup.jpg?x86293)
Awesome Demos Roundup #21
A fresh roundup of the most interesting code experiments from the past couple of weeks.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/08/C725_fullscreenscrolling.jpg?x86293)
Fullscreen Scrolling Slideshow
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.
Check it out