Skip to main content

Using Firebug to test when updating large sites

Yikes, over a week since my last post. Busy, busy - thank google for coffee!

Anyways, though this tip might be useful to someone. I was tasked with performing some minor changes to a site. The site was large and very high traffic, and because of how it was structured it was not feasible to create a test page or use a staging server - the changes had to be made to a live page. Normally this wouldn't be a big deal, except that the site was still using a heavy table-based layout.

So many tables! Haven't seen so many in a long time... And worse, the indentation of the code was a mess, making it harder to figure out which tables needed to be moved, etc. Obviously, the goal was to find the "master table" for a section that needed to be moved, because to cut and paste that code to a new location w/out getting the closing table tag, or picking the wrong table would make for a screwed up page, which given the traffic would likely affect visitors...

Here's where firebug comes in. Of course you can use it to view the table structure, which is helpful - but it can still be difficult to figure out which table in firebug corresponds to which table in the messy code.

To get around this, add a css ID to one of the tables. Make sure it's something that there's no styles associated with. Then reload firebug and the ID for that table will be shown. Or you can add a "safe" inline style to the table in the code, such as display: block then look for that inline style in firebug. You can even then change that to display: none in Firebug to make sure things will still look right when the table has been removed.

This way you can figure out what needs to be done in the code with as little impact on visitors to the site as possible.

Comments

Popular posts from this blog

Another VI tip - using macros, an example

God I love VI. Well, actually, vim but whatever. Here's another reason why. Suppose you need to perform some repetitive task over and over, such as updating the copyright date in the footer of a static website. (Yes, yes I know you could do a javascript thing or whatever, just bear with me.) Of course you could just search and replace in some text editor, changing "2007" to "2008" (if you're stupid) - and you'll end up with a bunch of incorrect dates being changed, most likely. What you need to do is only change that date at the bottom. And suppose that because of the formatting, you can't use the "Copy" part of the string in a search replace - perhaps some of the pages use "©", some spell out "Copyright" etc. This is where vi macros come in handy. A macro in vi is exactly what you expect, it records your actions and allows you to play them back. To start recording, press q followed by a character to use to "stor...

Using FIle FIlters in FileZilla

Here's a handy tip for situations when you want to download a large number of files - but only of a certain type. For example, perhaps you want to download all the PHP files from a largish website, scattered through many subdirectories. Perhaps you're making a backup and don't want any image files, etc. FileZilla (still the best FTP in my opinion) has a handy feature called filename filters - located under the Edit menu. Here you can set various filters that filter out files based on their filename. Took me a minute to figure that out - you're saying show only PHP files, rather you're saying filter out files that do not have ".php" as their suffix. For some reason, that seems a little backwards to me, but whatever. It works quite well. You can also check whether the filter applies only to files, only to directories - or both. In this example, you'd want to check only files, as otherwise you won't see any directories unless they happen to end in...

Great google article

Over on Maximum PC - there were a few things I didn't know you could do with the various Google apps. One is uploading files to google docs - any file. Which ties in well with my previous post about storing passwords - I uploaded a copy of my password safe file to google docs as a backup. Can't hurt, right? Also, I wasn't aware that you could set up forms in google docs that act as surveys, and then store the results in a google docs spreadsheet. This is a little alarming, as a decent amount of my work involves coding up custom surveys similar to this...