Collective #733

Inspirational Website of the Week: Junni is...
Funky and adorable, thats's this website's vibe and we love it! Our pick this week.
Get inspired
Provide full visibility throughout your tasks and projects
Build custom cloud databases swiftly and connect them to Slack.
Check it out
New patterns for amazing apps
Dive into a fantastic collection of new patterns for amazing apps, including clipboard patterns, file patterns, and advanced app patterns. By Thomas Steiner.
Read it
Layout Breakouts with CSS Grid
Ryan Mulligan writes about extending elements beyond the content area with CSS Grid and named grid lines.
Read it
SVG sprites: old-school, modern, unknown, and forgotten
Vadim Makeev explores other less-known options for using SVG icons and other graphics on a website.
Read it
Fallback Font Generator
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
Check it out
Design Systems For Figma
A collection of Design Systems for Figma from all over the globe.
Check it out
The Web’s Next Transition
Kent C. Dodds writes about the web's next big transformation: Progressively Enhanced Single Page Apps.
Check it out
A World-Class Code Playground with Sandpack
Josh W Comeau shares his experience with Sandpack, a modern playground framework built by the folks at CodeSandbox.
Read it
Early Days of Container Style Queries
Some interesting insights into Container Style Queries by Geoff Graham.
Read it
NetNewsWire
In case you didn't know about it: A free and open source RSS reader for Mac and iOS.
Check it out
Introducing OG Image Generation: Fast, dynamic social card images at the Edge
Read all about the new library for generating dynamic social card images.
Read it
CSS Halftone Patterns
Michelle Barker's exploration of vanilla CSS halftone patterns.
Check it out
100 Days Of More Or Less Modern CSS
A blog post about modern CSS every day for 100 days. By Manuel Matuzović.
Read it
Stellarium 1.0
The Stellarium team did it. Stellarium 1.0 is here!
Check it out
Randoma11y
Generate an infinite amount of accessible color combinations with this cool tool.
Check it out
Satori
In case you didn't know about it: a library to convert HTML and CSS to SVG.
Check it out
How to Code a Three.js Postprocessing Transition
A video coding session where you’ll learn how to code a transition with Three.js and postprocessing.
Check it out
Inspirational Websites Roundup #42
The latest, most trendy websites with an excellent design for your inspiration.
Check it out
Smooth Panel Scroll Effects
An exploration of smooth panel scroll effects based on Margot Priolet's website.
Check it out