One of my colleagues pointed out the rather high ranking of Ajax Bestiary in his Net News Wire Dinosaur Report today.  While 2nd place isn’t the worst possible ranking, It demonstrates that I haven’t posted anything in quite a while.

I’ve had the best of intentions to resume blogging, but time concerns and the high level of secrecy around my current projects have both pushed me away from regular blog updates.  I’ll be making a bigger effort in the future, but I’ve also recruited a second author for the blog.  David Mahon is a talented front-end web developer who has agreed to produce regular content for AB.

You can expect Dave’s first post sometime in the next few days.

in Javascript the Good Parts, Douglas Crockford presents a simple method to curry functions.  It’s a great tool that allows you to build functions with arguments predefined in them dynamically.  In his implementation Array.splice & an indirect method declaration is used.  In my version, I use prototype’s enhanced Array object & a direct call to the Function object to the same effect.

Function.curry = function() {
var args = $A(arguments), that = this;
return function() {
return that.apply( null, args.concat(arguments));
};
};

I’ve been using this method for a few months now in both its prototype & jquery forms and find it invaluable, especially when faced with a need to manipulate a large number of similar objects.

Today I’m going to start a three part tutorial in implementing a custom datagrid with prototype & scriptaculous. In part 1 we’ll explore the html & css underlying the widget. Parts 2 & 3 will look at interactivity and legacy browser support (IE 6).

Disclaimer: this project is designed to work on IE 7 and later. It will not render properly on IE 6. We will look into that more with part 3.

So it starts with a table. Tables are much maligned nowadays. The focus is on semantic markup and creative uses of <div> and <span>. In the energy behind css layouts over the past few years, the new markup elements available to the venerable table have been slightly overlooked. Sure the reign of table based layouts is over, but tables are now able to display data more semantically and style it more simply than ever before.

Here’s a traditional HTML table to start from.

<table>
<tr><td> Item Number</td><td>Description</td><td>Qty</td><td>Unit Price</td><td>Total Price</td></tr>
<tr><td>0023</td><td> Apples</td><td>3</td><td>.56</td><td>1.68</td></tr>
<tr><td>0057</td><td> Pears</td><td>13</td><td>.74</td><td>9.62</td></tr>
<tr><td>0137</td><td> Bananas</td><td>8</td><td>.31</td><td>2.48</td></tr>
<tr><td>0587</td><td> Kumquats</td><td>17</td><td>.26</td><td>4.42</td></tr>
<tr><td>0054</td><td> Oranges</td><td>3</td><td>.45</td><td>1.35</td></tr>
<tr><td></td><td>Total</td><td>44</td><td></td><td>19.55</td></tr>
</table>

It’s a decent start, but we can do better. First lets separate the body from the head with <thead> & <tbody> tags. We’ll also replace the header cells with <th> tags to denote their importance. We’re also going to add a set of row numbers. We’ll use <th> for these as well to signify that they aren’t really part of the data (note the empty <th/> we added to the header to make everything stay consistent).

<table>
<thead>
<tr><th /><th> Item Number</th><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total Price</th></tr>
</thead><tbody>
<tr><th>1</th><td>0023</td><td> Apples</td><td>3</td><td>.56</td><td>1.68</td></tr>
<tr><th>2</th><td>0057</td><td> Pears</td><td>13</td><td>.74</td><td>9.62</td></tr>
<tr><th>3</th><td>0137</td><td> Bananas</td><td>8</td><td>.31</td><td>2.48</td></tr>
<tr><th>4</th><td>0587</td><td> Kumquats</td><td>17</td><td>.26</td><td>4.42</td></tr>
<tr><th>5</th><td>0054</td><td> Oranges</td><td>3</td><td>.45</td><td>1.35</td></tr>
<tr><td></td><td>Total</td><td>44</td><td></td><td>19.55</td></tr>
</tbody></table>

The <thead> specifies the header content. When printed, a browser should print it on every page the table spans. More importantly for us, it is a unique dom node we can grab for styling instructions. <tbody> works in a similar way, It allows us to break the internals of a table into a set of segments. This will come in handy later. <th> is a different beast entirely. I like to think of it as the ying to <td>’s yang. <th> & <td> are to <table> what <dt> & <dd> are to <dl>: a semantic way to denote name / value pairs.

Now that our table has a header and a body, It’s time to give it a footer. We’ll do this by using the <tfoot> tag.

At first glance, there is visually no difference between the 2nd and 3rd examples. Both of them look identical. The source, tells a different story. In the 3rd example, the footer row is actually ahead of the <tbody> in the source. This is the beauty of <tfoot> It lets us place the footer early in the table and cleanly separate it from the tbody that follows. It also guarantees that the <tfoot> appears last no matter what we append to the table via script.

All of this looks good, except it would be great if the columns were better styled.  The two columns with financial data especially should be aligned left to ensure that the decimal points align.  In a perfect world, we’d be able to do this with column groups, but that’s something for part 2.

It’s been a crazy several months, new town, new job etc…

I’m finally in a position to start posting again, so you can expect semi regular updates from here on.

Hi everyone,

I haven’t been posting lately and I apologize for that.  I’m in the process of orchestrating a move and all the headaches that entails as well as finalizing all of my projects at my current job.  I simply don’t have time for AB right now.
Regular updates will resume in March.

Today I bring you the first in what I hope will be an entire series interviewing startup developers on the technical speedbumps they faced in bringing a web based software product from conception to production.  Today’s interview is with Ian Lotinksy, one of the two founders of SandwichBoard a web based CMS targeted at restaurants.

If you are interested in participating in an interview and getting some free publicity for your product, or know someone who might be, please use this form to let me know.

The interview is after the jump
Keep reading →

Alright, so I’ve been developing a minor frustration with Safari 3 on my Mac.  When I cut and paste between a url in firefox and a Tiny MCE window in Safari, a styled span is applied to the paste.  I’m not sure where it’s coming from. Ex.  http://nurey.com/corners.html

John Resig has just posted an excellent resource for getting your feet wet with jQuery and even introducing some advanced features you may not yet be familiar with.

The presentation & source files are available here:

http://ejohn.org/blog/building-interactive-prototypes-with-jquery/

This is a bit off topic for this blog, but is something that has very much been on my mind lately.  I’ve been maintaining an archive of all of my work over the past 12 years.  Everything from coursework to UI markups, Personal Notes to SVN repositories all lived in a set of redundant 750 gb external hard drives.  Over the years , I’ve found these archives to be an invaluable asset (especially with modern desktop search tools).  Last monday, those drives were stolen.

Although I can cope without the data, I need to start compiling a new personal archive & I’m curious what other people have done for backup systems & how you deal with offsite backup of personal data.

After a rather painful night spent camping in line at Comp USA & a solid week of work repairing, cleaning & rebuilding.  I’m back online.