Code for Concinnity

beautiful and elegant solutions


Ruby on Rails vs Django

The contest between the flagship MVC frameworks of the two of the best breed programming languages out there. Django is very interesting to study because it takes quite different approaches from that of Rails, and is probably one of the very few frameworks that isn’t a Rails clone.

1-minute summary

This funny piece kind of sums it up:

  • Person 1: “What do you do for a living?”
  • Person 2: “I work with computers.”
  • Person 1: “So do I! What do you do with computers?”
  • Person 2: “I’m a Web developer.”
  • Person 1: “So am I! Design, client-side programming or server-side programming?”
  • Person 2: “Server-side programming.”
  • Person 1: “Same here! Do you use dynamically typed languages or statically typed languages?”
  • Person 2: “Dynamically typed languages.”
  • Person 1: “So do I! Do you use a Web framework, or do you roll things on your own?”
  • Person 2: “I use a Web framework.”
  • Person 1: “So do I! Django or Rails?”
  • Person 2: “Django.”
  • Person 1: “Die, heretic scum!”

Opinionated, original opinions

  • The Django guys seem to be more pragmatic. They would say “maybe it’s too much magic for experienced programmers,” where the Rails folks would day “Look! It’s magic! The meta-programming is just elegant!”
  • The Django people wrote the official manual. Rails still don’t have many serious documentations at this point other than screencasts and RDoc. Understandable when DHH’s too busy participated in flame wars lol
  • Is it a co-incident that most resources I found regarding Rails vs Django are hosted on the Django’s Web site?

OK, those were focused on the communities more than the frameworks themselves. Heck, I said I was opinionated!

Something about the languages

A comment from a blog post: Why I moved from Ruby on Rails to Python/Django and back kind of ties up the Ruby vs Python issues quite nicely, and neutrally:

The fact that you need to be slightly more explicit in Django is actually considered a feature, since that increases readability and ease of maintenance. I do agree though that while Python is a pleasant language to develop and maintain code in, Ruby seems to be more focused at being fun. It feels like it lets you be ‘clever’ with your code in a way that Python won’t allow. For better and for worse, I’d guess that part is quite much just a matter of taste.

Let’s see the gurus sort it out

We also have a video of SnakesAndRubies, where we see “Adrian Holovaty, one of the creators (plural) of the Django framework for Python, and David Heinemeier Hansson, the creator (singular) of Ruby on Rails framework” go into debate.

Finally, some hard-core papers

For those of you who like hard-facts, people have wrote formal reports using scientific methods:

Opinionated summary

Disclaimer: I have only read the stuffs above when I write these. I myself, at this point, is a Rails person. I haven’t written a single line in Django (definitely worth a try when I get the time :)

After some heavy-reading, I came to the conclusion that Rails is basically a DSL written for MVC framework, and a heavy-duty DSL indeed. Django, on the other hand, really feels like an MVC framework written in Python.

What that means, very generally, is that you’d see a lot more magic in Rails than in Django.

Published by kizzx2, on June 2nd, 2009 at 1:18 am. Filled under: Web Tags: , , , , , , , • 2 Comments

Blueprint CSS with Sticky Footer — Revisited

A while ago I wrote about how to get Blueprint CSS with a Sticky Footer. That method required adding non-semantic empty div and was not very robust.

After trying for some time, I managed to get the method on cssstickyfooter.com working with Blueprint, and I find this method much more elegant:

Demo

Blueprint’s sample page with a footer

The code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- All we need is to structure our HTML markup according to cssstickyfooter.com -->

<html>
    <head>

        <!-- Include Blueprint here ...-->

        <link rel="stylesheet" type="text/css" href="sticky-footer.css" />
        <link rel="stylesheet" type="text/css" href="application.css" />
    </head>

    <body>
        <div id="wrap">
            <div id="main" class="container">
                <!-- meh meeh.. -->
            </div>
        </div>

        <div id="footer" class="container">
            <!-- Look! I can still use Blueprint's grid here! -->
        </div>
    </body>
</html>

It was totally unobtrusive! And we only needed to plug-in sticky-footer.css from cssstickyfooter.com, verbatim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* sticky-footer.css */

/*  
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* application.css */

/* Our own customizations are nicely tucked in a separate file, yay! */
*
{
    text-align: left;
}

#footer
{
    background: #f0f0ff;

    /* We can over-ride default settings here instead of changing the original
       sticky-footer.css */
    padding-top: 20px;
    height: 150px;
    margin-top: -170px;
}

#main
{
    padding-bottom: 170px;
}

Enjoy!

Published by kizzx2, on May 11th, 2009 at 7:12 pm. Filled under: Web Tags: , , , , • 15 Comments

Blueprint CSS with Sticky Footer

The age old problem

Getting the footer to stick to bottom of the page using CSS seems to be an age old problem. Recently, aXemedia published a cross-browser and unobtrusive method to do that. It says it supports maybe like 40 browsers on different platforms, but unfortunately, it doesn’t seem to (out of the box) support the Blueprint CSS framework.

After several hours of trial and errors, I rolled out a method that managed to make it work on both IE6 and FF3 (I didn’t go through the trouble to test it with BrowserShots or something, maybe someone can report your experience)

Enough talk, some demos

Blueprint’s sample page with a footer

The code — Sample usage

This method is basically more based on Ryan Fait’s method which requires adding extra non-semantic element to the markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* sticky-footer.css */

*
{
    margin: 0;
}

html, body
{
    height: 100%;
}

#main
{
    height: 100% !important;
    min-height: 100% !important;
}

#footer
{
    clear: both;
    height: 140px !important;
    margin-top: -160px !important; /* This is height + padding */
}

#push
{
    height: 160px; /* This is footer's height + padding */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- sample.html -->
<html>
    <head>
        <!-- Include blueprint, sticky-footer.css here -->
    </head>

    <body>
        <div class="main container" id="main">
            <!-- All contents must be inside spans -->
            <div class="span-16"></div>
            <!-- ... -->
            <!-- We need our empty push div here -->
            <div id="push"></div>
        </div>

        <div class="footer container" id="footer">
            <!-- We can use Blueprint grids here -->
            <div class="span-18"></div>
            <div class="span-6 last"></div>
        </div>
    </body>
</html>

This method involves two tricks: putting a push element to make room for the .footer, and we also make .footer as another container.

Caveats

One strange side effects I’ve noticed from my approach is that now contents in .main.container must be wrapped inside columns span divs. Observant readers might notice that I changed the Blueprint sample page (long version) a little bit (by wrapping elements in column divs) so that things don’t overflow in an ugly way.

Extra — SASS mixin (untested)

If you use the excellent SASS for writing your CSS (which is totally cool, you won’t go back to CSS once you’ve tried it), here’s a little mixin for your convenience:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// sticky-footer.sass
=sticky-footer(!footer_height, !main_id="#main", !push_id="#push", !footer_id="#footer")
  html,
  body
    :height 100%

  #{!main_id}
    :height 100%
    :min-height 100%

    #{!push_id}
      :height #{!footer_height}

  #{!footer_id}
    :height #{!footer_height}
    :margin-top -#{!footer_height} !important

Include it in your application:

1
2
3
4
5
6
7
8
9
10
11
12
13
// application.sass

@import sticky-footer.sass

+sticky-footer(170px, "#main", "#push", "#footer")

#main
  :background yellow
  // ...

#footer
  :background pink
  // ...

That’s it! Notice our nicely named <divs> forms the sentence main push footer :-) In our example, since these IDs are the default, we could have done with a one-liner:

1
+sticky-footer(170px)
Published by kizzx2, on May 10th, 2009 at 6:29 pm. Filled under: Web Tags: , , • 1 Comment