Collective #402

Original Source: http://feedproxy.google.com/~r/tympanus/~3/D-yWNWKQWMY/

Inspirational Website of the Week: The Mads

Smooth animations with playful interactions made us pick “The Mads” this week.

Get inspired

Our Sponsor
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

Tabler

A well designed dashboard template with a responsive and high quality UI.

Check it out

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

Storyboarder

A great tool to create story visualizations in a quick and easy way.

Check it out

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

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

Plot Parade

A d3.js powered artsy chart generator by Krisztina Szűcs.

Check it out

Eggradients

Ready to use, trendy background gradients in the shape of eggs and with witty names 🙂

Check it out

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

LagRadar

A tool for tracing when your app drops below 60fps. By Ben Birch.

Check it out

Variable Fonts

A great tool for discovering and trying variable fonts.

Check it out

How display: contents; Works

An article by Ire Aderinokun where she explains the interesting “contents” value of the display property in CSS.

Read it

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

Mobbin

Get inspiration for the latest mobile design patterns from this curated gallery.

Check it out

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

Hotspot 3D

A great way to compare smartphones. Made with WebGL.

Check it out

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

Video Music

An arpeggiator that is controlled by the average hue from your camera. By Jake Albaugh.

Check it out

Introduction to Viewport Units

Jen Simmons shows you how CSS viewport units can be used in creative ways.

Watch it

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

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

Creating Accessible HTML: A Crash Course in ARIA Landmark Regions

Genevieve Nelson explains some useful details of ARIA Landmark Regions.

Read it

Collective #402 was written by Pedro Botelho and published on Codrops.