Collective #704

Inspirational Website of the Week: Land of Ride
A lovely card based design with a retro touch and excellent typography.
Get inspired

Shortcut brings the flow to your software team’s workflow.
All of your development work easily flows through Shortcut, from coding to review to release, and then to the bug fixes that inevitably follow.
Try it free

Announcing CodeSandbox Projects
Learn all about CodeSandbox Projects, a complete rewrite of CodeSandbox from the ground up.
Read it

CodeEdit App for macOS
A fantastic project in development: Building a free, open-source code editor for macOS.
Check it out

Toggle 3D
A very creative 3D toggle demo by Adir
Check it out

Lapce
Another code editor project: a modern open source code editor in Rust.
Check it out

React Arborist
A sortable, virtual, customizable tree component for React.
Check it out

Building a Heatmap Chart Component
Learn how to code a heatmap chart like those seen in Github or Google Analytics.
Check it out

How to use undocumented web APIs
Julia Evans gives some advice on how to use use “secret” undocumented APIs.
Read it

Scout
This awesome site of Scout has Bruno Simon written all over it! Fantastic Three.js work! Don’t miss his free masterclass here on Codrops.
Check it out

AgnosticUI
In case you didn’t know about it: UI components you can use across multiple projects.
Check it out

Cirrus CSS
The SCSS framework for the modern web. It’s component based, customizable, and completely open source. By Stanley Lim.
Check it out

Byte City Nights – A Bitwise Cityscape Generator
Frank Force shares his generative abstract cityscape generator.
Check it out

Pure CSS Mario 64 – 3D – No JavaScript!
CSS magician Ben Evans pulled off an incredible demo: an interactive 3D Mario with only CSS! Note that Safari can’t handle this coolness. Don’t miss the making-of video.
Check it out

When or If
Eric Meyer on the fascinating debate about how to name a conditional structure.
Check it out

Awesome TUIs
List of projects that provide terminal user interfaces.
Check it out

Instantly create a GitHub repository to take screenshots of a web page
Simon Willison shares shot-scraper-template, a GitHub repository template for taking automated screenshots of a web page.
Check it out

Maps Test Tool
Francesco Michelini shares a simple tool to quickly test his maps in a standalone environment.
Check it out

RP2040 Doom
The Making of RP2040 Doom, a fully-featured Doom port for the Raspberry Pi RP2040 microcontroller.
Check it out

Metarank
Still in the early stage of development: Metarank is a low-code Machine Learning tool that personalizes product listings, articles, recommendations, and search results.
Check it out

Yuga Labs
A really cool website with some nice pattern interactivity made by the folks of Antinomy Studio.
Check it out

Diskernet
DiskerNet (codename PROJECT 22120) is an archivist browser controller that caches everything you browse, a library server with full text search to serve your archive.
Check it out

Replicating the Interweave Shape Animation with Three.js
A coding tutorial on how to reconstruct the shape animation from the website of INTERWEAVE using Three.js.
Check it out

Letter Shuffle Animation for a Menu
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.
Check it out