Collective #402
![C402_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_WOTW.jpg?x86293)
Inspirational Website of the Week: The Mads
Smooth animations with playful interactions made us pick "The Mads" this week.
Get inspired![C402_sponsor](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_sponsor.png?x86293)
Mobile Authentication Simplified
With 5 minutes and a few bits of config, you can build an app connected to OpenID, Active Directory, OAuth2 or SAML.
Learn more![C402_template](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_template.jpg?x86293)
Tabler
A well designed dashboard template with a responsive and high quality UI.
Check it out![C402_JS14](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_JS14.jpg?x86293)
JavaScript in 14 minutes
A fantastic little guide that will get you started with the most important JavaScript concepts in an interactive way.
Check it out![C402_storyboarder](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_storyboarder.jpg?x86293)
Storyboarder
A great tool to create story visualizations in a quick and easy way.
Check it out![C402_cssplanets](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_cssplanets.jpg?x86293)
Solar System Explorer in CSS
A fantastic demo by Jamie Coulter where you can explore the planets and moons of our solar system in pure CSS.
Check it out![C402_spatial](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_spatial.jpg?x86293)
Spatial Hash Canvas Particles
An experiment by Jack Rugile where he explores a basic spatial hash to reduce the amount of collision calculations.
Check it out![C402_plot](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_plot.jpg?x86293)
Plot Parade
A d3.js powered artsy chart generator by Krisztina Szűcs.
Check it out![C402_egg](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_egg.jpg?x86293)
Eggradients
Ready to use, trendy background gradients in the shape of eggs and with witty names :)
Check it out![C402_test](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_test.jpg?x86293)
Unit Testing in JavaScript
A tutorial by Tania Rascia where you'll learn how to perform unit tests on JavaScript with Mocha by developing a calculator app in Node.js.
Read it![C402_lagradar](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_lagradar.jpg?x86293)
LagRadar
A tool for tracing when your app drops below 60fps. By Ben Birch.
Check it out![C402_vfonts](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_vfonts.jpg?x86293)
Variable Fonts
A great tool for discovering and trying variable fonts.
Check it out![C402_contents](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_contents.jpg?x86293)
How display: contents; Works
An article by Ire Aderinokun where she explains the interesting "contents" value of the display property in CSS.
Read it![C402_cssapi](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_cssapi.jpg?x86293)
Working with the new CSS Typed Object Model
Eric Bidelman explains the new API for CSS that allows to work with values in JavaScript.
Read it![C402_mobbin](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_mobbin.jpg?x86293)
Mobbin
Get inspiration for the latest mobile design patterns from this curated gallery.
Check it out![C402_snake](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_snake.jpg?x86293)
How to create the snake highlight animation with anime-js
Mikael Ainalem's tutorial on how to create an SVG highlight line animation.
Check it out![C402_hotspot](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_hotspot.jpg?x86293)
Hotspot 3D
A great way to compare smartphones. Made with WebGL.
Check it out![C402_Gstyle](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_Gstyle.jpg?x86293)
Google publishes a JavaScript style guide. Here are some key lessons.
Daniel Simmons summarizes the most interesting and relevant rules from Google's JavaScript Style Guide.
Read it![C402_musicvideo](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_musicvideo.jpg?x86293)
Video Music
An arpeggiator that is controlled by the average hue from your camera. By Jake Albaugh.
Check it out![C402_vunits](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_vunits.jpg?x86293)
Introduction to Viewport Units
Jen Simmons shows you how CSS viewport units can be used in creative ways.
Watch it![C402_Bootstrap](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_Bootstrap.jpg?x86293)
Learn Bootstrap 4 for free
A great course with 10 interactive screencasts that will teach you Bootstrap 4. Read more about it in this article.
Check it out![C402_modules](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_modules.jpg?x86293)
ES modules: A cartoon deep-dive
Lin Clark takes a look at what problem ES modules solve and how they are different from modules in other module systems.
Read it![C402_aria](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C402_aria.jpg?x86293)
Creating Accessible HTML: A Crash Course in ARIA Landmark Regions
Genevieve Nelson explains some useful details of ARIA Landmark Regions.
Read it