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.

Introducing YSlow

Yahoo just announced release YSlow as a first (hopefully, of many) great extension to Firebug that analyzes your pages and points out a wide variety of ways you can improve their performance. My first few minutes playing with it proved to be a lot of fun and I look forward to using it frequently going forward. Here’s a teaser to get you started straight from the home page of our application,

There’s much more to discover, go and grab it while its hot.

37 Steps to Perfect Markup

Some of the questions go back to basics, so consider it a refreshment of things “we all think we know until someone asks about them”, for instance “31. What is the difference between abbr and acronym?”

Bulletproof HTML: 37 Steps to Perfect Markup

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? ;)

Hint: Validating your XHTML

[I've been meaning to start posting little hints that may (or may not) help fellow Seaside developers get on with their days just a little better. So how about I give it a shot and see if this becomes something people want to see more of or less of, eh?]

If you develop with Web Standards in mind (and here’s why you should) you’ll surely want to validate XHTML crafted for Seaside. And not just once in a while, but often, just like your unit tests (wink-wink). Unfortunately little ‘XHTML’ link in developer toolbar uses W3C’s simple referrer mechanism, which won’t work unless your development URLs are accessible from the Outside (mine are all
http://localhost:xxx/yyy
). I’m sure there’s many tools out there that can do it locally, but one I use every day is the trusty Web Developer Extension for Firefox, which enables Ctrl+Shift+A (on Windows, anyway) to submit actual contents of a current page to W3C for analysis. Its so slick, its not even funny: hit the magic combination,

and wait for results to appear shortly,

Simple to use, doesn’t require installing any additional software and always up to date – sounds like a good deal to me.

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.