Philippine Graphic Design Awards 2011

Mon, 25 Jul 2011 00:00:00 +0000

I will be judging in the PGDA. Do send in your entries! There are 13 categories, open to students and professionals alike.

You can submit entries until September 20. All the relevant details are available on their website.

The PGDA has been around for a few years now. Check out the great work from last year’s winners.

PGDA website

Contest details

Killing orphans

Thu, 21 Jul 2011 00:00:00 +0000

Paragraphs with single words in the end are ugly. Live by this rule in the web and print. These words are called orphans.

I’ve just put together a one-off JQuery plugin to fix the problem of text orphans. Check out jQuery Unorphan for a quick, elegant solution.

Unorphan for jQuery →

HAML and IE compatibility

Sun, 10 Oct 2010 00:00:00 +0000

I love HAML, and I love the insanely-elegant Paul Irish IE conditional comments trick (not hack!). But can we use them together? For those that tried, I’m sure you know by now that trying to shoehorn the whole snippet as a bunch of HAML comments is just gross, and impossible.

Figure 1.
IE conditional comments allows you to target IE versions easily without any hacks. More info in Paul Irish’s post

Implementing conditional comments: the helpers way

The solution isn’t that hard to accomplish! HAML lets you have helper functions that take in blocks which you can receive in your helper functions as HTML. I suppose we just put two and two together, and:

module ConditionalHtmlHelper
  # Implements the Paul Irish IE conditional comments HTML tag--in HAML.
  # http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
  def cc_html(options={}, &blk)
    attrs = options.map { |(k, v)| " #{h k}='#{h v}'" }.join('')
    [ "<!--[if lt IE 7 ]> <html#{attrs} class='ie6'> <![endif]-->",
      "<!--[if IE 7 ]>    <html#{attrs} class='ie7'> <![endif]-->",
      "<!--[if IE 8 ]>    <html#{attrs} class='ie8'> <![endif]-->",
      "<!--[if IE 9 ]>    <html#{attrs} class='ie9'> <![endif]-->",
      "<!--[if (gt IE 9)|!(IE)]><!--> <html#{attrs}> <!--<![endif]-->",
      capture_haml(&blk).strip,
      "</html>"
    ].join("\n")
  end

  def h(str); Rack::Utils.escape_html(str); end
end

# Assuming Main is your Sinatra app
Main.helpers ConditionalHtmlHelper

Usage in HAML

Now in your HAML layouts, instead of using %html, use the new helper like so:

!!! 5
!= cc_html(:lang => 'en') do
  %head
    %meta(charset='UTF-8')
    %title Hello!

  %body
    ...

Oh, and one more thing…

This will make it dirt easy to implement IE-specific stuff in SCSS. Thanks to @marcopalinar for the tip.

/* Fix the double margin bug */
.posts {
    margin-left: 10px;
    .ie6 & { margin-left: 5px; }
}

/* Upgrade notice */
.upgrade-your-browser {
  & { display: none; }
  .ie6 & { display: block; }
}

That’s it!

Aura now has all it’s views peppered with the conditional comments trick. Still no IE compatibility, though… that’ll come later. By the way, there may be a better solution here. As usual, you can check the demo site at aurademo.heroku.com.