Collective #383
Inspirational Website of the Week: Heeds
A colorful, smart design with some perfectly employed animations made us pick Heeds this week.
Get inspired
Learn JavaScript for Free with Fullstack Academy
Level up your design career at Fullstack Academy. Bring your own designs to life, manage developers, and become a more valuable hire.
Enroll for free today
Paper Programs
Hello from the future: Paper Programs is an incredible browser-based system for running JavaScript programs on pieces of paper. By Jan Paul Posma.
Check it out
Subverted Design
Joel Califa writes about the importance of the shifting role of the designer and why they need to stand up for users.
Read it
Crooked Style Sheets
Some insane methods for gathering basic user information with CSS.
Check it out
Google, You Creepy Sonofabitch
Brad Frost writes about the sneaky way Google seems to tracks us via our smartphones.
Read it
Using page speed in mobile search ranking
Read about the new "Speed Update" of Google that will affect slow sites for mobile search.
Read it
Simplex Flower Generator
A three.js powered demo where you can generate flowers with simplex noise. By Jack Rugile.
Check it out
Creating a Vue.js Serverless Checkout Form
In this four part tutorial, Sarah Drasner shows how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application.
Read it
How Big Is That Box? Understanding Sizing In CSS Layout
Rachel Andrew demystifies sizing in Grid by explaining some interesting things from the specification.
Read it
D3 Zoom: The Missing Manual
Learn how to zoom and pan in your D3 data visualizations using SVG and Canvas. By Lars Verspohl.
Read it
"display: contents" is coming
Read about display: contents and why its such an interesting new value. By Manuel Rego Casasnovas.
Help Test New Firefox DevTools for CSS Shapes, Clip Path, Flexbox and Grid
Jen Simmons encourages devs and designers to check out the new set of tools in Firefox and provide feedback.
Watch it
Laws of UX
Laws of UX is a collection of the key maxims that designers should consider when building user interfaces. By Jon Yablonski.
Check it out
Chamfer.js
Add chamfered corners to any HTML element with this little script.
Check it out
The Brutal Lifecycle of JavaScript Frameworks
Ian Allen takes a look at the framework life cycles of the most popular JavaScript frameworks.
Check it out
Jelly
A fantastic wobbly Physics simulation by Adam Brooks.
Check it out
Monsters for Sketch 1.1
With this Sketch template you can build your own little monster army.
Get it
Silhouette zoom slideshow
A slideshow that uses silhouette transitions. Made by Mikael Ainalem.
Check it out
Triangulart
A Vue.js powered graphic editor for triangle vector art. Read more about it in this article.
Check it out
Adele
A repository of publicly available design systems and pattern libraries.
Check it out
Genact
With this fun activity generator you can pretend to be busy or waiting for your computer when you should actually be doing real work.
Check it out
Free Font: Kid A
Inspired by the album of Radiohead, Nicolas Bacile designed this unique looking display font.
Get it
CSS Naming Conventions that Will Save You Hours of Debugging
Ohans Emmanuel explains the BEM naming convention in an easy to understand way.
Read it
Free Font: Fixer
A free typeface with 7 weights to create individual layered looks. Designed by William Suckling.
Get it
Freebie: "Scribbler" Website Template (HTML, Sketch)
A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.
Check it out