"…and not for five minutes will I be distracted from the wonder…"

Buster Stays? + Firefox as WebDev Environment

Uncategorized — d-ashes on October 20, 2005 at 10:39 pm

So, I cursed Rita in my last post and on Friday I came home to find that a hurricane
weakened limb had fallen in front of the house and in doing so tore every
wire (cable, phone, electricity) out of/off of the house. We just got power
back on Tuesday. Payback is a bitch.

It’s been over a week since the black lab has come to stay with us. Ads in
the newspaper and posters in the neighborhood did not turn up his owner. Prepare
in the coming days, then, for pictures of ‘Buster’ (not the most eloquent name,
but it’s what I called him the minute he set foot in the door, so I guess it
sticks). He stayed with my parents while the power was out and apparently
melted hearts everywhere he went. Pet-centric blogs frighten me (TheOhReally being an exception because it’s pet-centricity is new-found and there is usually
a good story to back up pet subject matter), but I’ll at least introduce you
to the boy in the next couple of days. Keeping him still long enough for a
picture is proving difficult, though.

Also, I don’t think I ever mentioned on A+W that back on September 18th or so, the new Lemuria
website finally went live. Bobby and I put in a lot of work on it and I
think it looks and works better now. I know for sure that it is worlds
easier to manage and troubleshoot. It can still use some visual work,
but it looks as good as the old one, I think, and it loads much faster.

And now for the main event (non-geeks stop reading here).

Firefox as a Web Development Environment

One of the first things that drew me to the Firefox web
browser was the web developer extensions, thanks to the recommendation of Tate
over @ Shockingbird.
Now that I’m doing this work everyday, I’ve come to rely very heavily on a
whole slew of extensions for creating, previewing and correcting web page layouts.
My reliance became apparent when I was working on a site that would only
load in Internet Explorer due to some jankity code and
I realized how much I missed all the help that the Firefox extensions gave

I thought that I’d put together a quick tour of some of the extensions
that I find most beneficial. You can click the link on the extension title to
visit the extensions page at Mozilla to learn more or download it.

IE View – With this you can right-click on a page you are viewing in Firefox
and select ‘View in Internet Explorer’. Internet Explorer will open and load
the page. Very handy for quick cross browser comparison or when you come to
a page on the web that doesn’t like Firefox.

– This one makes my ‘Top 3 Dev Extensions’ list. Install this bad boy
and you get a box in the bottom left of your FF window. Click it and
sample any color that you put your cursor over by left-clicking. After
sampling, right-click the ColorZilla box and you can copy the color in
any number of color model notations to the clipboard for use in your
css or image design program. You can also set it to auto-copy the color
notation for a particular model right when you sample it. This ones
saves a lot of time and hassle, and helps to ensure consistent layout

Another one that makes the ‘Top 3’. Once installed this extension puts a box
in the bottom left of your screen (the location is customizable). Click the
box, then move your cursor into the browser window. When you click and drag,
the extension draws an opaque box over the area and in a popup window off to
the side notates the width and height of the box. Very handy for determining
div positioning or finding the size of an image or table.

Web Developer
The extension that started it all, at least for me, and another member of the
‘Top 3’. There are too many feature here to name, but let it suffice to say
I can’t dream of web design without this thing. If you code sites in standards
compliant div/css or are wanting to learn to do so, many of the functions in
this extension will help a lot. Highlights include:

  • Outlining divs and tables/table cells or any other tag you choose in the browser window
  • Displaying the id and class names of all objects next to that object in
    the browser window
  • Generating a list of all form fields in a form
  • Validating html and css through the W3C validation engine
  • Locally editing the css of the page you are currently viewing and immediately
    seeing the effects of your changes in the browser window

And that’s just a couple of things that it does. A must have, for sure.

View Formatted
– View the source of the page you are viewing, but with a few important extras:

  • Line numbers of the code (handy for finding validation errors)
  • Collapse and expand nested elements (nice for making a big page of code easier to read and navigate).

HTML Validator (based
on Tidy) – This extension adds to the capability of validating a page’s code.
For starters, it validates the code locally as it loads in the browser, so
there’s no need to click on a validator link that runs from another site (and
this allows you to validate local files not yet on a server). After running
the validation it gives you a quick summary of how your document did and how
many errors or warnings were found if the document didn’t validate. From there
you can choose to view a more detailed look at the errors or open the source
code of the page in a specialized Source View that features HTML Tidy functionality,

  • Correcting what validation errors it can.
  • Automatically ‘Tidy-ing’ the code to be more readable (making indents and standardizing tag and attribute capitalization).
  • Converting the code to XHTML.
  • Making many other standards based changes that can be quickly applied to
    the entire page.

If you have any other web developer friendly extensions that you think warrant
mentioning, please comment on them below.


No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment