Collective #300
![C300_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_WOTW.jpg?x86293)
Inspirational Website of the Week: Héloïse Thibodeau Architecte
Smooth interactions combined with subtle animations and an interesting layout. Our pick this week.
Get inspired![C300_Expanding](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Expanding.png?x86293)
Building performant expand & collapse animations
Some great advice on how to make expanding and collapsing animations performant. By Paul Lewis.
Read it![C300_Modal](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Modal.jpg?x86293)
No, I Don’t Want to Subscribe to Your Newsletter
Great article on the annoying anti-pattern of unprompted modal windows.
Read it![C300_ConvBot](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_ConvBot.jpg?x86293)
Building a Conversational Bot with JavaScript and Node.js
An in-depth tutorial by Brian Rinaldi where you'll learn how to implement a conversational bot.
Read it![C300_ModernJS](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_ModernJS.png?x86293)
Modern JavaScript for Ancient Web Developers
A gentle introduction to modern JavaScript for old-school backend devs. By Gina Trapani.
Read it![C300_CSSGridFirst](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_CSSGridFirst.png?x86293)
Case Study: My First Practical CSS Grid Layout
Tyler Sticka shares his experience on creating a first practical CSS Grid layout.
Read it![C300_Keyshape](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Keyshape.png?x86293)
Keyshape
Keyshape is a 2D vector graphics and animation software for Mac that lets you export SVG animations or video files.
Check it out![C300_Icons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Icons.png?x86293)
100 Bold Purple Line Icons
A set of versatile line icons in the formats SVG, EPS, AI, PNG, Sketch, IconJar. By Kirill Kazachek for Pixel Buddha.
Get it![C300_CSSGridDemo](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_CSSGridDemo.png?x86293)
A new CSS Grid demo on mozilla.org
Ali Spivak introduces a new demo that showcases the powers of CSS Grid as a layout tool.
Read it![C300_Cookit](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Cookit.png?x86293)
Free Font: Cookit
A tasty and friendly font designed by Sérgio Haruo.
Get it![C300_PrettyPrinting](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_PrettyPrinting.jpg?x86293)
Pretty Printing
Matt Gaunt writes about how to log in a developer friendly and informative way.
Read it![C300_JSPython](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_JSPython.png?x86293)
JavaScript vs. Python in 2017
An honest comparison between using JavaScript vs. Python in your project. By Michael Bolin.
Read it![C300_ML](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_ML.jpg?x86293)
Index of Best AI/Machine Learning Resources
Arun Agrahri shares a fantastic list of AI and ML resources.
Read it![C300_StyleGuide](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_StyleGuide.png?x86293)
A11Y Style Guide
A living style guide, generated from KSS documented styles, with an accessibility twist.
Check it out![C300_NLP](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_NLP.png?x86293)
4 Approaches To Natural Language Processing & Understanding
Mariya Yao writes about the challenges of NLP and making programs understand what we mean.
Read it![C300_Iterare](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Iterare.png?x86293)
iterare
ES6 Iterator library for applying multiple transformations to a collection in a single iteration.
Check it out![C300_CSSGridcurrentdesign](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_CSSGridcurrentdesign.png?x86293)
Practical CSS Grid: Adding Grid to an Existing Design
Eric Meyer shows how to simplify your current layout with the powers of CSS Grid.
Read it![C300_JSIffy](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_JSIffy.png?x86293)
JavaScript. But less iffy.
Part three of a great series of articles on reducing complexity in JavaScript code. By James Sinclair.
Read it![C300_Playcode](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Playcode.png?x86293)
Playcode
Desktop client for the Playcode Online Javascript Editor.
Check it out![C300_Polychrome](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Polychrome.png?x86293)
polychrome
A super-compact JavaScript library for parsing and manipulating colors. By Chad Donohue.
Check it out![C300_Component](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Component.png?x86293)
Writing modular CSS (Part 2)
Some more thoughts on writing modular CSS and why BEM is only part of the solution. By Zell Liew.
Read it![C300_Font](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_Font.jpg?x86293)
Free Font: Prensa
A slick compressed typeface designed by Fabio Brust.
Get it![C300_wiki](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_wiki.jpg?x86293)
cwiki
Command line Wikipedia searching by Christopher Hannah.
Check it out![C300_ExpandingBarNavigation](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/03/C300_ExpandingBarNavigation.jpg?x86293)
Expanding Bar Navigation Concept
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.
Check it out