Link Post: THIS IS WHY YOU SHOULDN'T INTERRUPT A PROGRAMMER

I can totally relate to this.

http://heeris.id.au/2013/this-is-why-you-shouldnt-interrupt-a-programmer

via Reddit

Speeding Up Our Site: jQuery and jQuery UI from a CDN

I'm a big fan of sites that work really, really fast. Mostly because I know that a fast website equals happy customers and happy customers equal increased revenue. One of the things that High Performance Web Sites suggests is reducing the total number of requests a site make so the user's browser spends less time communicating with your server and more time having your users interact with your site. A quick way to do this is to offload jQuery to a CDN like Google so everyone can use the same jQuery file (I mean exactly).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

The only downside to this is if Google happens to be down (which doesn't happen frequently) or your development computer isn't online (also not very frequent but still an issue) then your site is going to grind to a halt. In order to prevent that we can add fallbacks to check and see if jQuery has been loaded and if it hasn't we'll load the copy from our server.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js-static/jquery-1.10.2.min.js"></script>')</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="/js-static/jqueryui-1.10.3.min.js"></script>')</script>

I've started adding this to every site I build now and it's great.

Overriding jQuery's get() and post() Functions

I've developed a line of business application for a client where a class of user is automatically logged out after 5 minutes of inactivity. We set it up so every time the user accesses a page (either using AJAX or a 'normal' request) it automatically resets the timer and everything was good. Except for the fact that the user didn't know they were being logged out and then when they submitted a form data would be lost.

To solve this we added a timer to the user's screen to display how much time they had left until they were logged out. The problem was that we couldn't determine how much time was left because every $.post and $.get reset the timer on the backend so we couldn't request that information and all those additional requests would add load to the server. We didn't want to have to rewrite all our $.get and $.post calls for this one class of user so we had to find a different solution. It turns out you can override them very easily.

$(function(){
    // Store a reference to the original remove method.
    var originalGetMethod = jQuery.get;

    // Define overriding method.
    jQuery.get = function(data){
        // reset the timer

        // Execute the original method.        
        return originalGetMethod.apply( this, arguments);
    }
});

This is a very simple example but you could use this to queue connections to the server or inject a value (like an id for the page/user) into every request.

Accessing Your Vagrant VM's MySQL Database From the Host Computer

I love how convent PuPHPet makes setting up a Vagrant VM. One of the things that I don't like about it is the fact that you can't access your VMs databases using native tools like MySQL Workbench and Sequel Pro. There are two reasons for this, the first is that by default MySQL is setup to only accept connections from the localhost and the second is that the user created by Puppet can only access the site though local connections or remote connections (it's a slight flaw in the MySQL defaults) but not both.

To fix the problem where MySQL will only accept connections from localhost we need to find the following line in our default.pp:

class { 'mysql::server': config_hash   => { 'root_password' => 'zendpass' } }

And change it to this (whitespace is optional but I added it for readability:

class { 'mysql::server':
  config_hash   => { 
    'root_password' => 'zendpass',
    'bind_address' => '192.168.56.101',
  }
}

This will change the bind_address parameter inside my.ini to the external IP address of the VM.

Next you need to find a section that looks like this:

mysql::db { 'database':
  grant    => [
    'ALL'
  ],
  user     => 'username',
  password => 'password',
  host     => 'localhost',
  charset  => 'utf8',
  require  => Class['mysql::server'],
}

We're going to add the following after this:

database_user { 'username@%':
  password_hash => mysql_password('password')
}

database_grant { 'usernamer@%/database':
  privileges => ['all'] ,
}

This will add an additional permission to the username user so they have access to the database from all hosts.

Now a quick vagrant reload will cause these permissions to be loaded.

Finally, when you're ready to connect you just connect using the IP address of the VM (192.168.56.101 if your using our setup guide to PuPHPet) and the username and password specified.

Showing Grants For A Different User in MySQL

I suck at MySQL permissions, so usually if I need to give a user access to a database I end up googleing the basics so I can slowly work my way through getting the correct command. Usually after three or four tries I get it right.

I learned that there is a quick command to see the grants that have been run for the current user using the show grants command:

mysql> show grants;
+----------------------------------------------------------------------------------------------------------------------------------------+
| Grants for root@localhost                                                                                                              |
+----------------------------------------------------------------------------------------------------------------------------------------+
| GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' IDENTIFIED BY PASSWORD '*passwordHashHere' WITH GRANT OPTION |
| GRANT PROXY ON ''@'' TO 'root'@'localhost' WITH GRANT OPTION                                                                           |
+----------------------------------------------------------------------------------------------------------------------------------------+
2 rows in set (0.04 sec)

But what if you want to see the grants for a different user? Then you can use use show grants for:

mysql> show grants for 'zenduser'@'localhost';
+-----------------------------------------------------------------------------------------------------------------+
| Grants for zenduser@localhost                                                                                   |
+-----------------------------------------------------------------------------------------------------------------+
| GRANT USAGE ON *.* TO 'zenduser'@'localhost' IDENTIFIED BY PASSWORD '*passwordHashHere' |
| GRANT ALL PRIVILEGES ON `helpme`.* TO 'zenduser'@'localhost' WITH GRANT OPTION                                  |
+-----------------------------------------------------------------------------------------------------------------+
2 rows in set (0.00 sec)

This way I just need to copy and paste the correct line (after a few modifications) and I only need to look at another server!

Keeping Your Favicon Organized

Favicons are those little pictures that show up next to your site's name in a variety of places in web browsers.

It really helps your site stand out when user's have dozens of tabs open and creating them is simple. Just upload an image to any number of favicon generators and then save the resulting favicon.ico to the root of your website and the browsers will automatically find them.

But what if you don't want to have random icons filling up your website's project directory? What if you want to have them nicely kept in your imgs directory? We'll there are two solutions.

Solution one is to add the following line to your section. This will tell the web browsers where to look for the file.

<link rel="shortcut icon" href="/img/favicon.ico">

The only downside to this is that if for some reason this line doesn't get served (your user receives an error page that doesn't include it, you forget it) then they aren't going to get the file because the browser is going to default to looking for /favicon.ico. This is fixed with solution two which is adding the following line to your .htaccess file:

RewriteRule ^favicon\.ico$ /img/favicon.ico [R=301,L]

Link Post: GoDaddy, (((Media Temple))), And The Horrible World Of Web Hosting

Two interesting pieces to this article.

GoDaddy is a horrible company run by horrible people selling horrible products.

As an EX-customer of GoDaddy, I agree with this statement. I'm sure there are people in the company that aren't horrible people but their corporate culture makes it seem that way. I've been a very happen Rackspace (private VPS) and Hover customer after changing over.

As for why [Media Temple] decided to finally exit after all this time, co-founder Demian Sellfors said that this was always the plan.

“We’ve had our eye on an exit since we started 15 years ago,” he told me. “We regard ourselves as entrepreneurs first and we designed it for exit from the start, even if on the way we accidentally built a phenomenal culture and a business that resounded with the marketplace.”

After 15 years we've decided to sell off our company but that was always the plan? Why haven't they sold sooner? I think if you spend 15 years on something it's your baby and you should stay the course and not allow your customers to get eaten by the crappy company that purchased you. This reminds me of when Sprint purchased Nextel and how poorly that worked for existing Nextel customers.

http://www.marco.org/2013/10/15/godaddy-mt

Setting Up Apple Touch Icons

I love my iOS devices because they have all kinds of cool features that make it fun to work with. One of my favorites is that it supports saving a website to the Home Screen. It's accessed by clicking the arrow in the center of the bottom bar and then clicking on the "Add to Home Screen" button.

The only problem is that by default iOS creates a thumbnail of the site and sometimes it's not the best image to be using (see the picture above). It really doesn't tell us anything about the site and doesn't stand out on the Home Screen. We're going to fix that.

The first step is that we need to create a 144x144 png and a 114x114 png. We'll name these apple-touch-icon-144.png and apple-touch-icon.png and place them in our img directory. Then we're going to add the following lines to our :

<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-144.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-144.png">

I know it's a lot to add but it allows us to specifiy the images that the iOS devices are going to use. The other option is putting FIVE images in our directory.

Now when we add our site to the Home Screen we get a much nicer display.

Link Post: Game Genie Technical Notes

Not a required read but it made me feel nostalgic for when the only way you could beat some games was with the Game Genie. :-) It's also cool how they were able to hack this together without having to mod the NES or the game.

http://tuxnes.sourceforge.net/gamegenie.html

Via Reddit (I think)

Link Post: Scaling Reddit from 1 Million to 1 Billion–Pitfalls and Lessons

An interesting presentation about what Reddit needed to do in order to scale to the load they currently have. The point I found most interesting was that they use queues for a lot of more time involved process.

http://www.infoq.com/presentations/scaling-reddit