Fix Bad value X-UA-Compatible once and for all

If you are still stuck having to support older browsers when developing your brand new sites, or even developing sites for an intranet, then chances are you are using the X-UA-Compatible meta tag. It’s that meta tag that you place in your header to let Internet Explorer know to use a certain rendering engine. There are a few issues with it though, best practices, validation, site speed to name a few… Lets fix this once and for all!


1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

When Internet Explorer comes across this line it will change the engine that is being used to first Chrome Frame, if the plugin is installed, and then to Edge (the highest supported document mode of the browser). We need to override this in certain situations as by default, any website running on an Intranet will run in Compatibility Mode (Quirks mode) and any website on Microsoft’s Compatibility List will change to it as well.

Note: In Internet Explorer 9 and earlier versions, quirks mode restricted the webpage to the features supported by Microsoft Internet Explorer 5.5. As of Internet Explorer 10, quirks mode behaves differently than the previous versions of the browser. In Internet Explorer 10, quirks mode conforms to the differences specified in the HTML5 specification. For more info, see Specifying legacy document modes.

So If the above line works what is the problem, why should you fix it and what are the reasons you should fix it?

 Validation

One of the first things I notice is that this meta tag is used on quite, a few, websites already, but it causes validation errors when checking against the HTML5 doctype. When checking on Twitter what to do about the X-UA-Compatible entry here are some of the responses I received.

So should you worry about this? Probably not, but it’s easy to fix and I am a believer that if you can fix a validation error then you should.

Note: I agree that validation is only a guide and I too don’t follow it 100%. It is a guideline of best practices, use it as such.

Rendering Speed

The last nail in the coffin for the Meta fix is the overall rendering speed for your pages. Lets say you are on an Intranet so the website will load up in compatibility mode. The browser will request the page and then start downloading as normal, then it will start rendering as normal… until it comes to your meta tag.

The browser will then have to discard anything that it has done and start all over again. This is the same as causing Layout or Style recalculations, it is just another stop along the way to a fast site.

TMI my friend

Too much information! Now days there are a lot of people out there that don’t use Internet Explorer so you just end up sending this data needlessly. Browsers like Chrome, Firefox, Opera, Safari ..etc… just don’t need to see this, but we send it anyway as adding the meta tag is an easy fix for a problem that only occurs on Internet Explorer.

While the extra 62 bytes are negligible, they are still removable and as we know “Every little helps”. As people are increasingly browsing the internet on some form of mobile device, it starts to become more important to think about all of these small wins. For every byte of data we have to wait, it is another ~ms in the delay to a site being usable. Remember just because you have a fast site, doesn’t mean your user has a fast internet connection.

Visitor loss vs page load time - http://www.pearanalytics.com/blog/2009/how-webpage-load-time-related-to-visitor-loss/

Visitor loss vs page load time
http://www.pearanalytics.com/blog/2009/how-webpage-load-time-related-to-visitor-loss/

Just removing this meta tag could save you lots of time overall. A site that I work on gets on average 6 million page views a month and if you multiply that through out the year it is still a saving of over 260mb of data.

The fix

The fix is simple enough but obviously it is not as easy as dropping in a line of HTML. The new fix will be implemented server side and to make this fix complete we need to

  1. Fix the page validation – This is achieved by simply removing the tag
  2. Rendering speed – Instead of waiting for the browser to see the tag and then change modes we will send the correct mode upfront as a response header
  3. Make sure that we only show the fix for Internet Explorer – We will just use some server side browser detection and only send it to IE

PHP

To add the header in PHP we can just add this to our page


1
2
3
if (isset($_SERVER['HTTP_USER_AGENT']) &amp;&amp;
    (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
        header('X-UA-Compatible: IE=edge,chrome=1');

Or you could add it to your .htaccess file like so


1
2
3
4
5
6
<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>

You can change the files that are matched and doing it this way will mean the header isn’t set for every resource (images / javascript / css). That should be everything to make sure your site is running good and you are following best practices for a PHP site.

C# (csharp)

You could add in a new customHeader to your web.config file like below, but as far as I am aware you can’t do browser detection in here.


1
2
3
4
5
6
7
8
9
<configuration>
  <system.webServer>
     <httpProtocol>
        <customHeaders>
           <add name="X-UA-Compatible" value="IE=Edge,chrome=1" />
        </customHeaders>
     </httpProtocol>
  </system.webServer>
</configuration>

So the better solution would be to inherit all your pages from a custom Controller (or extend from System.Web.UI.Page if you are using WebForms) and add in the following check.


1
2
3
if (Request.ServerVariables["HTTP_USER_AGENT"] != null &&
                Request.ServerVariables["HTTP_USER_AGENT"].ToString().IndexOf("MSIE") > -1)
                    Response.AddHeader("X-UA-Compatible", "IE=edge,chrome=1");

So that’s it… “ Bad value X-UA-Compatible for attribute http-equiv on element meta.” fixed for good…

In the future we won’t need to include this in our projects but for now we have to just stick with it. Let’s hope that everyone adopts Windows 8 😉

Add Social info to WordPress Profiles

Just a quick snippet for you all as I needed to do this recently for my custom AuthorBox on this site and I didn’t want to include a separate plugin to achieve this.

Just open up your functions.php and add the below…


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Add contact links
function add_contactmethod( $contactmethods ) {
    // Add Twitter
    $contactmethods['twitter'] = 'Twitter';
    // Add Facebook
    $contactmethods['facebook'] = 'Facebook';
    // Add Facebook
    $contactmethods['googleplus'] = 'Google+';
    // Add Facebook
    $contactmethods['skype'] = 'Skype';
    // Remove Yahoo IM

    unset($contactmethods['yim']);
    unset($contactmethods['aim']);

    return $contactmethods;
}

add_filter('user_contactmethods','add_contactmethod',10,1);

I would class the above as pretty self explanatory if your used to WordPress but if not let me try and break it down for you.

We add a custom filter to

user_contactmethods

This lets us intercept the listed options before being processed. We get passed an array which we store in $contactmethods

Array
(
    [aim] => AIM
    [yim] => Yahoo IM
    [jabber] => Jabber / Google Talk
)

From here we can just use normal PHP to create a new element to be stored. We could have used array_push() also but this way looks better to me. Try and keep the Key to one word or a hyphenated word, the value will be the text the end user sees.


1
2
// Add Twitter
$contactmethods[ KEY ] = VALUE;

Notice how I also unset some of the entries? These are just ones that I don’t feel I will need, you can either include these lines or not. Well I hope this helps you understand how to add your own custom contact details to the WordPress Profile pages. What’s that? You need to know how to get them back out aswell… ok then.

Retrieving Author information

Getting the new author meta information is really easy! Check out the official documentation on it afterwards here. If you are within the Loop then you can just use the below


1
2
3
// Get the Googleplus contact information
// This echo's out
the_author_meta( "googleplus");

Or if you need to use this somewhere else then just pass in the User ID along with the meta you want to get


1
2
3
// Get the Googleplus contact information
// This echo's out
the_author_meta( "googleplus", 21 //UserID );

Simple as that folks 😉

Web Lab Collection

Ok so I have just done a quick impromptu page for Web Labs. I will edit the page shortly and come up with a better layout, but my aim is to get a collection of other peoples web labs, test, experiments, playground folders.

We all have some place that we put our experiments and more people now are turning to services like codepen.io, jsfiddle etc. I just think it would be great to have the more personal list of labs.

If I can get 20 labs I will release the link to my own labs page that just has such random stuff in there. I once did a mashup that merged HTML5 Voice Recognition, JSONP (running through a PHP proxy that retrieved XML), Alice Bot and Google Translation to get an AI that I could talk to and it would talk back to me…

What cool things have you worked on? Want to share your labs let me know in the comments on here or here.

Give your Apache file Index a face lift with h5ai

Are you running an Apache server?

If you are then you would have been greeted by that horrible directory page more than once. Isn’t it time to get rid of the old to make way for the new? Give your Index pages a face lift with h5ai.

h5ai makes browsing directories on HTTP web servers more pleasant

h5ai is a modern replacement for the built in Index view for folder listings and it boast plenty of neat features. It is build with HTML5 Boilerplace, jQuery + Modernizr and can be implemented with just a few steps (2 in my case). It has been created by Lars Jung (@lrsjng) and he has a number of other useful libraries and tools, go check him out.

The design of h5ai is nice and minimal and uses CSS3 and sprinkles of JS to get things working. If you have JS turned off though it degrades nicely. There is a built in colorbox that enables you to view images on the fly and to top it all off there is a code syntax view so you can easily read things like JS and XML.

This definitely makes your index views easier to digest and easier to navigate around as there is a built in search and tree view.

There are plenty of optional features and extensions you can enable with h5ai as seen above where you can enable QR Codes on file hover. The whole install sits in one folder at the root of your site and all you need to do is get your server to add its index file to the index file list. Basically just add this line to your .htaccess

1
DirectoryIndex index.html index.php /_h5ai/server/php/index.php

Here are just some of the optional features that are available

  • breadcrumb for the current directory, linked to all parent directories
  • auto refresh
  • custom header and/or footer for each directory
  • select and download multiple files and folders at once, either as tar or zip archive
  • filter function for the displayed files and folders
  • folder sizes
  • localization with a lot of languages already included
  • link hover states between main view, breadcrumb and tree view
  • display HTTP web server details
  • image preview with keyboard support
  • text file preview with Markdown rendering and keyboard support
  • QR codes on hovering files
  • sort files and folders
  • status bar with additional information about files and folders
  • thumbnails for images, pdfs and movies
  • directory tree view
  • display breadcrumb in the browser title

If your not convinced yet then why not head on over to the official page or check out the Github repo.

h5ai demo

Know of any other cool scripts like this? Let me know so I can get them installed and featured on here.

Touch it 1 World Plays

I decided to take a night off coding Touch It 2 tonight and instead I tried to experiment with some of the data collected with Touch It 1.

I decided it would be good to visualize where all the players are coming from as this may help when making Touch It 2.

I wanted to be able to see the plays being added to a drawing in realtime so I had a quick search around the net and came across this script.

http://www.patrick-wied.at/static/heatmapjs/

 

Heatmap.js was exactly what I was looking for, it even provided a nice way to draw at certain x y locations. After I had got a quick test knocked together the rest just fell into place.

I used PHP+MySQL to generate a Javascript array which I then looped through with a delay so I could see each dot being added. The end animation is quite good even if I do say so.

I didn’t spend much time trying to tweak the results as I feel the saved PNG shows me what I wanted to know.

Touch It World Plays

That’s it really nothing else special about it… Just a heatmap, move along, nothing more to see here…..