Collective #733
Publikováno: 13.10.2022
New patterns for amazing apps * Randoma11y * Design Systems For Figma * Layout Breakouts with CSS Grid

Inspirational Website of the Week: Junni is…
Funky and adorable, thats’s this website’s vibe and we love it! Our pick this week.

This content is sponsored via BuySellAds
Provide full visibility throughout your tasks and projects
Build custom cloud databases swiftly and connect them to Slack.

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.

Layout Breakouts with CSS Grid
Ryan Mulligan writes about extending elements beyond the content area with CSS Grid and named grid lines.

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.

Fallback Font Generator
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.

Design Systems For Figma
A collection of Design Systems for Figma from all over the globe.

The Web’s Next Transition
Kent C. Dodds writes about the web’s next big transformation: Progressively Enhanced Single Page Apps.

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.

Early Days of Container Style Queries
Some interesting insights into Container Style Queries by Geoff Graham.

NetNewsWire
In case you didn’t know about it: A free and open source RSS reader for Mac and iOS.

Introducing OG Image Generation: Fast, dynamic social card images at the Edge
Read all about the new library for generating dynamic social card images.

CSS Halftone Patterns
Michelle Barker’s exploration of vanilla CSS halftone patterns.

100 Days Of More Or Less Modern CSS
A blog post about modern CSS every day for 100 days. By Manuel Matuzović.

Stellarium 1.0
The Stellarium team did it. Stellarium 1.0 is here!

Randoma11y
Generate an infinite amount of accessible color combinations with this cool tool.

Satori
In case you didn’t know about it: a library to convert HTML and CSS to SVG.

From Our Blog
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.

Inspirational Websites Roundup #42
The latest, most trendy websites with an excellent design for your inspiration.

Smooth Panel Scroll Effects
An exploration of smooth panel scroll effects based on Margot Priolet’s website.