HTML5

CSS3 Flexible Box Layout Mode

Flexbox or Flexible Box Layout i.e. :-
https://www.w3.org/TR/css-flexbox/

is layout module in css3 implemented to improve the items align,direction,order and dynamic size.The purpose of this is to utilize the space of container with maximum possible ways,which makes it usable for different screen sizes.Also known issue of handling vertically align ‘Div’ is quite easy and simple with this approach.

With just few properties you will be able to get any kind of layout with CSS3.
We will require to just style parent container and child container with below mentioned properties:-

1)For Flex Container:-
a)display: flex | flex-wrap
For defining type of container.

b)flex-direction = row(default) | row-reverse | column | column-reverse;
Used for setting direction of items inside a flex container.

c)align-items: flex-start | flex-end | center | baseline |stretch (default)
Horizontally/Vertically aligns the flex items when there is additional space inside container other than the item’s dimension.It will work horizontally or vertically is decided on the ‘row’ or ‘column’ value of ‘flex-direction’.

d)justify-content: flex-start | flex-end | center | baseline |stretch (default)
Horizontally/Vertically aligns the flex items when there is additional space inside container other than the item’s dimension.It will work horizontally or vertically is decided on the ‘row’ or ‘column’ value of ‘flex-direction’.And this will be work on the other dimension, which is controlled by ‘align-items’.

2)For Item container:-
align-self : flex-start | flex-end | center | baseline |stretch (default)
‘align-self’ will override the ‘align-items’ of the parent container.

Attaching a sample code of html page below.In this we have align 3 divs inside a div horizontally and vertically center.
If you will open the commented code of Item’s style then you will see how the ‘align-self’ of item will overide the ‘align-items’ of parent container.

<!DOCTYPE html>
<html>
<head>
<style>

.fcontainer {
    display: flex;
    flex-direction: row;

  	align-items: center;
  	justify-content: center;

    width: 1000px;
    height: 800px;
    background-color: #eeeeee;
}

.fitem1 {
	/*align-self:center;*/

	text-align: center;
    background-color: #cccccc;
    width: 200px;
    height: 200px;

    margin: 10px;
    border-width: 5px;
    border-color: #000000;
    padding: 10px;
}

.fitem2 {
	/*align-self:flex-end;*/

	text-align: center;
    background-color: #cccccc;
    width: 200px;
    height: 200px;

    margin: 10px;
    border-width: 5px;
    border-color: #000000;
    padding: 10px;
}

.fitem3 {
	/*align-self:flex-start;*/

	text-align: center;
    background-color: #cccccc;
    width: 200px;
    height: 200px;

    margin: 10px;
    border-width: 5px;
    border-color: #000000;
    padding: 10px;
}
</style>

</head>
<body>
<div class="fcontainer">
<div class="fitem1">Div 1</div>
<div class="fitem2">Div 2</div>
<div class="fitem3">Div 3</div>
</div>
</body>
</html>

This will also work fine if you will providing the dimensions in percentage.
Hope this will hope full for someone.

Centering a div inside a div horizontally and vertically

There are multiple ways of achieving this but none of them is 100% perfect.Making a ‘div’ center horizontally and vertically inside another ‘div’ with CSS is bit tricky.One thing to mention is that if you want to achieve this just by css then you will require to provide the hard coded dimensions of the ‘div’.
The best way as per my understanding is as below:-

<html>
  <style>
	.containerDiv {
	     width : 400px;	
	     height: 300px;
	     
	     display: table-cell;
	     vertical-align:middle;	
	     text-align:center;
		 
	     /*Optional:-Just for Demo UI*/
	     background-color: #eeeeee;
	     border-color: #000000;
	     border-style: solid;
	     border-width: 4px;
	}
	.contentDiv {
	    
	    display: inline-block;
	    width : 200px;	
	    height: 150px;
	    
	    /*Optional:-Just for Demo UI*/
	    background-color: #bbbbbb;
	    border-color: #0000ff;
	    border-style: solid;
	    border-width: 2px;
	}
	</style>
    <body>
	<div class="containerDiv">
		<div class="contentDiv">		 
			Horizontally and Vertically Center Div.
		</div>
	</div>
    </body>
</html>

Hope this will helpful for someone.

Difference between $routeProvider and $urlRouterProvider

If you are not very experienced with angularjs than you will be probably confused with uses of “$routeProvider” and ‘$urlRouterProvider‘.In multiple sample applications over the internet you will find that out of these two,only one is being used.

Module name for ‘$routeProvider’ is ‘ngRoute’ for ‘$urlRouterProvider’ it is ‘ui.router‘.
ui.router is a third party,you can check below url for details of ‘$urlRouterProvider‘:-

https://github.com/angular-ui/ui-router/wiki/URL-Routing#urlrouterprovider

‘ngRoute’ takes care of urls for routing while ‘ui-router’ takes cares of ‘states’ additionally other than urls.States will be helpfull for making nested and complex views.One can even pass information between states with the help of ‘$stateParams’.

In ‘ngRoute’ you write links as:-

  <a href="">

But in ‘ui-router’ links are generally written as:-

  <a ui-sref="">

though

  <a href="">

will also work fine.

For simple application used ‘ngRoute’ and for complex UI based larger applciations use ‘ui-router’.

So ‘ui-router’ provides all features which are there in ‘ngRoute’ plus multiple additional feature which are good for a large application.

Hope this will helpful for someone.

Understanding Front-End Developer Role and Responsibility

  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.

  • -Developing new cutting edge front end with modern technology.
  • -HTML, Java Script,CSS3
  • -AJAX, XML, JSON
  • -Consuming REST and SOAP based services.
  • -Partial loading of web pages.
  • -Application structure for Single Page Application.
  • -Responsive Web Design
  • -Writing reusable code and libraries similar to server side technology for future usages
  • -Modular coding i.e. Custom Components.
  • -Application Performance for loading and data consuming.
  • -Confirming technical feasibility of UI/UX designs
  • -Choosing right technology out of multiple JS frameworks and Libraries.
  • -Understanding of SEO
  •  -Validations and regular expressions
  • -Applying Transitions/Effects and Animations via coding on demand
  • -Thinking beyond the tabular Data related applications.
  • -Understanding of server side architecture of application/database for assisting back-end developers.
  • -Client side MVC (This is most important as it requires same depth of knowledge which is normally used as server side developer)
  • -Test Driven Development with Modern Tools

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.