Collective #557

How to design delightful dark themes
In this article Teresa Man shares how to design dark themes that are readable, balanced, and delightful.
Read it
roughViz
A reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.
Check it out
You've never built a WordPress website like this before
Divi is more than just a WordPress theme, it's a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.
Try it
Spotify TUI
A Spotify client for the terminal written in Rust. By Alexander Keliris.
Check it out
Design System Playground
Play with typography, colors and themeable components in your design system. By John Polacek.
Check it out
Mini Tokyo 3D
A real-time 3D digital map of Tokyo's public transport system. By Akihiko Kusanagi.
Check it out
The wondrous world of CSS counters
An in-depth look at CSS counters, how they've expanded with better support for internationalization and how it's possible to implement a pure CSS Fizzbuzz solution with them.
Read it
GitSheet
GitSheet is a simple git cheat sheet reference for common git commands.
Check it out
100% CSS Mario Kart
Stephen Cook creates an interactive version of Mario Kart using only CSS.
Watch it
Dynamic CSS Components Without JavaScript
Learn how pure CSS components are achievable with custom properties.
Read it
Clip-path converter
A very useful tool if you want to prepare SVG paths to be used with CSS clip-path. By Yoksel.
Check it out
CSS is Awesome - Variable fonts Edition
A fun demo by Mandy Michael that shows how variable fonts can fix CSS 😜
Check it out
The “P” in Progressive Enhancement stands for “Pragmatism”
Andy Bell explains progressive enhancement in a more practical way.
Read it
Advanced JavaScript Node.js Promises chaining collections
Learn how to use advanced features of JavaScript Promises using Node.js with this programming tutorial.
Read it
Intro to SVG for React Developers
A tutorial by Daniel Matarazzo where you'll build a colorful spinning loading indicator as a React component, using some very simple SVG markup.
Read it
The W3C At Twenty-Five
In this article, Rachel Andrew explains how the W3C works and shares her “Web Story” to explain why the Web Standards process is so vitally important for everyone to have an open web platform where they can share their stories and build awesome things for the web together.
Read it
The Open Book Project
Joey Castillo is on a mission to create a simple book reading device that anyone with a soldering iron can build for themselves.
Check it out
Able
Able is a bootstrapped community for people to read and write about software.
Check it out
Patterns for Practical CSS Custom Properties Use
Tyler Childs shows some examples of patterns for Custom Properties from his Cutestrap framework.
Read it
1 element card background patterns (see description)
A pure CSS technique for creating patterns that doesn't use SVGs or images other than CSS gradients. By Ana Tudor.
Check it out
The SQL Murder Mystery
Use SQL queries to solve the murder mystery. Suitable for beginners or experienced SQL sleuths.
Check it out
js13kGames Winners
Check out the winners of this year's Js13kGames competition.
Check it out
Blocke: Social web UI kit
A free social UI kit from Blocke that includes 3 ready-made screens with 30+ components that might come in handy for building a social feed.
Check it out
Create Text in Three.js with Three-bmfont-text
A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders.
Read it