If you found this post while trying to optimize your angular templates, I have a cautionary tale for you. This might be just me, but this one hurt.

At work we have an AngularJS application. This application has one particular list really long, really complex, really grinds the tablets to a halt. How do you solve that?

My first tought was, there is too many watches in there. One-time bind all the things. for those of you that dont know one-time binding is done by adding two colons at the beginnig of the variable name {{::variable}}. It gets evaluated once, the first time it has a value, and then angular just forgets about it.

So it started with the new xkcd today, I tought “this is easy, I’ll be done in an hour”.

Then I went down the rabbit-hole that is customizing Hugo.

But first the generator

You can check it out here

The application itself is rather simple, it is carried by two functions, calling each other.

The first, taking an array, and making a string out of all it’s elements

function pickOneOfEach (arr) {
  let result = ''

  for (let el of arr) {
    if (Array.isArray(el)) {
      result += pickRandom(el)
    } else {
      result += String(el) // turn everything to string, because .toString() can be unreliable in what it returns
    }
  }

  return result
}

And a second one, getting me a random element from an array