Anand Thakker

“Always the beautiful answer who asks a more beautiful question.”

e.e. cummings, via shapeofdesign

(cheesy, but still…)

AngularJS responsive multi-range slider »

Motivating use-case

I needed a slider that could be used to choose choose a list of probabilities that always add up to 1. I could have used a text input or slider for each probability and link it up so that changing one would update the others, but that’s a fairly clunky interaction. This approach isn’t perfect, but I think it’s better…

Usage

<slider model="arrayOfValues"></slider>

arrayOfValues is an array of numbers: the range values, in order from left to right.

or

<slider model="arrayOfObjects" property="prop"></slider>

arrayOfObjects is an array of objects and prop is the property from which to pull the range value from each object.

Either of these can also take a step attribute, which locks the values into multiples of the given step size.

For styling: the markup generated is a containing div (.slider-control), a div for the actual slider bar (.slider, the js sets position: relative), and an absolutely-positioned div for each handle (.slider-handle). The handles are children of the slider div, and their positioning is a percentage of the slider’s width, so the whole thing should stretch/shrink to fit its containing element. For example:

<div class="slider-control ng-isolate-scope" model="otherProbs">
  <div class="slider" style="position: relative;">
    <div class="slider-handle" style="position: absolute; left: 30%; top: -8px;"></div>
    <div class="slider-handle" style="position: absolute; left: 60%; top: -8px;"></div>
  </div>
</div>

Todo

  • Allow comprehension expressions as a more flexible (and common) alternative to the model/propertyapproach.
  • Option for labeling ranges?

Typograph - Scale & Rhythm »

This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. 

This would be useful even just as a beautifully typeset, clearly written introduction to important ideas in typography.  The fact that it also works as a tool for generating base typographic CSS styles is just over the top awesome.

“It seems d3 sees itself as kind of a data binding library, that happens to be good at visualisations. This usually confuses newbies to no end, but makes sense once you get the hang of d3. But bindings are also a core pillar of Angular’s way of working. So using both leads us to having two duelling libraries, both trying to control the DOM. In order to get what we want, we need to understand both and use both. This doesn’t feel right.”

http://alexandros.resin.io/angular-d3-svg/

A wonderfully clear article that puts its finger on the weirdness I’ve been feeling in putting angular and d3 together.  

The woes of describing a data model in Javascript

Is it just me, or is describing a complex data model in Javascript (or any non-statically-typed language) just… not as good?

I mean, my friend Aaron White and I used to be rather zealous about the beauty of type safety, and while we had our serious beefs with Java, at least it gave us a robust way of defining a data model.  

Now, I am totally blown away by what’s happened to front-end web development since I’ve been gone these past 8 years.   The ability to make complex client-side applications is powerful, super fun, and freeing.

But as thrilled as I am playing around with AngularJS and Node and dozens of brilliantly designed libraries, the one thing I still kinda hate is that I’m having to either remember or keep looking up my damn model.  I long for the Java days when my IDE could complete my sentences (though Sublime Text fakes it alright at least for symbols defined within the current file), and more importantly, when I didn’t have to wait till run-time to find out that I’d misspelled a property name. 

Am I just not getting the new paradigm or something?