Collective #166

Inspirational Website of the Week: L'Avenir
A very clean and slick design with a great layout and smooth effects. Our pick this week.
Get inspired
Ramjet
Morph DOM elements from one state to another with smooth transitions with this awesome script made by Rich Harris.
Check it out
Visual Studio Code
Visual Studio Code is a free cross-platform code editor from Microsoft's Visual Studio family.
Get it
3D Folding Panel
A super creative layout with a unique folding effect by Sebastiano Guerriero from CodyHouse.
Check it out
Free Font: Didactic
A stunning free font by Tyler Finck.
Check it out
FormHack
FormHack is a hackable SASS-based form reset. Made by Ire Aderinokun.
Check it out
Waveform Playlist
Inspired by Audacity, this project is a multiple track playlist editor written completely in JavaScript using the Web Audio API.
Check it out
Vorlon.js
An open source, extensible, platform-agnostic tool by Microsoft for remotely debugging and testing your JavaScript.
Check it out
Creative Scene Generator
A free version of the Creative Scene Generator by All Design Talk consisting of 71 elements and mock-ups plus 3 professional textures for creating stationary presentations.
Check it out
Vault
Vault by HashiCorp secures, stores, and tightly controls access to tokens, passwords, certificates, API keys, and other secrets in modern computing.
Check it out
Clusterize.js
Clusterize.js is a tiny plugin to display large data sets easily.
Check it out
Why Infield Top Aligned Form Labels are Quickest to Scan
An interesting article about how to align field labels in a form to be quickly scannable.
Read it
First Aid git
A useful collection of the most frequently asked questions about git issues by Ricardo Magalhães.
Check it out
Free Font: El Capitan (OTF, AI)
A lovely hand-drawn font designed by Petr Knoll for Pixel Buddha.
Get it
User Persona Creator
Create your ideal user types with this generator by Xtensio.
Check it out
Auto-formatting JavaScript Code Style
Addy Osmani show how to use the powerful new auto-formatting feature in JSCS for automatically applying style guide rules in scripts.
Check it out
Block, Element, Modifying Your JavaScript Components
An article by Mark Dalgleish on how using BEM can help you write better JavaScript.
Read it
Very Busy Andy
What happens when your profile pic shows up on the first page of results for "profile picture" on Google image search? Apparently, a lot! :)
Check it out
Planetarium
A site that aims to provide accurate real time data and finder charts for the most interesting Solar System objects. Made with three.js.
Check it out
Studiolight
If you are a professional photographer Studiolight might be interesting to you: it's the Airbnb for photo studios.
Check it out
Squareknot (beta)
A great tool for making beautiful, branching step-by-step guides.
Check it out