Collective #708

Inspirational Website of the Week: Anna Sherruble
A fun an artsy web experience that shines with great colors and a 90ies vibe.
Get inspired

Experience Building Low-code Apps
Learn how to spend less time constructing the back-end, and more time designing the front-end.
Check it out

The Front-End Developer’s Guide to the Terminal
An article covering all of the most important fundamentals to use the Terminal. By Josh W Comeau
Check it out

JavascriptDB
Create low code serverless applications: Arrays and Objects operations read and write into your database.
Check it out

The Future of CSS: CSS Toggles
Learn about an exciting new prototype for CSS Toggles in this article by Bramus Van Damme.
Read it

Loaders
Free loaders and spinners for your next project. Built with HTML, CSS and some SVG. By Griffin Johnston.
Check it out

Create a 3D car show with React Three Fiber and Three.js
A fantastic introduction to React Three Fiber where you’ll learn how to quickly setup and create a stunning 3D scene in just about 300 lines of code. By Domenico Bruzzese.
Watch it

Ektogamat ThreeJS Boilerplate
Very simple threejs boilerplate in VanillaJS to start your projects. Check out this tweet for an intro video. By Anderson Mancini.
Check it out

Persepolis Reimagined
Explore the capital of ancient Persia at its height during the reign of King Xerxes. A new immersive web experience from Getty.
Check it out

Forced colors explained: A practical guide
In this article you will learn all about forced colors, a CSS media query that when active radically changes the way your site looks, without any of your input.
Read it

SVG passthrough precision
If an SVG is imported into a design tool, then immediately exported as another SVG, how much precision is kept? What’s added, removed, or altered? Find out in this article.
Read it

A Typing Text Effect with React Hooks
Build a hook that backspaces and types out an array of words. By Ryan Finni.
Read it

WeekToDo
WeekToDo is a free minimalist weekly planner app focused on privacy. Available for Windows, Mac, Linux or online.
Check it out

Skywalker
John Beresford created this great demo of Luke Skywalker’s lightsaber.
Check it out

YouTube.js
A full-featured wrapper around YouTube’s private API providing a simple and efficient way to interact with YouTube programmatically.
Check it out

Thread on “Photorealistic Monocular 3D Reconstruction of Humans Wearing Clothing”
A very interesting thread on a pre-print by Thiemo Alldieck on some super exciting 3D geometry construction.
Check it out

Arteater
Fun offline thing: Arteater digests your hand-drawn art and returns an animated GIF you can save and share.
Check it out

Browser in the Dark: flashlights with CSS and canvas
A really interesting “flashlight” effect with CSS and Canvas by Ethan Dalool.
Check it out

Discover the IndieWeb, one blog post at a time
A website to randomly explore the IndieWeb. Simply click a button and you will be redirected to a random post from a personal blog.
Check it out

7 Web Component Tricks
Dave Rupert shares some tricks he learned when preparing his Web Components Course for Frontend Masters.
Check it out

NotepadNext
A cross-platform, reimplementation of Notepad++ available for Windows, Linux, and macOS.
Check it out

Awesome Demos Roundup #20
A hand-picked collection of the most creative and interesting web experiments from the past times.
Check it out

Sketch 015: Custom Cursor (multiple circles with filter effect)
A custom SVG cursor with multiple circles and a filter effect on hover.
Check it out

How to Add More Fun to a Game: Extending “The Aviator”
A tutorial that explores some hands-on changes of “The Aviator” game to make it more fun and engaging.
Check it out