Saturday, June 21, 2014

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?

Monday, June 16, 2014

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 understandIt 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 browsersyou 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:

Related articles:
CSS Flexbox explained with examples