CanCan - make up your mind!

If you're using CanCan and came across an error like this;

The :class option has been renamed to :resource for specifying the class in CanCan. 

And you duly updated your controller code from;

  authorize_resource :class => FundingFlow

To something like this;

  authorize_resource :resource => FundingFlow

Since, like all good programmers, you do what you're told by error-messages. But then like some sick joke it starts mocking you with the inverse error message i.e;

The :resource option has been renamed back to :class, use false if no class.

Before you go and stalk Ryan B (the CanCan author) with a fully automatic assault rifle, first check your CanCan versions.

$ gem open cancan
Open which gem?
 1. cancan 1.1.1
 2. cancan 1.3.2

Ah ha. And if you're using RVM like we do, then your default.gems might be specifying a different version (which in our case manifested in our staging server, not on local development).

So by making sure you're using the latest version (>= 1.3.2), and using the :class syntax i.e.

  authorize_resource :class => FundingFlow

, you might save yourself a murder (or at the very least a weapons) charge.

Solving HTML5 compatibility issues

By now you've probably encountered the big wave of info that comes out regarding HTML5 and the improvements that it will bring. One of those are the awesome brand new tags, that with a proper usage can cure DIVitis and improve the overall semantics. Why use <div id="header"> when you can use just <header>? This is expecially convenient when you have tons of divs and becomes hard to trace everything. You get an extra level of visual code separation, but even more importantly you get a default hierarachy system that will give your code a common sense.

But enough about why HTML5 tags are awesome, and how about their acctual use in practise? As you might already know they are not really accepted by the current browsers, and won't be for some time. They are implementing more of the HTML5 and CSS3 magic as we speek, but it's a process that will take a while. So, what do we do about jumping on the HTML5 train?

The first solution is a very simple one and apllies to normal type of browsers like Firefox, Safari, Opera, Chrome: just put the CSS property { display: block; } in your stylesheets:

    <style type="text/css">
        header, nav, article, footer, example { display: block; }
    </style>

and you're done. This converted them into block elements and returned them in the flow, so you can use the tags in your document.

But this is not so easy when it comes to Internet Explorer. You always need to put more effort into explaining something to a deaf, dumb and blind person, and so is this monstrocity spawned by Microsoft. What you need to do here is add some javascript, otherwise your html5 elements won't be recognized even by applying the block property. In the head of the document place this piece of code:

  <script>document.createElement('time');</script>

This just created the <date> tag. You can use this method to create all the elements you require to make your html5-ish website acceptable for IE. There's also a script made by Remy Sharp that will take care of this for you.

But nowdays we have more complete solutions to this problem, that also deal with cross-browser compatibility, improved css degradation and add some extra features. We have Modernizr, JavaScript created by Faruk Ateş and Paul Irish that creates support for HTML5 and a lot of CSS3, and Boilerplate created by Paul Irish and Divya Manian, a cross-browser compatible and future-proof HTML template that support HTML5 and CSS3. What's really cool about Boilerplate is that they are working on a HAML/SASS port.

And for the end here are some cool examples of HTML5 websites, published recently by WDL. I know i'll be using HTML5 on my next website.

Web apps to outlast mobile/native apps

Tourrey Rice of SitePen and dojo fame, presents an excellent case for the longevity of web applications, especially with the introduction of HTML5 / CSS3 and mobile browsers.

Full presentation: http://www.infoq.com/presentations/Present-Future-Web-App-Design

Scaling Ruby on Rails for the Enterprise

You want to make;
  - Rails scale?
  - Ruby faster?
  - your code more attractive?

and have more XML in your life?

The enterprise gem allows all this!
  • It’s easy to read!
  • It scales!
  • Cross platform
  • TRANSFORM! your code using XSLT!
  • Search your AST with XPath or CSS!
Start converting your existing legacy Ruby code in to scaleable, easy to read XML files today: http://github.com/tenderlove/enterprise

Handy rake tasks for Heroku

We've been using a standalone rake task to generate the .gems for our Heroku apps. Recently Heroku raised the bar by making you specify the rails version too in this file (gah). So all your 2.3.5 or lower full redeploys will start breaking without this line in .gems.

Theres some great gists and blogposts floating around there showing you how to generate .gems, but who wants to manage individual rake tasks across projects? Not me. A little bit of hunting and I found a nice plugin ‘heroku_san’ by Elijah Miller with several cool Heroku rake tasks, including one to generate the .gems file. 

Plugins are pants though, so I've updated heroku_san to a gem now too. No more copying .rake tasks between projects!

Grab

  http://github.com/glennr/heroku_san

and

  rake heroku:gems

til your hearts' content!

Scalable full screen background image

Were you trying to find a solution about applying one large and scalable background on a website? It can be a tough choice especially since one of the alternatives is Flash and anyone who appreciates usability and web standards will probably resent that very thought.

Recently I worked on a website for a branding agency that required a bit more avant-garde design with a large background image that could resize according to the browser’s window size and resolution. My research showed that most of the non-flash websites were done by JavaScript, but there was something else that caught my attention – a solution done with straight HTML, CSS and guess what – tables! Yeah, I know, the old arch-nemesis of web design. We almost started forgetting they existed, but they pop-up from time to time, reminding us of the good old days of poorly designed websites. And yet it was a solution so simple it’s almost creative and I was urged to try it out.

The whole trick is to create a single cell table, and apply few styles to make the magic work.

Note: I will use HAML and SASS for the code. Read here if you want to learn more about it: http://haml-lang.com/

So it’s just a simple table with an image nested inside. Now the magic comes with combining CSS, or in this case SASS:

After this you can continue styling the rest of the page with straight CSS without worrying about the background. Leave the table as it is and nest the rest of your DIV’s straight in the body.

 

Tip of the day: MIME types for Paperclip & IE8

If your users are receiving this kind of  error in your Paperclip-enhanced models

Logo is not one of the allowed file types

And your uber Cucumber regresssion tests aren't picking it up, despite having the following standards-based MIME type validations;

validates_attachment_content_type :logo, :content_type => ['image/jpeg', 'image/png', 'image/gif']

then you might check to see what browser they're using.

Are they using Internet Explorer? Internet Explorer 8 perhaps?

Well you might want to add something along the lines of image/pjpeg to your validations. 

validates_attachment_content_type :logo, :content_type => ['image/jpeg', 'image/png', 'image/gif', "image/pjpeg"]

Google killed off IE6. Lets hope they do the same for IE6+2 soon.

Tired of Textmate's slow "Find in Project"? *nix to the rescue

We all know that Textmate's "Find in Project" feature runs like a dog.

If you're generally only really wanting to search .rb files, here's a script which I call 'findrb'

Drop this in a file in your $PATH, chmod +x it, and off you go.

E.g.

 
 glenn-roberts-4 ~/ba[master*]$ findrb 'show' 
 ./app/controllers/home_controller.rb:13: def show 
 ./app/controllers/live_profiles_controller.rb:2: before_filter :authenticate_user!, :except => [ :index, :show ] 
 ./app/controllers/live_profiles_controller.rb:22: def show 
 ./app/controllers/live_profiles_controller.rb:26: format.html # show.html.haml