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.
![C434_WOTW](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_WOTW.jpg)
Inspirational Website of the Week: Epicurrence
A beautifully illustrated design with super smooth interactions. Our pick this week.
![C434_NW](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_NW.gif)
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.
![C434_serverless](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_serverless.jpg)
Create your own Serverless API
Sarah Drasner’s tutorial on how to build a Serverless API with Microsoft Azure.
![C434_gallery](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_gallery.jpg)
Gliding Gallery
David Khourshid and Stephen Shaw build an image gallery with beautiful transitions.
![C434_colorwheel](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_colorwheel.jpg)
Color Wheel Generator
A fantastic tool that generates a color wheel. Made by Hayk An.
![C434_ui](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_ui.jpg)
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.
![C434_photos](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_photos.jpg)
Building the Google Photos Web UI
An excellent in-depth article by Antin Harasymiv on how the Google Photos Web UI was built.
![C434_halftone](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_halftone.jpg)
Halftone Effect
Misaki Nakano’s wonderful demo of bouncy boxes with a configurable halftone effect.
![C434_3dcity](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_3dcity.jpg)
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.
![C434_gradients](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_gradients.jpg)
Grabient
A gigantic collection of well blended gradients for your next project.
![C434_checkbox](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_checkbox.jpg)
Totoro Toggle
A super cute animated toggle made by Adam Kuhn as part of a Codepen challenge.
![C434_sitedesign](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_sitedesign.jpg)
Mariano Pascual’s Portfolio
A fun site design with lots of inspiring goodies.
![C434_ai](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_ai.jpg)
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.
![C434_brutalism](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_brutalism.jpg)
Guidelines for Brutalist Web Design
David Bryant Copeland explains how Brutalism in Web Design means “raw content true to its construction”.
![C434_airdrop](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_airdrop.jpg)
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.
![C434_flexbox](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_flexbox.jpg)
The Complete Illustrated Flexbox Tutorial
A visual guide to flexbox magic by Greg Sidelnikov.
![C434_github](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_github.jpg)
Jasper
A flexible and powerful issue reader for GitHub.
![C434_font](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_font.jpg)
Free Font: Austra
A lovely uppercase brush font designed by Gatis Vilaks.
![C434_typography](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_typography.jpg)
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.
![C434_variablefonts](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_variablefonts.jpg)
Variable Fonts in Firefox DevTools
Patrick Brosset’s tip for playing with variable fonts in the Firefox DevTools (Nightly).
![C434_gridmistakes](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_gridmistakes.jpg)
9 Biggest Mistakes with CSS Grid
Jen Simmons lists the 9 biggest mistakes she sees people making when using CSS Grid.
![C434_moon](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/07/C434_moon.jpg)
Moon Grid
Ana Tudor’s coding solution to an interesting problem.
Collective #434 was written by Pedro Botelho and published on Codrops.