Collective #198
![Collective198_recollection](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_recollection.jpg?x86293)
Inspirational Website of the Week: Because Recollection
Because Recollection will take you on a creative interactive journey through 10 years of music. Our pick this week.
Get inspired![Collective198_designwhitelies](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_designwhitelies.jpg?x86293)
Design, White Lies & Ethics
Dan Turner explores the fine line between dark patterns and telling white lies and shows how it can impact user experience.
Read it![Collective198_SantaTracker](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_SantaTracker.png?x86293)
Google's Santa Tracker
Explore a new game every day with this fun project by Google.
Check it out![Collective198_allyjs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_allyjs.jpg?x86293)
Making Accessibility Simpler, With Ally.js
An article by Rodney Rehm where he introduces Ally.js, a library for helping modern web applications with accessibility concerns.
Read it![Collective198_presentationslideshow](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_presentationslideshow.jpg?x86293)
Presentation Slideshow
A beautiful presentation template with smooth navigation by Claudia Romano from CodyHouse.
Check it out![Collective198_verticalalign](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_verticalalign.jpg?x86293)
The vertical-align Property
A very helpful guide to the vertical-align property with examples for all values by Ire Aderinokun.
Read it![Collective198_CSSVariables](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_CSSVariables.png?x86293)
Why I'm Excited About Native CSS Variables
Philip Walton shares his excitement about native CSS variables and explores some advantages over preprocessor variables.
Read it![Collective198_heartanimation](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_heartanimation.jpg?x86293)
Twitter's Heart Animation in Full CSS
Nicolas Escoffier's CSS only heart animation of the recently introduced Twitter heart button.
Check it out![Collective198_Bliss](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_Bliss.jpg?x86293)
Bliss.js
Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you. By Lea Verou.
Check it out![Collective198_Labellajs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_Labellajs.jpg?x86293)
Labella.js
Labella with help you place labels on a timeline without overlap. By Twitter.
Check it out![Collective198_BEM](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_BEM.jpg?x86293)
Battling BEM: 5 common problems and how to avoid them
David Berner highlights some common issues with using the BEM syntax and how to overcome them.
Read it![Collective198_GrenlareSlabRegular](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_GrenlareSlabRegular.png?x86293)
Free Font: Grenale Slab (Regular)
Jeremy Dooley designed this unique looking slab font and offers the regular style for free.
Get it![Collective198_PhoenixUI](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_PhoenixUI.jpg?x86293)
Phoenix UI: Vol 1 for iPhone 6 (PSD, Sketch)
Adrian Chiran shares this iOS UI kit containing 12 beautifully designed screens for both Photoshop and Sketch.
Get it![Collective198_shellarchitecture](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_shellarchitecture.jpg?x86293)
Why Progressive Web Apps Are The Future Of Web Development
Dan Rowinski shows the possibilities of a future way of implementing apps with Service Workers and a Shell Architecture.
Read it![Collective198_FreeFontNatureza](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_FreeFontNatureza.jpg?x86293)
Free Font: NATUREZA
A beautiful and creative display typeface designed by Tano Veron. Get it for a social post.
Get it![Collective198_TeamGrid](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_TeamGrid.png?x86293)
TeamGrid
A new take on project management for teams with a beautiful UI.
Check it out![Collective198_Microm](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_Microm.png?x86293)
Microm
A library for converting browser microphone input to MP3 in JavaScript. By Hector Leon Zarco Garcia.
Check it out![Collective198_labels](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_labels.jpg?x86293)
A quick reminder on how and why to use labels in forms to make them more accessible
Christian Heilmann shows how to use the label element for optimized accessibility.
Read it![Collective198_MusicIcons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_MusicIcons.png?x86293)
Music Icons (AI, Sketch, SVG)
A great looking set of music related icons made by Davide Pacilio.
Get it![Collective198_FractalGears](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/12/Collective198_FractalGears.png?x86293)
Fractal Gears
A cool experiment with gear mechanisms by @liabru.
Check it out