Collective #401
![C401_intermdn](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_intermdn.jpg?x25555)
Bringing interactive examples to MDN
Will Bamberg writes about how interactive examples were added to the MDN JavaScript and CSS reference pages.
Read it![C401_7](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_7.jpg?x25555)
A seamless way of managing work from start to finish
The Paymo App allows your small business to focus on your business - not your paperwork. Tracking your time, creating estimates and invoices is made simple using this App.
Try it free![C401_crunch](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_crunch.jpg?x25555)
Crunch
Crunch is a macOS tool for PNG image file optimization built on pngquant and zopflipng.
Check it out![C401_figma](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_figma.jpg?x25555)
Figma Platform
The Figma Platform enables apps, websites and internal tools to integrate directly with the realtime state of design in Figma from using a Web API and an open JSON format. Read more about it in this article.
Check it out![C401_bgemail](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_bgemail.jpg?x25555)
The Ultimate Guide to Background Images in Email
Jason Rodriguez explains why and how to use background images in an email campaign.
Read it![C401_flatten](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_flatten.jpg?x25555)
#SmooshGate FAQ
Mathias Bynens explains how a proposal for a JavaScript language feature called Array.prototype.flatten turned out to be Web-incompatible.
Read it![C401_ire](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_ire.jpg?x25555)
Check for support of CSS variables
Ire Aderinokun's trick to check if a browser supports CSS variables.
Check it out![C401_avatars](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_avatars.jpg?x25555)
Diversity Avatars (PNG, SVG, EPS, AI)
30 free icons from diversityavatars.com that capture the beauty and diversity of people and cultures around the world.
Get it![C401_devvideo](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_devvideo.jpg?x25555)
Improving page performance with Chrome DevTools
Umar Hansa's DevTool lesson on how to improve page performance.
Watch it![C401_homemade](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_homemade.jpg?x25555)
Free Font: Homemade
Locomotype designed this joyful brush font.
Get it![C401_pretzel](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_pretzel.jpg?x25555)
Pretzel
A macOS app that shows and searches keyboard shortcuts based on your currently focused app. By Amie Chen.
Check it out![C401_seo](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_seo.jpg?x25555)
Page Size and SEO - Are they related?
Learn how page size directly affects search rankings in this article by MachMetrics.
Read it![C401_gradientshadow](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_gradientshadow.jpg?x25555)
Gradient shadow in pure CSS
A nice button with a gradient shadow look using pseudo elements.
Check it out![C401_sm](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_sm.jpg?x25555)
Lazy Loading JavaScript Modules With ConditionerJS
Rik Schennink explains how ConditionerJS can help make websites more flexible and user-oriented.
Read it![C401_beat](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_beat.jpg?x25555)
Beat Blender
With this tool you can blend beats using machine learning and create music in a fun new way.
Check it out![C401_face](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_face.jpg?x25555)
Skin and Eye Rendering
Insane Three.js model rendering by David Lenaerts.
Check it out![C401_leaf](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_leaf.jpg?x25555)
Leaf Notes – An Interactive Web Toy
Read about Matt Deslauriers' interactive web toy that he built for the design and animation studio, Tendril.
Check it out![C401_saturn](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_saturn.jpg?x25555)
Pure CSS Saturn Hula Hooping
Jamie Coulter made a hula hooping Saturn just with CSS.
Check it out![C401_lunacy](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_lunacy.jpg?x25555)
Lunacy (Beta)
Lunacy is now in beta: a native Windows app that works offline and supports .sketch files.
Check it out![C401_tipschromedev](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_tipschromedev.jpg?x25555)
A list of cool Chrome DevTools Tips and Tricks
Some Chrome DevTools tips by Flavio Copes.
Check it out![C401_medical](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_medical.jpg?x25555)
Medical Icon Set
A free icon set with some excellent medical themed icons.
Get it![C401_aria](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_aria.jpg?x25555)
WAI-ARIA: the dark art of accessibility?
In case you missed it: an awareness-raising blog post for web developers about ARIA.
Read it![C401_altero](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C401_altero.jpg?x25555)
Free Font: Altero
Stefano Giliberti designed this display typeface with a bold look.
Get it