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