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?)?

CSS colours and hexadecimal

CSS, which stands for Cascading Style Sheets, allows you to work design wonders with your HTML. A web page is split into two parts, the design and look versus the data and functions of the page. And CSS is the main driving force behind the former. Aaron’s article gives an excellent introduction to this separation of form and function of a web page. Then stroll through the breathtaking CSS Zen Garden to gain inspiration for your CSS design project.

So why do you need to know anything about hexadecimals? Because a major component of CSS values come from declaring colours. And colours are represented in mainly hexadecimal values.

In CSS, colours are commonly represented as RGB triplets, such as #336699. RGB is a short form of Red, Green and Blue. A discussion of colour theory and representation is beyond the scope of this article. Simply know the six characters (not including the hex sign #) is divided into 3 parts. First two characters represent red, middle two for green and last two for blue.

These two-character parts are the hexadecimal values of the colour component (red or green or blue), and range from 0 to 255. The higher the number, the more of that colour component. So #0000ff represents pure blue. If it’s still new to you, rest easy, because most standard image processing software has a hexadecimal colour converter.

There are other ways of declaring colours in style sheets, such as color:Red. To a non-technical person, that is very useful. But we’re programmers. What if we need to dynamically generate the style sheet?

Programmer’s dilemma – Making tough choices

I’m lucky to be given relatively free reign in my design and coding decisions. Unfortunately, that often means I have to choose between what is right, and what is easy. Here’s a few of them:

Usability – If it’s optional, then don’t make it mandatory
When given the choice of optional fields, a user can and will take the path of least resistance, which is to leave all optional fields as is. I recently developed a web page that retrieves records from a database. All fields are optional. Consequently, everything from the database is retrieved. Which crashed my web server.

Since I was giving a presentation to a customer when this happened, I was just a tad embarrassed. After the presentation, I went back, made a few fields mandatory, with corresponding error messages to avoid Raymond’s feedback form experience. Sometimes, I have to be a user too.

Result oriented – Programmers Don’t Like to Code
I used to tell people I love programming. I’m not so sure now. Then I realised what I really love is solving problems, and that I can express my solution in a program. Even though solving that CSS display bug or optimising that loop gives me joy, it means little to the result-oriented user. So I have to choose practicality sometimes.

CSS Design – Suckerfish Dropdowns
There is this web application I’m maintaining that displays a menu for navigation. The code is unwieldy and makes use of some Javascript copied and pasted without much thought. Hideous to look at and horrendously tedious if I have add a new page. Luckily I found a more elegant dropdown menu solution. It means I have to redesign the navigation element, but it’s worth the effort.

The one you never want to meet – The Brillant [sic] Paula Bean
I have seen my fair share of obnoxious idiots of programmers, and chose patience and understanding instead of exclaiming their ineptitude. But Paula, the experienced Java programmer, raises stupidity to an art. Brillant!

Socialise or be ostracised – In Programming, One Is The Loneliest Number
Not only is programming by yourself lonely, but it’s dangerous to your code, health and social life. It was tough when I first started interacting with people I don’t know but were on my office floor. Don’t have any programmer colleagues? Get help by persuading your manager to hire another competent programmer.