Collective #286
Inspirational Website of the Week: north2
Fresh colors, smart interactions and super cool animations made us pick north2 this week.
Get inspired
Heatmaps, Visitor Recordings, and more. All free.
Get free and unlimited visual feedback from your visitors. Hotjar allows you to see how your visitors are really using your site.
Check it out
How to Create Direction-Aware CSS-Only Hover Effects
Gabrielle Wee shows some great techniques for direction-aware CSS-only hover effects.
Read it
Lottie
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
Check it out
Typefaces
NPM packages for Open Source typefaces — making it easier to self-host webfonts.
Check it out
We don't need Google
Jaco du Plessis shows some alternatives to Google products.
Read it
How Flexbox works — explained with big, colorful, animated gifs
Scott Domes gives us an animated look at how Flexbox works.
Check it out
Luxbar
A compact CSS-only and responsive navigation bar by Balazs Saros.
Check it out
More Readable CSS with CSS Custom Properties
Some tips on how to make CSS more readable with CSS Custom Properties.
Read it
Maintaining Accessibility in a Responsive World
Some great insight into how to keep accessibility in responsive design.
Read it
Data Humanism, the Revolution will be Visualized
A fascinating piece by Giorgia Lupi on the future of data visualization
Read it
What should you think about when using Facebook?
A very interesting and eye-opening article by Vicki Boykis on how Facebook collects data.
Read it
Free Font: Cheque
A beautiful, free display font by Fontfabric, designed by Mirela Belova.
Get it
Flowchart kit for Sketch
Fully customizable and scalable vector elements with 3 pre-defined color themes for creating sitemaps and wireframes in Sketch.
Get it
Using HTTP/2 Responsibly: Adapting for Users
An informative two-part series exploring the new HTTP/2 protocol. By Jeremy Wagner.
Check it out
My Mac app icon design workflow
The very insightful process of creating awesome looking Mac app icons.
Read it
preload-webpack-plugin
A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>.
Free Font: Shkoder 1989
A 90ies inspired font with two weights. Desigend by Julian Hoxhaj and Ana Hoxha.
Check it out
"I didn’t know Sketch could do that!"
Some very useful tricks for enhancing your Sketch workflow by Jon Moore.
Read it
Alpaca Peck
An adorable Matter.js powered demo of two alpacas are in love.
Check it out