Blog

Filtering all blogs tagged as "html5."    Clear filter

JavaScript Equals Operator (==) Pitfalls

JavaScript has two equality comparison operators == and ===. Let's see what is the difference between them in the following tables:

== true false 1 0 "1" "0" null "JS" "" NaN Infinity
true  true  false true false true false false false false false false
false   true false true false true false false true false false
1
  true false true false false false false false false
0       true false true false false true false false
"1"         true false false false false false false
"0"           true false false false false false
null             true false false false false
"JS"               true false false false
""                 true false false
NaN                   false false
Infinity

 

                  true

== comparison chart 

 

=== true false 1 0 "1" "0" null "JS" "" NaN Infinity
true  true false false false false false false false false false false
false   true false false false false false false false false false
1     true false false false false false false false false
0       true false false false false false false false
"1"         true false false false false false false
"0"           true false false false false false
null             true false false false false
"JS"               true false false false
""                 true false false
NaN                   false false
Infinity                     true

 === comparison chart

As you can see, the first table contains several unexpected behaviors, such as "1" == true and "" == 0 !

On the other hand, the second table looks prefectly as expected.

So, you should always use === for maintanabie code. The same also applies to != and !== operators. For NaN and Infinity checking, you should use isNaN() and isFinite() functions.

Read More

Javascript and Geolocation Tricks

Getting Geolocation using ECMAScript/Javascript using navigator.geolocation.getCurrentPosition(onSuccess, onError, positionOptions) function can be a bit tricky. In this post, I'll explain some parameters that control Geolocation which apply to PhoneGap, mobile web and web as well. There are some parameters that control it:

  • Accepting cached location or not
  • Accuracy
  • Function Timeout

 Accepting cached location is controlled by maximumAge property of PositionOptions object. If there is a cached position and its age is lower than maximumAge in milliseconds, it is returned to the application. If maximumAge set to 0, it means that the application is accepting fresh locations only.

Accuracy is controlled by enableHighAccuracy boolean property. When enableHighAccuracy is set to true, the platform would try to get the location using the best method, which would be GPS, if GPS is disabled, it will fall to WiFi or mobile data. On the other hand, if enableHighAccuracy is set to false, the platform would opt to WiFi or mobile data directly.

Function timeout is controlled by timeout propertyof PositionOptions object. It specifies the time in millisecond after which if there no successful location found, onError callback will be called. The trick about timeout is that its default is infinity which means if something goes wrong, onError callback is never called. 

Note 

Some mobile devices have problem with Geolocation (Samsung S3, HTC One X, ...). Occasionally, the Geolocation function freezes and do not return any result whether enableHighAccuracy is true or not. Restarting the device fixes this issue.

 Code snippet: 

navigator.geolocation.getCurrentPosition(onSuccess ,onError,
  { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true } );

function onSuccess(position) {
  /*some success code here*/
}

function onError(error) {
  if (error.code === PositionError.TIMEOUT){
    navigator.geolocation.getCurrentPosition(onSuccess, onError,
      { maximumAge: 3000, timeout: 20000, enableHighAccuracy: false } );
  }
  // Handle other errors here
}
Special Thanks for Eng. Ahmed Adel who helped me a lot working this solution out.

 

Read More

Sencha Touch vs PhoneGap3

In a previous post, I explained the differences between PhoneGap and Titanium. In the post, I’ll continue the series with PhoneGap vs Sencha Touch.

 

What is Sencha?

First off, Sencha company has been formed in April 2011 as a merge result of Ext JS, jqTouch and Raphaël. Now, it has an array of products to design, develop, and deploy cross-platform desktop and mobile applications. All Sencha products are paid and proprietary, except Ext JS and Sencha Touch that have free licenses. These products are:

Read More

Rasem, draw SVG images using ruby1

The web is moving to HTML 5 where SVG images are the standard images to use. But how to generate SVG images to include? You might draw static SVG images and include them in your web site but this will not help with generated SVG images with dynamic data. Of course,  you can read the complete specification of SVG and generate your own images; these are a few hundreds of pages; good luck with that :)

The elegant solution is to use Rasem, a pure ruby gem, to generate SVG images. Rasem allows you to describe your SVG images in pure ruby code. You can either save the generated image to a file or output it to a string to use it with your HTML 5 page. Rasem generates standard SVG images that are compliant with the W3C standard.

gem install rasem

and have fun!

Checkout the project main page at: http://github.com/aseldawy/rasem

You can find examples and usage instructions there.

Read More