This isn’t an original idea, Paul Irish gets that credit: DOM-Based Routing

Additionally, Jason Garber is responsible for the rails adaptation: Rails DOM-Ready Execution

Please check out the above links for most of the details on how this works, there is no sense in me plagiarizing their material. Below you will find a CoffeeScript variant of DOM-Based Routing tailored for Ruby on Rails 3.2+ and the asset pipeline. It uses HTML5 data-* attributes to find controller:action and only calls javascript functions for specific routes.

Of course, you could use the asset pipeline to bring in new javascript files for specific controllers, but this has the advantage of one unobtrusive file and specific action calls.

#
# how to do data-* attributes in haml for body tag

%body{:data => {:controller => "#{controller_name}", :action => "#{action_name}"}}

#

#
# This is your DOM-Based Routing in CoffeeScript
# Where ns is your namespace variable

ns =
  init: ->
    # site-wide code
  log: (msg) ->
    console.log msg
  controller_name:
    init: ->
      # controller-wide code
    new: ->
      # action-specific code
    other_functions: ->
      # add more functions or custom code

# === Utility to Load Scripts
nsUTIL =
  exec: (controller, action) ->
    if (controller isnt "" and wfJS[controller] and typeof wfJS[controller][action] is "function")
      ns.log "exec " + controller + ":" + action
      ns[controller][action]()
  init: ->
    controller = document.body.getAttribute("data-controller")
    action = document.body.getAttribute("data-action")
    ns.log "example of console log message"
    ns.init()
    nsUTIL.exec(controller, "init")
    nsUTIL.exec(controller, action)


$(document).ready ->
  nsUTIL.init()


# if you want to attach to global scope just..
# window.ns = ns
#

Learn about wine and spirits.

Below is a basic example of a single vimeo video added to a sitemap that google can index. (and .. maybe? other less relevant search engines, not sure if the namespace works)

To add more videos, copy/paste the URL block.

Here is exactly what my site has: Wine Folly Video Sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url> 
    <loc>LINK TO PAGE VIDEO APPEARS ON</loc> 
    <video:video>     
      <video:title>TITLE OF VIDEO</video:title>
      <video:description>BRIEF DESCRIPTION</video:description>
      <video:thumbnail_loc>LINK TO THUMBNAIL (you must host, vimeo does not supply)</video:thumbnail_loc>
      <video:player_loc allow_embed="yes" autoplay="ap=1">http://vimeo.com/moogaloop.swf?clip_id=YOUR_CLIP_ID_HERE</video:player_loc>
      <video:publication_date>YYYY-MM-DD</video:publication_date>
      <video:duration>DURATION IN SECONDS</video:duration>
      <video:tag>TAG 1</video:tag>
      <video:tag>TAG 2</video:tag>
      <video:tag>TAG 3.. UP TO 32</video:tag>
      <video:category>CATEGORY OF YOUR CHOICE</video:category>
      <video:gallery_loc title="NAME OF YOUR GALLERY">LINK TO GALLERY</video:gallery_loc>
      <video:uploader info="LINK">NAME OF UPLOADER/COMPANY</video:uploader>
    </video:video>
  </url>
</urlset>

Wine Folly Page Speed on Flickr.

After a lot of hard work, I’m pretty happy to see the site loading in under 1 second. Yay!

Via Flickr:
Performance test of Wine Folly, pretty happy to see a sub 1 second page load. Looking forward to getting it under 500ms!

Recently on Twitter I happened to watch the following conversation take place and basically did a full on /facepalm. How unfortunate! This was the perfect opportunity to turn a difficult customer into a raving fan. Take a look at the following exchange:

Read More

Launching a startup is an exciting experience. Long before the bittersweet memories of inner-startup culture trauma. The founding of a startup is like a new relationship, everything feels magical.. So.. About that landing page which spells out our dreams and ambitions for the world to see?

You’ll need to do a few things, how about pick a super simple startup provider so you can focus on building the business? It should look great and communicate the idea clearly. Are we on the same page? Please, follow me down the rabbit hole.. 

Read More

I just finished setting up Ruby on Rails 3.1.0 on Heroku and wanted to share some small tips.

Heroku Cedar

I’ll cut right to the chase. When you deploy Ruby on Rails to Heroku, you’ll want to specify the Cedar stack. If you try and deploy to Heroku normally, you’ll get an error. To specify a stack, simply do it as follows (this should look relatively familiar if you’ve deployed to Heroku before)

heroku create --stack cedar

Oh my, so easy? Yeah.

Asset Pipeline

This is a bit trickier. Honestly, I didn’t follow this guide at all, but I’ll refer you here because certainly they know more than I do and will likely keep it more updated than this post. Asset Pipeline Rails 3.1.0 on Heroku

Nerding out with my new keyboard. @daskeyboard (Taken with picplz.)

As far as I’m concerned, ‘morning’ starts at 10AM. I am not a morning person. Above is my digusted face for morning people. Shame on you morning people. (I need coffee)

Find out how you compare to the me and the big boys.

Blog Page Speed

It’s important. No one likes slow blogs, including google. Luckily, improving blog speed is sometimes much easier than you think it’d be. But first, you need to know how fast yours is and what might be wrong with it.

Let’s keep it simple. First, how fast. For that, I’ll send you off to Pingdom where you can run a simple test. Just put in your domain name and click ‘Test Now’.

Go ahead: Test Your Blog Speed

My results look something like this:

This blog loads in about 3 seconds flat, pretty good in the scheme of things. The yellow bars show how long the server (usually Tumblr) took to respond, you can see which server in the URL column. The green bar is typically how fast your internet connection took to respond, the shorter the faster. The blue bar is how long it took to download the contents. Big files take longer, you can see file size in the far right column.

The easiest way to speed things up? Make big files smaller, reduce the number of files, find faster hosts for external files. Usually the issue is too many big files. Images can slow you down a bunch, try and save files with lower resolution or higher compression. Now it’s time to do a more specific analysis.. 

Google Page Speed

Page Speed analyzes the content of your tumblr blog, then generates suggestions to make that page faster. Some of the suggestions might be advanced, just try and focus on the high priority (red) problems.

Go ahead: Run the analysis here.

After you’ve had a chance to address the suggestions run the Pingdom Test again. Hopefully you’ve made a difference! So, how fast is your blog?