Collective #644

Inspirational Website of the Week: Clar Development
Great colors, a smooth scroll experience and lovely animations. Our pick this week.
Get inspired
Can gaming save itself from its content moderation problems?
Twitch, Playstation, Xbox, and other big players in the gaming industry face a treacherous future — but there is room for optimism.

2020 JavaScript Rising Stars
The 5th edition of the JavaScript Rising Stars, the annual round-up of the JavaScript landscape.
Check it out
Front-End Performance Checklist
An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques.
Check it out
Bringing Spacer GIFs Back, to handle spacing elements in React and CSS
In this article, Josh W Comeau explains how he uses a Spacer component to solve common layout problems, and why it's often a great tool for the job in the modern web.
Read it
Luxury Hotel: Free HTML template
Luxury Hotel is a free, high-quality HTML template for hotels and holiday houses designed by Joefrey Mahusay.
Check it out
Ditherpunk — The article I wish I had about monochrome image dithering
Surma "fell into the rabbit hole that is monochrome image dithering" and shares everything he's learned in this great article.
Read it
@react-three/a11y
@react-three/a11y brings accessibility to WebGL, with easy to use components to enable focus indication, keyboard tab navigation, and screen reader support.
Check it out
Descript
Create podcasts, videos, and transcripts easily with this new tool.
Check it out
Stack game with Three.js and Cannon.js
A great 3D game made by Hunor Márton Borbély.
Check it out
Annual Awwwards 2020
The annual awards of the best in the web design industry. By Awwwards.
Check it out
Three-projected-material
A Three.js Material which lets you do Texture Projection on a 3D Model. By Marco Fugaro.
Check it out
Voting Autumn Fox 2020
Introducing the best websites of the web design community. Time to vote and choose the Autumn Fox 2020 seasonal award winner.
Check it out
Transmission materials
An interesting demo by Paul Henschel. Check out this tweet to learn more.
Check it out
Grids Part 2: Semantics
Part 2 in a series about ARIA grids by Sarah Higley.
Read it
Number 20
A fantastic Three.js demo by ycw.
Check it out
Seven ways to test for accessibility of your web site with browser Developer Tools
Christian Heilmann shows ways of testing a web site for accessibility issues using the browser Developer Tools.
Read it
How to Fall In Love With Single Div Illustrations
A short tutorial on how to start with single div images by Albert Walicki.
Read it
The New Array Method You'll Enjoy: array.at(index)
The array.at(index) method in JavaScript accesses array items at positive and (finally!) at negative indexes.
Read it
PixelCraft: A Pixel Art Editor
A mobile-friendly pixel art and animation creation tool (PWA) built using HTML5 Canvas.
Check it out
OpenScan
OpenScan is an open-source app that enables users to scan hard copies of documents or notes and convert it into a PDF file.
Check it out
Infinite Hyperbolic Helicoid Animation with Three.js
A coding session where you'll learn how to create an infinite shape animation of a hyperbolic helicoid using Three.js.
Check it out