Collective #632
Publikováno: 2.11.2020
Stories for VSCode * Copying is the way design works * Native CSS Masonry Layout In CSS Grid
The post Collective #632 appeared first on Codrops.

Copying is the way design works
Matthew Ström’s in-depth exploration into why designers have such a complicated relationship with copying.

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.

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.

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.

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.

How to Build an Expandable Comment Box
Learn how to recreate the Medium comment box from scratch using React Hooks.

Voxiom.io
A WebGL game inspired by Minecraft, Fortnite, Counter Strike, and Call of Duty. Read more about it here.

Painting With the Web
Matthias Ott shares his thoughts on why designing and building for the Web should be more playful.

Setting Up Netlify Forms: In-Depth Tutorial
This tutorial shows how Netlify Forms makes it easy to handle contact forms.

Supershape
A beautiful demo where you can adjust the parameters of a shape made by Arnaud Di Nunzio.

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.

Algebraic Effects for React Developers
Reese Williams on building a mental model for React Hooks.

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.

Stories for VSCode
An extension that allows you to share Instagram-style stories from within Visual Studio Code. By Ben Awad.

How to make CSS Animations
Patrícia Silva’s interactive guide to CSS Animations.

Web scraping with JS
Pavel Prokudin shows how to use ES2020, node, and browser APIs for web scraping.

Looking deep to have a big influence
Some very interesting insights from a jQuery maintainer.

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.

Svelte rendering and SEO
How do you handle SEO with Svelte? Julien Maury explains.

Micro Frontends Pattern Comparison
Comparing build-time integration, server-side integration, run-time integration via iframes, and run-time integration via script.

How to Build HTML Forms Right: Styling
Part of a series on HTML form design patterns, common gotchas, and CSS tips.
The post Collective #632 appeared first on Codrops.