Collective #322
Inspirational Website of the Week: ouiwill
Smooth animations, great typography and a modern layout made us pick ouiwill this week.
Get inspired
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
unpkg.com/getlibs
An in-browser module loader configured to get external dependencies directly from a CDN.
Check it out
The Most Hated Online Advertising Techniques
Some interesting insight on the most disliked ads on the web.
Read it
Welder
Welder allows you to set up a Linux server with plain shell scripts.
Check it out
Flubber
A library that provides a best-guess interpolation for morphing between arbitrary shapes, resulting in a smooth animation.
Check it out
70% Repetition in Style Sheets
Some very insightful data that shows how we fail at CSS optimization. By Jens Oliver Meiert.
Read it
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
Interland
A game by Google as part of the "Be Internet Awesome" campaign to teach kids about web safety.
Play it
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
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
Redditors design worst volume sliders possible
A collection of hilarious usability nightmare volume sliders.
Check it out
Node.js Child Processes: Everything you need to know
Samer Buna explains how to use spawn(), exec(), execFile(), and fork().
Read it
Billboard.js
Billboard.js is a chart library in JavaScript, based on D3 v4+.
Check it out
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
Free Font: Monly
A nice uppercase font with four styles designed by Gatis Vilaks.
Get it
Isometric City
A fascinating demo by Nicolas Barradeau.
Check it out
An intro to web components with otters
Monica Dinculescu explains in detail what web components are and how to use Polymer.
Read it
Typechem
Typechem is a handpicked collection of font and color pairs for your inspiration.
Check it out
Free Font: Softa
A puffy soft typeface with a unqiue look designed by Justin Vin and Adrian Doe.
Get it
10 Memphis Style Patterns (EPS, PNG, JPG)
A set of super fresh and modern Memphis style patterns by PixelBuddha.
Get it
Letter Effects and Interaction Ideas
A couple of ideas for typography animations and letter (hover) effects for playful interactions.
Check it out