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.
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.
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
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
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
...
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; }
}
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.