Viktors Rotanovs home

Hitgeist.com rewritten using HAML and Compass

Hitgeist, a ranking service for finding recently popular sites in each country, received a minor upgrade - now it uses several new libraries to make development of new features easier, and code cleaner and nicer.

I built Hitgeist using Merb, a Ruby framework which brings fun back into web development. In fact, the fun is taken by Symfony, which just doesn't feel elegant anymore. Merb also has less magic than Ruby on Rails, and is a lot better architected. RoR developers liked Merb so much they started to unify both frameworks.

So, what are the updates?

First, I rewrote all templates from ERB to HAML. I should have done this before. Code becomes so much cleaner—tags are closed automatically, and visual clutter is reduced:

ERB (before, 9 lines)

<div id="container">
  <div id="sitemap">
    <span class="letters">
      <% ('A' .. 'Z').each do |letter| %>
        <a href="/trends/<%=letter%>"><%=letter%></a>
      <% end %>
    </span>
  </div>
</div>

HAML (after, 5 lines)

#container
  #sitemap
    %span.letters
      - ('A' .. 'Z').each do |letter|
        %a{ :href => '/trends/' + letter }= letter

Second, I changed site structure to use grid system, a method to construct visually appealing page layouts using columns and rows which was used in newspapers for decades, but started getting its way to web only around 2005. Usually grids are implemented using one of CSS frameworks, which mostly solve cross-browser and printing issues and add niceties such as vertical rhythm and beautiful typography.

There are several CSS frameworks available to implement grids, most famous ones being Blueprint (which is used by sites like QuantCast), 960.gs, and Yahoo UI Grids. There are also others, like this high-quality small CSS framework.

I chose Blueprint because it’s complete and integrates nicely with Compass, a CSS meta-framework for making CSS shorter, much like HAML does for ERB. It also allows to do computations, for example:

.bright
  :font-color !main_color + #663300

Did these changes improve the website? Visit new version, and send your feedback.

PS: Do you know anything like HAML but for PHP?

blog comments powered by Disqus
Fork me on GitHub