Web Info & Tutorials

While this is not strictly Ajax or JavaScript related, it is noteworthy to point out that Sitepoint just released a HTML reference that is quite handy to have around if you wonder if what you are building is really HTML or just tagsoup.

Good HTML references are really hard to come by, either they are just listings, like W3schools.com or terribly outdated. Sitepoint have done quite a good job in listing all the HTML elements and categorizing them into different use cases. There is also a list of deprecated elements and attributes to avoid (which could be considered dangerous to still bring up as some of them are too handy to simply add to solve an issue) and a Microformats primer.

We know for a fact that other portals/article sites are working on similar projects and consider it a really good way of flushing old and outdated tutorials on things as simple but important as markup out of the search engine result pages.

The reference also gives a legend of browser support, something that so so far was only available on the German SelfHTML reference.

Working client-side with data can be challenging and projects have tried to address this in different fashions. Ian Smith, creator of Joe's Goals, has his own approach. He's created Taffy DB, a lightweight Javascript database
that allows you to insert, update, delete, order, loop, and query against a client-side collection of data. The great thing about it is that it's library agnostic and can work with all of the popular frameworks.

The idea came to me as I was working on Joe’s Goals 2.0 and I realized that one of the hardest parts about building any Web 2.0 application is working with data. There is no good way to use JavaScript by itself to gather, search, and maintain a collection of data. There are lots of great ways to great interfaces now days, but what about the data behind them? Taffy DB is the result of the research and testing I did for Joe’s Goals and is now avaliable for everyone to use.

Some of the key features include:

• Under 10K!
• Simple, JavaScript Centric Syntax
• Fast
• Easy to include in any web application
• Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
• CRUD Interface (Create, Read, Update, Delete)
• Sorting
• Looping
• Advanced Queries

The syntax to use the libary is very straightforward:

Updating:

Inserting:

In addition, Taffy DB provides 12 different conditional statements (e.g.: "greaterthan", "equal", "like") to help build advanced queries that can further filter your results.

Ian has created a Getting Started Guide which will help in getting up to speed on the full capabilities of Taffy DB.

Investors watched the have commission as the Kuala Lumpur have mart rebounded in Kuala Lumpur, Malaysia, Tuesday. via 680News

Brian Moschel has created a new event delegation library called Controller, that aims to help logically organize your event handlers.

• Like other event delegation libraries, it lets you define event handlers that never have to be reattached, even if the HTML is modified.
• Unlike other libraries, controllers group event handlers for a specific set of HTML elements. This links the DOM to your JavaScript in an easy to understand way.
  [html]
  1. Laundry
  2. Dishes
  3. Walk Dog

  [html]

  PLAIN TEXT
  JAVASCRIPT:
  

  1.  
  2. // event handlers for "todo" elements
  3. $MVC.Controller("todos",{
  4.   // the onclick event handler
  5.   click: function(){
  6.     alert("clicked todo");
  7.   }
  8. });
  9.  
• You can put CSS queries in the function names and the handler is assigned to any matching element.
  
  PLAIN TEXT
  JAVASCRIPT:
  

  1.  
  2. // attach to input elements inside ul elements with class "foo"
  3. "ul.foo input focus": function(params){
  4.   params.element.style.class = 'clicked';
  5. }
  6.  
• AJAX callbacks are simplified.
  
  PLAIN TEXT
  JAVASCRIPT:
  

  1.  
  2. }, click: function(){
  3.    new Ajax.Request('url', {onComplete: this.continue_to('deleted')});
  4. }, deleted: function(){
  5.    alert('item deleted');
  6.  

You can check out a detailed demo, and the full API.

Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow.

It is simple to use:

Mozilla has free Firefox 3 beta 4 which includes newborn standards hold and performance:

• Improved papers features such as: hold for HTML5’s window.postMessage and window.messageEvent, JavaScript 1.8 improvements, and offline accumulation hardware for scheme applications.
• Performance improvements: changes to our JavaScript engine as substantially as strikingness guided improvement resulted in momentous gains over preceding releases in the favourite SunSpider effort from Apple, scheme applications same Google Mail and Zoho Office separate such faster, and continuing improvements to module practice drastically turn the turn of module exhausted over daylong scheme feeding sessions.

There is programme on the Firefox 3b5 schedule. The test edition has to not be TOO farther in the future.

Steve Souders has posted on IE 8 and performance improvements.

One new nugget of information that I haven't seen anywhere else is the fact that scripts are now loaded in parallel (and execution is still serial of course):

Increasing parallel downloads makes pages load faster. (For users with slower CPUs or Internet connections it could possibly be worse, but for most users it’s faster.) The HTTP 1.1 spec recommends that browsers only download two items in parallel per hostname, but the spec was written in 1999. Today’s clients and servers can support more parallel downloads, so IE8 has increased the number of downloads per hostname from 2 to 6.

Increasing parallel downloads makes pages load faster, which is why downloading external scripts (.js files) is so painful. Firefox and IE7 and earlier won’t start any parallel downloads while downloading an external script. These days, with the greater adoption of Web 2.0 and DHTML, many sites contain multiple scripts which means those pages will have long periods where all other downloads are blocked. It’s understandable that these scripts need to executed sequentially (code dependencies) but there’s no reason they couldn’t be downloaded in parallel. And that’s exactly what IE8 has done. It’s the first browser I’ve seen that has implemented this critical improvement for load times. Facebook has got to be thankful for this. They have 17 external scripts on their page. In most browsers this causes the page to load slowly for users coming in with an empty cache. But for users coming in using IE8 the scripts load ~80% faster because they’re loaded in parallel. In this screenshot showing HTTP requests for Facebook we see parallel script loading, and we also see them loading 6 at-a-time. Both of these IE8 enhancements dramatically speed up pages.

This dove tails nicely with the other items that we have already heard about:

• 6 downloads per host
• data: URIs, which means you embed your rounded corners

I wonder if IE 8 has a total maxconnections limit?