Web Info & Tutorials

Welcome to the major leagues of debt. Collateralized debt obligations, almost always referred to as a CDOs, are horrendously complicated deals that often leave anyone without a MBA wondering what was put into ... via Fox News

We are having a special week at Ajaxian. Ben and I are giving an Ajax talk at JavaOne this week, and decided to put a little video from Ajax pioneers. As we worked out what we wanted to do, we asked the pioneers for a little time to do an interview. Although only a piece of the interview will be used in the live presentation, we wanted to get the full interviews for the community here.

During the week you will hear from:

• Sam Stephenson of Prototype
• Bruce Johnson of GWT
• Alex Russell of Dojo
• John Resig of jQuery

On Wednesday, we will have a special video that features Ben and I having some fun with a new type of Ajax application.

Let’s cut to the chase, and listen in to Sam Stephenson. Although we couldn’t get to him in person, he kindly recorded himself via his laptop. My voice quality is poor, but we are all hear to listen to his thoughts on:

• The future of Prototype
• What excites him about new versions of Prototype, and what problems are they trying to solve
• Thoughts on the current crop of browsers, and what he wants to see

In the interview he discusses pdoc, a new inline documentation tool, Sprockets, a tool to help package Prototype, and new event delegation techniques.

John must have had some downtime on Sunday afternoon, as he implemented an HTML parser in JavaScript. The library, that you can play with via this demo, lets you attack HTML in a few ways:

A SAX-style API

Handles tag, text, and comments with callbacks. For example, let's say you wanted to implement a simple HTML to XML serialization scheme - you could do so using the following:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var results = "";
3.  
4. HTMLParser("<p id=test>hello <i>world", {
5.   start: function( tag, attrs, unary ) {
6.     results += "<" + tag;
7.  
8.     for ( var i = 0; i <attrs.length; i++ )
9.       results += " " + attrs[i].name + '="' + attrs[i].escaped + '"';
10.  
11.     results += (unary ? "/" : "") + ">";
12.   },
13.   end: function( tag ) {
14.     results += "";
15.   },
16.   chars: function( text ) {
17.     results += text;
18.   },
19.   comment: function( text ) {
20.     results += "<!--" + text + "-->";
21.   }
22. });
23.  
24. results == '<p id="test">hello <i>world</i></p>"

XML Serializer

Now, there's no need to worry about implementing the above, since it's included directly in the library, as well. Just feed in HTML and it spits back an XML string.

PLAIN TEXT

JAVASCRIPT:

1.  
2. var results = HTMLtoXML("<p>Data: <input disabled/>")
3. results == "</p><p>Data: <input disabled="disabled"/></p>"
4.  

DOM Builder

If you're using the HTML parser to inject into an existing DOM document (or within an existing DOM element) then htmlparser.js provides a simple method for handling that:

PLAIN TEXT

JAVASCRIPT:

1.  
2. // The following is appended into the document body
3. HTMLtoDOM("<p>Hello <b>World", document)
4.  
5. // The follow is appended into the specified element
6. HTMLtoDOM("<p>Hello <b>World", document.getElementById("test"))
7.  

DOM Document Creator

This is a more-advanced version of the DOM builder - it includes logic for handling the overall structure of a web page, returning a new DOM document.

A couple points are enforced by this method:

• There will always be a html, head, body, and title element.
• There will only be one html, head, body, and title element (if the user specifies more, then will be moved to the appropriate locations and merged).
• link and base elements are forced into the head.

You would use the method like so:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var dom = HTMLtoDOM("<p>Data: <input disabled/>");
3. dom.getElementsByTagName("body").length == 1
4. dom.getElementsByTagName("p").length == 1
5.  

One place that you could use this API would be on the server-side. For example, using Aptana Jaxer. Although, you could also interface directly to Java, or just use the Mozilla utilities directly.

The image above is the 124 kilobyte Prototype library embedded in a 30 kilobyte 8 bit PNG image file.

Jacob Seidelin had some fun this weekend it appears and created a script that can read in JavaScript code from images. To do this, he used the canvas getImageData() method.

Here are the detailed steps:

The first step was to find the best image format for the job, that means the one that gives the best compression while still being lossless. Here on the intertubes, we don't get a lot of image format choices and since JPEG is lossy, we're down to GIF and PNG.
For PNG we have two options, 24 bit and 8 bit. Using 24 bit RGB colors, we can store 3 bytes of data per pixel while 8 bit indexed colors only gives us 1 byte per pixel.
A quick test in Photoshop tells us that a 100x100 image with random 24 bit colored noise compresses down to about 20 KB while a 300x100 image with random 8 bit monochromatic noise compressed down to just 5 KB. A regular 8 bit GIF comes in a bit heavier than the 8 bit PNG, so we go with the PNG option.

Now we need to convert our Javascript file into color data and stuff it in a PNG file. For this purpose, I crafted this quick and dirty PHP script, which reads the Javascript file, creates a PNG image file and simply lets each pixel have a value 0-255 corresponding to the ascii value of the character in the script.

I ran into a problem here, since the image is created as a truecolor image and we need it to be 8 bit indexed and PHP won't make an exact conversion. I guess there are ways to create a palletted image from scratch in PHP/GD, but I haven't looked into that yet. The solution for now is to simply run the generated image through something like Photoshop and convert it to 8 bit there.

So now we have the Javascript all nice and packed up in a compressed PNG file and now we need to get it out again in the client. Using the canvas element, we simply paint the picture using drawImage() and then read all the pixel data using getImageData(). This data is given to us as a large array of values, where each pixels takes up 4 elements (RGBA), so we just take every 4 value and tack them all together into an eval()-ready string. And we're done.

And the reading function is here.

NOTE: This is for fun, and isn't meant to be used in the real world. That being said, see it at work in the mario game.

On May 28-29 2008, we are having the largest Google event of the year: Google I/O.

Ben and I are talking in the Ajax and JavaScript track, which has other great Ajax content with speakers like Bruce Johnson and the GWT team, Mark Lucovsky and the AJAX APIs team, and Alex Russell of Dojo. There are also other tracks at the event covering APIs & Tools, Social, Maps & Geo, and Mobile.

I wanted to get the Ajaxian community involved, and then I saw some free invites on Mashable so I asked the I/O team if we could get some. They kindly obliged and we have 10 free passes!

To get one, please email or twitter with a reason why you should get a free ticket. The show is in San Francisco, so please make 100% sure that you can be there for those dates. Submissions can come in before midnight tonight, pacific time, and then selection will begin.

Finally, Flight of the Conchords will be playing at the event, so It's Business Time:

Kristopher William Zyp has cursive a place on how to ingest YSlow to dissect the action of JavaScript applications.

To see what aspects of a Web covering you requirement to improve, you staleness right dissect the components of the application. This article looks at how you crapper ingest the Firebug spreading to Firefox and the YSlow add-on to helper a Web application. After you establish these tools, enter to the place that you are nonindustrial and utter YSlow on the Firefox position bar. This opens the YSlow programme in Firebug. Now utter the Performance button. YSlow performs an psychotherapy of your covering and provides a inform on the assorted parts of the meshwork designate instance of your application, as Figure 1 shows.

Most of the concepts mentioned are derivative from the 10 rules circumscribed by Yahoo! for meliorate scheme covering action but Kristopher breaks downbound whatever of the concepts into examples and provides account on how to see the data. The account of the FireBug profiler is especially adjuvant to those meet reaching into the Ajax utilization expanse and poverty a meliorate discernment of how to behave their code: