Collective #322
![C322_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_WOTW.png?x86293)
Inspirational Website of the Week: ouiwill
Smooth animations, great typography and a modern layout made us pick ouiwill this week.
Get inspired![C322_Springboard](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Springboard.png?x86293)
Learn UX Design online, with an expert mentor. Build your portfolio.
Springboard's self-paced course with 1-on-1 mentorship will help you understand users better & build products they love. BONUS: enroll now and get a 1 year subscription to Lynda.com, worth $240!
Check it out![C322_Getlibs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Getlibs.png?x86293)
unpkg.com/getlibs
An in-browser module loader configured to get external dependencies directly from a CDN.
Check it out![C322_MostHatedAds](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_MostHatedAds.png?x86293)
The Most Hated Online Advertising Techniques
Some interesting insight on the most disliked ads on the web.
Read it![C322_Welder](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Welder.png?x86293)
Welder
Welder allows you to set up a Linux server with plain shell scripts.
Check it out![C322_Flubber](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Flubber.png?x86293)
Flubber
A library that provides a best-guess interpolation for morphing between arbitrary shapes, resulting in a smooth animation.
Check it out![C322_Repetition](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Repetition.png?x86293)
70% Repetition in Style Sheets
Some very insightful data that shows how we fail at CSS optimization. By Jens Oliver Meiert.
Read it![C322_Objectfit](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Objectfit.png?x86293)
Cropping Images in CSS With object-fit
A great CSS recipe for using object-fit to fit an image into a container of a certain dimension while keeping its aspect ratio.
Read it![C322_Interland](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Interland.png?x86293)
Interland
A game by Google as part of the "Be Internet Awesome" campaign to teach kids about web safety.
Play it![C322_MeetingGood](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_MeetingGood.png?x86293)
Meeting for Good: How Campers Built an Open Source Tool to Solve Time Zones
Michael D. Johnson announces a free tool for managing meetings, handling different time zones and availabilities.
Read it![C322_NeuralNetworks](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_NeuralNetworks.png?x86293)
Neural Translation of Musical Style
A great article by Iman Malik on how to build and train a Neural Network that can play music like a human.
Read it![C322_Volume](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Volume.png?x86293)
Redditors design worst volume sliders possible
A collection of hilarious usability nightmare volume sliders.
Check it out![C322_ChildProc](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_ChildProc.png?x86293)
Node.js Child Processes: Everything you need to know
Samer Buna explains how to use spawn(), exec(), execFile(), and fork().
Read it![C322_Chart](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Chart.png?x86293)
Billboard.js
Billboard.js is a chart library in JavaScript, based on D3 v4+.
Check it out![C322_FFClippath](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_FFClippath.png?x86293)
CSS Shapes, clipping and masking — and how to use them
Firefox 54 will finally support the clip-path property! Read how you can make awesome things with it.
Read it![C322_Font2](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Font2.jpg?x86293)
Free Font: Monly
A nice uppercase font with four styles designed by Gatis Vilaks.
Get it![C322_IsoCity](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_IsoCity.jpg?x86293)
Isometric City
A fascinating demo by Nicolas Barradeau.
Check it out![C322_WCotters](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_WCotters.png?x86293)
An intro to web components with otters
Monica Dinculescu explains in detail what web components are and how to use Polymer.
Read it![C322_Chemtype](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Chemtype.png?x86293)
Typechem
Typechem is a handpicked collection of font and color pairs for your inspiration.
Check it out![C322_Font](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_Font.jpg?x86293)
Free Font: Softa
A puffy soft typeface with a unqiue look designed by Justin Vin and Adrian Doe.
Get it![C322_MemphisPattern](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_MemphisPattern.jpg?x86293)
10 Memphis Style Patterns (EPS, PNG, JPG)
A set of super fresh and modern Memphis style patterns by PixelBuddha.
Get it![C322_LetterAnimations](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/06/C322_LetterAnimations.png?x86293)
Letter Effects and Interaction Ideas
A couple of ideas for typography animations and letter (hover) effects for playful interactions.
Check it out