Collective #400
![C400_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_WOTW.jpg?x86293)
Inspirational Website of the Week: Mustafa Çelik
Beautiful liquid effects and great typography. Our pick this week.
Get inspired![C400_NW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_NW.jpg?x86293)
Northwestern's Online MS in Information Design & Strategy
Build skills to translate data into compelling visuals and narratives and learn how research and analytics can drive communication strategies and tactics.
Find out more![C400_optbuild](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_optbuild.jpg?x86293)
Machine Learning-Driven Bundling. The Future of JavaScript Tooling.
Learn about the early implementations of zero-configuration build tools which are powered by machine learning to create the most optimal build. By Minko Gechev.
Read it![C400_graphqlcss](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_graphqlcss.jpg?x86293)
GraphQL CSS
A blazing fast CSS-in-GQL library that converts GraphQL queries into styles for your components.
Check it out![C400_amp](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_amp.jpg?x86293)
How Fast Is Amp Really?
Tim Kadlec takes a closer look at how fast AMPs really are considering different contexts.
Check it out![C400_midi](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_midi.jpg?x86293)
Getting Started With The Web MIDI API
Peter Anglea shows how to interact with digital musical instruments using the Web MIDI API.
Read it![C400_layoutanim](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_layoutanim.jpg?x86293)
Behind the Illusions - Impossibly High-Performance Layout Animations
David Khourshid's fantastic presention on the tricky art of performant layout animations.
Check it out![C400_loop](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_loop.jpg?x86293)
Looperepool
Jaume Sanchez implemented this great tool for creating looperinos.
Check it out![C400_soundscapes](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_soundscapes.jpg?x86293)
Imaginary Soundscape
A great project: a web-based sound installation for creating soundscapes for Google Street View can now be tried online with any image.
Check it out![C400_week](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_week-1.jpg?x86293)
Design Your Week
David Khourshid's smooth implementation of Gal Shir's popular Dribbble shot.
Check it out![C400_reacttest](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_reacttest.jpg?x86293)
React-testing-library
Simple and complete React DOM testing utilities that encourage good testing practices.
Check it out![C400_motion](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_motion.jpg?x86293)
Flow Field
A WebGL powered motion field webcam based particles system made by Dorian Lods.
Check it out![C400_research](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_research.jpg?x86293)
Designing for Research
Jeremy Wagner shares how he designed and developed an image quality survey which now goes into round two.
Read it![C400_pathslider](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_pathslider.jpg?x86293)
Animating More Elements Along SVG Paths with JavaScript (Part 2)
Luis Manuel shows how to do more awesome animations with the PathSlider library.
Read it![C400_css](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_css.jpg?x86293)
CSS: The bad bits (and how to avoid them)
Joe Forshaw shares his thoughts on what's bad in CSS and how to keep sane when writing it.
Read it![C400_tram](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_tram.jpg?x86293)
From Design to Code: Creating and Animating Images with CSS
José Rosário shows how he created an animated HTML/CSS tram.
Read it![C400_caramella](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_caramella.jpg?x86293)
Caramella
In case you missed it: a new kind of blogging platform with over 80 styled templates for individual blog post looks.
Check it out![C400_filam](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_filam.jpg?x86293)
Imaging-heap
A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios.
Check it out![C400_expl](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_expl.jpg?x86293)
Mesh Line Explosion
A fantastic Three.js demo by Jack Rugile.
Check it out![C400_deck](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_deck.jpg?x86293)
Deck: A Free Card-Style UI Kit
A cross-platform UI kit for designing card-based interfaces and media websites. By the team of InVision.
Check it out![C400_vuecookbook](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_vuecookbook.jpg?x86293)
Vue.js: The Cookbook
The beta release of a new, practical section of the Vue.js documentation.
Check it out![C400_mario](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_mario.jpg?x86293)
Super Mario World made only with CSS gradients
Alcides Queiroz shows how he created a short Super Mario World animation without any images or JavaScript.
Read it![C400_invision](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_invision.jpg?x86293)
The Design Genome Project
InVision's new project to find out what powers great design.
Check it out![C400_font](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/03/C400_font.jpg?x86293)
Free Font: Particle
A clean and minimalistic font designed by Jeremy Vessey.
Get it