Job Description: Front-End Developer

When I first started building/designing websites back in 2006, I had the impression that the term “Web Designer” could cover everything from PHP to HTML to pure Design work (Fireworks, Illustrator, Photoshop).

Luckily, by following the right people, who with their articles and talks define the web of tomorrow, I got a solid understanding of who’s-doing-what in the industry. Today we’re going to focus on the infamous Front-End Developer.

I’d describe a Front-End Dev guy as a “maestro” of a web project. He gets input from Back-End, Middleware, Designers and Managers and he crafts the final result. He is the one who will be in the first line if something goes wrong, even if he has no direct responsibility (technically).

What a Front-End Dev is not: A PHP/JAVA/.NET Developer, a SEO/Web Analytics expert, an Illustrator/Interface Designer.

Still, he ought to understand and be able to easily manipulate all of the above in order to tweak his projects. He has to know every single CMS out there, so he can integrate his HTML/ on it. He has to be able to easily slice a graphic, or change the text in a Photoshop Layer – so he does not have to go through the Design team every single time.

What a Front-End Dev should master: HTML, CSS, DOM structure & manipulation, JavaScript (frameworks such as jQuery).
In his article “Interviewing a Front-End Engineer”, Nicholas C. Zakas, Senior Front-End Developer in Yahoo!, writer and contributor to the YUI library, quotes his list of things any Front-End from Junior to Senior should know:

  • DOM structure – how nodes are related to one another and how to traverse from one to the next.
  • DOM manipulation – how to add, remove, move, copy, create, and find nodes.
  • Events - how to use them and the major differences between IE and the DOM event models.
  • XMLHttpRequest – what it is, how to perform a complete GET request, how to detect errors.
  • Strict vs. quirks modes – how to trigger each and why this matters.
  • The box model - how margin, padding, and border are related and how Internet Explorer < 8 does things differently.
  • Block vs. inline elements – how to manipulate using CSS, how they effect things around them and your ability to style them.
  • Floating elements – how to use them, troubles with them, and how to work around the troubles.
  • HTML vs. XHTML – how they’re different, why you might want to use one over the other.
  • JSON – what it is, why you’d want to use it, how to actually use it, implementation details.

Of course, if you go round the job boards, you’ll see any possible combination of requirements. In my opinion, you either get someone who is average in several different things, or two guys who master their fields each. You’ll probably be thinking now: “Too Expensive“, but think again: Are you forgetting hidden costs, such as discovering a major bug on the day of your product launch, just because your “average” know-it-all developer missed “one minor detail” (which can be the difference between success and failure – often the case)?

-Home