Collective #434
Publikováno: 19.7.2018
Building the Google Photos Web UI * Color Wheel Generator * Jasper * Totoro Toggle * Grabient * 3D City with Matter.js * Halftone Effect
Collective #434 was written by Pedro Botelho and published on Codrops.

Inspirational Website of the Week: Epicurrence
A beautifully illustrated design with super smooth interactions. Our pick this week.

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.

Create your own Serverless API
Sarah Drasner’s tutorial on how to build a Serverless API with Microsoft Azure.

Gliding Gallery
David Khourshid and Stephen Shaw build an image gallery with beautiful transitions.

Color Wheel Generator
A fantastic tool that generates a color wheel. Made by Hayk An.

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.

Building the Google Photos Web UI
An excellent in-depth article by Antin Harasymiv on how the Google Photos Web UI was built.

Halftone Effect
Misaki Nakano’s wonderful demo of bouncy boxes with a configurable halftone effect.

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.
Zippity Zappity (SVG)
Steve Gardner created this fun demo of a dynamically drawn SVG that follows your mouse or touch.

Grabient
A gigantic collection of well blended gradients for your next project.

Totoro Toggle
A super cute animated toggle made by Adam Kuhn as part of a Codepen challenge.

Mariano Pascual’s Portfolio
A fun site design with lots of inspiring goodies.

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.

Guidelines for Brutalist Web Design
David Bryant Copeland explains how Brutalism in Web Design means “raw content true to its construction”.

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.

The Complete Illustrated Flexbox Tutorial
A visual guide to flexbox magic by Greg Sidelnikov.

Jasper
A flexible and powerful issue reader for GitHub.

Free Font: Austra
A lovely uppercase brush font designed by Gatis Vilaks.

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.

Variable Fonts in Firefox DevTools
Patrick Brosset’s tip for playing with variable fonts in the Firefox DevTools (Nightly).

9 Biggest Mistakes with CSS Grid
Jen Simmons lists the 9 biggest mistakes she sees people making when using CSS Grid.

Moon Grid
Ana Tudor’s coding solution to an interesting problem.
Collective #434 was written by Pedro Botelho and published on Codrops.