Switcheroo is a recent project I have been working on. It is a bookmarklet that lets you toggle between the various environments of your site. The idea was brought to me by a coworker who was having to frequently toggle between our various dev, staging and production environments. I will most likely never recoop the time it took to develop but whatever, its cool and hopefully someone else can get some use out of it, right?

Basically all you do is stick an environments.json file into the root of your site and use this bookmarklet to toggle between them. Pretty simple, and here’s what the environments.json file should look like.

[{
  "environments": [
    "site.dev",
    "site.staging",
    "site.com"
  ]
}]

And the link to the github repo https://github.com/eriksundahl/switcheroo

Unless you have been living under a bridge you no doubt know that the iPad comes out today. If you are looking for a way to quickly optimize your site for the retina tablets here is how we did it over at LuxuryRealEstate.com.

First we needed to make two versions of all the images that were to be optimized on the site. This wasn’t a big deal for us because we have a simple thumbnailer that we could setup to dynamically serve up different sized images. For others this may be a slightly more involved process but still the idea is straightforward enough that I shouldn’t need to go into any further detail. Just make sure to generate your retina images with double the pixels and also give them a simple naming convention that is easily swapped out using javascript.

Original Size

image.jpg (300x400px)

Retina Optimized

image@2x.jpg (600x800px)

Thanks to a blog post by Brian Cray we found a simple way of detecting wether or not the user has a retina display.

After we had the retina detection setup we gave all of the images we wanted to be swapped the class “.replace-2x”.

Finally we setup a simple jQuery script to swap the file extension .png with the @2x.png extension

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  // Retna Display Image Replacement
  jQuery(document).ready(function($) {

    // Is this device a retna display?
    var retina = window.devicePixelRatio > 1 ? true : false;

    if (retina) {

      var els = jQuery(".replace-2x").get(),
          src = '';

      for(var i = 0; i < els.length; i++) {
        src = els[i].src
        src = src.replace(".png", "@2x.png");
        els[i].src = src;
      }
    }
  });

There are obviously much more efficient ways of handling this and I wouldn’t recommend this solution for an entire site because you end up loading both versions of the photo but this solution got us up and running so that we could at least offer a few high res photos on iPad launch day.

UPDATE: 2012-04-23

I recently stumbled across this little plugin Retina.js that may be easier. It essentially has the same functionality just in an easy to use package.

This is an ongoing list of git commands that I find useful. I figured I would throw them up here so that everyone can benefit.

undo a commit (file changes and index changes preserved)

git reset --soft HEAD^

undo a commit (file changes preserved, index changes are rolled back)

git reset HEAD^

undo a commit (file changes and index changes rolled back)

git reset --hard HEAD^

Checkout a Remote Branch

git checkout -b <localBranchName> origin/<remoteBranchName>

Modify the Previous Commit’s Message

git commit --amend

Delete a Remote Branch

git push origin :<branchName>

Tagging, Deleting, and Pushing Tags

# Create a Tag
git tag <tagName>

# Delete the tag
git tag -d <tagName>

# Push Tags
git push --tags

I also thought I would throw this article in as its related. “Uses For GIT”