You may found this error when you are trying to install any tool based on nodejs.
The reason for this is that you are not able to connect to the repo from your machine due to any proxy or firewall.
But the another thing which I want to mention for my case was that I was not running the command prompt as Administrator.
Once I run same command with Administrator right, after opening command prompt it worked perfectly.
Hope this can help full for someone.
Most of the tech community is aware that nodejs for the server side development with java-script but very less are aware that Nodejs is one of important technology for client side developers. The reason for this is that multiple client side develpment tools runs on this. Bower, Gulp, Grant etc. are some of those. So Client side java script developer must need nodejs on his machine as these tools are on top of nodejs.
You can get nodejs from the link below:-
Hope this will help someone.
The basic of bootstrap css is it’s grid system.According to it you can place different divs as columns inside a row div.
In Grid system full row’s width is considered as 12 unit.Now you have to decide that how much you want to allocate for a column out of these 12.
Device types are represented as below:-
a)xs For Phones
b)sm For Tablets
c)md For Desktops
d)lg For larger Desktops
So style class for one column can be written as ‘col-Device_Type-Width_Of_Column_Out_Of_12’.
For examle:-
col-xs-12 Means it will take full row width on phones screen.
col-sm-6 Means it will take half of full row width on tablets.
col-md-3 Means it will take 1/4 of full row width on Desktop.
Now attaching small sample code snippet for this sample.In code we have:-
1)Added bootstrap css,bootstrap js and jquery.
2)Added ‘container’ class which is for responsive fixed width container.
3)Added ‘img-responsive’ and ‘img-rounded’ classes for images to be responsive.
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="background-color:#DDDDDD;top: 100px" > <div class="jumbotron" align="center"> <h2>Responsive Web Page Using Bootstrap CSS 3</h2> <p>Resize this Page To Multiple Dimensions Or Check This Sample On Different Devices.</p> </div> <div class="row" align="center" style="background-color:#CCCCCC"> <div class="col-xs-12 col-sm-6 col-md-3" align="center" style="background-color:#FF0000">Div 1</div> <div class="col-xs-12 col-sm-6 col-md-3" align="center" style="background-color:#00FF00">Div 2</div> <div class="col-xs-12 col-sm-6 col-md-3" align="center" style="background-color:#0000FF">Div 3</div> <div class="col-xs-12 col-sm-6 col-md-3" align="center" style="background-color:#FFFF00">Div 4</div> </div> <br/> <div class="row" align="center" > <div class="col-xs-12 col-sm-4 col-md-3" align="center"> <img src="img_320X240.jpg" class="img-responsive img-rounded"><img/> </div> <div class="col-xs-12 col-sm-4 col-md-3" align="center"> <img src="img_320X240.jpg" class="img-responsive img-rounded"><img/> </div> <div class="col-xs-12 col-sm-4 col-md-3" align="center"> <img src="img_320X240.jpg" class="img-responsive img-rounded"><img/> </div> <div class="col-xs-12 col-sm-4 col-md-3" align="center"> <img src="img_320X240.jpg" class="img-responsive img-rounded"><img/> </div> </div> </div> </body> </html>
Hope this will help someone.
In this sample we will be just creating a sample structure with very simple features. You have gone through multiple samples, but trying to put things together for creating at least a small structure of multiple components. Let’s consider a case that one will be just having some static pages and header and footer for application.
So we can say that we will be having multiple tabs in application and will also making a tab, which will having drop-down menus. In this sample we will be using controllers just to show how those are written. Will not creating any modules here.Things will be help full for later stages with this sample. Also this sample will be more helpful for beginners and designers mainly. We are using bootstrap css for the responsive design.
Let’s first create index.html of application as below:-
<!DOCTYPE html> <html> <head> <title>SPA with Angular</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <!-- Add jQuery and Bootstrap. --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- Add angularjs --> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script> <!-- Add application's JS File --> <script src="js/app.js"></script> <body ng-app="spaWebApp"> <div ng-include='"header.html"'></div> <div ng-view=""></div> <div ng-include='"footer.html"'></div> </body> </html>
As you can see that page have below main parts:-
1) Adding jQuery,Bootstrap and angular references.
2) Adding ‘app.js’
3) Added three divs for header,footer and content of application.
Now below is code of app.js:-
var app = angular.module('spaWebApp', [
'ngRoute'
]);
/**
* Configure the Routes.
*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home.
.when("/", {templateUrl: "pages/home.html", controller: "HomeController"})
// Tabs.
.when("/tab1", {templateUrl: "pages/tab1Ui.html", controller: "TabController"})
.when("/tab2", {templateUrl: "pages/tab2Ui.html", controller: "TabController"})
.when("/tab3", {templateUrl: "pages/tab3Ui.html", controller: "TabController"})
// Menu Items.
.when("/tab4/menu1", {templateUrl: "pages/tab4menu1Ui.html", controller: "MenuController"})
.when("/tab4/menu2", {templateUrl: "pages/tab4menu2Ui.html", controller: "MenuController"})
//page not Found.
.otherwise("/404", {templateUrl: "pages/errorpage.html", controller: "PNFController"});
}]);
app.controller('HomeController', function (/* $scope, $location, $http */) {
document.getElementById("msglbl").innerHTML = "HomeController Working Fine.";
});
app.controller('TabController', function (/* $scope, $location, $http */) {
document.getElementById("msglbl").innerHTML = "TabController Working Fine.";
});
app.controller('MenuController', function (/* $scope, $location, $http */) {
document.getElementById("msglbl").innerHTML = "MenuController Working Fine.";
});
app.controller('PNFController', function (/* $scope, $location, $http */) {
document.getElementById("msglbl").innerHTML = "PNFController Working Fine.";
});
For this sample you don’t need to focus a lot on multiple controllers.But you can see how controllers can be associated with multiple parts of application.In this sample we are just changing the text of footer as via multiple controllers.
As per above code you will need to create header and footer templates and multiple pages inside ‘pages’ folder.Instead of providing code of multiple pages just adding sample html for ‘home.html’.You can create all pages as per your requirement.Below is structure for ‘home.html’:-
<div class="container" > <div class="jumbotron" style="width: 100%;height: 100%" align="center"> This is Home page. </div> </div>
Here is ‘header.html’:-
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#/">Home</a></li> <li><a href="#/tab1">Tab1</a></li> <li><a href="#/tab2">Tab2</a></li> <li><a href="#/tab3">Tab3</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">Tab4(with Menus) <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#/tab4/menu1">Menu1</a></li> <li><a href="#/tab4/menu2">Menu2</a></li> </ul> </li> </ul> </div> </div> </nav>
and the last one is ‘footer.html’:-
<footer> <div align="center"> <p>This is your footter.</p> <p id="msglbl" style="color: #0000ff"></p> </div> </footer>
Except these files you will see some pages referenced in app.js. Those are simple pages lot like similar to ‘home.html’.
You can design them later according to your needs later on.
Hope this will be useful for someone.
As in last post we have done the drag and drop feature in html5 using Java Script now we will be doing same exercise using jQuery.
This time let’s try to make the application bit realistic and just think that instead of dragging and dropping one item we are having multiple items, which will be real word scenario in your day by day activity. Let suppose we are having two div one is source, we are calling it ‘productlist’ in our case. The another one is destination, terming it as ‘userselectedlist’.
Adding code snippet below for this. You can see how easily this can be achieved using jQuery.
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop with jQuery</title>
<h2>Drag and Drop with jQuery</h2>
</head>
<style>
img
{
height: 120px;
width: 120px;
margin: 5px;
}
.draggable
{
filter: alpha(opacity=80);
opacity: 0.8;
}
.dropped
{
position: static !important;
}
#productlist, #userselectedlist
{
border: 5px solid #888888;
padding: 10px;
min-height: 140px;
width: 540px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#productlist img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function (event, ui) {
ui.helper.addClass("draggable");
},
stop: function (event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
document.getElementById("msglbl").innerHTML = image + " dropped successfully.";
}
else {
document.getElementById("msglbl").innerHTML = "Unable to drop " + image;
}
}
});
$("#userselectedlist").droppable({
drop: function (event, ui) {
if ($("#userselectedlist img").length == 0) {
$("#userselectedlist").html("");
}
ui.draggable.addClass("dropped");
$("#userselectedlist").append(ui.draggable);
}
});
});
</script>
<body>
<div id="productlist" align="center">
<img src="images/product1.jpg"/>
<img src="images/product2.jpg"/>
<img src="images/product3.jpg"/>
<img src="images/product4.jpg"/>
<img src="images/product5.jpg"/>
<img src="images/product6.jpg"/>
<img src="images/product7.jpg"/>
<img src="images/product8.jpg"/>
<img src="images/product9.jpg"/>
</div>
<br>
<div id="userselectedlist" align="center">
<h2> Add Your Products Here.</h2>
</div>
<h4 id="msglbl"> You Have Not Selected Any Product. </h4>
</body>
</html>
Hope this will help someone.
As all of you have listen about one of excellent feature of HTML5 i.e. drag and drop feature. Let’s elaborate it with sample application. In this requirement there are two components one is destination in which we will drop the item and another one is source i.e. the item which we are going to drag and drop in destination. In our sample we will be just taking an image and will be dropping this to a div. We will be implementing it as:-
1) Destination: – Taking a div for this purpose and setting id=”dropContainer”.
We will be using two events for this:-
a) ondragover
b) ondrop
2) Source: – Taking an image for this and setting id=”draggableimage”.
Only one event for source is required in this sample i.e. ‘ondragstart’.
Another thing to do with source is setting draggable=”true”.
That’s all and we are ready with sample application with drag and drop feature. Adding code snippet for this sample below.
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop Sample</title>
<h2>Sample Application For Drag and Drop (Use Mouse to Drag Image into Box)</h2>
</head>
<script>
function drophandler(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
document.getElementById("msg").style.visibility = "hidden";
}
function dragoverhandler(event) {
event.preventDefault();
}
function dragstarthandler(event) {
event.dataTransfer.setData("text", event.target.id);
}
</script>
<body>
<div align="center">
<div id="dropContainer" style="width: 300px; height: 300px; border: 8px solid #888888;" align="center" ondragover="dragoverhandler(event)" ondrop="drophandler(event)" >
<h3 id="msg">Drop Your Image Here.</h3>
</div>
<br>
<img id="draggableimage" width="200" height="200" src="img.jpg" draggable="true" ondragstart="dragstarthandler(event)"/>
</div>
</body>
</html>
Hope this will help someone.
We will be creating our first angularJS application as very basic sample app.As AngularJS is a javascript framework and written in javascript,so it is distributed as a javascript file.We can simply add it inside ‘<script>’ tags.
Now as AngularJS extends HTML with ng-directives.For our this sample we will be using below 4 angular directives:-
1)ng-app :- which defines an AngularJS application.
2)ng-model :-which binds value of HTML control e.g. ‘input’ to application’s data.
3)ng-bind :- this directive binds application’s data to HTML view.
4)ng-init :- this directive is used to initialize AngularJS application variables.
Attaching code for the this application and we are ready to go.
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <body> <div ng-app="" ng-init="modelname='David'"> <p>Enter Name Here: <input type="text" ng-model="modelname"></p> <p ng-bind="modelname"></p> </div> </body> </html>
Hope this will help someone.
As all of us have already listen the most famous word “HTML5”,which is termed as most revolutionary over the internet.HTML5 is next generation of HTML which was earlier on the version 4 i.e. HTML4. Now if you will go through comparing HTML 4 to HTML 5 then you are not going to found there a lot revolutionary. We can say that whatever new is there is just a combination of HTML5, CSS3, and Java Script.This combination can be enough for the static websites. But even after using these we are still far enough for the web applications.
As per Wikipedia:-
“AngularJS (commonly referred to as “Angular” or “Angular.js”) is an open-source web application framework mainly maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.”
So we can say that AngularJS is framework for achieving:-
1) Single Page Applications
2) Client Side ‘Model View Controller’ and ‘Model-View ViewModel’
3) Rich Internet Applications
Also the goals of AngularJS are defined on Wikipedia:-
So for today’s internet AngularJS is one of the important part, as above mentioned all items are the crucial of today’s modern web. You will be known about a lot of Java Script
Frameworks and Libraries already. But the way AngularJS is being demanded it seems that it is a skill to be included in your skill set.
Hope this will help someone.
Single Page Applications (SPA) is a modern trend of advance web applications for providing richness to applications. Including:-
With classical web applications browser send the initial request to server and server processes request and sends HTML of requested page to browser in response.In further interaction with any part of the page as per user’s interaction with a button or link etc. a new request is sent to server with required data and previous step is repeated thought the application.
With SPA the entire page is loaded with very first request and for further interactions we request for data only. So the only needed part of page will be updated by browser instead of full page. So it will be reducing the overall waiting time as per user interaction and will be providing more fluid experience.
Hope this will help someone.
This is relatively new term is Software Industry. Front-end developer is mostly think of a “web Developer”, who is dealing mainly with visual elements of any website/web application. Which is not in actual if you will go in deep of this profile. Around 4-5 years back this profile was just a part of web-developer. But as the HTML 5 came in market this profile is going to be most demanded and shouted. Earlier this was just a part of Web Developers profile. At that time the web designer provides some images and css to developers and then developers keeps to create web sites or web applications. At that time the Developer were expert in their server side technologies e.g. in Java Server Pages, Asp.Net or Php and they use to work in their technology using the elements (controls) of their technology for creating the web site/applications.
But with the time as HTML went to HTML 5 this role is much more complex now and too much demanding also. The server technology guys are still expert in their own languages but they are not that much productive or interested for pure html based applications. And this is the reason for this profile. I am trying to list few skills which are unique to front end developer and also different from Server side web developer. Any additional skill you can mention is well come.
Though these all feature are enough for a front end developer, but as currently HTML based wrapper applications are running well on mobiles and tablets too, so having the knowledge for these platforms will easily make them capable to create hybrid mobile applications, which is also in demand.
Hope this will help someone.
Smart Web FrontEnd 