Wednesday, May 27, 2015

So you know JavaScript?!

So you know JavaScript language and quite confident that you can write some program with that funny language. Are you sure? Really? Can you answer below simple question?

1.

var action = "sleep";

var spiderman = {
  action : "climb",
  showPower : function () {
    "use strict";
    console.log(this.action)
  }
}

var somePower = spiderman.showPower;
somePower();

Answer 

1. "sleep"
2. "climb"
3. Error

Correct answer is 3. If you guess 1 or 2 you have proven yourself you don't know much about the language. 

Why 3? 
'this' is set from the execution context when the function runs. In this case 'this' is not set at the time of the function execution as it runs on global context.

ECMAScript5  'use strict' makes sure 'this' is not set to global context. (It was a bug in early ECMAScript specifications)

Answer 1 is wrong because function runs on strict mode as explains above. Remove "use strict" statement and you will get answer 1.

Answer 2 is wrong because the function is not executing on spiderman object. Below change gives answer 2.

spiderman.showPower() // output:  climb

Now the execution context is 'spiderman' and 'this' is set to 'spiderman' at the time of the function execution.  

This is a crazy language isn't it!


Tuesday, September 9, 2014

Add offline browsing support

Add offline browsing support


HTML5 Offline Mode is a cool feature you can add to your web site to increase the usability of the system. While enabling the system accessible when no network connectivity available, you can also improve the loading time of the site when online. 

Adding this feature is pretty simple but there are few pitfalls you might encounter along the way. Below steps guide you on the process and remind you on possible issues.


1. First you have to add the cache manifest file to your web site root.(File extension : .appcache)



Manifest file: cache.appacache

Lookout: Many articles in web describe the file extension as .manifest. This is incorrect as specification changed later to .appcache.


2.   Add content to cache.appche file. Look below for sample 


CACHE MANIFEST
# 2012-03-26 v3.2.006# change version if you want the browser to get this version.CACHE:content/bootstrap/bootstrap.csscontent/site.css#relative paths are dangerous. App cache.appcache can be requested from pages in different #folder locations in your site/mysite/contacts# could also be a path to MVC controller/mysite/offline.htmlSETTINGS:prefer-online#when user is online, browser avoid using local cache.NETWORK:*http://*#tells the browser to load content from this location for any other resource that not cached. #Use * and http:// both as some browsers use http:// and others *.FALLBACK:/mysite/ /mysite/offline.html
#tells the browser if content under /mysite/ not available, show /mysite/offline.html as a fallback.Make sure to add offline.html to 'cache:'

3.    How it looks in the browser




4.  Add custom logic to offline event 

User navigator.onLine in Javascript to check whether the app is online or offline. For better usability you can add custom message box showing something like ‘This page is not available offline.’ When the user try to access a page in offline mode which is only available when online. (Ex: payment page)

function CheckOnlineStatus() {
       return navigator.onLine;
}

So it's that simple! But lookout for below pitfalls

Pitfall 1

Any error in downloading a resource in  .appcache file will stop updating appcache for the full site. If there is a previous version of cache in the browser application will continue to run with old files!!





Pitfall 2 

Cache key is case sensitive. See below scenario.

html

..

    <link type="text/css" rel="stylesheet" href="/CONTENT/site.css" />

..



cache.appche

CACHE:
content/bootstrap/bootstrap.css
content/site.css

Since Application Cache is case sensitive site.css request not loading from cache.



Pitfall 3 (For MVC.Net developers)

If IIS virtual folder name set to Upper Case (ie: MYAPP) and you include your scripts with RAZOR @Scripts.Render("~/content/site.css"), the resolve URL will be equivalent to  <link type="text/css" rel="stylesheet" href="/MYSITE/content/site.css" />. You will fall to pitfall 3!

Pitfall 4

Implementation of SETTINGS: varied with browser. It’s not reliable to depend on at this stage. So DON’T DEPEND ON IT.

Pitfall 5   (For MVC.Net developers)

MVC script bundles add cache busting key to the URL when you add bundle resources use  @Scripts.Render("~/bundles/jquery"). Ex:
       This dynamic key will result in a cache miss.

How to overcome?

1     Approach 1: .appcache file should be dynamically created with every build to have the bundle key also added to the cache entry. Note any changes to the bundle will result in a new key generated by the framework.
Ex:
CACHE:
content/bootstrap/bootstrap.css

2    Approach 2: Simply avoid the key by using ResolveBundleUrl
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/jquery", false)"></script>

Note that ResolveBundleUrl doen not provide some features in @Scripts.Render (ex: avoiding minification in debug mode) 





Friday, June 13, 2014

Coolest toy found for web development

If you are involved in developing software for web like me you know the pain of refreshing the window every time you made a change to the source from your favorite IDE.

Isn't it great if the changes i do in the text editor can reflect in the browser window immediately when i press ctls-s. Well you can have that magic.

Simply follow below instructions.

1. Download Live Reload from this link for windows http://download.livereload.com/windows/LiveReloadSetup.exe

2. Install a browser extension to your favorite browser. (That implies its no no for IE :-)) from below link
http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
3. Run the Live feed and select your source code folder. Note that this could be your source folder of Visual Studio or Idea for example. IDE does not matter.

4.Enable Live reload plugin once you load the web page in the browser.

5. Make a change to HTML and save. The page will reload itself.

It's that simple.

Visit http://livereload.com/ for more details on installing and Mac and other OSs. You can also write your own plugin to support your favorite compiler. Currently supported compilers mentioned in the site.



Saturday, May 28, 2011

Build your own light box..

These days i'm playing with my new 60D DSLR and thought of creating a cheap light box to take some macro shots.
Finally had the time today to attend to it and actually taken hour or so to complete it.

Items required
1. Enough Cardboard to create a cube of 1 cubic feet box. (depend on the type of objects you want to shoot)
2. Oil papers or tissue papers (I used the leftovers from the Wesak lantern project :-))
3. Adhesive (Chemifix and Multibond)
4. Paper cutter, marker and ruler    






First Shots..
 My Hummer..
Dodge Viper: My second vehicle


Only test shots. Needs to find some interesting objects...