The Future of JSON

Tagged:  

I am a huge supporter of JSON as a means of communicating with the server side in an Ajax application (you can use JSON as a means of communication on all tiers of an application using a library, but I'm going to mainly focus on the client side for this post). I was looking into the future of JSON and found two great posts by John Resig.

The first is about the need for native JSON support.

The post goes into a lot of detail about the performance benefits of JSON and has some great code samples.

Below is the summery excerpt from the post.

The current, recommended, implementation of JSON parsing and serialization is harmful and slow. Additionally, upcoming standards imply that a native JSON (de-)serializer already exists. Therefore, browsers should be seriously looking at defining a standard for native JSON support, and upon completion implement it quickly and broadly.

To get the ball rolling, I recommend that you vote up the Mozilla ticket on the implementation, to try and get some critical eyes looking at this feature, making sure that it's completely examined and thought through; and included in a browser as soon as possible.

You can read the full post here.

The second post is about the current state of JSON and goes into detail about ECMAScript proposals for the API.

Below is an excerpt from the post about the Mozilla implementation of native JSON.

Mozilla Implements Native JSON - Mozilla was the first to implement native JSON support within it's browser. Note, however, that this is not a web-page-accessible API but an API that's usable from within the browser (and by extensions) itself. This was the first step needed to implement the API for further use.

Here is an example of it in use (works within an extension, for example):

var nativeJSON = Components.classes["@mozilla.org/dom/json;1"]
    .createInstance(Components.interfaces.nsIJSON);
nativeJSON.encode({name: "John", location: "Boston"});
// => '{"name":"John","location":"Boston"}'
nativeJSON.decode('{"name":"John","location":"Boston"}');
// => {name: "John", location: "Boston"} 

You can read the full post here.

Hopefully the future will have native support for JSON. As usual John does a great job on the post and if you don't have John's blog on your feed reader I recommend adding it (he is a very good Ajax development reference).

Web-based PDF Viewer

Have you ever wanted to make a PDF available by embedding it into a web page? Well now you can with Vuzit.

Below is how the makers of the application describe it.

Vuzit is a web-based universal office document viewer you can embed in any web page to help maintain consistent branding and site navigation. It provides document security and increases revenue by improving accessibility and user experience.

One of the biggest advantages is the protection of stolen data. It makes it more difficult to steal content as it can't be downloaded.

The below code is an example of how you would code a basic viewer.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="http://vuzit.com/stylesheets/Vuzit-2.1.css" rel="Stylesheet" type="text/css" />
    <script src="http://vuzit.com/javascripts/Vuzit-2.1.js" type="text/javascript"></script>

    <script type="text/javascript">
      // Called when the page is loaded.  
      function initialize()  {
        
        vuzit.Base.apiKeySet("ApiKey");
        var viewer = new vuzit.Viewer(document.getElementById("vuzit_viewer"));
        viewer.setUrl("http://www.welcomingcenter.org/documents/PMP.pdf", { zoom: 1, page: 2 });
      }
    </script>

  </head>
  <body onload="initialize()">
    <div id="vuzit_viewer" style="width: 650px; height: 500px;"></div>
  </body>

Currently the API only supports PDF files, but more formats will be added in the near future.

You can get more information and get more code samples at vuzit.com

Prototype 1.6.0.2 Cheat Sheet

Tagged:  

A new cheat sheet was posted today over at the Prototype blog that is current with all the updates in the recent release of Prototype version 1.6.0.2. Kangax, the author of the cheat sheet, even color coded deprecated 1.6 methods in red.

In the event that this is the first time you've heard of the Prototype 1.6.0.2 release, it happened a few days ago. It contains some bug fixes and performance enhancements, as well as official support for Opera 9.

Click here to read about [and download] the cheat sheet.

Cross Browser Sound - Flash Only as a Last Resort

Tagged:  

After creating World of Solitaire and seeing how much of a success it was, I soon looked at what my next JavaScript game would be.

Although I hadn't made a decision yet, I knew that I wanted this game to have sound.
I also knew that I didn't want to use Flash.

So thus began that adventure of looking into how the different browsers played sound, without Flash or other plugins.

Turns out many browsers have support for sound built in.
Opera for example supports the WHATWG proposed Audio object, while IE has the proprietary bgsound attribute.

I decided that I would write up some JavaScript that would use the built in browser support for sound playing whenever possible, falling back to plugins and flash only as a last resort.

For a demo and the code check out: http://www.telparia.com/browsersoundtest/

Just use View->Source to see the code.
The guts of it are located here: http://www.telparia.com/browsersoundtest/js/Sound.js

You'll see some other JS files such as P.js
The sound engine itself only needs P.js as a way to detect browser platform.

The other files including the YahooUI are not needed for the Sound.js file to work.

I haven't actually used this code in a production environment yet, but I have tested it and it works in the following browsers:
* - Opera 9.23 on Windows XP [Audio object]
* - Opera 9.51 beta 3 on Linux (can't force stop) [Audio object]
* - IE 6 on Windows 2000 [bgsound]
* - IE 7 on Windows XP [bgsound]
* - Opera 8.53 on Windows XP [iframe embed]
* - Safari 3.0.2 on Windows XP [embed]
* - Firefox with plugin for audio/x-wav [embed]
* - Anything with a plugin for application/x-shockwave-flash [flash]

I don't have access to a Mac, so I'm not sure how it behaves on that platform.

Also, it's a little slow to start the sound as it is loaded into the browser. However after it is cached, it performs quite well indeed.

I welcome any bug reports or suggestions or changes. I some day intend to use this code in my next web game :)

Ajaxonomy's del.icio.us Spy - Released!

Tagged:  

You are probably familiar with Digg Spy, but I was very surprised when I found out that there was no similar application for del.icio.us (if you are not familiar with del.icio.us it is a great social bookmarking site).

So, we at Ajaxonomy we decided to make our own del.icio.us spy application. The application allows you to see the latest bookmarks being added to del.icio.us so that you can find great new sites. The application also includes links to help make it easy to share what you find with others.

The application allows you to filter results (i.e. type in "web" and you will only see links containing the word web) and to be notified (via sound) when new items are added. The application also allows you to pause the items that are shown so if you find something you like you can see it for a while.

You can go to the application by clicking here. The application will also be available in the Ajaxonomy Labs section on the right bar of this blog.

As with all the applications in the Ajaxonomy Labs section, this application is open source and you can download the source code here.

Cross Browser Sound in JavaScript

When working on an upcoming project I had the need to play sound through JavaScript. The method had to be cross-browser compatible, so I couldn't use any IE only calls.

Happily, I found a nice API called SoundManager2 which uses Flash to play the sound and is called through JavaScript. The API is very easy to use and below is a sample of how to use it.

The below code would be put inside the head tag of your web page.

<script type="text/javascript" src="soundmanager2-jsmin.js"></script>
<script type="text/javascript">

soundManager.url = 'soundmanager2.swf'; // override default SWF url
soundManager.debugMode = false;
soundManager.consoleOnly = false;

soundManager.onload = function() {
  // soundManager is initialised, ready to use. Create a sound for this demo page.
  soundManager.createSound('aDrumSound','button-0.mp3');
}</script>

The part of the above code that you will be most interested in is the last line. The soundManager.createSound('aDrumSound','button-0.mp3'); is what actually loads the sound file.

The below code will cause the sound to play.

soundManager.play('aDrumSound');

You can go to the project page by clicking here and get more information about the API. Also, you can download the files needed to use the API (including documentation and demos) here.

The library would be very useful in many applications including JavaScript games. If you create any cool applications using the API I would love to hear about it. You can post a blog entry about it when you create a free account (once you login just click on "Create content" => "Blog Entry") on this blog.

Will the Real IE Please Stand Up?

Tagged:  

Having read Chris Wilson's (IE Platform Architect) explanation of Microsoft Internet Explorer 8's handling of compatibility modes, you just have to laugh--or cry--in exasperation. After years of almost encouraging sloppy web pages, IE 8 has gotten standards religion, almost. There will now be three (count 'em!) modes in IE:

1. "Quirks" mode. All garbage written for IE 5.5 and older is tolerated.
2. Semi-compatibility mode. Any page with a <DOCTYPE> declaration will provide the not-quite-standards-compliant mode offered in IE 6 and 7.
3. Compliance mode (Bullwinkle: "This time for sure!"). Developers who want the latest in standards compliance, at least those standards that Microsoft wants to support, can use a <meta> tag to tell IE 8 that they want as much standards compliance as they can get. You can read the gory details here.

Does this mean that we will get a new compatibility mode for each new version of IE? Mozilla fans, rejoice! By the time Microsoft gets to version 10, the IE browser is almost guaranteed to die under the weight of its own bloat; I mean Windows Vista will run faster on a 486! People will leave en masse to another browser just to get decent responsiveness. Which will, ironically, finally ensure that the Web does have a chance at becoming unified under a cohesive set of standards.

Cornerz v0.2 - A Canvas/VML jQuery Plugin

Jonah Fox has released a jQuery Plugin that will add those coveted curvy corners to your site with the use of Canvas/VML.

Usage:
$('.myclass').curve(options)

Options include:
* radius
* borderWidth
* background
* borderColor
* corners ("tl br tr bl"). Specify which borders to draw

Example JavaScript

$('h1').cornerz({radius:40, borderWidth: 0, corners: "tl"})

Example HTML

<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>

Result

The corners are antialiased and load fast, partially do to the script only being 4K - uncompressed. There is a known issue with IE having trouble with odd height values. Jonah's workaround is to use padding-bottom:1px for elements with odd heights.

* Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows
- Opera 9 Windows/Linux

Visit the Cornerz homepage to view some demos or click here to see the source.

Error Handling in JavaScript

Tagged:  

This article from Clientside discusses three types of error handling in JavaScript:

  • Graceful: if possible, just ignore the error and continue with some default state or without a meaningful value
  • Debug: throw a warning to the dbug.log method but continue otherwise
  • Break: Either explicitly throw an error or (more often) just let the error that is thrown at runtime be thrown

Graceful Examples
Graceful degradation includes some default behavior that occurs when data is missing or an expected result does not occur.

this.id = this.options.id || 'StickyWin_'+new Date().getTime();

A common practice of graceful error handling is to include Try/Catch statements

getContent: function(){
    try {
        new Ajax((this.options.ajaxLink || this.options.observer.href), $merge(this.options.ajaxOptions, {
                onComplete: this.show.bind(this)
            })
        ).request();
    } catch(e) {
        dbug.log('ajax error on PopupDetail: %s', e);
    }
}

Debug Example - warning the user

var ln = this.options.ajaxLinks.length;
if(ln <= 0) ln = this.options.details.length;
if (this.options.observers.length != ln)
    dbug.log("warning: observers and details are out of sync.");

Break Example - toss that exception

ret = Date.$months[month - 1] || false;
if (!ret) throw new Error('Invalid month index value must be between 1 and 12:' + index);

Read the full post over at Clientside

A Study of Ajax Performance Issues

Tagged:  

Coach Wei has posted an interesting study of Ajax performance issues, specifically addressing the following issues:

1. Array performance on all browsers in general
2. HTML DOM performance in general
3. Calculating Computed Box Model and Style
4. FireFox: “eval”, Object Creation and “in” Operation
5. “String” Manipulation Performance on IE
6. Safari: “pop” Operation Performance

The article reviews data captured by Robert Buffone at RockStarApps and draws some interesting conclusions.

Visit Couch Wei's blog to read the full study.

Syndicate content