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.

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.

Hot Topic :: AngularJs vs jQuery

Its been a while when AngularJs came into the market and changing the era of browser based application development. Its already being liking by the developers and clients.

Before AngularJs :

1. jQuery is used to manipulate and control DOM elements and also it solved the problems with IE , AJAX and made easier to deal with DOM elements.
2. jQuery is a library mainly used for animation and AJAX.
3. It’s lightweight and fast.
4. Using this we can apply styles to UI to make UI attractive.
5. As we know it’s a library so we can fully/partially or can no use inside our application.
6. For creating a website jQuery is enough alone.
7. It becomes complex when the size of project increases.
8. To build a normal web app with less view and less user interactivity, should use jQuery.

After AngularJs :

1.       AngularJs is a framework so while using it one should follow the rules of framework.
2.      Used to create Single Page applications with lots of interactivity.
3.          It’s a MVVM framework.
4.          Its having 2 way data binding.
5.          Containing directives to enhance DOM elements, built in as well as custom.
6.          It is modular.
7.          All features of jQuery is embedded in Angular called jqLite.

However, both are comes with a very different ideology. So there is no sense to compare them.

Still there is a brief difference i have written above to make few things clear about both.

AngularJS : Simple Example of Adding Student Data Using Table

Below is a very simple example of AngularJS to explain few important directives which we gonna use from very start.

First, we need to know what are directives basically?
So, To enhance our HTML, AngularJs provides us some in built attributes called "Directives",  but we can also create our own directives which we will discuss later.

ng-app : This  initializes AngularJs application i.e. The first ng-app found in the document will automatically initializes application when web page is loaded. This defines a root element of an AngularJs  application.

ng-model : This binds the value of HTML element to application data. This binding goes both ways i.e. if value of HTML element is changed then AngularJs property automatically getting updated without refreshing a page.

ng-click : defines AngularJS code that will be executed when the element is being clicked. This directive comes under AngularJs Events.

ng-controller : The ng-controller directive defines the application controller,created by a standard JavaScript object constructor.
The StudentController function is a JavaScript function. AngularJS will invoke the controller with a $scope object which is the application object i.e. we can access any function and properties through this.
The controller creates properties in the scope.
The ng-model directives bind HTML elements to the controller properties.

In below example we can see the use of all the directives above explained in short obviously..;)

Example

<!doctype html>
<html ng-app>
<head>
<title>Simple TableRow Addition</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body ng-controller="StudentController">
<table>
<thead>
<tr>
<td>
<label> User: </label>
<input type="text" placeholder="Enter Name" ng-model="name" />
</td>
</tr>
<tr>
<td>
<label> Age: </label>
<input type="number" placeholder="Enter Age" ng-model="age" />
</td>
</tr>
<tr>
<td>
<label> Class: </label>
<input type="text" placeholder="Enter Class" ng-model="uclass" />
</td>
</tr>
</thead>
<td align="right">
<button type="button" ng-click="addUser()"> adduser </button>
</td>
</table>
<table border="1" cellpadding="10">
<thead>
<tr>
  <th>
 Name
  </th>
  <th>
 Age
  </th>
  <th>
 Title
  </th>
</tr>
</thead>
<body>
<tr ng-repeat="user in users">
  <td>
{{ user.name }}
 </td>
 <td>
{{ user.age }}
 </td>
 <td>
{{ user.uclass }}
 </td>
</tr>
</body>
</table>
<script>
function StudentController($scope)
{
$scope.users = [];

$scope.addUser = function(){
$scope.users.push({name : $scope.name,age:$scope.age,uclass:$scope.uclass});
}
}
</script>
</body>
</html>

Result : 

A Very Common Question : Difference between $(document).ready, $(window).load

I just want to simplify the difference between these two JQuery functions.
So as far as i understood the things between two listed below :

Before writing difference just to mention few things if anyone doesn't know i.e.

"$"  is a way to access/define JQuery.
"(document)" inside bracket we mention HTML elements on which we want to perform some actions and specifically it is called as "selector".
And .ready is function which is called to perform action.

$(document).ready :  This event occurs once HTML document is loaded and DOM tree is created and JavaScript code ready to manipulate elements. 

• HTML document : This is document based on HTML tags and provides special meaning to the texts written in between.

• DOM tree : DOM tree is a cross platform and language independent hierarchy of elements associated inside the HTML page. This is itself is a vast topic of discussion so we will discuss this later in brief.

$(window).load :  This executes later, once all the content of document is fully loaded.

For Example : If there is document containing many images then $(document).ready will trigger without loading images but $(window).load will not fire until loading of all the images is not completed. 

Its a best practice to write all jquery functions inside document.ready.

Try to Check :

<html>

<head>

    <script src="jquery-1.9.1.min.js"></script>

    <script>

    $( document ).ready(function() 

    {

        alert( "document loaded" +Idev);

    });

    $( window ).load(function() 

    {

        alert( "window loaded" +Idev);

    });

    </script>

</head>

<body>

    <div id='Idev' src="https://www.blogger.com"></div>

</body>

</html>