Overview of AngularJS

Prerequisite

• Basic knowledge of HTML
• Basic knowledge of CSS
• JavaScript Implementation

Why AngularJs?

• Two-way data binding - This feature provides the most convenient aspect of Angular. You no longer need to query DOM each time to update it.
• Dynamic HTML generation - The best of all
• Makes tasks like binding, templating, routing, and unit testing etc. much simpler
• Lightweight (< 36KB compressed and minified)
• Supported by IntelliJ IDEA and Visual Studio .NET IDEs
• Dependency injection: In Angular, you can inject as many dependencies as you want into a particular segment. You no longer need to create instances and initiate the dependency instances for using them.
• Less Coding
• Reusable Components
• There are multiple useful features, but these features above increase the preference for Angular over other JS frameworks.
• An Introduction
• Developed in 2009 by Misko and Adam Abrons
• Is open source and completely free
• Licensed under Apache and maintained by Google
• Powerful JavaScript Framework
• Used to create SPA projects

Features of AngularJs

• Used to create RIA
• Helps to write application using MVC Architecture
• Application in AngularJS is cross-browser complaint
• Automatically handles JavaScript code as per browser
• Data-binding
• Scope - Scope is a special JavaScript object, which plays the role of joining controller with the views.
• Controller - AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive.
• Services - AngularJS supports the concepts of "Separation of Concerns" using services architecture. Services are JavaScript functions and are responsible to do a specific task only. This makes them an individual entity, which is maintainable and testable.
• Filters - Filters are used to change and modify the data and can be clubbed in expression or directives using pipe character. Some basic filters are: uppercase, lowercase, currency, order by
• Directives
• Routing
• Model View Controller

Advantages of AngularJs:

• Unit Testing Ready
• Built by Google
• Great MVC
• Comprehensive
• Intuitive

AngularJs Popular Examples :

• Video Streaming Apps
• YouTube’s app for Sony PS3
• Netflix.com
• User-Review Applications
• GoodFilms offers movie reviews to the users
• Travel Apps
• JetBlue’s flight booking travel app
• Weather Apps
• Weather.com
• User Generated Content Portals
• Freelancer.com - Offers user-generated content
• Mobile Commerce
• MallZee
• e-commerce
• Amazon
• Social Apps
• LinkedIn

Top 5 Frameworks for the Future:

• Angular.js
• Vue.js
• React.js
• Aurelia.js
• Ruby

References

https://angularjs.org/

https://alternativeto.net/software/angularjs/

https://builtwith.angularjs.org/

ECMAScript 2015 (ES6) – New Features – PART 1

Constant:

We heard many times about Constant variables in Object Oriented Programming like C++, Java etc. now JavaScript also introduces the concept of constant variables in ES6(better late than never). Constant variables cannot change their values as they cannot be reassigned and their scope restricted to the block in which they declared. Also these variables declare using const must be initialized while declaration.

Example: const myVar = 5;

Default Parameters: 

Before ES6, we were setting hard coded values to the variables such as 0 (by default false in JS) or by using logical OR (||) operator which is not the good practice to code. But now we can set the default values of variables inside signatures of functions.

For example:

Now:

var myVar = function (val1 = 50, myColor = 'red', defaultUrl = 'http://www.google.com') 

{ 

    //code block

}

Before:

function myFuntion (x, y) {

x = x || 10;

y = y || 11;

console.log(x + y );

}

Block-Scoped Variables: 

Like “Orange is the new black” a well-known tv-series, In JS “let” is a new “var” which allows to scope the variable into the code blocks. You can differentiate between var and let here. let scope is only there till the scope of the block in which they defined as well as in any contained sub-blocks while scope of a var variable is the entire enclosing function. You can found the best example here.

function varTest() {

var x = 1;

if (true) {

var x = 2; // same variable!

console.log(x); // 2

}

console.log(x); // 2

}

function letTest() {

let x = 1;

if (true) {

let x = 2; // different variable

console.log(x); // 2

}

console.log(x); // 1

}

Block-Scoped Functions:

Earlier developers were bound to follow the IIFE (Immediately invoked function expressions) because of unavailability of global vs local scope proper differentiation but now with the ES6 new feature block scoped functions and variables situation is better now. This also avoids the hoisting situation, though hoisting is still existing but with the better error expression which are helpful for developers.

Example of hoisting in ES5:

(function(){

console.log(a); //undefined

var a = 10;

})();

Example of hoisting in ES6:

{

function foo(){

console.log(a); //reference error, a is not defined

var a = 10;

}

}

Example of block scope functions:

{

function test(a, b){

return a + b;

}

console.log(test(2, 3)); // print

{

function test(a, b){

return a * b;

}

console.log(test(2, 3)); // print 6

};

Advantage of block scoped functions is 1) we don’t need to write complex IIFE syntax and 2) we don’t need to store functions into variables instead we can pass parameters directly into function signature.

Such as: function (p1, p2….) {};

For more reference visit.

Arrow Functions: 

Also known as “fat arrows” because of its shorter syntax for writing function expression i.e. =>. Arrow function also changes the way of writing typical function expressions. If using an expression after an arrow, the return is implicit, so no return is required.

For example:

var myNumber = [1, 2, 3, 4];

Before...

var getOddNum = myNumber.filter(function(number) {

return number % 2;

});

console.log(getOddNum);

Now...

var getOddNum = myNumber.filter(number => number % 2);

console.log(getOddNum);

The major advantage of arrow function is that it changes the binding of “this” value.

In ES5, we have to store parent “this” value into another variable to use them further else they create their own “this” reference.

Example:

function exampleES5() {

this.seconds = 0;

window.setInterval(function() {

this.seconds++;

}.bind(this), 1000);}.bind(this), 1000)

}

var counterA = new exampleES5();

window.setTimeout(function() {

console.log(counterA.seconds);

}, 1200);

After...

lexical scope:

function exampleES6() {

this.seconds = 0;

window.setInterval(() => this.seconds++, 1000);

}

let counterB = new exampleES6();

window.setTimeout(() => console.log(counterB.seconds), 1200);

And while looking for few example I found very easy and best example here.

As I want to write about each and every new feature of ES6, I will continue this series in next parts.

Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf...

Importance of choosing website layout

While making websites responsive we heard many terms like fixed, fluid, responsive and adaptive. All these terms have different meaning and cannot be interchangeable. Depends on the usability we can decide which layout design suits best for website requirement.

As a web developer or web designer it is a considerable point that how your website will look like on different devices. So we have to keep the layout matching with the devices on which websites will display.

Fixed:
Fixed layouts are made of set width and height and elements inside the fixed width/height container also have a set height and width weather in pixels or percentages. Fixed or static layout designs remain same on different devices because it is set to not move on any resolution. But the web pages requires horizontal and vertical scroll to fit in the browser window or any other devices.

Fluid:
Fluid aka Liquid designs are created using percentage widths so that it can adjust according to the user’s device resolution. As the container’s width and height are in percentages hence child elements also adjust themselves proportionally because columns are relative to each other. On any device the look of fluid design will be same as elements width and height are set in parentage or em’s i.e. it will take “n%” of page width whichever is mention.

Responsive:
Responsive designs are created using media queries that are considered as breakpoints of general screen resolutions from extra small (mobile) to large (large desktop). This scale up images, wrap texts and adjust layout accordingly. Responsive design is mostly considered as mobile friendly approach to design layouts. Responsive design ensures that user will get best user experience of website while browsing on Desktops, Tablets, and Phone etc.

As said
"A fluid site is responsive, but not all responsive sites are fluid." --Sam.

In fluid layout suppose if element is set 50% of the page width then it will expand according to the screen size. This will look better on mobile devices but on desktop it will look unpleasant. So here comes the part of Responsive design where we can set target widths using media queries [@media screen only and (min-width:600px)] and reset width to be a smaller percentage, making it responsive.

Adaptive:
Adaptive layouts are same as responsive layout only difference between them is adaptive layouts changes according to the device only once when it is loading on browser. Adaptive layouts are not smooth as compared to Responsive layout. Adaptive layout always looks for points from where to adapt the change, this is neither fixed nor fluid.

To know more about the difference between Responsive Vs Adaptive.

while i was researching content i found an nicely written article which can help readers a lot to make their decision easy.

CSS Best Practices

I have always tried to write a perfect CSS, but I think nobody can say that they're written CSS is perfectly and optimized. May be, one can say that perfect CSS writing is a myth. But with the skills and experience you can write some good style sheets.

If you look for some suggestions to write a perfect CSS, than might be possible to get many different ways to write a good CSS because everybody will give their own perfect style codes suggestion.

Though I have tried to list down few practical points to write a better style sheet. These points surely will help you to make your CSS less complex, optimized and clean-up.

There are few points which needs to be keep in mind while writing a CSS.

• Stay organized while writing the CSS. i. e. Make sure your header, nav bars, main selectors should come first.
• Make your CSS readable.
• Create a logical structure of CSS. I.e. overrides, margins, links and types, main layout, secondary layouts, form elements, etc. depending on the application structure.
• Make sure CSS classes name must be in small case.
• Use “-” instead of “_”.
• Naming convention of CSS class must be meaningful and useful.
• Use short hand CSS.

                Example:

                             margin-top: 10px;

                                    margin-right: 24px;

                                    margin-bottom: 12px;

                                    margin-left: 0;

                   Use

                                    margin: 10px 24px 12px 0;

• Use External Style Sheets.
• Use hex color codes instead of color names.
• Try to use Reset.
• Use multiple CSS classes.
• Comment your CSS to make other understand well.
• Group the classes which can be repeat on mostly elements.
• Use margin:0 to make layout in centre.
• Use List to present data in a structured way.
• Shrink CSS file size so that CSS will be lightweight and loading time could be faster.
• Simplify css using equivalences or unique commands.
• Don’t use extra selectors.
• Try to make a library of common css classes.
• Use proper document structure.

CSS is easy to use and lightweight and loads faster. There are many more advantages of using CSS. It helps webpages to make responsive on any devices.

References:

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741

https://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/

http://learn.shayhowe.com/html-css/writing-your-best-code/

So Do You Think PhotoShop is Dead for Web Design?

So, let’s start with the flow. Since the ancient time of website making there is a simple flow our designer makes the design in the Photoshop and then developer start converting those .psd’s into the HTML. And this is how the design displays on our browsers and interactivity takes place by adding the scripts in the HTML.

Photoshop is a very powerful tool consisting many options like slicing, Pen Tool, and Lasso tool, etc. which saves a lot of time in designing static or dynamic web pages. 

Images, pictures are dominating social media and these pictures render in Photoshop. And to start making any website or web based work a strong knowledge of Photoshop is essential. Because to load images efficiently on the web, Photoshop’s image editing is a boon.

There are always two side of a coin.

Pros:

Helps to improve picture/image quality.

Helps to create digital image application.

Imported videos/Photos are organized.

For more reference visit here.

Cons:

This is not Open Source.

Not for beginners.

Advance feature may useless if one doesn’t knows about basic image editing features.

There are many image editing low expensive tools.

If you are really willing to try few another software’s, there are few good one here.

Page Layers

Canava

FlexBox

Still Photoshop has its own charm and no other tool can replace it. Into web designing slicing of images, creating logos, High Definition images are still being created in Photoshop.

References:

https://www.techwalla.com/articles/advantages-of-adobe-photoshop

http://www.online-sciences.com/technology/adobe-photoshop-advantages-and-disadvantages/

http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/

https://watb.co.uk/the-future-of-web-design-and-why-photoshop-isnt-dead/

https://fstoppers.com/education/photoshop-dead-interview-dave-doeppel-44195

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 :

1. Flexible Layouts
2. Media Queries 
3. 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 : 

1. 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.