Node.js hot module reloading development

Imagine launching a Node.js process that watches the current working directory for file changes, and have it call a function with the updated file’s filename as an argument. Now imagine changing the implementation of that function and have new file changes execute the new version without exiting the Node.js process. Furthermore, imagine modules that were imported via require() were reloaded when their implementation changes, so that when the function executes again, it runs the new version of your modules.

Continue reading...


Addressing valueLink deprecation in React 15

React version 15 has deprecated valueLink which was a property on form elements for expressing two-way binding between the value of the form element and a state property of the component using the element. The recommended replacement is to explicitly specify the value as a prop and to supply an onChange handler instead.

Continue reading...


Creating diagrams with React, SVG, and CSS-Layout

This article shows our process at Rescale for creating diagrams using React, SVG, and Facebook's css-layout library. At Rescale, we provide a web UI for our customers to set up a license proxy server for communication between our compute nodes and their on-premise license servers. A diagram is a great way to show our users how these servers communicate with each other.

Continue reading...


Testing React and Flux applications with Karma and Webpack

At my current employer, Rescale, we were using the Jest framework by Facebook to test our React and Flux application. Jest is a simple-to-get-started testing framework with an API similar to that of Jasmine, but with automatic mocking of CommonJS modules baked in. However, like many developers have noted, we’ve found Jest to be unbearably slow when running a non-trivial test suite. For our test suite of about 60 test cases, it takes well over 10 seconds to finish! This article explains how we’ve ditched Jest in favor of Karma, Webpack, and Jasmine. The same test suite running under our new setup takes only a little under 200ms to execute in PhantomJS, after the initial Webpack bundling.

Continue reading...


Dealing with intradependent component states in React

This article addresses issues that crop up when a React component’s state properties depend on each other.

Continue reading...


Generating pastel colors for css

I was using David Merfield’s randomColor library to generate pastel colors with the call randomColor({ luminosity: 'light' }). The colors generated weren’t pastel enough for my taste; some of them were too intense, so I wanted to figure out what exactly is it about pastels that gives us that characteristic soft and soothing feeling, and how I would generate such colors.

Continue reading...


XHR authentication over SSL from a non SSL origin using CORS

You have a single page web app — built with Ember or whatever is hot these days — served over regular http but want your users to authenticate over https. You try an ajax post request to the authentication endpoint but is rejected by the browser’s same-origin policy. A good way to get around this is by specifying the Cross-origin Resource Sharing (CORS) headers in the response of your auth endpoint. They will tell the browser to allow such a cross-origin request.

Continue reading...


Clipping backgrounds using css masks

This article shows a css technique for clipping the background of a block element to expose the background underneath it. The result looks something like this:

Continue reading...


Detecting clicks outside an element the right way

If you google for “how to detect clicks outside of an element,” you’ll find that the top result on stackoverflow suggests binding a click handler on the html element that should perform the desired action, and another click handler on the element itself that calls event.stopPropagation().

Continue reading...