Collective #688

Inspirational Website of the Week: Capsul’in — Aluminium
A beautifully sharp scroll experience with fantastic visuals. Our pick this week.
Get inspired

Black Friday is Coming
Any time between now and Nov 26th you can enter to win a brand new MacBook Pro. Entering is completely free and the more raffle tickets you submit the better chance you have to win!
Enter now

Flip, Invert, and Reverse
In this article, Yuan Chuan introduces 3 kinds of transformations for the SVG path commands for creating beautiful patterns.
Check it out

An Introduction to GraphQL
Tania Rascia excellent introduction to GraphQL with hands-on examples.
Check it out

Introducing “Shadow Palette Generator”
Josh W Comeau introduces a new tool to help you generate CSS box-shadow values.
Read it

RegexLearn
Learn RegEx, step by step, zero to advanced. Includes a playground and cheatsheet.
Check it out

Using Position Sticky With CSS Grid
Ahmad Shadeed explains how to make position sticky work with CSS grid items.
Read it

The Invisible JavaScript Backdoor
Wolfgang Ettlinger asks the question “What if a backdoor literally cannot be seen and thus evades detection even from thorough code reviews?”
Read it

Browserflow
Automate repetitive tasks in your browser or in the cloud. No coding required.
Check it out

Responsive navbar tutorial using HTML CSS & JS
Kevin Powell shows how to create a beautiful responsive navigation bar.
Watch it

tldraw
A tiny little drawing app with a beautiful UI.
Check it out

GEMINI
Gemini is a beautiful Lusion Monthly Experiment powered by WebGL.
Check it out

How to get started with property-based testing in JavaScript using fast-check
Learn all about property-based testing and how it helps write better tests, with less code, and greater coverage.
Check it out

Your CSS is an interface
Eric Bailey’s writes about how “human-friendly CSS is an interface that prioritizes people”.
Read it

Paper Play
Just an amazing unfolding web experience with a lovely grainy look.
Check it out

How do they make browser games nowadays?
Part 1 of a series on how browser games are made. By Alexander Saltykov.
Check it out

Rows
Spreadsheets with built-in integrations from your business apps and team support.
Check it out

A Clever Sticky Footer Technique
Chris Coyier shares Sílvio Rosa’s clever sticky footer technique.
Check it out

Saturday Night Fever
Saturday Night Fever is a WebGL experience using Three.js made by Arno Di Nunzio.
Check it out

Unocss
In case you didn’t know about it: The instant on-demand Atomic CSS engine inspired by Windi CSS, Tailwind CSS, Twind.
Check it out

ASCII Video Player
A fun ASCII video player because why not?
Check it out

Slideshow with Filter Reveal Effect – Codrops
A slideshow page layout with a filter enhanced navigation effect on the images.
Check it out