Calendar for MooTools

Here’s another component that virtually all online application will need sooner or later. Via Ajaxian comes this neat calendar implementation for MooTools.

Canvas UI for MooTools

Finally, a decent implementation of panels using MooTools, which means I can finish my migration from YUI+Scriptaculous to MooTools some time this year if time allows.

CSS evolution

Via Ajaxian comes a cool animation of a web page evolving in front of you,

2 things you have to have

I’m back after a bit of a hiatus with vacation, Xmas and all, so lets get cranking, shall we?

I’ve been meaning to post about 2 tools that I’ve become addicted to over the past little while, so others could get high on them with me. Chances are you already know about both, but if you don’t you can thank me in the comments :)

Firebug (http://www.getfirebug.com)

Screenshots won’t do it justice, you *have* to check it out. Here’s a short (and incomplete) list of things you can do with it,

• Inspect and edit HTML (live!)
• Inspect and edit CSS (yes, live as well)
• Debug and profile JavaScript (you’ll use this a lot, admit it)
• Monitor network activity (much much better than Google’s page analyzer at that)
• … the list goes on, you have to see it to believe it!

I should point out, that even though its free (as in beer), please chip in with a small donation to ensure continuous improvement (I’m not at the receiving end of it, by the way, just spreading the word), this tool can really change the way you do web development (for the better).

Selenium (http://www.openqa.org/selenium)

SUnit for your web applications that runs directly in the browser(s), need I say more? ;)

Un-invited whitespace

In the early stages of development of our brand-spanking-new Seaside portal for an existing family of products the stars have aligned in a way that forces me into doing visual design aspects of it. The idea is that we’ll keep it basic while implementing various pieces of the puzzle to better understand the kinds of issues and interactions we need to deal with before handing it off to somebody who knows this stuff. What this also means, is that I end up banging my head against the desk more often that I am usually comfortable with. Here’s one example, if anyone knows the stuff, any pointers would be greatly appreciated.

Here’s a small snippet of HTML that I use to lay out two fieldsets in a single form. The idea is that on wider screens they come up side-by-side, but wrap under each other on the narrower setups.

<div>
 <form method="post" class="cmxform">
  <fieldset class="left">
   <legend>Payment Information</legend>
   <ol>
    ...
   </ol>
  </fieldset>
  <fieldset class="left">
   <legend>Processing Information</legend>
   <ol>
    ...
   </ol>
  </fieldset>
 </form>
</div>
<div class="clear"></div>
<div class="report">
 <table>
    ...
 </table>
</div>

Where .left defines “float:left” and .clear defines “clear:both”. Now it all works as I would expect, except for one slight problem. When the second fieldset appears under the first one, the spacing is correct with report showing up right under the form, however whenever second fieldset floats to the right of the first fieldset, I see a nasty chunk of extra whitespace that I didn’t intend to place there. First I thought this was an issue with a clearing div, so I added “height:1px” to it, just for the fun of it, no difference whatsoever and as far as things stand right now I’m at a bit of a loss…

Here’s a good-looking version,

And here’s a not-so-good-looking one,

Sigh.