Text

· · to read

In esnext, you can use array destructuring to capture the first elements of an array, as well as the rest:

const [a, b, ...c] = [1, 2, 3, 4, 5]
console.log([a, b, c]) // [1, 2, [3, 4, 5]]

You can’t, however, put the rest operator at the start or in the middle of the destructuring expression. It must be at the end.

This is a bummer. CoffeeScript supports having a rest argument in the middle of a destructuring expression. Since esnext supports nested array destructuring, this limitation can at least be worked around concisely.

To implement getting the first two, the last two, and the middle, I can define a function leftrest which takes an array [l1, l2, l3..., r1, r2] and a number of rightmost arguments to expect, and returns an array with the first element containing the left arguments, followed by the rightmost arguments ([[l1, l2, l3...], r1, r2]):

const leftrest = (a, n) => {
  const rest = [...a]
  return [rest, ...rest.splice(-n)]
}
const [[a, b, ...c], d, e] = leftrest([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 2)
console.log([a, b, c, d, e])
// [ 1, 2, [ 3, 4, 5, 6, 7, 8 ], 9, 10 ]

The first line of the function const rest = [...a] simply copies the array before it’s handed to splice. Splice modifies an array in place, so it should be copied first. It’s best to use pure functions to avoid unintended side effects.

This isn’t DRY because it’s necessary to pass the number 2 to leftrest, but it’s close.

Text

· · to read

Encoding to binary:

'hello'.replace(/./g, function(c) {
function pad(n) { return (n > 0) ? ('0' + pad(n - 1)) : ''; }
var s = c.charCodeAt(0).toString(2);
return pad(8 - s.length) + s;
});

Decoding binary to a string:

'011101110110111101110111'.replace(/.{8}/g, function(s) {
return String.fromCharCode(parseInt(s, 2));
});
Text

· · to read

I like building up a project from small parts but sometimes it’s good to try using a full framework to see what parts I’m missing. Today I tried starting a mean.js app with yeoman. It comes with a lot preconfigured, including five different authentication options, and since I chose it, an articles model. I removed four of the five authentication modules and changed the name of Article to Bin. In the process I found where things are stored in mean.js. It seems to do a good job of following the rails mantra of Convention Over Configuration.

  • The Code (unfinished, and most of it isn’t mine, the commits show what I did)

I want to return to this experiment and get it working the rest of the way and deployed on Heroku. The basic idea is a minimalistic jsfiddle.

Text

· · to read

I used d3 to make a map. It was good practice. I had forgotten how d3?s chaining API works. When a function mutates an element, it returns the same element back. When a function appends something to an element, it returns the new element back.

I also tried using patterns in svg. I still have to learn some more to understand them and to get the results I want, and I also need to brush up on biezer curves.

Update: I adjusted the vertical offset of the pattern to remove gaps between states.

doge-usa

 

Text

· · to read

A lot of node programmers like to code on the left margin. This is made possible by JavaScript’s dynamic nature. Prototypes can be built up and exports.

In Grunt the examples and virtually all code are wrapped up in one big function. Gulp doesn’t require this, and I’m under the impression many prefer this. However Grunt has a huge standard library.

I like code that doesn’t leave the left margin for long because it’s easier for me to see chunks of code. It also allows me to interleave code, which sometimes makes a lot of sense.

Using OOP, Grunt can be made to have this style. I took the Gruntfile for jquery and made it stay to the left margin while working the same way.

I won’t be sending a pull request, but I may do this on one of my own projects.

Text

· · to read

I’ve started playing with Component again after finding some neat devs/projects/companies that use it. I also checked out ES6 generators in the development version of node and Koa which uses generators. Pretty neat stuff!

I created an example app that uses both Koa and Component but doesn’t do anything server-side. A possible future project is to make my example app use a server-side JSON API to do something.

Text

· · to read

Update: I got it to animate all of the divs. My mistake was that I had the divs changing their position in the DOM, in addition to changing the CSS properties. Some of the divs didn’t change position in the DOM because their index was the same both alphabetically and by population, and these were animated.

I played with React some more, this time loading it from a CDN with the jsx compiler. I set the CSS properties on the divs and tried animating them using CSS3 transitions. Some are animated while some move to their new position instantaneously.