Collective #251

Inspirational Website of the Week: Kettle
A beautiful semi-sketchy design with lovely details. Our pick this week.
Get inspired
Figma
Figma is the first interface design tool with real-time collaboration. It's free until the end of 2016. Read this article by Meng To for a comparison to Sketch.
Check it out
Download Anything You Want
Upgrade your designs with 7 days of free access to fully-licensed images, including infographics, backgrounds, icon sets, and more...
Check it out
Your Body Text Is Too Small
Find out why website body text should be bigger and how it can be optimized in this brilliant article by Christian Miller.
Read it
Grid layout is a much needed step-change for CSS
A fantastic article by Matt Hinchliffe on how the grid layout combined with flexbox will be the long-awaited game-changer in CSS.
Read it
Hacktoberfest
DigitalOcean partnered up with GitHub to give you the ultimate call for celebrating open-source. Join them again this year.
Check it out
Things to Watch Out for When Working with CSS 3D
Some highly useful tips and insights into working with 3D in CSS by Ana Tudor.
Check it out
Node.js debugging with Chrome DevTools (in parallel with browser JavaScript)
Serg Hospodarets shows how you can debug your browser JavaScript files and Node.js ones in the same DevTools window in parallel.
Read it
The Hand-Sketched Elemenets Kit (AI, EPS, PSD)
Some unique hand-crafted vector illustrations by Oksana Golubets available over at PixelBuddha.
Get it
Free Font: PUNC
A form-challenging typeface with an artistic touch made by The Kinetic.
Get it
A Practical Guide To Convert Your Sketches To Working Prototypes
The guide by master designer Yaroslav Zubko that will get you started with creating working prototypes from sketches.
Read it
Automating Art Direction With The Responsive Image Breakpoints Generator
Eric Portis shows how to use the Responsive Image Breakpoints Generator for creating the optimal responsive sizes and crops automatically.
Read it
Airtable
Human-friendly databases that can be used to organize anything.
Check it out
Opentest
A Chrome extension that allows for flexible and easy video creation and sharing.
Check it out
CurrencyFormatter.js
A simple, yet powerful currency formatting library in JavaScript.
Check it out
Everything You Should Know About Progressive Web Apps
A great guide by Danny Markov on PWAs and their main features.
Read it
g9.js
If you didn't stumble upon it yet: g9 is a JavaScript library for creating automatically interactive graphics. Made by bijection.
Check it out
Little Plane
Discover and download SVG stencils for your wireframes.
Check it out
How React Do?
The "dev log" by Jeff Fowler that he wrote while learning about React with some great practical insights.
Read it
Thimble
Thimble is an online code editor by Mozilla that came out of beta last year. If you haven't heard about it yet, check it out, it's an awesome editor that you can also contribute to.
Check it out
Free Font: Good Night
Erick Molina designed this delicate font with a unique hand-written touch.
Get it
Getting Started with HTTP/2: Part 2
Ben Tinsley's continuation of his guide on how to set up and work with HTTP/2.
Read it