Collective #220

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
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
Web Image Effects Performance Showdown
Una Kravets compares the performance of different image effects from CSS filters to canvas and blend modes.
Read it
The Rich (Typefaces) Get Richer
An interesting article on why only a small set of typefaces are used everywhere. By Jeremiah Shoaf.
Read it
Kajero
Easily create good-looking, responsive and interactive documents that can be edited in-line. Made by Joel Auterson.
Check it out
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
Happy Cog Starter Files 2016
Allison Wagner introduces the new and improved website starter files that are used by Happy Cog.
Check it out
Lazy Loading Images? Don't Rely On JavaScript!
Robin Osborne shows how to do progressively enhanced lazy loading images.
Read it
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
Refactoring a JavaScript Video Store
Martin Fowler explores four ways of refactoring in JavaScript with practical example of a video store.
Check it out
Intro to the Web Animations API
A useful primer to the Web Animations API by Pawel Grzybek.
Check it out
Cutestrap
Cutestrap is a compact CSS framework by Tyler Childs made as a tiny Bootstrap alternative.
Check it out
Checkbox.css
A tiny set of CSS animations for your checkboxes.
Check it out
CSS coding techniques
Belén Albeza gives some useful tips on how to write easier-to-maintain CSS.
Read it
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
Visual Center
A tool that will find the visual center of your images.
Check it out
Free Font: Arkana
An elegant font made by Maulana Creative for PixelBuddha.
Get it
Push
A compact, cross-browser solution for using the JavaScript Notifications API. By Tyler Nickerson.
Check it out
universal.css
Robin Bressan makes a wisecrack on the phenomenon of "utlity-classitis" with this fun repo.
Check it out
Free Font: Skybird Rough
A very creative wild font designed by Philip Trautmann for Freebiesbug.
Get it
Food & Drinks Icon Set (AI, PNG, SVG)
Some delicious food and drink icons designed by Iconshock for GraphicBurger.
Get it
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