Static site generation and live reloading with React and Node.js

This is a high level overview of how I've implemented the static site generator with live reloading for this blog using React and Node.js APIs. It does not use Webpack, Browserify, or any other bundling system which I think is overkill for static site generation.

Continue reading...


Node.js hot module reloading development

Imagine running a Node.js process that watches the current working directory for file changes, and have it pass the filename of any updated files to a callback. Now imagine changing the implementation of that callback and have subsequent file updates execute the new callback without exiting the Node.js process. Furthermore, imagine calls to require() always load the newest version of the required module (usually they’re cached), so that when the callback executes again, it has the newest version of the 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...