We are fast reaching the end of the 25KB era. 3G network speeds mean we no longer need to keep our pages (and all of their assets, cached or otherwise) under 25KB for reasonable performance.

That said, iPhone and Android users expect a rich web experience, 3G isn’t all that fast and like Firefox and IE of old, Mobile Safari and Mobile Chrome come with bizarre incompatibilities.

Take rotation for example.

Resize events happened on the desktop, but they happened in relatively controlled, incremental steps and you always knew what was happening. Resize events would fire on the window object and you could relatively easily determine the height and width, especially with libraries.

Not so in mobile. Mobile Safari fires a resize event, but may not present the new height and width to you. It all depends on which version of iOS you’re running. Android, however, does. Frankly, I’m not sure how Mobile Firefox and Opera 5 behave on those devices, not having one to test on.

Both browsers do update the window.orientation property, but for some reason, Mobile Safari doesn’t present 270 degrees (portrait, but with the button at the top), overloading 0 for that purpose.

Confusingly, the same version of Mobile Safari doesn’t behave the same across dissimilar devices. You can have a slightly different experience between an iPod Touch, an iPhone 3GS, an iPhone 4, an iPhone 4S, the iPad 1 and the iPad 2. (These being the Apple devices that commonly require support).

For example, on certain versions of iOS, media selectors can be applied differently.

Both platforms fire both onresize and onorientationchange events, but not always in the same order.

Worse still, the versions of Android can behave differently as well. Today, there is still a significant user base on 1.5, 1.6, 2.0, 2.2, 2.3, 3.0 and 4.0 is now entering the market.

In short, assume very little when working in the mobile space and try to test in a wide array of devices, because each browser can be very subtly different.

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.

DOMAssitant 2.7 is a solid improvement to the DOMAssistant framework with a clear focus on CSS.

New functions:

• cssSelect
• AJAX
• setStyle
• setErrorHandling
• first

Other Improvements

• Dramatic Improvements to the CSS Selector performance: I personally consider CSS selectors the most important feature of a framework so the dramatic improvements really help sell me the benefits of the 2.7 release.
• Unicode Support.  This can be a really big one for a variety of reasons.  Personally, I think it should be built into all frameworks from day one (It is built into javascript after all).

You can find out more about the new release here:

http://www.robertnyman.com/2008/04/09/domassistant-27-released-better-faster-slimmer-new-features/

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/