Interviewing the front-end engineer
Interviewing a front-end engineer is an interesting task primarily because most are self-taught. Startups and large companies alike have equal trouble finding quality front-end engineers simply because they don’t know what to look for and which questions to ask. Having been around the industry for a while, I’ve developed my own methods for interviewing front-end engineers that I find to be very effective.
I’ve heard from candidates that I’m a tough interviewer, though I don’t try to do so on purpose. I believe the candidates think I’m tough because of the level of detail to which I ask them to answer questions. I’ve posted before about how to survive an interview with me and what I believe makes a good front-end engineer, and so my interviews are tailored towards the information in both of those posts. I don’t ask trick questions and I don’t believe in logic problems. All I want to do is figure out if you can do the job. And I do that in some simple ways.
Basic knowledge
We live a world where almost anything you want to know is accessible in 15 seconds through the Internet. However, having access to information isn’t the same as knowing how to apply it. There’s a certain base of knowledge that I expect all front-end engineers to have to do the job effectively. You can’t possibly meet deadlines if you need to stop and look everything up online, and so someone who says, “I don’t know, but I can find it online,” immediately raises a flag for me. Here are the things I expect a front-end engineer (junior through senior) to know without any outside help:
- 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.
Once again, all of this should be “top of your head” knowledge. All of my early questions are geared towards gaining your level of knowledge in all of these areas. This is not an exhaustive list by any stretch of the imagination but I believe that these are the building blocks you need to have a shot at success working with me.
Limited questions
I’m a big believer that the interviewer should ask as few questions as possible. Constantly asking a candidate to change direction is both unfair and insane. In any given interview, I typically ask around three major questions, but each covers as many topics as I can possibly squeeze in. The questions involve multiple steps and allow for follow-on questions should I so choose. For example:
I have a page that displays the current stock price for Yahoo!. This page has a button that you can click to refresh that price inline, without unloading the page. Please describe how you would implement this, assuming that the server always has the correct stock price data.
This question hits a good group of the basic knowledge that I want: DOM structure, DOM manipulation, event handling, DOM manipulation, XHR, and JSON. I could cover more of the points by asking for an alternative treatment of the stock price or some other message to be displayed on the page. For more senior candidates, I can easily continue on with other topics just as differences between JSON and XML, security issues, and capacity issues.
I also expect all answers to not involve using libraries. I want raw code written as if there is no library on the page. Library knowledge isn’t useful to me because libraries change over time. I need people who understand what goes on inside the library and can reproduce it by hand.
Problem solving
The thing that makes front-end engineering so interesting is that there are multiple ways to solve the same problem, and it’s the context that determines the correct approach. When I ask questions, I tend to ask for a second way to do it after the candidate has explained one way. I ask them to imagine that for some reason their solution won’t work and ask for another. This accomplishes a couple of things.
First, it sniffs out mindless regurgitation of something they read about. Some people are amazingly talented at being able to repeat things they’ve read and sound intelligent. These people usually have trouble figuring out why that solution wouldn’t work and then coming up with a new solution. If I hear, “I don’t understand why this way isn’t good enough,” then I know they’re out of their league and were trying to get by with a copied answer.
Second, it shows me their working (once again, “top of the head”) knowledge of the browser technology. If they have a good understanding of the core parts of the browser platform, it’s not that difficult to imagine a different solution to the same problem.
This is an absolutely critical skill to have as a front-end engineer. We’re constantly met with roadblocks with things we believe should work and yet don’t (I’m looking at you, IE6). You can’t be one of those people who gets deterred when the first solution doesn’t work.
Another side of the problem solving equation is my favorite. Once I get a good sense for what a candidate does and doesn’t know, I’ll ask a question that’s just outside of their realm of knowledge. I do this because I want to see how they’ll solve a brand new problem using what they already know. At each step, I have a hint ready in case they get stuck (it doesn’t help me to evaluate someone when he or she gets stuck for 15 minutes); it’s the progression from one step to the next that I’m interested in. I want to see this person learn something new right in front of my eyes.
Note: All of the questions are rooted in browser technology. I don’t believe in abstract logic problems as a way to evaluate someone’s web tech problem solving skills. That’s like asking a sketch artist to paint a portrait – it doesn’t make sense and you’re not getting any valuable data.
Enthusiasm
Perhaps the most important part of being a good front-end engineer is enthusiasm for what you do. We haven’t been taught our skills in college or in seminars, so front-end engineers need to be self-taught. And since browser technology changes so rapidly, we also need to constantly be upgrading our skills to keep up. I can’t force someone to follow blogs and keep trying to learn more, that has to be something the candidate brings to the table.
How can you tell if someone is enthusiastic about this type of work? It’s actually quite simple. I ask a single question: “what excites you about web technology right now?” This is a timeless question that is nearly impossible to get wrong…unless you have no answer. If I were asking this right now, I’d expect the answer to be things like WebSocket, HTML5, WebGL, client-side databases, etc. People who are enthusiastic about web development are always reading, always trying to pick up new skills; these are the people I want to work with. Of course, I ask them to explain whatever they mention in more detail to ensure they’re not just throwing out buzzwords.
In the end
There are other skills that are useful, such as computer science or web design knowledge, but those are bonuses over the basic knowledge. If the basic knowledge is there, it’s easy to build on top of whereas it’s horrifically difficult to teach the basics from scratch while on the job. There’s also more skills to look for in senior front-end engineers than for junior ones, and an entirely different process for interviewing college graduates with little or no experience. What I’ve presented in this post is just the basics.
And as I always tell people who are new to interviewing, there’s really only one question to ask yourself when you leave the room: do I want to work with this person? If the answer is no for any reason, then it’s a no.
Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.
Both comments and pings are currently closed.
26 Comments
I used to do a lot of interviewing front-end devs. I had a similar policy and similar list. When I was at frogdesign we had a pre-interview screening questionnaire – an open test that attempted to assess understanding of basic HTML and web development concepts. It wasnt a pass/fail test, but it filtered out the total blaggers. Interviews cost the hiring company money and time so while I heard from a lot of people that it pissed them off being made to jump through hoops – I personally stood by it.
I’d add to your basic knowledge list a good grasp of URLs and paths, stuff that should be really duh, but raises flags if people struggle to explain the difference btw. absolute and relative URLs, or fail to spot ./path/to/file as a relative path for example.
And I’d re-iterate your emphasis on showing an ability and willingness to learn. I’ve recommended people for hire with only a few weeks experience under their belt, but a good attitude and aptitude for learning. There’s more to know now, but the principle remains true.
A final word, I always steered well clear of people who saw front-end dev as a stepping stone to “real” development, or a design position. It might or might not work out that way, but if you can’t even fake an interest in the job you are applying for, you’re wasting everyone’s time.
Sam Foster on January 5th, 2010 at 11:30 am
I’d been more of a middle/back end engineer (Java, PHP) until last year when I started using ExtJS and now I’m viewed as more of a front end guy, but by your standard I don’t come close to measuring up ;(
George Jempty on January 5th, 2010 at 11:33 am
I must be at least a passable developer since I’d be able to discuss your “basic knowledge” items pretty comfortably, but the IE vs. DOM event model question would have stopped me cold. Maybe it’s because I don’t work on the same types (and scopes) of JavaScript projects that you do, but that’s not knowledge that has really been useful to me. Are you talking about things like bubble vs. capture and the differences in what’s passed to event handlers? I had a hard time finding what the differences were even when I googled it.
Chris VandenHeuvel on January 5th, 2010 at 1:27 pm
I used to ask a lot more obscure DOM questions that you can only know if you are either a memorizing machine, or you’ve got years on the job. Stuff like making an object float in JS (it’s not just element.style.float, so what is it in which browsers?). The problem is, even the best FEs I know are forgetting this stuff because of the surplus of libraries out there.
Good questions! I’ll refer to this article if I ever get to interview anyone again
richtaur on January 5th, 2010 at 1:46 pm
Big fan of your blog, books! I think the question you’d have to ask yourself first is:
1. Am I hiring I guy that can write a JS library himself?
or
2. Am I hiring someone who can write fantastic web apps in little time.
If 1: He is probably very smart and would be a great hire but as he’s probably rare and unless you pay him very well he’ll move on when he gets bored realizing he can make more money himself (or at another company).
If 2. Your interview strategy is more or less a disaster, you should be asking him which library he knows best and ask detailed questions for it instead (jQuery, YUI, Ext questions). Knowing internals of IE6/7 won’t matter if a decent library does the job for you. Productivity matters.
My 0.05€
/Mats
Mats on January 6th, 2010 at 2:52 am
What would you say your in-person interview to hire ratio is?
cancel bubble on January 6th, 2010 at 1:15 pm
@Mats – I never want to hire #2. These people can’t survive in an enterprise development environment because they are tied to their tools. I only want people who can function without a library. Libraries always fail in one way or another, and I need someone who knows enough to be able to extend the library or work around it when they get stuck. Library knowledge is not front-end knowledge any more than knowing how to use a hammer makes you a carpenter.
@Cancel Bubble – If you’re asking me, personally, all time, it’s probably something like 7:1. If I had more say over who I interview in person, that ratio would improve. But alas, I can only interview the people who they put in front of me. Most often, I’m disappointed. The upside is that when I say “yes” to someone, their success is virtually guaranteed. I’ve never said “yes” to someone and had them not work out, and that’s something in which I take pride.
Nicholas C. Zakas on January 7th, 2010 at 12:27 am
[...] Original Post:Interviewing the front-end engineer [...]
Nicholas C. Zakas如何é¢è¯•å‰ç«¯å·¥ç¨‹å¸ˆ » 为之漫笔 on January 7th, 2010 at 7:44 pm
@Mats
“Knowing internals of IE6/7 won’t matter if a decent library does the job for you.”
What happens when the library fails?
or (and this one happens all the time- at least in the agency world)
What happens when the “out of the box” effect from the library isn’t what’s actually required by the designer/client and you have to tweak it or write a new one from scratch? At that point, productivity goes all to hell if they don’t know what they’re doing at a more fundamental level.
Rob on January 8th, 2010 at 11:30 am
@Rob:
When my library fails me I request a fix from the creator or patch it myself (which usually means I learn something new about both the library and JS/DOM).
If the out of box experience isn’t 100% what you need I’d still try to stand on top on something rather than writing my own from scratch, the quality of JS frameworks today is very good and they will save you lots of headaches and time.
At the end of the day I’d rather not have to maintain 1. My own code/application and 2. Cross browser layer
Mats
Mats on January 11th, 2010 at 2:23 pm
[...] Dmitry put together an interesting quiz from which you can actually learn some of the strange quirks of JavaScript. I hope that this writeup has helped everyone understand the details necessary to figure out what each piece of code is doing, and more importantly, why it’s doing so. Again, I caution against using these sort of quizzes for job interviews as I don’t think they serve any practical use in that realm (if you’d like to know my take on interviewing front-end engineers, see my previous post). [...]
Answering Baranovskiy’s JavaScript quiz | NCZOnline on January 26th, 2010 at 9:01 am
Nicholas,
Very interesting article. I’m curious what exactly you mean in the comments when you said to Mats “Libraries always fail in one way or another.”
I think it would be great if you posted an article describing some problems you’ve had with libraries, or else pointed us to an article that discusses such problems. My experience with JS libraries is limited, but from what I’ve seen and read, they do resolve many of the browser quirks and other issues.
Even Douglas Crockford in his presentation “JavaScript: The Good Parts” on Google Tech Talks stated that the libraries do a great job of normalizing browser differences. Maybe that’s unrelated to what you were talking about, but like I said, it would be great to hear an extensive discussion of this.
Louis on January 26th, 2010 at 2:58 pm
I’d consider the “Basic Knowledge” questions to be weed-out questions. Those shouldn’t make a good FE engineer even blink. Those are good questions for senior-level web developers / designers.
A FE engineer builds cutting-edge web applications not just web sites. Therefore, the FE engineer needs to know all browser rendering and script engine details innately and must also have a great deal of architecture experience. For example:
i18n / l10n techniques
layered design versus heirarchical (e.g. PAC) UI design patterns
pub/sub models
widget-building frameworks and techniques
UX basics
a11y concerns and solutions
offline browser capabilities
HTML5 data storage
browser performance “best practices” and diagnostic tools
Without this knowledge, any client-heavy web app is going to become slow, clunky, and unmaintainable in no time.
unscriptable on January 26th, 2010 at 2:59 pm
@Louis – When I say that libraries fail in one way or another, I’m not necessarily talking about flat-out bugs (though those do exist). I’m talking about when you reach the boundaries of what the library offers. Libraries are high-level abstractions of existing functionality, and as such, cannot fully support everything that the lower-levels are capable of. If you develop long enough, you will find the boundaries of your library and then you need to still be able to continue on in your development. You can’t always stop, file a bug, and wait for the library owner to make an update for you.
@unscriptable – In my experience, I’ve met very few people who know everything that you’ve mentioned. I’d consider each of the additional skills you list as bonuses on top of the core knowledge. I consider them bonuses because several are often heavily dependent on what you’re building. For instance, I’ve never worked at two companies that used the same internationalization technique. I can teach people that when they arrive, along with teaching them about accessibility, performance, and other things. These are much easier to teach on the job than the core knowledge. I do agree that it would be great if every front-end engineer had all of this knowledge and I look forward to a day when that is true. In my experience, though, you need to find people with good core knowledge and develop them because superstars are truly rare.
Nicholas C. Zakas on January 26th, 2010 at 3:55 pm
@NCZ:
You’re right. It’s true. Truly talented FE engineers a rare breed. I only know a handful of people who have experience with the majority of items in both of our lists.
We — as an industry — need to fix this if web applications are to be taken seriously. Don’t we?
unscriptable on January 26th, 2010 at 5:07 pm
Couldn’t agree more about the enthusiasm part!
I seem to ask similar questions, and I outlined some of those in Looking for a good interface developer? that helps me to swiftly separate people who know things, and those who don’t (sorry for shameless link to my site).
Robert Nyman on January 27th, 2010 at 5:54 pm
[...] – definitely worth a read if you ever want to partake in the ‘big time’. Link here. Another interesting post explaining this javascript test offers some great insights into the [...]
how to interview for positions with heavy javascript development and advanced javascript tests | frag (frăg) on February 9th, 2010 at 9:48 am
I’m not even near your knowledge on front-end engineering, but I think the most important is knowledge of standards, then libraries (which are giving some layer which forces all main browsers to work the same) and finally, and only when you are writing a library, are the differences between standards/libraries and their implementations. It is true for both, JS libraries and CSS libraries (sets of classes to be more specific). I think requiring knowledge of how to use XHR across all browsers is the same as requiring from PHP developer ability to write C code (or even assembly language). Might be necessary in some cases, but in most it is better to learn it when it is needed.
I hope you require it because you are doing the fastest JS code in the world;), but it is not applicable outside Yahoo! I think – it’s always better to use YUI3. Beside that, I agree with you perfectly. Great site!
Adrian Kalbarczyk on February 15th, 2010 at 8:22 am
Thank you for this article Nikos.
Being a recent graduate / wannabe developer – designer I read it carefully, especially the questions. A bit bummed when I realized I couldn’t answer the majority of those. But there’s always time!
The point I’d like to emphasize though is something you said:
I recently realized, industry requirements & practices are so rapidly changing that Education is unable to follow. I suppose being a Front-End Developer means at the end of the day you’re: an artist & a coder at the same time.(you do layouts and mock-ups in Illustrator, right?) No school would teach you that, but even if you were to be the perfect web developer, no school would teach stuff like CSS/JS cross-browser issues, for example. (hell, in most of the schools they just started teaching CSS)
Not only that, but even if you were to be self-taught, the industry alone hasn’t (yet) made up its mind on several important issues. For example, consider the effect of iPhone/iPad/Webkit/Android->HTML5 to Flash developers. Or XHTML2′s discontinuation. Or the fact that even IE9 will not support a big part of the CSS3 spec.
And then think about small, medium or even big companies that still have one job title: Web Designer. Where you do everything from setting up the CMS to updating Apache to checking the servers temperature.
I’m just saying, it looks messy, and if 3 big players can’t make up their mind on the HTML5 video codec that will be used, then how can poor devs know where to put their focus..?
Sorry for my long comment.
George Katsanos on February 21st, 2010 at 6:16 pm
I thought I have a front-end knowledge, but it seems I will not pass your interview
Very nice article that will help me to focus on the basics which many people forget about.
Miroslav Nikolov on February 25th, 2010 at 1:44 pm
Thank you for this great article,
Do you think a front end engineer should know server side programming too? such as PHP or Ruby.
Basically how is this kind of experience valuable or required when interviewing a front end engineer?
Omid on March 29th, 2010 at 3:38 pm
I have a similar approach to interviewing client-side developers. Abstract problems are really quite useless.
alshur on April 13th, 2010 at 12:34 pm
[...] 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 [...]
studiomaqs » Blog Archive » How to be a front-end engineer on April 29th, 2010 at 7:13 am
[...] trove of information on all things JavaScript & web performance. Some recent gems include Interviewing the front-end engineer & Writing maintainable code. It goes without saying that he knows his stuff when it comes to [...]
Book Review: High Performance JavaScript (Part 1) | Derek Gathright on September 8th, 2010 at 2:04 am
[...] 77. Interviewing the Front-End Engineer [...]
RegexHacks :: Blog » The Top 150 Web Development Highlights from 2010 on December 31st, 2010 at 4:42 am
[...] 77. Interviewing the Front-End Engineer [...]
The Top 150 Web Development Highlights from 2010 « Web Development « blog.officinazerouno.it on January 7th, 2011 at 8:58 am
Comments are automatically closed after 14 days.