This is part 2 of a series of technical posts documenting some of the interesting work and technologies we’ve used to power the new interface (see also part 1, Instant notifications of new emails via eventsource/server-sent events). Regular users can skip these posts, but we hope technical users find them interesting.As dynamic websites constructed entirely on the client side become de rigueur, there are a number of templating languages battling it out to become the One True Way™ of rendering your page. All follow essentially the same style: introduce extra control tags to intersp...

A few days ago, this video hosted by metacafe popped up on digg, explaining how to increase site download times by tweaking your browser settings to increase connection parallelism. To explain why this works, let’s step back a bit to discuss how browsers manage server connections.In building any application, developers are often required to make ‘utilitarian’ choices. Pretentiously paraphrasing Jeremy Bentham, ‘utilitarian’ describes an approach that ‘does the greatest good for the greatest number.’ Many times, sacrifices in performance are made...

It's an interesting time to be working on the frontend now. We have new technologies such as HTML5, CSS3, Canvas and WebGL; all of which greatly increase the possibilities for web application development. The world is our oyster!However, there's also another trend I've noticed. Web developers are still stuck in the request/response mindset. I call it the 'click and wait' approach - where every UI interaction results in a delay before another interaction can be performed. That's the process they've used their entire careers so it's no wonder most developers are blinkered to the alternatives.Spe...

In my previous posts, we discovered How to Use HTML5 File Drag & Drop, and Open Files Using HTML5 and JavaScript. Now we have a valid set of files, it possible to upload each one to the server. The process occurs asynchronously in the background so the user can complete other on-page tasks while it occurs.The HTMLLet’s examine our HTML form again:view plainprint?<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">  <fieldset>  <legend>HTML File Upload</legend>  ...

I’ve been smashing my head against this all day – but I finally got something working consistently and reliable, so I better damn well document it. This is as good a place as any, and hopefully it will be useful to others.I needed to make an Ajax call, so I turned to my good friend XMLHttpRequest. One wrinkle was that I needed to pass in a parameter to it… so I tried:var test = "bar";req = new XMLHttpRequest();req.open("GET", myURL, true);req.foo = test;req.onreadystatechange = function() { if (this.readyState != 4) return; if (this.status == 200) { aler...

A chat application allows users to communicate with others via texting, messaging, video and audio conferencing. While developing a web application web masters always think that they should communicate with their audience directly rather than emails, phone or contact forms, or chat applications can be used in various web applications such as social networking sites, business sites for live support etc.We understand the needs of webmasters and that’s why we searched and explored myriad of Google’s pages to find out these 5 free open source chat applications, webmasters can us...

Step 1 - AJAX file uploadAJAX file upload tutorialFirst of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which imitates the AJAX process, but uses a normal upload process and iFrames.The concept: Create a simple HTML form for file uploadSet the target to an iFrame which is on the actual page but not visibleC...