Featured

We have moved (Attention attention!!)

Dear Readers,

All good things come to an end only to start somewhere else! We have moved to our new dedicated Web address. This was long pending. So from now on most of the action will take place on the new address. All the new posts on Front End Web Development, JavaScript.. etc will be available on the new site.

While this blog will continue to exist and keep serving the legacy content, I may not be able to reply to comments here, but you can reach me on my new blog where I will be more active.

Happy Reading!!
Cheers..

Advertisements

5 Best JavaScript Editors: Developers Rank the Best Tools Worldwide

JavaScript has continued to grow in importance over the last decade. In fact, according to StackOverflow’s Insights, JavaScript has been the most popular programming language for the past 7 years, edging out popular languages including Python, C# and Java. The State of Javascript survey, which includes responses from over 20,000 developers, reveals that five JavaScript editors stand out accounting 95% of all usage!

1. Visual Studio Code

VSCode is the dominant leader in online JavaScript editors. Featuring cross platform support on Linux, macOS and Windows, VSCode has built in code completion for your node.js modules and JavaScript code. As expected with Microsoft, Typescript is a first class citizen. Git is seamlessly integrated, meaning you can make commits, reviews diffs and more in real-time all without leaving the editor. Visual Studio Code is a lightweight code editor that was built from the ground up for speed. Autocompletion goes beyond function completion and also offers documentation and function argument information as you develop. Microsoft has done an excellent job with community engagement and VSCode has a vibrant developer community creating powerful extensions which save additional time. Sought after features such as live preview and chrome debugging with devtools are easily accessible through the Visual Studio Marketplace. In addition, if you really want to get under the covers, the entire text editor source code is hosted on github as open source software.

2. Sublime Text

A commercial editor with a large user base, developers find the $80 fee for Sublime Text well worthwhile due to its speed (in part derived from it being written in C++). As with VSCode, there is a great developer and plugin community that has filled in the gaps creating a powerful editor environment for JavaScript. Often referred to as a midpoint between bloated IDE and lean editors such as VIM, Sublime opens files fast and leans on plugins via package control to make it a great experience for JS development. Leveraging Babel for intelligent syntax highlighting /smart code completion and gitgutter for diffs and pushes, Sublimelinter for seamless ESlint and JShint tie-ins makes Sublime a fast, capable and lightweight JavaScript editor.

Continue reading “5 Best JavaScript Editors: Developers Rank the Best Tools Worldwide”

Speaking at the Dubai Front End Meetup – 24th April, 2019

Recently spoke on React VR at the Dubai Front End Meetup which happened on 24th April 2019, 7:30pm. https://www.meetup.com/The-Dubai-Frontend-Community/events/260241133/

Here are the slides: https://slides.com/josephk-1/deck-3/live#/
Here is the source code: https://github.com/jsphkhan/ReactVRDemoes

What did I demo?
Well, I started with the basics of React VR, 3d co-ordinate system, how to code an app, basic components like <View/>, <Text/>, creating 3d models etc and then my demo was a 360 degree virtual tour of a Hotel. Checkout out the video below

 

Here’s a video to the demo:

 

Synchronized side by side responsive app/layout testing with Emmet Re:view

Why?
So you have a responsive web application and you want to test it side-by-side to quickly test how it looks at different resolutions and devices. Well, then this is for you. It talks about a very simple way to synchronously test the app side by side on multiple screen resolutions at the same time. There are better and much sophisticated solutions out there like GhostLab, Adobe Edge Inspect (probably stopped now), Blisk etc, but I do not want to go into that. Lets gets started quickly,

Continue reading “Synchronized side by side responsive app/layout testing with Emmet Re:view”

Using D3 or third party libraries with Polymer – simple example

Off late I have been exploring and working with Polymer a lot. One thing I tried recently was to create a custom element (a custom tag) that has a d3 chart integrated into it. So whenever I use this element in an application the chart renders.

For those who are not familiar with Polymer, let me tell you, it’s a game changer for the next generation of web applications. The web is getting componentized with the new standards that are coming along – Shadow DOM, custom elements, templating, HTML imports e.t.c. Polymer is a polyfill layer or as they call it a SUGARING layer on top of these web standards that allow you create custom web components easily. You do not need to go the the low level API’s to create a custom element. Just use the Polymer library and start creating your own components. Also it provides a heck of other features that can be used, such as two way data bindings. So go over to the Polymer site and check it out.

Coming back to our topic of discussion, one thing that can be a bit confusing to Polymer beginners is to use a third party javascript library with your polymer element. Here I have an example of using the D3 js charting library to create a custom chart component. Let’s call our custom element  my-custom-d3-chart. By the end of this discussion we will have a custom tag – <my-custom-d3-chart />. Yes a custom HTML tag. Our own tag. Yo!!!

Continue reading “Using D3 or third party libraries with Polymer – simple example”

Animated growing pie chart with Rapahel JS

This is my first post after a long gap – almost one year. During this period I got busy with my regular work, family and other commitments. It was really hard to keep writing although I wanted to do that.
One of the tasks that I worked on a few months back was animating a pie chart as if it is growing from 0 to 360 degrees. And this post will share that with you. So let’s get started….
You might already be knowing that Raphael JS is a great JavaScript library to work with SVG in your web projects. So did I to create the pie chart. I am using Raphael and its features to create the pie chart and animate it. Here’s the demo link. Run this in your browser http://jsphkhan.github.io/growing_pie/

growing_pie

Quick Concepts: 
Most important functionality in the growing pie chart code is defining a custom Raphael paper attribute. So here’s the concept. If you have an attribute that you want to represent as a function and add your logic to it, you can create a custom attribute. For details you can see the official reference here. But here’s how I defined a custom sector attribute that represents a pie slice sector. Continue reading “Animated growing pie chart with Rapahel JS”

Save HTML5 Canvas Image to Gallery – Phonegap Android plugin

Update

Readers of this post have raised issues with the plugin. I have to personally check for the issues but while using the plugin if you find any issues, you might want to debug it in ADT. I will come up with a working plugin soon. Thanks.

Sometime back I worked on a Phonegap Android plugin that helps to save an HTML5 Canvas Image to the device’s gallery. Well, the title of this post may be misleading but note that when you save an image, you actually have to save it on the SD Card or the device’s memory. The Gallery is just an app that shows the collection of images from various locations on the SD Card. So, there’s nothing like saving an image directly to the Gallery.
I had this working with Phonegap 2.2.0 (the version that I used). Newer versions of Phonegap/Cordova are available and things might have changed a bit, specially in the way custom plugins are written. Hence, if you are using newer versions of Phonegap you should have a look at the official documentation before proceeding.
Alright, here is what I did. I tried to save an image using the FileWriter – Phonegap API, but as it turned out, it can save only text data on the device’s memory. So, only way to do it was write a Phonegap plugin, pass the Canvas details from JavaScript interface to the Java side and let the Java class save the Canvas image on the SD Card.
Note that I am not a Java developer, and there may be better ways of writing this plugin.

How to install the plugin?
You need to get hold of two files :
1) The Java class – SavePhotoPlugin.java
2) The JavaScript interface – SavePhotoPlugin.js

Continue reading “Save HTML5 Canvas Image to Gallery – Phonegap Android plugin”

Getting CSS3 Transformations Matrix values for Android/Firefox

Quick snippet of code that will return the CSS3 Transformations Matrix values for Firefox browsers. We make use of the window.getComputedStyle() method for retrieving the style values for our element which has been moved using CSS3 Transformations.

function getMatrix() {
var style = window.getComputedStyle(your_element, null);
var moz_transform = style.getPropertyValue("-moz-transform") || style.getPropertyValue("transform");
if(moz_transform){
var values = moz_transform.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var a = values[4];
return a;
}

An example to follow…

orientationchange does not work in Mobile Firefox for Androids… WTF !

Yes, orientation change does not work in mobile Firefox. Strange!, but it is. So, when you rotate your mobile device from portrait to landscape mode and back to portrait mode, the orientationchange event is not fired in Firefox browsers for Android devices.

Normally for mobile browsers we detect the orientation change happening by registering to the orientationchange event.

window.addEventListener('orientationchange', function() {
  alert('orientation: ' + orientation);
}, true);

where the orientation property of the global object gives the current orientation that the device has been tilted to. For eg. 0 for portrait and 90/-90 for landscape.

However, when you run this code in firefox browsers for Android, the event is not fired (I tested it on Firefox 20/Galaxy S3). And this happens to be a bug. I mean how can you miss such a common thing in a big big browser!!

But there is an alternative way to detect the orientation changes in firefox browsers and that is by using Media Query detection technique. Also to let you know, I used the window.resize event to detect the orientation but it did not give correct results. The Media Query method worked perfectly. Here it is,

var test = window.matchMedia("(orientation: portrait)");
test.addListener(function(m) {
  if(m.matches) {
    // Changed to portrait
    alert('portrait');
  }else {
    // Changed to landscape
    alert('landscape');
  }
});

Still the window.orientation property is undefined for firefox browsers. So, you can use that to detect if it actually supports orientation change event. Who knows later they might start supporting. This is how you can do that,

if(typeof window.orientation === 'undefined') {
  //use media query technique
} else {
  //use orientationchange event handler
}

JavaScript typeof and instanceof – the concept and differences

As a JavaScript developer you must have used the typeof and the instanceof operator sometime in your code to detect the the type of a variable in your program logic. And most often or not you might have been confused with the different results that show up while expecting a desired result. In this post I am gonna show you an easy technique to determine the type and instance of a variable. Let’s see some examples first.

The typeof operator

var str1 = "Hello, how are you?";
typeof str1;
Output: "string"

So, we have a string literal str1, and when we find the typeof str1, it gives “string”. Remember string is a primitive data type in JavaScript. Let’s see another example,

var str2 = new String("I am doing good. Thank you!");
typeof str2;
Output: "object"

Now, we have a String Object and we have created an instance of that Object using the new operator, which is str2. Now if we do a typeof, it gives object. Remember that in JavaScript, other than the primitive data types (and null, undefined, function), everything else is an Object. So as expected you get the type as object.

Now, let’s work with Array’s and try the same thing,

var arr1 = [2,3,4]; //defining an array literal
typeof arr1;
Output: "object"

var arr2 = new Array(4,5,6); //creating an Array Object instance
typeof arr2;
Output: "object"

Firstly, we have an Array literal – arr1 and if we do a typeof it gives “object”. Why? Since Array’s are Objects and they are not part of the primitive data set.
The next example is more obvious, we create an Array Object instance – arr2, and then do a typeof. As expected we get a “object”. So we have seen, if the typeof does not return a primitive data type (which are number, boolean, string), it will return an object. There are some special cases though, look at the bottom of this page to find out.

The instanceof operator

Now let’s take up some examples of the instanceof operator.

var str1 = "Hello, how are you?"; //defining a string literal, same as above
str1 instanceof String;
Output: false

If you see above, we have a string literal and when we do a instanceof to check if the variable is an instance of the String Object, it returns false. Since a string literal belongs to the string primitive data type. Now, consider the example below,

var str2 = new String("I am doing good. Thank you!"); //defining a String object instance
str2 instanceof String;
Output: true

Here, str2 is actually an instance, so the test returns true.
But What’s up with the Array’s though? Let’s see,

var arr1 = [2,3,4]; //defining an array literal
arr1 instanceof Array;
Output: true

var arr2 = new Array(4,5,6); //creating an Array Object instance
arr2 instanceof Array;
Output: true

Both returns true as both arr1 and arr2 are Array objects and they are not part of the primitve data set.

In fact the following test also returns true

arr1 instanceof Object;
Output: true

arr2 instanceof Object;
Output: true

This is because the Array object inherits from the more generic Object object. (Yes, you heard it right Object object!).

Still confused about finding types and instances? Here is the rule to do it easily.

Rule for the test
So, how do you guess if a variable is an instance of its Object or Type. Here is the rule,
1) First check the type of the variable using typeof.
2) Now do the instanceof test.
3) a) If the typeof test returns a primitive type – number, boolean, string. Then instanceof test will return false. Because these are just primitive type data. They are not instances of any Object.
b) But if typeof returns an object, then instanceof test will return true. So you know that you are dealing with objects and instances.
For eg.

var regexp = /d{3}/; //define a regular expression object
typeof regexp; -> "object", not a primitive type
regexp instanceof RegExp; -> true
regexp instanceof Object; -> true

Take another,

var str = "Hello, me again!";
typeof str; ->  "string" , a primitive type
str instanceof String; -> false

Now, you can think of some examples and put the rule to a test.

Special cases
1) typeof null = “object” , since null is a special value in JavaScript which represents emptyness and it does not have any type.
2) typeof undefined = “undefined”, as expected
3) typeof NaN = number, since NaN is actually a special number, although it says Not a Number. Confusing? Just keep in mind.
4) typeof Function = “function”
5) typeof xmlObj = “xml”

References
1) typeof operator : https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/typeof
2) instanceof operator: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/instanceof