Frontend engineering as it stands today is a bit of vague and unspecified territory, it’s still not clearly understood may be because of the lack of clarity around stuffs a frontend engineer does. To simply put, frontend engineering means understanding the browsers best, the work of a frontend engineer is what you see when you do “view source”. So, how can you become a frontend engineer? In this post I’ll list down some of the things that a would be frontend engineer should know about. Frontend engineers write software using HTML, CSS and JavaScript, and yes I meant ‘writing software’, because if you look at modern day web applications like Gmail, Yahoo! Mail, Google Wave all are complex applications which involves significant amount of JavaScript, CSS, HTML and other technologies. So basically it means a frontend engineer should be specialized in HTML, CSS and JavaScript.

Below are the list of things that I would expect to see in a would be frontend engineer:

• Semantic and non-semantic markup – Understanding the differences between semantic and non-semantic HTML is a key area in web development, in HTML we have different tags with different semantic meaning, a frontend engineer should know which tag to use when, it’s not a good practice to use <DIV> tag to display paragraphs even if both <P> and <DIV> visually look similar.
• Rendering modes – Every browser for the sake of backward compatibility has implemented two types of rendering modes, and browser’s use DOCTYPE tag as the rendering mode switcher. It’s important to know about rendering modes because they drastically affect the way browsers render a webpage. Primarily, there are two rendering modes “Standards mode” and “Quirks mode”, some browsers even have “almost standards mode”. In “standards mode” browser will try to display a webpage in the most efficient way possible, where as in “quirks mode” browser will display the page in a backward compatible way.
• Structure, presentation and behavior – These are the key design elements in building websites. The structure (HTML), presentation/styling (CSS) and behavior (JavaScript) should be separated out, which helps make you page modular and maintainable. Remember it also speeds up your site, because the presentation and behavior layer will likely be cached by the browser, which results in faster downloads. Use meaningful markup with Class and Ids as the possible hook for adding styling and behavior. Never use inline event handlers in your HTML, instead use Unobtrusive JavaScript to attach event handlers, which helps keep the markup clean.
• Ability to hand code your HTML – There are some WYSIWYG editors out there in the market, but I would recommend not to use any one of them, instead learn to write HTML by hand coding, because this will give you the ability to create a visual picture of your page layout in your mind, if you continue this practice after some time you will notice that you can almost tell how many DIVs you need to create a particular layout just seeing that design. Remember that all those big web applications out there were created by hand coding HTML and CSS, once you are proficient writing HTML then you can use some code auto-completion utilities to speed things up a little bit.
• CSS and browser quirks – The CSS stands for ‘Cascading Style Sheets’, here ‘Cascading’ means a way to determine which CSS rules are going to apply on a particular element. So it’s important to know how Specificity, Order, Inheritance and above all the Box Model are being calculated. Some browsers have terribly wrong implementation of some CSS standards so it is important to have the knowledge regarding browser workarounds, there are CSS hacks and fixes available for some browsers most notably Internet Explorer, which you can use or you might consider using _conditional-comments a_s a way to include special style sheet for that depending on your needs. Another thing in this context is the knowledge regarding ‘hasLayout’ concept in IE6/7, this concept is one of the main reasons behind CSS bugs in above mentioned browsers.
• JavaScript Language – Learn this language, it’s no toy language anymore and it’s not even distantly related with Java excluding the naming similarity. It is an Object-oriented language with prototypal inheritance pattern. This is the language which drives modern day web applications, since the advent of Ajax this period has seen a tremendous growth of JavaScript. I believe that the way HTML5 is heading this language is going to be one of the most important programming languages in the next decade. JavaScript was designed in a hurry, so there are some rough edges and some incorrect implementation, hence it’s important to know the good and bad parts of the language. In modern web applications JavaScript interacts heavily with DOM(Document Object Model), so having a good understanding of DOM methods, traversal techniques, DOM manipulation are necessary. I recommend picking up Professional JavaScript for Web Developers.
• JavaScript and CSS Frameworks – Once you are well familiar with all the above concepts, it’s time to pick up few JavaScript and CSS frameworks. Nevertheless, the JavaScript Frameworks that you should check out are jQuery, YUI and Dojo etc. and for CSS Frameworks there are OOCSS, 960.gs and Blueprint etc.. Even though you can go through with those libraries, I would recommend you should go through their source code whenever possible, this will give you a lot of insight into what’s happening and how those libraries have organized their code, you’ll learn a lot, I guarantee.
• Website Optimization – This is a very important point, and you just cannot ignore it  anymore. Latency is one of the main reason behind slow websites, but you can do very little about it, so focus on areas where optimization can give you significant result. Learn how to cache your assets using proper HTTP headers, serve your assets using Gzip, optimize images (there are some good tools around one example is SmallerMaker ), know how browsers do parallel downloading, consider using ‘Lazy Loading’ techniques, load scripts on-demand/on the fly when required and use CSS sprites where suitable(although you can take a peek at Data URIs). For more info check out stevesouders.com.
• Staying up-to-date – The frontend technologies are changing almost everyday, so it’s very necessary to stay up-to-date, you got to keep an eye on the stuffs happening around JavaScript, HTML 5, CSS3 and other best practices, which will help you gather information and knowledge upfront, which you can later use in your work.
• Communication and co-ordination – Last but not the least, this is a very important job that a frontend engineer has to do everyday with his peers, managers and creative designers. He/she has to communicate well in terms of what can be possible in the browser, how changing something can improve or degrade accessibility or performance. I have seen designers often like to design interfaces by pouring every bit of their creativity and aesthetic sense, which is a good thing definitely, but in a real world implementing those interfaces using HTML/CSS is sometimes impossible, hence it is the frontend engineer who should actually communicate with the designers about what can be done and what can not. In some cases he/she often has to push back some features which might introduce too much complexity or impact the performance of the application as a whole, and while doing so I would expect that a good frontend engineer to come out with alternate solutions in a constructive way. As frontend engineers sit somewhere between middle-tier, creative and product management, so their efforts are directly related with these people, communicating and coordinating properly will definitely serve well.

Well if you want to be a frontend engineer make sure that you know stuff I mentioned above, these are just the beginning by the way, there are a lot of things that you will learn eventually, but don’t forget to make sure that your base is strong, do a lot of practice, ask questions, read articles and blogs and finally think like a frontend engineer. All the best.

Disclaimer: The use of the word ‘engineer’ is not meant to do anything with ‘Engineering discipline’ at all, I know traditional engineers do a lot of hard work to achieve that academic qualification, as working in Frontend also involves similar amount of hard work that’s why the term has been used here to refer the collective effort of these hard-working people.