Issue #196 (React Tools, Testing, Media)04/20/17
James Sinclair has written three excellent articles on writing less complex JavaScript, all of which I highly recommend for both beginners and advanced JavaScript developers.
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.
In the second article, he focuses on how to deal with arrays without relying heavily on loops. Again, the goal here is to make the code less complex, and he's able to accomplish this using some more elegant JavaScript techniques.
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
React DnD
A set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.
Offramp
A React library that provides simple routing for your single page applications.
React Overdrive
Has a simple component based API to transition any element to any element.
Relogic
An abstraction to encapsulate flows of logic in React applications.
react-springy-parallax
A springy, composable parallax-scroller for React.
react-loadable
A higher order component for loading components with promises.
React Select
A flexible and beautiful Select Input control for ReactJS with multi-select, autocomplete and Ajax support.
Lingui
Type-checked and intuitive way to internationalize applications in JavaScript and ReactJS using ICU message format.
Konsul
A react renderer that renders to the browser's devtools console.
React Collection Helpers
A suite of composable utility components to manipulate collections.
junctions.js
A router built from the ground up for component-based applications.
react-mde
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.
testdouble.js
A minimal test double library for test-driven development with JavaScript.
Jest
Now at version 19.x. Used by Facebook to test all JavaScript code including React applications.
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.
npm-check
Check for outdated, incorrect, and unused dependencies.
localhost.run
Instantly share your localhost environment. No download required. Run your app on port 8080 and then run a terminal command and share the URL.
TA.Gui
A tool for non-developers and business users to automate web apps.
tiny-httptest
Makes it easy to validate CORS is working, capture cookies & HTTP response headers (including etags) and reuse them for sequential tests.
console-extend
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.
|
Multimedia Tools
AnyChart
JavaScript Charts designed to be embedded and integrated
SVG for Everybody
Adds external spritemaps support to otherwise SVG-capable browsers.
nanogallery2
A JavaScript library for building beautiful, modern and high-quality image galleries for your website or your blog.
React Trend
Simple, elegant SVG-based trend graphs for React.
embedo
A simple, lightweight, and standalone social media content embed plugin for the web.
BigPicture
Super lightweight and framework-independent JavaScript image and video viewer.
blurify
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.
GSAP Player
A small, customizable YouTube-like player for GSAP (GreenSock) Timelines.
|
|
