Reading binary files using Ajax


Over at Nagoon97’s Weblog they have an interesting post on reading a binary file in JavaScript. The post explains how the code was taken from another post and a comment that made the code work cross browser. With the trend of Ajax development going toward moving as much to the client as is prudent it is good to have a method for reading binary files should the use ever arise.

Below is an excerpt from the post.

So I put them all together in this BinFileReader function, which provides cross-browser support and helper methods to easily access the binary contents.


* BinFileReader: http://www.heypage.com/nagoon97/BinFileReader/BinFileReader.js

getFileSize() Return the file size
getFilePointer() Return the reading position
movePointerTo(iTo) Move the reading position to iTo.
movePointer(iDirection) Move the reading position in iDirection.
For all the following read functions,

- The reading position will move to the end of where the content is last read

- When iFrom is ommited, current reading position is used
readNumber(iNumBytes, iFrom) Read and return iNumBytes-byte number starting at iFrom.
readString(iNumChars, iFrom) Read and return iNumChars characters starting at iFrom.
readUnicodeString(iNumChars, iFrom) Read and return iNumChars unicoded characters starting at iFrom.


* Example:

var bmpFile = new BinFileReader(”image.bmp”);


var width = bmpFile.readNumber(4);

var height = bmpFile.readNumber(4);


* Demo:



You can read the full post here.

This script could be used to make some interesting applications, now if we could only write binary files to the system (I know that there would be a huge security hurdle to get pass). If you use this script then I would love to hear about your experience with it (as usual you can leave it in the comments or write a blog post about it using your free Ajaxonomy account).

Streaming Server Side Proxy in .NET

If you want to get XML data from a different domain you will need to use a server side proxy. While you could use JSON to get around this there are times when a JSON feed may not be available and a proxy must be used.

In the past I have written posts about creating such a proxy, however all of the example code was is PHP. Well, if you are a .NET developer then you are in luck, because the CodeProject has posted a tutorial on creating a Server Side Proxy in .NET.

Below is an excerpt from the post.

A Basic Proxy Such a content proxy is also available in my open source Ajax Web Portal Dropthings.com. You can see from its code from CodePlex how such a proxy is implemented. The following is a very simple synchronous, non-streaming, blocking Proxy:


public string GetString(string url)
        using (WebClient client = new WebClient())
            string response = client.DownloadString(url);
            return response;

Although it shows the general principle, but it's no where close to a real proxy because:

  • It's a synchronous proxy and thus not scalable. Every call to this
    web method causes the ASP.NET thread to wait until the call to the
    external URL completes.
  • It's non streaming. It first downloads the entire
    content on the server, storing it in a string and then uploading that
    entire content to the browser. If you pass MSDN feed URL,
    it will download that gigantic 220 KB RSS XML on the server and store
    it on a 220 KB long string (actually double the size as .NET strings
    are all Unicode string) and then write 220 KB to ASP.NET Response
    buffer, consuming another 220 KB UTF8 byte array in memory. Then that
    220 KB will be passed to IIS in chunks so that it can transmit it to
    the browser.
  • It does not produce proper response header to cache the response on the server. Nor does it deliver important headers like Content-Type from the source.
  • If external URL is providing gzipped content, it decompresses
    the content into a string representation and thus wastes server memory.
  • It does not cache the content on the server. So, repeated
    call to the same external URL within the same second or minute will
    download content from the external URL and thus waste bandwidth on your

So, we need an asynchronous streaming proxy that transmits
the content to the browser while it downloads from the external domain
server. So, it will download bytes from external URL in small chunks
and immediately transmit that to the browser. As a result, browser will
see a continuous transmission of bytes right after calling the web
service. There will be no delay while the content is fully downloaded
on the server.

You can read the full tutorial here.

This post not only shows you haw to make a basic server side proxy, but also shows you how to make it streaming. If you are a .NET developer looking to make a server side proxy, I recommend this post.

FirePHP - The Firebug Extension for PHP


If you have been doing any Ajax development using PHP on the server side you are probably already using Firebug to find JavaScript errors. Wouldn't it be nice if you could also capture the server side PHP in the Firebug? Well, FirePHP makes it possible to do just that.

FirePHP acts as a logger and below is a code sample of how you would write to the log.



/* NOTE: You must have Output Buffering enabled via
         ob_start() or output_buffering ini directive. */

fb('Hello World'); /* Defaults to FB_LOG */

fb('Log message'  ,FB_LOG);
fb('Info message' ,FB_INFO);
fb('Warn message' ,FB_WARN);
fb('Error message',FB_ERROR);

fb('Message with label','Label',FB_LOG);


function test($Arg1) {
  throw new Exception('Test Exception');
try {
} catch(Exception $e) {
  /* Log exception including stack trace & variables */

/* Will show only in "Server" tab for the request */


The key to using FirePHP is the use of the fb function which is available once you reference the fb.php file. In the function you pass in whatever you want to display and you can pass in variables that allow Firebug to capture the message as warnings, errors or logs. If you just want to log some information you would pass in FB_LOG or you can pass in FB_INFO for Firebug to display a message as info. If you pass in FB_WARN Firebug will treat it as a warning or if you pass in FB_ERROR it will treat it as an error.

You can read more about FirePHP and download the extension here.

I know I'm going to start really using this as it will help with development of many of the applications that we are working on for our Ajaxonomy Labs section. If you use FirePHP, I would love to hear your thoughts about it.

25 Web 2.0 Generators

So, you're just finishing the next great Web 2.0 app, but you still need a badge or logo for the application. Well, WebTracker.com has put together a list of 25 great tools to make your Web 2.0 fully Web 2.0. The list has everything from button makers to Web 2.0 domain name suggesters.

Below is an excerpt from the list.


  • MakeWords - MakeWords is a domain name generator that creates random words that you either supply or you don’t. It lets you know what domain name is available.
  • NameBoy - NameBoy creates domain names based on a word that you want in your domain. It then tells you what domain is available.
  • Dot-o-mator - Dot-o-mator is a web 2.0 domain name generator that allows you to select words and then have it combine them to form a domain name.


  • Favicon Generator - Favicon Generator takes an image that you upload and makes it into a favicon.
  • Favicon.cc - Favicon.cc allows you to create a favicon icon online without having to upload any file.
  • Favicon Editor - FaviconEditor allows you to upload a photo or you can create a favicon.


  • Gradient Maker - Gradient Maker allows you to generate a gradient of 3 types, with instant previewing so you get exactly what you had in mind.
  • Gradient Texture Generator - Gradient Texture Generator allows you to create up to 4 different types of gradients with any colors that you want.
  • Online Gradient Image Maker and Button Generator - This generator is the most in depth I’ve seen it has so many different options. It is a must see for any one.

You can see the full list here.

This list has some cool tools that are very useful if you are looking to make your application look fully Web 2.0, especially if you are not very artistic. If you have used any of the tools on the list I would love to hear your comments on them (as always you can leave them in the comments).

Wishlist for a great Ajax API


Over at Wait till I come! they have written a good post about a wishlist for a great Ajax API. The list is very interesting and if you are writing an Ajax API, then this is a good post to read.

Below is an excerpt from the post.

Designing a great Ajax API

As an example I will use the recently released Google translation API, point out its good parts and list things I consider missing. I will not go into the part of actually writing the API but instead explain why I consider the missing parts important. This is not an attack towards Google, I just really liked working with this API and wanted to have it a bit easier to use, so no hard feelings, I really take off my hat that you offer an API like that!

Here are the points I consider important when we’re talking about Ajax APIs in JavaScript (Ajax implies that but you’d be surprised how often a REST API is advertised as Ajax):

  • Good documentation
  • Usage examples to copy + paste
  • Modularity
  • Link results to entries
  • Offer flexible input
  • Allow for custom object transportation
  • Cover usability basics

Documentation and presentation

Let’s start with a positive: the documentation of the Google Ajax Language API is great. You have all the information you need on one page including copy and paste examples. This allows you to work through the API online, read it offline and even print it out to read it on a crowded bus without having to take out your laptop.

Tip: If you are offering copy and paste examples – which by all means you should as this is what people do as a first step – make sure they work! I learnt the hard way in my book Beginning JavaScript with DOM Scripting and Ajax that there is nothing more dangerous than showcasing code snippets instead of full examples – people will copy and paste parts of a script, try to run it and either email you that your code is broken or – even worse – complain in book reviews on Amazon. If you offer copy and paste examples make sure all of them work independently.

Google offer explanations what the API is, what you can do with it, a list of all the parameters and what they mean. This is great for a first-glance user. For the hard-core audience they also offer a class reference.

You can read the full post here.

I'm thinking of writing some Ajax APIs for some of the applications in our labs section and this post has some good information that I will be using for these APIs.

A Better Ajax Back Button - Part2

After a post that I wrote a few months ago on A Better Ajax Back Button, I received many comments. Many of the comments have asked for more information on the post and a working example.

In my previous post the code I used was done using JavaScript prototype objects. Because for some this is a bit more difficult to read I made this example as simple as possible to make it a bit easier to understand.

The below is the JavaScript portion of the code that is needed to accomplish the back button solution.

		function CheckForHash(){
				var HashLocationName = document.location.hash;
				HashLocationName = HashLocationName.replace("#","");
				for(var a=0; a<5; a++){
					if(HashLocationName != ('Show' +(a+1))){
				for(var a=0; a<5; a++){
		function RenameAnchor(anchorid, anchorname){
			document.getElementById(anchorid).name = anchorname; //this renames the anchor
		function RedirectLocation(anchorid, anchorname, HashName){
			RenameAnchor(anchorid, anchorname);
			document.location = HashName;
		var HashCheckInterval = setInterval("CheckForHash()", 500);
		window.onload = CheckForHash;

In the above code you will notice that the function RedirectLocation calls the RenameAnchor function then sets the value of the hash (if you read the original article I go into more detail about what an anchor and hash are) in the URL. It is important that the RenameAnchor function is called before setting the hash value as it is important that an anchor with the same value as the hash exists before changing the value in order for the back button trick to work. The next important thing is that an interval is set to call the CheckForHash function (this interval could be whatever you want, but the smaller the number the more responsive the back button will be to the user) which checks the hash value and depending on the value will display a div (in your application you could have the function different, but I just wanted to keep it simple by showing and hiding div's).

Below is the HTML portion of the code.

	<a id='LocationAnchor' name=''></a>
	<div id='linkholder'>
		<a href='javascript:RedirectLocation("LocationAnchor", "Show1", "#Show1");'>Display Option 1</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show2", "#Show2");'>Display Option 2</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show3", "#Show3");'>Display Option 3</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show4", "#Show4");'>Display Option 4</a><br />
		<a href='javascript:RedirectLocation("LocationAnchor", "Show5", "#Show5");'>Display Option 5</a>
	<div id='Show1' style='display:none;'>
		1st Option
	<div id='Show2' style='display:none;'>
		2nd Option
	<div id='Show3' style='display:none;'>
		3rd Option
	<div id='Show4' style='display:none;'>
		4th Option
	<div id='Show5' style='display:none;'>
		5th Option
	<div id='Intructions' style='display:block;'>
		Click on the above links to see different values, then use the back button to see your browsing history.

In the above code there is an anchor tag that will be renamed in the JavaScript to trick the browser into thinking that the anchor exists. We then have all of the links set to call the RedirectLocation function in order to make sure that the hash and anchor values are set correctly. Finally there are a series of div tags that hold various content and will be displayed or hidden.

That is pretty much all there is to the example. You can view the sample here. Or you can download the code here.

I have tested the script without any issues on Firefox and on Internet Explorer 7. It should work on Opera, Safari and earlier version of Internet Explorer and Firefox, but I have not had a chance to test on these browsers.

In my testing the code works with the back button, forward button and the refresh button. Plus pages where bookmarked correctly.

If you find a good use for this code I would love to hear about it (you can leave it in the comments or write a blog about it with your free Ajaxonomy account).

hi5 Launches Developer Platform


The social network hi5 has just launched their developer platform. hi5 is an extremely popular social network (the network is number 8 according to Alexa) and like MySpace or Facebook is a desirable social network to develop applications for.

Below is an excerpt from the release plan of the developer platform.

Monday, March 31st 04:30 PST - Release has progressed as planned, and we now have 53 applications approved for launch tomorrow. If you got us your userids before about midnight, you can access the platform on www.hi5.com now. Currently the platform is open only to whitelisted users. Release to the rest of our users will proceed as planned starting at 12:00 pm PST today. If you were late getting your application submitted or getting your ids whitelisted, not to worry, contact us at platform-help@hi5.com and we'll do our best to accommodate you as soon as possible.

The hi5 Platform is set to launch tomorrow. Details of the rollout plan are as follows.

We will rollout to percentages of our user base based on userid ranges. In addition to that we have implemented a user whitelist to allow developers with apps that are launching and hi5 developers to see the platform regardless of rollout percentage. If you are a developer with an app launching and have not yet sent us ids to whitelist for the launch please send your developers' hi5 ids to platform-help@hi5.com and we'll add them to the whitelist.

You can read the full release plan here.

If you are interested in developing an application for the hi5 developer platform you'll be glad to know that they are supporting the open social initiative. If you make a cool app for hi5 I would love to hear about it (you can leave it in the comments or write a blog about it on this blog using your free Ajaxonomy account).

Silicon Valley Google Technology User Group to host maps meeting


If you are interested in making a cool Google Maps mash-up the Silicon Valley Google Technology User Group will be hosting a maps meeting. Michael Geary will be the primary speaker at the session. Michael created the Primary Election Results Map application and is very knowledgeable about making a Google Maps mash-up.

The event is April 2nd (so this coming Wednesday) and starts at 5:30pm with Michael speaking at 6:30pm. The event will be held at the Googleplex.

You can register for the event here and you can read more about the event here.

Google Code University


If you're interested in learning more about Ajax development, distributed systems, web security, or C++/Java/Python and you haven't checked out Google Code University, you're missing out on a valuable educational resource on these topics and more.

Here's a sample video from the site:
Web 2.0 - AJAX - Creating a Rich User Experience

    Description: Incorporated AJAX is enabling the creation of applications with better functionality, usability, and an overall better user experience. This panel will discuss how desktop-like applications can be delivered via the browser with Ajax, the efficiency of developing such applications, and the importance of the GUI. They will also share their thoughts on highly successful applications and the shortcomings of using Ajax.

Also on the site, you'll find a series of Web Programming lecture slides provided by the University of Washington.

For these and other great resources, visit the Google Code University

Learning the Yahoo! User Interface Library


If you are a developer using the Yahoo! User Interfaces then you are always looking for good resources for learning more about coding with the library. You've probably already gone through a lot of the information on the Yahoo! Developer pages and perhaps you would like a good book about the library. Well, I have come across a book called Learning the Yahoo! User Interface Library.

Below is what you will learn from the book

  • Explore the YUI Library—utilities, controls, core files, and CSS tools
  • Install the library and get up and running with it
  • Handle DOM manipulation and scripting
  • Get inside Event Handling with YUI
  • Create consistent web pages using YUI CSS tools
  • Work with Containers—implementation, skinning, adding transitions, and tabs
  • Debug, maintain, and update applications with the Logger control
  • Examples included in the book:
  •     Calendar interface
  •     Autocomplete
  •     Creating panels
  •     Dialogs
  •     Custom tooltips
  •     Forms
  •     Split button
  •     TreeView Control
  •     Browser History Manager with Calendar
  •     Simple animation
  •     Custom animation
  •     Creating tabs and adding content dynamically
  •     Dragging and dropping
  •     Implementing sliders
  •     Logger at work
  •     Logging custom classes

The book retails for $44.99 and below is the information that you would need to pick it up at your local book store.

Language: English
Paperback: 380 pages [191mm x 235mm]
Release date: March 2008
ISBN: 1847192327
ISBN: 13 978-1-847192-32-5
Author(s): Dan Wellman
Topics and Technologies: Open Source, AJAX

You can read more about the book and purchase it here.

It is good to see more resources for great libraries like the YUI. If you have a chance to read the book, I'd love to hear your thoughts on it (you can leave a comment or blog about it on this blog using your free Ajaxonomy account).

Syndicate content