Collective #198

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
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
Google's Santa Tracker
Explore a new game every day with this fun project by Google.
Check it out
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
Presentation Slideshow
A beautiful presentation template with smooth navigation by Claudia Romano from CodyHouse.
Check it out
The vertical-align Property
A very helpful guide to the vertical-align property with examples for all values by Ire Aderinokun.
Read it
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
Twitter's Heart Animation in Full CSS
Nicolas Escoffier's CSS only heart animation of the recently introduced Twitter heart button.
Check it out
Bliss.js
Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you. By Lea Verou.
Check it out
Labella.js
Labella with help you place labels on a timeline without overlap. By Twitter.
Check it out
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
Free Font: Grenale Slab (Regular)
Jeremy Dooley designed this unique looking slab font and offers the regular style for free.
Get it
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
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
Free Font: NATUREZA
A beautiful and creative display typeface designed by Tano Veron. Get it for a social post.
Get it
TeamGrid
A new take on project management for teams with a beautiful UI.
Check it out
Microm
A library for converting browser microphone input to MP3 in JavaScript. By Hector Leon Zarco Garcia.
Check it out
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
Music Icons (AI, Sketch, SVG)
A great looking set of music related icons made by Davide Pacilio.
Get it
Fractal Gears
A cool experiment with gear mechanisms by @liabru.
Check it out