Collective #711
![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_wotw.jpg?x25555)
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![Collective 711 ImageKit](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_imagekit.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_design.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_oby.jpg?x25555)
Voby
A high-performance framework with fine-grained observable-based reactivity for building rich applications.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_subgrid.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_stateofcss.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_music.jpg?x25555)
Lil Beat Maker
A free online beat-making machine based on a circular timeline.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_mother.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_sql.jpg?x25555)
Announcing D1: our first SQL database
Learn about D1, Cloudflare’s first SQL database, designed for Cloudflare Workers.
Read it![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_font.jpg?x25555)
Free Font: n27
Atipo released a super modern new font and offers the regular and italic weight for free.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_robotoflex.jpg?x25555)
Roboto... But Make It Flex
Google’s most popular font gets customizable with the launch of Roboto Flex.
Read it![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_designsys.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_newsletter.jpg?x25555)
vscode.email
A new weekly newsletter for front-end developers with a specific focus on tools. Curated by Louis Lazaris.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_cssbetter.jpg?x25555)
Writing Better CSS
Adam Laki from Spruce CSS offers some good advice on writing better CSS.
Read it![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_markdoc.jpg?x25555)
Markdoc
Markdoc is a powerful, flexible, Markdown-based authoring framework by Stripe.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_zoran.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_modules.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_scroll.jpg?x25555)
Longines Spirit Zulu Time
A beautiful scroll experience made by the folks of Immersive Garden.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_apis.jpg?x25555)
The Web Beyond Browsers
Some thoughts on the standardization of web platform APIs beyond the browser by Jim Nielsen.
Read it![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_smoothscrolling.jpg?x25555)
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![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_jelly.jpg?x25555)
Jelly
A real-time jelly simulation on the GPU made by saharan.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_iconex.jpg?x25555)
Iconex
Iconex is a gigantic set of more than 1000 icons for Figma. Made by Dmitry Mikhaylov.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_statefrontend.jpg?x25555)
The State of Frontend 2022
Results of surveys filled in by 3073 developers from 125 countries about the state of frontend.
Check it out![Collective 711 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/05/C711_stack.jpg?x25555)
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