How to be a front-end engineer

“As far as the customer is concerned, the interface is the product.” – Jef Raskin

For the last few days I’ve been researching on “front-end engineering”. As Mark Meeker says, it has other names like “front end development” or “UI engineering” or “web development” or “web production”. Whatever we call it, it is out there and it has got great attention for the last few years. To get some interest, lets see a slide show “Introduction of front-end engineering” by Mark Meeker.

If you search at job sites, you will get many positions out there. But if you do Google for “Front-end engineer” you won’t get much resources compared to other rules in the web development industry. It’s so sad. So here, I will describe (mainly link to other resources out there) what I’ve got from research. I’ve divided the process into few steps. I know, many won’t agree with me. But it’s just what I understood and may help many people like me (web designer) who is searching for a way to make a great future.

1. Designer phase
2. Markup or CSS/XHTMLizetion phase
3. JavaScript phase
4. Professional Front-end Engineering phase

 1. Designer Phase

You are a graphics or web designer. You can design eye catching layouts. Know web 2.0 trend very well. You follow the latest web trends. Typography, layout structure, grid based design, simplicity, contrast, color you know each of them very well. You are pixel perfect ninja with your design skills. At the end of the day, you have to develop the layout from those design or the design team can provide you that. It may be a Photoshop or Illustrator composition or may be any other graphics software. You must know how to handle raw files of the graphics software very very well. I saw at some front-end engineer job description that “you must be able to fix single pixel destruction from a given design.”

Here you will deal with and better you make yourself master of them:

* Design concepts
* Grid System
* Typography
* Color Concept
* Contrast
* Screen Resolution
* Illustration
* Sketching
* Web 2.0 design trends
* Adobe Photoshop
* Adobe Illustrator
* Adobe Fireworks
and any other graphics software you prefer.

Updated link:

50 Totally Free Lessons in Graphic Design Theory

 2. Markup or CSS/XHTMLizetion phase

Before this phase, you are just a graphics designer. Because web designers must have markup skills. So, this phase is very much important to be a front-end engineer. You have to dedicate you life at this phase. It may be your composition/design which will be sliced and turned into markup. Or other designer or design team will provide you the layout for markup. It could be Photoshop, Illustrator, Fireworks and any other graphics file format. This must be a raw file format with capability of editing. And you will just make it alive with XHTML and CSS.

In this phase you will be a XHTML/CSS hand coding ninja. Your code will be valid, standard compliant.  You play with accessibility and usability every now and then. Search Engine Optimization (SEO) is on your fingertips. You are the clever divider of content and presentation. You make it’s shape fixed or liquid. Cross-browser compatibility is your only countable enemy. But at the end of the day YOU always win. You the man who can give soul to the web page – it’s you who will make it best or worst!

You will be a master of:

* HTML / XHTML / HTML5
* CSS / CSS3
* Progressive Enhancement
* Search Engine Optimization (SEO)
* Accessibility
* Usability
* CSS Frameworks
* Cross-Browser compatibility
* Debugging and fixing codes (with Firebug, IE Developer Tools, YSlow etc…)

3. JavaScript phase

Before this phase, we are in almost static position. We can change images on hover by CSS, but they are up to very limited stage. In this phase, we will be functional and dynamic by the world’s most used programming language, JavaScript. You will be able to manipulate in any way by Document Object Model (DOM). You know too much in depth of a HTML/XHTML document structure. You could be able to bring determinism in a static HTML/XHTML document by using DHTML. If you search at the job site for front-end engineer, each any every job requirement mentions “You must know JavaScript more than you own hand.” So, you eat, sleep, play, joke, dream, talk with JavaScript in this phase. The better you know JavaScript the better it is for you to be a Professional front-end engineer. You also know various JavaScript frameworks. Most of the works are done by the framework now a days. So you must know more than 2 frameworks to work with.

You will be a master of:

* Document Object Model (DOM)
* JavaScript
* DHTML
* JavaScript libraries (incliding jQuery, YUI Library, MooTools, Dojo, Prototype, script.aculo.us and many more)

4. Professional Front-end Engineering phase

Now we’ve come to the serious phase. At this phase, you will be responsible for managing the web site like Yahoo!, Google along with a team of talented people. You will be a master of your profession in all directions. You make decisions depending on experience with the help of cutting edge technologies. Actually you will introduce new way of solving problems.

Nicholas C. Zakas is currently the principal front end engineer for the Yahoo! homepage and is a contributor to the Yahoo! User Interface (YUI) library, having written the Cookie Utility, Profiler, and YUI Test. Author of many books on JavaScript. He described What makes a good front end engineer?   He also described the process “Interviewing the front-end engineer” and how to “Surviving an interview with me.”  Definitely you will get an idea of what is professional front-end engineering work by reading his blog.

Another Yahoo! guy, Nate Koechley have released a video about “Professional Frontend Engineering”. May be one of the best ways to understand what is professional front-end engineering and how it works. You will get the full transcript of that video here.

* AJAX
* HTTP Request
* Site Security
* JSON
* Web Service
* XML / XSLT
* Team Management

Other Qualities you must have:

Communication: You have to be a great communicator if you want to be a  professional front-end engineer. As Nicholas C. Zakas mentioned at his What makes a good front end engineer? article, you have to communicate effectively with product managers, User interface designer, Engineering management and end users.

Self Learner: Front-end engineering is the most self learning role in the computer science industry. Almost every guy in this profession are self learned. We haven’t been taught  our skills at college or seminars. And as is stated before, there is not much resource in the web too on the topic. It is very hard to find a professional front-end engineer to help you out.

Problem Solving: There are many ways to solve a problem. You must be a master of solving a problem in as much ways as possible.

Quick Learner: Nicholas C. Zakas says “A good front end engineer needs to be able to pick things up quickly. The technologies powering the Web aren’t standing still, people. I’d go so far as to say things are changing on almost a daily basis and it’s up to you to keep up with these changes. There are always new techniques and paradigms to consider and digest as part of your discipline; you cannot just rest on what you know today. The Web of tomorrow will be drastically different from the Web of today and it’s your job to understand what that difference means to your web application.”

Get real life requirements and responsibility for front-end engineering

The best way to get  a job requirement is in the job sites. Search for “front-end engineering”, you will get lots of jobs with requirements. Which could guide you a long way. There you will get what kind of responsibilities you have to maintain. So you could prepare yourself.

* Smashingmagazine
* Simply Hired
* Yahoo! Jobs
* Indeed
* 37signals Job Board
* Krop
… and thousands more job sites.

Slide Shows:

Introduction to Front End Engineering

Front end engineering, YUI Gallery, and your future

Note: Special  thanks to Shahriar Hyder for helping me on this article.