Collective #138

Inspirational Website of the Week: Impossible Bureau
Wonderfully smooth animations with excellent typography make this agency's website our pick of the week.
Get inspired
Hotjar Insights
Hotjar Insights is a new and easy way to understand your web and mobile site visitors. You can request free early access for the platform.
Check it out
Palettab
Palletab is a Chrome extension which uses Google fonts and ColourLovers palettes to create inspirational combinations whenever you open a new tab. Made by Tim Holman and Claudio Guglieri.
Check it out
A Guide to SVG Animations (SMIL)
A fantastic compendium of everything you need to know about SVG animations in SMIL. By Sara Soueidan.
Read it
ProgressBar.js
Beautiful and responsive progress bars with animated SVG paths. You can use built-in shapes or create your own paths. Made by Kimmo Brunfeldt.
Check it out
Lazysizes
Lazysizes is a fast and jank-free lazy loader for images (including responsive images), iframes and scripts/widgets without any dependency. Made by Alexander Farkas.
Check it out
Free Font: Curely
Konstantine Studio's cute and playful handmade decorative typeface.
Get it
Tools Tools Tools
Designer tools on acid? An epic audio-visual instrument of animated loops for designer tool actions.
Check it out
Touristic Icons (100 Icons, PNG, SVG)
A beautiful icon set related to tourism by Freepik on Smashing Magazine.
Get it
Aerial Bold: Kickstart the Planetary Search for Letterforms!
A very creative project on Kickstarter by Benedikt Groß and Joey Lee: Aerial Bold is the first map and typeface of the earth which will be composed of the earth's alphabet shapes.
Check it out
CSS-Only Solution For UI Tracking
Krasimir Tsonev's incredibly clever and interesting CSS technique for collecting statistics on a website.
Read it
Some Gotchas That Got Me
Paul Lewis' collection of issues and problematic behavior he encountered while working on his latest project.
Read it
DevTools Tips
DevTools Tips by Jeferson Koslowski is a curated collection of Chrome Developer Tools tips and tricks, updated at least once a week.
Check it out
Material Design Icons
Material Design Icons are the official open-source icons featured in the Google Material Design specification.
Get it
CSS Only iPhone 6
Fabrizio Bianchi's CSS-only iPhone 6 creation.
Check it out
PerfMap: front-end performance heatmap
A bookmarklet and Chrome extension by Mark Zeman to create a front-end performance heatmap of resources loaded in the browser using the Resource Timing API.
Check it out
The Art of Creating Simple but Flexible APIs
Jos de Jong dives into simplicity and flexibility of an API and gives some great advice on how to create a good API.
Read it
Google News Redesign Concept
George Kvasnikov demonstrates his vision of a new UX and UI for the Google News platform.
Check it out
Introducing the HTML5 “Menu” and “Menuitem” Elements
Thoriq Firdaus introduces the new HTML5 menu and menuitem elements and shows their future potential.
Check it out
Free Font: Lulo Clean Outline Bold
Lulo Clean is an interesting uppercase display font family by Yellow Design Studio. The bold outline style is for free.
Get it
TweenMax / GSAP Cheat codes list
Some useful tips and snippets for TweenMax/GSAP by Florian Morel to enhance your animation code.
Check it out