Collective #166
![Collective166_avenirclinic](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_avenirclinic.png?x86293)
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![Collective166_Ramjet](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Ramjet.png?x86293)
Ramjet
Morph DOM elements from one state to another with smooth transitions with this awesome script made by Rich Harris.
Check it out![Collective166_VisualStudioCode](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_VisualStudioCode.png?x86293)
Visual Studio Code
Visual Studio Code is a free cross-platform code editor from Microsoft's Visual Studio family.
Get it![Collective166_3dfoldingpanel](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_3dfoldingpanel.png?x86293)
3D Folding Panel
A super creative layout with a unique folding effect by Sebastiano Guerriero from CodyHouse.
Check it out![Collective166_Didactic](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Didactic.png?x86293)
Free Font: Didactic
A stunning free font by Tyler Finck.
Check it out![Collective166_FormHack](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_FormHack.png?x86293)
FormHack
FormHack is a hackable SASS-based form reset. Made by Ire Aderinokun.
Check it out![Collective166_Waveform](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Waveform.png?x86293)
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![Collective166_Vorlonsjs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Vorlonsjs.png?x86293)
Vorlon.js
An open source, extensible, platform-agnostic tool by Microsoft for remotely debugging and testing your JavaScript.
Check it out![Collective166_SceneGenerator](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_SceneGenerator.jpg?x86293)
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![Collective166_Vault](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Vault.png?x86293)
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![Collective166_Clusterize](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Clusterize.jpg?x86293)
Clusterize.js
Clusterize.js is a tiny plugin to display large data sets easily.
Check it out![Collective166_FormLabel](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_FormLabel.png?x86293)
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![Collective166_FirstAidGit](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_FirstAidGit.png?x86293)
First Aid git
A useful collection of the most frequently asked questions about git issues by Ricardo Magalhães.
Check it out![Collective166_elcapitan](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_elcapitan.png?x86293)
Free Font: El Capitan (OTF, AI)
A lovely hand-drawn font designed by Petr Knoll for Pixel Buddha.
Get it![Collective166_PersonaGenerator](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_PersonaGenerator.png?x86293)
User Persona Creator
Create your ideal user types with this generator by Xtensio.
Check it out![Collective166_JSCS](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_JSCS.png?x86293)
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![Collective166_BEMforJS](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_BEMforJS.jpg?x86293)
Block, Element, Modifying Your JavaScript Components
An article by Mark Dalgleish on how using BEM can help you write better JavaScript.
Read it![Collective166_VeryBusyAndy](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_VeryBusyAndy.jpg?x86293)
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![Collective166_Planetarium](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Planetarium.png?x86293)
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![Collective166_Studiolight](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Studiolight.jpg?x86293)
Studiolight
If you are a professional photographer Studiolight might be interesting to you: it's the Airbnb for photo studios.
Check it out![Collective166_Squarenot](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/05/Collective166_Squarenot.jpg?x86293)
Squareknot (beta)
A great tool for making beautiful, branching step-by-step guides.
Check it out