This post doesn’t really have anything valuable to contribute, just some cool console trick.

Have you ever wanted to plot out a chart, very quickly ? Did you ever had an urge to visualise a bunch of numbers without having to use a charting api or copy pasting the data in a spreadsheet ? If you did then you might even learn something today :)

Here is a simple , yet neat way to plot out bunch of numbers in chrome console as a** horizontal bar chart.**

Introduction #

Isochrones are curves of equal travel time from a certain point of origin, another way of saying this would be that an Isochrone is an isoline for travel time, if the weighting factor is changed form time to distance, then the resulting curve us called an Isodistance.

In this post I will present a rough way to create an Isochrone and an Isodistance using google’s directions API.

HTML5 Geolocation is a feature which allows the browser on a computer or a mobile phone, to acquire the position from the wifi,2g/3g/4g network or GPS.

The HTML Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it. The simplest way to use it through navigator.geolocation object ``` if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition);

So if you are a JavaScript geek and haven’t yet heard,(if every one is listening to ECMA announcements, who’s gonna drink beer :) ) ECMA 6 feature set has been drafted,its feature set is frozen, it is mostly being refined now. You can already program in it and compile it to current JavaScript . The JavaScript frameworks AngularJS and Ember.js will be based on it (with ways to opt out). Again, via cross-compilation.

This is second part of the tutorial about getting started with Raphael.js. To see this first part go here.

Writing Text with Raphael #

Some code first ;)

var canvas = Raphael(0, 0, 250, 250 );

var t1 = canvas.text(50, 50, *"Some text Goes here"*);

var t2 = canvas.text(60,90,"First line \n Second Line \n Third line");

var t3 = canvas.text(214, 140, "1079").attr({"text-anchor":"middle",'font-size':16,"font-family":"arial","fill":"#fff"});

In the above examples canvas.text will create a simple text element at 50,50. Strangely VML /SVG do not have Line breaks therefore the programmer is responsible for creating new lines,in most cases appending** ‘\n’** does the trick.

Raphael.JS is a SVG/VML library which helps you to create quick vector shapes and images. Its very small and compact (only 86kb),easy to use,well documented and works in all browsers and yes even IE. Here is a list of all major browsers this library works on: Chrome 5.0+ Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+

,finally its distributed under MIT license. In this tutorial ,I intend to introduce basics of this library and help you get started.

I love JavaScript and code a lot in it .Since I code, I also encounter problems and bugs from time to time and therefore need a Debugger and a debug mechanism to view whats going on.

In good old days when I learned this language, I used JavaScript’s inbuilt alert mechanism to view the value of a variable or a property of an object. This was a terrible mechanism, calling alert was blocking, one had to press OK to continue and if you had to take a look inside an array then well it was emotionally an overwhelming task is all I would say here.

HTML5 WebSockets, defines a full-duplex communication channel that operates through a single socket over the web. WebSocket is not just another incremental enhancement to conventional HTTP communications, it represents a large advance, especially for real-time, event driven web applications.

Normally when a browser visits a web page, an HTTP request is sent to the web server that hosts that page. The web server acknowledges this request and sends back the response. In many cases—for example, for stock prices, news reports, ticket sales, traffic patterns, medical device readings, and so on—the response could be stale by the time the browser renders the page.

Here is another of many JavaScript based Image Carousel, I had seen many similar to these made in SilverLight and Flash, I came across a wonderful carousel made in SilverLight sometimes back which was very fluid in behavior and could easily be customized and configured to take various shape and form.

I have managed to port it to JavaScript, it works best on chrome or FF, hope this would be fun to play with.

One of the amazing features of i-phone user interface is smooth panning/scrolling animation.

I-phone “List Scrolling” perhaps gives a very funky and usable List –View to its users and allows them to scroll up and down the interface without any need of a scroll bar.

This interface is sensitive to the push speed and also shows traces of resilience.

I have been experimenting with various techniques to bring out similar effect using JavaScript and HTML, I am not quite sure if this would be useful in its present form but with some modifications may be this sample could prove its worthiness somewhere.