A couple of weeks ago, I stumbled across SQL Buddy - a web-based database administration tool in the same vein as PHPMyAdmin. Although I have always used PHPMyAdmin for all of my web development projects, I have always hated the user interface. Aside from feeling old and clunky, there is entirely too much information on every single screen. Nonetheless, I had grown accustomed to it and had settled on it as the best tool for the job at hand. After spending some time reading about SQL Buddy, I decided to give it a try and use it every time I needed to perform any operation for which I’d typically use PHPMyAdmin. Overall, I really like SQL Buddy.

One of the first things that you notice about SQL Buddy is the minimalistic interface. Aside from offering you only the essential options for each page on which you are working, it does a really good job of staying out of your way. It does not offer seemingly irrelevant options, and it does not try to compensate for more than it should for any given task. Furthermore, it does not rely on any fancy interfact elements - other than text links, text boxes, tables, and list items, SQL Buddy relies on little else to present its information. This not only makes the presentation very clear and clean, but it also makes the application load very fast.

Another thing that I really like about SQL Buddy is that it uses Ajax throughout the application. There are very, very few page loads that occur whenever using the tool. Whenever you click a link or load up a set of data, only relevant sections of the page change based on what you’re trying to accomplish. This gives a really seemless feel to the experience and makes it feel much more like a desktop application. On top of the slick use of Ajax, SQL Buddy also properly handles operations such as the back button. Whereas with most Ajax-enabled applications, you go back to the last previously fully loaded page whenever you hit ‘back’, SQL Buddy will return you to the previously loaded screen. 

In addition to this proper handling of ‘back’ behavior, you can also bookmark whatever screen on which you’re currently working such that you can return to that page at any given time with the same data reloaded. This feature is really useful if you have several ongoing projects in that you can setup shortcuts to the database(s) or table(s) related to a given project rather than having to login and manually navigate to the proper location every single time.

Lastly, installation of SQL Buddy is a breeze. It is a simple matter of unarchiving the files to a directory on your webserver. There are no configuration files or any dependencies required. Once the files have been dropped into a directory on your server, then you are good to go.

Overall, SQL Buddy is a great tool. Aside from being lightweight and easy to install, navigating and using the application is a breeze. It runs fast and really does good job handling some of the quirks that many Ajax-enabled applications have. Though it may not be as powerful as PHPMyAdmin or offer as many options, SQL Buddy is great for a straight-forward database management tool.

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.

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.

• Ajaxian
• Particletree
• Six Revisions
• Smashing Magazine
• WebAppers
• WebResourcesDepot
• etc.

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.

• Coding Horror
• Digg / Programming
• Joel on Software
• Signal vs. Noise
• etc.

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.

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.

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.

When developing web sites or web applications, one of the things that I struggle with is straddling the line between valid CSS and addressing cross-browser quirks. For example, most of the time, if you’ve got valid CSS and valid XHTML, your design will most likely look the same across Firefox, Safari, IE7, and Opera; however, it will likely not look the same in IE6. This is because of a number of factors (the way that widths are calculated alongside padding and margins, for example) which brings you to two options: either you can forget having valid CSS and stay focused on getting the design to look right, or you can create separate stylesheets for IE6 and then for the other browsers.

At one point, I was all about adhering to standards. If the CSS did not validate, then I felt that I must find a way to tweak the design and the layout of the page elements to force it to work. By re-arranging page elements in the XHTML in order to force the CSS to properly work, you could potentially be cheating screen readers out of reading your page in the proper way. If you care anything about accessibility on the web, then this option is out of the question. Furthermore, the idea of forcing the layout to fit the styles just feels wrong. If XHTML is the body, then CSS is the attire. You don’t tailor a person for the suit, you tailor the suit for the person. So, although this works, this ultimately leads to poor information architecture. So what option does this leave? Assuming that the XHTML is properly structured, then you’ll have to pollute the stylesheets with a couple of hacks in order to get the page to behavior properly in all of the major browsers. Validation goes out the door at the expense of the design.

Though IE6 is an old browser, it still has a significant portion of the market share. This means that if you care anything about providing the same experience to all of your visitors, you can’t forget it. One thing that I’ve been considering doing when moving forward on personal web sites or web applications, is to create a CSS file for IE7, Firefox, Opera, and Safari, and create a separate file for IE6. This would allow for creating completely valid CSS for the majority of the browsers, and allow you to still create the same presentation for the IE6 users although with invalid CSS. This, though, comes at the expense of two things - first, you’ll have to include some conditional comments in the head node of all of your pages, and, secondly, you’ll now be responsible for maintaining multiple CSS files. Depending on what you consider important, this may or may not be a viable option.

Overall, it’s lame that we’re in the predicament that we’re in regarding making these decisions, but we are so we’ve gotta make do with what we have. At any rate, I’m not saying that either of the above suggestions are more right than the other, and I’m not saying that I have an opinion on what’s best - any other thoughts or suggestions are welcome. I thought I’d just throw this out there.

I’ve had an Eee PC 900 for several weeks now, and really like it. I definitely couldn’t use it as a machine on which to do major programming or web development; however, it’s great to have for traveling. For the lower price and slightly larger amount of storage, I opted to go with the Linux model. The distribution of Linux that ships with the device, a customed Xandros installation, isn’t bad, but I wasn’t a huge fan of it so I installed Ubuntu in place of it.

There were a few things that needed customization after the installation, so I’ve attempted to summarize them all here. In the future, I may add some additional posts on this topic as there are a couple of things that still don’t work quite right. Overall, it’s fine for now.

Prerequisites

Pre-installation

After installing Ubuntu, my ethernet card didn’t work. To fix this, I turned off the Eee PC, removed the battery, replaced the battery, and turned the machine back on. It worked fine and has ever since. Obviously, this resets something internally. Additionally, not everyone has experienced this issue, but for the sake of completeness I wanted to include it here.

Installation

I’m assuming that you have access to an ethernet connection. Wireless isn’t supported out of the box and there are numerous updates that are required after initially installing Ubuntu 8.04. If you don’t have access to an ethernet cable, skip down to the Wireless section for instructions on how to get Wireless working - you’ll need to obtain the driver on a USB key or flash drive. You can still perform all of the steps listed here, but you’re going to have to re-install the Wireless card after some of the updates complete.

When performing the installation, most of the default operations will suffice; however, there are a couple of things to modify with respect to partitioning that may ultimately increase performance. First off, do not create a swap partition. For the amount of RAM in the machine, you’re not likely to need a swap partition. Additionally, a swap partition is subject to many read/write operations and the frequency of these operations can decrease the lifetime of solid-state drives. Secondly, opt to use the ext2 file system. Apparently, the ext2 file system requires fewer read/writes than the ext3 file system.

Post-installation Updates

Following the initial installation of the operating system, it’s best to grab all of the most recent updates. Connect the Eee PC to an ethernet cable and, permitting you’re connected to the internet, Synaptic should automatically detect and list all of the updates required. Install every one of them (this step will take sometime), and then reboot the machine.

Important Note

If, after any update, the wireless card stops working, simply reinstall it as per the directions here. The card will stop working if a new kernel is installed, so its simply a matter of reinstalling the module.

The Major Fixes

Getting the device to correctly shutdown

Initially, Ubuntu will not shutdown correctly. Though the screen blanks and the device appears to be off, it still holds power. This is a result of the operating system failing to correctly disable the sound card. To fix this, open the halt script in your favorite text editor:

$ sudo gedit /etc/init.d/halt

Find the function do_stop() and then find the line that reads if [ "$INIT_HALT" = "" ]. Right after the functions signature and right above the conditional, add this line so that the script appears like this:

do_stop() {

rmmod snd-hda-intel
if [ "$INIT_HALT" = "" ]
…

}

The Eee PC should now properly shutdown.

How to configure the wireless card

To get the wireless card working, a couple of packages need to be removed because they conflict with the wireless drivers that will be used. To remove these packages, do this:

$ sudo update-rc.d -f linux-restricted-modules-common remove

and update the packages list:

$ sudo apt-get update

Now install the wireless driver. First, download the driver by issuing these commands:

$ sudo apt-get install build-essential
$ wget http://snapshots.madwifi.org/special/madwifi-hal-0.10.5.6-r3698-20080604.tar.gz

Secondly, untar the archive and enter the directory. Compile the driver and install the kernel module:

$ tar zxvf madwifi-hal-0.10.5.6-r3698-20080604.tar.gz
$ cd madwifi-hal-0.10.5.6-r3698-20080604
$ make clean
$ make
$ sudo make install

Finally, reboot the machine. Once you log back into Ubuntu, you should see wireless networks available in Network Manager.

Installing ACPI

ACPI will enable better power management by conserving energy when the system is idle. Some custom modules have been created to help with this so it’s a simple matter of downloading the modules and installing them. Here are the commands:

$ sudo apt-get update
$ sudo apt-get install -y -f build-essential module-assistant eeepc-acpi-source –force=yes
$ sudo m-a a-i eeepc-acpi
$ sudo cp /etc/modules ~/modules.tmp
$ sudo chmod 777 ~/modules.tmp
$ sudo chmod 644 ~/modules.tmp
$ sudo mv ~/modules.tmp /etc/modules

Restoring HotKey Functionality

The following fix will restore the functionality from the hot keys as well as restore the on-screen display for each of the actions. For example, you’ll be able to disable wireless (Fn+F2), control volume, (Fn+F7), or suspend the device (Fn+F1). Again, much of the work has already been done. Issue the following commands to download the package and install it:

$ wget http://eee-osd.googlecode.com/files/eee-osd_2.1-0eeeXubuntu1_i386.deb
$ sudo dpkg -i eee-osd_2.1-0eeeXubuntu1_i386.deb

Restoring Webcam Functionality

The webcam is broken after an initial installation; however, as with the past couple of scripts, some modules have already been written that make it really easy to restore functionality. Before grabbing the necessary modules to fix the webcam, you need to make sure you’ve got subversion installed so that you can pull files from the module’s repository. To install subversion, do this:

$ sudo apt-get install subversion

Next, download and install the necessary modules by issuing the following commands to fix the webcam:

$ svn co svn://svn.berlios.de/linux-uvc/linux-uvc/trunk linux-uvc
$ cd linux-uvc
$ sudo make
$ sudo make install
$ sudo modprobe -r uvcvideo
$ sudo mv /lib/modules/$(uname -r)/ubuntu/media/usbvideo/uvcvideo.ko /lib/modules/$(uname -r)/ubuntu/media/usbvideo/uvcvideo.ko.original
$ sudo cp uvcvideo.ko /lib/modules/$(uname -r)/ubuntu/media/usbvideo/uvcvideo.ko
$ sudo modprobe uvcvideo

I myself don’t use Skype, so I’ve little use for Ekiga. I still wanted to use my webcam, so I downloaded and installed the Cheese application. To download Cheese, do this:

$ sudo apt-get install cheese

Once it has been installed, you should be able to access it via the Applications | Graphics menu.

Restoring sound after suspend

Suspending the Eee PC works fine; however, once the machine resumes, sound no longer works. The tweak I’m providing isn’t perfect - Gnome sounds still do not work after resuming from suspend, but all other sounds (MP3s, etc) work fine.

Open the alsa configuration file by doing this:

$ sudo gedit /etc/default/alsa

and modify the force_unload_modules line to read like this:

force_unload_modules_before_suspend=”snd_hda_intel”

If you know how to restore Gnome sounds, please leave a comment.

The Minor Tweaks

Reducing the amount of read/writes in swap

If you ended up going with a swap partition, you can reduce the swappiness by modifying one of the configuration files on your file system. To reduce the amount of operations, do this:

$ sudo gedit /etc/sysctl.conf

and add this line to the very bottom of the file:

$ vm.swappiness=0

Unconstrain windows to the top of the screen

With a 1024×600 resolution, some applications are going to be ‘taller’ than others. In order to access some of the options hidden via the bottom of the screen, it helps to make the windows draggable so that you can move them upwards. By default, windows cannot be dragged higher than the top of the screen. To remove this constrait, enter this into a terminal:

$ gconftool-2 –set /apps/compiz/plugins/move/allscreens/options/constrain_y –type bool 0

Hide the battery warning

Although Gnome correctly reports the status of the battery, it shows a warning about 0% being available right after installation. To hide this message, enter this into a terminal:

$ gconftool-2 –set /apps/gnome-power-manager/notify/low_capacity –type bool 0

After rebooting, the message should no longer appear.

My Suggestions

Hide the volume control applet

The volcume control applet doesn’t correctly reflect the state of the audio hardware if it has been manipulated via the hot keys. I personally use the hotkeys to control the sound, so I removed the volume control applet from my panel. Now there’s one less thing cluttering my tray.

Unused applications

Because I don’t use Skype and I tend to use web-based email clients, I uninstalled Ekiga and and Evolution. I don’t need them and this frees up a little bit more space on the hard disk.

What Doesn’t Work

It’s broken - why?

At the time of this post, hibernate nor the microphone work. Because I don’t really need these two features, it doesn’t really bother me; however, if a fix does exist, please leave a comment - I’d like to keep this as complete as possible and having a fully working system (regardless of if I use the features or not) is always nice.

References

These fixes are a collection of my own fixes and tweaks as well as those gathered from several other sources throughout the internet. For more information on the Eee PC 900 and Ubuntu, check out the following sites, as well.

• Ubuntu Community Wiki for the Eee PC 900
• Ubuntu 8.04 on the Eee PC
  
• Ubuntu Eee Wiki

With the recent upgrade to Firefox 3, a couple of my add-ons were incompatible so I had to spend sometime waiting for a few of them to play catch-up. Despite the fact that alphas, betas, and release candidates had been out for months at a time, developers still failed to update their add-ons on time. That’s another issue entirely, so I digress. During the short period that I had to wait for a few of the add-ons to be updated, I ended discovering just how dependent on several of them I had become. As of now, here are some of the add-ons that I can’t live without.

Firebug
https://addons.mozilla.org/en-US/firefox/addon/1843

If I was ever in a situation where I had pick one and only one add-on to keep, this would be it. If you do any form of web application development, Firebug will be your new best friend - it provides DOM inspection, JavaScript debugging, the ability to change CSS on the fly, load-time analyzers, AJAX monitoring, etc, etc, etc. It’s hard to imaging building sites without it.

Web Developer Toolbar
https://addons.mozilla.org/en-US/firefox/addon/60

This is another extremely useful add-on if you’re developing web sites. Web Developer Toolbar provides you with the ability to disable cookies, completely strip out any-and-all CSS (inline, linked, or embedded), various form manipulation tools, toggling of images, outlining page elements, resizing the browser window, code validation, and so on. For anyone that is mindful of various screens, resolutions, and accessibility standards, Web Developer Toolbar helps immensely when attempting to meet then all.

ColorZilla
https://addons.mozilla.org/en-US/firefox/addon/271

This is possibly the simplest add-on I have installed. Essentially, ColorZilla provides an eyedropper tool that allows you to grab the color of any element on a web page. It will then allow you to copy that color’s RGB or hex values to your clipboard in a multitude of formats typically used in CSS or image editors. It’s great when you’re working with color themes or trying to match a similar color on an existing web site. In addition to the eye dropper feature, ColorZilla also provides the ability to zoom in on a page and measure the distances between elements.

Foxmarks
https://addons.mozilla.org/en-US/firefox/addon/2410

If you do a lot of work from within a web browser, you’ve likely accumulated a set of bookmarks that you visit daily. If you’ve got multiple machines, then you’re apt to want those bookmarks replicated across your machines. Since Google Browser Sync is now defunct, I’ve ended up going with Foxmarks. Similarly to Google Browser Sync, Foxmarks allows you to securely synchronize your bookmarks across all instances of Firefox permitting the local copy has Foxmarks installed.

There are more add-ons I use, but these are the ones that I can’t live without. I’m sure I’ll eventually have a few new ones to add to the mix over time, so I may end up doing a follow-up post. Do you have any add-ons that you can’t live without? If so, let me know - I’d hate to be missing out on something.

I’ve been working on building a custom modal control for someone else that will ideally be used in a variety of places throughout their site. Essentially, the control will allow a developer to create a dialog and style it how s/he would want it to appear, and then pass it to my code. My code will then process it, bundle it up with a semi-transparent background, and then overlay their dialog centered above all of the other elements on the page.

For the most part, it was going well - the control was performing the exact same way across all of the major browsers, and it was easy to plug existing code into it; however, while testing it on a variety of pages, I came across a bug that ended up plaguing me for much longer than it should have. There’s a function in the JavaScript that uses each element’s offsetWidth and offsetHeight values to center that element in the middle of browser window regardless of its size. Oddly enough, on one of the pages that I was testing, I was noticing that Internet Explorer was not properly centering the element. Upon further investigation, I noticed that the element’s offsetWidth, offsetHeight, clientWidth, and clientHeight values were all being returned as zero.

Naturally, I ended up googling around for a solution to the problem. I didn’t come up with much, but I did find this page on MSDN which ended up giving some insight - the page contained tables and they were the culprit for this behavior. Although this helped me pinpoint this problem, it didn’t help revealing a solution. Additionally, Firefox, Safari, and Opera all displayed it correctly regardless of if tables were present on the page or not. So, I resolved to spending some time understanding how tables caused this problem in hopes of coming up with a way to manage it. Ultimately, I came up with a solution and thought I’d share it here. Before diving into code, I thought I’d explain how it works.

About document.readyState

Internet Explorer implements a property on the document object called readyState. Technically, it’s present for the sake of the XmlHttp object, but it can used to determine the state of the current document (which is useful, as you’ll read shortly). There are five different ready states:

1. Uninitialized
2. Loading
3. Loaded
4. Interactive
5. Complete

The important thing to take away from this is that IE will not have the offsetWidth/offsetHeight/clientWidth/clientHeight values calculated until state five, but the JavaScript function was processing the element in step four.

Capitalizing on document.readyState with IE

My fix capitalizes on document.readyState. Because Firefox, Safari, and Opera all returned ‘undefined’ for this property, it meant I didn’t have to re-write a lot of the existing functionality - I just needed to incorporate a single case for managing IE’s behaviors. Assume that this.bIsE is a flag set earlier in the code determining whether or not I’m using IE. Also assume that _InitializeComponents() contains logic responsible for getting some of the page’s elements ready. Here’s what I did:

if(this.bIsIE && document.readyState != ‘complete’) {

var self = this;
self.onLoadHandler = window.setInterval(function() {

if(document.readyState == ‘complete’) {

self._InitializeComponents();
window.clearInterval(self.onLoadHandler);

}

}, 100);
} else {

self._InitializeComponents();

}

Basically, the way this works is that is that if it’s not IE, initialize the components and proceed; otherwise, if IE is the current browser and it’s not in the ready state, then fire the readyState check every 100ms. If the document eventually reaches the ready state, then initialize the components and stop the interval function. Overall, it’s not perfect, but it works and it accomplished what I needed.

For anyone that’s ever been responsible for working a website or software application that someone else has created, or for anyone that frequently works on developing a large piece of software, you’re likely to touch various pieces of code in that application. We’ve all got our own style of writing code, but given any major piece of software, there are going to be standard ways for creating certain types of objects.

For example, given any distributed web application, there is likely to be several ways to get information from the front end to the back end and have it replicated across all of the databases. For any desktop application, there are ways to correctly generate objects at runtime that will do exactly what you need them to do as opposed to creating giant objects are design time to cover every major scenario for your situation.

Obviously, and as with most things in programming, there are n-different ways to accomplish any given task; however, I firmly believe that well-designed software and good software engineering practices setup standard ways (or even frameworks) that are conducive to providing a correct way of accomplishing a task versus a way that works.

Ultimately, the longer you spend working on any large piece of software, the more likely you are to touch a wide breadth of areas in the code base. Additionally, you’re likely to hit varying degrees of depth in that code, as well. For every step across the code that you take and for every level deep in the code that you go, you may find yourself in a situation where you need to create a new object or refactor some existing code. Assuming that there is a standard way for creating to objects, integrating new features, or whatever else you may be doing, you’re going to be gaining experience with this area of the code. With that experience, you’re likely to be expected to be able to do something similar in the future.

What happens, though, in three months down the line when you’re neck deep in front-end development and you’ve just been asked to dive down into the application layer to develop some new code that will be responsible for translating information passed down from the front end and process it in some way before sending it over to the back end system? For some, no big deal - they’re gifted in that way. For others, they are likely to copy/paste from some similar code, patch it up, and release it. Copy/Paste is a terrible idea and, in my opinion, should never be done in almost any situation. Others may refer to some old notebook that they keep filed away from previous projects. Whatever works best for you is what you should do (except for Copy/Paste!).

Personally, I’ve been running a wiki on my local development box in which I keep all notes relative to nuances for various languages, framework notes, development techniques, and general reference notes that I come up with while working on aspect of a project. I’m a fan of doing this not only because it’s really easy to keep a web browser open on one monitor keeping notes based on code that’s open in an IDE on another monitor, but because it’s easier to organize than a notebook. Using links and a search engine beats bookmarks and skimming pages for me any day.

I like doing this because it prevents my file cabinet from getting too filled with stacks of notebooks, but it also rids me of the uncertainty of Is this the right way to do this? I can’t remember away and replaces it with Is this is the right way to do this? Let me check what I’ve done before. Generating knowledge in any given situation is always great, but it’s only as good as your ability to reuse it in the future. Keeping that information organized and easily accessible helps.

Just in case you’re wondering, I’ve been using Instiki and it has served me well. I’m not saying it’s the best or anything, but if you’re looking for something that is easy to setup and with which it is easier to interact, then I recommend it. Do you keep notes on various projects that you work on? What utilities do you use to help out with that?