Lightroom Book Module

Then I came across the Book Module in Lightroom. I’ve used Lightroom to edit my photos in the past, but never took a look behind the Book tab.

The Lightroom Book module allows you to make a photobook from a collection of your photos. Since our journal is mostly photos I thought this would be an excellent way to build the book instead.

Importing Day One into Lightroom

Creating the book with captions from Day One by hand would be a HUGE pain though. So I wrote a simple program. It takes all the Day One entries and embeds the date and entry text into the metadata of the entries’ associated jpegs. If the entry does not have a photo it just creates a blank photo for that entry. Armed with these jpegs I went into Lightroom and imported them.

Formatting, Formatting, Formatting

The Book Module will automatically add captions to the book from the metadata. But I quickly learned that it cannot read any formatting what-so-ever. So I still had to manually go into each entry and format the dates, titles, newlines, etc.

Once I had the text formatted I went through the book rearranging photos and changing the layout of each page until I liked it. Since I’m not limited with HTML and CSS I get control of each page, each entry, and each photo.

It took me about two hours to format each of the books (I made one for each of our twin girls). But it would have taken a lot more time to copy/paste the entry text from Day One. It’s also much easier to make mistakes when doing it manually.

End Result

Anyway, I’m proud of how the books turned out and glad I opted for the more expensive paper (ProLine Pearl Photo) from Blurb. The quality of these books is outstanding. They’re just over 100 pages each and cost $75 each after a discount.

Here’s some photos of the books. Post questions in the comments. I hope to write a post detailing the instructions from start to finish.

“Amateur” has many different meanings and usually has a negative connotation. But when I say amateur photography I mean: “take photos for fun, not for profit”. This post is intended for those interested in photography just for personal use. If you want to make money from photography, then I’d get advice from a professional.

You’ll often hear professional photographers (i.e. photographers that make money from their work) say that “the camera doesn’t matter”. That’s not true at all.

What they might mean is, you don’t need a $6,000 camera to take good photos, and that’s true. But spending a good amount of money (at least $500) on a DSLR will immediately get you better photos. A lot of it will be luck at first (maybe that’s what the professionals are getting at), but I remember being amazed at the quality of the photos I started getting when I finally had a decent camera. Pair a good fast lens with an entry consumer-level camera, and you’ll start getting better photos on day one.

You’re not going to be shooting photos that look like they were shot by a professional, but that’s ok, because they weren’t!

I started getting serious about photography after my amazing wife (fiancé at the time) surprised me with a Nikon camera as an early wedding present. I had often complained, “I wish I had a good camera so I could get good photos of the dogs.” A desire to learn, a good camera (and lens), and a subject is all you need to get started.

My Recommendations

1. Determine your commitment level (or budget)
2. Buy a camera
3. Buy a prime lens
4. Read Understanding Exposure
5. Shoot!

Determine Your Commitment

Decide how committed you are and how much you want to spend. If you want to stay under $1,000, then you’ll need to stay in the consumer-level cameras. If you have $2,000 or more, then you might look into professional-level cameras.

The major difference between consumer- and professional-level cameras is the size of the sensor. Manufacturers call it different things, but in Nikon world (where I live) it’s called DX and FX formats. DX is the cheaper, smaller (cropped) sensor and FX is the larger, “full-frame” sensor. The biggest benefit (or the one I care most about) on the full-frame cameras is that they perform better in low light. This means you can use natural light inside buildings and anywhere else where natural light is hard to find. In low light on a cropped camera you’ll either get blurry photos or photos with a lot of grain/noise. On a bigger full-frame camera you can increase that ISO without increasing the noise (there are still limits, though).

Full-frame cameras also typically come with more features, more buttons, better, faster hardware, etc. The gap is closing slightly between the high-end cropped and low-end full-frame cameras, but I’d still recommend the full-frame camera if you have the budget.

Buy a Camera

Now that you know your commitment, pick a camera. I’d say stick with Nikon or Canon (mostly because that’s what I see professionals using), but feel free to choose anything that has good reviews. I love my Nikon gear but that’s only because my first camera was a Nikon.

If you’re buying Nikon, take a look at this buying guide on Nikon Rumors. This lists all the latest models and shows if they’re new or will soon be replaced. Check out this table on Wikipedia to find older models of equivalent current offerings if your budget is tight.

I have the Nikon D600, which has now been replaced by the Nikon D610. It’s the cheapest professional-level Nikon you can get.

Before the D600 I had the Nikon D60, which is described as an upper-entry consumer-level. It’s been replaced now and is comparable to the Nikon D5500.

An entry-level Nikon D3300 is great too, though. Starting off with anything is going to yield you better photos than your point-and-shoot or iPhone. As you get more serious you can upgrade (this is what I did and continue to do).

Unless you find a great deal on a package, get the DSLR body only. You’ll want a couple hundred dollars left to get a good lens.

Side note: if you’ve got a larger budget and need mobility for your camera, there are mirrorless cameras that are almost as small as your point-and-shoot but have detachable lenses. I can’t offer any information about them as I have never even seen one in person, but just know they’re an option if you’re looking.

Lastly, don’t be afraid to buy used or refurbished. My Nikon is a refurbished camera and it’s great. You can also buy an older model. For example, if you can’t afford the Nikon D3300, look at prices on a D3200. I’ve used both Amazon and Adorama to purchase used or refurbished equipment.

Buy a Prime Lens

Spend the rest of your budget on a prime lens. Prime lenses do not zoom (prime meaning one focal length), but because of that, they’re cheaper to manufacture and they are “fast”, meaning they have really wide apertures.

My favorite lens on my D60 was a 35mm prime lens. This is equivalent to a 50mm prime lens on a full-frame camera, which is what I have for my Nikon D600, and it’s still my favorite lens. You can get either of these for about $200 new. Used prices typically don’t get much cheaper than new (these lenses retain their value), but you can always look.

Read Understanding Exposure

You’ve got a camera and lens, so now you need to learn the basics. If you leave your camera in Auto mode, you’re wasting your money. You might get lucky in Auto, but spend a little time and just learn the basics as you go.

Understanding Exposure is the only book I’ve read on photography and the extent of any “training” I’ve had. The author teaches the exposure triangle (ISO, aperture, and shutter speed) which is necessary to understand your camera. Once you learn these you’ll know what you can (and can’t) do with your camera.

Shoot!

Now, time to get some photos of those pups!

My Photography Gear

For those interested, here’s all the gear and software I use for my photos.

• Nikon D600 – Amazon Link
• Nikon 50mm Lens (prime lens) – Amazon Link
• Nikon 24-85mm Lens (kit lens) – Amazon Link
• Nikon 70-200mm Lens (zoom lens) – Amazon Link
• Speedlight – Amazon Link
• Tripod – Amazon Link
• Camera Bag – Amazon Link
• Spyder4Pro (monitor calibration) – Amazon Link
• Adobe Lightroom – Amazon Link

So, for the first iteration of my standing desk, I found this desk on Amazon and it served its purpose for over a year. Note: this “desk” is quite small and probably won’t work for most people (I myself decided it wasn’t large enough after a while). But it’s a great cheap option.

Finally I decided I needed something larger and started browsing IKEA’s desks. IKEA sells most (all?) desks as separate pieces – the surfaces and the legs. So, it’s really easy to find a desktop surface that will work for you. I decided on the HILVER table top because it fit nicely in the small amount of space I had available. It’s great for a standing desk because it’s very, very lightweight (compared to other IKEA table tops).

My Current Office

What’s that?? A chair?! I thought this was a standing desk!

So, some days I’m just tired. That happens to parents of twins (ok, that happens to all parents). A tall stool/chair is required those days you just need to rest your legs for the afternoon. I went through a couple of stools until I found one that would do. Here’s the one I settled on. It’s not perfect, but it’s a great cheap option. It was hard to find one that would match my desk’s height, but this one reached it at its max setting.

Installation

To mount a desktop surface to the wall you’ll needed heavy duty L brackets. I picked up 3 for about $20 each at Lowes. But you can find similar items on Amazon. You’ll want to mount these into the studs; drywall won’t cut it (I know from experience). The length and durability necessary will depend on the size and weight of the surface you choose.

To determine how high to mount the desk (this is important) I used The Human Solution calculator.

You’ll need hardware to attach the L brackets to the wall (get some large screws). I predrilled holes into the studs so I wouldn’t burn out the motor in my cheap drill with the large screws. I used a line laser to ensure the L brackets were aligned, but you can just use a regular ol’ level if that’s all you have.

Once you have the L brackets up, then you can determine how you want the desk resting on top of them.

I didn’t want the back of the desk to be flush with the wall. If it’s against the wall, then you’ll have to run wires along the desk/wall. Leaving a little space allows the cables to drop directly below to their destination. The space also allowed me to mount my monitors with these monitor arms to free up some desk space. I think the style of the bevelled HILVER table I have actually looks better an inch or two from the wall.

Once I had the desk in the position I preferred, I used a pencil to mark the holes to attach the L brackets to it. Then I predrilled some small holes into the desk and then placed it back on the L brackets. Tiny screws are fine here.

Completed Desk Setup

I mounted my HILVER desk by myself during my lunch break one day. It’s a pretty easy project.

Cable Management

My wife had purchased some pegboards for the garage to organize our tools, so I stole one of the three panels and turned it into a “server rack.” It saves a lot of space for all of the gear I have in my office.

TV Stand

A TV stand is a perfect addition to a standing desk. Most of my gear is mounted to the wall, but the larger items, a printer and my laptop, are housed in a TV stand I purchased from Wayfair. Make sure you don’t get one that has too much depth though, or you won’t have anywhere to stand. You also need one that doesn’t sit flat on the ground so it’ll allow room for a standing mat to slide underneath.

The Hot Water Heater

Back to my office…

Wait. Is that a hot water heater in this guy’s office?

Yep! I named him Wilson.

The problem is when printing (in Google Chrome or certain versions Internet Explorer) the mobile layout is rendered.

There are numerous suggestions floating around about how to fix it, but I didn’t like any of them.

So I decided to see what it’d take to get it to work for the particular app I was working on. This is a pretty small app with about 10 distinct pages. However, Bootstrap responsive utility (visible-xs, hidden-xs, hidden-lg, etc) and the responsive grid (col-sm-2, col-sm-10, etc) classes were littered all over the markup.

So I decided the solution would be to change the print styles to use the “small” (or “sm”) layout. This got me most of the way there, and then I had to sprinkle in a few hidden-print styles in our markup.

Note: Some of the styles I’m working with were deprecated in Bootstrap 3.2. However, deprecation doesn’t mean removal, so I’m still using them. We use these responsive utlities for tables, and so we didn’t want to give them up just yet.

@media print {
    .make-grid(sm);

    .visible-xs {
        .responsive-invisibility();
    }

    .hidden-xs {
        .responsive-visibility();
    }

    .hidden-xs.hidden-print {
        .responsive-invisibility();
    }

    .hidden-sm {
        .responsive-invisibility();
    }

    .visible-sm {
        .responsive-visibility();
    }
}

The above code references the Less mixins provided by Bootstrap. If you aren’t using Less, then just use the CSS output. I’ve made it available here:

Print CSS Fix for Bootstrap 3

I just created this and haven’t thoroughly tested it to work for all scenarios, but it “works on my machine.” Let me know if you notice a problem and I’ll update the post.

Cloud Backup is a Necessity

You need to backup anything that’s dear to you “to the cloud”. Simply backing up to another disk in your home is not good enough. While that does solve the problem of a disk failure, it does not solve the problem in the event of:

• house fire
• burglary
• double disk failure

Poor Man’s Cloud Backup

Last year I started getting serious about backing up my personal photos and videos. I wired my old 1 TB external disk to my ASUS router to enable storage over our home network. Then I purchased Arq for Mac to backup nightly to Amazon Glacier. This solution worked, but it was SLOW. So I began searching for a faster and ultimately better solution.

Synergy with Synology, Google, & Adobe

In this post I’ll detail my current setup that involves the following tools and services:

• Synology NAS
• Google Drive
• Adobe Lightroom

Synology NAS with Cloud Sync

Earlier this year I purchased a Synology NAS and a Western Digital 3 TB Harddrive. I had been saving up for a new lens for my Nikon DSLR, but decided to redirect that savings into a better backup solution. I had heard about Synology as a way to solve the space problem of these fast, small SSDs that are commonplace in laptops. The Synology software is excellent and solves the problem perfectly. I was worried about network speeds, but on a wired Windows 8 laptop I get 90-100 MB/s. I don’t achieve those speeds on my Macbook over wireless, but it’s sufficient for use with Adobe Lightroom (which creates a local cache of preview images). There are apparently problems with the latest version of Mac OS X and Samba, but in my experience it is still good enough.

I didn’t know about all of the features that I’d be getting when I purchased a Synology NAS. I won’t list them all here, but there are tons of built-in features and add-on packages to turn this little box into a super server.

With the Cloud Sync add-on package you can very easily sync files to Google Drive and/or Dropbox. There’s also a package to backup to Glacier on a schedule, if you prefer that sort of setup.

Google Drive for Cloud Storage

Just in time for the arrival of my Synology NAS, Google slashed prices on Google Drive. These prices matched what Amazon is offering with Glacier and are 1/10 of Dropbox’s prices. Technically, Glacier is still cheaper – you only pay for the space you use, whereas with Google you pay for storage in blocks. But the experience with Google Drive is worth the few extra dollars per month.

My previous backup solution to Amazon Glacier was sufficient but it was not very easy to work with, and the backup only performed on a schedule (i.e. nightly).

With Google Drive, uploading begins immediately and it’s much, much easier to manage the cloud storage. Google Drive’s web interface is excellent, and I actually prefer it to Mac’s Finder for browsing through my photos and videos.

The best feature of Google Drive is the availability of your files no matter where you are. With Synology, you have the ability to VPN home to access your files, but with Google Drive, it’s not even necessary. Just pull up the app on your phone or visit the website on any desktop computer. Want to share some photos? Just a click away – no need to reupload.

Experience with Adobe Lightroom

Adobe Lightroom is the perfect companion for photos stored across the network. Lightroom generates previews for lightweight local storage while the RAW image files remain on network storage. Currently I have a catalog with over 17,000 photos and it’s snappy. I have Lightroom create previews on import from the camera, and this process does take a few minutes. But once it’s complete your images are on disk, uploading to Google Drive, and ready for editing.

Conclusion

This solution has worked well for me. My photos are backed up and it doesn’t interfere with my workflow for editing and it’s pretty much instant and automatic. If someone breaks into my home and steals my laptop, my Synology NAS, and my camera, I’ll still be able to access my files on Google’s servers.

If you have any questions about my setup, Google Drive, or the Synology NAS let me know in the comments.

Update October 3, 2014

Back in August Dropbox dropped prices to match Google Drive. All of my personal items are in Dropbox so I decided to switch from Google Drive to Dropbox for the backup. It’s pretty simple, but I did have to upload all the photos again to Dropbox. If you do the switch as well, just make sure to get everything in Dropbox before you remove them from Google Drive.

Note: Dropbox is also actually cheaper than Google Drive, if you pay for a year in advance for $99.

Update November 11, 2014

So, couple of updates since my last post. Synology recently released a new version of their software and Amazon made a big announcement about unlimited photo storage.

Selective Sync with Synology DSM 5.1

Synology recently released DSM 5.1 which has the ability to do selective sync (among other things). I’ve configured mine to only sync my Photos and Videos which are exclusively stored on my NAS:

So now, instead of having my entire Dropbox folder duplicated on my NAS, just the Photos and Videos folders are there:

Also new to DSM 5.1 are file filters, a maximum file size setting, and a maximum file history log size. I think the file filters are pretty good by default. It should get your RAWs and JPEGs, just double check it to make sure. I’m not sure what changing the “Max number of records in history log for each linked account” setting does, but I set it to the maximum value of 100000.

Unlimited Photo Storage with Amazon Prime

On November 4th Amazon announced Prime Photos which means free unlimited storage for your photos. This is only for personal photos apparently, which covers me since this is just a hobby (sorry professional photogs!)

Prime Photos is a part of Amazon Cloud Drive (which I didn’t even know existed until this announcement). Sadly, it is not one of the online services that Synology currently integrates with in the Cloud Sync app. I reached out to Synology about the Amazon Cloud Drive support and got this response:

Thank you for your inquiry.

I will certainly pass your request along to our developers for consideration.

Which seems like a generic response. However, Synology did respond to the request for selective sync, and I bet this will eventually come about. There’s a topic on the Synology forums if you’d like to leave a comment which might help provide motivation for Synology to add it.

Update November 19, 2014

I’ve recently setup a better wireless configuration and thought I’d share. I’ve purchased an Apple AirPort Extreme and placed it in the room where I do my primary photo editing. It’s wired (over a Gigabit network) to my main ASUS router that’s on the other side of the house, upstairs. My Macbook Air is the 2011 edition, so it doesn’t take advantage of the 802.11ac speeds offered by the new AirPort Extreme, but I of course have plans to upgrade my Macbook in the future, and will be able to take advantage of those speeds then.

My Macbook Air 2011 has 802.11n WiFi, and here are the speeds I’m actually getting when copying files from my NAS to my Macbook over wireless.

First, a large (approximately 1 GB video):

And photos:

I saw it peak at about 18 MB/s which is not terribly bad, and in fact, feels pretty quick. It took less than a minute to copy the 1GB video.

I’d really like to see what speeds I get on a Macbook with 802.11ac. I’d recommend the Airport Extreme if you’re working on a Mac.

Here’s some links to all the equipment I’m using.

Synology NAS – Western Digital 3 TB Drive – ASUS Gigabit Router – Apple Airport Extreme

It was a process to get exactly what I wanted, and this post will serve as a guide to anyone that wants to do something similar.

Day One → HTML → PDF → Blurb → Book

1. Day One → HTML

Update May 11, 2015

I recently developed a different approach to this problem. This should be much easier for most users. You don’t need to install anything. Just visit https://dayone.donnierayjones.com and drag-n-drop your Day One journal file. It does still require Dropbox sync.

I’ve removed links to my original version that was much more difficult for non-programmers to follow. If you want a link to that just write me a comment below.

2. HTML → PDF

Then I just used Google Chrome’s print to PDF feature to get the PDF I needed. I had to work out the print stylesheet a bit to get everything to fit nicely into pages and not waste too much whitespace.

Ultimately, I now had a PDF that I just needed to turn into a printed book.

3. PDF → Blurb

Blurb offers a PDF to Book service. I had to do some tweaking to the PDF file’s size and format (and it’s really too involved to include in this post), but once I got it all figured out it was easy to set up in Blurb. You upload a cover image and the PDF pages and that’s all there is to it.

4. Blurb → Book

A few days after submitting the project on Blurb I received my newly minted book in the mail. The quality of the book is outstanding considering the price (about $60 for 150 page hardback).

Here’s the final result.

All images in this post are licensed as Creative Commons – Attribution.

Easy, Right?

While the extension is actually a very simple Chrome Extension, there were a few things I had to put in place to get it to work. There were a couple roadblocks:

• Pandora offers no API
• The Rdio API has a same origin policy

No Pandora API

Pandora doesn’t offer an API. All I needed to know was when someone “thumbs ups” a song, and what the artist and track are. Because there’s no API, I decided to just use a Google Chrome content script and listen to the click event on the various “thumbs up” buttons scattered across www.pandora.com.

Rdio’s Same Origin Policy

Rdio’s API (http://api.rdio.com/1/) has a same origin policy. So I created a proxy in Node.js. This “proxy” does a little more than merely proxy requests to the Rdio API, though.

I have it hosted on Heroku, where it’s also serving as the public landing page for PandoRdio. You authorize PandoRdio’s access to your Rdio account through here, and a cookie is set to handle the OAuth requests to the Rdio API.

Rdio JavaScript Library

Now that I had a working proxy up, I just needed a small JavaScript library that used it and provided the handful of API methods I needed to use. It’s available on GitHub and provides the following API methods:

• search
• addToCollection
• setAvailableOffline
• getPlaylists
• createPlaylist
• addToPlaylist

All Together Now

Here’s all the apps involved:

• pandordio-node – the Node.js proxy
• PandoRdio – a project containing Rake tasks to build the rdio-api and copy it into pandordio-chrome
  • pandordio-chrome – the Google Chrome Extension
  • rdio-api – the Rdio JavaScript Library

Credits

Almost all of the Node.js code is based off monsur’s rdio-node.

The Google Chrome Extension

So, now I had all the ingredients necessary to write the extension that would add a song to my Rdio collection when I “thumbs up”ed a song in Pandora. The result is the PandoRdio extension available in the Google Chrome Webstore.

I want my desktop wallpaper to rotate through my Flickr Favorites. I need the original (or large-sized) images, and I want the images to automatically download to my Dropbox.

The Solution

Node.js + IFTTT

Flickr’s RSS and Atom feeds don’t offer the original image size in the feeds. I wrote a Node.js app that uses the Flickr API to expose an Atom feed with larger image sizes.

IFTTT has a channel for RSS/Atom feeds and a channel for Dropbox. This is the recipe I needed:

IFTTT downloads the images (within 15 minutes after favoriting) to my Dropbox:

Usage

I’m sharing this in case anyone else wants a free solution. To use it, just use this IFTTT recipe. You’ll have to edit the feed url. Change the id portion to your Flickr Id. You can find your Flickr Id using idGettr.

For example, my Flickr Id is 11946169@N00, so the url I use is http://flickr.donnierayjones.com/favorites/11946169@N00.atom

I also expose the originals of your own uploaded images. The feed URL for this (assuming Flickr Id 11946169@N00) is http://flickr.donnierayjones.com/photos/11946169@N00.atom.

The Open Web

This is what I love about the Web. I don’t have to pay for an app in an App Store. I can just fork a couple of repositories on Github, write a quick Node.js app, and deploy to Heroku for free.

Here’s a screenshot:

I use Readability as my “read it later” service, and I use Instapaper’s Text Bookmarklet if I just want to read an article now. If you use Readability’s Read Now bookmarklet, it adds it to your Reading List, which isn’t what I usually want.

I also rely on Google Chrome’s search engines to activate my bookmarklets. If I can use a bookmarklet rather than a Chrome Extension, I will.

The Code

I said that this extension is very little code, and it is. Here’s the JavaScript:

$('pre:not(:has(code)), pre code').each(function(i, e) {
  hljs.highlightBlock(e);
});

And the CSS:

pre, code {
  background: transparent !important;
}

I was originally just using dotjs and dotcss to do this, but it’s not as easy to share across platforms (I’m on a Mac and on Windows).

Installation

You can download Coderbility from the Chrome Web Store or you can fork it on Github.

Issues

I’ve noticed that it doesn’t work well with some code snippets, and I haven’t bothered to find out why. I’ll try to look into these as I have time.

Twitter for Mac Drawbacks

I never liked Twitter for Mac. I tend to stay in the browser – it’s safe there. I like Sparrow, but I still use gmail.com. I like Reeder, but I keep going back to Google Reader and readability.com. In fact, I think the only app I stick with that’s not running in the browser is the one I’m writing this post in: iTerm2.

That’s all I need: a browser and a command line.

However, there were some things I liked about Twitter for Mac, my favorite of which was the simplicity. I don’t need all the extra stuff Twitter’s pushing, I just want my timeline and to occasionally send a tweet.

Keyboard Shortcuts

Twitter for Mac does have some of the shortcut keys that are available on the website, but it doesn’t have the enter key for expanding a tweet. The enter key on Twitter for Mac does various things depending on what you’re focused on. I like the twitter.com web app’s behavior better.

Optimize My Screen Real Estate

I also didn’t like how Twitter for Mac keeps a sidebar on the left. Sure, it’s pretty small, but it’s several pixels being used that I don’t need. You can open the timeline without the sidebar (Window > Open in New Window) but there’s no way to make it the default view.

It’s not on Windows

The biggest problem with Twitter for Mac is that it is for Mac (only). I use Windows for 8 hours a day at work.

Responsive Twitter

I had been running some simple stylesheet hacks via the Stylish extension on Google Chrome. With these I was able to fix the only issue I had with twitter.com: the layout. I wrote up a few media queries in a stylesheet that let me resize the window down. I was running this for several months but it had some drawbacks:

• No syncing of stylish options across Google Chrome. I.e. I would add a style at home but would have to add it on my work machine too.
• No easy way to launch twitter.com in a narrow window.
• No easy way to share styles.

The Google Chrome Extension

So, I wrote a simple Google Chrome Extension. Responsive Twitter adds the same media queries I was using with Stylish, plus some. Since it’s an extension, I can also run JavaScript. And I can hook into some of the features specific to Google Chrome. Here’s a few things I could add by using a Chrome Extension:

• Disable jQuery animations
• Open links in the timeline in the background
• Launch twitter in a separate, chrome-less window
• Easy sharing with others
• Sync between all of my computers (via Google Chrome Sync)

Quick Notes on Developing a Chrome Extension

I learned a bit about how Chrome Extensions work while writing this extension. One thing that’s a little hard to grasp is how content scripts and background scripts can communicate with each other and how much control (or lack thereof) you have over the page that’s loaded.

The hardest feature to add was disabling jQuery animations. Well, actually, when you learn how it’s really easy.

With a Google Chrome Extension, you can’t get direct access to the page’s scripts or variables. You basically get access to the DOM, and that’s it. So to disable jQuery animations you can’t just run the following in a content script:

$.fx.off = true;

$, or jQuery, is defined on twitter.com and you can’t get access to it. However, we can execute JavaScript by setting the browser location in our content script!

document.location = 'javascript:$.fx.off=true;';

Well, that was easy!

Future Developments

I hope to do some more work on the extension in the future:

• Open links in the timeline with keyboard shortcut o – update 2012-04-05: done!
• Better implementation of screen position/size storage – update 2012-04-15: done!
• Better implementation of opening links in the background – update 2012-05-02: done!

Make Twitter Responsive

You can install my Responsive Twitter Chrome Extension, or fork/clone the repository on GitHub.

I read so much more on my Kindle!

Liars – that’s what I thought. Either they were lying, or were tricked into thinking they’ve read more. Well, I’ve had mine for just about a month now, and I feel the same way. So either I’m lying, have been tricked, or I really am reading more now that I have a Kindle.

Hesitation

I was hesitant to get a Kindle for two main reasons:

1. I like physical books. I like quickly scanning how many pages a chapter will be. I like the immediate feedback of how much I’ve read, and how much more I have to read. And yea, I like the smell of a new book.

2. There was no way I could read a software book on the Kindle. There’s too many diagrams, charts, code examples, etc. to read on a tiny six inch screen.

Fiction and the Lending Library

So, why did I get a Kindle?

My wife got me addicted to The Hunger Games series, and it got to where we were both reading the last book in the series, Mockingjay.

We usually read at the same time – just before going to sleep. So I thought about buying an additional copy, but then I noticed this thing on Amazon called the Kindle Owners Lending Library. It’s only available for Kindle owners. I.e. you can’t get books on your Kindle for iPhone or Kindle for Mac.

Mockingjay was available for free in the Lending Library. I had some Amazon gift cards, so without much thinking, I decided I needed a Kindle.

So I bought one. And I finished Mockingjay the same day I got the Kindle.

I Read More Now

The Hunger Games books are good. So good they’re making a movie out of’em. So maybe that’s why I read the last one so quickly onthe Kindle. It’s not that the Kindle is magical or anything, right?

But then I noticed something else. I discovered that you can send blog posts to your Kindle.

My Old Workflow

Before I had a Kindle, I had three methods for keeping up with posts I wanted to read later.

1. Google Reader – I used the star feature to keep up with blog posts that I wanted to read later.
2. Twitter – I would favorite a tweet that linked to a post that I might want to read later.
3. Chrome Bookmarks – Any other posts I came across on the internet I would bookmark to Google Chrome’s Bookmark Bar.

So, I’d have three different places to check when I had time to do some reading.

My New Workflow – Readability

Now it’s much easier.

Readability is practically integrated into every piece of software. Now whether I’m in Google Reader, Twitter, Tweetbot (iPhone), or Google Chrome, I can send the blog to my reading list on Readability.

And with Readability, I can send longer posts to my Kindle very easily. Now, every night just before I go to sleep, I can pick up my Kindle and read a post or two. It’s awesome.

Physical to Digital

So, the Kindle’s great for fiction and can be great for long blog posts. But what about those software books that include diagrams, charts, and code examples?

I purchased Clean Code for my Kindle and I’m about half way through with it right now. However, I’ve been reading it mostly on Kindle for Mac. Of the 11 chapters I’ve read, I’ve read only about 2 or 3 on my Kindle. I was always opposed to reading on my MacBook, but that was when I would try to read books in .pdf format. The .mobi format works extremely well:

Where Digital Wins

1. The Dictionary. Double click (or touch) a word in any book and you get a quick definition of the word. Also, Wikipedia is nicely integrated:

2. Highlights & Notes. I was always hesitant to write or mark in any book that I’ve purchased. It hurts its resale value and highlights are only temporarily valuable (at least to me). Once I’ve grokked something I’ve highlighted, I’d like to be able to remove that highlight and continue on to others. With the Kindle, I can do that.

3. Universal Access. I can access my books on:

   • My Kindle
   • My MacBook Air
   • My PC at Work
   • My iPhone

Pricing

The major drawback to Kindle books is that they have a $0 resale value.

However, I’ve found Kindle books to be (for the most part) dramatically cheaper than their physical counterparts. I can get two Kindle books for the price of one hardback. I think this makes up for the lack of a resale value.

Conclusion

I’m still uncertain of how I will like the Kindle (and the idea of digital books in general). I’ll have to try a few more books before I’m certain that I now prefer digital over physical.

I think there’s still a place for hardback books in my library. Reference and catalog books, like GoF’s Design Patterns and Fowler’s PoEAA are still valuable to have in an easy / quick reach. However, there’s also a lot to be said about a digital book that is searchable.

So for now I’m defaulting to Kindle editions. I’m selling all of my paperbacks and getting Kindle versions. Hopefully I won’t regret it.

While in college I used Mint to manage my finances and budget. Budgeting for myself was hard; budgeting for two people is (exponentially?) harder.

After marrying, my wife and I continued to use Mint. After several months we she decided to try Dave Ramsey’s “cash only envelope system”. After the first paycheck of using cash we were amazed at how well we managed our money.

Cash is Physical

When you’re handing over several $20 bills rather than swiping a card, well, your handing over several $20 bills. It makes each transaction a little harder on you. It’s a mental transaction, as well as a physical one. It makes you ask, “do I really need this?”, or, even better, “do I have enough cash for this?”

I think using cash is similar to the way that writing something by hand (rather than merely reading or typing) helps you to understand and remember something. Using cash takes a little longer and it is more of a physical exchange – you hand over cash and you get an item. When using a debit card, you keep your card (hopefully), and perhaps imagine that number in your bank account shrinking.

Cash Puts You in Control

Using cash also means you have to budget your money ahead of time. When we were using Mint, we had budgets created and it was nice that Mint automatically categorizes transactions for you. However throughout the period between paychecks we would always go over in one area and under in one area. Using the cash method, we budget for each category and each category gets an envelope for cash. When the envelope is empty, that means we’ll have to wait until next paycheck to buy something in that category. Mint does provide “real time” budget amounts, but sometimes debits don’t post on the same day or don’t show the correct amount until posted. And it’s just not as obvious as an empty envelope.

Exceptions

It’s worth noting that we don’t actually use cash for everything. We use debit/credit where we find it to be an inconvenience to use cash, or where we don’t typically spend beyond our means. For example, I pay all of our bills online with a credit card (easy rewards points) and then immediately pay it off with a transfer from our checking account. We pay for gas with debit/credit for the convenience. All of these expenses tend to be fixed every month or at least somewhat predictable.

Mint’s Replacement

I use Google’s online applications for several things. I’ve already written how I use Google Calendar for bill reminders. I use Gmail (who doesn’t?) and I use Google Reader to keep up with my favorite blogs. I use Google Tasks for things like grocery lists and books to read. Google Chrome is essentially my OS and I always have Gmail, Reader, and Calendar as pinned tabs.

I was a fan of Mint, and I used it a couple of months after switching to cash, but it just seemed like the wrong tool for the job. I had used Google Docs Spreadsheets for us to keep up with other financial information (medical school loans are complicated.) So I put together a spreadsheet to manage our budget based on a bi-weekly pay period. Here’s the result after months of manipulation and improvement (note: amounts may be edited for obvious reasons).

With this spreadsheet, we can easily budget months in advance just by scrolling to the right and budgeting for the desired pay period.

Along the very top is the (bi-weekly) date of the paycheck. Under each date are three columns. The first column are money values for various things, some are static (e.g. Income) and some are dynamically calculated (e.g. Total Expenses, Remaining).

Calculations

Most of the spreadsheet uses basic calculations. The Total Expenses row is pretty obvious, just sum everything below it.

Similarly, the Remaining row is just the difference between the Income and the Total Expenses.

Something I got tired of quickly was determining what expenses we needed to withdraw cash for. Typically we’ll withdraw however much cash we need (based on the budget) on payday. I began developing an app in Ruby on Rails (I don’t know that I really needed an app or was just wanting to learn something new), but I finally realized I was just trying to build an application that a spreadsheet should be able to solve. All I needed was something that could calculate a sum based on a conditional value (the condition here was whether or not the expense needed a cash withdrawal).

I quickly found out that there’s a SUMIF() function baked into Google Docs:

So that’s when I created an additional column for each pay period to denote whether or not we needed cash for the expense. I use an appropriate cash symbol ($) to distinguish those expenses that are cash items. Using the SUMIF() function I can get the total amount I need to withdraw when I go to the bank on payday. One more thing automated!

Handling Various Bill Cycles

My wife’s in medical school and so we have a good dose of loans every year. What we do is place these loans into a checking account and then equally divide the total across a 12 month period to cover costs. The amount we use each month typically covers almost all of our recurring bills. You may have noticed we don’t have any specific bills (e.g. electric, AT&T, etc) in the budget above. That’s because we don’t typically use my paycheck to pay bills; we usually use loan money to cover those. However, sometimes the loan money is not enough to cover all the costs of the bills, so we do have a generic “Bills” expense that we use to cover these overages.

I created a separate spreadsheet for monthly bills. They group well together with the loan money because the bills occur once a month, and we use an allotment of our loan money once a month. I thought about trying to integrate everything into one budget spreadsheet, but because our incomes vary by date and occurrence (i.e. I’m paid every two weeks and use our loan money on the 10th of every month) I felt it was best to keep them separate for the sake of simplicity. Here’s our bills spreadsheet:

This spreadsheet is very much similar to our budget spreadsheet, only much simpler. Because all are non-cash expenses (we pay them all with a credit card to earn rewards points, and then pay off the amount immediately from our checking), we have no need to distinguish between cash and non-cash items. Any time the Remaining amount becomes negative, that means our budget (from my paycheck) needs to compensate the difference. This spreadsheet has an added bonus of us being able to keep track of any abnormal billing changes.

Manage your money – don’t let it manage you

Some may argue that Mint is better because it will automatically categorize your money and provide amazing charting tools to analyze spending trends. You can save a lot of time by using Mint. I can’t argue that Mint doesn’t have some neat tools and charting, but I don’t think that it helps with budgeting. The fact that we have to manually budget and keep track of expenses with a spreadsheet helps us better understand how we’re spending our money.

We tell our money what it can do, not the other way around.

Here’s all the extensions I’m using. Note: I’m not using any web development related extension for Chrome; there are good ones out there, but as I mentioned, I use Firefox when debugging web apps.

• AdBlock It seems like I’ve used this extension ever since I started using Firefox. For those who don’t know, it’ll block all those annoying ads littered across the internets.
• Better Gmail While this extension does a lot, I only use a subset of its features:
  • Hide ads (AdBlock hides these ads, but Better Gmail will hide the entire ad column, which allows for more space for your actual email)
  • Hide invite friends field (who actually invites folks nowadays?)
  • Hide web search button (I already have 10 other ways to search google)
  • Add attachment icons (gives a hint as to the attachment file type)
• Embedly This extension is just amazing. It makes the #NewTwitter even Newer. It ads information to the side panel for almost all types of content. Twitter will automatically do Twitpic, YouTube, etc, but this extensions gets everything. It’s the reason I’m now using twitter.com rather than the Twitter app for Mac.
• Facebook Photo Zoom Zooms Facebook photos as you hover over them. Saves a lot of time!
• Fittr Flickr This extension does a lot, but what I use most are the shortcut links for different image sizes, shortened flic.kr links, and quick viewing of image metadata.
• iReader Sometimes removing ads on a page still doesn’t remove all the noise to make an article readable. That’s what iReader is for.
• RSS Subscription Extension RSS subscription isn’t baked into Google Chrome, so this extension is a must-have.
• Type-ahead-find A feature built into Firefox (known as Quick Find) is not available in Google Chrome, but Type-ahead-find is Chrome’s Quick Find equivalent. Without this extension, I would have not been able to switch to Chrome from Firefox.

• Mac Apps
• Chrome Extensions
• Firefox Addons
• Windows Apps
• iPhone Apps

These posts will mostly be a reminder to myself; I don’t want to forget about my favorite apps. Instead of static posts, I intend to keep them up-to-date. They will help me remember what I need to install when setting up a new system. Though, I can see this not being a problem in the near future (or present day) with everything “auto-remembered” for me: iPhone App Store, Mac App Store, Chrome Sync, Firefox Sync, etc.

Anyways, here are my Mac must-have apps:

• Alfred – Application Launcher First App I found in the Mac App Store. I had been doing the Quicksilver / Quick Search Box thing, but I liked Alfred’s UI better. And it seemed quicker. I mostly use it for launching apps, though (like its competitors) it does more than just that.
• Dropbox – File Syncer Dropbox is pretty much a necessity now-a-days when needing to get files synced across computers. I find the 2GB (plus the extra space they give away time-to-time) plenty of room for what I need.
• Firefox – Browser While I lean heavily on Google Chrome now for my daily browsing, some of the web development addons that aren’t available in Chrome are enough to keep Firefox on my Mac.
• Flickr Uploadr – … Flicker Uploader? I use Flickr to host my never ending photostream of my kids (or dogs). Flickr Uploadr is the only tool I’ve ever used to upload I think. It’s not been updated much (that I’ve ever noticed) but I don’t think it needs to be. It easy, fast, and works.
• Google Chrome – Browser For the last several months Chrome has become my primary browser. My main reasons for switching from Firefox were: faster, quicker, speedier, nimbler, and faster. It also didn’t hurt that Google gave me a laptop to test their OS written on top of it.
• GrabBox – Screenshot uploader This little tool is pretty neat. It automatically uploads screenshots you take on your Mac to a public folder on your Dropbox account. Quickly sharing photos has never been easier. I mostly use it for screenshots that I temporarily want to share, because as soon as you delete the photo from your Dropbox folder, the link becomes a 404.
• Isolator – Productivity enhancer This guy sits in your menu and let’s you switch into productivity / reading mode with a keybinding or by clicking the icon in the menu. I have dual monitors so I tend to get distracted when reading, so that’s when I start Isolator. It’s quite configurable, too.
• MacVim – Text Editor I recently decided to give Vim a try, and this is the GUI Vim editor for Mac OS X.
• MenuPop – Quick Apple Menu Opener Cause sometimes you want to get to the Mac Menu with your keyboard and you don’t want to press Ctrl + Fn + F2 to do it.
• Picasa – Photo Editor / Manager I hate iPhoto. Picasa fills the gap. I especially like the “I’m Feeling Lucky” option. Gets my photos fixed 80% of the time. The other 20% I can manually fix with its tuning options. All my Flickr photos go through Picasa.
• Pixelmator – Photo Editor Photoshop is $1000, Pixelmator is $30. Because I’ve recently decided not to pirate any software what-so-ever, I’ve had to ditch Photoshop and pay for my first application. I don’t like paying for software, but I don’t like Gimp, either.
• Reeder – Google Reader App I’ve tried switching to a prettier Google Reader interface before, but never stuck with one until Reeder came along. I’ve got in on the iPhone too, but  I don’t really do much reading on it anymore. My favorite feature on it is the option to view the post with the “readability” fix. Keyboard shorcuts are somewhat different than the default Google Reader webapp, which is annoying!
• Remote Desktop Connection – RDP Client At work I’m a PC, so this is app is a must.
• Sizeup – Window Management I’m using this app in “demo” mode, so that it nags me to purchase it after several uses. I don’t like it enough to pay for it, but I like it enough that the nagging doesn’t annoy me enough to remove it. The Mac lacks any kind of window management, and this app greatly helps in this area.
• The Unarchiver – Compressed File Decompressor Unzips most file formats, except it seems to have trouble with some encrypted ones (7z, for example).
• Transmission – Bittorrent Client Every now and then (before my switch to legal software/music only it was every day) I need to use bittorrent. I chose Transmission over uTorrent because it was simpler.
• Twitter – Twitter Client I really like the new twitter.com, but this app is too cool, and it doesn’t take up much screen space.

I’m interested in Chrome OS because my current netbook, a Dell Mini 9, has Mac OS X Snow Leopard installed, but I really only use Google Chrome on it. On a notebook, that’s really all I need these days.

Soon I’ll write an in-depth review, but for now I’m sharing my initial thoughts on the software and hardware that Google gave me.

Hardware

The laptop seems to be pretty well built and sort of resembles a Apple laptop. It’s extremely minimal and the keyboard is very nice to use. The screen resolution is 1280x800 and the trackpad is huge.

Pros:

• New Tab key instead of Caps Lock
• Spacious, browser-oriented keyboard
• OS specific keys instead of F1, F2, etc. keys
• SD slot included (not yet tested)

Cons:

• Trackpad is horrible (though this is most likely a software issue?)
• Right clicking is awkward (it involves clicking the trackpad, which doubles as a button, with two fingers)

Software

Well, it’s Google Chrome.. and that’s pretty much it. But it’s awesome that I can log into the machine with my Google user account, and right when the OS starts, I have all of my extensions and bookmarks. All my settings, synced, no setup required. Google’s been preparing for that seamless integration for a while, and it shows.

Pros:

• It’s Google Chrome!
• Switching between Chrome “windows” is very nice and smooth. It’s almost like having Spaces.
• Like the browser, it can remember the open tabs when you shutdown and will restore them at logon.
• Ctrl+Alt+/ shows common keyboard shortcuts. Awesome!
• Gmail chats stay “always on top” at the bottom of the screen.

Cons:

• The system font is ugly. I’m pretty picky when it comes to fonts… I just wish there were more settings to set the font or at least turn on font smoothing.
• Runs a little slow at times, but I’m sure that’s due to limited hardware.
• No support to hide extension icons from the toolbar like you can on the latest version of Chrome for Windows (note: I’m not actually sure what version of Chrome enabled this, but I noticed the option recently).

I plan on diving into Ruby on my Mac soon and was in need of a good editor. I’ve been wanting to use TextMate, but with a $50 price tag (and my recent vow to only use legal software) I was hesitant to go that route. It’s not that I don’t think it’s worth $50, I just have a very hard time spending money on software when there’s free alternatives.

Vim’s been mentioned several times by developers across all development platforms as their favorite editor. What I like best about it is that it’s free.

So I downloaded MacVim and stumbled upon Vim Recipes which I’ve been reading through for a couple of hours today.

I’m hoping that I’ll stick with it and use it. I think I’ll like it; I already use most of the Vim-inspired bindings that are available in Gmail, Twitter, Google Reader, so I’m already familiar with the basics. What I believe is the biggest problem for me is that Vim bindings are not universally available. Sure, Vim can be installed on any environment. However, it won’t be available on a Windows server that I’ve RDPed into and only has Notepad installed. I’ll have typed 100 jki’s in the text file before I realize what I’m doing.

My brain and fingers currently have Up, Down, Left, Right, Ctrl, Shift, Cmd, Alt combinations (that are universally available) ingrained for manipulating and selecting text. Vim isn’t available in comment boxes in my browser. Microsoft Word doesn’t close when I enter :q. I understand there’s probably plugins that enable all this, but that’s not what I’m looking for; that’s not universal. I don’t want 30 Vim plugins to be installed on every machine I use.

But here goes. In a couple of months I’ll either be a jjjk^iHelloWorld master or I will spend $50.

Does anyone have any suggested resources (other than Vim Recipes) for learning Vim?

I tried to come up with a robust and simple solution and I wrote the following jQuery snippet in an email response:

1
2
3

$('form').submit(function() {
  $(this).submit(function() { return false; });
});

It seems simple enough to work, and I tested it in Firefox, Chrome, and IE7/8 and it did seem to do the trick.

However, I haven’t fully tested it. I expect problems on pages that involve ajax requests and rely on multiple submissions without actually refreshing the form.

But for now, it seems to be working. Anyone have a better solution?

We have a base controller that all of our app’s controllers inherit from. We’ve had a [HandleError] attribute on this base controller for a while, but for some reason we never saw our custom error page that was located in ~/Views/Shared/Error.aspx. I thought maybe I wasn’t using the attribute correctly, but it turned out that there was an error rendering the Error.aspx View!

Our app relies on a Master Page that itself relies on a ViewDataDictionary that is always populated by our base controller. To sum up the problem, the HandleErrorAttribute creates a new ViewDataDictionary for the Error View, and because our Master Page needed the ViewData created by the base controller, a null reference exception occurred when accessing properties on ViewData[“MyKey”].

If you run into this problem, you can write a custom HandleErrorAttribute that will fix the problem. I haven’t tested this much at all, as I eventually created a custom MasterPageView base that eliminates the dependency on the ViewDataDictionary. But here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13

public class HandleErrorWithPersistentViewDataAttribute : HandleErrorAttribute {
  public override void OnException(ExceptionContext filterContext) {
    base.OnException(filterContext);

    var typedResult = filterContext.Result as ViewResult;
    if (typedResult != null) {
      var tmpModel = typedResult.ViewData.Model;
      typedResult.ViewData = filterContext.Controller.ViewData;
      typedResult.ViewData.Model = tmpModel;
      filterContext.Result = typedResult;
    }
  }
}

It’s pretty simple (and probably not thought out well enough), but it worked for me. We do need to keep the Model created by the default HandleErrorAttribute which is an object of type HandleErrorInfo, which can be utilized by your Error View.

Another thing that can be done with a HandleErrorAttribute is error logging. It’s pretty simple as well. Just inherit from the HandleErrorAttribute, run the base method, grab an instance of your logger, and log it!

1
2
3
4
5
6
7
8

public class HandleErrorAndLogItAttribute : HandleErrorAttribute {
  public override void OnException(ExceptionContext filterContext) {
    base.OnException(filterContext);

    var controller = (BaseController)filterContext.Controller;
    controller.Log.Error(filterContext.Exception.Message, filterContext.Exception);
  }
}

I found this route handler that does the job well, but I wasn’t sure how to register the route handler. All the examples online used the Route.Add() method to add routes. However, it seems that it’s encouraged to use the MapRoute() method on the Routing collection instead, but the MapRoute() method doesn’t have a signature to provide a custom RouteHandler.

It’s a similar situation when registering routes in Areas. The RegisterArea() method adds routes using the MapRoute() method on the AreaRegistrationContext object.

It turns out that this MapRoute() method returns the Route object that is created. This object has a public RouteHandler property that can be set. This is how I am registering a custom route handler for my route:

1
2
3
4
5
6
7

public override void RegisterArea(AreaRegistrationContext context) {
  context.MapRoute(
      "RouteName",
      "areaName/{controller}/{action}/{id}",
      new { controller = "Home", action = "Index", id = "" }
  ).RouteHandler = new HyphenatedRouteHandler();
}

If anyone has a better way of doing this, please let me know.

To add the userstyle in Fluid, open Preferences for your Gmail Fluid app, and select userstyles. Specify a URL Pattern (I’m using http://mail.google.com/) and enter the following css:

table[class='Bs nH iY'] tr td[class='Bu']:last-child {display:none !important;}

And there ya go, no more sponsored ads.

Update 2010-12-23

Recently I noticed that Gmail started placing more ads below the message. The following CSS should remove it (include it with the code above to hide all ads):

div.nH.MC { display:none; }