March 2005

What a mess web development is. What a waste of time it is too.

I have spent the better part of the morning wondering why, when I unhide a DIV and then click on the WYSIWYG editor, Mozilla throws a fatal error and refuses to play anymore. I went through all the logical checks, make sure I’m not trampling on any other defined names or namespaces (a good argument for OOP if there was ever one). I also removed and changed some event handlers to see if they were colliding - I even went all DOM and added document events to the AddEventHandler function to allow for cascading bubbling to no avail.

If I commented out: divobj.style.display=”; the WYSIWYG editor would work fine. Put the line back in, and *bang* Mozilla error. I had my hair cut yesterday so trying to pull it out was largely unsuccessful.

To make matters worse, NTL, my ISP decided to play "switch off all the proxy servers at random times" leaving me with no http access for minutes at a time which makes debugging that little bit harder.

Anyway, after much griping and moaning to anyone who would listen (AIM still worked) Rikki did a bit of Googling and returned an interesting fact. Apparently the error I was receiving was a common Gecko error when using "display:inline" as a CSS attribute for forms. Adding "display:block" as an inline style to the form fixed the problem and cleared up the error. Hooray for Google.

In more positive news, I’ve finished off the PM notification window and made it possible to cycle through all your new PMs - just for the hell of it.

I also captured another washed out and badly proportioned movie (don’t blame me, blame the screen recorder) of the "name-suggest" box in use (this was the hidden DIV which caused so much frustration).

Movie (2.3mb MP4: Quicktime / Media Player 9+)

Another day, another javascript library.

I’ve tidied up my previous javascript and added in permission checks and some XSS protection. I’ve also added in a fancy semi-transparent window for the new PM notification. It’s inpsired by a plug in for Apple’s Mail email application which shows a semi-transparent window with a preview of the email message over the desktop.

It allows you to cycle through your new PMs via the wonders of Ajax (can’t be bothered to type XMLHttpRequest anymore). It also allows you to drag the notification elsewhere on the screen which will make IPB show the notification in your desired location from then on. Possibly useless but fun to play with.

I was going to post a screen shot of it but figured I’d try a movie capture of Mozilla. The movie is pretty rubbish in terms of quality but I didn’t think you’d appreciate a 57mb full screen epic with titles. At just over 3mb it allows you to see whats going on.

The movie shows the PM alert (note how it darkens when you roll your mouse over it) being dragged, and a refresh of the browser window shows it back in the same position. I then check out the ‘View New Posts’ link. The next screen shows the edit-in-place functionality and the quick-lock facility (clicking on the topic’s folder icon toggles between locked and unlocked).

Yes, I’m having fun.

The movie. (3.3mb MP4 )

Oh, if you’re interested I was able to make the DIV transparent by using the filter CSS style for MSIE and a semi-transparent PNG-24 for the rest of the internet with a bit of javascript to decide which style to apply to the DIV depending on your browser.

I’ve finished my "name suggest" box which can be used for anything, anywhere. I wrote it for the PM recipients but I’ve abstracted it so it can be used for anything; template names, forum names - anything.

It took nearly 600 lines of javascript to complete (+ 1 custom XMLHttpRequest library + PHP + HTML) but I think its worth it. There is so much to try and manage, onclick events, onblur events, key up and key down events. It really shows how young this technology is but the results are worth the effort.

I have a new motto. It goes like this:

"If the interface is effortless, it almost certainly took a lot of effort to produce"

Update: You can now edit topics titles by double clicking the topic title’s cell and hitting enter, or clicking outside the text input boxes saves it. Screenshot (although static images don’t do it justice)

I couldn’t resist doing a Google style auto-complete using XMLHttpRequest and the most logical place for this is in the personal message "send" form. Typing in the recipients name will show a drop down box of possible matches which is constantly refined as you enter more characters.

Screenshot here.

I recently blogged about the relatively new XMLHttpRequest functions and how they can enhance the web browsing experience if used correctly.

I’ve used this technology to solve the forum marker quagmire that has plagued most bulletin boards since the dawn of time. Currently, IPB uses a mixture of methods to cobble together some kind of logic which is mixed between topics read, and topics posted since your last visit and stores the forum marker dates in a cookie. I won’t go into why we do it like this but even after 4 years of writing bulletin boards I couldn’t think of a better way of doing it without complex caches or queries.

Enter XMLHttpRequest!

I’ve done away with the cookies for a start and written an extra field in the member’s table to store a serialized array of forum IDs and the last marked time. I’ve also done away with the "new posts since your last visit" confusion and all we’re interested in now is purely unread topics.

Now, when you click on a topic link from the forum view (in other words, when you get the list of topics) an onclick handler checks to see how many topics in that display are newer than the last known marked time. If there is only one unread topic left in that display and its the one you just clicked on, an XMLHttpRequest is sent to the PHP engine which updates the member’s serialized array in the database table.

Of course, there are a few cavaets. One being that if you have any unread topics on pages 2 or more, the forum will still be marked as read and if you click on the "last topic" from the board index, it won’t mark the forum as read - however, its still a massive improvement and with a few other tweaks I’m going to make, manual forum marking should be a thing of the past.

Rikki and I have been bouncing ideas back and forth for most of the day and although the IPB 2.1 development schedule doesn’t permit most of what we’ve thought up, IPB 3.0 should be a really nifty release.

I’ve been experimenting with a few new things recently. By "new", I mean new to me. It’s very easy to get comfortable in your work and stop thinking of new ways to achieve the same result.

The most exciting ‘new thing’ has to be XMLHTTPRequest. This is an extension of javascript which allows you to load an XML file into javascript which is then available in the DOM tree. It’s currently only supported by IE 6+, Safari and Mozilla (Firefox, et all) which leaves Opera and Konqueror users out in the cold.

I’ve been thinking of how to apply this technology to IPB - or rather, how the technology can solve some age-old problems. For instance; wouldn’t it be nice if we could  bring up a list of recently replied to topics without having to navigate to a new page. Naturally, one could load this data into a hidden DIV before displaying the content to the browser but then we have to add a rather large query to each page load which isn’t very desirable at all.

Enter a little bit of javascript trickery, and we have a way of loading recently replied topics into an otherwise hidden DIV. Each click of the link refreshes the content without refreshing the page. That’s pretty nifty.

(The screenshot linked to needs much cleaning up and fixing, but the actual engine is working and please excuse the beat up condition of my private development board. It gets like that.).

There are a few other areas which can be enchanced using these methods. I think we can all but replace the "normal" PHP calendar in IPB with a javascripted version which can load the month’s data without a screen refresh. Naturally, those without javascript and/or without a sufficient browser can be directed to a different version - but offloading some of the server side processing to the client’s browser is appealing.

It is entirely possible to write a PHP engine which saves data and produces XML data on the fly and write the front end entirely in javascript.

Well, it’s been a while since I’ve done this.

I often try and think of a few things that I can blog about but my head is too full of my daily work to allow space for such frivolities.

As you may know, I have two major projects on the go which I’m developing side-by-side. IP.Dynamic is our upcoming content management system and Invision Power Board 2.1, which is a pretty major refactoring release. I’ve finalized the core structure of these programs and they are both written the same way and can share modules, classes and other code. It’s been quite a fun undertaking and it means that IPB is now using proper OOP methods and it removes all the nasty global calls that previous versions required.

Work has been going well on Invision Power Board. In just over a week I’ve been able to refactor all the code to use the new IPS kernel systems and structures and I’ve made progress into the proposed feature set which includes a rich text editor which has been spawned from the IP.Dynamic RTE. I’ve put aside some of the templating and CSS changes for the next release as this was turning out to be IPB 3.0 and we simply don’t have the time to make such large changes at this stage.

IP.Dynamic has been in alpha testing for just over a week and it seems to be going well. The alpha testers have had access to IP.Dynamic installations which we host and have been encouraged to have a good look around and to note their thoughts. Even though the system is still in a very early alpha release and maybe only about 60% complete, it’s still capable of being used to run a website. We’re in the process of moving our custom coded websites over to a single IP.Dynamic thanks to its ability to separate template sets which can be applied at page level.

We’ve had some good comments from the alpha testers and I’m about to release a mini-questionnaire to encapsulate their experiences so far and I’m going to try and organize a live web-chat (as suggested by one of the alpha testers) to thrash out some issues and develop some ideas. It’s been very useful to have a very controlled set of testers as you often get a lot of white noise when receiving feedback.

Over the pond in the US; we’ve just moved into a new office suite. We literally ran out of room in our previous location and we got an offer to good to refuse for a 7,200 sq.ft. facility which is not only much closed to city conveniences it also gives us room for expansion which we’re going to need on the release of our new products and services. The new building has finally been fitted out to our requirements and the new furniture has been delivered (just don’t ask Charles about his desk). We’ll get some pictures up once the dust has settled.

In the offline world, I’ve been making time for those old fashioned book things. I’ve read the first two of James Patterson’s ‘Alex Cross‘ novels (Along Came a Spider and Kiss The Girls) and ordered the next two from Amazon. I loved the first two books and can’t wait to read the next ones. I can’t believe I’ve not picked these up before. I know that they’ve been made into movies - but the movies aren’t faithful to the books (surprise!) and although Morgan Freeman is an excellent actor, he shouldn’t have been cast as Alex Cross. Patterson often describes Cross as "Mohammad Ali in his prime" not an aging man with a grey beard! Those crazy folks in Hollywood, eh?
For a little "light" reading, I’ve been reading Mark Brando’s "Screaming Eagles at Normandy" which chronicles the 101st Airborne from inception to the Normandy invasion. Unlike many other books on the 101st, it doesn’t focus on E/506 (Easy Company) and is full of colour pictures taken by soldiers who disobeyed the "no cameras on jumps" rule. Excellent stuff.
 

Vincent Flanders has been a personal hero of mine for some time now. When I started out my internet adventure many moons ago, I hung around Vincent’s website: Web Pages That Suck. I met many friendly self titled web designers on his old UBB 5 and learned a lot from the experience.

Vincent tells it like it is and one of his latest articles hits the nail right on the head with regards to a subject close to my heart. Web standards and tableless CSS:

There is nothing wrong with any of the above except they’re being
touted by…guess who?…people who offer web design services
specializing in…guess what?…Web Standards, Usability, and tableless
CSS. These are simply tools. Remember, nobody gets excited about the
tools used to build a house ("Please tell me what brand of hammers you
used!"). People get excited about how the house looks and performs.

There seems to be a cargo cult
belief that if we use Web Standards, usability, and tableless CSS, our
web sites will make money, we’ll be famous (or at least cool), and 0ur
sites will look great. It isn’t that easy.

Read the entire article, it contains some interesting points.