Collective #726

Inspirational Website of the Week: VoidersClub
A slick retro design with brilliant colors and great typography. Our pick this week.
Get inspired
Our annual Summer Sale is back! This is one of only a few times we offer our biggest discounts. Get 20% off Divi, 40% off Divi Cloud and up to 50% off products in the Divi Marketplace!
Get the deal
Making a Morphing 3D Sphere in Javascript with Three.js
In this guide you'll leanr how to create a morphing sphere with a cool, wireframe background.
Read it
A Handy Use For Cascade Layers
Michelle Barker shares how cascade layers are a perfect solution to a problem she was having.
Read it
The AI Art Apocalypse
Alexander Wales writes about AI created art and what it means for artists.
Read it
Needle (Beta)
Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.
Check it out
Design the next iPhone
Apple is running out of ideas and needs your help. Another fun project by Neal Agarwal.
Check it out
Choo-Choo World
An amazing web based wooden train track builder.
Check it out
What was that media query code again??
A website that lists popular media queries with a handy copy button.
Check it out
Sidekick
Sidekick is a live application debugger that lets you troubleshoot your applications while they keep on running.
Check it out
I replaced all our blog thumbnails using DALL·E 2 for $45: here’s what I learned
A very interesting use case for AI generated images in a blog.
Read it
pppalette
An easy color palette generator for beautiful color schemes. Analogous, complementary, split complementary, triadic, monochromatic (tones, tints, shades) & more.
Check it out
CSS Tip
Jhey Thompkins shows how you can select the previous siblings of an element with :has() for a cool hover effect.
Check it out
90's Cursor Effects
Fun JavaScript mouse effects that follow your cursor or finger! By Tim Holman.
Check it out
Creative list styling
A look at some useful and creative ways to style a list. By Michelle Barker.
Read it
System Design
Learn how to design systems at scale and prepare for system design interviews.
Check it out
Webhooks.fyi
Learn the most popular approaches for building, securing, and operating webhooks, with recommendations for webhook providers and consumers.
Check it out
CSS Grid and Custom Shapes, Part 2
The second article in a series where you'll learn how to use CSS Grid, clip-path, and mask to create custom shaped grids.
Read it
SurrealDB
A scalable, distributed, collaborative, document-graph database, for the realtime web
Check it out
My Experience Speaking at VueConf US 2022
A detailed article about speaking at a conference by Austin Gil.
Check it out
Custom SVG Cursors with an Interactive Emitter Effect
Several interactive cursor effects made with JavaScript and SVG.
Check it out