Next level of web development

The other day I met up with a friend who just finished giving a talk on HTML5. Well, not exactly HTML5 but more on the current mix of technologies that’s making up the current web development skills. The basic technologies involved are HTML5 (markup/data), Javascript (action) and CSS (presentation).

My friend used HTML5 in his title because there doesn’t seem to be a term for this new “level” of web development. And because he’s afraid his audience won’t know what he meant.

I remember writing Java applets (using the applet tag). I remember web sites without an ending paragraph p tag because the web browser was extremely tolerant. I remember web pages with font tags everywhere because CSS was practically non-existent back then. I remember displaying the current time using Javascript was an extremely cool thing to do.

Then web standards were introduced. HTML markup standards were encouraged. Javascript libraries started sprouting. And CSS came to the rescue, separating the presentation layer from the code layer.

As far as cross-browser issues go, adhering to current/latest HTML standards and using good Javascript libraries and using CSS meant that users are free to choose whichever browser they want. And the web site they’re visiting is expected to behave the same way and be rendered on the screen the same way (with maybe a few pixels off the mark as an error buffer, I guess) regardless of the web browser chosen.

And my friend is worried.

He’s worried that the current web developers are so used to the current set of technologies that basic programming problems are not even considered.

The big one is Internet access. He told me this group of (mostly young) web developers assume the Internet is as available as air. The idea that there might not be Internet access never crossed their minds, and so their web applications crash in the most spectacular manner when the user has no wifi.

And the worst part of it all was that these web developers think HTML5 is the current “web developing thing”. Sort of like “I’m a C# programmer” or “I’m a Python programmer”. They’re now developing in HTML5, without understanding that HTML5 is just the markup.

It’s the “as long as it works” mentality. I’m a practical man, so I agree with this mentality. I also do so with some understanding of the underlying technologies. This “HTML5, Javascript, CSS” combo seems like a black box, but it isn’t. Each part even advances independently of each other.

It’s like self-publishing on the Kindle without understanding the role of “traditional” editors and publishing houses. It’s like auto-tune of your song without understanding some music basics. It’s like relying on the auto-focusing of modern “prosumer” cameras without understanding basic camera equipment and terms.

I’m not saying they’re bad. I’m guilty of the last one. I use a camera that does everything for me when I click “Record” because I don’t want to fiddle with aperture and focal length and filters and such.

The problem is, if you don’t know (or care) what’s the underlying technology, you won’t know what to look for when things go wrong.

Question

Is there a term for this current level of HTML5, Javascript (I can only think of jQuery as a popular library) and CSS (CSS2/CSS3?)?

Internet Explorer 9 beta – first impressions

The beta version of Microsoft’s Internet Explorer 9 was released on 15 September 2010. I installed it to take a look. This is not a comprehensive feature list nor comparison. You can find that in other tech sites (which are probably hardcore about this kind of thing).

My first impressions of IE9 are good. Next, you must understand I don’t care much for the “browser wars”. The way I use the browser is that it must offer basic security, and then let me do my thing. I use Firefox most of the time. Safari feels weird to use. Google Chrome has this weird thing where my mouse scrolls jump the page too much, so I often lose the position where I was reading.

The first thing I noticed was, the page rendering in IE9 were bigger. Then I remembered I configured Windows 7 to render text larger than normal (because I’ll go blind looking at the default ant-like characters). Firefox didn’t obey this instruction. Immediately I felt good about IE9. I know you 20-year-old whippersnappers have perfect vision. Wait till you’re my age…

I read through some of the IE9 marketing material, and one of the highlights was hardware acceleration of text and graphics rendering. Basically, IE9 is offloading that rendering to the graphics processing unit (GPU) of your computer. Makes sense. The GPUs nowadays do physics calculations too, so why not do what it’s supposed to do anyway (render stuff).

I went to YouTube to give it a try. Here’s the weird thing. The video on a user’s page will play in a stuttered manner. I don’t know why. But if you click to the video’s page, it plays fine. (IE9 team members, if you’re reading this, you might want to take a look)

IE9 also offers pinning of sites. Basically, you can pin your favourite site to the taskbar. The idea is that people don’t really want to launch browsers to go to their favourite websites. They just want to go to the website. This also makes it easier to think of websites as an application on Windows 7. One click, and you’re at the website. And IE9 does its best to fade into the background, with minimal browser controls on screen, thus maximising website real estate. Couple that with the Aero glass interface, which fades the toolbar into the background, and you don’t even feel the browser at work.

That’s about it really (my impressions, not IE9 stuff). I also know IE9 supports HTML5 and CSS3, so here are some tests.

HTML5 video tag

If you can’t see the video, well, I don’t know why either. I followed the instructions on using the video tag, but somehow it fails to load the video. My best guess is that the video I created wasn’t encoded in the supported format (H.264?). This is hard to use… Anyway, I’ve got the code in case you can spot my mistake.

<video src="http://polymathprogrammer.com/downloads/html5testvideo.avi" controls poster="http://polymathprogrammer.com/downloads/html5testvideoposter.jpg" width="400" height="300">Your browser does not support the video tag</video>

[update] Here’s the YouTube version in case you’re dying to find out what the video looks like:

HTML5 canvas tag

I can’t do anything with the canvas tag, because it’s hard to sneak in JavaScript functions on WordPress. But I can show you where the canvas is, surrounded by a 1 pixel border.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc">Your browser does not support the canvas tag</canvas>

Your browser does not support the canvas tag

Rounded corners with CSS3

Let’s just say a lot of people are looking for a solution to rendering rounded corners.

<div style="-moz-border-radius: 15px;border-radius: 15px;border-color:#abc;border-style:solid">You can do rounded corners with CSS3!</div>

You can do rounded corners with CSS3!

That’s it. Let me know what you think of IE9.