Collective #718
Publikováno: 30.6.2022
Color.js * Defensive CSS * svg-path-morph * PRQL * My Wonderful HTML Email Workflow
The post Collective #718 appeared first on Codrops.

Inspirational Website of the Week: Varex
A beautiful, flowy design with lots of interesting interactions. Our pick this week.

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!

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.

Defensive CSS
An article that sheds light on why it’s important to design and write CSS defensively. By Ahmad Shadeed.

Animated Page Transitions in Next.js
Learn how to use Framer Motion to animate route changes in your Next.js project.

Single Element Loaders: The Bars
Temani Afif’s second article in a series about single element loaders.

More than honey
A beautiful interactive story on the importance of bees for biodiversity. By Lio.

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).

Exploding Particles
Michal Zalobny made this fantastic demo of a video exploding to WebGL particles. Read more about it in his tweet.

Can we enterprise CSS grid?
Hui Jing Chen shares her thoughts on large scale implementations of CSS Grid.

Dynamowaves
A fun little tool: SVG wave templates that shuffle on render.

Home — Mario Carrillo
The amazing portfolio of Mario Carillo that lets you pan through his fantastic digital artwork.

PRQL
PRQL is a modern language for transforming data — a simple, powerful, pipelined SQL replacement.

Style Queries
Una Kravets explores why and when style queries make sense to use.

Are you sure that’s a number input?
Kilian Valkhof writes how not every input that contains numbers should have an input type number.

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.

Virtual Modules for Fun and Profit
Jonas Galvez shares his thoughts on Fastify DX.

10 Years of Meteor
Sacha Greif shares his experience with a pioneering JavaScript framework.

Masonry Layout with Tailwind CSS Columns
Graeme Fulton shows how to create a CSS based Masonry layout using CSS columns in Tailwind

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.

Awesome Hacker Search Engines
A list of search engines useful during Penetration testing, vulnerability assessments, red team operations, bug bounty and more.

Farewell to HTML5Rocks
Paul Kinlan on one decade of HTML5Rocks that served invaluable content to web devs.

Ecma International approves ECMAScript 2022: What’s new?
Axel Rauschmayer explains what’s all new in ECMAScript 2022.

From Our Blog
Inspirational Websites Roundup #39
Inspirational websites from the past couple of weeks that shine with a brilliant design.

From Our Blog
Make Way Grid Effect
A little grid interaction effect where adjoining items make way to a selected one that expands.

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.

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.
The post Collective #718 appeared first on Codrops.