Which is why I'd assume TFA is talking about something similar to Emacs's follow-mode[0], not mere vertical splits

[0] https://news.ycombinator.com/item?id=2797790

For those interested, here's the author's related workshop: https://www.youtube.com/watch?v=NyhVdGmnh0I (slides: https://docs.google.com/presentation/d/1oWSKNZgtXCrc1dVEXhyz...)

There are a few

http://mimosajs.com/

http://brunch.io/

----

On a related note, I'm currently using Grunt.JS with few plugins for Compass, CoffeeScript and Live Reload. Similar to Guards (ruby based), it's the plugin ecosystem that makes it valuable and able to suit multiple needs.

Needless to say, roots sounds interesting.

I will admit that this is a rather opinionated framework. I'm kind of shooting for the apple philosophy - reduce flexibility for a lighter and more beautiful product. I've worked with a lot of compiled languages and for me, these are the cleanest and easiest to work with. I did try to build in a bit of flex though with the plugin interface and the fact that it compiles html, css, js, and ejs in addition out of the box.

I'm a happy user of Meteor. It has few opinions.

Meteor is not the same type of project as roots at all, so this comparison doesn't exactly make sense. Although meteor is an awesome project and in addition is backed by at least 3 people working on it full time : )

Thanks!

Mimosa seems less opinionated, supports everything. Has modules. Ugly website.

Brunch seems less opinionated, supports everything. Has skeletons, plugin API. Nice website.

Grunt seems like the roll-your-own option and is probably more well supported than the others...?

Mimosa author here! I'll work on the website. =) I do think the tool is better documented than some of the others, and I was really going for having the docs rather than making them super pretty.

Mimosa is very pluggable (http://mimosajs.com/modules.html), moreso than Brunch, but slightly less so than grunt, though, to be honest, my grunt experience is slim. That said, grunt obviously has quite the ecosystem of plugins that all the others lack.

Hey, sorry about dissing your site. It's not that bad and could be tuned up quite easily.

– The text shadows on the main page are a bit much. 1px offset is sufficient and the shadow color probably doesn't need to be so light.

– Grey boxes around text are too tight and probably shouldn't be so rounded.

– Headers on home-page are either too big or aren't given enough space. Whitespace! Don't be afraid to use it.

– Darker shadows on headers have the same problem – too much offset – just looks tacky.

– Title and description on homepage looks crammed into the top. Give it more space. Maybe smaller text.

– Red headers are way too bright. Tone it down.

– The bathroom-tile background image is kind of weird.

– Body text is too wide throughout the docs.

– More whitespace throughout the design would help (between all typographic elements), especially given your choice of a large, open typeface.

HackerNews commenting n00b, but guessing it only lets replies go so deep? Hence my reply to the site suggestions goes here. =)

Crazy kinds of awesome to get that kind of feedback! I'll take a look at all that stuff. Big site update content-wise with my next release and I can make some changes then.

Hacker News has exponential delay time on comments based on depth. So the deeper a comment is, the longer you have to wait to reply to it. It's supposed to help cool off flamewars.

I'd be happy to help out advising on the design as well if you want. Great work on mimosa, obviously I'm a fan of these kinds of tools : )

Your site definitely looks slick! I'd take any suggestions anyone has and as long as they make sense, implement them. I'd rather be writing node than thinking about design anyway. =)

Sounds like a good blog post if someone went more in depth here. I for one am really happy to see these tools coming out of the woodwork!

Thanks for the Mimosa mention!

Here's the breakdown of charting libraries OP is using

* HighCharts http://www.highcharts.com/

* jQuery Sparklines http://omnipotent.net/jquery.sparkline/

* jQuery Knob http://anthonyterrien.com/knob/

Being a fan of data visualization myself, I find this work inspiring and would like to hear his thoughts on why those libraries over using either d3.js or Raphaël.

This might be a little offtopic, but I would advise against leaving `console.log` calls in production code, even when there are checks to prevent calling it when the console object is undefined. Commenting those lines out would do the trick, since minification can remove them.

Also I went to the [calculator challenge](http://www.trybloc.com/courses/calculator#/1) and noticed this

    # add(4, 2) => 8
    def add(x, y)
    end

Needless to say the comment should read `=> 6`.

Also, since we are all geeks, here's my Clojure version

    (defn buzziffy [a b x]
	      (cond (and (zero? (mod x a)) (zero? (mod x b))) "FizzBuzz"
	            (zero? (mod x a)) "Fizz"
	            (zero? (mod x b)) "Buzz"
	            :else x))

    (println (apply str (map #(str (buzziffy 3 5 %) "\n")
	                      (range 1 100))))

A while ago I wanted something similar and could not find it, so I decided to put this together http://jrmoran.com/playground/markdown-live-editor/. It has some minor bugs and I have not updated it in a while.

Thanks for writing it. I decided to start learning D3 last night and your tutorial was really helpful.

I might be missing something, since I just started learning it. But instead of drawing a circle like this

    sampleSVG.append("svg:circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .attr("width", 100)
        .attr("height", 100);

I'd prefer to express it like this

    sampleSVG.append("svg:circle")
        .style({
            "stroke": "gray",
            "fill": "white"})
        .attr({
            "r": 40,
            "cx": 50,
            "cy": 50,
            "width": 100,
            "height": 100});

That way, I can just pass object literals as arguments to functions such as attr.

Checkout this branch of d3:

https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/pull/179

We're working on this syntax for: style, classed, property, on, attr, attrTween, style, styleTween. It's a more concise syntax, especially when the attrs are functions. An example from the tutorial:

  d3.select(this).selectAll("rect")    
        .data(function(d){return d;})       
        .enter().append("svg:rect")
        .attr("fill", "aliceblue")
        .attr("stroke", "steelblue")
        .attr("stroke-width", "1px")
        .attr("width", function(d, i){return (histoW/dataset[0].length)+"px"})
        .attr("height", function(d, i){return (d/dataMax[rectIdx]*histoH)+"px"})
        .attr("x", function(d, i){return i*(histoW/dataset[0].length)+"px"})

Becomes:

    d3.select(this).selectAll("rect")    
        .data(function(d){return d;})       
        .enter().append("svg:rect")
        .attr(function(d,i ) {
          return {
            "fill": "aliceblue",
            "stroke": "steelblue",
            "stroke-width": "1px",
            "width": (histoW/dataset[0].length)+"px",
            "height": (d/dataMax[rectIdx]*histoH)+"px",
            "x": i*(histoW/dataset[0].length)+"px"
          };
        });

Three anonymous functions become a single function which returns an object.

While I prefer plain text in markdown, sometimes I store screenshots of code in Evernote to keep as as a reference about how I solved a problem. Its image indexing capabilities and mobile apps allow me to quickly search for something ubiquitously.

http://i.imgur.com/gporh.png