Archive for July 2008

 
 

Valid CSS at the expense of presentation or maintenance

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.

Ubuntu on the Eee PC 900

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.

Firefox add-ons I can’t live without

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.