Collective #135

Inspirational Website of the Week: Dropbox - Guide
The guide to Dropbox for users and admins has a very interesting layout and a lovely color scheme. Our pick for this week's Collective.
Get inspired
Don't use <picture> (most of the time)
Jason Grigsby from Cloud Four explains why you won't need the <picture>
element for most responsive images.

Awesome SVG
A huge collection of useful articles and resources all around SVG. Collected by Willian Justen.
Check it out
Ready to use SVG icons for the web
Baptiste Briel's project makes using SVG icons as easy as copy and paste.
Get it
melchior.js
A Chainable Module Definition (CMD) dependency loader for JavaScript made by Dmitri Voronianski.
Check it out
Sci-Fi, Frustrations, Flash And Forms: The Typeform Story
Founder of Typeform, David Okuniev, shares his interesting story of re-imagining the form.
Check it out
A Scalable CSS Reading List
A list of things to read or watch that address these two questions: What is scalable CSS? and How do we create scalable CSS? Collected by David Clark.
Check it out
Creating a Collection of CSS3 Animated Pre-loaders
A great tutorial on how to create CSS animated preloaders by Aaron Lumsden.
Check it out
Advanced Debugging Techniques with Chrome
Learn some really useful tips on how to debug with the Chome DevTools. Paul's slides are also available here.
Watch it
Creating Your First Node.js Command-line Application
Martin Angelov shows how to create a Node.js command-line utility that users can start on their machine and make any folder available on the local network.
Check it out
Neural Network
A very impressive abstract visualization of the brain as a biological neural network.
Check it out
midnight.js
A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it. Made by Aerolab.
Check it out
draGGradients
A great tool to generate and customize multiple CSS radial gradients. By Lionel, the maker of Pixelator and CSShake.
Check it out
Mobile Web App Checklist
A mobile app checklist with very useful advice by Zach Smith and Eugene Butler.
Check it out
Learning about art, using JavaScript: Piet Mondrian
Jenn Schiffer is doing some Mondrian-inspired art using JavaScript.
Check it out
Edge: Layout Performance Panel Intro
Paul Lewis's beautifully illustrated slides for the introduction to the Edge 4 Layout Panel.
Check it out
Free Font: Mangerica Semi Bold Italic
Natanael Gama created this elegant italic font and offers the semi bold weight for free.
Check it out
Create a wood texture in Illustrator
A tutorial on how to create wood textures in Illustrator by Veerle Pieters.
Check it out
Awesome Shell
A curated list of awesome command-line frameworks, toolkits, guides and gizmos. Inspired by awesome-php and compiled by Caleb Xu.
Check it out
Apple Watch GUI (PSD)
imPekable shares this amazing PSD that comes in handy when designing Apple Watch apps.
Get it
The Ultimate Guide To iPhone Resolutions
A perfect overview of all the iPhone resolutions made by PaintCode.
Check it out
Snorpey's JavaScript Experiments
Georg Fischer's cool and creative JavaScript experiments.
Check it out
Inksplash Free Text Effects (AI)
5 Adobe Illustrator graphic styles to turn any font into a beautiful old vintage newspaper look. Made by Mats-Peter Forss for Pixel Buddha.
Get it
Free Font: Le Havre Rough Basic
A hand-crafted letterpress font by Jeremy Dooley. The basic version is for free.
Check it out
Learn Angular by Building a Gmail Clone
Build a simple email application and learn core AngularJS concepts with this guide written by Todd Motto and Thomas Hudspith-Tatham.
Check it out
GitHub Linker
An awesome Google Chrome Extension which links NPM, bower, Composer & Duo dependencies to their GitHub repository page. Made by Stefan Buck.
Check it out