Recently I’ve been doing some web page work again, and trying to push the envelope on my CSS knowledge.

I was at a talk at 360|iDev where Brian Fling was talking about UI design, and he pointed out that your site should work without your CSS. Now while I know this as a design principle, it seems like something that we probably overlook more often than not.

So, out of curiosity, I thought I’d take a look and see what some of my pages look like without their stylesheets applied.

The first trick is Firefox with Firebug.

Firebug is a plugin that lets you debug and examine the contents of a page and do very interesting things, like modify your page on the fly. By loading up Firebug on one of my sites, it was an easy thing to browse to where the stylesheets are loaded. To start up Firebug, I normally just right click on the page and choose “Inspect Element” from the popup dialog box, or use the Open Firebug option from the Tools menu:

right click menutools_open_firebug

Once you have Firebug open, you can browse your HTML to where the stylesheets are loaded (normally in the HEAD section of your page):

Firebug looking at header

The next trick is that with Firebug, you can change everything

In the above example, I have two stylesheets loading: a basic one (basic.css) and one for print layout (print.css). So to look at my site without the stylesheet, all I have to do is right click on the link that loads the sheet, and choose Delete Element:

delete element

Third trick: debugging missing link includes with Firebug is cool

One interesting thing to note, if you expand the link node, you’ll see the complete style sheet as it was downloaded from the server. I’ve found this very handy in finding issues like a typo in a stylesheet name, or a misconfigured server (which is very easy to happen with frameworks like Cake), since what displays is the actual return from the server (so for instance if you mispell the name, you’ll see the actual 404 file missing):

404 error

Once you’ve removed the link (or even change the name to a bad one as I did above), you’ll see your bare bones HTML, just like it would appear to a browser without styles. If your page was designed correctly, it should have basic navigation links at the top of the page instead of the menu bars, which make the site usable for a browser that isn’t using your stylesheets.

Jc no style

Next: starting a new page so that it works with and without style …

On the first day of 360iDev, I was in a session to learn about programming an iPhone, and somebody mentioned that a friend of theirs had updated their iPod firmware, and couldn’t figure out how to reset it back to the prior version. Since I had recently done this, I thought I could write this walk-through.

Apple uses the iTunes application to upgrade your operating system which does a nice job and for the most part protects you from doing anything too terrible by automating the process. On the iPhone, iTunes will give you an alert about the availability of a new operating system, and ask you if you’d like to upgrade, and tell you that if you have problems you will have the option to restore from a backup.

The interesting thing about the backup piece though, is that it doesn’t really restore the firmware, only the settings. For most users this is fine since the reason for needing to go through the “restore” process is actually because of a problem with the firmware, and the “restore” does all the work required to get your phone back to working with the new firmware and your old settings.

If however, you need to go to a prior version of the firmware, the process is not so obvious. Until recently I didn’t even think this was possible for somebody to restore to the prior version unless they were a developer.

After I updated my firmware on my iPhone recently, I noticed that my hard drive was getting to be very full, which prompted me to search for what was using up my disk space. This led me to find that the old version of the firmware gets saved by iTunes when you do the update.

Firmware files have an .ipsw extension and can be found at the following locations:

On Windows:
Documents and Settings\Application DataApple ComputeriTunesiPhone Software Updates

On Mac:
~/Library/iTunes/iPhone Software Updates

Sotware updates on my Mac

To restore the firmware to the prior version, do the following:

  1. Launch iTunes (with your iPhone connected)
  2. Click the button that says “Restore” while holding down the “Option” key (use the Shift key on Windows). Note: if you get a prompt asking if you want to back up your phone, you probably weren’t holding down the key when you clicked, and you’re actually going through the restore process.

Alternatively, if you’re an iPhone developer, the XCode Organizer can also drive this process of selecting a version to install on your phone.

Organizer

In either case, the actual firmware change is done through iTunes. Now you should see the firmware file being extracted:

extracting firmware

Your phone will be reset, and you’ll see the firmware being validated in iTunes:

validate firmware

Next you’ll see the update message:

Restoring

At this point your phone will be reset back to factory settings for that prior version of the firmware. You’ll probably get the prompt that tells you an update is available, which you can cancel.

Finally if you want to restore your settings, pick the backup you want to use (you can also tell it to set up as a new iPhone, which just means you won’t have any of your settings from before).  This will restore all of your apps and setting, although you may end up with a message that tells you about applications that won’t work if you have any that are for a newer version of the firmware (in other words if your backup contains an App version that wasn’t available for the firmware you reloaded).

App warning

After all of this, iTunes will probably ask you if you want to upgrade your firmware to the current version, which is how you would go back to the current version when you are ready to do so (or you can go through this whole process again to go to a specific version). You may want to turn off the automatic update checking if you are going to switch to other versions very often.

Note that your “problem” applications from the prior message will work once again after you are on a version of the firmware that is current enough to support thos applicatons.