No doubt, SVGs are dope, but they're not the right choice for every situation, and, more times than you'd think, a 2x PNG is the more optimal choice. 

For times when you need to interact with the SVG's markup, you can't switch to PNG. And if the image is served above the fold, it might be best to inline small SVGs so they're served on the initial response and instantly available on first load (think nav logos and icons). 

Past these limited scenarios, the real indicator as to whether you should use an SVG or a PNG is the file size *after* optimization. 

## The Deal Breakers
### The SVG is really a raster image
If you pop open the SVG's markup and you find that it's just a wrapper for an inlined, rasterized image, you will want to switch that over to a PNG (or whatever format the inlined image is set to in the markup). SVGs are for vectors and scalin' and `base64`ing a raster image into and SVG serves no practical benefit and makes it dang-near impossible to optimize the image  .

Let's take this Instacart logo as an example...

![instacart-logo](//images.ctfassets.net/i4hrj10r05o9/3nZcyOqidgCcbJi7mvDlqB/816e201de3bee6c0315190cf0adab8fb/instacart-logo.svg)

This first version is a PNG in SVG clothing coming in just under 50kb and it doesn't even scale! What a waste of bandwidth... 

![instacart-logo](//images.ctfassets.net/i4hrj10r05o9/76Tr728bZSracQu56h6EyC/462956e63ff8d00c7bdaaf2861ba078e/instacart-logo.png)
  
This next version is an un-optimized PNG that is just the SVG resaved in photoshop. It comes in at around half the weight, 27kb. Getting closer but we can do better.

![instacart-logo-optimized](//images.ctfassets.net/i4hrj10r05o9/5Yiu82lYAFGzeYsUTm20u2/43448bd6d83cf56988726aecb0272643/instacart-logo-optimized.png)

This final optimized version comes in at a mere 3kb and is functionally identical to the first version. This is why we always convert rasterized SVGs to their proper format, PNG in this example.
 
### The SVG is text-heavy
One of the cool features of SVGs is that you can render text strings right in the markup. But if you don't render the SVG inline and you don't have the proper fonts in the mix, the text won't render correctly everywhere. If this works for your circumstances, roll with it, but from my experience, this proves problematic when trying support all the things. 

One of the fixes to this font-consistency issue is converting the text to vector shapes, but this ratchets up the data required to render the text-heavy image as an SVG. In my opinion, the extra weight in converting the image to use vector shapes such that it no longer needs to be inlined and is free of any sort of web-font dependency.

Another way to fix this font issue is to load and use a custom font but this __requires__ the SVG to be inlined so the font can be applied to the SVG's markup, which is probably not be ideal as you'll read below. 

With the extra weight of that font, forcing all that SVG's file weight into the initial response body *and* the potential for a FOUT, just yuck. I'm just gunna say it, raw text has no place in an SVGs.

In the end, PNG is likely the ideal when working with text-heavy images. PNG is also the better option for text legibility when compared with JPG, so hooray PNG!

### The SVG is below-the-fold
The value of an SVG being inlined is greatly diminished when that image is served below the fold. As I said previously, there's potential first-load-first-paint benefits for inlined SVGs above-the-fold, but unless users scroll down the page quickly, images further down the page will load quickly in the background and it will seem like it all loaded instantly. 

Inlining SVGs can really weigh down that initial request while also keeping the image from being cached on the user's system, so it's really not something you should do unless it's really speeding up that first-load-first-paint, and that's only if that's critical for you, which it might not be. 

With that edge case being laid to rest, unless the SVG is extremly simple, it's likely the equivalent 2x PNG will be similarly sized or smaller once properly optimized -- go with the smaller file. Just don't inline if you use and SVG.

A comprehensive guide to optimizing PNG image assets for use on the web. This will cover use-cases, compression tools and techniques, and responsive considerations.

When to Convert an SVG to PNG

Images are a great way to convey information, context, brand indentity and aesthetics on the web but for the visually impaired navigating the web using a screen reader, images can be annoying efficiency bombs that pollute a web-browsing experience with useless information. However, an image's alt attribute is the ideal way to clear the clutter for those who can't see images on your site and should be included in every image tag regardless of whether there's any alternative copy provided for that image. 

## Alt Attributes

```
<img src="img.png" alt="The incredible copy here describing what's in this image." \>
```

An alt attribute is a bit of copy that's used in place of an image when it's unavailable or is actively not rendered, as in the case of a screen-reader or text-browser like Lynx (https://lynx.browser.org/). 

### Add Alt Copy Like A Pro
Alt attribute copy should *describe the image* it's standing in for, the visually impaired and others who use screen-readers rely on this description to get the same context the image provides for those who can see it. Provide enough information to get the point across but it doesn't have to be so detailed it takes thirty seconds to describe. Keep it short and sweet! 

An alt attribute is not a keyword dumping ground -- don't be tempted to use alt attributes to jack-up density on certain words some snake-oil salesman told you would help you sell more widgets. It's a greasy move that should be avoided. Remember to always respect your visitors, respect your site and respect yourself when it comes to SEO.

### No Alt Copy? No problem!
If you don't have any copy to drop into your alt attribute, **leave an empty attribute in the image tag!!** This is one of the best things you can do for your visually impaired friends. What this does is it tells the screen-reader the image is purely decorative (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) and it will skip the image during read-back. If you remove the alt attribute, you are telling the screen-reader this image is important to the context of the page so it will do what it can to provide that context, which is recite the URL provided in the `src` attribute. 

## Always Include An Alt Attribute
I can't really see a time when one would prefer to have an image spit back long, arcane URLs over simply moving on to the rest of the site's copy. I suggest always having an alt attribute included on your image tag, get in the habit of simply dropping it in when you add your `src` attribute. 

Better yet, if you have an Image component, just drop that in there and simply always include the attr regardless of whether it's copy prop is populated and you're good to go!

*This is a quick n dirty post, edits and code still to come*

An image's alt attribute is the ideal way to clear the clutter for those who can't see images on your site and should be included in every image tag regardless of whether there's any alternative copy provided for that image. 

A11y: Images should always bring an alt attribute along

Vagrant is an awesome tool, it allows you to provision and manage virtual machine instances, configured within a project, from the command line.

This is a bootstrap script to configure a virtual machine to use HHVM/nginx, proxied locally with Vagrant. This can also be modified to provision a non-vagrant Ubuntu instance.

```bash
#!/usr/bin/env bash

###### -- Installs and configures HHVM to run on nginx


### Add Dependency Repos
echo '    -=-=- Adding Dependency Repositories and Updating Packages'

    sudo add-apt-repository -y ppa:nginx/stable
    apt-get update


### Install Essentials
echo '    -=-=- Installing Essentials...'

    apt-get install -y unzip vim git-core curl wget build-essential python-software-properties


### Install nginx
echo '    -=-=- Installing nginx...'

    apt-get -y install nginx


### Install HHVM
echo '    -=-=- Installing HHVM...'

    wget -O - http://dl.hhvm.com/conf/hhvm.gpg.key | sudo apt-key add -
    echo deb http://dl.hhvm.com/ubuntu trusty main | sudo tee /etc/apt/sources.list.d/hhvm.list
    apt-get update
    apt-get install -y hhvm


### Post-install HHVM scripts
echo '    -=-=- Running HHVM Post-Install Scripts...'

    /usr/share/hhvm/install_fastcgi.sh
    update-rc.d hhvm defaults
    service hhvm restart

    /usr/bin/update-alternatives --install /usr/bin/php php /usr/bin/hhvm 60


### Configure Virtual Hosts
echo '    -=-=- Configuring Virtual Hosts...'

    # Remove Defaults
    sudo rm /etc/nginx/sites-available/default
    sudo rm /etc/nginx/sites-enabled/default

    # Create WebSockets-friendly Virtual Hosts Entry
    echo '

        server {

            listen 80 default_server;

            root /vagrant;
            index index.html index.htm index.php;

            access_log /var/log/nginx/vagrant.access.log;
            error_log /var/log/nginx/vagrant.error.log;

            large_client_header_buffers 8 32k;

            location / {

                try_files $uri $uri/ /index.php?$query_string;

            }

            location = /favicon.ico { log_not_found off; access_log off; }
            location = /robots.txt  { log_not_found off; access_log off; }

            error_page 404 /index.php;   

                include hhvm.conf;

        }

    ' > /etc/nginx/sites-available/vagrant

    # Symlink into 'Sites Enabled
    ln -s /etc/nginx/sites-available/vagrant /etc/nginx/sites-enabled/vagrant

    # Restart nginx
    service nginx stop
    service nginx start

    # Add entry to Hosts
    echo '127.0.0.1 vagrant' >> /etc/hosts
```

A bootstrap script to configure a virtual machine to use HHVM/nginx, proxied locally with Vagrant that can also be modified to provision a non-vagrant Ubuntu instance.



HHVM/nginx Vagrant Bootstrap and Provisioning Script

This article is intended for those looking to fire up a [MongoDB](https://www.mongodb.org/) data store on OSX and outlines how to install and manage a MongoDB instance using [Homebrew](http://brew.sh) and [launchd](https://wiki.freebsd.org/launchd). This set up is not intended for production, is not secured (I'll cover that in a future post) and should be used only for local development. 

## Prerequisites:
You're going to need Homebrew. If you don't have it installed yet, you can get set up following the steps outlined in [OSX Package Management with Homebrew](http://blakepetersen.io/homebrew-osx-package-management/).

## 1. Update Homebrew
Before anything else, always update Homebrew. 
```bash
$ brew update
```

## 2. Install MongoDB

There's a couple options you can pass when installing MongoDB using Homebrew, but to get the standard build on your system, run the following command.

```bash
$ brew install mongodb 
```

To include SSL/TLS support in the build, pass the '--with-openssl' flag with the command.

```bash
$ brew install mongodb --with-openssl
```

To install the development release, pass the '--devel' flag.

```bash
$ brew install mongodb --devel
```

You can check to see whether MongoDB installed by checking the version like so...

```bash
$ mongod --version
```

It should return `db version v3.0.7`, for example.

## 3. Fire Up MongoDB

Before we can light this up, we need to ensure MongoDB has a place to store it's data. By default, it seeks to put this data in the `/data/db` folder. Chances are, if you don't already have MongoDB installed, you don't have this folder on your system. To add it, run the following command...

```bash
$ mkdir -p /data/db
``` 

Once that's all set, you can start MongoDB using the `mongod` command. 

```bash
$ mongod
```

It should blast out a number of lines, the last should state something along the lines of `waiting for connections on port 27017`. If you see this, you're on the right track and can use MongoDB right now! This simple mode is great for quick debugging as you will see logs reported here. Unfortunately, as soon as you kill the terminal window, MongoDB and the console log dies too. 

To persist MongoDB beyond your terminal window, all you have to do is fork a child process; run `mongod` with the `--fork` and `--logpath` flags. If you're using `--fork`, you need to specify `--logpath` otherwise it will bark at you. Plus, you wanna log things, right? ;]

**Run MongoDB Daemon-style like a champ:**
```bash
$ mongod --fork --logpath /usr/local/var/log/mongodb/output.log
```

You should see the following if it starts up correctly.

```bash
about to fork child process, waiting until server is ready for connections.
forked process: 24997
child process started successfully, parent exiting
```

Killing the MongoDB process is pretty easy too, but you may need to flip some rocks if you lose your post-it. When you fire up the child process, take note of the process ID or PID as it will be how you terminate the process later. In the above example, the PID is `24997`. 

If you don't know the PID, you can run `top` in your terminal and look for `mongod` in the command column. The number just to the left of `mongod` is the PID you're looking for. You can use ctrl+c to hop out of top. 

Equipped with the PID, run the following command replacing `24997` with your own.

**Kill MongoDB like a boss:**
```bash
$ kill -9 24997
```

If you check top again, `mongod` is no longer running. 

## 4. Launch on Boot

If you find you're using MongoDB pretty frequently, you may want to add it to launchd which will start it up every time your system boots. To do this, symlink the mongodb plist file into `~/Library/LaunchAgents` to launch when your current user logs in or `~/Library/LaunchDaemons` to start when any user logs in. 

Current User:
```bash
$ ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents
```
All Users:
```bash
$ ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchDaemons
```

An added benefit of using launchd to manage your MongoDB agents/daemons, you can now load and unload it at will using `launchctl`. 

```bash
$ launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist
$ launchctl unload ~/Library/LaunchDaemons/homebrew.mxcl.mongodb.plist
$ launchctl load ~/Library/LaunchDaemons/homebrew.mxcl.mongodb.plist
```
## 5. Gooey Applications
I have two goto GUI applications when dealing with MongoDB. Let's power down Terminal and let our beautiful Apple display do it's thing!

##### **LaunchControl** 

[LaunchControl](http://www.soma-zone.com/LaunchControl/) is an amazing tool for visualizing and managing launchd agents and daemons outside the command line. I tend to also lean on this heavily when swapping between versions of PHP. Super handy!

##### **Robomongo**
[Robomongo](http://robomongo.org/) is a tool used to view and manage MongoDB databases and collections. It offers a lot of flexibility and provides an invaluable window into what your application is actually doing with your data. I first started using Robomongo on Ubuntu as it was the only cross-platform solution out there for this, and came to find it's pretty much the best GUI MongoDB management tool on any platform. 

---

###### Sources

- https://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/
- http://stackoverflow.com/questions/5596521/what-is-the-correct-way-to-start-a-mongod-service-on-linux-os-x
- https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/launchctl.1.html

Install and manage a MongoDB data store on OSX using Homebrew and launchd.

How To: Set Up MongoDB on OSX with Homebrew and launchd

## Ubuntu's Aptitude for Context
I grew up on the 'PC' side of the computing coin. I was all about Windows, though I knew other options were out there. It wasn't until I started to developing on the full-stack that I was introduced to Linux via CLI which eventually led me to give Ubuntu Desktop a try.

By far, the best part of sliding over to Linux (Ubuntu in my case) was handling most software through Aptitude, Ubuntu's package manager. Amazingly, updating the system is as simple as running two commands...

```bash
sudo apt-get update
sudo apt-get upgrade
```

Aptitude will touch the sky and update my machine to the latest and greatest. Adding and removing applications and libraries is similarly straight-forward, handling all the dependencies as necessary. Life could not be easier! 

Package management is a smart move for handling software dependencies and the approach has been picked up by a number of systems and languages. Some examples include **npm** for NodeJS, **pacman** for Arch Linux, and **pip** for Python. 

##Homebrew, the OSX Package Manager
Homebrew (http://brew.sh/) is the 'missing package manager for OSX', it brings all the package management niceties to your Mac. You can install Homebrew by typing the following command in Terminal.

```bash
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

After running through the installation script, you will be able to install any of the 'formulas' (Homebrew's name for packages) available at [Homebrew Formulas](http://brewformulas.org) immediately. A popular package you might reach for as a web developer is nginx. If you search 'nginx' on Homebrew Formulas, you'll see just how easy it is to install the web server on your system.

```bash
brew install nginx
```
After Homebrew sets up nginx, you can run `sudo nginx` and your server is up and running on the default configuration. You can test this right in Terminal by using the command `curl localhost:8080`, you will get back the HTML markup for the nginx default page. 

## But wait, there's more!
You may notice some of your favorite software packages are missing from the Homebrew Formulas list. For example, you won't find Apache or PHP there, but they are some of the most popular software packages on the web! Surely, they must be supported.

And they are, but you need to look for them in different repositories. Additional repositories are available as 'taps', a full list is available at https://github.com/homebrew/repositories. You can add a 'tap' to, say, install PHP, by running the `tap` command.
```bash
brew tap homebrew/php
brew install php56
```
[Braumeister](http://braumeister.org/) is a great way to search formulas on some of these taps. 

## Homebrew Commands
Homebrew's CLI has a number of commands, here's what you'll be using most of the time. 

### See What's Installed
```bash
brew list
```
Not sure what you already have on your system? Fire off this command and it will return a list of software Homebrew is currently managing. 


### Upgrade Formulas
It's important to stay up to date and Homebrew makes it easy to upgrade software in bulk or piecemeal. 

```bash
brew update
```
The `update` command updates Homebrew and the formulas against the repositories but doesn't actually upgrade any of the software. It just lets Homebrew know what versions the software can upgrade to.

```bash
brew outdated
```
The `outdated` command shows what software packages can be updated. Included information is the current version installed and what version is available to upgrade to.

```bash
brew upgrade nginx
```
You can target specific formulas for upgrade by using the `upgrade` command with the package you'd like to upgrade.

```language-bash
brew upgrade
```
If you'd like to upgrade the whole shabang, just use `upgrade` alone.

```bash
brew pin nginx
```
You can also keep specific formulas from being upgraded when the lone `upgrade` command is used by employing the `pin` command. 

```bash
brew unpin nginx
```
To add pinned software back into the `upgrade` mix, use `unpin`


### Remove Formulas
```bash
brew uninstall nginx --force
```
To remove a formula, you use the `uninstall` command with the `--force` flag. Use this command with care. 


### Troubleshooting Issues
```bash
brew update
brew doctor
```
Sometimes system software updates or other such upgrades can leave some packages broken and unusable. Homebrew usually just needs to do a quick check of the system and make some changes to the software packages accordingly, or will instruct you on ways to resolve any issues plaguing Homebrew software. You can run `doctor` to do just that. Always run `update` before `doctor`.

---
Sources:
 
- https://github.com/Homebrew/homebrew/blob/master/share/doc/homebrew/FAQ.md
- http://matthewcarriere.com/2013/08/05/how-to-install-and-use-homebrew/

Homebrew (http://brew.sh/) is the 'missing package manager for OSX', it brings all the package management niceties to your Mac.

OSX Package Management with Homebrew

I'm sure you can relate to this scenario -- You fire up a fresh Ubuntu server with intention of running a node app on it. 

You install NodeJs and npm using Aptitude...

```bash
sudo apt-get updaxte
sudo apt-get install nodejs npm
```

Everything installs correctly, but when you run node-based scripts, you get the following...

```bash
sh: 1: node: not found
```

... with a whole lot of errors along with it. 

What the heck? Node was literally just installed, how is it that it can't be found? 

The issue rests with another application called 'node' that comes pre-installed on Ubuntu. To avoid conflicting with this application, the command to launch NodeJS uses 'nodejs' instead of 'node'.

To check if this is truly the case in your situation, simply run 'nodejs' in shell and it should show the NodeJS command prompt ($>, hit ctrl+c twice to hop out). If you aren't getting the Nodejs prompt, you likely don't have NodeJS installed at all, go ahead and try to install using the commands above. 

Once we've confirmed this is the case, all we have to do is tell the system, "We appreciate your concern, but want the command 'node' to launch NodeJS and not that other application". This is done by symlinking the command 'node' to 'nodejs' using the following command...

```bash
sudo ln -s "$(which nodejs)" /usr/bin/node
```

That's it! Try running your NodeJS application and and it should now be working. 

NodeJS doesn't work with 'node' but does with 'nodejs', run `sudo ln -s "$(which nodejs)" /usr/bin/node`

Node: Not Found? But I Just Installed It!

Localization, or providing localized content to site visitors, is becoming increasingly important for websites looking to capitalize on the truly global reach of the web. To maximize conversion for a 'global site', you need to treat, for example, users from Japan differently than users from Sweden. Content needs to be translated, ads need to be optimized and [even a different layout](http://webdesign.tutsplus.com/articles/big-in-japan-web-design-in-the-land-of-the-rising-sun--cms-23290 "Big in Japan: Web Design in the Land of the Rising Sun") may need to be employed to truly maximize the website's effectiveness.

To do this, one needs to know what the user expects to see -- but how? We can't simply ask the user what they want to see, so we have to take cues from the user's requests to determine the best experience for the user from a localization standpoint.

## IP-Based Geolocation

Some engineers use IP-based geolocation services to determine the best localized content to serve to user. Not only can these services be costly (in both money and load time), but they don't guarantee the user will even be served the content they want or expect to see. 

### ISP Doesn't Always Know Best

I work for a cloud-based telecommunications company (Switch Communications) which has a fairly robust international data-center setup. As such, even though we're HQ'd in the Financial District of SF, the world sees our requests from the Switch Communications ISP as deriving from somewhere in the UK. Here's what Speedtest.net shows us...

![Speedtest.net shows the closest server being in Waterford, Ireland, not San Jose, California, USA](//images.ctfassets.net/i4hrj10r05o9/6wXuCqGL28sCKcas2YaqYE/3abc59e523fae74ce8d85e3d0fd85f76/Screen-Shot-2015-11-04-at-1-03-44-PM.png)

Taking the ISP's word for it, a website using an IP-based geolocation approach would see me as British, Irish or Welsh, not American. Let's take a look at how this looks on a site I frequent, [Vice](http://www.vice.com). 

From the Switch office connection I see this...

![Notice, the url is rocking en_uk. That's not right...](//images.ctfassets.net/i4hrj10r05o9/2JzzrJTnEkMosEagEguqUc/516a506b3f76afe391b90fcfa6ed983b/Screen-Shot-2015-11-04-at-4-39-33-PM.png)

From my wifi hotspot I see this...

![Ahhh... that's better.](//images.ctfassets.net/i4hrj10r05o9/ORziM2p4aIOuaeEaEMQmO/29794b49f67d8c3620f9a885ec3c4236/Screen-Shot-2015-11-04-at-4-42-16-PM.png)

You can see the first article is entirely different, the UK version showing a very UK article. You can quickly see how this is an issue in this case. Fortunately, the ad being used shows up for both sites so ad revenue is relatively safe, but if you wind up serving location-based ads, this could wind up affecting revenue, no bueno.

### The Waiting Game

Another drawback of using a IP-Based Geolocation service is that you need to reach out to the service to make a determination as to where the user is and then what sort of content the user should see. This information could be cached to reduce page load time down the line, but there will be at least one interaction between the site and the service to figure out where this user is in the world. 

## Accept-Language To The Rescue
What if I told you the user's request actually contains localization information and is actually more accurate than what the IP-based geolocation can provide?

First, let's take a look at an example of an international traveler to really drive home the point of why this approach is a good idea. 

A traveler is about to catch a flight from Sweden to Japan. They log onto the airport wifi in Stockholm and start in on a series of articles about a new project they are about to start with his colleagues in Japan. Eventually they close their laptop and get on the plane. Once they land, they check into the hotel and start in on more articles ahead of a client meeting. Only, the site now thinks they are in Japan and start serving everything in Japanese, he can't even find a button to reset the language, yikes! 

Not a good experience to say the least. Ideally, he would still be served Swedish content as nothing has really changed about the traveler aside from his location. Everything about him is still Swedish, he just happens to be halfway around the globe. 

Well, there's a way to obtain the user's persistent language preference regardless of where they happen to be loading their webpage from. The magic comes from the **Accept-Language** Header that is sent with the user's request to load a webpage. **This is the default browser language the user has set in the browser they are using to make the request**. 

Remember when you set up the system you're currently reading this on? You were likely asked what language (and probably what region or dialect of that language) you would like to use. This information is then loaded into browsers as they are installed onto the system. When a page is loaded, this information is sent to the server and you can then localize the content in a more ideal fashion.

![My language preferences sent with my request to load blakepetersen.io. No matter where I go in the world, this never changes.](//images.ctfassets.net/i4hrj10r05o9/7tf7wyEuNa8kqgwWIs6OUc/e9fd23831501d2ad1517979e9fc9eedf/Screen-Shot-2015-11-12-at-4-21-13-PM-1.png)

## Localization Testing is a Breeze

Not satisfied with variable overrides when testing your content? Want to see what your users would really see with production code? I got you, fam. 

All you have to do when targetting Accept-Header is to update your browser's default language and you're good to go. For example, in Chrome you head into the advanced settings and open the language tab (or typing in  [chrome://settings/languages](chrome://settings/languages) into the address bar). Here's what it looks like after switching my preferred language to Swedish...

![My language preferences sent with my request to load blakepetersen.io after updating my language preferences.](//images.ctfassets.net/i4hrj10r05o9/79o22AEkDu2YUIGeGQwQcA/054b97f6a40a8bd9c52367a58c376378/Screen-Shot-2015-11-12-at-4-37-51-PM-2.png)

The code will react to any requests sent from my browser as though I was Swedish. 

### Automated Testing

Integration testing is similarly easy to execute as you can set tests up to check how the site/webapp reacts to the language variations. For example, if you are using PhantomJS to drive Selenium tests for example, you would update the Accept-Language headers sent with the test request like so...

```javascript
capabilities.setCapability(PHANTOMJS_PAGE_CUSTOMHEADERS_PREFIX + "Accept-Language", "sv");
```

Testing literally couldn't be easier!

---

#### Don't forget to comment!
Have something to add? Keep the conversation going below!



Use Accept-Language request headers to localize content. Not only are you more likely to serve the correct content, but it's faster and easier to test. Win-win-win!

A Better Approach to Content Localization Detection

HHVM or HipHop Virtual Machine is an virtual machine that executes code written in PHP or Hacklang using a just-in-time (JIT) compilation approach to realize greater performance than would otherwise be achievable. 

In this post, I will be running through how to install and set up HHVM on an Ubuntu 14.04 Server set up using an Apache Virtual Hosts configuration. In the end, you will be able to run traditional and HHVM-based PHP-powered web applications side-by-side on the same system.

## Install HHVM
We don't need to all get fancy compiling anything, so we will simply install the prebuilt HHVM packages for Ubuntu 14.04 (64-bit). Run the following...

```bash
wget -O - http://dl.hhvm.com/conf/hhvm.gpg.key | sudo apt-key add -
echo deb http://dl.hhvm.com/ubuntu trusty main | sudo tee /etc/apt/sources.list.d/hhvm.list
sudo apt-get update
sudo apt-get install hhvm
```
*Source: https://github.com/facebook/hhvm/wiki/Prebuilt-Packages-on-Ubuntu-14.04*

Next, we need a way to hook HHVM into our Apache web server. This is done using FastCGI, which we will need to install. Luckily, HHVM provides a shell script to set this up. Run the following...

```bash
sudo /usr/share/hhvm/install_fastcgi.sh
```

Also, to ensure HHVM fires up at boot, run this...

```bash
sudo update-rc.d hhvm defaults
```

## Configure HHVM and Apache Virtual Hosts
The install script will ask you to restart both HHVM and Apache. Don't just yet, otherwise your site visitors will be seeing some 404 action coming their way. Instead, open hhvm_proxy_fcgi.conf and comment the single ProxyPassMatch line that's in there.

```bash
sudo nano /etc/apache2/mods-available/hhvm_proxy_fcgi.conf
```

```apacheconf
# ProxyPassMatch ^/(.+\.(hh|php)(/.*)?)$ fcgi://127.0.0.1:9000/var/www/$1
```

This stops all PHP/Hack scripts from being routed through FastCGI, this will allow you to choose which web applications you'd like to send through HHVM. If you're only running a single web application in your web server root, you don't need to do this, but I feel it's a smart move regardless. 

Right now HHVM is running but has no way for scripts to be handed off to it. We need to add the ProxyPassMatch configuration to the Virtual Host Configuration for the web applications we'd like HHVM to power. Add this to each Virtual Host instance in each configuration file (both secure and non-secure traffic covered in the example below.). 

```bash
sudo nano /etc/apache2/sites-available/hhvm.example.com.conf
```

```apacheconf
# HHVM Example - hhvm.example.com

<VirtualHost *:80>

	ServerName hhvm.example.com
    
	DirectoryIndex index.php
	DocumentRoot /var/www/sites/hhvm.example

	ProxyPassMatch ^/(.+\.(hh|php)(/.*)?)$ fcgi://127.0.0.1:9000/var/www/sites/hhvm.example/$1

</VirtualHost>
<VirtualHost *:443>

	ServerName hhvm.example.com
    
	DirectoryIndex index.php
	DocumentRoot /var/www/sites/hhvm.example
	
	SSLEngine On
	SSLCertificateFile 	 /etc/ssl/certs/hhvm.crt
	SSLCertificateKeyFile 	 /etc/ssl/private/hhvm.key
	SSLCACertificateFile  /etc/ssl/certs/hhvm.ca.crt

	ProxyPassMatch ^/(.+\.(hh|php)(/.*)?)$ fcgi://127.0.0.1:9000/var/www/sites/hhvm.example/$1

</VirtualHost>
```

#### *Pro-Tip*
You can also designate another port to explicitly use HHVM if you'd like to quickly A/B test the performance gains. To do this, simply open the port in /etc/apache2/ports.conf

```apacheconf
Listen 8080
```

Then in your Virtual Host configuration, create another instance with the new port specified and add the ProxyPassMatch configuration to the one you'd like to run HHVM on. 

```apacheconf
<VirtualHost *:80>

    ... 

</VirtualHost>
<VirtualHost *:8080>

    ... 

    ProxyPassMatch ^/(.+\.(hh|php)(/.*)?)$ fcgi://127.0.0.1:9000/var/www/$1

</VirtualHost>
```

## Restart Apache and HHVM
Now, we are ready to kick Apache and HHVM in the head. Restart both services...

```bash
sudo service apache2 restart
sudo service hhvm restart
```
The web application should load as you would normally expect, only a bit quicker. 

### *I'm getting 503'd!*
If you jumped over to your web application only to be greeted with a 503 error, this means you just need to fire up the daemon manually this first time or restart. Subsequent restarts will automatically fire this up.
```bash
hhvm --mode daemon -vServer.Type=fastcgi -vServer.Port=9000
```

## Testing
It's not immediately apparent whether your code is being passed through HHVM. There are a few ways to test this. 

### Client-Side
The easiest way to check if HHVM is doing it's thing is to inspect the response headers we get back from our web application. At the bottom of the header list, you will find **X-Powered-By** which should show **HHVM/3.2.0**.

To get to this, you can right click on the page, inspect any element, then click the "Network" tab in the developer tool panel. It will appear to be empty or nearly empty. Refresh the page and it will repopulate fully. Scroll to the top of the list and click the first item, it will be labeled with the domain name (hhvm.example.com in my case). 

### Server-Side
Drop the following into your application root and then access this script. If it returns **PHP**, it's not working. If it returns **HHVM**, you're golden!

```php
<?php 

if (defined('HHVM_VERSION')) {

	echo "HHVM";

} else {

	echo "PHP";

}
```

Install and configure HHVM on an Ubuntu 14.04 Server set up using an Apache Virtual Hosts configuration; run traditional and HHVM-based PHP-powered web applications side-by-side on the same system.

How To: Set Up and Configure HHVM on Ubuntu 14.04

We've all seen them, copyright statements in the footer with a date that's half a decade old. It makes you think, if this is so out of date, I wonder how they take care of the rest of their business. Even a copyright that's just a few years old is enough to make me think about things, and any reason for a customer to jump-ship, however small, is lost business. 

A quick way to make sure your copyright statement is current is to pull the information from the server's clock. Unless your server's date is off, which is highly unlikely, you can set up a simple bit of PHP to tap into that clock and make sure you're always displaying the current year. 

``` php
<?php echo date('Y'); ?>
```

**Example Usage:**
``` php
<div id="copyright-statement">
  Copyright <?php echo date('Y'); ?> ACME Widgets, All Rights Reserved.
</div>
```

Just pop that into any PHP-based page or footer template, add the standard HTML-based copyright copy and you're set, you can forget about it for another half-decade! 

Here are a few more examples for other languages

Javascript:
``` javascript
new Date().getFullYear()
```

Python:
``` python
import datetime
now = datetime.datetime.now()
print now.year
```

A quick way to make sure your copyright statement is current is to pull the information from the server's clock.

How To: Always Keep Your Copyright Statement Up To Date

A website can generally be accessed by entering the site's domain directly (domain.com) or by including a leading "www." subdomain. This offers increased usability in that users can enter the site in either way but lowers overall SEO in that web crawlers index both addresses as separate sites and will penalize the site for duplicate content.

This is easily fixed by forcing on or off the "www." subdomain while allowing the users to enter through both addresses. To do this you can modify your .htaccess file in your site's root folder by adding in the following mod_rewrite condition. If you have issues with your permalinks or cache after including this condition, move the snippet to the beginning of the .htaccess file. The codes send a 301 redirect while doing their thing so search engine crawlers know that this is a permanent redirect and to reallocate the pagerank data from the defunct subdomain's pages over to the main domain's matching pages.

__To force site to use "www.": __
```apacheconf
RewriteEngine On RewriteCond %{HTTP_HOST} ^example.com$ [NC] 
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]
```

__To force site NOT to use "www.":__ 
```apacheconf
RewriteEngine On RewriteCond %{HTTP_HOST} ^www.example.com$ [NC] 
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
```

These two snippets allow for the domain to use other subdomains while forcing the two main domains into either subdomain schema you'd like.The following snippets will force any subdomain that might be inputted into your preferred subdomain schema.

__To force site to use "www.": __
```apacheconf
RewriteEngine On RewriteCond %{HTTP_HOST} !^www.example.com$ [NC] 
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]
```

__To force site NOT to use "www.": __
```apacheconf
RewriteEngine On RewriteCond %{HTTP_HOST} !^example.com$ [NC] 
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
```

If you don't have a .htaccess file in your site's root, you can quickly whip one up by opening notepad and saving the file with one of these conditions as ".htaccess" without a file extension. When saving the file, enter the name ".htaccess" and select "All Files" under the save as dropdown and it will save the file without the extension. Once saved, simply place the file in your site's root and the file will immediately begin sending users to the proper domain.

You can test whether the file is working by accessing your site using the opposite address you set your site to default to. If it immediately switches up the subdomain, then everything is working properly. If not, check to make sure the file is saved without an extension (most commonly overlooked error) and the code is exactly as it is above, with your domain replacing niteodesign, of course. If you are still having issues, give your hosting provider a jingle and find out how they go about doing this, as it's pretty important SEO-wise.

People add and remove "www." from URLs like they're optional, so you need to handle both cases. Whatever varition's chosen should send you to the same content as the other but this can lead to content duplication issues. With a few easy edits to your Apache-based site's .htaccess file, you can handle all user and crawler cases ideally.

How To: Force On/Off "www." Subdomain with .htaccess

Mobile devices have a tough time handling css-based hover events (*:hover) due to the simple fact that iPhones, iPads, and Android devices use touch-based inputs where hovering is pretty much impossible. This proves to be problematic for elements that rely on hover events for usability, such as pure css drop-down menus. Replacing the menu with a JS-based method would bypass this issue but in some cases, that may be tough or impossible to do, especially when compared to this easy workaround.

For Android devices, the css hover event is activated simply by tapping the element that would otherwise be hovered over and, voila, the hidden menu is instantiated and you can move along to a child page. But iOS-based devices, such as the iPhone, iPod Touch and iPad, require a bit more coaxing to get the dropdown to show up.

iOS will not recognize the hover event class but will emulate the manner through which Android handles hover event classes (click-to-reveal) through an instance of a click event listener aimed at the head of the dropdown list (the word, when hovered/clicked, drops down the menu). Add the following code to the document.ready portion of your jQuery script in the site's global header (assuming the dropdown appears on every page like a typical navigation menu).

``` javascript
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {  
    $(".change-this-class li a").click(function(){  
        // Update '.change-this-class' to the class of your menu
        // Leave this empty, that's the magic sauce
    });
}
```
If you aren't yet using jQuery on your site, the following script includes the jQuery core and the code within document.ready and will resolve the issue with a simple copy and paste. Just be sure to update the class the script points to.

``` markup
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">  
    $(document).ready(function(){
        if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
            $(".change-this-class li a").click(function(){  
                // Update '.change-this-class' to the class of your menu
                // Leave this empty, that's the magic sauce
            });
        }
    });
</script>  
```
One caveat you will have to contend with is the fact that if the list head links to another page, tapping it will take you to that page. You can work around this by adding a carrot-arrow to the right of the menu item and point the script at that class. But, you will need to make sure the carrot is large enough so that users will be able to click it without accidentally tapping the link to its left, and, if its close enough, to its right.

### Update (11-14-15)
Joe V pointed out in the comments that this implementation opens the dropdown fine but doesn't really address how to close the dropdown once it's open. Thanks Joe V, and let me know how it goes!

To do this you can assume a click anywhere but the dropdown's content would signify a request to close the dropdown that's open.

Here's the (untested) code to do just that...

``` javascript
// iOS Hover Event Class Fix
if(navigator.userAgent.match(/iPhone/i|/iPod/i|/iPad/i)) {

    // Update '.change-this-class' to the class of your menu
    var menu = '.change-this-class';
    var $dropdownLink = $(menu + ' li a'),
        $dropdownContent = $(menu + ' li .content');

    // Toggle Dropdown
    $dropdownLink.on('click', function(){  
        // Toggle 'opened' class with the iOS dropdown-on-click
        $(this).toggleClass('opened');
    });

    // Click-Anywhere to close Dropdown
    $("body").on('click', function(e){  
        // Don't target content or menu links (as they toggle well already)
        if (e.target !== $dropdownContent && e.target !== $dropdownLink) {
            // Find the open link and fire click to close
            $dropdownLink.hasClass('opened').click();
        }
    });

}
```
Also, thanks to Admiral in the comments for the conditional optimization!

Mobile devices have a tough time handling css-based hover events (*:hover) due to the simple fact that iPhones, iPads, and Android devices use touch-based inputs where hovering is pretty much impossible. Let's take a look!

 How To: iOS and CSS Hover Events

Keyword density is simple enough to understand, the more targeted keywords your page contains, the more likely that term will be associated with that page as a keyword. Since the keyword tag is more-or-less obsolete these days, keyword density is the way search engine spiders and crawlers determine what keywords that page will come up for.

Some things to think about when considering keyword density and your copy is that the more superfluous copy you use, the less dense your keywords become. Avoid using terms like "click here to view" on links or other such flowery verbiage to describe items unless a legitimate call to action is necessary. Look to your navigation links for an easy area to chop away at copy used across all pages of the site. The header and footer are other places to find copy to cut.

Keyword density in the title is also important but what's important to consider here is that the higher keyword density occurring sooner in the title, the more firmly associated those keywords will become with that page. In other words, start out with your top keywords early and often and leave the less important copy for the end. Also, be sure to keep the keywords within the first 70 characters to ensure maximum impact.

Keyword density is simple enough to understand, the more targeted keywords your page contains, the more likely that term will be associated with that page as a keyword.