How to code .NET web applications from scratch without hurting yourself

Ok, first off, you never ever code anything from scratch unless you absolutely have to. Always leverage something you did in the past, be it a standard template test bed application, or a code generator tool you wrote. Starting from scratch for anything is daunting, so if you must, then break down the task.

Design the interface first

It might sound counterintuitive, but you should start from the end product. In this case, what the user would see on the screen. No amount of nifty programming tricks or beautifully categorised class files would do an iota of good, if the user cannot use the application properly.

You are starting from nothing. You are probably pressed for time. So when the user lands on a page, you want the user to do only one thing: the function the web page offers and only that.

Those flashy and cool applications with tons of options? Forget them. Multiple ways of performing a calculation? Forget them. If the user is supposed to save some data into the database, have only one save button on the page and make it prominent.

Draw out the design on paper. Shuffle TextBoxes, DropDownLists, Buttons and other web controls around. On paper. Make sure you’re satisfied with how it looks, and how the user is expected to interact with the web page. Position other elements such as headers/footers, maybe company logos.

This is especially important if you don’t have dedicated web designers. Moving design elements on paper is cheaper than moving them after you’ve coded hundred-line code files. If a design change fundamentally affects the code behind it, there’d be a lot of rewriting or refactoring to do. Laziness can creep in (or fierce defense of one’s code, regardless of its usefulness), and the design change never happens. And the user will be stuck with some unusable interface.

2 1/2 tier

You might have heard of multi-tiered (web) applications. There’s usually 3 tiers: user interface, business logic and data access. The idea is to separate the application into manageable chunks.

The user interface tier refers to the web page display, the HTML and web controls and validation logic. The code behind of the web page should only

  • Handle data display logic
  • Validate data and hand them over to the business logic
  • Do any display tricks with AJAX or special formatting

The business logic tier handles anything specific to the requirements of the application. Special validation rules, calculations or reformatting data structures are done here. This tier basically acts as a middleman between the user interface and the data access tier.

The data access tier takes care of retrieving data and storing data. Your selects, inserts, updates, deletes and other SQL commands should only appear here.

This separation helps compartmentalise specific duties. Imagine 3 different roles, web designer, programmer and database administrator.

  • The web designer can’t speak programming language, but is given functions such as GetLastProcessedDate().
  • The programmer gets the call of GetLastProcessedDate(), but doesn’t know how to get it from the database, so hands it over to the database administrator.
  • The database administrator finds the date, but don’t know how to format it for web designer, so hands it back to the programmer.
  • The programmer remembered the database date is in UTC, so does the appropriate calculations, and hands it back to the web designer in a string.
  • The web designer, ecstatic that the date is finally here, displays the date string in a beautifully designed Label.

Well, you are pressed for time, so you’re going to merge the latter two together. The business tier is going to work extra hard, and take care of database access as well. You are probably not going to host the 3 tiers in separate servers, so this’ll be fine. The main purpose is to separate visual display logic and business logic.

Data structures

Once you have the 2 (1/2) tiers, you need a standard way for the tiers to pass data back and forth. You have 3 choices:

  • DataReaders
  • DataSets and/or DataTables
  • Custom collection classes

DataReaders offer speed, but not much else. DataSets/DataTables offer more flexibility, but also more complexity. Custom collection classes offer the best of both worlds, but is hard to come up with a consistent code format.

I prefer custom collection classes, and I even wrote a small application to help me generate them. That small application has already paid itself several times over for the effort required to code it.

Assume that someone is going to hack your application

As an eccentric one-eyed professor of Harry Potter’s would say, “Constant vigilance!” This constant alert should be present at every single point of coding. Assume that the user can and will give weird input, and handle it. Assume somehow your flawless function is going to fail for an unforeseen situation, and handle it. Assume someone is going to hack your database, so use SQL parameters, and handle it.

Conclusion

So now you’ve designed your web application for the important aspects of usability, code manageability and security. All from scratch, and following the basic sound tenets of good programming practices. You invest the time and effort to do this well, and you’ll be able to come up with your next web application in a fraction of the time.

Fail to plan and you plan to fail

Recently, I was tasked with one of those improvement requests from users. The web application in question was to be enhanced to cater for more complex user roles.

“How many man days do you need?”, my team leader asked. I gave a rough estimate and said I’d have to think about the solution.

Off the top of my head, I’d have to modify some database tables. That would affect the query statements in the business logic classes. Which might mean some code changes. Then there’s the problem of displaying the data according to the more complicated user roles. And I still had to ensure secure retrieval of data.

So I thought about it. I scribbled notes. Drew some diagrams. Thought about it some more. Took another piece of paper and plopped some fake data on it. Crossed out some of the fake data. Redrew the arrangement. Scrutinised existing database schema. Compared with arrangement on paper. (Now you know why my desk is a mess) I even thought about which code parts I needed to change.

During this thinking phase, I might be

  • Sitting still and staring at monitor
  • Sitting still and staring at piece of paper
  • Staring up at ceiling with feet tapping along to music beat on my earphones

At first glance, you might think I’m doing nothing. I’m not. My mind is whirring with activity, busy displacing images, reasoning through logic and considering alternatives. I find it faster to move diagrams and table structures around in my mind than to redraw them on paper. Ideas are committed to paper when details start overflowing.

After maybe 5 days of scribbling and thinking (while fulfilling my other work duties), I felt I was ready to start actually changing code. Luckily, I was the original (and only) author of the web application, so I was already familiar with the code.

Why did I take so long then? Because I had to plan for future expansion. I had to plan for possible new marketing ideas from users. I had to plan for the possibility of someone else taking over my code. Plan, plan, plan.

When I finally fired up the source code in Visual Studio, I only had to do find-and-replace operations, minor code changes, and refactoring property and web control names. And all of that was done within an hour. Then I only had to test that the web application worked as before, with the new business rules added in. Which took up another few days.

As a programmer, some of your project tasks will have very little to do with actual coding. The real value of good source code isn’t hammering the code out in record time, but the thought that goes into it.

If you don’t watch these 5 demos now, you’ll hate yourself later

Never heard of demos? Well, start. Because being a polymath programmer means you need to appreciate the expertise and knowledge in making one.

In simple terms, a demo is a multimedia program, where you just watch and listen. There’s usually visual effects. There’s music, usually playing in sync with the visual effects. There might be a story or an overall message. And everything is run in real time, so you’re better off with a speedy processor and an even speedier graphics card.

Why should you watch demos? They represent the coming together of different expertise such as

  • artistic direction
  • software design
  • music composition
  • graphics work
  • 3D modelling (of recent times)
  • programming skills

[Adapting a quote from one of my favourite movies]
Unfortunately, no one can be told what a demo is. You have to see it for yourself.

1. The product

Also known as fr08, this piece of work was created by farb-rausch. It’s actually an intro, a class of demos where the programs have a certain file size limit. In this case, 64 kilobytes. The constraint used to be caused by the platform, but now, it’s mainly to challenge the skills of the demogroup.

This was my first introduction to the demoscene. And I was amazed by how a 64 kilobyte program could generate close to 11 minutes of visual effects and music.

This was accomplished through procedural generation, where part of the code generates the image and music data in memory. Instead of image and music data files, the code instructions for generating them were stored in the program, thus saving executable size (or total bundled zip size). A similar concept to writing code to write code.

2. Heaven 7

Perhaps you’ve seen some 3D graphics movie, like Shrek. The basic technique in a 3D render software is ray tracing, a calculation intensive process.

If you’ve play computer games, you’ll know that superb clock speed and fast graphics cards are indispensable. You might even know how game programmers cut corners so as to deliver visuals that are stunning yet run smoothly on most computers.

Heaven 7, by Exceed, delivers an awesome visual and auditory experience, ray traced and in real time.

3. Instant Zen

Fly through scenes of space, metaballs and clouds. Follow wriggling paint worms and ephemeral ribbons over abstract landscapes and sparkling rivers. Experience instant Zen! Brought to you by Synesthetics.

4. Dream Child

The visuals in Dream Child are stunning. What impressed me more was the music. There’s a harmonious blending of human voices, computer generated sounds and electric guitars.

Look out for the ASD ambigram and unique 3D shark models in Andromeda Software Development‘s other productions.

5. Beyond

Conspiracy, the demogroup responsible for Beyond, invites the viewer to explore the uncharted galaxies. Starting out from behind a small comet hurtling through space, you then flew past nebulae, planets and Saturn’s rings. You’ll witness the scorching surface of a sun and cyclical movement of gases.

Near the end, it’s as if you’re dragged by the scruff of your neck and pulled backwards. You’ll then whisk outwards, away from gaseous bodies, pass more planets, out of galaxies, and finally reach … the part where you have to go download the demo and watch it to find out what happened!

That ravenous youth at McDonald’s

I’m going to flex my powers of observation, and tell you a story of a young man eating through 2 McChickens…

It was a warm evening and I’ve just left the office. Standing just outside the office building, I felt the sultry breeze buffet my face. For some reason, the air conditioning for my office sector failed, and I seem to be the only one seriously hit by the lack of cool air movement. Even the slightly humid outdoor air felt like a relief to my stagnant imprisonment.

As I walked towards the bus stop, hungry and tired, the smell of acrid smoke filled my nostrils. A suffocating miasma had already enveloped the roads, caused by burning papers, candles and incense. It was the last day of the Hungry Ghosts Festival, the last day of the Chinese 7th lunar month, and I suspected as much.

I boarded the bus, travelled for a while, and alighted. Then I walked briskly towards the nearby McDonald’s to grab a quick bite first. Programming was an energy consuming activity. *smile* It was with some relief that I entered the fast food restaurant, its cool and more importantly clear air greeting me. There were three people in the queue and I joined in.

A young boy was playing around and the middle aged lady in front of me told him off. Probably her grandson or something. The boy was boisterous and had that predictable quality of unpredictably flailing his arms around just for fun. Unsurprisingly, he flailed his arms around. Luckily I kept my distance, so I didn’t get hit.

It was now the lady’s turn, and a remarkable coincidence occurred. She can’t speak English. At all. And at that particular moment, every single staff at the restaurant was either Indian or Malay and none of them can speak Chinese. Flustered, the lady turned to the Chinese youth before her in the queue and asked for help in translation.

I could tell the youth had some trouble understanding the thick Chinese accent of the lady. He did his best though. I think he mistranslated the chicken burger for a hamburger, but I stayed my tongue. I’ve learned that sometimes, people don’t like to be corrected, especially in public.

It was finally my turn to place an order, and I got a double cheese burger with iced lemon tea. As it turned out, the lady wanted something else. The youth was gone by then, and I stepped in as translator. She got chicken nuggets, fries and Coke. She actually wanted the McChicken instead of the nuggets. I helped her order the McChicken and asked for some tomato sauce as well.

Taking my tray of food to a nearby table, I saw one small black bag dumped on a seat and another on the table. The bags were slightly larger than normal waist pouches. Maybe “bag” was the wrong word. Shoulder sling pouches! (there we go) There was a cup of Coke on the table. Since there’s still space, I just sat down and started my brief dinner. Then I saw the youth from before collect a plastic bag with some food inside from the counter staff and proceeded towards my table and sat down, apparently the owner of those two bags, I mean sling pouches.

Oblivious to me, he reached into the plastic bag and brought out a McChicken. He unwrapped it, and went to the self service counter and squeezed a trail of sauce (presumably tomato sauce) onto the chicken patty, and came back. Then he wolfed down that burger like there’s no tomorrow.

A little shocked and surprised, I kept my face impassive. Due to the arrangement of the seats, I was on his left, a seat away, facing him. I started feeling the slight discomfort of being cramped with another human being, because there were other perfectly empty tables around. Still, I stayed and continued to eat my burger, though not as fast as he was.

I was nearly finishing my burger, when he finished his and crumpled his burger wrapper. Then he groped around inside the plastic bag. I thought he was reaching for some fries. His hand came back out with another McChicken. He unfolded the wrapper and proceeded to slather more tomato sauce onto the burger from the self service counter. Then he came back to his seat and attacked his second burger.

By then, I’ve finished my burger and was quietly sipping my iced lemon tea. Trying very hard not to stare at him, I took in his appearance. He looked to be maybe 14, 15 years old. No glasses. Green shirt. That’s about as far as I got without looking suspicious.

Taking bites off the burger and equal measures from his Coke, he downed his meal without missing a beat. He’s not looking at his watch either. (Now that I think about it, I didn’t notice if he had a watch. Some observation skills I had…) Which got me thinking, “What’s his hurry?” He finished his burger, drank the last of his Coke, threw the rubbish into trash bin, and left in a flurry.

On hindsight, I don’t think he’s so much rushing towards something or somewhere, but rushing away from something. Or someone. Like me. I guess normally, humans just spread out to the available seats, and only bunch close when the other seats are filled. Maybe the youth felt even more uncomfortable about the situation than I did.

Well, I finished my tea and got up, already dreading the tread through the smoky streets to reach home…

Path of a Polymath Programmer Part 3

So I talked about beginner polymath programmers in part 1, and books on role playing games and computer spies in part 2. In store for you in this post are typewriters, juxtaposition and XT86 computers.

Teaching English and learning typing

Due to my prolific reading, I have a moderately good command of the English language. My neighbour wanted to improve her English, and approached me to help her. She’s an adult and I’m just 11 years old then. I told her I might not be up to it, but she insisted. She also offered me an exchange. I’ll coach her on English, and she’ll teach me how to type on the typewriter.

This was in the dawning age of the computers, and typewriters were still pretty cool then. Hmm…. interesting. So I accepted her offer. She’s already attending some English classes, so basically, I was there to help her with some grammar exercises, spellings and pronunciations. She’s also attending typing lessons, so after our language sessions, she’ll let me practise on her typewriter using her typing course materials.

Type “d” then “e” then “d”. Stuff like this. After a while, I got really into the typing, and got my own typewriter. I still borrowed her typing lesson materials, but I practised at home. Typing is a very loud activity and irritating to the ears, and I didn’t want to bother her family.

It was good fun and my fingers were practically flying over the keys. I got to the point where I had instances of typebars (those metal things with the letter imprints) clashing with each other. You know, I think I still have that typewriter around. Excuse me for a second…

Introduction to computers

So, around this period of time, my school started these computer lessons. Computers were a new thing then, and the government wanted to expose young students to computers. So I signed up for them.

The first few lessons were utterly boring. We learned what a monitor was, what a keyboard looks like, the functions of a CPU (central processing unit). Frankly speaking, the worksheets handed out felt like an insult to my intelligence. “Fill in the blanks, what is this?” Monitor. “What does CPU stand for?” Central Processing Unit. Yawn…

Luckily, the teachers also mixed it up with some computer games. One of them had alphabet letters falling from the top of the screen, and I’m supposed to type the bottom-most letter to score. It ends when a letter hits the bottom of the screen. I was phenomenal at that game. The teachers couldn’t believe how a 12 year old could type that fast. Lessons progressed, but I lost interest and dropped out of the computer class.

I graduated out of primary school and plunged into secondary school. Joining other 13 year olds, I struggled with the change of environment, additional study work load and expanded social circles. My friends got me into Chinese comic books, or what one of them termed as “intellectual sustenance”. I remember sneaking a comic book into one of my technical classes and surreptitiously reading it, when I was supposed to be sawing and filing wood pieces for a woodwork project. The memory still brings a smile to my face.

Well, one of my friends was into pencil and paper type role playing games too, and introduced me to the Palladium series. I didn’t exactly got to participate nor game master a campaign, but I love reading through the books and imagining what it’s like to have the power of flight or intangibility.

I was also into console games. In those days, it was the Nintendo or Famicom or Sega. I love the role playing games because I got to live out imaginary stories without the tedious dice throwing and stats management. It was also through this exposure to playing games that I self taught myself Japanese. It was out of necessity, and I’ll leave the details to a later post.

The J word

So what with math formulas, mixing chemicals and wood sawing, I had to take art class as well. And I suck at drawing. I can never quite mix up a particular shade of colour I need. I remember making a colour wheel. That was fun. Then the art teacher threw a humongous word at me: Juxtaposition.

It unbalanced me. Hearing the word for the first time, and outside the context of a typical language learning environment (as in not in class or not while reading a book), I didn’t know what he meant. Later, I think he meant placing two different shapes close together and seeing how it looked like. Much like a polymath bringing two unrelated concepts together and seeing what happens.

Despite my ineptitude at drawing, I persevered. There was this task where I was to draw an apple. I must express the texture of the apple, the play of light across its skin, its shadow falling behind it on a surface. With a pencil. I bought apples and studied them for minutes before laying my pencil on paper. The monochromatic sketchings of that rosy fruit sowed the beginnings of an appreciation of beautiful artwork in me. Although I still can’t draw to save my life.

Programming destiny

My inescapable link with computers caught up then. Everyone around me seemed to have a computer. My friends attended computer lessons, and had cool games on their computers (Double Dragon was my favourite). I was envious and sad and jealous and frustrated. That toy computer I had was fun, but paled in comparison with the real thing.

My father found out about my disappointment. By a stroke of luck, his friend was getting a new computer and offered to give my father the old one. Thus I got my first computer, the quintessential XT86. It was old, displayed green text on black background, and only command prompts were useful, but I was ecstatic over it.

I went crazy trying out all the programs from the Orion adventure books. There wasn’t much of a user interface, but I didn’t care. I think I tried coding a mini text adventure role playing game. It didn’t come into fruition, but I learned a lot from bringing the mechanics of game play into programming. Time went by, and there’s only so much one can do with command prompts, so the computer became obsolete.

Parting words…

Well, I hope you’ve enjoyed reading the post. Stay tuned for the next episode by subscribing to my RSS feed, where you will learn the connection between console games and self-taught Japanese.

Continue to part 4

Silverlight 1.0 released – Another cutting edge technology chase?

Silverlight is a cross-browser and cross-platform technology from Microsoft. Building upon the Windows Presentation Foundation (WPF), Silverlight aims to bridge the development disparity between designers and developers.

Even as I’m writing this, I feel hollow, somewhat bland.

Just a few months ago, I managed to convince the powers that be in my company that upgrading from Visual Studio 2003 to 2005 was worth their while. It took me just over 6 weeks to compile a list of my arguments, justifications, references and images, and crystallise it into a 15 page proposal. While I’m pretty sure I’m the only one who actually read it, I did manage to get my point across.

And they granted me permission to buy just one license. A few months and some more convincing arguments later, I squeezed another license out.

Somehow, it takes a lot of energy to get corporations to embrace new technology.

Silverlight is promising. It also requires .NET Framework 2.0 and/or ASP.NET 2.0. It’s hard to oppose inertia when the developers around me are still happily supporting .NET 1.1 web applications. Some haven’t even moved to the .NET Framework.

I’ve heard of this new technology, mixed in with buzz words such as AJAX and XAML, but didn’t pay too much attention. I attended a seminar yesterday, where John Eldridge was introducing the exciting prospects of Visual Studio 2008, IIS7, SQL Server 2008, AJAX and of course Silverlight. Anyway, John mentioned Scott Guthrie’s Silverlight release announcement, so I went and checked it out. Cool stuff. Hey, there’s a Halo video! Hmm… why was Safari used instead of Internet Explorer in the screenshot?

Laptops, Meetings, Nostrums

Laptop My department shares just one laptop. Sure we don’t often need to travel and work at the same time. Sure there’s a budgetary constraint. Still, it sucks when my users get new laptops every two or three months, when my work computer is struggling to compile source code.

While I’m not exactly jealous of the ability to work whenever I have to, it sucks when I go to a meeting and everyone’s got a laptop but I’m just carrying notes and scribbling on spare pieces of paper. And I’m supposed to be the IT guy.

That’s in the past. My users still get new laptops every two or three months, but I’m cool with my situation in meetings. Now I have a faint disdain for people typing away when someone’s talking in a meeting. I’ve had experience where I’m conducting a training session and someone’s softly tapping away at the keyboard. I think it’s rude. But I’m at the lower rungs of the corporate food chain in that room, so double suck.

I have witnessed some people actually composing and sending emails, and fleshing out Excel spreadsheets during a meeting, which were not related to the meeting. Go do them at the work desk! I’m sure it’ll be more productive.

Meetings should be used to rapidly whittle down objectives and issues. The faster the whittling, the faster everyone gets to work on whatever was discussed. Problems creep up and might need more time for discussion. Take a note of it and move on. I agree some people function better when taking notes on a laptop than with pens and paper. Those people had better be typing at speeds of at least 60 words per minute, and adept at using their note taking software of choice.

Personally, I prefer pens and paper for taking notes. Since I listen and think through the speaker’s words, I rarely get to write anything. And during lapses, I’ll quickly scribble a few choice thoughts.

Recently, I attended a seminar with Allan Pease as one of the speakers. There was an interesting point he made. Most men can only do one thing at a time. One of the examples Allan gave was that of communication. When a man speaks, he cannot listen. And when a man listens, he cannot speak. A man changing focus away from listening, cannot listen!

So what’s the cure?
I honestly don’t know. Doing a non-meeting-related work task during the meeting might have saved you a few minutes, but if you missed something important, you’re going to waste someone else’s time. The more people in the meeting, the more time wasted.

We can try banning laptop use during meetings, but I’m sure somewhere in the world, someone is having an apoplexy from not being able to multitask writing emails, doing Excel spreadsheets, modifying a Word document and attending a meeting all at the same time.

My first outsourcing disaster

It’s been slightly over 3 weeks since I first posted my first outsourcing project. (Find out more about my experience with Elance, the initial outsourcing site I chose). The project was to create a custom WordPress theme for this blog. And I’ve just received the deliverables from my service provider.

It. Was. Terrible.

Actually, it was more than terrible. It was disasterrific. Before I go into all the gory details of how I was mentally mutilated due to the horrific nature of the deliverable, let me give you more details of my encounter with the service provider.

First, I was given 3 samples. My gut feeling told me immediately the most appealing one. Then I said that one had a partial outdoorsy header background, which doesn’t suit this programming blog.

So that background part was changed to a sinusoidal wave, with a diminishing amplitude from left to right. Well that won’t do, since it seemed to insinuate the gradual downfall of my blog.

So I asked them to change it back, but the colour theme was a bit discordant. I said there seemed “too many” colours, that I read from web design material that 3 main colours is enough.

The next sample had a practically monochromatic look. I sighed. Giving the header picture some more thought, the female face in the image seemed to stand out. As much as I love looking at Caucasian females, her face seemed out of sync with this blog. So I asked them to take her out (pain, pain) and replace her with something else.

I got a small girl and some math formula drawn in chalk. This is a respectable and professional programming blog site! Whilst cute, the little girl eroded the programming aura on the site. My patience wearing thin at this point, I asked them to put in some C# code instead. That should be more appropriate, and I thought I should really start giving more concrete instructions (more so than before).

It was fine actually. I also thought I’d like to change some code text in the image. I asked them to change the namespace name from “TotallyUnnecessaryNamespace” to “TotallyCoolNamespace”. At this point, I felt the faintest hint of irritation from the service provider get a bit stronger.

The code text was changed alright. If you’re at all familiar with programming, you’ll know the natural fonts to work in are the fixed width fonts, the popular one being Courier New. The changed code text, was written in some sans serif font. Oh my goodness! How can I present myself as a competent programmer if I don’t even have matching code fonts!

I asked them to make changes again, and suggested perhaps using Notepad so that matching fonts and correct aligning was almost guaranteed. The next sample came back, with a code line missing a semicolon!! That [insert appropriate expletive] line won’t even compile! Ok, I’m starting to lose my cool here…

The deadline was looming, and the service provider’s already gone ahead with setting the theme up on their test server. I decided to stop this tennis-balling of changes, and told them it’s fine, and I’ll wait for the test blog site to be up.

When it was up, I went to take a look. I peeked at the HTML source code, since I specifically asked for CSS driven layout. I thought that was understood to be layouts without using tables. Apparently, my specification was taken to mean using CSS to control just colours, widths but not with divs. Unbelievable.

It was kind of late in the project timeline, and they offered me two options, either they refund my initial payment (of US$150) or I give them 7 more days to rewrite everything using CSS the way I wanted. I’m this far in. I might as well go all the way. Oh for the love of all that’s good and pure! Fine, I gave them 7 more days.

They surprised me. Just 2 days later, they told me to go to the test site and take a look. I went, and naturally looked at the HTML source code again. I scrolled up and down, and while the div tags weren’t how I envisioned, they seemed to do the trick. Then I scrolled to the end of the HTML source. Behind the html end tag, there was a script tag, doing document.write() of a series of integers.

I didn’t know what it wrote, but I surmised it’s probably a series of ASCII characters. So I wrote a small program to print out the ASCII characters. It was a script tag with a reference to a Javascript script file on an unknown site. I Googled the site. It was banned!

Imagine my horror! Then a panic wave crashed over me. I quickly closed my browser, shut everything down, fired up my antivirus program and ran a search through my computer. Then I got up from my computer and started to swear sulphurously.

After I exhausted my list of curse words (which isn’t a lot), I inhaled a deep breath, took a long draught of cool clear water and waited for my incensed feelings to soothe. By the time the antivirus program finished, I was calm enough to compose a terse but direct message to the service provider asking for the existential reason of the malignant script.

The next day, I got a reply that they had no idea how the script got there and they’re rectifying it. My instincts told me that my constant changes had miffed them to the point that poorly thought out layout samples and irresponsible scripts started creeping in.

Finally, the theme looked fine, the HTML source checked out and I sent the service provider their final payment of US$150.

And I waited tensely for the deliverable to arrive. After that long and arduous journey, the end was finally near. What I expected was something similar to free themes you’d get from the WordPress theme viewer. Zip file containing a few PHP files, an accompanying CSS file, maybe a screenshot picture, and an image folder with the images used.

When I downloaded the zip file, I immediately subjected it to an antivirus scan. Twice. That baleful script tag episode made me paranoid. It was also surprisingly huge in size. The free themes I downloaded were maybe 65 kilobytes. I thought this would be similar.

Man, was I wrong!

They sent me the entire default WordPress directory compressed into an 800+ megabyte behemoth. Complete with index1.php, index2.php and other temporary working files. The CSS file had misspellings such as pannels, serch_text and catagory. Inconsistent use of hyphens and underscores were used in names.

I felt like I was put through a dozen Worse Than Failure‘s all at one go. My eyes hurt. My brain froze. My heart palpitated. My fingers curled into claws. I wanted to wail and cry about the inanity of it all. My mind screamed “Why is this [insert favourite expletive] happening!” and “What in [insert your desired higher being]‘s name is going on?”.

Granted, the instructions were to unzip everything and FTP everything into my server. They were trying to be helpful, so I’m hands-off, treating me like any non-technical buyer. Well, I’m a programmer. I’ve got to know what goes into my server.

So I looked deeper. After scanning the unzipped files and folders of course. Image URLs are hardcoded to the test site. What!? What if they shut down the test site? Then I thought harder. Maybe they’re helping me save my bandwidth by hosting some of the images off my site. Then I thought harder still. What if they’re using me as part of a traffic referral plot? The audacity! The nerve!!

In the half hour since I opened that zip file, I felt anger, surprise, disappointment, humour, hand-on-the-face resignation, jaw-dropping shock, white-hot irritation, soggy cold depression (alright I’m running out of adjectives, somebody help me here…)

This project cost me US$300, an amount bid by the service provider. I just wanted a simple, clean and maybe artful design. I thought that amount was maybe low, but should still secure me something reasonable. Wrong, wrong, wrong! I got slapped with a dose of reality. You get what you pay for.

I should’ve done this myself.

First dance with Elance

Outsourcing is becoming a major consideration for corporations, big and small. Even individuals are outsourcing some of their work. It has also caused concern for many people, who’re afraid of what will happen when their work is outsourced.

I, am a programmer. The company I’m working for does offshoring, which means work is given to other employees, but they are located in another country. I say that’s just a long-winded way of saying you’re outsourcing my work to another person.

So I’ve decided to experience being an outsourcer. The project I had in mind? A custom WordPress theme for this blog. I am totally capable of creating simple graphics, working out HTML/CSS and even going through PHP (which I’m unfamiliar with). I might even enjoy the design process.

However, the whole point of this exercise is not the blog theme, but the experience of handling a project with an outsourcee. I’m lucky in that I’ve prepared documents and work requirement for my offshore colleagues, so I leveraged on that experience. Now to find a freelancer…

There are many web sites I can use, such as Elance, Rent A Coder, Guru and Odesk. First, I need to know if the site can service my WordPress theme project. I spent some time browsing through the web sites, doing searches on “custom wordpress theme” and see what comes up. Using the unscientific method of gut feelings, such as “Do I like how the site works?” and “Do I like the general feel of freelancers at the site?”, I decided to use Elance as my base.

Hereafter I detailed some suggestions and advice for you, after I went through the whole thing.

1. Sign up for an account only
Elance gives you the option of posting your project and signing up for an account all at one go, if you’re a new visitor. DO NOT do both together. I strongly suggest you sign up for a new account first.

If you’re like me, you’ll spend an inordinate amount of time thinking up a user ID, and another chunk of time thinking up a password. Having to figure out how to post a project is going to add to your stress level.

2. Verify your credit card
The moment you login to your brand new spanking account, go verify your credit card. Elance requires you to have a valid and verified credit card, because that’s how you’re going to pay your service providers. The verification process takes 3 to 5 working days, depending on the credit card company and your bank.

What does your bank have to do with it? Elance actually charges you, through your credit card, two small amounts. You are supposed to login to your Elance account, where you’ll enter those two amounts, and thereby complete the verification process. If you don’t do Internet banking, you’ll have to either wait for your credit card bill to arrive or call the bank to ask for the two amounts.

Be at ease, because Elance will credit the two amounts back to you, minus currency conversion loss. I lost a few cents due to the US dollar and Singapore dollar conversion. I’ve decided to accept this level of loss. It’s a one time thing anyway.

The verification takes time, and service providers like to know that payment is assured. A project has a payment icon, featuring “Credit Card Confirmed” and “Elance Billing and Payment Confirmed”. The latter, which means your credit card is verified, is more likely to attract more and better service providers. Which is part of the reason why you should just sign up without posting any project, until your credit card is verified first.

3. Posting your project
There are quite a few options available. Depending on your project, you’ll have to decide which category to post it to. Choose one major category and the sub category. You don’t have to post it to multiple categories, because the service providers will be able to search for new projects. The last thing you want to do as a new buyer of services is to project spam.

3a. Project description
Be specific. Describe your project in simple, clear and unambiguous language. Even if you want ambiguity, state precisely that, as in “The requirement for the image is deliberately ambiguous to encourage your creativity.”

Note that your potential service providers may not speak your language as their main language. Be precise in your requirements. Do not state anything that might possibly be construed as having any meaning other than what you mean. Believe me, it saves time and anguish to do it right the first time.

Your project description will be seen with a shortened version when searched. Make full use of this short version. I think it’s about 240 characters in length, so put your main points in front. Full versions are seen when service providers log in. Some might just glance through projects, looking at only their brief descriptions without logging in. Just my opinion.

3b. Bid period
The default length of bidding is 7 days. I set it to 12 days, since I thought I could spare the time. Wrong move! 7 days is actually quite ideal. Any shorter, and you might fail to get enough good bids. Any longer, and you lose urgency. On hindsight, I should have set the bid period to 8 days. This should give prospective providers a full week, in case they don’t check every day.

Again, on hindsight, I should have posted on a Monday. I posted mine on a Saturday, and I felt I could have given my project a better chance if I had waited two more days. You can only choose the project post day if you signed up without immediately posting your project too. See, point number one is very important…

3c. Escrow
If your project has a justifiable high budget, consider setting it up as an Escrow project. What it means is that you pay Elance first, which holds the payment. Upon completion of project milestones agreed by you and the service provider, Elance will then pay the service provider. Since you are the new kid on the block, service providers are more likely to trust Elance to pay them than to trust you to pay them.

Of course, service providers can bid with an Escrow option. If you then choose them, your project payment will change to payment with Escrow, even if you initially set it to Standard payment.

4. Managing bids
Check out the service providers bidding on your project. Check their portfolio, their Elance history, their web site if any. Most importantly, take note of their payment agreement or timeline. This gives you an idea of how their business agreement will be phrased.

Then send them messages through the Private Messaging Board (PMB) provided by Elance. You are basically conducting interviews. Ask them questions just as if you are hiring them. Hey, you are hiring them. Now that your money is on the line, you should be questioning them.

The PMB records all correspondence between you and the service provider, and is used to settle any disputes or misunderstandings.

5. Be firm with your budget
Don’t have a rubbery budget. The first service provider I chose had a different idea of what they should be paid versus what I was willing to pay, even though I’ve stated my budget when I posted my project. Be careful when a service provider says the bid is there as a placeholder, and the budget can be discussed further in the PMB.

There’s nothing wrong with that. I’m just not ready to dish out tons of cash with a non-existent budget limit. I was willing to pay a bit more, so I negotiated a higher budget and still the service provider was unhappy. In the end, the service provider dropped the bid, and I had to choose another one. This cost me two days of messaging back and forth. Because I had a rubbery budget.

Perhaps I didn’t do enough research checking out the average prices for doing WordPress themes on Elance…

6. Note the time zone
Your service provider is probably from a different time zone than you. Take this into account when you communicate with them. Your service provider has their country listed. Just find out what time it is in their country.

I’m in Singapore, and my chosen provider is in India, so they are about 5 hours behind me. If I send them a message at night, I can expect a reply say 1 or 2 pm the next day in Singapore, assuming they start work at 8 or 9 am.

7. Be clear in your correspondence with service providers
Having clear project descriptions helps reduce correspondence time. Sending clear messages in the PMB helps too. Once, I said the heading was too “bold”. I meant that it looked too obvious, too in-your-face. My service provider took that to mean the font was bold, as in the font was bold. Always say what you mean.

8. Paying your service provider
Surprisingly, payment was easy. My project was posted with the Standard payment option, so I don’t know how the Escrow paying process is like. For the Standard version, all I had to do was enter the amount I want to pay the service provider and click “Submit”.

The business agreement between the service provider and me was half of payment at the start of the project and the rest upon completion.

Conclusion
So far, my experience as an outsourcer isn’t too bad. Elance is actually quite easy to use and navigate. From my experience dealing with my offshore colleagues, I’ve learnt to ignore certain levels of quality in the work. In this case, the payment wasn’t high, so I decided not to badger the service provider for too many changes.

This doesn’t mean you should settle for sub-par quality work! I’m just saying you get what you pay for. For me, this was a learning experience. Besides, I’m probably going to tweak the design further. Doing the changes myself is faster than sending a message to the service provider, have them do it, send it back to you, and it’s still not what you want.

Path of a Polymath Programmer Part 2

So I talked about how I started on my path to becoming a polymath programmer, and ended with an introduction to two book series on role playing games and a computer programming super spy. We’ll see how they played an integral part in my development.

Role playing games
Dragon Warriors was my first experience with role playing games. A role playing game is a game where you act out a (fictional) character in a script or story. You can be a knight in shining armour, or a dastardly devious crime lord. You can be a floundering wizard apprentice, or an imposing space fleet commander.

There are real life role playing games, where actors and actresses play out their imagined characters, with full decorative settings and costumes. I’m referring to the pencil and paper variety, alongside Dungeons and Dragons and Blood Sword series. They are known as pencil and paper, because the statistics of the characters are recorded on paper using pencils. Statistics change frequently, so writing down values and then erasing them is common. The players still act out their roles, but only for dialogue, and they usually gather around a table with their stats sheets in front of them.

Recording character statistics (or stats) is a way of measuring progress in a game campaign. Typical stats to note are strength, speed and intelligence. These stats are used to determine the damage inflicted, reaction time in maybe dodging. You also note down possessions like weapons, armour and special items. Possibly relationships with other players, the character’s beliefs and lineage as well. Basically, you are charting down as complete a life story of a fictional person as possible, within the context of the game genre.

Thus I got introduced to the concept of storing values that can change frequently. In programming, they’re called variables. Mind you, I still don’t know programming. It’s the concept that matters.

Dice, statistics and 3D
Then there were dice. I’ve used the 4-, 6-, 8-, 10- and 12-sided dice. How do you get a value between 3 and 18? Oh, use 3 6-sided dice. What’s the difference between using 2 4-sided dice and just one 8-sided dice? 2 4-sided dice skews the results to the middle, while an 8-sided dice gives results of equal probability. Thus my introduction to simple math statistics theory and 3 dimensional geometry. The 12-sided dice boggled my mind…

Unlimited powered fettered by only by limited imagination
I also game mastered for my friends. A game master (or dungeon master) is the person who knows and controls everything about the game. I would play every single character in the story not played by anyone (NPCs or non-player characters), every monster they met, choreograph every battle, settle any unforeseen circumstance (like what to do if my friend “dies” but the others are still in). I can throw freak storms in, and see how the players react.

This omniscient and omnipotent ability might sound cool, but it’s very tough. Try keeping track of basilisk killing properties, beautiful enchantress back stories and making judgement calls for everything, all in your head. All at once.

Unreal rules
Then you’ve got to remember any rules specific to the game, but is hard to imagine in our real world. How do you handle weak gravity movement? Can magical fire burn on water? While astral projecting, can the person get hurt? Can zero point energy be pinpointed at one specific area? What would happen if a dagger is fitted to a piece of wood, and fired from a bow in place of an arrow?

So you’ve got to keep tons of stuff in your brain RAM, and take note of special rules. Sounds like loading a program in your head with business rules thrown in to me. Games mastering taught me people management skills, adaptability and coming up with creative solutions to non-standard problems, much like software management.

Introduction to programming
The other set of books is about this adolescent computer expert slash spy codenamed Orion, working in a secret government agency. In his adventures, there’d be situations where his programming skills come into play, and a program code would be given. There are about 5 to 7 programs included in each book.

The books start with Orion in some fairly normal setting, like in school, and he’d be handed some obscure piece of information. He’d then type in a program and using that piece of information, work out his next mission. And this first program involves encryption and decryption like substitution ciphers and ASCII value/number transformations (65 represents capital A).

Then there’d be programs you can play with, like the one on Nim, where you play against a computer enhanced human in the story. The odds were against you, but if you can find the place in code where your disadvantage lay and change the line of code, you stand a chance… Or you’d be desperately keying in the program code, and then entering the atmospheric levels of gases to determine toxicity. Though you’re safe, Orion isn’t, because he’s allergic to certain inert gases.

Since I only had a toy computer then, I couldn’t play with a lot of the programs listed. And my toy computer’s BASIC compiler is limited in some ways. Still, I got a kick out of reading the program listing, and guessing what ASC (change to ASCII value) or MID (middle of string, the substring function in BASIC) means.

Executing programs in your head
For these short programs, I found that I could “run” them in my head. There’s this program for calculating the precise angle to tilt a mirror so a laser beam is directed correctly. I didn’t even have to try out the program. Reading through the source code, I did some math, and came up with the answer (45 degrees).

What is interesting about Orion’s adventures, is the variety of situations where his programming expertise was put to the test. The code word programs taught basic encryption and decryption. The Nim program taught simple game mechanics and how to code them. The atmospheric gas and laser beam angle programs transformed math calculations into program code.

This kind of exposure is crucial. Business rules change. Science and technology changes. The ability to understand new concepts quickly and transform them into usable program code is far better than rote understanding of standard problems and their solutions. Building upon previous knowledge is important. Sometimes, quantum leaps in knowledge serves better, and quantum leaps come from that “Eureka” moment from many sources.

So, what’s next?
I’ve told you the impact role playing games and early program code introduction had on me. In the next part of this series, I’ll talk about typewriters, juxtaposition and the must-have story of how I got my first XT86 computer.

To becoming polymath programmers!

Continue to part 3