Archive for August 2008

 
 

Making Internet Explorer and Prototype’s Ajax.PeriodicalUpdater actually work

I’ve been working on a personal project that allows any number of users to submit messages to a server that are then stored in a database. In order to prevent page refreshes, I’m using Ajax to post messages and receive messages from the server. For message retrieval, the client-side code periodically pings the server and grabs any new messages and then appends them to the existing DOM.

Since users will be sending messages at different times, I wanted to make sure that the list of messages would constantly be updated regardless of if the user has posted any messages. To accomplish this, I’m using Prototype’s Ajax.PeriodicalUpdater. Since no data is actually being sent to the server, I was using an HTTP GET request to get all of the new messages. It was working as expected in Safari and Firefox; however, it wasn’t working at all in Internet Explorer. The reason being that, by default, IE caches URLs in order to make surfing faster. This can actually be disabled, but who would expect users to change a default setting like this?

In order to combat this, I had originally tried passing a token in the query string of the request URL using Math.random(). The idea behind this was that the URL would always be unique, so IE’s caching behavior would be irrelevant; however, the specified URL for requests is statically maintained internally by Prototype, so the random token is generated only once. Thus, the URL is always the same. Ultimately, I resolved to change the method by which the PeriodicalUpdater was retrieving messages from an HTTP GET to an HTTP POST. After that, all works well.

Basically, this is the only code that is required:

var sGetMsgUrl = 'get_messages.php';
new Ajax.PeriodicalUpdater('MessageContainer', sGetMsgUrl, {
    method: 'post', // using POST to combat IE caching,
    frequency: 3
});

After that, the asynchronous updating works across all of the browsers.

Becoming a Better Developer

One of the recent questions that appeared on Stack Overflow was “What are you doing to become a better developer?” Though I didn’t actively answer this question on the site, I’ve been thinking about it for a few days and I figured I’d try to formalize my thoughts.

What was I doing?

For a while, I was hacking together a lot of smaller programs and scripts to explore various nuances of a given system. Some of these programs included a couple of Ajax scripts, a PHP library that I was using in some personal web projects, some .NET programs that I was creating to explore the Facebook API. None of these were ever meant to share with anyone (with the exception of one) - they were just meant for personal use and learning.

A couple of months back, I began to get tired of constantly using the internet as my primary resource for figuring something out not because it wasn’t useful, but because I wanted know a little bit more of the technical details of some of the technologies and languages that I was using in my projects. Obviously, having Google show you thousands of results discussing your given problem at hand is convenient, and, really, there’s nothing wrong it; however, it’s hard to argue that you can’t write better code knowing how the platform on which you’re developing works . To that end, I opted to stop working on any personal projects until I had finished a reading a laundry list of books that I had drawn up in order to help me get a bit more familiar with the subjects I felt I was lacking.

What am I doing now?

As I said, I was writing different applications, but I decided to put that on pause until I’d completed my list of reading material. So, right now, I’m doing a lot of reading. I’ve got a fair amount of blogs that I read on a daily basis, and I’m currently working through several books.

My Subscriptions

Google Reader currently maintains my subscriptions for technology news, web development, software development, Linux, and personal blogs for various developers or projects that I currently use (such as Prototype). The list would be way too long to include all of that, so I’m posting a general list of subscriptions and descriptions.

Web Development
Some of these blogs focus on general principles of design and usability, and others focus on performance considerations and techniques specific to particular languages.

General Software Development
These blogs provide a constant resource of various ideas - sometimes posts are related to the business of software, sometimes they are related to technical details of software and hardware, and other times they are focused on various practices or musings from other developers.

Actively reading blogs keeps your mind open to other ideas and styles that are currently out there. You also get resources related to usability principles, design ideas, and best practices for various forms of development. Additionally, you’re exposed to emerging technologies, or even technologies that are dying.

These subscriptions have done a good job of keeping me familiar with what’s going on in the various corners of the software world while simultaneously focusing on my day-to-day activities. Additionally, they provide a constant source of food for thought - I don’t always agree with every post that I read, but, if I did, what’d be the point of reading them?

My Books

In addition to following blogs on a daily basis, I’m also currently reading several books.  As of now, I’m currently reading a book on Design Patterns in order to support experience from school and work, a book purely about the JavaScript language, and a book on Ajax. I’ve recently completed a book on Prototype, one on usability, and another book on Lean Software Development. I’ve also got a book on database design that I’ve yet to start, but it currently sitting in line.

I’ve always been a fan of figuring things out for yourself via trial and error, and also of using the web as a tool for reference - after all, you learn a lot when you figure things out yourself, and the internet provides a seemingly endless amount of information. Despite this fact, there is something to be said for having something tangible - something that you can carry in your book bag, flip open wherever you are, or write in and refer to later. Additionally, in some cases, such as with JavaScript and Prototype, I got to the point when I wanted to know the gruesome details of how this language and this framework were put together as well as practical applications for each. Nothing beats reading a book by people that have contributed to the development of the subject matter at hand.

Actively developing projects in other to increase your skills for a given goal is a good practice, but I also argue that knowing the technical details of the technologies with which you are working will make you a better developer. Understanding how something has been built and how it works internally gives you a mindset when coding that is likely to differ without that understanding. Writing code that not only follows best practices and good design but also that capitalizes on how the underlying system is built will ultimately make it better code.

If you have any blogs that you recommend, or any other books please leave them in the comments.

Anticipating StackOverflow.com

For the past several months, I’ve been listening to a weekly podcast by two very popular software developers - Joel Spolsky of Joel on Software and Jeff Atwood of Coding Horror. The podcast began about the time that these two guys announced that they were going to be building a new programming community website. As much as I enjoy the podcast, I was a bit skeptical at first because I’ve never really found a ‘good’ programming community online. For example, Experts Exchange is a site that comes up a fair amount on many Google search results. The actual site is way too busy, you have to pay for membership, and there are too many advertisements on the site. It’s irritating to use and too hard to find the information that you want. From the get go, Jeff and Joel said that Stack Overflow will not be another Experts Exchange.

Last week, Jeff and Joel started sending out emails for those of us that had signed up for the private beta of the website. For several days now, a bunch of other developers along with myself have been using the site - asking questions, giving answers, discussing what things should be done different prior to the public release, etc. I’ve got high hopes that Stack Overflow is going to be the first successful online programming community.

First off, the site is language agnostic. It is not a site for fan boys debating whether or not Java is better than C++. It’s a site about asking a question - from the beginner level to the expert level - and getting answers. I’ve seen questions that range from “How do I write a FOR loop in C#” to the technical details of how “database indexing works.” The fact that you get such a wide array of questions means that you’re likely to be able to not only help others out while browsing the site, but you’re likely to learn some things while participating.

Secondly, the site is no frills - there are no ads, and the primary content that you see are the list of questions in order that have been posted along with the relevant tags that categorize the post. Basically, if you see a question that you’d like to read or answer, it’s a simple matter of clicking on the question. You’ll be taken to a page that includes the questions, the given answers, and then a text box in which you can type your answer. Furthermore, each question reports its number of votes (as given by the community), how many answers it has, and how many views it has had. You can also view all of the questions on the site, or you can sort them via popularity, date asked, number of answers, or you can view the unanswered questions.

Finally, there is a badge system that rewards you based on various things that you do around the site. It isn’t necessarily meant to help you, say, level-up against your peers, but it’s meant to help others see your level of participating in various areas around the site, and to provide you a relatively passive way to keep participating - it’s fun to get badges even if they don’t get you anything in the end.

There are a handful of other features that I’ve not discussed, but those that I’ve mentioned are the ones that I think will separate Stack Overflow from other attempts at establishing a programming community. Overall, I’ve really enjoyed participating in the beta of Stack Overflow and am eager for the doors to be open to the public. It’s got potential to be an awesome place to get solutions to problems faced in all languages and areas of software development.

How Firefox revealed poor web development practices

I love Firefox’s find feature. It’s so much nicer than the standard dialog that requires you enter the phrase/expression prior to searching. The fact that it actively searches the document while you type in a relatively unobtrusive way is awesome and once you end up leveraging it in your day-to-day activities, it makes every other application feel dated. One of the ways that I use this feature is to find specific content on a site that has too much information presented on a given page. Usually, this proves to be a beneficial way to find information I’m looking for without having to sift through a lot of content that I’m not really looking to read right now. This morning, though, I stumbled across a website on which I was trying to leverage CTRL+F to help me quickly find what I was looking for, but rather than helping me find my content, it ended up revealing terrible web development practices for a certain major department store.

So, there I was browsing a website for a major department store looking for a specific area of their site. The homepage of this site was cluttered with a lot of information - two navigation bars at the top, a three column content area one of which featured a cycle of images for various products, and three bars across the bottom each featuring various sets of more links. As soon as the site loaded, I looked at all of the links presented on the first bar on the top of the page - it wasn’t there. I then skimmed the content of the page - look left, look center, look right - and didn’t find what I needed. Finally, the bottom two navigation bars didn’t include the specific link I was trying to find either.

At this point, I pressed CTRL+F and began typing the phrase for which I was trying to find - specifically, I was looking for ‘registry’ in order to find the link for the wedding registry. No results matched - I found registration and register. Frustrated, I started looking for the link again from the top of the page. I found it buried in the second-level navigation bar next to the search field. Why was a wedding registry link next to the search field as opposed to, you know, a ‘Find’ button being next to the search field? Anyway, the reason that the find feature didn’t expose the link was because all of the navigation links are images and this got me thinking. At this point, my primary issue with this site was that not only could I not find what I was looking for on my first visual pass of the site, it was that I could not find what I was looking for even when I relied onmy browser to help me and it failed. It took me a third pass of scrutinizing the main page to find one link - a link that was an image instead of text.

Why would someone create their navigation links as images? There was absolutely no animation on the images, there were no drop-down effects, there were no icons, there were no hover effects - there was nothing at all. The navigation links were static images of text. The site’s load time would have been improved if text had only been used, and CSS could have taken care of all of the stylistic issues. At this point, I decided to inspect the main page of the site a bit more - I found that almost 90% of the content on the page was made up of images. The only text on the page was located on the footer. Again - why? Why not create containing block-level elements decorated with CSS? How are screen readers supposed to read your site when the majority of your content is contained in an image? With images making up most of your content rather than a well-structured XHTML document, you’re automatically decreasing your search engine optimization. Although most people are on broadband connections these days, you are still hurting those people on lower speed connections because it will take so much time for the site to load.

I don’t dislike images on web sites. Like every other piece of content, they have their place; however, if you’re using images to convey some form of expected, relevant information to your audience, then you’re doing it wrong - you’re abusing the web. Essentially, you’re throwing SEO to the wind, ignoring your handicapped users, and telling your audience that you only care about the average joe with decent vision such that s/he only has the standard text-size setting on his browser, that they are in no-way impaired such that they have no dependence on screen readers or other accessibility tools, and that you expect him to read every piece of content on your site when looking for what he needs. Granted, this is any designer’s or developer’s perrogative, but I’d argue that you’re not really passionate about what you do nor that you care about the web as a medium if you build your stuff like this.