Need a candidate who can control DOM

Document Object Model (DOM) is an Application Programming Interface (API) for HTML and XML. I was reading this article at Mozilla Developer Network (MDN) and it has mentioned that DOM is a fully object-oriented representation of web page and we can modify its content and control the visual representation (CSS/styling) by using client side scripting languages like JavaScript.

If the DOM can be controlled by JavaScript for both modifying the content and to control its visual appearance then why a front-end developer is always deprived from writing JavaScript? You may say: No. He/she writes JavaScript for showing/hiding elements, and to create a modal dialog, or to develop some widgets like tabs and accordions. But, we never let him/her write business logic. Wait. That’s the point where you are under-utilizing your resources. Let them write the business logic. Everyone can learn, everyone can improve, and everyone can contribute. Just give them that opportunity—start with small.  

A front-end developer whose job is to create DOM is not allowed to control it with JavaScript and the JavaScript developer who knows very less about DOM is allowed to control it. Isn't it strange? Are we actually letting the right people do the right job, or we are making the working system more complex? Wouldn't it be great if all front-end developers know JavaScript and all JavaScript developers understand the DOM as a first step in development?

It is absolutely necessary to create such all-rounder developers in the organization itself instead of separating these two essential parts of DOM.

The requirements are changing in IT industry today. Most of the companies are looking for the candidates who have in-depth knowledge of the DOM and JavaScript. A few people succeed in it and the majority settles for the one half of it compromising the other. How can we expect such a blend when we haven’t created one?

Basic HTML structure/skeleton with CSS Flexbox Layout

We need some kind of miracle to get rid of IE8 and IE9 and start development with the IE 10+ version. I do understand—It will take some more years for it to happen. But, if you are working on a project that needs compatibility only for the latest and greatest browsers—you can start with flexbox layout right now. Most of the flexbox properties work very well in IE 10 with -ms- prefixes. Here's more on Flexible box ("Flexbox") layout in Internet Explorer 10.

Keeping the restriction in mind I thought of putting up a plain HTML page skeleton with CSS Flexbox which works as a liquid layout without any width and height properties specified.

My previous post [ CSS Flexbox explained with examples ] focuses on the real-world scenarios where the flexbox properties work as life-saver. With it, I can proudly say No to the floats, widths and heights. Also, to the overflow in some cases so that I don’t have to worry about the elements overlapping or adjusting the widths pixel-by-pixel to keep them aligned. Flexbox does it for me.

Here is a Fiddle: http://jsfiddle.net/KKp2c/5/



Related articles:
- CSS Flexbox explained with examples

CSS Flexbox explained with examples

The CSS flexbox layout is the widely discussed/suggested/encouraged/used layout of these days. You must be wondering why? Why is that many developers give that ah! look when they are advised to use flexbox? Well, it's because it provides the most efficient way of aligning, resizing, stretching the elements in the most appropriate way. It is a big help in laying out the dynamic layouts, because it stretches and shrinks depending on the available space. No JavaScript required.

Browser Support to flexbox: http://caniuse.com/#search=flex

Here are some examples with the use cases:

1. Vertically center align content with CSS flexbox: (align-items: center | justify-content: center; )
Demo: http://jsfiddle.net/k72uf/

Vertically center aligning the content with CSS has been always a big issue for developers. From IE8 and above they could use display: table-cell; property, but the new and fancy flexbox gives more flexible way of vertically center aligning content. Here is the code:

.flex-container{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 350px; 
  background: LightSeaGreen; 
}

2. Flex Directions: (flex-direction: row | row-reverse | column | column-reverse;)

flex-direction: row; Demo: http://jsfiddle.net/x83Pu/ 

.flex-container{ 
  display: flex;
  flex-direction: row;
  border: 2px solid SaddleBrown; 
}
.flex-container div{
  width: 100px; 
  height: 100px; 
  margin: 4px; 
  background: chocolate;
}
.wrap{
  flex-wrap: wrap; 
  flex-flow: row wrap;
}

flex-direction: row-reverse; Demo: http://jsfiddle.net/7UBTL/1/

.flex-container{
  display: flex; 
  flex-direction: row-reverse;
}

flex-direction: column; Demo: http://jsfiddle.net/C3rdD/

.flex-container{ 
  display: flex; 
  flex-direction: column; 
  height: 350px;
  border: 2px solid SaddleBrown; 
}
.flex-container div{
  width: 50px; 
  height: 50px; 
  margin: 4px; 
  background: chocolate; 
}
.wrap{
  flex-wrap: wrap; 
  align-content: flex-start;
}

The reverse property for columns works same as the row-reverse.

3. Item orders: (order: integer)
By default the flex items are placed in source code order. The order property helps in controlling the order by which the child elements are placed in the flex container.
Demo: http://jsfiddle.net/z96C7/

.container{
  display: flex; 
  flex-direction: row; 
  border: 2px solid SaddleBrown;
}
.container *{ 
  background: ForestGreen; 
  color: white; 
  margin: 4px;
  flex-basis: 100px;
}
.container header{ order: 3; } 
.container nav{ order: 1; }
.container article{ order: 2; }

4. Alignments: (justify-content | align-items | align-self)

justify-content: (flex-start | flex-end | center | space-between | space-around | inherit)
Demo: http://jsfiddle.net/Kj9KY/

.flex{
  display: flex; 
  margin: 0 0 30px 0;
  border: 2px solid ForestGreen;
}
.flex div{ 
  background: OliveDrab; 
  color: white; 
  width: 50px; 
  height: 50px; 
  margin: 4px; 
}

.start{ justify-content: flex-start; }
.end{ justify-content: flex-end; }
.center{ justify-content: center; }
.space-between{ justify-content: space-between; }
.space-around{ justify-content: space-around; }

align-items: (flex-start | flex-end | center | baseline | stretch)
Demo: http://jsfiddle.net/2x4Xq/1/

.flex{
  display: flex; 
  flex-direction: column;
  margin: 0 0 30px 0; 
  height: 300px;
  border: 2px solid ForestGreen;
}
.flex div{  
  background: OliveDrab; 
  color: white; 
  height: 50px; 
  width: 50px; 
  margin: 4px; 
}

.start{ align-items: flex-start; }
.end{ align-items: flex-end; }
.center{ align-items: center; }
.baseline{ align-items: baseline; }
.stretch{ align-items: stretch; }

5. flex-basis:
It specifies the initial size of the flex items. But, its behavior depends on the flex-direction property. If the flex-direction is set to row--the initial size works as width, and if the direction is set to column--the initial size works as column.
Demo: http://jsfiddle.net/3Lamd/

.flex{
  display: flex; /*flex-direction: row;*/
  border: 2px solid ForestGreen; 
  margin: 0 0 30px 0;
}
.flex div{  
  flex-basis: 100px;
  background: OliveDrab;
  color: white; 
  margin: 4px; 
}
.column{ flex-direction: column;  }

6. flex-grow:
Demo: http://jsfiddle.net/V7hA3/

.flex{
  display: flex; 
  border: 2px solid ForestGreen;
}
.flex div{  
  flex-basis: 50px;
  background: OliveDrab; 
  color: white; 
  margin: 4px; 
}
.grow{ flex-grow: 3; }

7. flex-shrink:
Demo: http://jsfiddle.net/GyBjQ/

.flex{
  display: flex; 
  border: 2px solid ForestGreen;
}
.flex div{  
  flex-basis: 200px;
  background: OliveDrab; 
  color: white; 
  margin: 4px;
}
.shrink{ flex-shrink: 3; }

There are a few more properties like: align-self | flex-wrap | flex-flow. I have used some of these properties in the examples above, I will put some examples of these soon possible.

Best shorthand to CSS border property

When I started coding CSS I coded the border property as:

.box{ 
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

And after a few months later I improved in coding the same property as shorthand:

.box{
  border: 1px solid blue;
}

If the border colors needed to be different, or if the requirement is like - I need left, right, and top borders but not the bottom border. To this, I used the property as:

.box{ 
  border-top: 1px solid blue;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  border-bottom: 0 none;
}

The above method can be improved with the new/unknown CSS border shorthand:

.box{
  border-color: blue;
  border-style: solid;
  border-width: 1px 1px 0 1px; /*top right bottom left*/
}

Check the demo: http://jsfiddle.net/X3QHc/

Here's how it works: 

.box{
  border-color: red green blue black; /*top right bottom left*/
  border-style: solid dotted dashed double;
  border-width: 6px 4px 2px 10px;
}

Check the demo: http://jsfiddle.net/X3QHc/1/

Related Articles: 
- Styling input type file
- IE 7/8 stretching background image to 100% width and height
- Change parent elements background image position on child mouseover

jQuery modal dialog popup window without plugin

I just googled for jQuery Modal dialog window and to my surprise, I saw some links that redirected me to some jQuery plugins which is not necessary for such a small task. I didn't see a pain and easy to understand solution to it. So I decided to put it up in this post.
 
Here's a simple jQuery Modal Dialog Popup Window that even works in IE7: Demo



Related Articles:
- IE 7/8 stretching background image to 100% width and height
- HTML - DIV vertically center align image/elements
- jQuery increase/decrease number in input field

AngularJS show hide html elements

AngularJS is becoming more popular in web application development day by day. And it is not as simple as jQuery. Its main focus is not DOM manipulation, but it's more in Data manipulation, and is more logical. It teaches all jQuery developers a more sophisticated way of coding where the developers understand the next level of OOP.

I miss jQuery a lot. Especially, the handy methods like show() hide(). If we want to get the same effect with AngularJS, we have to put some logic in controllers and implement it with ng-click, ng-class, ng-show, ng-hide. In this post I will write some simple and easy to understand examples for this most needed ng-hide and ng-show methods .

Show Hide DIV on Click: Demo



Toggle DIV : Demo 

Toggle DIV with Animations: Demo



Related Articles:
- AngularJS Add Class and Toggle Class
- AngularJS Toggle Class with Animation

Separate CSS for different browsers

It's a general expectation that the web application you are working on must be supported in all major browsers. Since the implementation of CSS properties in different browsers varies, they force front-end developers to write specific properties separately for them. There are some CSS properties that don't give similar result in all browsers. The most popular one is vertical-align; it behaves differently in chrome/firefox and in IE. The situation becomes even tougher when the client asks support for different versions of the same browser.

Here are some tricks that help developers serve separate CSS files/classes for different browsers and browser versions depending on the requirements.

Separate CSS for Mozilla Firefox - CSS only solution:
@-moz-document url-prefix(){
    div{ color: red; }
}

Separate CSS for IE version - with conditional comments:
The traditional code:

The HTML5 BoilerPlate code:

These conditional classes get appeneded in the <html> tag depending on the version you are using. For example, if you are using IE9, the '.ie9' class will get appeneded in the <html> tag which gives you an option to write CSS only for IE9 with '.ie9' class as a parent class -
.ie8 .className{ color: green; } /* This css will be applied to IE8 only*/
.ie9 .className{ color: red; } /* This css will be applied to IE9 only*/

Separate CSS for IE version - with jQuery:


Read more on jQuery.browser

Separate CSS for Windows OS Versions using javascript:
If you are supporting all versions of windows OS, these tricks can help you write separate CSS files for Windows OS versions.

For Windows 8: 

For Windows 7:

For Windows XP:

Read more on understanding user-agent string

Related Articles:
- Vertically center align image, DIV, and other html elements in IE 7 and IE 8
- Styling input type file
- Essential CSS Pseudo Classes