Question

We are continually revamping our front end developer test that we do in-house after a candidate has passed an online test. The online test has questions such as:

How does a for loop start?
What is the correct way to write a JavaScript array?
Write the css selector for the 3rd list item within an ordered list with the id "myList"
For var shoppingList = ["milk", "dumplings", "bread"]; - how would you return dumplings into a variable named groceryItem?
FizzBuzz
So we cover the basics, and try to get an insight into their knowledge.

But, in house, we really want to test their problem solving skills, their logic approach, etc. And I don't think we've found a good way to do that for front end developers. For UI guys, it's easier - we give them a design challenge and a white board and see if they ask for more information, how they approach the problem, etc.

But we haven't found a way to replicate this approach with web developers (for the record, I am one of the web developers on the team)

Thoughts on how to approach?

Answer 1

Switch it up, get the interviewee talking about past experience...

What will really help separate the wheat from the chaff is questions that drill deeper and require context to answer. Past experience is the best context but even theoretical answers show at the minimum some level of understanding.

Ask about process/tools:

What toolchain do you use to troubleshoot designs?

Using alert() as a print statement is all good but the turnaround for debugging is slow and it won't provide any help when it comes to making AJAX calls. Many experienced developers leverage tools like Firebug and Google Developer Tools because they show a much more in-depth analysis of what may be causing the problem.

I haven't used Firebug in quite a while but the Developer Tools built into Chrome allow you to inspect any element on the page by right-clicking on it which saves a ton of time that would be spent searching the source. It highlights elements on the page when you mouseover elements in the code.

How do you assess and improve page-loading performance?

Extremely important, especially since google added page load times to their ranking metrics. Being able to analyze load times and pinpoint potential bottlenecks is extremely important. There is no single hard/fast rule, there are about 100 and more experienced designers will be aware of many.

What program do you prefer to write code?

More experienced developers prefer more control over the source so they will probably use an enhanced plaintext editor (ex Notepad++) whereas a more green developer may still be dependent on the structure and documentation provided by a larger environment (ex Dreamweaver).

Ask questions about design

Would you use a table-based, relative, or absolute based layout structure?

A person who would say table probably has outdated knowledge of design. Relative and absolute are both good on their own for specific uses but mixing them both can be even better. A person who can articulate why with detail probably has a lot of experience dealing with more difficult design decisions.

How would you implement a rollover effect on an image button?

This is a very low level question. The 'right' answer is to use a css hover attribute but somebody who has weak design knowledge will prefer to implement a dual show/hide function in Javascript.

What are sprites and why would you use them?

Sprites can be a pain to implement initially but they can drastically cut down on the number of HTTP requests required to load a page. Somebody with solid knowledge of how HTML pages are loaded/assembled should be able to go into great detail about this topic.

Ask questions about APIs

Have you ever used an API?

As HTML and Javascript become more powerful, there will be a push to do more and more work on the client. It makes sense because it cuts down on cost on the server-side. Anybody who has done any sort of significant front-end development has most likely worked with an API. Whether it's Google Analytics, Twitter, Disqus, or just AJAX. I would consider knowledge of how to leverage API's to be vital to front-end development.

Have you ever designed a client-side API, what did it accomplish?

Yes, there are purely client-side APIs all over. jQuery, Prototype, and Underscore are the big 3 but there are many thousands of smaller API libraries and/or plugins that serve a specific purpose. If you're talking to an experienced dev, they may have grown beyond the 'look for a library' to the 'scratch an itch and write it yourself' stage. There are good reasons to choose one that has already been written, and there are good reasons to write your own, it all depends on the context.

Have you worked with AJAX, if so what format was the response and how was it handled?

Getting into more advanced territory but somebody who knows their stuff will be able to elaborate.

A AJAX request won't respond, how do you find the problem?

Usually, falls along the lines of checking the Javascript console to see if an error (usually 500) was returned and/or checking the HTTP header of the received packet.

JSONP, what is it and why is it useful?

See if they understand what cross-site-scripting protection is and how to get around it in a 'safe' manner.

Client-Side or Server-Side questions

Validation, do it on the front-end or back-end?

Kind of a trick question but the answer should be both. Verify that the fields are not empty and match the constraints. They should also be further sanitized and sanity-checked on the server.

What is an example of something that can't be done on the front-end?

Shows a better understanding of the limitations. For instance, email can't be done on the client because it requires a SMTP/POP/IMAP server to send/receive messages.

What is a REST API and why is it useful?

Shows deeper knowledge of HTML. Many people, especially those that don't understand them, talk about REST APIs like they're rocket science. Somebody who has worked with one should be able to present some simple examples of usage.

One biggie that I didn't cover, and probably shouldn't be limited to one question, is the issue of how to improve performance in situations where you're either traversing or modifying the DOM.

I could probably keep going all day but that should provide a good start. There is just so much ground to cover on the client-side alone. Not to mention that front-end developers also need to know enough to interact with designers, back-end developers, and possibly a multitude of external APIs.