Collective #342
![C342_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_WOTW.jpg?x25555)
Inspirational Website of the Week: Formigari
An elegant design with great details and modern effects. Our pick this week.
Get inspired![C342_Sencha](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Sencha.jpg?x25555)
Add Powerful UI Components to your React Apps with ExtReact
Learn how to build data-intensive, cross-platform web apps leveraging more than 115 professionally tested and supported Sencha components and React.
Try it for free![C342_ChromeDevTools](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_ChromeDevTools.jpg?x25555)
Increase your web development skill-set: 150 animated tips on Chrome DevTools
Umar Hansa shares some of his over 150 animated gifs which showcase how to use Chrome DevTools.
Check it out![C342_Focus](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Focus.jpg?x25555)
The Lightweight Browser: Firefox Focus Does Less, Which Is So Much More
Read about Firefox Focus, the new private browser for iOS and Android, which is aimed to be simple and lightweight.
Read it![C342_Graveyard](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Graveyard.jpg?x25555)
Product Graveyard
A final resting place for deceased products.
Check it out![C342_InputMask](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_InputMask.jpg?x25555)
JavaScript Events Unmasked: How to Create an Input Mask for Mobile
Learn how to tackle the challenges that come with building an input mask for mobile.
Read it![C342_PaintAPI](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_PaintAPI.jpg?x25555)
Using the Paint Timing API
The Paint Timing API arrived in Chrome 60 and Jeremy Wagner shows how to use it to capture metrics on when a page begins painting.
Read it![C342_AWSCogito](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_AWSCogito.jpg?x25555)
User Authentication For Web And iOS Apps With AWS Cognito (Part 1)
David Tucker shows how to use Cognito, a tool for enabling users to sign up for and sign into web and mobile applications.
Read it![C342_Mindmap](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Mindmap.jpg?x25555)
Machine Learning Mindmap / Cheatsheet
A mind map summarizing Machine Learning concepts, from Data Analysis to Deep Learning.
Check it out![C342_Fuzzysort](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Fuzzysort.jpg?x25555)
Fuzzysort
Fuzzysort is a JavaScript library for fast SublimeText-like fuzzy search.
Check it out![C342_NeuralNetwork](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_NeuralNetwork.jpg?x25555)
How to create a Neural Network in JavaScript in only 30 lines of code
A tutorial by Per Harald Borgen where he shows how to create and train a neural network using Synaptic.js, which allows you to do deep learning in Node.js and the browser.
Read it![C342_Tree](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Tree.jpg?x25555)
Towards a JavaScript Binary AST
David Teller introduces the JavaScript Binary AST, an ongoing project for faster web page loading.
Read it![C342_React](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_React.jpg?x25555)
All the fundamental React.js concepts, jammed into this single Medium article
Samer Buna's practical introduction to the fundamentals of React.js for those who are already familiar with JavaScript and know the basics of the DOM API.
Read it![C342_Vim](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Vim.jpg?x25555)
Vim isn't that scary. Here are 5 free resources you can use to learn it.
Fatos Morina shares some great resources for getting started with Vim.
Read it![C342_Compiler](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Compiler.jpg?x25555)
An Intro to Compilers
Learn about what a complier does in this introduction by Nicole Orchard.
Read it![C342_Puppeteer](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Puppeteer.jpg?x25555)
Puppeteer
Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.
Check it out![C342_Songbird](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Songbird.jpg?x25555)
Songbird: Spatial Audio Encoding on the Web
Songbird is a real-time spatial audio encoding JavaScript library for WebAudio applications by Google.
Check it out![C342_DesktopDesignKit](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_DesktopDesignKit.jpg?x25555)
Desktop Kit
A Sketch template of macOS UI elements from Facebook Design.
Get it![C342_Animation](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Animation.jpg?x25555)
Integrating Animation into a Design System
Alla Kholmatova writes about the challenges of creating a cohesive system and ensuring consistency when it comes to integrating animations into a design.
Read it![C342_Gulp](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Gulp.jpg?x25555)
A Gulp Workflow for Frontend Development Automation
A tutorial by Andrew Welch where he shows how to use Gulp for frontend development.
Read it![C342_Gradient](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_Gradient.jpg?x25555)
Chunky Gradient Along SVG Path
An interesting animated chunky gradient that uses stroke-dasharray and stroke-dashoffset.
Check it out![C342_HorTree](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/08/C342_HorTree.jpg?x25555)
Draw a horizontal tree using CSS pseudo elements
Check out some pseudo element trickery for creating a horizontal tree structure in CSS.
Read it