Thursday, January 18, 2007

The evolution of a web developer/designer

After reading the 10 CSS Tips from a Professional CSS Front-End Architect (and the comments - important) I feel forced to rewrite the popular "The Evolution of a Programmer" joke for web developers/web designers. So, here it is (improvements are welcome - I'm not a web developer or designer):

High School/Jr.High

hello.htm
Hello world!
Compatibility
- works in all browsers/text editors/you name it
- your dog can read it and your grandma can change it

First year in College

hello.html
<Html>
<Body>
Hello world!
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- your grandma can still change it with some effort

Senior year in College

hello3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello world!</title>
<META NAME="DESCRIPTION" CONTENT="This is a cool hello world example!">
<META NAME="KEYWORDS" CONTENT="cool,hello,world,example">
</head>
<body>
Hello world!
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- validates

Senior year in College - hacker

hello3.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
&#104;ello world!
</body>
</html>
Compatibility
- m3 d0n't kn0w

New professional/PHP developer

hello4.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
</head>
<body>
<?
echo("Hello world!" );
?>
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- PHP needed
- will validate until some other dumb developer changes a letter

Seasoned professional/PHP developer

hello5.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
</head>
<body>
<?
include "inc/class_hello_world.php";
$hello_world_class = &New class_hello_world;
$hello_world_class->display_hello();
?>
</body>
</html>
inc/class_hello_world.php
<?php
class class_hello_world{
var $hello = 'Hello world!';
function display_hello(){
echo $this->$hello;
return 0;
}
}
?>
Compatibility
- works in all browsers/text browsers/mobile
- PHP needed (4, 5 recommended)

New designer

hello3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
</head>
<body>
<blink><font face="Arial" size="2" color="#800080">Hello world!</font></blink>
</body>
</html>
Compatibility
- works in all browsers/text browsers/mobile
- can annoy any person on earth (so no user compatibility)

New professional designer

hello3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world!</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
<span class="hello">Hello world!</span>
</body>
</html>
css/main.css
.hello {
font-family: Arial;
color: #990066;
}
Compatibility
- needs browser CSS support
- NN4+, IE4+, FF, Opera 3.6+
- will not apply style on some mobile browsers

Professional CSS Front-End Architect (sarcasm)

hello_world_v03a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello world!</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<style type="text/css" media="all">@import "css/main.css";</style>
<style type="text/css" media="all">@import "css/bugfix.css";</style>
<!--[if lte IE 6]><style type="text/css" media="all">@import "css/bugfix_ie6.css";</style><![endif]-->
<!--[if gt IE 6]><style type="text/css" media="all">@import "css/bugfix_ie7.css";</style><![endif]-->
<link rel="alternate" type="text/html" media="handheld" href="http://helloworldmobile.com/" title="Mobile/PDA">
<link rel="icon" href="http://helloworld.com/favicon.ico" type="image/x-icon">
</head>
<body>
<span class="hello">Hello world!</span>
</body>
</html>
There should be 4 css files I won't bother to write.
Compatibility
- compatible with "most modern browsers"
- somehow IE6,7,FF,Opera renders the text wrong
- how the hack would you maintain the CSS pages for every IE service pack (hint: hire another Professional CSS Front-End Architect)

New Manager

hello.doc
Hello world!
File > Export HTML page...

Middle Manager

mail -s "Hello, world." bob@b12

Bob, could you please write me a webpage that prints "Hello, world."?

Senior Manager

% zmail jim
I need a "Hello, world." page by this afternoon

Top Manager

Calls Senior Manager
- Where the fck is my hello world page? The meeting with the client starts in 10 minutes!

MySpace administrator

We need to throw more servers at the hello world page.

Windows developer

Installs Visual Studio 2005
Opens Visual Studio
Google > "ASP 2.0 hello world"


I must add that I don't have nothing against professionalism in web development or design but I looks like simple things are more complicated to do right as you advance /evolve and way more knowledge is needed. Please note that this is a joke!

14 comments:

Anonymous said...

<?php
class class_hello_world{
var $hello = 'Hello world!';
function display_hello(){
echo $hello;
return 0;
}
}
?>


shouldn't that be echo $this->hello; ?

wskills said...

yap, changed

Albert said...

Obviously you should have a proper backend to the advanced php examples, with MVC architecture. So add in a ORM layer to store the data ("Hello world"). Then have the controller code fetch the data and pass it onto a templating language, where you can properly display it.

Obviously.

Mr Pink said...

Complicated sucks.
Time for a HTML revolution? (HTMLr)

hybrid101 said...


New Manager
hello.doc
Hello world!
File > Export HTML page...

good God, that's hilarious:D

Ahmed said...

This is so true. I guess what you failed to mention was how fast you advance between positions. I learned HTML/CSS a year ago and would now consider myself a "Professional CSS Front-End Architect" (har har). Great list though!

matt said...

There are reasons, most of them are standardization. I remember the good ole dhtml days, where Netscape was still in the picture. I could write a horrible version of wordpress, but the ability to upgrade would not be there. By separating the components it really helps and you can add/remove things easier. I do have to say though, the css thing... only have one master stylesheet which imports the rest... always the best way to go. Not having to touch the page, especially when heavy html/php/modrewrite is involved is always good.

Anonymous said...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Response.Write("Hello World")
End Sub

Ramnika Singh said...

you have a great list but how as web designers / developers progress in ability their code becomes more and more complicated.

Ramnika Singh said...

you have a great list but how as web designers / developers progress in ability their code becomes more and more complicated.

DD_nVidia said...

"I don't have nothing against"

That dear sir, is a whopper of a double negative.

Also, I gave up at complex PHP, Now I do Photography =D Sure its a more expensive hobby (yes, writing code was a hobby lol) but its fun, and i get outside now =D

STRAIGHTALK said...

pretty cool stuff you got here..

Adriatic Web Design Company said...

I like to see all the trends in context that have changed over time.

muxiaoyu said...

Our selection ofwow gold bean bags, bean bag chairs wow goldand home theater furniture are the mostwow gold comfortable pieces of furniture that will ever invade wow goldyour home. Set up your media room with coolhome theater furniture and bean bag chairs wow goldand your room will become the envy of wow goldall your neighbors. We even have some great accessories to complete your brand new LoveSac, including wow goldbean bag chairs slipcovers, LoveSac ottomans and more.