Compl33t

A change is as good as a holiday…

14 June 2009

Just a little update to tell you about the exciting things happening in my life at the moment (so you can safely skip it if you want to)…

I’ve been working on contract as a Technical Consultant for PwC’s Global Controlled Vocabularies Service for the last six months or so, and at the end of this month, my contract expires. My time there has been one of the best things that could have happened to me, for a number of reasons. For one, working with people from across the globe has taught me that meeting new people, and interacting with them, isn’t as difficult as I once thought. I’ve realized that there are people out there less technically inclined than I am, and those that are doing things way above my level of comprehension…and I’ve had the honour of learning to communicate with many people on both sides of this spectrum, and being a bridge between them (to the best of my abilities). In this short time, I’ve been exposed to many things I’ve only read about in prescribed books. I’ve learned a new programming language. I’ve rediscovered a passion for user experience. I got to do a lot of the things I am actually quite good at. I was blessed enough to work with wonderful people I actually get along with. Not a single regret.

Despite all of this, getting up at five each morning, the 45 minute (or two hour, depending on my luck for the day) commute, and the being dog-tired when I got home each day was (is) taking its toll on me. The salary (which was very respectable for someone just out of university), after the fuel costs and the short service intervals (I do about 100kms each day), allowed me to just get by. The fact that I worked on contract with no benefits at all wasn’t really a problem for me, but it wasn’t as good as a permanent appointment. Small things, but trust me, they tend to get to you.

Then, for some or other reason, I decided to start using Twitter again. On the very first day of being back on Twitter, I saw Afrigator was looking for a PHP developer. I started chatting with Justin, and we ended up ingesting caffeine (along with Stii). Unfortunately, the timing wasn’t quite right, and things didn’t work out. A shame really, because it would have been stellar to work with these guys. It was not all in vain, though, because it set off a long chain of very fortunate events. I ended up putting my CV out there, applying for a few jobs, and getting to know a recruiter or two. Nothing worked out. After a few rejection e-mails, I was despondent. Looking back, I don’t really know why, as PwC made me a very decent offer, so I was assured of a job, even if I didn’t find anything else. As a last resort, I tweeted. I didn’t expect anything to come from it, but hey, it couldn’t hurt to try.

What happened next still has me shaking my head in disbelief. Someone happened to sign up for Twitter a few days before that tweet. They happened to do a search for “Stellenbosch”, just for interest’s sake. They happened to see my tweet. They happened to be looking for a web developer. So, after an e-mail or two, a very pleasant interview, and an excruciating wait…I have a new job, starting next month. Right here in Stellenbosch, doing what I love doing. Talk about being fortunate, and blessed.

So, yeah. I’m counting down the days…and I can’t wait to start at GivenGain (do check out the website, the new version just went live, and boy…is it impressive).

Life

iPhone, Palm Pre, or some random Android phone?

10 June 2009

No Comments

Pre-article disclaimer: this is an opinion piece. It may be rational, it may be a little bit uninformed, but keep in mind that this is my opinion.

The keynote has passed and the question is: “Are you still sticking with the Pre Choice now Post iPhone 3GS?“. The fact of the matter is, I’ve been contemplating what my next phone will be for a while now, and since the release of the Pre, and now the iPhone 3GS, things have started shifting in the direction of a decision. I’m going to tell you what I think of the three major platforms out there, and what I’ve decided to do.

I’ve been waiting for this phone for quite a while now. Wait. Let me rephrase that. I’ve been waiting for WebOS for quite a while now. After the Pre’s release and the subsequent reviews, I can safely say that WebOS is everything I’ve been hoping for. The web developer in me starts giggling like a little girl when he thinks that all that needs to be learned is yet another Javascript framework. You may scoff at Palm’s decision to build their apps (or, the whole OS, in fact) on HTML5/CSS and Javascript, but the truth is that, the advances in this area are bringing this technology set closer to true programming than ever. With a little time and patience, using the <canvas> tag, we may even see 3D games running natively on WebOS. And it has true multi-tasking! Now, the phone itself is another story entirely.

Yes, it’s aesthetically pleasing. Very much so. The reviews were, overall, quite positive. There are, however, a few design decisions that don’t sit quite right with me. The top of my list is probably that Palm opted not to use a glass screen. If I’m dropping that amount of money on a phone, I don’t want it scuffed up within the first month. Also, too much plastic. Then there’s the keyboard. Not too sure about that keyboard. Build quality? Not sure yet. Time will tell whether this phone will last (and thanks to all the lab rats early adopters). I have this idea that Palm put most of their effort into amazing software, with the hope that this preliminary phone (’scuse the pun) will get them out of the red…and then they’ll be able to release something with hardware that’s on par with what Apple can give us today. Then I won’t think twice, I’ll snap it up faster than you can say iPhone 3GS.

Ah yes, unlike most of the fanboys out there, I can see past the reality distortion field. With this new iPhone, Apple has finally added the features that every other phone out there has had for the last two or three years. 3 Megapixel camera? Pah. My girlfriend’s dumbphone has a 5 megapixel camera, with autofocus, and more settings than you can shake a Shuffle-shaped stick at. Voice control? Remember the Nokia 3310? Yep, back in 2003 even entry-level phones already had that (or a semblance of it, at least). MMS? Oh please. Magnetometer? Nothing more than a gimmick. And yet, all these mundane features finally coming to the iPhone has once again made it stand head and shoulders above the competition.

Why? Because, now it has those features it always lacked, along with those features no other phone out there has. We all know what they are, so I’m not going to reiterate. Another thing the iPhone has going for it is the fact that it’s 3rd generation hardware. Apple has, by this stage, had enough time to refine both the hardware and the software. It’s a true, tried and tested platform. One that millions swear by. On top of that, you’re going to have trouble finding hardware built with the same quality of materials.

It’s too bad that to truly personalize your phone, you have to Jailbreak it…

The hero of the smartphone world, Android. This is a difficult one to discuss. From the start, Android was designed to run on multiple devices. Sure, they launched it on a phone platform, but since then it’s found its way onto all kinds of devices. Let’s concentrate on the phone side of things. The first two widely-known Android phones, the HTC Dream and HTC Magic are solid devices, to be sure, but for me personally the platform isn’t mature enough yet…in parts of the world other than the US of A. The problem with Android, as with the Palm Pre and the first iPhone, is that it was developed with the American market in mind. Here in South Africa, we don’t (Openmarket is still in beta…and it’s just not the same) have access to the Marketplace. What good is a phone if you can only use the apps that come with it. Then you may as well buy a dumbphone (and even most of those can run J2ME apps). When they can sort out their localization issues, it’ll shoot up right next to the iPhone OS for me.

The other thing is, Android is based on Linux. The geek in me loves this, and every time my eyes wander to another platform, it nudges me and reminds me where my allegiance should lie. The reason is that, being Linux-based gives the OS endless potential. That being said, iPhone OS is BSD-based, and with a few tweaks, I can have an actual terminal in front of me that accepts most of the CLI commands I know and love. Another game changer may just be vendor-customized versions of Android. If you haven’t seen the leaked vids of HTC’s Rosie build, then I suggest you check them out. From a UX point of view, it looks like a dream to use. That, and HTC is apparently releasing its third and fourth Android phones (known as the Hero and Lancaster at this stage) later this month, with Rosie. The Hero, in particular, looks like one sexy machine. Even Samsung is jumping onto the bandwagon, and damn it all, their phone looks set to be just as awesome.

What it all boils down to in the end is, when the OS is mature and localized, and if the hardware that appears in the next few months can match that of the iPhone, some random Android phone may just well become a true contender.

So, what’ll it be?
When I said that I’m inching towards a decision, well, I kind of lied. I’ll be able to afford any of these in a month or so, but it’s going to be a difficult decision. At the moment, the most rational thing to do would be to buy an iPhone. As a mature, third-generation platform, you really can’t go wrong. But, Android it tugging at me. If I had to decide today, right now…it would be the iPhone.

We’ll see when the time comes.

Gadgets

Android iPhone 3GS iphone os 3.0 Marketplace palm pre smartphones webOS

Event Listeners and why they’re awesome.

29 May 2009

No Comments

If you’ve been developing for the web for a while now, you’ve probably always used inline event attributes to trigger some or other Javascript code when needed. Well, guess what? Things have progressed by leaps and bounds, and we’re getting closer and closer to true behavioral seperation. This is a good thing. It means that not only can style truly be seperated from content, we can also seperate our Javascript and (X)HTML, effectively leaving us with a much cleaner, more semantic markup. This is, as you know (if you haven’t been living in an ice-cave on Bouvet Island) , where the web is heading.

What have event listeners got to do with this? Well, let me explain by way of example. Here’s the old way of doing things*:


<a href="#" onclick="doSomething();">Click Me!</a>

Simple enough. Clicking on the link will call the doSomething() function. Stop it. Stop doing it this way. There’s a new way of doing things, and I’ll demonstrate using four seperate Javascript toolkits…

First, create the link like you normally would, but add an “id” attribute, and leave out the “onclick” attribute:


<a id="mylink" href="#">Click Me!</a>

Next, in an external .js file, define your event listeners. You can define a function containing theses listeners, and call it when the DOM Tree has loaded (in fact, do that, it’s good practice).

Prototype:


Event.observe( 'mylink', 'click', function(event) { doSomething(); } );

jQuery:


$( 'mylink' ).click( function() { doSomething(); } );

Dojo:


mylink = dojo.byId( 'mylink' );
dojo.connect( mylink, 'onclick', doSomething);

Mootools:


$( 'mylink' ).addEvent( 'click', function() { doSomething(); } );

Easy, isn’t it? Now, when your page is done loading, event listeners will be attached to each of the elements defined. You can find out which events you can listen for at the W3C’s DOM Events spec. Depending on your framework/toolkit of choice, there is almost no end to the things this enables you to do. I recently used listeners to allow a user to dynamically add form elements, as well as populating those elements with the relevant data on an edit. It’s working perfectly across all browsers.

What you’re left with is clean, wonderful markup with no (or minimal) inline Javascript (and, hopefully, no inline styles).

Doing things this way has the added benefit of making things work in IE. “But!”, I hear you shout, “event attributes have always worked in IE!”. Yes, but there are exceptions where it just won’t work. For some or other reason, in IE, the event will sometimes refuse to fire the relevant code when the element is injected after the DOM Tree has finished loading. Using event listeners fixes this.

We’re heading for exciting times in web development, and things like this are only the tip of the iceberg. Modern browsers are getting incredibly efficient Javascript engines and the HTML5 and CSS3 specs are (hopefully) quite close to completion. There has never been a better time to be in web development than right now.

* I’m well aware that setting the href to “#” is lazy. I just don’t feel like going into the whole graceful degradation thing right now. Maybe in a future post. Also, if you’re looking at my site’s source at the moment, I know that I’m not practicing what I’m preaching. I’m working on it.

Development Web

awesome Development Dojo DOM event listeners events javascript jQuery MooTools Prototype Web

Modifying Element Attributes Across Browsers

30 April 2009

2 Comments

Internet Explorer has done it again. After modifying quite a complex script (it constructs a multi-level tree from a taxonomy and asynchronously loads this into the DOM Tree as an unordered list) to actually be able to collapse and expand (quite tricky as the DOM Tree changes continuously as new terms in the tree are loaded), it was working as intended in every browser except IE (from 6 up to 8, in fact).

My short answer to this would be to get jQuery (or a similar framework) to do the grunt work for you. However, circumstances may dictate (as in my case), that you have to do it yourself.

After quite a bit of searching, I thought I’d compile my discoveries into one post for the benefit of anyone else that may want to use JavaScript to modify the attributes of an element in the DOM tree. These will (or should, anyway) work on all modern browsers.

Adding a CSS class to an Element
This is one of those things that make me just shake my head. The obvious way to do it would be:


getElementById('elementid').setAttribute('class', 'cssclassname');

Where elementid is the id of the element you want to modify (obviously) and cssclassname is the name of the class that you want to set for the class attribute (just as obvious). This works for every browser except IE. To make IE behave, we have to add:


getElementById('elementid').setAttribute('class', 'cssclassname'); // For all sane broswers.
getElementbyId('elementid').setAttribute('className', 'cssclassname'); // I hate you, IE.

Note that, for IE, in order to set the class attribute, you use className as the first argument for the setAttribute function instead of class.

Setting the Style of an Element
Now, you would think that you could simply use the setAttribute function with style as the first argument, and CSS as the second argument, to set an Element’s style, wouldn’t you?


getElementById('elementid').setAttribute('style', 'background: #fafafa; border: 1px solid #000000;'); // Yay for consistency!

Once again, IE flat out ignores this. Instead, we replace the above with something much uglier:


getElementById('elementid').style.background = '#fafafa'; // Die in a fire, IE.
getElementById('elementid').style.border = '1px solid #000000'; // Yes, one of these for each the CSS properties you want to set.

More code, uglier code, simply to satisfy one browser. This works across all browsers.

Modifying an Image’s Source
So, you want to change the source of an image element? Easy!


getElementbyId('imgid').setAttribute('src', 'path_to_image'); // Set the image source.

Surprisingly, this works in IE. However, when you load up your page you may get a surprise. The image will either be waaaay too small, or not visible at all. When the moon is full and the tide is high (or something like that), IE decides to set the image width and heigh to 0 or 1. Let’s fix this.


getElementbyId('imgid').setAttribute('src', 'path_to_image'); // Set the image source.
getElementbyId('imgid').setAttribute('width', 'imagewidthinpixels'); // Set the width.
getElementbyId('imgid').setAttribute('height', 'imageheightinpixels'); // Set the height.

There. IE should now display the image as intended.

Setting onclick
Once again, common sense dictates that setting an onclick event is as easy as using the setAttribute function to set the elements onclick attribute.


getElementById('elementid').setAttribute('onclick', 'doSomething();'); // I do like consistency.

You didn’t think IE would make it that easy, did you? You were right. To make this work in IE as well, you have to do it like this:


getElementById('elementid').onclick = function () { doSomething(); } // *Cringe*

IE forces us to write bulky, ugly, inconsistent code. That’s why I hate it so much. The fact of the matter is, however, that circumstances exist where we can’t really totally drop support for it. Yet.

Hope this helps someone out there.

Development Web

attributes compatbility cross-browser DOM DOM Tree element IE internet explorer javascript Tree