As the amazing Evan Miller explains in his popular article on”How not to sort by average rating” the most commonly found systems for ranking stuff on the web based on user up and down-votes are seriously flawed.

A better way to calculate a useful ranking score is to get the lower bound of the Wilson score confidence interval for a Bernoulli parameter. Essentially, this approach will balance the proportion of positive ratings (upvotes) with the possibility of dealing with small sample sizes.

Evan gives a much more detailed explanation (also as to why commonly used methods tend to fail), plus…

How often have you written this line?

var args = Array.prototype.slice.call(arguments);

Well, with ES2015 Reflect.apply(target, thisArgument, argumentsList) effectively deprecates Function.prototype.apply and Function.prototype.call.

And how do you do that with array like arguments object? That’s how:

const args = Reflect.apply(Array.prototype.slice, arguments, []);

Previously I wrote about React Unit Testing with Tape, which is great for testing small, well defined components, but when working on a larger, more complex code base Tape tends to be a tat insufficient for the job.

Enter: Enzyme, Lab and Code.

• AirBnB’s Enzyme library allows for testing React Components with Shallow Rendering, Full DOM Rendering or Static Rendered Markup.
• Lab is a test utility for node & part of the excellent Hapi.js framework universe. Lab’s initial code borrowed heavily from Mocha.
• Code is Lab’s standard assertion library and was created as a direct rewrite of Chai.

Why choose…

Once in a while you need to re-require a node module and don’t want to use Node’s require cache. Why and when could this be useful? Well, for your unit tests. Assume you test a module that stores & returns values in closure dependent on an environmental variable. Let’s look at an example:

// module.js
const data = {
  development: { 
    foo: process.env.BAR || 'default'
  },
  production: {
    foo: process.env.BAR || 'default'
  }
}module.exports = (env) => {
 return data[env] || data.development
}

Assume you write your tests :

// First test
process.env.BAR = 'bar';
require('../path/to/module.js')('development')
// expect data.foo to equal 'bar'…

How do you test if an array contains a specific element? You have done this before, and I might bet you used some variation of this:

function test(arr, e) {
  if (arr.indexOf(e) === -1) {
    return false 
  } else {
    return true
  }
}

But this can be done much more concise with:

function test(arr, e) {
  return !!~arr.indexOf(e)
}

Let’s look at the pieces

Tilde ~is a unary operator. It takes the expression N to its right and returns the result of -(N+1).

~-1 // => 0
~0 // => -1
~1 // => -2

Bang ! returns the opposite of a truthy /…

Update. June, 2016: If you are working on a bigger project you might find Tape not quite up for the job, take a look at React Unit Testing with Enzyme, Lab and Code

This is a short intro into testing React applications using Tape. If you were wondering why you should be using Tape over Mocha/Chai/etc, read Eric Elliott’s excellent Medium article on the topic.

For this tutorial we’ll be using a technique known as shallow rendering for React components. It provides a convenient way to render a React element only one level deep, which means that the component’s children…

Ever get messy with with the logic for applying different styles in your React Components? I believe following approach is good practice to get a handle on this. The idea is to use a function that returns a composite style object for the target element depending on a condition passed along. Which looks something like this:

Now you can assign styles dynamically, like:

<div styles={this.getStyles('canvas', this.state.someCondition)}> </div>

Can we improve on this? Well, potentially it would make sense to reverse the logic, having true / false style distinctions as properties in the individual style objects per element. For instance:

Currently I am experimenting with React Native for Android during Hackweek at the New York Times. And of course, it wouldn’t be the New York Times if they hadn’t their own fonts and style specs that are important.

If you are like me looking to implement custom fonts using React Native for Android, good news, with commit bfeaa6a this is now possible. Let’s walk through it step by step:

• First, make sure you are up to version 0.16+ with react-native.
• Your fonts should be *.ttf or *.otf files and must be located in: /projectname/android/app/src/main/assets/fonts
  (You might have read somewhere to put…