The JavaScript blog.


css react flux

React Inline, FluxThis

Posted on .

React Inline

If you're looking for a solution for managing CSS in React projects, then take a look at React Inline (GitHub: martinandert/react-inline, License: MIT, npm: react-inline) by Martin Andert. It transforms inline styles into CSS code and class names, so you get a CSS file and a list of class names.

There's an example that shows how the StyleSheet.create syntax can be turned into a more succinct const styles object with a corresponding CSS file.

The project has tests (that are written with ES6 with Babel), and there's a demo site.


Josh Horwitz sent in FluxThis (GitHub: addthis/fluxthis, License: Apache 2, npm: fluxthis), a Flux framework by AddThis. It's designed to make debugging easier, and comes with immutability and performance optimisations.

For more on immutability, see the immutable stores documentation. There's also a non-immutable store known as the ObjectOrientedStore. Internally the project uses immutable, and Babel is also used so all of the internal FluxThis code is ES6.


libraries animation css node modules http

AniCollection, SuperFetch

Posted on .


I usually write CSS animations by failing to remember the syntax and then copy and pasting examples until it works the way I want. In times like that a handy directory of CSS animations is essential. AniCollection (GitHub: anicollection/anicollection, License: MIT) by Dariel Noel is big collection of CSS animations. Each animation has a preview and the associated CSS in an easy copy and pastable format.


The site itself is on GitHub, and the author has built it with Grunt, css-annotation, and js-beautify.


I actually like the request module's API, but juggling multiple requests can be awkward. SuperFetch (GitHub: luin/superfetch, License: MIT, npm: superfetch) by Zihua Li is a promise-based HTTP API that is built on request:

var fetch = require('superfetch');  
fetch.get('http://example.com').then(function(body) {  
  // when the status code begins with "2", the response body will be returned.
}).catch(function(response) {
  // otherwise, the whole response(including headers) is returned.

You can use fetch.get.option to set options, and you can chain calls to option if you like. The request and response objects can be transformed with callbacks, and the author has included unit tests written with Mocha.


ui graphics css react d3

React CSS with Radium, React D3 Components

Posted on .


Ken Wheeler sent in Radium (GitHub: FormidableLabs/radium, License: MIT, npm: radium) from Formidable Labs. Radium is a module for managing inline styles on React elements, allowing you to use CSS features that aren't usually possible with inline styles.

You can use modifier styles based on component props, media queries, and handle pseudo classes.

Radium offers a standard interface and abstractions for dealing with these problems.

When we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

Radium provides a mixin called StyleResolverMixin which will generate the styles that you want to add to a component. The style objects it uses look like this:

var radStyles = {  
  padding: '1.5em',
  border: 0,
  borderRadius: 4,
  background: 'blue',
  color: 'white'

You can then call this.buildStyles in the render method, and add the styles to the style attribute. Radium also supports modifiers -- CSS properties that are applied based on the component's props and state. Take a look at the getting started guide to learn more.

Ken also mentioned React: CSS in JS by Christopher Chedeau, who works at Facebook in the front-end infrastructure team.

React D3 Components

React 3D Components

react-d3-components (GitHub: codesuki/react-d3-components, License: MIT, npm: react-d3-components) by Neri Marschik is a library for working with D3 in React. Imagine being able to include elements like BarChart in your render methods, which generates charts based on the ReactD3.BarChart class.

You can even add tooltips and CSS classes. The project's readme includes lots of charts, but not every D3 chart is supported yet. The author is also working on animations.

I much prefer the idea of giving D3 charts some added structure with React -- usually my D3 code ends up a little bit on the less maintainable side!


animation HTML css

Declarative Animations with AniJS

Posted on .


AniJS (GitHub: anijs / anijs, License: MIT) by Dariel Noel Vila Plagado is a declarative library for CSS animations. There's a cool example that illustrates the sentence definition API, where the API calls are broken up into a form with separate fields for "if, on, do, to":


The actual markup uses data attributes to define the animation behaviour: data-anijs="if: click, on: footer, do: swing".

The generalised format for this is explained using a simple text diagram in the wiki:

Declaration - Sentence 1; ... ; Sentence n  
Sentence    - Definition, ... , Definition n  
Definition  - if | on | do | to | before | after | helper  

You can also create animations in JavaScript with AniJS.createAnimation.

The project's wiki has lots of documentation already, with details on how to write before and after functions, run animations repeatedly, and write animations entirely with JavaScript. Parts of the documentation are in Spanish, but there's enough English in the code examples and comments that I was able to understand it.


css node modules http npm

Node Roundup: 0.10.20, Asker, AbsurdJS

Posted on .

Node 0.10.20

Node 0.10.20 is out which means Node 0.10 is almost old enough to drink in most US states. How about that! This version fixes that annoying error that I seem to see when deploying to Heroku which reads: npm ERR! cb() never called.


Asker (GitHub: nodules / asker, License: MIT, npm: asker) is a http.request wrapper with retries, gzip decoding, and connection pool tuning. It was created by Phillip Kovalev for Yandex and is used on the auto.yandex.ru site.

Asker isn't really a competitor to request, but a module designed around tailoring HTTP requests to comply with service level agreements. It makes certain things easier, like body encoding.

Node's built-in HTTP connection pools are eschewed for a custom solution that allows you to prioritise services. This helps avoid situations where a critical service fails due to the exhaustion of TCP sockets. More is explained in the project's readme file, and the project includes unit tests as well.


AbsurdJS (GitHub: krasimir / absurd, License: MIT, npm: absurd) by Krasimir Tsonev is a CSS preprocessor that converts JSON to CSS:

".navigation": {
  margin: "12px 0 0 0 ",
  type: "horizontal",
  a: {
    elementstyle: "button",
    responsive: "true"

CSS isn't all that different from JSON when you think about it, but you can't easily include lumps of CSS in JavaScript files. AbsurdJS allows you to sidestep this problem by converting JSON to CSS. It includes a feature called storage that allows you to define custom properties that will be expanded to standard CSS.

There's a detailed post about how it all works here: Write Your CSS with JavaScript.