Collective #161

Inspirational Website of the Week: De Haus
Discover cool transitions and an interesting navigation on De Haus, our website pick this week.
Get inspired
The JavaScript World Domination
Have a peek into a very interesting future of JavaScript. An article by Flaki.
Read it
Die PNG. Die!
Vincent Le Moign shows how to use vector icons in your app and finally ditch those PNG assets.
Read it
Animation Principles for the Web
Learn about the 12 principles of animation and how you can apply them when making websites. An article by Donovan Hutchinson.
Read it
Dom-Animator.JS
A JavaScript library by Tim Holman for adding animations on comment nodes within the DOM.
Check it out
Fixed Background Effect
A great scroll effect using fixed background attachment from Sebastiano Guerriero on CodyHouse.
Check it out
Cuberunner
Game5 created this superb and addictive game made with WebGL, Three.js and Shaders. Featured in Chrome Experiments.
Check it out
Building Better Interfaces with SVG
SVGs possibilities for building fantastic UIs are endless. Sara Soueidan's slides of her fantastic talk at CSSConf Australia.
Check it out
Pluralization for JavaScript
Tingan Ho shows how problematic pluralization can be and how to use ICU's MessageFormat to successfully implement working solutions.
Read it
Free Font: Badhead
A fresh looking font with a strong character designed by ianmikraz and freely available on PixelBuddha.
Get it
Primer
Primer is the CSS toolkit that powers GitHub's front-end design and now you can use it in your project.
Check it out
Create a complex diamond pattern in Illustrator
A great tutorial by Veerle Pieters on how to create a complex geometrical pattern in Adobe Illustrator.
Read it
The Book of Shaders
Patricio Gonzalez Vivo introduces you to the abstract and complex universe of Fragment Shaders. A work in progress with new chapters being released regularly.
Read it
Periscope
The next big app for sharing and watching live video broadcasts from your mobile phone. Read more about it here.
Check it out
A Primer To Background Positioning In CSS
Sara Soueidan teaches you everything you need to know about background positioning in CSS.
Check it out
React Native
Facebook open sourced React Native, a framework for building native apps.
Check it out
4 Free Handwritten Custom Fonts
Four beautiful and unique handwritten fonts by Peter Olexa.
Get it
Loaders.css
If you're still not on the SVG bandwagon for loaders and prefer HTML and CSS, then have a look at Connor Atherton's loader set.
Check it out
Whiskey Break
Evgeniy Artsebasov designed this set of Whiskey-related icons and offers them for free on The Noun Project.
Get it
Uber iOS Wireframe Kit (Sketch)
A great wireframe kit for quick prototyping from the Uber team.
Get it