Phusion Passenger on cPanel/WHM

December 31, 2011. Posted by Travis in Development, Ruby

Phusion Passenger is an excellent resource which makes deploying your Ruby or Rails app extremely easy. It has suport for both Apache and Nginx. There are plenty of guides online for installation, however we came across a scenario where we needed to deploy an app to an apache2 environment with WHM/cPanel installed.

First you must install the passenger gem:

 gem install passenger

Then you need to run the passenger installer. Assuming it runs without errors, it will give you 2 pieces of code to put in various places, which is what I'm going to talk about in this tutorial.

 passenger-install-apache2-module
 

The first block of code that the installer will tell you to put is the following into your apache configuration file:

 # Load Passenger
 LoadModule passenger_module /usr/local/lib/ruby/gems/1.9.1/gems/passenger-3.0.11/ext/apache2/mod_passenger.so
 PassengerRoot /usr/local/lib/ruby/gems/1.9.1/gems/passenger-3.0.11
 PassengerRuby /usr/local/bin/ruby
 

Note: Your version may be different than what is above. I'd recommend you copy and paste it directly from the output of the installer.

While you could put it into your httpd.conf, you will lose these changes when an update takes place, thanks to cPanel. So, instead of placing this in httpd.conf, place the above 3 lines of code into /usr/local/apache/conf/includes/pre_main_global.conf

The second part of the installer is going to tell you to input the following code into your apache config file

 <VirtualHost *:80>
     ServerName www.domain.org
     DocumentRoot /home/username/path-to-app/public
     <Directory /home/username/path-to-app/public>
         Allow from all
         Options -MultiViews
     </Directory>
 </VirtualHost>
 

If you look in httpd.conf, you will see all the virtual host blocks that are in there. Find the one for your domain, and you will see the following: 

 # To customize this VirtualHost use an include file at the following location 
 # "/usr/local/apache/conf/userdata/std/2/username/domain.org/*.conf"
 

So instead of modifying httpd.conf directly, we need to create a config file, tell apache to check for includes, automatically update httpd.conf, distill, then restart. Instead of using vi, you can also use vim, pico or the editor of your choice. The filename doesn't matter, I used extra.conf here.

 mkdir -p /usr/local/apache/conf/userdata/std/2/username/domain.org/
 vi /usr/local/apache/conf/userdata/std/2/username/domain.org/extra.conf
 

Then put the following into this file:

 DocumentRoot /home/username/path-to-app/public
   <Directory /home/username/path-to-app/public>
     Allow from all
     Options -MultiViews
   </Directory>
 

Next run the following:

 /scripts/ensure_vhost_includes --user=username
 /usr/local/cpanel/bin/apache_conf_distiller --update
 /usr/local/cpanel/bin/build_apache_conf
 /etc/init.d/httpd restart
 

That's it! You should now visit your url and see the Passenger screen if there are any errors, or you'll see your app live if you've set it up correctly!

Unbind OSX Play Button

December 27, 2011. Posted by Travis in Mac OS X

If you are a fan of Spotify like all of us around the office, you know how pesky it can be if Spotify isn't open and you hit the ►/II button on your Mac keyboard, and iTunes pops up in your face, thus requiring a prompt quit. If you are a fan of VLC, this can also be frustrating when trying to play movies and you get a bouncing iTunes icon eager to interrupt your flick.

To fix this, NoMitsu released a great, fast and easy .dmg installer to unbind the key. It still operates as normally when your programs are open, it just won't try to open iTunes at an inopportune time. You can download the file here. You can uninstall fix just as easily by running the installer again.

Note that if you download any OS X updates, you will probably need to re-install this patch.

Link Emperor Review

November 11, 2011. Posted by Travis in SEO

When it comes to SEO, there are a million and one services out there which get the job done. Not only that, but there are a million and one methods to do it. This can make things a little (read: very) confusing when you don't necessarily have 8 hours a day to dedicate to manually backlinking, researching, testing, re-testing and managing your campaigns. That's where Link Emperor comes in.

Not long ago, our company East Coast EFX had the pleasure of completely redesigning the Link Emperor website. The owners of the and creators of this service, Kevin & Bobby, are not only long-time business associates but good friends. All potential bias aside, in this Link Emperor Review I would like to give a bit of insight into this service and why we around the office all use it for our personal SEO projects (it would work for all our client projects just as well, but generally the client has very exact guidelines that are to be followed so we honor that first and foremost).

First of all, what is it? Link Emperor is a full-service SEO solution which allows you to take a completely hands-off approach to building your campaign, link building, keyword tracking, and more. The best part about it is, they offer (at the time of this writing) 18 different backlinking strategies to create a diverse portfolio of links to your money sites. This isn't just a basic linkwheel with a glaring footprint. This is a greatly varying array of all different types of links to give you an all-in-one command center to automatically administer all your SEO needs. The more you diversify, the better off you are. There are several of these linking types which are exclusive to Link Emperor too, meaning not only do you get the most common types (directory submissions, blog commenting, link indexing, forum profile creations, etc), but several other completely unique strategies as well that aren't offered elsewhere. A complete list can be found here.

Here's the general flow—after completing all your on-page SEO (proper h1 tags, title tags, google chrome audits for page speed, keyword density, etc), you log into Link Emperor and create a new campaign. You insert all your multiple landing pages along with their assigned keywords, save it, and let Link Emperor go to work. Because your account is linked with your Google AdWords account, your landing pages & keywords will be analyzed on many different levels in order to generate a "target value" for each keyword. This target value takes many many different factors into account, and it will automatically update in real-time according to a) keyword volume b) analyzed on-page score for that landing page c) past backlinking effectiveness d) current rank e) competition as well as a slew of other factors.

What does this mean to you? Well, it means you can take a hands-off approach to your campaigns. All you need to do is do your initial research, set up your articles and on-page SEO, input them into the admin area, double-check your target values and let Link Emperor go to work for you! I advise you to check out the many additional features that this service offers which I don't mention in this article. You can find them on their homepage.

So, that's great and all, but what about the most important thing? 

Results.

Below is a screenshot from 2 different campaigns. The first campaign is a fresh project we started about 2 months ago, and as you can see in the screenshots Link Emperor really gave us enormous boosts in rankings in a very short time.

The second screenshot is perhaps a little more interesting to more verteran SEO'ers who want to see what this service can do for established campaigns that are already in really competitive positions, fighting to get to #1. For campaign 2, we had this running for over a year, and despite using several different backlinking methods our rankings never really moved much in the course of the year. You can see here that within a month we actually had an awesome boost in rankings, and our revenue from one keyword tripled just from moving up one spot!

So I encourage you to sign up now! They also offer a 3-day trial if you're interested, just click the link and you will see the trial link on the homepage.

Change your New Tab background in Chrome

September 25, 2011. Posted by Travis in Design Tricks, Just For Fun

It's a fact that design nuts love to customize their workflow - I for one am guilty. If you're into this sort of thing, you may enjoy this article about customizing the background of Dashboard in Lion. I did this the other day, it looked much nicer than the default "Lego" pattern. Naturally I wanted to take it a step further and change the background of my Google Chrome "New Tab" wallpaper as well. Unfortunately, all the default themes in Chrome's repository are atrocious - not to mention some might only wish to change the background and leave the rest of Chrome's elegant design "as is." Here's your guide on how to do just that.

For this example, I'll use the above tiled image that I personally used for both Dashboard and chrome - a nice velvet looking criss-cross pattern. Click to view it full-size, and save it if you want to use it. Otherwise use some Google-Fu to find a nice tileable image (large full size images work as well, I just find them distracting).

While it would seem changing the background would be easy as changing a line in the default Chrome CSS file, it's all packaged using Google's equivalent of a zip file, not to mention hidden like valuable collector toys at a garage sale. Therefore, we need to create a barebones theme, with the New Tab background being the only thing defined. 

First, you'll want to create a new folder on your desktop for the theme. I called mine velvet. Inside of your newly created folder, create another new folder called images. Inside this images folder is where you will place your background file. Note: It must be in .png format.

Next, you will need to create a new empty .txt file, and rename it to manifest.json. You can use any standard text editor to modify this file, just as long as it's not Front Page 98.

Paste in the code below.

 {
   "version": "1.0",
   "name": "Velvet",
   "theme": {
     "images" : {
       "theme_ntp_background" : "images/background.png"
     },
     "colors" : {
       "ntp_link": [255,255,255], 
       "ntp_text": [255,255,255], 
       "ntp_section_link": [255,255,255], 
       "ntp_section_text": [25,25,25],
       "ntp_background": [25,25,25]
     },
     "tints" : {
 
     },
     "properties" : {
       "ntp_background_repeat": "repeat"
     }
   }
 }
 

Then change the following:

1. The name of your theme
2. The filename of the .png file you used for your background.
3. If you are using a light colored image, you can delete everything inside of "colors", just like everything is deleted from inside "tints." This will leave it at the default of Chrome, which is configured to display everything on light backgrounds. I want the text to appear white however so I can see it on a dark background. Note: All colors must be in RGB.
4. If you want the background color (which is underneath the image) to match the image during the very brief time the image loads (to prevent flickering), change ntb_background to an all-around average color of your image. 
5. If you are using an image which is tileable, leave "ntp_background_repeat" on repeat. If you are using a large image however, change this to no-repeat. 

After that, save your manifest.json file, and open up Chrome. Paste in the following in the URL bar: chrome://extensions

Click on "Load unpacked extension...", select the folder you created on your desktop, and then hit OK. Don't navigate inside the folder so you see images or the manifest file, just select the root folder then click confirm. You should now be able to open a new tab and see your changes. Note: If you receive a message that your manifest.json file has errors, go back and look to make sure there are no floating commas at the end of the last line. It gives you a line number so finding these errors should be easy. You can also go back and tweak things if necessary.

Once you're satisified - go back to chrome://extensions and select "Pack Extension..." For "Extension root directory" select the theme folder again, and confirm. You don't need to specify a key unless you plan to upload it to the theme database and update it in the future. Once all is said and done you should have a .crx file containing your theme next to your original theme folder. All that's left to do is drag the theme.crx file into chrome. It will ask if you want to continue, just hit accept and the theme will be installed.

If you get a CRX_FILE_NOT_READABLE error message, it's likely because you need to update Chrome, or you're using some sort of weird build and will need to re-install. I recieved this message using Chromium, however the theme worked just fine on my VM with Windows 7. Worst case scenario is you move the folder into an obscure location and from then on just hit "Load unpacked extension..." whenever you want it to show up. Even if you quit chrome and re-open it, it will still be loaded so that is the good news.

Throttling Bandwidth in OS X

September 06, 2011. Posted by Omar in Development, Mac OS X

When you've got a low latency 20 megabit connection that load pages in an instant, it's impossible to see how our unfortunate internet brethren may see your page load. This particular set of commands that throttle bandwidth proved extremely useful to me when getting certain javascript functions to work before the page was fully loaded. "ipfw" is shipped with OS X and is probably present in some linux distros.

 sudo ipfw pipe 1 config bw 40KByte/s

This creates a pipe that only allows up to 40KB/s to go through. If you want to simulate dial-up, set it to 5KByte/s!

 sudo ipfw add 1 pipe 1 src-port 80

This will attach that pipe on port 80, effectively throttling its bandwidth.

 sudo ipfw delete 1

When you're all done you'll want to remove the bandwidth restriction, unless you're old and miss the days of having slow internet, revelling in anticipation as jpegs slowly load. 

There you have it! No need to download extra software to throttle your bandwidth.

Custom Mac Dock

September 01, 2011. Posted by Travis in Mac OS X

If you ever get tired of the white, glossy dock that comes pre-installed with OS X, or are looking for that extra little touch to match your icon set, you can install different designs a custom Mac dock (tested in Snow Leapard and Lion).

1. Go to finder, and press ⌘+Shift+G.
2. In the 'go to folder' box, type /System/Library/CoreServices
3. Right click on Dock.app and select Show Package Contents.
4. Navigate to Contents > Resources.

Back up all the files you see in the Resources folder so you have a copy of the default dock, and then replace it with all the files in the zip file. I didn’t design this dock from scratch, but I mixed and matched a lot of different dock styles that I found online and ended up with this custom mac dock that looks amazing. It's black, sleek, with a matte finish, and includes a nice strip of reflective gloss. For the open app icons it is a subtle blue glowing LED.

Download Now