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