Streaming Streaming means to send content part by part at some intervals in the same request. Or in other words, the client is able to process the response part by part, instead of waiting for the whole transfer to complete. The best tool for streaming over the http protocol is SSE or Server Sent Events. But SSE is not available IE 10 so far. While looking for a clean solution (that is one without much [...]

Server sent events When running a long serverside task inside a web application it becomes very useful, if not necessary to report the progress of that task in realtime to the clientside, that is the browser. Earlier there was no easy way to do this and hacks had to be constructed to achieve such a realtime notification. Classical solutions include ajax polling, loading in a iframe with raw output, or even flash. But html5 brings [...]

Rope In this experiment we shall make a rope like thing in box2d. There is no rope like structure that box2d supports directly. But if multiple small units are connected together at their edges using a revolutejoint, then it was act somewhat like a rope. Lets take a look Please upgrade your browser You can move any part of the rope using your mouse. Now in this rope, higher the number of parts in the [...]

Distance In the previous post on mouse joints we learned how to interact with box2d objects using the mouse. Now its time to take a look at another joint in box2d, the distance joint. Distance joint connects 2 bodies maintaining a fixed distance between them, its like metal wire connecting the 2 bodies, such that the wire would neither expand nor shrink, but allow the bodies to rotate about the point of joint. Lets take [...]

Mouse Joint Out of the many joints that box2d has, one is mouse joint. It is not used in physics simulations, but helps to make the physics world interactive by making a body move towards a specific point, like the mouse coordinates for example. So objects can be picked up, dragged etc by the user. Lets take an example Please upgrade your browser Pickup an object by clicking it and drag it. It will follow [...]

Html5 Audio The html5 audio element provides a simple api to play sound files like mp3, ogg, wav etc. It can be created by putting an audio tag in the html or by creating an instance of the Audio object in javascript. Here is a quick example of using it from within javascript code. That much of code would load the file specified in the src path and play it. There are additional functions and [...]

The Audio element of html5 does not yet have a stop function, but has a pause function. So here is a simple trick to add a stop function to your Audio elements by modifying the prototoype of the class. The function would first pause the audio element, then would set the seek position to 0.0 which is the beginning. Can be used comfortably like this The technique can be used to add more useful functions [...]

Sometime back I was making a browser based game in the html5 canvas tag which had some audio too. The html5 audio tag is an easy option to add sound/music to any webpage. It can play variety of formats like wav, ogg and mp3. However format support itself varies across browsers. The audio element can be directly added to html in the form of a tag The src attribute holds the path/url to the sound [...]

Demo First lets play the game that we shall be making in this tutorial. Its called Fruit Hunter. Tested on Chrome and Firefox. Please upgrade your browser Click in the game then start using the arrow keys to control the monkey. Press the left, right and up arrow keys to make the monkey move and jump. Do not fall off the stands and try to collect as many apples as possible. More apples you collect, [...]

Recently the adoption of HTML5, CSS3 and new JS APIs like Geolocation, Websockets, Web Workers, etc. has been quite high which has generated a huge drive to learn these new technologies among frontend web developers. There has been quite a few startups or websites coming up to make the  learning of these new technologies fun and easy. TheCodePlayer is one of them. TheCodePlayer is really amazing and exciting. The concept behind it is very simple too! [...]