I have released tiny-ssg, an unopinionated static site generator in Node.js with a tiny API that is friendly with hot reloaded modules (e.g. with invalidate-module).

You might have run into situations where you're calling asynchronous code inside of a callback of some framework, and you need to test their side effects. For example, you might be making API calls inside of a React component's componentDidMount() callback that will in turn call setState() when the request has completed, and you might want to assert that the component is in a certain state. This article shows techniques for testing these types of scenarios.

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.

Imagine running a Node.js process that watches the current working directory and runs a callback every time a file is updated. Furthermore, imagine if any modules required by the callback is reloaded if they have been modified. That process would look something like this:

React 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.

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.

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.

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

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.

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.

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:

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().