Sebastien Lachance

Reponsive and Mobile-Friendly Design with Skeleton

When we first made the Guide des Commerces, we didn’t anticipated we would need to adapt to other devices so soon. In fact, it we know it was for this year but we though it would be a completely different application for iPhone, Android or a new website.

A month ago we had a discussion with a Facebook expert and talked about adding the Guide to our existing page (just an iframe with the app). The problem is that we use fixed width everywhere and Facebook iframe has only 520px. It would not be wise to develop another site only for Facebook and another one only for mobile device. We needed another solution.

It occured to me that we could hit three birds with one stone (a lot more actually). We only have to use a responsive desig<

I tried various css framework and settled down for Skeleton. It provided me with everything I needed and I can almost use it as-is without any modification. It use Media Queries (link here) to adapt to various screen size (tablet, mobile, iOS, etc.).

If you don’t know Skeleton, it’s basically a grid framework with sixteen column totally a width of 960 pixel.

Suppose you have a div that you want to take 100% of the page.

<div class="sixteen columns">
</div>

You can also have a three column layout very easily:

<div class="one-third column">
</div>

<div class="one-third column">
</div>

<div class="one-third column">
</div>

When you resize your browser, everything just resize nicely.

I am almost 5 hours in now, and I’ve struggled a little but the result is amazing. And I frankly don’t regret the framework choice at all.

Stay tuned for more…

Couldn’t Parse YAML at Line X Column X (Psych::SyntaxError)

I am using Rails 3.0.3 and got this error :

couldn't parse YAML at line 182 column 9 (Psych::SyntaxError)

As I understand it, there is an issue with the locale file (locale/en.yml) of ActiveSupport.

Just by adding

require 'yaml'
YAML::ENGINE.yamler= 'syck'

at the beginning of the boot.rb file should take care of this issue.

More info here and here

A Circular Reference Was Detected While Serializing an Object to Type Code.Models.Category

I have an NHibernate class with the following properties :

public class Category
{
    public virtual int Id { get; set; }
    public virtual string Name { get;set; }
    public virtual Category Parent { get;set; }
    public virtual IList<Category> Childs { get;set; }
}

And an action that return a list of categories as JSON :

public JsonResult Categories 
{
    return Json(GetCategories(), JsonRequestBehavior.AllowGet);
}

I know that it’s not pefect to use an NHibernate class instead of a view model, but it’s a very very small application and I’m trying to keep things clean.

Solution :

return Json(GetCategories().Select(c => new { c.Id, c.Name }), JsonRequestBehavior.AllowGet);

FluentHibernate - How to Deal With a Reserved Word Column

Suppose you have a class with an Order property. Any sql operation will throw an error because Order is a reserved word. To prevent this from happening, specify the column name yourself and enclose it with back ticks.

public class MessageMap : ClassMap<Message>
{
    public MessageMap()
    {
        Table("messages");
        Id(x => x.Id);
        ...
        Map(x => x.Order, "`Order`");
        ...
    }
}

no such file to load – cucumber/rails/active_record (LoadError)

This morning I have updated cucumber on my rails application and I have been greeted by this error message : 

no such file to load -- cucumber/rails/active_record (LoadError)

A simple fix is to simply reinstall cucumber :

rails generate cucumber:install

Learning Rails : SanitizeHelper

SanitizeHelper 

I need to start somewhere and while it may not be the most informative post ever, I’ll try to cover this feature as much as I can. Everything here is already described in the Rails Api so it should be a great idea to keep it as a reference. I’ll also try to add what I have learned 

There are 4 methods in the sanitize helper.

strip_tags

Remove any html tags from your the input provided. If you truncate, you may see <a. strip_tags before you truncate.

strip_links

Remove any links from your markup and return only the text of the link

Problem Downloading files using GeckoFX and XULRunner

GeckoFX is a component to reduce the complexity of embedding Firefox (XULRunner)onto a Windows Forms application to replace the default WebBrowser control.

But while trying to download a file though it, I have encountered this error :

XML Parsing Error: undefined entity
Location: chrome://mozapps/content/downloads/unknownContentType.xul
Line Number 30, Column 18:    <description>&intro.label;</description

After a lot of googling I have managed to resolve this issue. This is what I have done :

1. Use XULRunner 1.9.0.4 or newer

If you’ve followed some tutorials you may have ended up using 1.9.0.0. Use 1.9.0.4

2. Use the Profile Directory

var profileDirectory = Application.StartupPath + @"\EmbeddedFirefoxProfile";
if (!Directory.Exists(profileDirectory))
{
    Directory.CreateDirectory(profileDirectory);
}
Skybound.Gecko.Xpcom.ProfileDirectory = profileDirectory;

3. Copy the chrome folder from the GeckoFX package into the chrome directory of XULRunner.

This will add 2 files to the existing chrome folder.

4. Add a bunch of preferences to greprefs/all.js

pref("browser.download.useDownloadDir", true);
pref("browser.download.folderList", 0);
pref("browser.download.manager.showAlertOnComplete", true);
pref("browser.download.manager.showAlertInterval", 2000);
pref("browser.download.manager.retention", 2);
pref("browser.download.manager.showWhenStarting", true);
pref("browser.download.manager.useWindow", true);
pref("browser.download.manager.closeWhenDone", true);
pref("browser.download.manager.openDelay", 0);
pref("browser.download.manager.focusWhenStarting", false);
pref("browser.download.manager.flashCount", 2);
//
pref("alerts.slideIncrement", 1);
pref("alerts.slideIncrementTime", 10);
pref("alerts.totalOpenTime", 4000);
pref("alerts.height", 50);

Conclusion

I hope it works for you. Happy GeckoFX programming!