Collective #711

Inspirational Website of the Week: Vendredi Society
This web gem offers a very smooth scroll experience, a delightful color theme and fine effects. Our pick this week.
Get inspired

Ever felt that videos are hurting your web performance?
Start delivering rich videos across devices with automatic optimizations, on-the-fly video transformations, and integrated video CDN.
Try it free

Motion DevTools
Motion DevTools is a Chrome extension for creating web animations where you can inspect, edit and export animations made with CSS and Motion One.
Check it out

Voby
A high-performance framework with fine-grained observable-based reactivity for building rich applications.
Check it out

Learn CSS Subgrid
A deep-dive into the new CSS subgrid feature with real-life examples and use-cases. By Ahmad Shadeed.
Check it out

State of CSS 2022
Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras. By Adam Argyle.
Read it

Lil Beat Maker
A free online beat-making machine based on a circular timeline.
Check it out

POLA “Thank you to all mothers”
Organically changing flowers to express the innumerable shapes and love of mothers. A beautiful ad project made by mount inc.
Check it out

Announcing D1: our first SQL database
Learn about D1, Cloudflare’s first SQL database, designed for Cloudflare Workers.
Read it

Free Font: n27
Atipo released a super modern new font and offers the regular and italic weight for free.
Check it out

Roboto… But Make It Flex
Google’s most popular font gets customizable with the launch of Roboto Flex.
Read it

Building a Design System from scratch
Maxime Heckel’s deep dive into his experience building his own design system that documents my process of defining tokens, creating efficient components, and shipping them as a package.
Read it

vscode.email
A new weekly newsletter for front-end developers with a specific focus on tools. Curated by Louis Lazaris.
Check it out

Writing Better CSS
Adam Laki from Spruce CSS offers some good advice on writing better CSS.
Read it

Markdoc
Markdoc is a powerful, flexible, Markdown-based authoring framework by Stripe.
Check it out

Practical Use Cases for :has() Pseudo-Class
Find out how the :has() parent selector can help you simplify your code and avoid JavaScript entirely using practical, real-life examples.
Watch it

JavaScript Modules – Complete Guide to ES Modules and Module Bundlers
A massive guide with everything you need to know about ES Modules and Bundlers.
Check it out

Longines Spirit Zulu Time
A beautiful scroll experience made by the folks of Immersive Garden.
Check it out

The Web Beyond Browsers
Some thoughts on the standardization of web platform APIs beyond the browser by Jim Nielsen.
Read it

Lenis: Smooth scroll
Studio Freight’s take on smooth scroll: lightweight, hard working and smooth as butter. Still in WIP but looking great already!
Check it out

Jelly
A real-time jelly simulation on the GPU made by saharan.
Check it out

Iconex
Iconex is a gigantic set of more than 1000 icons for Figma. Made by Dmitry Mikhaylov.
Check it out

The State of Frontend 2022
Results of surveys filled in by 3073 developers from 125 countries about the state of frontend.
Check it out

Stack to Content Layout Transition
An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
Check it out