Elm range syntax

Update: Elm’s list range syntax has been removed as of version 0.18. The replacement is List.range 1 2, which is if nothing else more searchable.

I recently stumbled around for more than a few moments searching for a canonical way to generate a range of numbers in Elm. I finally found a working example by searching for “haskell range syntax”.

> [1..2]
[1,2] : List number

Elm doesn’t appear to support the more advanced variants such as [1,3..20], but this definitely covers 95% of my use cases.

This is actually documented under the Lists section of the syntax docs, but there aren’t any useful words for a search to match on. Hopefully this post will save a few minutes for a few people.


Using cursors to simplify form element data binding

In React, the most often cited method of binding form elements to data is to pass the value along with an update function.

<input value={value} onChange={e => update(e.target.value)} />

This code is straightforward and explicit, but the update functions can easily become coupled to method of persisting the data change. This is especially tricky when the form element is nested a few layers deep.

Keep reading ›

Arrow functions and Javascript's syntactic baggage

I recently learned two new things about Javascript. The first discovery makes me feel silly. Somehow I missed that there is a multiline form as well as the short, single line form.

const short = n => n + 1;

const long = n => {
  return n + 1;
}

This isn’t a huge paradigm shift, but it does mean that there are far fewer cases in which the old function(){} syntax makes sense beyond familiarity.

Keep reading ›

Why is Babel's module syntax transpilation so weird?

On of the stranger rough edges that comes with using ES6 (via Babel/Webpack) revolves around the way Babel transpiles the new module syntax. When you use a named import, Babel’s transpiled output seems almost designed to cause a bit of confusion, as it assigns the imported value to a local variable with a rather munged name.

// Original code
import {foo} from 'bar'
console.log(foo)

// Babelified
var _bar = require('bar');
console.log(_bar.foo);
Keep reading ›