Two years ago, I had the privilege of having my print portfolio reviewed by some designers at Emma as well as getting a tour of their awesome office space (which by the way, they’ve moved and their new space is tops). I left that night with the thought of how fun and interesting it would be to work there. I would have never thought that in Fall 2012, I’d find myself joining the crew with much excitement and eagerness to push the company even further.

I can’t wait to get down to Nashville and get to work.

Apps
As part of my reevaluation, a few of my daily apps have changed or become more heavily used:

• Sublime Text 2 – The newest addition, I am amazed as the configuration and add-ons available. It took me a while to get on board with the initial setup, but I’m loving this app and it really is speeding up my work rate. $59 | Configuration
• Terminal – I’m spending more and more of my time in the command line because it’s simply faster moving around my files and folders and actively versioning my assets. Free | Configuration
• Photoshop CS6 – Who doesn’t, right? $699
• Google Chrome – The Web Inspector is constantly improving and in my opinion is streets ahead of Safari or Firefox. Free
• Transmit – When I need to access a server via FTP, this is my choice. Always been the best. $34
• CodeKit – A nice app that does all sorts of things: compiling, image optimizing and browser reloads to name a few. $25
• Cost: $817 (though CS6 cost me less since I work in higher education)

Configurations
As I’m sure everyone does, I’m very particular on how my apps are setup, not only for better work production, but a more enjoyable experience while working.

Sublime Text 2

• Package Control
• Soda Theme – Dark
• Tomorrow Color Scheme – Eighties
• Tag
• A New Icon
• Terminal
• My Settings – Admittely I haven’t customized it much since I’m still exploring all of the features:

{
	"color_scheme": "Packages/Tomorrow Color Schemes/Tomorrow-Night-Eighties.tmTheme",
	"theme": "Soda Dark.sublime-theme",
	"draw_indent_guides": false,
	"open_files_in_new_window": false
}

Terminal

• Oh My Zsh
• Tomorrow Theme
• Homebrew
• Git
• RVM
• My Zsh Theme:

function git_prompt_info() {
  ref=$(git symbolic-ref HEAD 2> /dev/null) || return
  echo "$(parse_git_dirty)$ZSH_THEME_GIT_PROMPT_PREFIX$(current_branch)$ZSH_THEME_GIT_PROMPT_SUFFIX"
}

PROMPT='$fg[magenta]⌘ $fg[blue]${PWD/#$HOME/~} $(git_prompt_info)'

ZSH_THEME_GIT_PROMPT_PREFIX="[git:"
ZSH_THEME_GIT_PROMPT_SUFFIX="] $reset_color"
ZSH_THEME_GIT_PROMPT_DIRTY="$fg[red]+"
ZSH_THEME_GIT_PROMPT_CLEAN="$fg[green]"

Web Services
I use a handful of web services in my daily workflow, some free and some paid:

• WebFaction – My hosting provider of choice. My clients and my own personal projects usually don’t garner large amounts of traffic so a shared hosting environment isn’t a big deal. WebFaction allows you to host any type of site, platform or application under one account, which is really nice. As example, in one site you could run a Rails app, WordPress and a third Django app all under domain, with very simple configuration. Starts at $9.50/m
• Typekit – If necessary and the desired font is available, I use Typekit to serve my fonts. This site is currently serving a few fonts. Starts free with limitations
• Dropbox – I’m not sure I know anyone that doesn’t use Dropbox, but it’s vital for my daily work with clients all over the map. Starts free
• Bitbucket – Yes, I know the cool kids use GitHub, and while I’m on there as well, Bitbucket hosts all of my private Git repos without cost and some public as well. Free for 5 users
• BrowserStack – Gone are the days of multiple VMs on Parallels, Sign in and test in any browser you want. Starts at $19/m
• Ballpark – I’m not a huge fan of the business side of life, but Ballpark makes it easy to track time, invoice clients and get paid. They just relaunched a completely new version not long ago and have even integrated Stripe for online payments. Starts free
• Cost per month: $39.16

So these are the apps and services I used on a daily basis to create websites. I like to reevaulate from time to time because a tool or service is only good if it’s making you work in a way where you produce better work. I’m excited to dive deeper into Sublime Text 2 and really tune it to be the workhorse that I’ve heard about.

The last few months, I had lost the drive to create. Every night when it was time for bed, I wasn’t satisfied with anything I had done that day. I thought new relationships could solve it. I thought new work projects could solve it. Hell, I thought eating a different cereal for breakfast would get me out of this rut. Nope. I longed for the feeling of creating something and being honestly giddy at the final product, and the excitement I’ve come to known with so many great projects I’ve been lucky enough to work on. But, with every change nothing changed.

The more I thought about it, the more I tried to rationalize that it was something that would pass in time. But I slowly began to realize it was something that I needed to be proactive about and continously work on. So, I’ve decided to force myself to do a few things.

1. Eat 3 Meals a Day
For far too long, I’ve made it on lunch and dinner skipping arguably the most important meal of the day. Last weekend, I picked up a compact fridge to put in my office to make eating breakfast as easy as possible.

2. Pray and Reflect
I need to stop praying only for the things I want. And while I’m at it, I need to make time for daily reflection, not just when things are extraordinarly good or bad.

3. Read
My stack of books to read has been growing taller and taller (Thanks Scott!) and I need to be reading them instead of dumbing out in front of the television.

4. Create
Whether it’s a personal or client project, writing here, or taking a few hours to mess around on the banjo, I need to express myself.

These may seem silly and insignificant to most, but I think being proactive with a few changes can’t hurt…maybe it’ll put me right back on track.

Here’s how I’ve got it setup:

Using jQuery, on document.ready(), I append my script from the remove server and pass the current URL:

$('body').append('<script type="text/javascript" src="http://remoteserver.com/ad.php?js&u=' + location.href + '"></script>');

I could simply add this script to the <head> or just before </body> but due to the way the university’s system is setup, this is the best way. Since I’m using PHP/MySQL to manage the indiviual ads, you’ll notice that the script is actually a PHP file. So what does this script do?

After reading this article on 24 ways about not hurting a page when an external script was not available, I decided to set my script up the same way. So my script gathers ad based on the URL and some other details and runs a simple function that writes out HTML:

...database lookup and logic...
publishAd('<div class="ad">' + title + media + body + '</div>');

I know you’re asking yourself how is he running a function that doesn’t exist. Typically, this is when you see an undefined error in your console. It just so happens that I have the publishAd function defined in the same file as the append above. Here it is:

function publishAd(content){
	if(content.length > 0){
		$('#ad-block').html(content).show();
		$('#ad-block').fitVids();
		$('#ad-block a').attr('target','_blank');
	}
}

A couple of things going on here: passing the HTML from above and only continuing if something exists; inserting the HTML into a predefined div on the webpage; binding the helpful fitVids plugin to make videos responsive; and adding a target attribute to have all links in the ad open a new window.

What I won’t go into detail here is the administration side of this platform. I’ve built a simple webform for my colleagues to create text, image and video ads that they can set to start and end at specific times, only show on certain pages and other types of customization. That form saves their ad data to a database which the above ad.php reads from the print the ad.

This was a neat piece of our redesign that I had a lot of fun experimenting with.

Feel free to try out the demo first.

Note: Be sure to include a copy of jQuery or this won’t work.

First, let’s setup our menu’s HTML:

<ul id="menu">
	<li><a href="#part-1" class="active">Part 1</a></li>
	<li><a href="#part-2">Part 2</a></li>
	<li><a href="#part-3">Part 3</a></li>
	<li><a href="#part-4">Part 4</a></li>
	<li><a href="#part-5">Part 5</a></li>
</ul>

Here’s the function that checks the user’s current position from the top of the window. Then updates some classes in our menu. Based on different pixel counts, we’ll remove the .active class and add it to the appropriate list item.

function scroll_update(){

	// Get the current window position
	var position = $(window).scrollTop();

	// Remove the active state
	$('#menu li a.active').removeClass('active');

	// Set li to active based on position
	if(position <= 500){
		$('#menu li:eq(0) a').addClass('active');
	} else if(position <= 1000){
		$('#menu li:eq(1) a').addClass('active');
	} else if(position <= 1500){
		$('#menu li:eq(2) a').addClass('active');
	} else if(position <= 2000){
		$('#menu li:eq(3) a').addClass('active');
	} else{
		$('#menu li:eq(4) a').addClass('active');
	}
}

Now, we just need to tie this function to the window’s scroll event:

$(window).scroll(scroll_update);

That’s it. Now when the user scrolls, your menu will be updated to reflect the current position. We can take this a little further for the sake of preventing the browser from firing our code on every vertical pixel.

Using Ben Alman’s Throttle plugin, we can limit the amount of times our code is fired. Since we’re only checking for change every 500 pixels, we can safely use this approach. First, include the Throttle plugin, then you’ll just need to update the scroll event:

$(window).scroll($.throttle(500,scroll_update));

And that’s it. Now our event is only called every 500 milliseconds. This should help performance of your page, even if it may seem insignificant.

Feel free to try out the demo.

First we need to turn on expiration for the files you want to have a long-lasting cache. This goes in your .htaccess file:

<;FilesMatch "\.(css|js|jpg|gif|png)$">;
	ExpiresActive On
	ExpiresDefault "access plus 10 years"
<;/FilesMatch>;

In the above snippet, we are searching for stylesheets, scripts and images and setting their expiration date to 10 years from now.

Now, we need to setup a RewriteRule to handle the new file names. This also goes in the .htaccess file:

RewriteEngine On
RewriteRule ^(.*)\.[0-9]+\.(css|js|jpg|gif|png)$ $1.$2 [L]

Please note that you must turn the RewriteEngine on. In this snippet, the server searches for the same asset extensions as above and applies a rule to them: read file styles.12345.css as styles.css. Using this rule, you only have to keep one version of each file on your server, styles.css.

So you could stick with what we’ve done so far and be set. Each time you wanted to update the cache, you’d simply change the number where you’re linking the asset. But, if you’re like me, that’s going to get really old, fairly quickly. Let’s bring in some server-side scripting to automate this process for you. Here’s a PHP function to rename the file on the fly:

<;?php
	function setVersion($url){
		$path       = pathinfo($url);
		$version    = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
		$cache_file = str_replace('.', $version, $path['basename']);
		print $path['dirname'].'/'.$cache_file;
	}
?>;

This function is pretty straight forward. First, pathinfo() returns an array containing various parts of the file. Then creates a string containing the last modified time of the asset file using filemtime(). Next up is replacing the dot in the original file with our timestamp string. Lastly, we print out the new filename.

Once you include that function on your page, it’s really simple to use. Just replace:

/-/css/default.css

with:

<;?php setVersion('/-/css/default.css'); ?>;

and you’ll get:

/-/css/default.1298645866.css

Together, with your .htaccess rule and PHP function, you’ve fully automated the caching process. Next time you save or upload an asset, the timestamp will be automatically updated.

• Personal Site [v3]
• Personal Site [v2]
• MetroSoiree
• Personal Site [v1]

For an updated list, I’ve setup an archive.

Tags
Probably the number one requested feature was a way to categorize your DVDs. Specifically, users wanted the ability to separate their Blu-Rays from regular DVDs. This feature had been on my todo list for well over a year and I’m glad to finally push it out for everyone to use. When approaching the problem, I first thought it would be easy to let users check whether it was a Blu-Ray or a DVD and that would be it. However, as development went on and I kept thinking back to the experience of cataloging DVDs, I knew it wasn’t that simple. I decided to roll out a tagging system similar to those found in blogging platforms. With a generic tagging system in place, a user can define any tag they want to categorize their DVDs. If they want to only use Blu-Ray and DVD, that’s fine. But for the hardcore organizers like myself, we can tag our DVDs by genre, director, anything. I’m very happy with the way it turned out and I believe users are as well. There were over 400 tagged DVDs shortly after the update.

Loan Reminders
It’s so easy to forget who has borrowed a DVD. With MyDVDShelf, it’s always been easy to keep track of those loaned DVDs. But, there seemed to be something missing. A way to be automatically reminded that, “Hey, Devin borrowed Primer 3 months ago!” With the latest update, that reminder is now available. Users can subscribe to weekly reminder emails in their account settings and once a week, they’ll receive an email that contains all of their current loans.

iPad
I love my iPad. So does everyone I know that owns one. I know I would love to access MyDVDShelf in a native way on it. However, I do not have the time nor the knowledge to develop such an app. But, I have spent some time developing an optimized web app that can be placed on the home screen. Currently, it’s not feature complete, but it’s definitely usable and a new, unique way to browse your DVD collection. Head on over to play around with it.

And yes, an iPhone version is on the way.

Process
The biggest complaint I received was how inconvenient it was to add a series of DVDs, think multiple TV seasons. Say, for example, you own every season of LOST and want to put them on your shelf. In the past, you would search for LOST, then click Add next to the season you wanted to put on your shelf. You would then be directed to the page for that DVD. Now, for most movies that process is perfectly acceptable, and it would be fine if you only owned one season of The Office, but you don’t. Most people that own DVDs of TV seasons own multiple seasons. With that complaint in mind, I rewrote the entire process so that now a user can use every available DVD feature without leaving or refreshing the page. Technically, someone can wish for a DVD, add it, tag it, loan it to a friend, return it, and finally remove it without every reloading the page. It makes for a vast speed improvement when adding DVDs, especially if you’re just getting started.

These are the major points of the update, but there are many, many smaller pieces that have greatly improved the service. With each new idea, several others spawn and there are many new things coming down the pipe. Stay tuned…

Don’t have a shelf yet? Get started now!