Grunt with Visual Studio

                       Integrating Grunt with Visual Studio

Today I would be showing how to integrate Grunt with visual studio. I found there was no useful article available on the net.

In this example I would be showing how to concat and minify files.

Steps involved :

1. Add new Grunfile.Js

    

2.Add NPM Package.Json

3. Install Node

4. Install grunt-cli

5. Install NPM packages needed 

//used to concat the files

npm install grunt-contrib-concat --save-dev

//Used for minify

npm install grunt-concat-uglify --save-dev

6. Specify Packages used in Package.Json

7. Specify Taskdetails in Gruntfile.js

8. Add as  post build task in visual studio
Note: For visual studio 2013 and less you can download task manager 
from  Download Task Manager

Based on the need we can keep adding tasks. 

Bootstrap buttons

                     Changing button styles using Bootstrap

Lets see how we can use inbuilt bootstrap class . In this short post I would be using button classes which could be useful.

By default button would not have any style. 

•  "btn" : Applies css class to the button. 
•  "btn-group" : Groups all the buttons in a div
•  "btn-group-vertical" : Groups all the buttons in a div vertically

 Display

  

  

Button Menu with drop up and drop down
Note 

1.  The anchor tag has class named "dropdown-toggle" and the data-toggle is "dropdown"
2. For Drop up we have  we have to specify button group as "drop up"

Display 

This are few of the bootstrap classes which can be used for buttons

Firewall Port

                                           
Today I would be talking about writing inbound rules to open a port blocked by firewall in the web server.I was working with one of the client and was trying to host a application on a different port. I was able to browse the application locally. When I tried to run the application remotely, I was getting server error. I did not have any clue what was happening. Later I figured out that the firewall was blocking the port 8081.

I have screen shots about the steps involved to open a port

Step 1 Open windows firewall in the hosted server

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

I hope this small post would save time.

AOP

                        Aspect oriented Programming

Today I would be discussing about AOP. what do we mean by AOP

   AOP

• Software development technique
• Allows to add enterprise functionality 
• Reduce boiler plate code
• Increase modularity
• Manage cross cutting concerns
• Infrastructure composition
• Wrapper around piece of business functionality

   AOP helps implement following principles

• Single responsibility principle
• Decorator pattern
• Open close principle
• Interceptors

  Advantages of AOP

1. Allows us to take common functionality within our applications, centralize it into singly responsibility.Attach these modules,  also known as aspects to     many places in the  application.
2. Most often aspects are encapsulating functionality that spends large         portion  of the application
3. Common cross cutting functionality includes Logging, security, profiling and transaction management 

    ASPECTS

     Where can we add these aspects or inspect or execute code?

•  OnStart: Executed immediately prior to the method call
•  OnSuccess :Executed immediately after the method call runs without                throwing an exception

   Types of aspects

           Calls to class methods/properties. These usually involves IOC                    Containers

JQuery Selectors

                               

Today I would talking about Jquery selectors

Before the evolution of Jquery we would see less developers used to like javascript. Reason, it was difficult to learn and code was lengthy.However Jquery internally uses javascript

Main advantage of using Jquery

• Runs across all browsers
• Lean and clean
• Simple powerful syntax
• Highly exentesible
• Ajax support
• Uses Css selectors

Note: Based on my knowledge the libary has atleast 19 pages of code.

Important syntax
Jquery Identifier  :$();

Anonymous function

$(function (){

});

Simple selectors
$('.classname') : Selects all element within a class

$('.#spaceId')   : Selects all element within a Id
$('<div>')         : Selects all 'Div' element

psuedo code selection

$('div:first-child');

finds the first item in the list

 1.Ana

 2.Beena

The selection would fetch  Ana

Find all the external link in a web page

 var ExternalRef=  $('<a href ^="http://">');

 ex: <a href="http://KudupuTechnologies.com">

      <a href ="~/home">

 it would only fetch the anchor tag which has "http:"

Find Array of buttons

var buttons=$('button');

Write dynamic literals

var div =$('<Div>This is a Div</Div>');

Add an Array

var elements=$('<span>One</span','<span>Two</span>');

Access raw DOM elements

var detail =$(document.getElementId('house-detail');

It would fetch all the DOM elements with id "house-detail"

Find the title in specific page

var detail =$([document.querySelector('h2'),document.querySelector('h3')]);

Find specific element within a specific column

var primary = $(.col-sm-5").find(' button[class*="btn-search"] ');

It would fetch a button with class name "btn search" within the column.

Get the parent

var parents =$('tbody').parents();

Goes all the way upto find a parent

Find specific parent
var specficParent=$('tbody').parents('table');
Goes all the way till it finds "table"

Find specific children
var children =$('tbody').children();

Find specific td value in a table
var tdArray=$("td:contains('Myvalue')");

Hide a Bootstrap Modal using Jquery

("#Id").modal('hide');

I have listed selectors which I feel is helpful .we would have ended up writing lengthy JavaScript code for the same functionality.
For more Jquery selectors please refer http://api.jquery.com/category/selectors/

Grunt

                      Grunt : The JavaScript Task Runner     

•  Is a task-based command line build tool for java script projects which makes performing repetitive, but necessary, task trivial
•  Java script based build tool

    Use

•      Validating html/CSS/JavaScript
•      Minify CSS/ JavaScript code
•      Compile CoffeeScript/ TypeScript
•      Compile Less file into CSS
•      Run unit test case

These are the files which are used in grunt
Package.JSON: Metadata file which describes your project

Gruntfile.js : File used to configure or define GRUNT tasks

Install and configure Grunt

• Install Node.js - http://nodejs.org/
• Install Node PM --https://npmjs.org/ (If you install node then npm would automatically be installed)
• Install the GRUNT cli  npm install -g grunt-cli
• Install GRUNT to your local directory npm install grunt --save--dev

Ex of using grunt file to clean files and folder

1. Install external dependency file                                                                                                     npm install grunt-contrib-clean --save-d After successful installation of external files would automatically update the project.Json file as shown below

2.Create grunt.js file

 3. Create a folder named CleanFiles.Add/Create files inside this folder

  4. Run the grunt command in the task manager.
      grunt default -v ;
  grunt: is the grun task
  Default :is the name of the task which needs to be run.
-v : Specifies run this in verbose mode. It would show all the outputs as shown below    

 5. Verify the folder
Note: The files has been removed by the grunt task

   

 







Summary
This is an simple example how we can use grunt. 

Basic Git commands

                   Git  ( Distributed revision control )     

    Git is a version control system that is used for software development and other version control tasks. As a distributed revision control system it is aimed at speed,[8] data integrity, and support for distributed, non-linear workflows.

Git was created by Linus Torvalds in 2005 for development of the Linux kernel, with other kernel developers contributing to its initial development. Its current maintainer is Junio Hamano.

As with most other distributed version control systems, and unlike most client–server systems, every Git directory on every computer is a full-fledged repository with complete history and full version-tracking capabilities, independent of network access or a central server