Tuesday, January 31st, 2006
Category: Dojo
, Programming, Python
Django, the Python “Web Framework for Perfectionists”, is bundling Dojo for Ajax with its 0.92 release, due in out in a few weeks. The initial integration will use Dojo in the admin interface of Django, but the toolkit will be available for any part of a Django app.
It was recently announced that the Java framework WebWork 2.2 will be released with Dojo under the hood, so this looks like another vote of confidence from the open source community in Dojo’s quality.
Thanks to Eugene, who also blogged about the announcement.
Category: Ajax, Prototype, Programming
In this article from ParticleTree they take the typical Ajax kinds of connections that everyone else is doing and “step it up a notch” by showing you how to prefetch with Ajax and the help of some JSON.
On most sites, there are usually only a handful of options that can be done at any given moment and often some of these options are more likely than others. By determining what is important on each page, we can preload the data of the user’s next action and store it on the client with JSON. When the user decides to perform their next action, they’ll see their results almost instantly because the info was loaded in the background.
They start things off with a demo of how the application works (for you to get a feel for it), and include a download to help the learning process along. They describe briefly what JSON is and move directly into the code. They break it up into chunks, describing each piece as it goes along. They use the Prototype library to make the creation of things a bit easier as well. They finish it off with the inclusion of pagination abilities and using the navigation to control it.
Category: Ajax, PHP, Books, Programming
Packt Publishing will be releasing a new Ajax/PHP book this coming March (2006) - “Building Responsive Web Applications with AJAX and PHP” authored by Cristian Darie, Bogdan Brinzarea, Filip CherecheÅŸ-ToÅŸa, and Mihai Bucica.
In it you will learn how to:
Build a solid foundation for your next generation of web applications
Use better JavaScript code to enable powerful web features
Leverage the power of PHP and MySQL to create powerful back-end functionality and make it work in harmony with the smart AJAX client
Go through 8 case studies that demonstrate how to implement AJAX-enabled features in your site such as: real-time form validation, online chat, suggest & autocomplete, multisession cards game, whiteboard, web data grid, RSS reader, drag & drop
You can preorder it from their site (saving 20%) as well as get a more complete outline of what the book entails, chapter-by-chapter.
Category: Ajax, JavaScript, Programming
Saddam Azad has a huge post over on his blog today with a pretty comprehensive list of Javascript libraries (including Prototype, AjaxAC, Moo.FX, Rico, and Zimbra).
They’re seperated out into sections like “Pure JS Application libraries / Frameworks”, “PHP based AJAX Frameworks”, and “Javascript libs for Flash” with several listings underneath each. Most of the entries include not only links to the library’s homepage, but also links to documentation and demos showing what it can do.
Of course, there are some comments about ones that are missing, but this huge list provides more than enough links to keep a developer busy for a long time.
Category: Ajax, Programming
On the Sys-Con Brasil site site, there’s a new tutorial posted that walks you through the creation of a drag-and-drop shopping cart system with the help of Scipt.aculo.us and <cf_srs>.
We’re going to harness the power of the Scipt.aculo.us JavaScript library to provide our interaction. As their Web site states, this library “provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style.” We’re also going to utilize the library to handle the actual AJAX data piping to our application. Both of these libraries are free for all to use, and they’re easier to integrate than you would think.
The article works from the ground up, including the various libraries before anything else. From there, they move on to “draggables”, the adding of the actual (empty) shopping cart to the page, and how to get the to play nice with it all. There’s code included along the way to help out too…
Category: Editorial, Utility
The Zimbra team posted about how they compress and package their CSS and JavaScript for Ajax applications.
They show how Digg.com could change their home page to go from:
A Current Page:
Total HTTP Requests: 26
Total Size: 199246 bytes
Compressed:
Total HTTP Requests: 13
Total Size: 70040 bytes
What they do
First some background on Zimbra’s AJAX app and the techniques we currently use. Raw and uncompressed the Javascript alone is over 2Megs. To make our app easier to download we’ve made some optimizations.
For Javascript we combine all the files in to a single _all.js file. The order that you concat these files is important since the browser will parse the files top to bottom. The same reason why the order of the script tags in your HTML document would matter to prevent dependency problems.
We then use jsmin to remove comments, white space, and excess new lines. This gives on average 25-30% reduction in size. The final and most important step is to gzip the file. This gives on average 300-400% reduction in size. Some web applications will apply gzip compression on-the-fly, which for dynamic data is the only way. Here since the Javascript is static, which is true for most AJAX applications these days, we can pre-compress which will reduce latency and CPU overhead.
For CSS we also combine all our CSS files into a single _all.css file. This combined file is then compressed with gzip.
Now back to the experiment. I took a copy of Digg’s home page and applied the techniques above. Combined, jsminified, and gziped the Javascript, then combined and gziped the CSS. I’ve posted my resulting page. Visually and functionality nothing has changed. Under the covers however the source is quite a bit smaller. I used Web Page Analyzer to compare the results. We see a 50% reduction in the number of HTTP requests and a 65% reduction in the size of the download.
NOTE: We posted on ShrinkSafe which is a JS compression tool
Category: Ajax
Wrox is releasing a new Ajax related book in February - Professional Ajax.
Authored by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett, the contents of the book include:
* Explores the technologies behind Ajax, its various usage models and communication methods, and why the Ajax model is better than the traditional Web model
* Discusses Ajax and its practical implementation in a professional Web site/application environment
* Examines a variety of server-side languages (such as PHP and .NET) so that readers can get an overview of development issues prior to implementing their own Ajax solutions
* Also covers building a Web-based Ajax RSS reader and calling Web services from JavaScript
You’ll be able to pick up a copy of it at a bookstore near you soon, or you can order it online from various places around the web…
Category: Editorial
A new experimental module has been created over at Apache. This module, Apache MPM event, is “an experimental variant of the standard worker MPM”.
This module has the potential to bring Twisted-esque functionality within the Apache pipeline.
Summary
The event Multi-Processing Module (MPM) is designed to allow more requests to be served simultaneously by passing off some processing work to supporting threads, freeing up the main threads to work on new requests. It is based on the worker MPM, which implements a hybrid multi-process multi-threaded server. Run-time configuration directives are identical to those provided by worker.
How it works
This MPM tries to fix the ‘keep alive problem’ in HTTP. After a client completes the first request, the client can keep the connection open, and send further requests using the same socket. This can save signifigant overhead in creating TCP connections. However, Apache traditionally keeps an entire child process/thread waiting for data from the client, which brings its own disadvantages. To solve this problem, this MPM uses a dedicated thread to handle both the Listening sockets, and all sockets that are in a Keep Alive state.
The MPM assumes that the underlying apr_pollset implementation is reasonably threadsafe. This enables the MPM to avoid excessive high level locking, or having to wake up the listener thread in order to send it a keep-alive socket. This is currently only compatible with KQueue and EPoll.
Bye bye polling.
Category: Ajax, Presentation
Eric Pascarello, coauthor of the book “Ajax in Action” will be giving a talk to the Washington, DC area BEA User Group the evening of February 9th, 2006.
The meeting is open to anyone in the area, and will be from 6:30pm to 9pm (it’s a Thursday night) at the Embassy Suites at the Chevy Chase Pavilion. If you’re planning on attending, you’ll need to go and register at their dev2dev site.
Plus Eric will be giving away free copies of “Ajax in Action”!
Category: Ajax, HTML, PHP, CSS
DevArticles.com has posted all three parts of a series over on their site - “Sending Email with Ajax”. It follows a step by step process of building up the client-side interface (with Ajax’s help) and the server-side code that interacts with it (in this case PHP).
-
Part one starts the process off, talking about the user interface for the application - how to style it with CSS and defining the (X)HTML framework.
- Part two builds on the previous application structure and creates various modules that can be used on the client (”email sender”, “contact listing”, and “contact insertion”). This part actually has the code to start up the application and get things running.
- Wrapping it all up is Part three, the construction of the server-side pieces - all written in PHP. They demonstrate how the scripts can add a contact to the listing held in an XML document on the server and send a simple, quick email with the parameters from the client-side application.
At the end, you’ll have an email application that can run without a single reload and can send emails and track a simple contact listing. Of course, the server-side piece can be swapped out for any language of your choosing - one of the wonderful things about Ajax…
Monday, January 30th, 2006
Category: Editorial, Dojo
Back in December we talked about hosting JavaScript on CDNs.
If a thousand applications that your browser has accessed use Dojo or Prototye (or ...), then you have many copies of the same file. Wouldn't it be nice to have these on a CDN and have that take care of it?
We even wanted versioning to be built in, a la maven:
JAVASCRIPT:
-
-
dojo.require("dojo.io.*", "0.3");
-
or:
HTML:
-
-
<script type="text/javascript" src="http://cdn/getlibrary?name=dojo-kitchen-sink&version=0.3"></script>
-
Well, it turns out that this isn't pie in the sky as AOL is now offering the Dojo Toolkit.
How did this come about?
AOL recently launched a site called I Am Alpha which builds on web standards and your IM network to build and host and lightweight widgets in customzied “container� pages. Think of it as a personalized homepage++; not only can you customize based on the widgets they provide, you can easily construct your own!
I Am Alpha “widgets� are just HTML, CSS, and JavaScript pages that conform to a new microformat. It’s standards-based personal publishing and aggregation on a grand scale. To that end, AOL has selected Dojo as one of the libraries available for use with the platform and put the Ajax build of Dojo 0.2.2 in their Content Distribution Network.
You can use the AOL CDN via:
HTML:
-
-
-
djConfig = {
-
// your local src/ directory is located at domain.com/path/to/local/dojo-0.2.2-ajax/src/
-
baseRelativePath: '/path/to/local/dojo-0.2.2-ajax/'
-
};
-
</script>
-
-
src='http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.2.2/dojo.js'></script>
-
-
// pull in the storage APIs
-
dojo.require('dojo.storage.*');
-
// or the JSON utilities
-
dojo.require('dojo.json');
-
</script>
-
Very cool indeed.
Category: The Ajax Experience
The Ajax Experience conference website has launched.
Ajaxian and NoFluffJustStuff Java Symposiums (NFJS) are pleased to announce The Ajax Experience 2006, the first ever conference exclusively for the Ajax community. This international event will take place May 10-12th at the beautiful Westin St. Francis Hotel in San Francisco, California.
The Ajax Experience will feature over 30 technically focused sessions across two (2) full days spanning four (4) parallel tracks covering effective web architecture, enterprise systems, and agile process. Featured speakers include: Jesse James Garrett - Father of Ajax; Brendan Eich, creator of JavaScript; Joe Walker, creator of DWR; Dion Almaer, co-founder of Ajaxian.com; Alex Russell, founder of The Dojo Toolkit; Ben Galbraith, co-founder of Ajaxian.com; Thomas Fuchs, creator of Script.aculo.us and many more.....
Super early bird discounts are available now. We encourage you to register as soon as possible because seating is limited and we anticipate a sold out show. Here is your opportunity to attend one event where you will find authors and industry notables in one place for the duration of The Ajax Experience 2006 show. This is a unique event you should want to be a part of. Be sure and register today as we expect to sell out!
Speakers
To us, the conference is all about the quality of the people that we can all meet up with. We are proud of our speaker list, which keeps growing.
- Alex Russell: Founder of The Dojo Toolkit
- Bill Scott: Creator of Rico, and Yahoo! Ajax Evangelist
- Bob Ippolito: Creator of MochiKit
- Brad Neuberg: Really Simple History library and the new dojo.storage work
- Bram Smeets: Interface21
- Brendan Eich: Creator of JavaScript
- Brent Ashley: Ajax Expert
- David Geary: JSF, Rails Expert
- Douglas Crockford: Creator of JSON
- Dylan Schiemann: Co-founder of The Dojo Toolkit
- Eric Pascarello: Author, Ajax in Action
- Glenn Vanderburg: JavaScript guru
- Greg Murray: Ajax/Servlet Lead at Sun
- Jason Hunter: Greasemonkey and Ajax
- Jesse James Garrett: Father of Ajax, Adaptive Path
- Joe Walker: Creator of DWR
- Jonathan Hawkins: Microsoft Atlas Lead
- Max Carlson: OpenLaszlo and Ajax
- Michael Mahemoff: Creator, Ajax Patterns
- Patrick Lightbody: WebWork 2, and Struts Ti committer
- Rich Manalang: Creator of MonkeyGrease, and Oracle
- Rob Gonda: Ajax Dev Journal and ajaxCFC author
- Rod Smith: IBM and tooling around Ajax
- Sam Stephenson: Creator of Prototype, and 37 Signals employee
- Scott Dietsen: CTO of Zimbra
- Thomas Fuchs: Creator of Script.aculo.us
Location
Westin St. Francis
335 Powell Street
San Francisco, CA 94102
More...
Check out the conference website for more information. We will have some cool new announcements to make soon regarding more great speakers, and other perks for attendees.
Cheers,
The Ajaxian Team
Category: JavaScript, Utility, Examples
Peter-Paul Koch has created a new script which implements getElementsByTagNames.
HTML has several related elements with distinct tag names, like h1-h6 or input, select and textarea. getElementsByTagName works only on elements with the same tag name, so you cannot use it to get a list of all headers or all form fields.
The getElementsByTagNames script (note the plural "names") takes a list of tag names and returns an array that contains all elements with these tag names in the order they appear in the source code. This is extremely useful for, for instance, my ToC script, which needs all h3s and h4s in the document in the correct order.
I'd have loved to add this method to the Node prototype, but that's impossible in Explorer and Safari. Therefore I use it as a normal function until all browsers expose their W3C DOM prototypes.
Examples
JAVASCRIPT:
-
-
// 1
-
var headerList = getElementsByTagNames('h1,h2,h3,h4');
-
-
// 2
-
var element = document.getElementById('test');
-
var formFieldList = getElementsByTagNames('input,select,textarea',element);
-
Implmentation
(from quirksmode)
JAVASCRIPT:
-
-
function getElementsByTagNames(list,obj) {
-
if (!obj) var obj = document;
-
var tagNames = list.split(',');
-
var resultArray = new Array();
-
for (var i=0;i<tagNames.length;i++)
-
{
-
var tags = obj.getElementsByTagName(tagNames[i]);
-
for (var j=0;j<tags.length;j++)
-
{
-
resultArray.push(tags[j]);
-
}
-
}
-
var testNode = resultArray[0];
-
if (testNode.sourceIndex)
-
{
-
resultArray.sort(function (a,b) {
-
return a.sourceIndex - b.sourceIndex;
-
});
-
}
-
else if (testNode.compareDocumentPosition)
-
{
-
resultArray.sort(function (a,b) {
-
return 3 - (a.compareDocumentPosition(b) & 6);
-
});
-
}
-
return resultArray;
-
}
-
Category: Ruby, Showcase, Calendar
Spongecell is the latest in the long line of Ajax calendars. Its built on Ruby on Rails and uses the scriptaculous goodies, but the coolest feature is the "spongebar". It takes a natural English pharse and figures out what appoitment to add to your calendar. So you can type in "meet over $5 flavored coffee at Starbucks 4 pm tomorrow" and it figures things out and adds the appropriate appointments.
The interface seemed nice and responsive and fairly clean. Drag and drop seemed to be well used, though I wasn't sure about some of the effects.
Other featuers include:
- easy mobile interface
- iCalendar import/export and RSS feeds
- simple, intuitive UI
Btw, there is a launch party in San Francisco on Wednesday if you are in the area.
Category: HTML, Editorial
Edd Dumbill got down and wrote a two-part series on The future of HTML
In this two-part series, Edd Dumbill examines the various ways forward for HTML that Web authors, browser developers, and standards bodies propose. This series covers the incremental approach embodied by the WHATWG specifications and the radical cleanup of XHTML proposed by the W3C. Additionally, the author gives an overview of the W3C's new Rich Client Activity.
In Part 1, Edd focuses primarily on two specifications being developed by WHATWG: Web Applications 1.0 (HTML5) and Web Forms 2.0.
In
>Part 2, Edd focuses on the work in process at the W3C to specify the future of Web markup.
WhatWG and HTML 5
The first part discusses the ideas that came out of the pragmatic WhatWG:
- HTML 5
- Web Forms 2.0
- Canvas
The second part discusses the ideas from the W3C group:
- XHTML 2
- XForms
- Web APIs
- Web Application Formats
Edd finishes comparing the two:
In these two articles, I've presented the salient points of both WHATWG's HTML 5 and the W3C's XHTML 2.0. The two initiatives are quite different: The grassroots-organised WHATWG aims for a gently incremental enhancement of HTML 4 and XHTML 1.0, whereas the consortium-sponsored XHTML 2.0 is a comprehensive refactoring of the HTML language.
While different, the two approaches are not incompatible. Some of the lower-hanging fruit from the WHATWG specifications is already finding implementation in browsers, and some of WHATWG's work is a description of de facto extensions to HTML. Significant portions of this, such as XMLHttpRequest, will find its way into the W3C's Rich Client Activity specifications. WHATWG also acts as a useful catalyst in the Web standards world.
Looking further out, the XHTML 2.0 approach offers a cleaned-up vocabulary for the Web where modular processing of XML, CSS, and ECMAScript is rapidly becoming the norm. Embedded devices such as phones and digital TVs have no need to support the Web's legacy of messy HTML, and are free to take unburdened advantage of XHTML 2.0 as a pure XML vocabulary. Additionally, the new features for accessibility and internationalization make XHTML 2.0 the first XML document vocabulary that one can reasonably describe as universal, and thus a sound and economic starting point for many markup-based endeavors.
As with its past, the future of HTML will be varied -- some might say messy -- but I believe XHTML 2.0 will ultimately receive widespread acceptance and adoption. If it were the only XML vocabulary on the Web, there might be some question, but as browsers gear up to deal with SVG, XForms, and other technologies, XHTML 2.0 starts to look like just another one of those XML-based vocabularies.
What really matters of course, is implementations. Specifically, what will IE implement. An IE with canvas and full SVG support would be fantastic... but maybe not likely :(
