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.

@aaronlayton Don’t live your life by HTML validation, sometimes it’s ok to be invalid!

— Colin Bacon (@iambacon) December 20, 2012

@aaronlayton nothing! Validation is just a guide.

— Joe Kendall (@_JoeKendall) December 19, 2012

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/

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']) && 

    (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

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

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.

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

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.

I love the idea of making re-usable components but always thought that scoped JS and CSS would be enough, why add on this layer of complexity with the Shadow Dom? I looked at it as just another way to hide spam content. A way to display something without Google being able to see it so you can market a page the best way possible but when you visit it you just seem spam, everywhere >_>

I have just stopped this video at 8:49, the thing that has clicked for me is that the Shadow Root is then placed into the Host Node… The rendering of the Shadow Node was done by the Shadow Root!

I’m sure I mentioned this to +Paul Irish or +Addy Osmani  before but I always thought it would be neat to give Front-end devs a way to do what Flash devs have been doing for a while… cacheAsBitmap…. Tell the browser that this section shouldn’t be updated, no matter what.

Am I right in thinking that each Shadow Dom could be rendered and cached this way and hence save on Render times? keeping the FPS down and only having to render when its Child Nodes become *dirty*…

There may not be a way to get the browser to cache this just yet, but having an attribute we can change for this would be most useful. Having the browser *cough*chrome*cough* cache these automatically would be useful too. Who knows the structure of our pages better than us right? Why can’t we say when to and not to update a frame?

Either way that has just made Components a lot more tempting in my books.

Google have just announced their brand new Phone and Tablet, and they beat the Specs of both the iPhone 5 and iPad 4^th Gen  whilst still being one of the cheapest devices out there…

Nexus 4 (Phone)
http://www.google.com/nexus/4/

Nexus 10 (Tablet)
http://www.google.com/nexus/10/

Also they innovate and update the operating system a lot faster than iOS who only update once a year. Android have just updated again with more great features, including updates to their Siri killer that now has more useful information, and backed by the Knowledge Graph.

Android 4.2
http://www.android.com/whatsnew/

Google Now (Siri killer)
http://www.google.com/landing/now/

I like the iPhone, but , Android is winning in my opinion. Did I mention that their Maps software won’t take you to the wrong place either and will show you better 3D buildings aswell..

What’s your opinion?

http://daneden.me/2012/07/max-css-in-depth/

He states that if we start using style.max.css as our default style and then style.min.css for our minified styles, then new web designers can easily change the min to max to see our full commented version. Sounds good right? While I agree that we need to make it easy for new and aspiring Designer/Developers I do believe a solution is already implemented in the web platform today.

It is already a widely accepted approach with javascript files to just have script.js and then script.min.js. You can see examples of this around nearly every site. Check out the download for jQuery as an example

Developer (unminified)
http://code.jquery.com/jquery-1.7.2.js

Production (minified)
http://code.jquery.com/jquery-1.7.2.min.js

This is a great solution as not only do we get to see our learning / hackable file we are also saving a few bytes in the process (these all add up trust me).

An example that was shown to me is the CSS over at Github (http://goo.gl/KWfDR). If you take a look at the file name you can see that this is a bundle of lots of different css files. In this case it would make sense that there isn’t an unminified version as this will be generated in a build process. This doesn’t mean that we cant improve on it though, and again there is already a solution for minifying things but being able to see the originals.

Take a look at the second example from Facebook (http://goo.gl/TSnHa). This again looks like a script that was built but there is just 1 comment line at the top that includes two numbers (or one really big one). This may just be the 2 original files that went into creating this file?

One solution to all of this is source mapping which was recently introduced in Chrome. It allows build/compile scripts to leave a note in the resulting file that tells the IDE what files made up the document. Using this would mean it doesn’t matter if we have a .max file or not. Source mapping would need to be bought over for CSS but you get the picture.

Read the great Introduction to Javascript Source Maps by Ryan Seddon.

 Final thoughts

I agree with just about everything Dan says expect for the min / max part as he makes a great argument and covers most of the concerns raised by everyone.

I do believe that if we have to ask everyone to change their default behaviour then things like this will never take off though. Just sticking with removing the .min to get the full version is the way it has always been? Although this is only my opinion I am open to see what other people think of this.

It would be great to see CSS Source mapping in Chrome and other browsers as then anyone looking to learn from your code can then go straight to the good stuff. This would also mean we don’t have to sorry what a file is called.

They have spent a lot of time on this as each of the characters has a full list of their animations and you can even make them speak.

We got talking about how annoying Clippy used to be and then (Trevor D-Thorpe) suggested that Clippy could be used for Cookie Control.

That’s where I came in with a quick page mockup. Take a look at the example but please note this does nothing but annoys the end user (no cookies are controlled).

Clippy Cookie

This is exactly what the web has come to with the new EU Law, forcing annoying popups and/or notifications regarding privacy. Surely there should be a better way?
What are your thoughts on the new law? I agree that there should be some control of our data, but I don’t agree that all site operators should be forced to put something on their site. What solutions has everyone else started using, is there a really good universal one? or are you rolling your own? Let me know in the comments.

I can’t wait to see the new design up and running so I’m going to get started, underneath here should be the live blog section where I will post small updates to what I am doing. I will keep my eyes on the comments if you have any questions.

Thank you for coming to check my progress and please remember to share this with as many people as you can.

19.32

Im just working on the post titles right now

19.32

The LIVE redesign of ValidateThis is coming along nicely. Just been adding some more behind the scene bits

14.06

The header is coming along nicely, still not sure on this menu. Will it do for now?

12.46

Just messing around with the header and my mountain like effect. z-indexing used to be hard but I find it really easy now

11.57

Ok it’s setup but I will re-active it only when it is needed

11.47

This cookie control is stupid. The web should be open and about Conventions not Requirements

11.35

Just adding in some Cookie control to ValidateThis to make sure I comply with the new EU Law

11.31

Woah that looks funky… A massive header!

09.15

What’s everyone upto today? I’m just about to start working on http://www.validatethis.co.uk again, getting closer to finishing it

21.43

Had to resort to an extra div but the end effect is there… I bet this looks horrible on a mobile upto yet haha

21.28

The share box looks great here http://www.validatethis.co.uk/news/join-along-with-our-live-redesign/ but Im having to rethink, try liking on FB, ideas?

20.58

Now to get rid of the AddThis wordpress plugin as it seems to be added to every Liveblog entry aswell

20.57

Ok I think that’s good, what you think? looks better in firefox http://www.validatethis.co.uk/news/join-along-with-our-live-redesign/

20.43

Check out the new share box in Firefox and then Chrome… Firefox seems to do a better job at clipping

20.19

Points to anyone who knows the best way to vertical align text inside a single element. Not wanting line-height as it could be 2 lines

20.12

Want to follow along with what I’m working on? Go to a single blog entry (not the homepage). Just before the comments

20.05

And were back, LIVE redesign of http://www.validatethis.co.uk Day 3 is gonna be a short one but its a labor of love so why not get a few hours in?

21.51

I have just identified a problem with the site that is affecting speed, but I will do all the speed optimizations in one go

21.31

Just about to setup #Chrome remote debugging on my #Android tablet. Gotta love these features thanks @paul_irish @ChromiumDev @googlechrome

21.11

A nice and simple footer for http://www.validatethis.co.uk

20.03

Its looking good up to yet, now onto the footer text and logo

19.37

I’m just working on the footer now, check out the CSS3 circles complete with clipping

18.43

Pc…. sooo…. slow…

17.48

Ooohhh it looks pretty being all dark! O_o

17.03

The white theme is growing on me, so I will create a theme option to easily switch back if I want to. TwentyEleven has these built in

16.39

Just about to start working on www.validatethis.co.uk again in my live redesign. Just getting a plan together for the next step and mobile

23.11

Well work on www.validatethis.co.uk is done for the day. I will pick up where I left off after work tomorrow. What do you think upto yet?

20.31

Now to add a background vignette effect. Anyone see any examples of this in the wild?

19.49

Ok so the sidebar is complete now, minus a few tweaks, but the look of it is there, check it out http://www.validatethis.co.uk/

19.02

That’s both of the Twitter box’s complete, along with custom JS.. What do you think?

17.46

That took longer than I though, but I now have a list of recent followers, quick share to all your friends so they can be on it

16.52

Just creating some Javascript / jQuery to get a list of my recent followers and display then just how I want them

15.56

It need some tweaking but it works now, AuthorBox complete http://goo.gl/kUgZo @andrewbeniston

15.37

Now the author box is dynamic lets test it for a different user! @andrewbeniston

14.57

Just getting the user data in wordpress with a set variable and falling back to a default profile if its not set $curauth = ($currentAuthor) ? get_user_by(‘id’, $currentAuthor) : get_user_by(‘id’, 2);

14.43

That’s the static version done, now to make it dynamic. Still want one extra effect but it can wait until later today

14.18

I can already see where I can optimize thing, but I will leave them for now and write them in to articles explaining why

13.40

Check out my pure #css3 hello my name is sticker http://goo.gl/2mycp, nearly finished with the author box now

13.00

Chopping sprites is fun! Just got all the images ready for the author box

11.57

Base widget styling is done, onto my new author box, static at first then make dynamic with wordpress author info

11.42

The widget area is coming along nicely, just added some CSS3 transitions but only working in #ff at the minute

11.07

The widget sidebar is coming along nicely, still some tweaking needed

10.22

Working through someone else’s theme is weird at first, until you start getting your head around it

09.27

First, copy the TwentyEleven theme as a starting point and customize the settings

09.13

Testing, testing, 1,2,3! Does the liveblog work?

We’re all taught early on that we should never modify files that sit directly on the server. This is because if something goes wrong then it means downtime, and when your site is mission critical (like an ecommerce site) then it can also mean loss of earnings. Having a visitor come to your site and see a 404 or worse a 500 could even damage your reputation.

So why am I doing it

You may have noticed, but the design that we use on ValidateThis is the default WordPress theme ‘Twenty Eleven 1.3′, it’s nice but a little boring at the same time. I wanted to make the site a little more my own and in the process maybe write up something about chopping / WordPress theming.

I like creating front-end experiences through design and HTML/CSS/JS and I thought it would be nice to somehow share this process with everyone else.

What will we see

Can you remember when all sites had one of these?

Anyone that is visiting the site during the live redesign will see all the changes I am making as I am making them (or at least when I save the file).

Nothing has been chopped or CSS’d before hand so when I am creating the widgets for the sidebars you will essentially be able to see me building them up from just a div to the finished style. I’m hoping that anyone on the site will get a glimpse of the thought processes and will be able to see the new design take shape along the way.

If I am changing PHP behind the scenes or doing anything I deem technical then I will update the live blog to try and explain it as I go along. It would be great to get feedback from the community at these points to see if they would do anything different or where I could improve.

I am not putting any time frame on completing this task and I expect that I will be working on it for about a week as I will be doing it after working hours. I will try and answer any questions left in the comments so if you are unsure of why I did something, or think I have messed something up then let me know.

There are still some things that I have not fully decided on so I am also open to suggestions / feedback and critique.

So if you like checking out other people work in HTML / CSS or seeing how certain things are done in JS then you should enjoy this. I am also leaving some ‘Easter eggs’ around the site for like minded people, if you spot one then make sure you Tweet about it!

Questions?

• Can we see the design now
  Nope, you will see it come together as I am building it, more exciting this way
• Will you be starting from fresh or building on top of Twenty Eleven
  I am undecided yet, know any good WordPress boilerplate themes?
• When will work start
  Some time this Sunday 13th May after I have woken up and enjoyed an English breakfast
• What technologies do you plan on using
  All of them!! The site will be built in HTML5 and I will utilize CSS3 where needed. jQuery will be used on the site but I am going to try and keep everything modular. I plan on using ajax calls, transitions, minifications, sprites etc…
• What if the site breaks or looks funny
  This is bound to happen, just refresh as I will be working on that section
• I have a question
  Just leave it in the comments and I will add it to this list

OK now you know the plan I am going to go back to my design and start planning ahead. Still think this is crazy? Spread the word with a tweet.

I hope to see you all on Sunday,