Update Firefox - mint

-Move to /opt
External programs like LibreOffice, Google Chrome, the defunct Adobe reader, ... are all installed in the /opt directory. If you want more info about why /opt, check out these two links:
Where to install my products on linux?
Filesystem Hierarchy Standard

If you already had a previous Firefox version installed in the /opt directory, remove it with the following command:
sudo rm -r /opt/firefox

Now move the firefox directory (which was created in your Downloads folder during extraction) to /opt:
sudo mv firefox /opt/firefox35

-Set up symbolic links

Depending on you usage pattern, follow the instructions you want to use Firefox 35 as you default browser:

“Backup” the old Firefox launcher:
sudo mv /usr/bin/firefox /usr/bin/firefox-old

Create a symbolic link pointing to the new Firefox version:
sudo ln -s /opt/firefox35/firefox /usr/bin/firefox

No need to update your icons/shortcuts, they should now launch the new version of Firefox.

Your old Firefox version is still installed. If you want to use it, run firefox-old in a terminal or create shortcuts/icons referring to firefox-old.

SignalR note

The following lists the important points for server side here:

• SignalR 2.0 uses Open Web Interface (OWIN) for .NET as the standard interface between .NET web servers and web applications, enabling a level of indirection and abstraction that keeps your project from directly tying to any specific hosting platform. This is the technical foundation that actually enables SignalR to be hosted from both web applications and traditional .NET processes, as we'll see later.
• Every OWIN application must have a Startup class that follows specific conventions. In particular, a Configuration() method with the signature shown in the preceding code must be made available.
• The assembly-level attribute OwinStartup is there to declare that our Startup class will be used to bootstrap every OWIN-based asset contained in all the loaded assemblies; there are other ways to declare the right Startup class to load, but we'll see them in the future recipes.
• Inside the Configuration() method, we start up SignalR using an appropriate extension method (MapSignalR()) made available by the SignalR core inside the Owin namespace; a call to the MapSignalR() method will expose an endpoint called /signalr, which the clients will use to connect to the server.

The main points of client side scripts:

• Add a Hub class. Any class available in the project that is derived from Hub is automatically discovered and exposed when SignalR is initialized calling MapSignalR in the Startup class.
• The client page established a connection to the Hub using the JavaScript SignalR client library.
• When the connection is ready, make a remote call to the xxx() method exposed by the custom Hub.
• SignalR coordinates the two sides using the most appropriate connection strategy taking into account which is the HTTP server hosting the application and which web browser is used to run the client page; it gives us the feeling of a direct connection towards our server-side Hub, allowing us to call methods on it directly (the line hub.server.xxx('xxx SignalR!');).

functional Javascript

A few good stuff online:

functional-javascript

Functional is a library for functional programming in JavaScript.

JavaScript Allongé

functional.js is a functional JavaScript library. It facilitates currying and point-free / tacit programming and this methodology has been adhered to from the ground up

The function existy is meant to define the existence of something. JavaScript has two values—null and undefined—that signify nonexistence. Thus, existy checks that its argument is neither of these things, and is implemented as follows

function existy(x) { return x != null }; 

Using the loose inequality operator (!=), it is possible to distinguish between null, undefined, and everything else. It’s used as follows

existy(null);
//=> false
existy(undefined);
//=> false
existy({}.notHere);
//=> false
existy((function(){})());
//=> false
existy(0);
//=> true
existy(false);
//=> true

The use of existy simplifies what it means for something to exist in JavaScript. Minimally, it collocates the existence check in an easy-to-use function. The second function mentioned, truthy, is defined as follows

function truthy(x) { return (x !== false) && existy(x) };

The truthy function is used to determine if something should be considered a synonym for true, and is used as shown here

truthy(false);
//=> false
truthy(undefined);
//=> false
truthy(0);
//=> true
truthy('');
//=> true

In JavaScript, it’s sometimes useful to perform some action only if a condition is true and return something like undefined or null otherwise. The general pattern is as follows:

{
if(condition)
return _.isFunction(doSomething) ? doSomething() : doSomething;
else
return undefined;
}

Using truthy, I can encapsulate this logic in the following way

function doWhen(cond, action) {
if(truthy(cond))
return action();
else
return undefined;
}

Now whenever that pattern rears its ugly head, you can do the following instead

function executeIfHasField(target, name) {
return doWhen(existy(target[name]), function() {
var result = _.result(target, name);
console.log(['The result is', result].join(' '));
return result;
});
}

The execution of executeIfHasField for success and error cases is as follows:

executeIfHasField([1,2,3], 'reverse');
// (console) The result is 3, 2, 1
//=> [3, 2, 1]
executeIfHasField({foo: 42}, 'foo');
// (console) The result is 42

bootstrap collapse

The script below is for icon toggling:

                $scope.collapseBar = function (ev, id) {
            var _toggleClass = function (elem, parent) {                 
                var _toggle_full = 'glyphicon-resize-full',id,
                    _toggle_small = 'glyphicon-resize-small',
                    _memberEvent_prefix = '#Panel_MemberEvents_Collapse_';
                if (id) _id = _memberEvent_prefix + id;
                if (elem.hasClass(_toggle_full) || elem.hasClass(_toggle_small)) {                    
                    elem.toggleClass(_toggle_full + ' ' + _toggle_small);                    
                    if (_id) $(_id).toggleClass('in');
                    return true;
                }
            }

            if (ev && ev.target) {
                $(ev.target).each(function () {
                    if (_toggleClass($(this), true)) return;
                    else if ($(this).children().length > 0) {
                        $(this).children().each(function () {
                            _toggleClass($(this));
                        });
                    }
                });
            }
        };

And the html mark up:

<!DOCTYPE html>

<html>

<head>

  <title>Twitter Bootstrap : Collapsible Accordion</title>

<link rel="stylesheet"

      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

<link rel="stylesheet"

     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">

<script src="http://code.jquery.com/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

</head>

<style>

.DemoBS2{

    margin:20px;

}

</style>

<body>

<div class="DemoBS2">

<div class="panel-group" id="memberDetail-collapseTitle">

      <div class="panel panel-primary">

        <div class="panel-heading">
          <h4 class="panel-title">
          Collapsible Accordion 1
<span class="pull-right">


                    <a data-toggle="collapse" ng-click="collapseBar($event)" data-parent="#memberDetail-collapseTitle"


                       href="#memberDetail-collapse">


                        <span class="btn btn-default btn-sm" title="Collapse">


                            <span class="glyphicon glyphicon-resize-small"></span>


                        </span>


                    </a>


                </span>


          </h4>

        </div>

        <div id="memberDetail-collapse" class="panel-collapse collapse in">

          <div class="panel-body">

         something here to expand or collapse ....
            </div>

        </div>

      </div>

      <div class="panel panel-success">

        <div class="panel-heading">

          <h4 class="panel-title">

           the title to show here <span class="pull-right commandIcons">


                <span data-href="#memberDetail-collapse" onclick="g_collapseBar($(this))" class="caatCollapse btn btn-default btn-sm" ng-disabled="isReadonly">


                    <span class="glyphicon glyphicon-resize-full"></span>


                </span>


            </span>


          </h4>

        </div>

        <div id="accordionTwo" class="panel-collapse collapse">

          <div class="panel-body">

            Change does not roll in on the wheels of inevitability,

            but comes through continuous struggle.

            And so we must straighten our backs and work for

            our freedom. A man can't ride you unless your back is bent.

      </div>

        </div>

      </div>

      <div class="panel panel-warning">

        <div class="panel-heading">

          <h4 class="panel-title">
ADASDASFDSFDS
            <span class="pull-right">
                <button data-targetpanel="#memberDetail-collapse" onclick="return collapseBar($(this));" class="btn btn-default btn-sm" title="Expand or collapse">
                    <span class="glyphicon glyphicon-resize-small"></span>
                </button>
            </span>

          </h4>

        </div>



        <div id="accordionThree" class="panel-collapse collapse">

          <div class="panel-body">

          You must take personal responsibility.

            You cannot change the circumstances,

            the seasons, or the wind, but you can change yourself.

            That is something you have charge of.

      </div>

        </div>

      </div>

    </div></div>

</body>

</html>

And Jquery toggle API, with no parameters, the .toggle() method simply toggles the visibility of elements:

$( ".target" ).toggle();

Collapse and Expand using JQuery toggle():

    g_collapseBar = function (element) {
        var $t = element;//$(this);
        var _toggle_full = 'glyphicon-resize-full',
                _toggle_small = 'glyphicon-resize-small';
        $($t.attr("data-href")).slideToggle();       
        $t.find('span.glyphicon').toggleClass(_toggle_full).toggleClass(_toggle_small);
    };

    collapseBar = function ($t) {
        $($t.attr("data-targetPanel")).slideToggle();
        $t.find('span.glyphicon').toggleClass('glyphicon-resize-full').toggleClass('glyphicon-resize-small');
        return false;
    };

to load external Javascript on browser console

var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js';
var hhead = document.getElementsByTagName('head')[0];
hhead.insertBefore(el, hhead.firstChild);

JavaScript: add months to a date handling edge cases (leap year, shorter months, etc)

Slip from dateJS:

Date.isLeapYear = function (year) {
       return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0));
};

Date.getDaysInMonth = function (year, month) {
    return [31, (Date.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
};

Date.prototype.isLeapYear = function () {
    var y = this.getFullYear();
    return (((y % 4 === 0) && (y % 100 !== 0)) || (y % 400 === 0));
};

Date.prototype.getDaysInMonth = function () {
    return Date.getDaysInMonth(this.getFullYear(), this.getMonth());
};

Date.prototype.addMonths = function (value) {
   var n = this.getDate();
   this.setDate(1);
   this.setMonth(this.getMonth() + value);
   this.setDate(Math.min(n, this.getDaysInMonth()));
   return this;
};

Or using moment.js:

moment().add('months',1).format('YYYY-MM-DD');
moment().add('months',1).calendar();
moment().subtract('days', 1).calendar();
moment("20111031", "YYYYMMDD").fromNow(); // x years ago
moment("20120620", "YYYYMMDD").fromNow(); // x years ago
moment().startOf('day').fromNow();        // x hours ago
moment().endOf('day').fromNow();          // in xx hours
moment().startOf('hour').fromNow();     // xx minutes ago

Angular BlockUI

//Angular BlockUI 0.11
var xxxxxxModule = angular.module("xxxxxxModule", ['ngRoute', 'blockUI']).config(function ($routeProvider, $locationProvider) {

    //blockUIConfig.message = 'Please stop clicking!';
    //blockUIConfig.delay = 100;
    // Provide a custom template to use
    //blockUIConfig.templateUrl = '/Templates/block.html';
    //Path - it should be same as href link
    $routeProvider.when('/Admin/Accounts', { templateUrl: '/Templates/Accounts.html', controller: 'securityAccessController' })
                  .when('/Admin/ManageAccount', { templateUrl: '/Templates/ManageAccount.html', controller: 'manageAccountController' })
                  .otherwise({ redirectTo: '/Admin/ManageAccount' });
    $locationProvider.html5Mode(true);
});

//Customize the block UI look/message if this added
xxxxxxModule.config(function (blockUIConfig) {

    // Change the default overlay message
    blockUIConfig.message ="executing...";
    // Change the default delay to 100ms before the blocking is visible
    blockUIConfig.delay = 1;//.delay(1);
    // Disable automatically blocking of the user interface
    blockUIConfig.autoBlock = false;

});


xxxxxxModule.controller("manageAccountController", function ($scope, $location, xxxxxxService, blockUI) {
    //$scope.user = { Id: '0',Name:'New'  };
    $scope.showDelete = false;
    $scope.saveLabel = 'Create New User';
    //$scope.nameInfo = '';
    $scope.validationInfo = {};

    // Block the user interface
    blockUI.start();
    //$scope.blockUI_ = true;
    setTimeout(function () {
        xxxxxxxService.getAccounts().then(function (_users) {
            $scope.users = _users;
            $scope.user = { id: '-100', name: 'NEW' };
            $scope.users.unshift($scope.user);
            $scope.user = { Id: $scope.user.id, Name: $scope.user.name };
            securityAccessService.getEmployers().then(function (_employers) {
                $scope.employers = _employers;
                securityAccessService.getRoles().then(function (_roles) {
                    $scope.roles = _roles;
                    // Unblock the user interface
                    //setTimeout(function () { blockUI.stop(); }, 9000)
                    blockUI.stop();
                }, function ()
                { alert('error while fetching roles from server') });
            }, function ()
            { alert('error while fetching users from server') });


        }, function ()
        { alert('error while fetching users from server') });
    }, 9000);// for 1 and half minutes
});

xxxxxxModule.factory("xxxxxxService", function ($http, $q) {
    return {
        getAccounts: function () {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: '/Admin/GetXXXXXDetails' }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        },
        getEmployers: function () {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: '/Admin/GetXXXXXXXDetails' }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        },
        getRoles: function () {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: '/Admin/GetXXXXDetails' }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        }
    }
});

And this is very important:

>@section customStyles{
    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet"></link>
    <link href="~/Content/angular-block-ui.css" rel="stylesheet"></link>
    }
@section customHeadJS
{
    <script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-ui/ui-utils.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/angular-block-ui.js"></script>
}
<div ng-app="xxxxxxModule">

    <div class="container" block-ui="main" ng-class="{blockui:blockUI_==true}">
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <ul class="nav navbar-nav">
                    <li class="navbar-brand"><a href="/Admin/Accounts">Members</a></li>
                    <li class="navbar-brand"><a href="/Admin/ManageAccount">Manager User</a></li>
                </ul>
            </div>
        </div>
        <div ng-view>
        </div>
    </div>
</div>

To use Jquery BlockUI instead:

    xxxApp.factory("validationService", function ($http, $q) {
        return {
            runValidation: function (member) {
                // Get the deferred object
                var deferred = $q.defer();                                
                $http({ method: 'POST', url: '/xxxProcess/Runxxxx', data: { xxxID: member.xxxId } }).success(deferred.resolve).error(deferred.reject);
                // Returns the promise - Contains result once request completes
                return deferred.promise;
            },
            displayBlock: function () {
                $.blockUI.defaults.css.border = 'hidden';//'2px solid black';
                $.blockUI.defaults.overlayCSS.backgroundColor = 'white';
                $.blockUI.defaults.overlayCSS.opacity = .6;
                $.blockUI({ message:'<h3><img src="/Images/busy.gif" /> Just a moment...</h3>' });
            },

            noMoreBlock: function () {
                $.unblockUI();
            }
        }
    });

..............

        $scope.runValidation = function (member) {
            validationService.displayBlock();
            validationService.runValidation(member).then(function (_data) {
                doSomethingHere(_data);
            }, function ()
            {
                alert('error while running Validation at server');
            }).finally(function () {
                $scope.getValidationErrors();
                validationService.noMoreBlock();
            });
            
        };

Private Members in JavaScript

This is written by  Douglas Crockford

JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members. Here's how.

Objects

JavaScript is fundamentally about objects. Arrays are objects. Functions are objects. Objects are objects. So what are objects? Objects are collections of name-value pairs. The names are strings, and the values are strings, numbers, booleans, and objects (including arrays and functions). Objects are usually implemented as hashtables so values can be retrieved quickly.
If a value is a function, we can consider it a method. When a method of an object is invoked, the this variable is set to the object. The method can then access the instance variables through the this variable.
Objects can be produced by constructors, which are functions which initialize objects. Constructors provide the features that classes provide in other languages, including static variables and methods.

Public

The members of an object are all public members. Any function can access, modify, or delete those members, or add new members. There are two main ways of putting members in a new object:

In the constructor

This technique is usually used to initialize public instance variables. The constructor's this variable is used to add members to the object.

function Container(param) {
    this.member = param;
}

So, if we construct a new object

var myContainer = new Container('abc');

then myContainer.member contains 'abc'.

In the prototype

This technique is usually used to add public methods. When a member is sought and it isn't found in the object itself, then it is taken from the object's constructor's prototype member. The prototype mechanism is used for inheritance. It also conserves memory. To add a method to all objects made by a constructor, add a function to the constructor's prototype:

Container.prototype.stamp = function (string) {
    return this.member + string;
}

So, we can invoke the method

myContainer.stamp('def')

which produces 'abcdef'.

Private

Private members are made by the constructor. Ordinary vars and parameters of the constructor becomes the private members.

function Container(param) {
    this.member = param;
    var secret = 3;
    var that = this;
}

This constructor makes three private instance variables: param, secret, and that. They are attached to the object, but they are not accessible to the outside, nor are they accessible to the object's own public methods. They are accessible to private methods. Private methods are inner functions of the constructor.

function Container(param) {

    function dec() {
        if (secret > 0) {
            secret -= 1;
            return true;
        } else {
            return false;
        }
    }

    this.member = param;
    var secret = 3;
    var that = this;
}

The private method dec examines the secret instance variable. If it is greater than zero, it decrements secret and returns true. Otherwise it returns false. It can be used to make this object limited to three uses.
By convention, we make a private that variable. This is used to make the object available to the private methods. This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.
Private methods cannot be called by public methods. To make private methods useful, we need to introduce a privileged method.

Privileged

A privileged method is able to access the private variables and methods, and is itself accessible to the public methods and the outside. It is possible to delete or replace a privileged method, but it is not possible to alter it, or to force it to give up its secrets.
Privileged methods are assigned with this within the constructor.

function Container(param) {

    function dec() {
        if (secret > 0) {
            secret -= 1;
            return true;
        } else {
            return false;
        }
    }

    this.member = param;
    var secret = 3;
    var that = this;

    this.service = function () {
        return dec() ? that.member : null;
    };
}

service is a privileged method. Calling myContainer.service() will return 'abc' the first three times it is called. After that, it will return null. servicecalls the private dec method which accesses the private secret variable. service is available to other objects and methods, but it does not allow direct access to the private members.

Closures

This pattern of public, private, and privileged members is possible because JavaScript has closures. What this means is that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. This is an extremely powerful property of the language. There is no book currently available on JavaScript programming that shows how to exploit it. Most don't even mention it.
Private and privileged members can only be made when an object is constructed. Public members can be added at any time.

Patterns

Public

function Constructor(...) {

this.membername = value;

}
Constructor.prototype.membername = value;

Private

function Constructor(...) {

var that = this;
var membername = value;function membername(...) {...}

}
Note: The function statement

function membername(...) {...}

is shorthand for

var membername = function membername(...) {...};

Privileged

function Constructor(...) {

this.membername = function (...) {...};

}

More About Object

Numbers, strings, and booleans are object-like in that they have methods, but they are immutable. Objects in JavaScript are mutable keyed collections. An object is a container of properties, where a property has a name and a value.

JavaScript’s fundamental datatype is the object. An object is a composite value: it aggregates multiple values (primitive values or other objects) and allows you to store and retrieve those values by name. An object is an unordered collection of properties, each of which has a name and a value. Property names are strings, so we can say that objects map strings to values. This string-to-value mapping goes by various names: you are probably already familiar with the fundamental data structure under the name “hash,” “hashtable,” “dictionary,” or “associative array.” An object is more than a simple string-to-value map, however. In addition to maintaining its own set of properties, a JavaScript object also inherits the properties of another object, known as its “prototype.” The methods of an object are typically inherited properties, and this “prototypal inheritance” is a key feature of JavaScript.

JavaScript objects are dynamic—properties can usually be added and deleted—but
they can be used to simulate the static objects and “structs” of statically typed languages. They can also be used (by ignoring the value part of the string-to-value mapping) to represent sets of strings.

Any value in JavaScript that is not a string, a number, true, false, null, or undefined is an object. And even though strings, numbers, and booleans are not objects, they behave like immutable objects .

Objects are mutable and are manipulated by reference rather than by value. If the variable x refers to an object, and the code var y = x; is executed, the variable y holds a reference to the same object, not a copy of that object. Any modifications made to the object through the variable y are also visible through the variable x.

The most common things to do with objects are create them and to set, query, delete, test, and enumerate their properties.

A property has a name and a value. A property name may be any string, including the
empty string, but no object may have two properties with the same name. The value 115 may be any JavaScript value, or (in ECMAScript 5) it may be a getter or a setter function (or both).  In addition to its name and value, each property has associated values that we’ll call property attributes:
• The writable attribute specifies whether the value of the property can be set.
• The enumerable attribute specifies whether the property name is returned by a
for/in loop.
• The configurable attribute specifies whether the property can be deleted and
whether its attributes can be altered.

Prior to ECMAScript 5, all properties in objects created by your code are writable,enumerable, and configurable. In ECMAScript 5, you can configure the attributes of your properties.

In addition to its properties, every object has three associated object attributes:
• An object’s prototype is a reference to another object from which properties are
inherited.
• An object’s class is a string that categorizes the type of an object.
• An object’s extensible flag specifies (in ECMAScript 5) whether new properties may
be added to the object.

Three broad categories of JavaScript objects and two types of properties:
• A native object is an object or class of objects defined by the ECMAScript specification.
Arrays, functions, dates, and regular expressions (for example) are native objects.
• A host object is an object defined by the host environment (such as a web browser) within which the JavaScript interpreter is embedded. The HTMLElement objects that represent the structure of a web page in client-side JavaScript are host objects. Host objects may also be native objects, as when the host environment defines methods that are normal JavaScript Function objects.
• A user-defined object is any object created by the execution of JavaScript code.
• An own property is a property defined directly on an object.
• An inherited property is a property defined by an object’s prototype object.

reset valid for all form controls

I was trying to set $valid for all form controls, however I googled around and I do not see any solution to this on the internet. And I came out this myself as below:

    $scope.clearValidation = function () {
        angular.forEach($scope.managerUserForm, function (value, key) {
            var type = $scope.managerUserForm[key];
            if (type.$error) {
                angular.forEach(type.$error, function (value, key) {
                    type.$setValidity(key, 'true');                    
                });
            }
        });
    };

Or use this in modern browsers with ECMAScript 5 foreach:

Object.keys($scope.managerUserForm).forEach(function (key) {
            var type = $scope.managerUserForm[key];
            if (type.$error) {
                Object.keys(type.$error).forEach(function (key) {
                    type.$setValidity(key, 'true');                    
                });
            }
});

Or use underscore:

_.each($scope.managerUserForm, function(value, key){
    var type = value;
    if (type.$error) {
     _.each(type.$error, function(value, key){
        type.$setValidity(key, 'true'); 
     });
   }
});