Happy Coding !!: May 2016

Saturday 7 May 2016

Responsive Web Design

Image Courtesy from Internet

Itself this picture tells about the idea of Responsive Design. RD is used too make your web page interactive and looks good and easy to use irrespective of devices.

At present and near future there is various number of devices with various resolutions will be invented, and its not impossible but tedious to write code for each and every resolution, to solve this problem there is phenomena came into light that is called Responsive Design.

RD is separated from programming part, its only deal with HTML and CSS.

Responsive Design Consists of :

Flexible Layouts
Media Queries
Flexible Media

Flexible Layouts :

This means a view with a dynamic grid which can easily re-size to any width.
Flexible grids uses relative length unit, em or %. Relative length are used to add margin, padding, width properties.
In Flexible Layouts don't use large fixed width element, it can cause the viewport scroll horizontally.

Flexible Layout can be divided few parts :

ViewPort :

ViewPort is the User's visible area on device.
ViewPort used meta tag which instruct browser about width and scaling on device.
Meta tag always included in <head> tag.
For example :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width : This sets the width of page according to device resolution.
initial-scale : Sets the initial zoom level on first time page loaded.
If there is no meta tag then all the content will get shrink on different devices excluding browser.
Content inside viewport shouldn't rely on any particular viewport width.

2. Grid View :

Grid View is very helpful in displaying elements into different section or places. Usually responsive design has 12 columns and width will be 100% for each sections.

Media Query :

While making flexible layout once viewport separated into sections after calculation of % partitioned by coulmns of page which can be too little or too large to show on devices. This can be break the layout, in this situation Media Queries will assist.

This is introduced in CSS3.

We can write the different style css for different devices and browsers.

Media Queries can be used in many ways as

In HTML :

<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

In CSS : To add an existing CSS file,

@media rule

To import new CSS :

@import rule, i.e. @import url(styles.css) all and (max-width: 1024px) {...}

Its recommended to use @media rule to avoid additional HTTP requests.
Always Design for Mobile First this will help page to get load faster.
Internet Explorer 8 or older doesn't support media query. For this add media-queries.js Or respond.js to add media query support in IE.

Flexible Media :

Final important aspect of Responsive Design is Flexible Media, its required because Flexible layout always not work in case of Media's (Images and Videos). Media needs to be scaleable as viewport started to change the size.

It can be fixed by using "max-width" property with a value of 100%. This can make media scaleable according to viewport.

video {
max-width: 100%;
height: auto;
}

But for many third party videos max-width property is not working because it can not scale larger then the original size. To resolve this problem "width" property used. If width is set to 100% it can scale the video larger then original size.

video {
width: 100%;
height: auto;
}

Few Responsive Design Framework Free to Use:

1) W3.CSS

2) BootStrap

3) Skeleton

I will go for example of Responsive Design in next part.

Wednesday 4 May 2016

AngularJs :: Create Custom Directives

AngularJs has an essential segment called "Directives", used to enhance the capability of HTML by extending its attributes and making new one as your application requirements and with numerous implicit one's.

Directives used to manipulate DOM elements and also it can change the behavior of DOM element by adding custom functionality.

Image Courtesy from Internet

AngularJs built-in directives :

ng-init
ng-app
ng-click
ng-show
ng-model
ng-repeat

Image Courtesy from Internet

By using 'ng-' prefix, AngularJs directives extends HTML attribute.

Sometimes a question popups into our mind that why Directives used?

Directives are designed to create standalone reusable component which can be used in applications required an existing element with different functionality. Very common example is <input> button with date-picker functionality.

Directives used to make HTML more interactive by adding event listeners.

Best Practices : All DOM manipulations should be done by directives only no controller should be involved to manipulate DOM.

To create a your own directive (Custom Directive), there is a list of steps :

Create a new html tag like <test></test>.
Name of html tag should follow the camelCase naming convention. If directive name is like "myTestTag", then this should be invoke like <my-test-tag>. Name should be separated by -.
Define custom directive using .directive function with the same name as custom html tag.

Below is the example of custom directive :

var app = angular.module('myapp', []);
app.directive('test', function() {
  return {
      restrict: 'AE',
      template: '<h3>Hello World!!</h3>'
  };
});

Here,

directive function used to create directive which returns an object called as Directive Defination Object(DDO) in its callback function.
'restrict' option used to specify that how directive will be used as element, class, or attribute.
There are few predefined valid values for restrict option.

'A' - directive will be used as attribute i.e. <div test></div>
'E' - directive will be used as element i.e. <test></test>
'C' - directive will be used as class i.e. <div class="test"></div>
'M' - directive will be used as comment i.e. <!- directive:test ->

By default restrict has option 'EA' that is we can use it as class and attribute.
Its recommend that custom directive doesn't support by IE and older browser so we should not use it as element.

A custom directive just replaces the component for which it is initiated. AngularJS application during bootstrap finds the matching components and do one time action utilizing its compile() method of custom directive then process the element using link() method of the custom directive based on the scope of the directive.

Another option of DDO object is 'scope', used to distinguish each element based on criteria.

Found a very simple example of custom directive usage here.

Hope this article will be useful.

Happy Coding !!

Total Pageviews

Saturday 7 May 2016

Responsive Web Design

Wednesday 4 May 2016

AngularJs :: Create Custom Directives

Microsoft Logo using flexbox and Reactjs

Search This Blog