Issue #196 (React Tools, Testing/Debugging, Multimedia)
In the first article, he talks about how indentation is an indicator of code complexity. His complex code vs. simple code image makes the point nicely, and it's something I probably haven't given enough thought to myself.
Finally, the third article goes over ways to make your code "less iffy", that is code that has fewer conditionals, which can add unnecessary complexity.
There might be more of such articles in the future from James, so keep an eye on that and be sure to find some time to go over those first three. There are lots of clear and practical examples demonstrating the techniques he's promoting.
Now on to this week's tools!
React Tools and Plugins
A set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.
A React library that provides simple routing for your single page applications.
Has a simple component based API to transition any element to any element.
An abstraction to encapsulate flows of logic in React applications.
A springy, composable parallax-scroller for React.
A higher order component for loading components with promises.
A flexible and beautiful Select Input control for ReactJS with multi-select, autocomplete and Ajax support.
A react renderer that renders to the browser's devtools console.
React Collection Helpers
A suite of composable utility components to manipulate collections.
A router built from the ground up for component-based applications.
A simple yet powerful and extensible Markdown-based embeddable editor for React, inspired by GitHub.
Testing and Debugging Tools
Redux Bug Reporter
A bug reporter and bug playback tool for Redux.
Deep Auto Fill Chrome
Chrome extension to auto-fill forms for easier testing.
WAVE Accessibility Extension
Firefox add-on to test pages for accessibility using the popular WAVE accessibility checker.
Check for outdated, incorrect, and unused dependencies.
Instantly share your localhost environment. No download required. Run your app on port 8080 and then run a terminal command and share the URL.
A tool for non-developers and business users to automate web apps.
Makes it easy to validate CORS is working, capture cookies & HTTP response headers (including etags) and reuse them for sequential tests.
Allows you to proxy the console.log, console.warn, and console.error methods to add in your own function calls that are executed before the original.
Webpack Lighthouse Plugin
Allows you to run Lighthouse (Google's perf metrics analyzer) from a webpack build.
SVG for Everybody
Adds external spritemaps support to otherwise SVG-capable browsers.
Simple, elegant SVG-based trend graphs for React.
A simple, lightweight, and standalone social media content embed plugin for the web.
A tiny (~2kb) library to blur pictures, with graceful downgrade support from CSS mode to Canvas mode.
DOM to Image
Generates an image from a DOM node using HTML5 Canvas.
A small, customizable YouTube-like player for GSAP (GreenSock) Timelines.