Collective #738

Inspirational Website of the Week: Poppr
We love the playfulness and bounciness of this beautiful web experience! Our pick this week.
Get inspired

Our sponsor
The best time to try Divi
Get the chance to win an iMac at this year’s Black Friday sale! Purchase any Divi product & get the biggest discount of all times plus access to dozens of additional product deals.
Check it out

Mona Sans & Hubot Sans
Two variable, open source fonts from GitHub.
Check it out

CSS Hover Light Card
Amazing demo by Jhey Thompkins. Learn more about how it was made in this thread.
Check it out

Using the Jaws-effect to transition between 2D and 3D
Read all about the challenge of transitioning from flat 2D to 3D and into extended reality when wearing a head-mounted display by the team of 14islands.
Read it

Creating fluffy trees with Three.js
Part 1 of a tutorial where you will learn how to make beautiful fluffy trees for Three.js using GLSL shaders. By Michael Dougall.
Read it

Atomizer
A library to create small, reusable CSS that scales as your website grows.
Check it out

CSS Clothoid Corners
A CSS clip-path generator that applies visually soft corners to HTML elements using clothoid curves. By Takehiko Ono.
Check it out

Stylify
Stylify generates optimized utility-first CSS dynamicly based on what you write.
Check it out

Pushpin icon speedrun
A helpful commentary for a fantastic speedrun on how a pushpin icon is designed.
Check it out

Bubbles
An adorable and very impressive little bubble simulator. Read more about it in this thread.
Check it out

GitHub Blocks
A technical preview of GitHub Blocks that will make it possible to extend your codebase with custom, interactive blocks for enhanced workflows.
Check it out

Why you should never use px to set font-size in CSS
Learn why using the pixel unit for setting font sizes in CSS is a bad idea. By Josh Collinsworth.
Read it

Openblocks
Openblocks is an all-in-one IDE to create internal or customer-facing apps.
Check it out

CSS Grid and Custom Shapes
The last part of an article series on CSS grid and custom shapes where Temani Afif explores more fancy shapes.
Read it

What’s so great about functional programming anyway?
Read why functional programming is such a hit and how Algebraic Structures allow us to write expressive code in this sample chapter from James Sinclair’s upcoming book “A skeptic’s guide to functional programming with JavaScript”.
Read it

What do numbers look like?
An amazing exploration into visualizing numbers by John Williamson including a 3D viewer of a million integers.
Check it out

Sapling
Meta has open sourced Sapling, a new, Git-compatible source control client that scales to the largest repositories in the world.
Check it out

Lot of Particles
An impressive Three.js demo by Marco Ludovico Perego with lots and lots of particles. Read more here.
Check it out

From Our Blog
Inspirational Websites Roundup #43
A fresh collection of the most creative and trendy websites for your inspiration.
Check it out