Collective #718
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_WOTW.jpg)
Inspirational Website of the Week: Varex
A beautiful, flowy design with lots of interesting interactions. Our pick this week.
Get inspired
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_exponent.jpeg)
Our Sponsor
Front-end engineering interview prep.
Put your tech career into overdrive with Exponent’s expert interview prep and resources. Nail your front-end engineering interviews to advance your career. Codrops readers can save 20% OFF any Exponent plan for the next 48 hours!
Start Learning
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_colorjs.jpg)
Releasing Color.js: A library that takes color seriously
Lea Verou shares her journey of creating Color.js, a fantastic library that does serious color work properly.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_defensivecss.jpg)
Defensive CSS
An article that sheds light on why it’s important to design and write CSS defensively. By Ahmad Shadeed.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_next.jpg)
Animated Page Transitions in Next.js
Learn how to use Framer Motion to animate route changes in your Next.js project.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_loader.jpg)
Single Element Loaders: The Bars
Temani Afif’s second article in a series about single element loaders.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_bees.jpg)
More than honey
A beautiful interactive story on the importance of bees for biodiversity. By Lio.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_svgline.jpg)
svg-path-morph
A simple library for morphing between variations of SVG paths. Use svg-path-morph to smoothly morph between X variations of the same SVG path (i.e. same commands, different values).
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_particles.jpg)
Exploding Particles
Michal Zalobny made this fantastic demo of a video exploding to WebGL particles. Read more about it in his tweet.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_cssgrid.jpg)
Can we enterprise CSS grid?
Hui Jing Chen shares her thoughts on large scale implementations of CSS Grid.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_wave.jpg)
Dynamowaves
A fun little tool: SVG wave templates that shuffle on render.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_mario.jpg)
Home — Mario Carrillo
The amazing portfolio of Mario Carillo that lets you pan through his fantastic digital artwork.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_pql.jpg)
PRQL
PRQL is a modern language for transforming data — a simple, powerful, pipelined SQL replacement.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_stylesqueries.jpg)
Style Queries
Una Kravets explores why and when style queries make sense to use.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_number.jpg)
Are you sure that’s a number input?
Kilian Valkhof writes how not every input that contains numbers should have an input type number.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_email.jpg)
My Wonderful HTML Email Workflow
Learn how a potent combination of MDX and MJML can help with building emails in this article by Josh W Comeau.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_fastify.jpg)
Virtual Modules for Fun and Profit
Jonas Galvez shares his thoughts on Fastify DX.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_10yearsmeteor.jpg)
10 Years of Meteor
Sacha Greif shares his experience with a pioneering JavaScript framework.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_csscolumns.jpg)
Masonry Layout with Tailwind CSS Columns
Graeme Fulton shows how to create a CSS based Masonry layout using CSS columns in Tailwind
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_filters.jpg)
A complete guide to using CSS filters with SVGs
Learn about a unique and powerful set of CSS tools, SVG filters, to improve visual aspects of a website.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_searchengines.jpg)
Awesome Hacker Search Engines
A list of search engines useful during Penetration testing, vulnerability assessments, red team operations, bug bounty and more.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_html5rocks.jpg)
Farewell to HTML5Rocks
Paul Kinlan on one decade of HTML5Rocks that served invaluable content to web devs.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_protoaxel.jpg)
Ecma International approves ECMAScript 2022: What’s new?
Axel Rauschmayer explains what’s all new in ECMAScript 2022.
Read it
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_websitesroundup.jpg)
From Our Blog
Inspirational Websites Roundup #39
Inspirational websites from the past couple of weeks that shine with a brilliant design.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_makeway.jpg)
From Our Blog
Make Way Grid Effect
A little grid interaction effect where adjoining items make way to a selected one that expands.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_disco.jpg)
From Our Blog
Volumetric Light Rays with Three.js
A coding session where you’ll learn how to create volumetric light rays with fragment shaders in Three.js.
Check it out
![Collective 718 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2022/06/C718_uiroundup.jpg)
From Our Blog
UI Interactions & Animations Roundup #25
A fresh collection of the best and most creative animations from Dribbble from the past couple of weeks.
Check it out