Firebug 0.4 Released. Can Web Development Be Any Sexier?

One of my must have extensions for firefox has a new version out! Firebug, if you don’t already know, is an Ajax/layout/javascript troubleshooter and is extremely well developed. In version 0.4, Firebug steps beyond the bounds of being a troubleshooter and can now be considered a full fledged debugger. Its new features include:

  • JavaScript Debugger
  • Stack Traces with JavaScript Errors
  • Debug JavaScript Errors
  • Logging levels and assertions
  • printf-like String formatting

For more info, check out the release notes!

(note: I found out about this on Ajaxian)

Node Manipulation in the DOM

DOM

I’ve been screwing around with DOM Manipulation for a few years now, doing stuff sporadically here and there. With my development of MasterWish and my recent interest in Script.aculo.us, I often find myself forgetting the various objects, functions and attributes relating to nodes. Hence the reason for this post. I want a quick and easy way to find the information…So, here’s a quick run-down of node structure:

Assuming we have the following simple structure:

<div id=”outer”>
    <div id=”inner_1″>
        Bork!
    </div>
    <div id=”inner_2″>
        OMG Lazerz Pew pew!1!!!1!
    </div>
    <div id=”inner_3″>
        <div id=”super_inner”>
            I like butter
        </div>
    </div>
</div>

We know the following (I completely understand the relationships between nodes…but I’m filling this out for completeness):

  • Node “outer”: is the parent of nodes inner_1, inner_2, and inner_3
  • Nodes inner_1, inner_2, and inner_3: are the child nodes of outer
  • Node inner_1: is the first child node of outer
  • Node inner_3: is the last child node of outer
  • Node inner_1: is the previous sibling node of inner_2
  • Node inner_3: is the next sibling node of inner_2
  • Node super_inner: is not a child node of outer, but is a child node of inner_3

Here are the node related functions available:

property description
nodeName name of the node
nodeValue value of node (only applicable to text nodes)
nodeType type of node – see below
parentNode parent, if one exists
childNodes list (array) of child nodes
firstChild first child
lastChild last child
previousSibling previous sibling
nextSibling next sibling
attributes list of attributes of an element
ownerDocument document containing the element

Here are the node types:

number description
1 an HTML element
2 an element attribute
3 text
8 an HTML comment
9 a document
10 a document type definition


Slashdot Getting a Face Lift

Finally! I have been frequenting Slashdot for quite a few years now and the current layout…well…sucks. I have often remarked to my friends that the geek news site really needed a new look. You see, I wouldn’t consider myself a super graphic designer or artsy person but I know what I like. I’m somewhat critical with sites and their layouts, especially with ones that are extremely high profile like Slashdot. There is a LOT of great news articles that come from them but I can never fully get past the icky layout. Well, I have been praying to the binary gods of THE internet and they have seen fit to answer. Slashdot – after 8 years – will be moving to a CSS layout with a more up-to-date look’n’feel. Read the article!