Posts

Things you may not know about Javascript Objects

Object Properties:An Object is a non primitive data with collection of properties(key, value). Each property(key) of an Object has following configurable properties,
value - value of the property. Default: undefinedenumerable - if true, the property can be accessed using a for..in loop and Object.keys. Default: falsewritable - if true, the property value can be modified. Default: falseget- defines a getter function. Default: undefinedset - defines a setter function. Default: undefinedconfigurable - if true, all the properties can be modified and deleted. Default: false With Object.defineProperty and Object.definePropertieswe can set the above configurable properties for an Object property(key).
With Object.getOwnPropertyDescriptor and Object.getOwnPropertyDescriptors we can get the above configurable properties associated with an Object property(key). example:var x = { a:1, b:2 }; Object.getOwnPropertyDescriptor(x, 'a'); // {value: 1, writable: true, enumerable: true, configurab…

AngularJs Interpolate Filter

This might be a simple angular filter, but more helpful to reduce ugly code in your controller.
Angular provides '$interpolate' service to evaluate angular expressions. 
Consider you have some constant template with some expression expecting a dynamic value - lets say userName.
Example: //example.js angular.module('app.example',[]) .constant('TEMPLATE',{ WELCOME_MSG: 'Hi {{userName}} Welcome to our Portal' }) .controller('sampleCtrl', function($scope, TEMPLATE, $interpolate){ $scope.data = { userName:'Ajai' }; $scope.MSG = $interpolate(TEMPLATE.WELCOME_MSG)($scope.data); }); <!--example.html--> <div ng-app="app.example" ng-controller="sampleCtrl"> <h1>{{MSG}}</h1> </div> Instead you can simplify the above one with custom interpolate filter. Below example wont make much difference, but consider if you have some 100 template constants - it is not a good idea to eval…

Mutator methods in Javascript

A Mutator method is used to control changes to a variable, which is formerly known asgetter and setter methods. Several server side languages supports Mutator methods. Lets see how to achieve the same in JavaScript. There are some restrictions to achieve it in obsolete browsers. Lets see the different ways to implement mutator methods in JavaScript,

Method 1: Exposing our own getter and setter methods
function User(){ this._name = ''; this.getName = function(){ return 'Hey ' + this._name; } this.setName = function(name){ this._name = name } } var u1 = new User(); u1.setName('Ajai') console.log(u1.getName()) //Hey Ajai
Method 2: Using ES5 Syntax (supported in all ES5 ready browsers)
//with Prototype function User(){ this._name = ''; } User.prototype = { get name(){ return 'Hey ' + this._name; }, set name(name){ this._name = name; } } var u1 = new User(); u1.name = "Ajai" console.log(u1.name) //Hey Ajai //without Proto…

Things you may not know about CSS

Image
Grammatical error like style using CSS:
.grammar{ -moz-text-decoration-color: green; -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; text-decoration-color: green; text-decoration-line: underline; text-decoration-style: wavy; } Output:
CSS 'empty-cells' Property table{ empty-cells:hide; }

CSS @supports Usually we do CSS feature-test using JavaScript. Now it can be done in CSS with a new property '@supports'. So for Firefox 22+ , Chrome 28+, Opera 12.1+ supports this feature. So we can look forward to using it soon!
Example:
/* basic usage */ @supports(prop:value) { /* more styles */ } /* real usage */ @supports (display: flex) { div { display: flex; } } /* testing prefixes too */ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; float: none; } }
CSS Filter Effec…

Javascript - Some Useful Tips & Tricks

Use window.name for simple session handlingwindow object has its own property 'name'. The name of the window is used primarily for setting targets for hyperlinks and forms. Windows do not need to have names. With this property we can achieve simple session storage. Browser preserves the property value (window.name) until the window/tab is closed.


LabelsYou can use a label to identify a loop, and then use the breakor continuestatements to indicate whether a program should interrupt the loop or continue its execution. var i, j; loop1: for (i = 0; i < 3; i++) { //The first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //The second for statement is labeled "loop2" if (i === 1 && j === 1) { continue loop1; } console.log('i = ' + i + ', j = ' + j); } } // Output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = …

Using Angular with Laravel / Conflict between Laravel Blade and Angular

The Conflict:Peoples who are using Laravel and AngularJs may know, Laravel’s Blade templating engine and AngularJs uses the same markup when displaying variables

{{ variableName }}
Solution 1 (Laravel): Laravel Blade template engine comes with an option to change the literal tags. so if you want to keep the angular syntax, then include the following code in app/routes.php
//general syntax Blade::setContentTags('<%', '%>'); //for escaped data: Blade::setEscapedContentTags('<%%', '%%>');
Solution 2 (AngularJs): AngularJs comes with an option to change the literal tags using $interpolateProvider It should be declared within your module.
angular.module('MyApp', [], function($interpolateProvider) { $interpolateProvider.startSymbol('<%'); $interpolateProvider.endSymbol('%>'); });

A fair play with Maths and JQuery Animation

Image
This is a new try with the simple maths that we already know. I have used basic trigonometric equations and JQuery animation for the play.

DEMODemo Explained: Create set of div and append it to the body
for (var i = 0; i < 360; i++) { //random color var color = '#'+parseInt(Math.random()*0xccccc); //create and append DOM $('<div/>').appendTo('body').css('background',color); } For random positioning use Math.random() to generate random x,y values


for (var i = 0; i < 360; i++) { var left = 100 + Math.random() * 300 + 'px'; var top = 100 + Math.random() * 300 + 'px'; $('div').eq(i).animate({left:left,top:top},1000); } To draw circle,
x = tx + r cos(t)
y = ty + r sin(t)
so looping through t value from 0 to 360 will generate circle


for (var i = 0; i < 360; i++) { r = 150; var left = 400 + r*Math.cos(i); var top = 200 + r*Math.sin(i); $('div').eq(i)…