Collective #220
![Collective220_jurgenhassler](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_jurgenhassler.png?x86293)
Inspirational Website of the Week: Jürgen Hassler
Jürgen Hasslers website has a sophisticated and modern design with the right amount of animations. Our pick this week.
Get inspired![Collective220_Segment](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_Segment.png?x86293)
Segment: Simplify your analytics
Segment makes it dead simple to collect data and send it to your favorite tools for analytics, marketing, or data warehousing.
Try it free![Collective220_webimageeffects](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_webimageeffects.png?x86293)
Web Image Effects Performance Showdown
Una Kravets compares the performance of different image effects from CSS filters to canvas and blend modes.
Read it![Collective220_richtypefaces](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_richtypefaces1.png?x86293)
The Rich (Typefaces) Get Richer
An interesting article on why only a small set of typefaces are used everywhere. By Jeremiah Shoaf.
Read it![Collective220_Kajero](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_Kajero.png?x86293)
Kajero
Easily create good-looking, responsive and interactive documents that can be edited in-line. Made by Joel Auterson.
Check it out![Collective220_plyr](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_plyr.png?x86293)
Plyr (Update)
We've reported about this great media player before in Collective 157 and now it has been updated with extremely good features.
Check it out![Collective220_starterfiles](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_starterfiles.png?x86293)
Happy Cog Starter Files 2016
Allison Wagner introduces the new and improved website starter files that are used by Happy Cog.
Check it out![Collective220_lazyloading](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_lazyloading.png?x86293)
Lazy Loading Images? Don't Rely On JavaScript!
Robin Osborne shows how to do progressively enhanced lazy loading images.
Read it![Collective220_animatedwalk](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_animatedwalk.png?x86293)
Make a Responsive Animated Walk Cycle with SVG and CSS steps()
Dudley Storey shows how to create an animated walk cycle utilizing CSS animation steps().
Check it out![Collective220_JSRefactor](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_JSRefactor.png?x86293)
Refactoring a JavaScript Video Store
Martin Fowler explores four ways of refactoring in JavaScript with practical example of a video store.
Check it out![Collective220_WebAnimationsAPI](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_WebAnimationsAPI.jpg?x86293)
Intro to the Web Animations API
A useful primer to the Web Animations API by Pawel Grzybek.
Check it out![Collective220_Cutestrap](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_Cutestrap.png?x86293)
Cutestrap
Cutestrap is a compact CSS framework by Tyler Childs made as a tiny Bootstrap alternative.
Check it out![Collective220_checkboxcss](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_checkboxcss.png?x86293)
Checkbox.css
A tiny set of CSS animations for your checkboxes.
Check it out![Collective220_csscoding](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_csscoding.png?x86293)
CSS coding techniques
Belén Albeza gives some useful tips on how to write easier-to-maintain CSS.
Read it![Collective220_CSSPurge](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_CSSPurge.png?x86293)
CSS Purge
See who's the forerunner in bloated CSS on the web and learn from insightful stats how to improve your large project stylesheets.
Check it out![Collective220_visualcenter](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_visualcenter.png?x86293)
Visual Center
A tool that will find the visual center of your images.
Check it out![Collective220_arkana](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_arkana.png?x86293)
Free Font: Arkana
An elegant font made by Maulana Creative for PixelBuddha.
Get it![Collective220_push](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_push.png?x86293)
Push
A compact, cross-browser solution for using the JavaScript Notifications API. By Tyler Nickerson.
Check it out![Collective220_universalcss](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_universalcss.png?x86293)
universal.css
Robin Bressan makes a wisecrack on the phenomenon of "utlity-classitis" with this fun repo.
Check it out![Collective220_skybird](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_skybird.png?x86293)
Free Font: Skybird Rough
A very creative wild font designed by Philip Trautmann for Freebiesbug.
Get it![Collective220_foodiconset](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_foodiconset.png?x86293)
Food & Drinks Icon Set (AI, PNG, SVG)
Some delicious food and drink icons designed by Iconshock for GraphicBurger.
Get it![Collective220_Poster](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2016/05/Collective220_Poster.jpg?x86293)
How To Create a Music Festival Poster Design in Photoshop
Chris Spooner gives a master class in Photoshop that will enable you to create an artsy poster in no time.
Check it out