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