Collective #632

Copying is the way design works
Matthew Ström's in-depth exploration into why designers have such a complicated relationship with copying.
Read it
Get a Free .design Domain Name Today!
A .design domain name allows you to create a more succinct, powerful, and elegant URL and email address. Get 1-year for free today.
Get it today
Getting Audio Visualizations working with Web Audio API
A great tutorial by Dwayne Harris on how to create an audio visualization based on the Web Audio API.
Read it
pet_cursor.js
Pet cursor (Neko cursor) is a simple JavaScript file that turns your website's cursor into a cute animated pet. By Nathalie Lawhead.
Check it out
How to sanitize third-party content with vanilla JS to prevent cross-site scripting (XSS) attacks
Chris Ferdinandi takes a look at how XSS attacks work and how to prevent them.
Read it
How to Build an Expandable Comment Box
Learn how to recreate the Medium comment box from scratch using React Hooks.
Read it
Voxiom.io
A WebGL game inspired by Minecraft, Fortnite, Counter Strike, and Call of Duty. Read more about it here.
Check it out
Painting With the Web
Matthias Ott shares his thoughts on why designing and building for the Web should be more playful.
Read it
Setting Up Netlify Forms: In-Depth Tutorial
This tutorial shows how Netlify Forms makes it easy to handle contact forms.
Read it
Supershape
A beautiful demo where you can adjust the parameters of a shape made by Arnaud Di Nunzio.
Check it out
Writing a dog picture browser in ~200 lines of code
Christian Heilmann shows how he built a fun dog picture browser using the Dog.ceo API.
Read it
Algebraic Effects for React Developers
Reese Williams on building a mental model for React Hooks.
Read it
Bridging design and code with Variants
Read about Variants and updates to the Inspect panel of Figma that will help power up your design system.
Read it
Stories for VSCode
An extension that allows you to share Instagram-style stories from within Visual Studio Code. By Ben Awad.
Check it out
How to make CSS Animations
Patrícia Silva's interactive guide to CSS Animations.
Read it
Web scraping with JS
Pavel Prokudin shows how to use ES2020, node, and browser APIs for web scraping.
Read it
Looking deep to have a big influence
Some very interesting insights from a jQuery maintainer.
Read it
Native CSS Masonry Layout In CSS Grid
There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.
Read it
Svelte rendering and SEO
How do you handle SEO with Svelte? Julien Maury explains.
Read it
Micro Frontends Pattern Comparison
Comparing build-time integration, server-side integration, run-time integration via iframes, and run-time integration via script.
Read it
How to Build HTML Forms Right: Styling
Part of a series on HTML form design patterns, common gotchas, and CSS tips.
Read it