Collective #434

Inspirational Website of the Week: Epicurrence
A beautifully illustrated design with super smooth interactions. Our pick this week.
Get inspired
Northwestern's Online MS in Information Design & Strategy
Build skills to translate data into compelling visuals and narratives and learn how research and analytics can drive communication strategies and tactics.
Sign me up
Create your own Serverless API
Sarah Drasner's tutorial on how to build a Serverless API with Microsoft Azure.
Read it
Gliding Gallery
David Khourshid and Stephen Shaw build an image gallery with beautiful transitions.
Watch it
Color Wheel Generator
A fantastic tool that generates a color wheel. Made by Hayk An.
Check it out
UIengine 1.0
Read about Dennis Reimann's open sourced UIengine that started out as a tool to build pattern libraries and documentation for design systems.
Check it out
Building the Google Photos Web UI
An excellent in-depth article by Antin Harasymiv on how the Google Photos Web UI was built.
Read it
Halftone Effect
Misaki Nakano's wonderful demo of bouncy boxes with a configurable halftone effect.
Check it out
3D City with Matter.js
A demo by Michael Iriarte that lets you view a 3D city from 2D physics using matter.js. Read the tweet here.
Check it out
Zippity Zappity (SVG)
Steve Gardner created this fun demo of a dynamically drawn SVG that follows your mouse or touch.
Check it out
Grabient
A gigantic collection of well blended gradients for your next project.
Check it out
Totoro Toggle
A super cute animated toggle made by Adam Kuhn as part of a Codepen challenge.
Check it out
Mariano Pascual's Portfolio
A fun site design with lots of inspiring goodies.
Check it out
Foundations of Machine Learning
A training course that was initially delivered internally to Bloomberg's software engineers as part of their "Machine Learning EDU" initiative.
Check it out
Guidelines for Brutalist Web Design
David Bryant Copeland explains how Brutalism in Web Design means "raw content true to its construction".
Read it
Airdrop - Technical casestudy
An article by Luigi De Rosa and Thierry Michel where they explain how they created Airdrop, a Facebook Instant Game for Red Bull.
Read it
The Complete Illustrated Flexbox Tutorial
A visual guide to flexbox magic by Greg Sidelnikov.
Read it
Jasper
A flexible and powerful issue reader for GitHub.
Check it out
Free Font: Austra
A lovely uppercase brush font designed by Gatis Vilaks.
Get it
Create your design system, part 1: Typography
An article by Sebastiano Guerriero as part of a series on design systems inspired by CodyHouse's upcoming library of web components.
Read it
Variable Fonts in Firefox DevTools
Patrick Brosset's tip for playing with variable fonts in the Firefox DevTools (Nightly).
Check it out
9 Biggest Mistakes with CSS Grid
Jen Simmons lists the 9 biggest mistakes she sees people making when using CSS Grid.
Watch it
Moon Grid
Ana Tudor's coding solution to an interesting problem.
Check it out