Posts Tagged 'HTML4'

Google Coding Style Guides

Google have made their internal coding style guides publicly available. I’ve been checking out the HTML and CSS and JavaScript guides over the past couple of days, and would strongly recommend that anyone working on the client-side take a look at both.

Guides like these are full of little tips and tricks. They give you confidence that you’re doing something the right way – Hey look! Google agrees with me! – and you’ll always find some little optimization you haven’t come across before. In this case, I had a definite case of old-dog-taught-new-trick, and also an incredible sense of déjà vu: at least one of the techniques suggested in the HTML guide is a naughty little cheat from years ago (actually, last century) turned into an ultra-modern performance optimization.

Teaching an old dog new tricks

Little more than a week ago I wrote an article for this blog about the SSL features in IIS Express/Visual Studio 2012. Part of that article suggested a way to switch between http and https for images stored on a third party site using an action filter. The HTML style guide suggests a much simpler solution – a form of relative pathing I’d never come across before: simply omit the protocol from the url. Instead of a path like src=https://localhost:44301/Content/Images/1.jpg you use src=//localhost:44301/Content/Images/1.jpg. This makes the path relative and substitutes the appropriate protocol automatically. It relies on the images being available in both formats – but it is massively simpler than my original solution. Time to go back and refactor.

Teaching a new dog old tricks

Way back when the internet was a lot smaller and slower than it is nowadays and everything was in black and white (okay, I made that bit up), we sometimes used to cheat to reduce bandwidth. I remember building an online shop for a small web development company in the 1990s where we had one page with a long table listing all products. We saved more than 100kb (a massive amount of bandwidth back then) simply by omitting the closing </td> and </tr> tags. That was naughty even then, but worth it. Since then, of course, it has been completely verboten because it’s such a horrible breach of the rules. Well guess what – that’s exactly what Google recommends!

Here, for example is what they don’t recommend:

<!DOCTYPE html>

<html>

<head>

<title>Spending money, spending bytes</title>

</head>

<body>

<p>Sic.</p>

</body>

</html>

And here is what they do:

<!DOCTYPE html>

<title>Saving money, saving bytes</title>

<p>Qed.

To be fair, they do suggest being cautious on that one – but still: wow! That’s such a sea-change in approach I find it hard believe it’s going to be accepted any time soon, if ever.

Whether you agree with everything in there or not, the guidelines are definitely worth a look. There’s plenty of food for thought in there and you never know, you might pick up a new trick or two like I did.

Kevin Rattan

For other related information, check out these courses from Learning Tree:

Building Web Applications with ASP.NET MVC

Building Web Applications with ASP.NET and Ajax

Offline Web Applications with HTML4

One of the exciting new features of HTML5 is the ability to create offline web applications. The idea is that the developer can set up a manifest that tells the browser to cache the application. The latest versions download to your machine when you visit, and if you want to use the application when you’re not connected, you’re automatically directed to the cached version.

Obviously, an offline application isn’t going to be much use for anything server-intensive. You’re not going to be able to book a flight or buy a dvd – at least, not until you’re back online. But it will be useful for more client-side focused apps such as games.

So useful, I want to be able to use it right now.

I’ve mentioned my Chutes/Snakes and Ladders game a few times on this blog. One of my goals with the game was to allow users to create their own personalized versions and embed them in their websites. The problem is – what if they have a popular site and I get hit for a lot of bandwidth?

I could give them the HTML, CSS and JavaScript easily enough, but the pictures, sounds etc. would still be on my server.  Obviously, if I could write an application that would work offline as well as online, then I would have something that could be embedded in someone else’s site – sound, images and all. Equally obviously, HTML5’s offline functionality, while useful, wouldn’t do the job for me. It’s great for saving to the browser, but not for creating apps that can be embedded in other people’s sites. Fortunately, there’s already a good old-fashioned HTML technique that will: the data URI scheme and base64 encoding.

The data URI scheme allows you to encode a resource such as an image or a sound using base64, and then set the encoded text as the source for the HTML element. It’s a widely supported but little used technique – and it means that instead of resources being stored in separate files, they are included in the HTML file itself. There’s a price to pay, of course. The base64 strings are bigger than the original files, so in normal circumstances, you’re using more bandwidth not less. But it allows you to create an application where all the resources are downloaded to the client – or, in my case, where everything can be included in someone else’s website and I don’t pay for their bandwidth.

Here’s an excerpt from the HTML source for a png image:

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADx/ …” />

It works exactly the same way with HTML5 audio files:

<audio><source id=”drip.ogg” src=”data:application/ogg;base64,T2dnUwACAAAAAAZroL …” />

The key thing is that little bit of meta information at the start of the attribute value. First you specify that you’re using data, not a file reference. Then you tell it the MIME type and the encoding, add a comma and enter your encoded text. Simple. Now all I had to do was write a program convert uploaded game images into base64 strings. The underlying app is a C# ASP.NET MVC application, so that meant writing the following:

c# code to base64 encode iamge

The end result is a web application that can be completely downloaded to the client. You can check out the completed game, and the offline versions which you can embed in your own site, at http://lalaladders.time2yak.com/

Kevin Rattan

For related information, check out these courses from Learning Tree:

Building Web Applications with ASP.NET MVC

C# Programming: Hands-On

HTML5: Next Generation Web Development


Learning Tree International

.NET & Visual Studio Courses

Learning Tree offers over 210 IT training and Management courses, including a full curriculum of .NET training courses.

Free White Papers

Questions on current IT or Management topics? Access our Complete Online Resource Library of over 65 White Papers, Articles and Podcasts

Enter your email address to subscribe to this blog and receive notifications of new posts by e-mail.

Join 29 other followers

Follow Learning Tree on Twitter

Archives

Do you need a customized .NET training solution delivered at your facility?

Last year Learning Tree held nearly 2,500 on-site training events worldwide. To find out more about hosting one at your location, click here for a free consultation.
Live, online training

%d bloggers like this: