Collective #288

Inspirational Website of the Week: Thaddé Méneur
An interesting slideshow and some smooth effects combined with some nice typography. Our pick this week.
Get inspired
LayerSnap! Markup-based SVG Animations
LayerSnap is a great open-source tool for a more user-friendly, markup-based approach to configuring SVG animations.
Check it out
CSSRooster
CSSRooster takes your HTML code as input, including CSS styles, and then writes class names for your HTML tags by analyzing the patterns hidden in your code.
Check it out
Bridging CSS and JS with Custom Properties
Learn some best practices around using CSS Custom Properties as a bridge between CSS and JavaScript.
Read it
JavaScript Start-up Performance
A fantastic article by Addy Osmani on start-up times and performance of JavaScript in the browser.
Read it
Mnemonist
A curated collection of data structures for the JavaScript language. By Guillaume Plique.
Check it out
The Google Analytics Setup I Use on Every Site I Build
Philip Walton shares his "boilerplate" analytics.js implementation and shows how to use some interesting features.
Read it
An Introduction to the Reduced Motion Media Query
Eric Bailey writes about the new and very interesting Reduced Motion Media Query.
Read it
Preparing and Exporting SVG Icons in Sketch
A great guide on how to prepare and export icons for the Web, iOS and Android using Sketch. By Anthony Collurafici.
Read it
JavaScript without Loops
Learn how control structures like loops introduce complexity and what to do about it. By James Sinclair.
Read it
Free Font: Noway
Atipo's refreshing new font family with a unique touch.
Get it
Rings Navigation Concept
A cool menu demo by Bennett Feely.
Check it out
extensions.af
If you love Chrome Exensions but not the store, then this might be interesting.
Check it out
CSS Property Syntax Cheatsheet
Decipher the CSS property syntax in the specs with this helpful cheat sheet. Especially useful for understanding the new CSS Grid module. By Chen Hui Jing.
Check it out
WebPack is not the only way
Learn about FuseBox, a new generation bundler and module loader for complex project requirements.
Read it
TopoTopo
An awesome open-source platform that let's you search any geographic location and watch the terrain form into a physical model.
Check it out
The Insecure Designer
A delightful article on the two-sided nature of perfectionism and a designer's insecurities.
Read it
Code Smells in CSS Revisited
Harry Roberts revisits his 'Code Smells in CSS' article and adds some helpful fresh insights.
Read it
Status Page
Netlify gives you a free status page for your project.
Check it out
Free Font: Realla
A wonderfully artistic font designed by Gehan Magee.
Get it
Inspiration for Search UI Effects
A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.
Check it out