Calculating age

Calculating age using moment.js is very simple:

   var birth_date = new Date(1966,1,1)
   var age = moment().diff(birth_date, 'years', true);

User interface with HTML+CSS+JS

Let's build the user interface with HTML+CSS+JS and then build the back end program with any web programming language (ASP.Net, PHP, etc) or objective-C for iOS.

This strategy decouple the front end and back end which leads to shorter development and higher customer satisfaction.

From the front end aspect:

• We build the prototype in a shorter time.
• We build a back end program using Javascript that simulate the AJAX call between the front end and back end. This script does not rely on any database and web server. It will be loaded and running within the browser context. So, the AJAX call simulation does not required a complex development environment setup.
• The prototype can be build with any tool as simple as a text file editor + a browser to test the prototype.
• The user can "see' and "feel" the prototype. It's not talking on a "paper" and the user must "imagine" how it works.
• This prototype will be uploaded to any web server for discussion purpose.
• Now, we build a more stable front end regardless of which OS platform.
• It solves the problem with "installation".

From the back end aspect:

• The back end can be built with any programming language (ASP.Net, PHP, etc) or Objective-C for iOS.
• The back end program should only provides the correct API for AJAX request and response.
• The back end program can be build parallel with the front end.

Finally, we are reusing the HTML+CSS+JS to build front for web app, mobile app and Windows client. Now, our front end designer and back end programmer can work parallel which really cut down lots of time in sync the shared source files.

Cheers!!

Avoiding uncertainty with "this"

Most of the time, we don't know what is "this"? Is it a "window", jQuery object, or what is it. It is difficult to debug and make the code to work.

One of the easiest solution that I found is to capture the context into "self" and then all public functions to be declared with the object function. For example, sayHelo() will always referring to the same context as you call the setMyName().

function myClass() {
  var self = this;
  var name;

  this.setMyName = function (s) { name = s; };
  this.getMyName = function() { return name; };
 
  this.sayHelo = function() { return self.getMyName(); };

}

var c = new myClass();
c.setMyName('Mickey');
console.log(c.sayHelo());

Spinner generator

The following website provides an easy way to generate the spinner animation in 3 output: SVG, CSS and GIF. This tool is great and very helpful.

http://loading.io/

TinyMCE

If you allow user from uploading file, you need the following code to initialize the uploading process where '#sel_file' is "<input type='file'>":

    var my_file_callback = null;

    var uf = $('#sel_file');
    uf.change(function (e) {
        var c0 = $(this);
        var f2 = c0[0].files[0];
       
        // use XMLHttpRequest to upload the image file to the server.

        //<<------//<<------//<<------//<<------
        // then, show the image file on the browser.
        // we need to specify the full url of the file.
        my_file_callback('http://localhost/test/' + f2.name, { alt: 'you have selected a image file' });
        //<<------//<<------//<<------//<<------
    });

To initialize the TinyMCE:

    tinymce.init({
        //selector: 'textarea',
        selector: '.template_div .msg_body',
        plugins: [
               'advlist autolink lists link image charmap anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime table contextmenu paste code'
        ],
        toolbar: 'undo redo | bold italic underline fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

        fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
        height: '200',
        removed_menuitems: 'newdocument',
        relative_urls: false,
        remove_script_host: false,
        convert_urls: true,

        file_browser_callback_types: 'image',
        file_picker_callback: function (callback, value, meta) {
            // get the callback reference
            my_file_callback = callback;

            // show the file selection browser.
            $('#sel_file').trigger('click');
        },
        setup: function (editor) {
            editor.on('init', function () {
                // this will be call for the initial setup.
                // call your function OR below code to set the the contents.

                 tinymce.get('your textarea control-id').setContent('this is my contents....', { format: 'raw' });
            });
       }

    });

Changing the URL in the address bar with JQuery

Changing the URL in the address bar with JQuery is quite straight forward. The purpose of this technique is to resolve the user support for the "single page application" (i.e., all contents were loaded by JQuery).

I have modified the technique used by the following article in order to avoid the security error raised by the browser. It appends the "anchor" to the URL.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ChangeUrl(page, url) {
            if (typeof (history.pushState) != "undefined") {
                var i = window.location.href.indexOf('#');
                if (i > 0) {
                    url = window.location.href.substring(0, i) + url;
                }
                else {
                    url = window.location.href + url;
                }
               
                var obj = { Page: page, Url: url };
                history.pushState(obj, obj.Page, obj.Url);
            } else {
                alert("Browser does not support HTML5.");
            }
        }
        $(function () {
            $("#button1").click(function () {
                ChangeUrl('Page1', '#Page1');
            });
            $("#button2").click(function () {
                ChangeUrl('Page2', '#Page2');
            });
            $("#button3").click(function () {
                ChangeUrl('Page3', '#Page3');
            });
        });
    </script>
    <input type="button" value="Page1" id="button1" />
    <input type="button" value="Page2" id="button2" />
    <input type="button" value="Page3" id="button3" />


Reference

http://www.aspsnippets.com/Articles/Change-URL-in-Browser-Address-Bar-without-reloading-using-JavaScript-and-jQuery.aspx

Javascript object property

You have 2 ways to declare a new object. The first way is to using a shorthand declaration while the second way is to declare a new object in the same way like other programming language.

    var o = {};

OR

   var o = new Object();

Unlike other strong typed programming language such as C# or C++, Javascript allows you adding new property at anytime.

For example, adding name and age properties to an object instance:

    o.name = 'John';
    o.age = 18;
    o.savings = 2100;
    console.log(o);

You are allowed to remove any property as well:

    delete o.savings;
    console.log(o);

To retrieve all property names from an object, you need to call Object.keys() function which returns an array of string:

  var properties = Object.keys(o);
  console.log(properties);

Let says, you want to access the property value without knowing the property name:

    var age_of_the_person = o[properties[1]];

But, you can't access the property value by index:

    var not_working = o[1];

    console.log(not_working);