Collective #532

Visualizing Risk: Remotely Triggered Earthquakes
A really amazing project by Will Chase that he created for the VizRisk challenge.
Read it
Be Theme: 450+ pre-built websites you can "steal"
If you want gorgeous visuals AND smooth UX, Be Theme offers you 450+ pre-built websites that you can easily customize. You can have your next A-Z website in less than 4 hours.
Browse the website gallery
Modern Script Loading
Jason Miller shows some options for serving the right code to the right browsers efficiently.
Read it
Color Inputs: A Deep Dive into Cross-Browser Differences
In this article Ana Tudor takes a look at the structure inside the color input element and shows how to tackle cross-browser inconsistencies.
Read it
Recreating the Fool's Mate chess move with CSS Grid
In the excitement of the ability to animate rows and columns when using CSS Grid, Hui Jing Chen created an interesting chess demo.
Read it
Listmonk
A self-hosted newsletter and a mailing list manager made by Kailash Nadh.
Check it out
Screenreader-aware Design Tools
An interesting article on the screenreader accessibility of components by the team of SourceNote.
Read it
Framer Motion
An open source React library to power production-ready animations.
Check it out
Accessible CSS Generated Content
Eric Eggert shows how to ensure that CSS generated content stays accessible on the example of Andy Clarke's layered text styles.
Read it
Debugging CSS Grid: Auto-flow, Order and Item Placement
In this third part of a series, Michelle Barker takes a look at the different placement methods in CSS Grid and how to use auto-flow to avoid having to explicitly place every item.
Read it
Blurry
A great project that simulates depth of field with particles on a shader. Also, check out this demo of a blurry cat.
Check it out
3D Wireframes in SVG
Philip Rideout shows how to use Python to generate amazing 3D SVGs.
Read it
Foliate
A simple and modern eBook viewer based on Epub.js.
Check it out
3D Particle Tornado
Jon Kantner created this cool 3D tornado that you can configure.
Check it out
Pro tip: type-check your JavaScript the easy way!
Paul Lewis explains how you can use the TypeScript compiler to check the types on your JavaScript.
Watch it
Everything You Need To Know About CSS Margins
Thought you knew everything there's to know about CSS margins? Rachel Andrew will show you that there's more to a margin than you might think.
Read it
BaseDash
BaseDash lets you manage and visualize your databases with a collaborative, cloud-based tool.
Check it out
A worrying change in Open Source perception
Chris Heilmann is worried about how Open Source is getting a reputation for being arrogant, aggressive and hard to get into.
Read it
WebGL month
Andrei Lesnitsky shares one WebGL tutorial per day for the whole month.
Check it out
API Spreadsheets
Convert your spreadsheets and CSV files to an API link with this online tool.
Check it out
CSS Grid Is Not a Replacement for Flexbox
Robert Cooper shows how there are some scenarios in which you can only style a layout using Flexbox.
Read it
Pure CSS Katy
Some artistic CSS work by Malaika Ishtiaq.
Check it out