Livereload with sublime text

Hello readers,

In this article I am going to show you how you can Livereload with sublime text. This article is useful for the developer who are working on their localhost project and trying to view the output on browser with local path.

Resource we need for livereload with sublime text

  • “Livereload” package in sublime text
  • “Livereload” extension with browser specific.

How Livereload with sublime text work?

Livereload with sublime text work as soon as you save the file in your sublime text. For example if you are working on .html file, you made any change and save it. Now you can go to your browser to see update without having to reload the page. The extension will refresh the page automatically as you save your file.

Install sublime package for livereload with sublime text

  • Open your package manager by hitting CTRL + SHIFT + P. It will opens package manger box where you can type and search for your desire plugin.
  • Now type “Livereload” in the textbox and click the option that says “Livereload”

Great! now you have install the livereload package in your sublime.
Again, we need to configure the setting of livereload in order to work.

  • Go to Preferences > Package Settings > LiveReload > Setting - Default
  • Replace the code with below code.
    
           { 
               "enabled_plugins": [ 
                   "SimpleReloadPlugin", 
                   "SimpleRefresh" 
               ]
           }
        
    

Just to make sure your plugin work perfectly you have to re-start your sublime text.

Install browser extension

  • Click the link and install the extension for chrome
  • After that a small icon will appear on the top right corner of the browser chrome.
  • Browse your local folder in chrome and click the icon to enable livereload.
    livereload-icon
  • Now your sublime task bar should say “New LiveReload c2 client connected”
    livereload with sublime text

Note: The above taskbar message in sublime text display for a while and it automatically disappear.

Now that’s all. Open your project folder and try editing your page and start saving your time for refreshing your page every time you make changes. 🙂

Have a nice day.

Two way binding in AngularJS

How to do a Two way binding in AngularJS

AngularJS is a javascript framework developed by Google. AngularJS is a declarative approach of manipulation of application data and view. In the same time AngularJs provides a Two way binding in AngularJS functionality that is very impressive with very short amount of code. Two way binding is a process of in AngularJS where you can update the view anytime or every time you want. The code for demo available at the bottom of page.

AngularJS code
Copy the below code and paste it into a script.js


var app = angular.module("myApp", []);
app.controller('limit_studies', ['$scope', function($scope){
	var employees = [
			{employe_id: 96325, name:"Santosh", dob: new Date("November 04, 1991"), gender: "Male", salary: 20000},
			{employe_id: 96320, name:"Manish", dob: new Date("February 04, 1991"), gender: "Male", salary: 80000},
			{employe_id: 56828, name:"Bishal", dob: new Date("october 04, 1991"), gender: "Male", salary: 60000},
			{employe_id: 66528, name:"Gandhi", dob: new Date("January 04, 1991"), gender: "Male", salary: 50000},
			{employe_id: 96395, name:"Mandeva", dob: new Date("March 04, 1991"), gender: "Male", salary: 40000},
			{employe_id: 99307, name:"Mitali", dob: new Date("April 04, 1991"), gender: "Female", salary: 30000}
	]
	$scope.employees = employees;
	$scope.limitRows = 2;
}])

Similarly for HTML code copy the below code and paste it into index.html or any desire file you want.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="limit_studies">
Select number between 0-5<input type="number" steps="1" min="0" max="5" ng-model="limitRows">
<br>
<br>
<table>
<thead>
<tr>
<th>Emp ID</th>
<th>Name</th>
<th>DateOfBirth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | limitTo:limitRows">
<td>{{employee.employe_id | number:0}}</td>
<td>{{employee.name | uppercase}}</td>
<td>{{employee.dob | date:"dd/MMM/yyyy"}}</td>
<td>{{employee.gender | lowercase}}</td>
<td>{{employee.salary | currency:"Rs.":2}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Download for demo files of Two way binding AngularJS

Event handling in AngularJS

Event handling in AngularJS with increment and decrement example.

Hello guys. If you are reading this post then you must be aware of Javascript and AngularJS basic.

We can handle event in AngularJS by using some AngularJS directive. There are many directive in AngularJS but in this tutorial we will discuss one of them which is widely used. Event handling in AngularJS is such a easy way to control any event.

Copy the below code and paste it into the script.js or any desire file you like.


var app = angular.module("myApp", []);

app.controller('likes_dislikes', function($scope){
	var technologies = [
		{name:"AngularJS", likes:0, disLikes:0},
		{name:"Jquery", likes:0, disLikes:0},
		{name:"React.JS", likes:0, disLikes:0},
		{name:"Node.js", likes:0, disLikes:0},
		{name:"stellar.js", likes:0, disLikes:0},

	]
	$scope.technologies = technologies;

	$scope.incrementLikes = function (technology) {
		technology.likes++;
	}
	$scope.incrementDislikes = function (technology) {
		technology.disLikes++;
	}

})

Now copy the below HTML and paste it into your HTML page. Please check the path of script file. In my case I have put the script.js file inside the js folder and assign the path accordingly.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="likes_dislikes">
<table>
<thead>
<tr>
<th>Framework</th>
<th>Likes</th>
<th>Dislikes</th>
<th>Buttons</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="technology in technologies">
<td>{{technology.name}}</td>
<td>{{technology.likes}}</td>
<td>{{technology.disLikes}}</td>
<td>
<input type="button" ng-click="incrementLikes(technology)" value="Likes">
<input type="button" ng-click="incrementDislikes(technology)" value="Dislikes">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Now you can click on Like or Dislike button to increase the number.

Repeating table data using ng-repeat

How to repeat table data using ng-repeat directive of angularJS

In this post I am going to show you how to repeat table data using ng-repeat directive of AngularJS. First of all we will create a object first and assign some data inside that object. Copy the below code and save it it a new js file called script.js


var app = angular.module("myApp", []);

app.controller('list_employees', function($scope){
	var employees = [
		{firstName:"Santosh", lastName:"Kumar", salary:20369},
		{firstName:"Duryodhana", lastName:"alpha", salary:60800},
		{firstName:"Bharat", lastName:"beta", salary:60020},
		{firstName:"Krishna", lastName:"gamma", salary:30010},
		{firstName:"Pooja", lastName:"thita", salary:10200}
	]
	$scope.employees = employees;	
});

In the above code we first created a module which is also known as the container of our application. It is very important to define an application name and assign it to the container of our application in our HTML template.
var app = angular.module("myApp", []);

Secondly I have created a controller and created a object called employees. Controller is just a javascript function. In this case the first parameter “list_employees” is a name of the controller and the second one is the function. Inside that function I have created an object where all the employees are registered.

app.controller('list_employees', function($scope){
var employees = [
{firstName:"Santosh", lastName:"Kumar", salary:20369},
{firstName:"Duryodhana", lastName:"alpha", salary:60800},
{firstName:"Bharat", lastName:"beta", salary:60020},
{firstName:"Krishna", lastName:"gamma", salary:30010},
{firstName:"Pooja", lastName:"thita", salary:10200}
]
$scope.employees = employees;
});

Now we are going to create a HTML template where we are going to display all the list of employees using ng-repeat directive.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="list_employees">
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Salary Name</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{ employee.firstName }}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Now lets use the same directive as nested


var app = angular.module("myApp", []);

app.controller('list_countries', function($scope){
		var countries = [ 
		{
			name:"India",
			cities: [
				{name:"New Delhi"},
				{name:"Mumbai"},
				{name:"Banglore"}
			]			
		},
		{
			name:"china",
			cities: [
				{ name:"Shangai" },
				{ name:"city two" },
				{ name:"city three" }
			]			
		},
		{
			name:"nepal",
			cities: [
				{name:"kathmandu"},
				{name:"pokhara"},
				{name:"Jhapa"}
			]			
		},
		{
			name:"Russia",
			cities: [
				{name:"city one"},
				{name:"city two"},
				{name:"city three"}
			]			
		},
		{
			name:"Japan",
			cities: [
				{name:"heroshima"},
				{name:"Nagasaki"},
				{name:"city three"}
			]			
		}
		]
		$scope.countries = countries;

});

Below is the HTML code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script> -->
<script src="js/script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="list_countries">
<ul>

<li ng-repeat="country in countries"> {{ country.name }}
<ul>

<li ng-repeat="city in country.cities">
{{ city.name }}
</li>

</ul>
</li>
</ul>
</div>
</body>
</html>

Responsive compass sprite mixin


@mixin resize-sprite($map, $sprite, $percent) {
$spritePath: sprite-path($map);
$spriteWidth: image-width($spritePath);
$spriteHeight: image-height($spritePath);
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));

@include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
     width: ceil($width*($percent/100));
     height: ceil($height*($percent/100));
     background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) );
}

To generate sprite (map-sprite, name of icon, %)


 @include resize-sprite($spr-sprites, $icon-name, 50);