Archive for January, 2008

* Nitobi Hack Day Take Two

Posted on January 24th, 2008 by Dave Johnson. Filed under AJAX, Flex, Nitobi, air, hackday, wireless.


The second Nitobi Hack Day will be happening on Feb 9, 2008 from 10am to 6pm. You can come and start hacking at 9 things will officially start at 10am SHARP! Of course you can always come by later and if you don’t know anyone just ask for someone that works at Nitobi to show you the ropes. You can signup over at Upcoming.

The event is meant to bring hackers from around Vancouver to the Nitobi office and dedicate a day to building something amazing! That something can be hardware, software or whatever. The hacking is generally focused on Ajax (of course), social networking (Facebook apps anyone?), wireless (Joe and I got this covered), AIR / Flex, and web development in general - of course the hacking can still be robotics, Wii hacks or whatever you think is cool.

Nitobi will provide the foosball, beer, prizes (like books, shirts, software and an IPod Nano) and you provide the hax0r skillz.

Be there!

.



* Complete UI Q1

Posted on January 22nd, 2008 by Dave Johnson. Filed under AJAX, JavaScript, Nitobi, cui.


The builds are running and - as the press release suggests - it will be available today!

We have improved performance significantly in this build and added a few new features like drag-fill of selections.

I will be posting a screencast later today as well.

w00t!

.



* The Mystery of Removing XML DOM Nodes

Posted on January 16th, 2008 by Dave Johnson. Filed under AJAX, JavaScript, XML, quirks.


I was reviewing some code today and came across something that seemed very strange. There is a method we use for removing all the child nodes of a parent node in an XML document and it looked like this:


nitobi.xml.removeChildren = function(parentNode)
{
    var children = nitobi.xml.getChildNodes(parentNode); // gets children that are not empty text nodes
    for (var i = 0, len = children.length; i < len; i++)
    {
        parentNode.removeChild(children[i]);
    }
}

Someone (probably me) was trying to save processing and store the child node collection length rather than re-calculate it every time through the loop. Seems good but one will notice that we are removing the child at the i’th index and so half way though deleting the child nodes we are going to try and delete the len/2+1 node but there will only be len/2 nodes in the collection (or something along those lines).

So I “fixed” it and made it look like this:

nitobi.xml.removeChildren = function(parentNode)
{
    var children = nitobi.xml.getChildNodes(parentNode);
    for (var i = 0, len = children.length; i < len; i++)
    {
        parentNode.removeChild(children[0]);
    }
}

Now it would always remove the first element in the collection and iterate over the original collection length - done and done. Oh wait but no. So I go to test this in Firefox and low and behold it crashes like AAPL after MacWorld.

Then I finally get my act together and test both approaches in Internet Explorer and the latter approach - the expected solution - is the one that works. So Firefox is doing some strange things with the length of the child node collection.

.



* How Does CSS Work?

Posted on January 14th, 2008 by Dave Johnson. Filed under AJAX, CSS.


I was just making some content for an Ajax video training series that Andre, Alexei and I are preparing for Prentice Hall as an extension of our book (Enterprise Ajax) and thought that I would just share this tidbit about CSS for those that have never really fully understood how it works but know enough to be dangerous.

CSS rules are applied using two approaches: inheritance and the cascade. So styles can be applied to certain elements through inheritance from styles of parent elements or by the battling of different styles based on cascade rules.

Cascade

The cascade is a bit more involved. There are three important aspects when the browser determines what styles get applied to what elements.

Origin

The first is the style origin. Styles can defined either by the web page author (Author), the person viewing the web page (User) or the application being used by the user to view the web page (UserAgent). The precedence rules for the origin are just that - Author, User, UserAgent - in order from highest precedence to lowest. Of course User specified styles can use the !important modifier on their styles to override Author styles.

Specificity

The second aspect of the cascade is specificity. The specificity is determined by how specific (go figure) the CSS selector rule is that matches a particular element. ID selectors are the most specific followed by selectors based on attribute values such as class names followed by selectors with element names in them - i.e. in order of precedence from highest to lowest we have #header {}, *.header {}, div {}. To get the specificity of a rule we count the number of ID selectors (call it “A”), the number of class or attribute selectors (call it “B”) and finally the number of tag names (call it “C”). Then we concatenate ABC and we come up with a final number like 321 and then compare all the rules for a style and highest number wins.

Order

Finally we have the style order. If we have multiple rules in the Author stylesheet for a page that all have the same specificity then the last defined style will win.

Inheritance

If the cascade does not result in a style being set, then inheritance may become important for the defining of an elements style.

Most CSS styles are not inherited. Background color, borders and the like are not inherited by default whereas line-height and fonts are. You can force a style to inherit by setting the value of the style to inherit as in background-color: inherit;. That’s really all there is to inheriting - just don’t get it mixed up with object oriented inheritance. If you feel like you want to do something along the lines of object oriented inheritance then remember that you can define multiple rules separated by commas such that those rules all use the same styles such as .header, .footer {font-face: arial;}.

For the entire story check out the official W3C site but hopefully this will help some people out there write more succinct and understandable stylesheets!

.



* Ajax and Beer: Part II

Posted on January 3rd, 2008 by Dave Johnson. Filed under AJAX, Nitobi, beer, hackday.


Brian has just informed me that there will be a second Ajax and Beer meetup at the Shebeen room!

So be there on Feb 6 (Wed) for some beer titillating Ajax conversation.

That reminds me … we have to do Nitobi Hack Day 2.0 as well …

.