the etherpros blog

Garber-Irish JS init() on Coffeescript.

If you're not familiar with the Garber-Irish method of creating javascript initialization methods, please take a moment to read this fantastic article on the subject of javascript init methods. It will really make your javascript code management significantly easier, especially if you're running the Rails 3.1 Asset Pipeline which mushes all your javascript files into one big file preventing you from easily sectioning off your javascript code on a page-by-page basis.

Garber-Irish's solution works especially well with Rails, but it depends on a somewhat verbose javascript function. I decided to go ahead and port this to Coffeescript for those of you running it. Enjoy:

this.JSRouter = {
  common:
    init: ->
      # application-wide code
  
  users:
    init: ->
      # controller-wide code
    
    show: ->
      # action-specific code  
}

Util = {
  exec: (controller, action) ->
    ns = JSRouter
    if controller != "" and ns[controller] and typeof ns[controller][action] == "function"
      ns[controller][action]()

  init: ->
    body = document.body
    controller = body.getAttribute "data-controller"
    action = body.getAttribute "data-action"

    Util.exec "common"
    Util.exec controller
    Util.exec controller, action
}

$(document).ready Util.init

James Strong

29 May 2012

Use em, not px.

I've recently been getting into the principles behind responsive web design. The idea behind responsive web design is to create a website layout that looks good on any browser window size. There are three primary tools used to accomplish this goal:

  • Percentage widths
  • CSS3 Media Queries
  • em dimensions

I want to focus this post on the latter.

What is an em?

To put it simply: em is a unit of measurement that is based off of the element's parent font size. For the most part, em behaves exactly like a percentage value, but there a few technical differences that distinguish it from percentage based values in your CSS code.

body { font: 14px/1.5em "Helvetica Neue"; }

h1 { font-size: 2em; /* Value of 28px */ }

As you can see above, a value of 2em is twice the size of the parent (base) font.

Design Consistency

Vertical rhythm is quite important for readability and consistency.

Using em values makes it significantly easier to create a design that has a consistent baseline. By using even em values such as 0.5, 1 or 2, your design will automatically produce a consistent feel by having margins and paddings that are proportional to your font size. On the other hand, when using px values it is not clear whether the margin or padding you're adding is going to offset your baseline or not.

Using ems

By using ems, you have a website expressed through proportions instead of static values. Having a website that is defined in terms of proportions empowers you to adapt the size of your website by simply changing your base font size.

Example CSS:

body { font: 18px/1.5em "Helvetica Neue"; width: 860px; }

.div1 { margin: 1.5em; background-color: #ccc; }

.div2 { margin: 1.5em; background-color: #333; color: white; }

h1 { font-size: 2em; margin-bottom: .5em; }

h2 { font-size: 1.5em; margin-bottom: .5em; }

Example HTML:

<div class="div1">
  <h1>Big</h1>
  This is a test
</div>

<div class="div2">
  <h2>Medium</h2>
  This is a second test
</div>

Will produce the following:

Big

This is a test

Medium

This is a second test

By simply changing the font-size of the body tag to 12px, all the margins paddings and line-height will automatically adjust to the smaller font size:

Big

This is a test

Medium

This is a second test

Ems empower you to create a dynamic layout that will automatically adapt when you need it to. Combining ems with CSS3 Media Queries helps you rapidly create responsive web designs that look good on all resolutions.

James Strong

29 May 2012