How to Recruit a Frontend Hero – Interview Question Series
This is the first guest post on this blog. Sebastian Deutsch (@sippndipp) was kind enough to help me with this frontend topic. Sebastian Deutsch is one of the founders of 9elements.com. 9elements is a small software boutique with a strong focus on design that loves to build web applications
Recruiting a frontend developer for a large scale webapplication is a delicate task. It is that delicate because you don’t need a specialist, but you also don’t need a generalist. What you need is a T-Shaped person. Someone who is really good at HTML, CSS and JavaScript. Beside that you are seeking for someone who has also deeper understanding of SEO, some coding, template engines, deployment workflow – the list is almost endless.
A second problem is that there is no industry standard for the skillset you looking for. And that makes sense, since the techs we use to develop websites are constantly evolving. So what is the skillset I’m looking for? I have some questions in certain areas. I don’t expect the people to reproduce the knowledge as depicted here – It’s more like a tech talk. Sometimes I give hints and see how people react.
HTML/CSS
Q: What is the difference between strict and quirks mode?
A: It is a technique not to break old implementations as described here: http://www.quirksmode.org/css/quirksmode.html
Q: Could you roughly describe the box css model?
A: width/padding/border/margin
References: http://www.w3.org/TR/CSS2/box.html
Q: What methods do you know to realize columns?
A: cleardiv
clearfix (better one)
Q: What different clearfixes do you know?
A: Answer 1:
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
A: Answer 2:
.clearfix {
overflow: hidden;
}
/* triggers has layout in IE6 */
.container {
zoom: 1;
}
References
- http://www.tjkdesign.com/articles/block-formatting-contexts_and_hasLayout.asp
- http://www.satzansatz.de/cssd/onhavinglayout.html
- http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
There are several flavours in clearing, but these are the essential ones. A bonus question on that topic (the people barely know it):
Q: Why is the “overflow:hidden” method considered harmful?
A: The subpixel font hinting on windows sometimes draws pixels outside the boxmodel. These will be cropped if padding of the box is 0.
Q: Assume we have a list. Each list item needs to be styled with an item seperator except the last one. How would you write the html/css?
A: good one
<ul id="items">
<li>one</li>
<li>two</li>
<li class="last">three</li>
</ul>
ul#items li {
border-bottom:1px solid #000;
}
ul#items li.last {
border-bottom:none;
}
A: bad one
<ul id="items">
<li class="seperator">one</li>
<li class="seperator">two</li>
<li>three</li>
</ul>
ul#items li.seperator {
border-bottom:1px solid #000
}
Q: What is specifity on CSS selectors?
A: If you have conflicting CSS selectors specifity defines the order in how the conflicts will be solved e.g. id before class.
References:http://www.htmldog.com/guides/cssadvanced/specificity/
Q: What are vendor prefixes?
A: -moz, -webkit, -o, -ms
Q: How do you arrange your stylesheets so that you can easily develop for Internet Explorer?
A: Include patches and hacks for the IEs using conditional comments.
Q: Are you familiar with CSS Frameworks?
A: At least one of the big ones (blueprint, 960, YAML).
Here comes another bonus question:
Q: Could you imagine a usecase where you won’t use a CSS Framework?
A: Yes, when you develop a large scale web application consisting of repeating elements. I would write my own framework and follow the rules of OOCSS http://wiki.github.com/stubbornella/oocss/.
Q: Do you know what responsive web design/media queries is/are?
A: Responsive web design as stated here http://www.alistapart.com/articles/responsive-web-design/
Javascript
Q: What javascript frameworks do you know?
A: One of the big ones jQuery/Prototype/YUI/Closure Library.
Q: What methods in javascript do you know to realize object inheritance?
A: prototype / mixins.
Q: Is it a good thing to mixin something to the array object?
A: No because you cannot predict the behavioural change of third party libraries (error or even worse performance).
Q: Describe roughly the concept of closures in javascript?
A: Since javascript is functional language functions can be nested. Inner functions can access variables from outer functions.
Q: Why this could be a harmful thing?
A: Wrong applied closures can have serious performance issues (e.g. the variables will never get garbage collected).
Q: What is function binding in javascript?
A: You can bind any object to a function call. When the function runs “this” will be the bound object.
References: http://alternateidea.com/blog/articles/2007/7/18/javascript-scope-and-binding
Q: Do you know what function currying is?
A: Function currying as described in here http://www.dustindiaz.com/javascript-curry/
Q: Do you know a server side javascript framework?
A: node.js [Stephan: Helma and RingoJS are others]
Q: What javascript framework would you use if you just develop for the iPhone/iPad/(…)?
A: A more lightweight one.
[Stephan:] What do you think one should ask when hiring a frontend hero, what do think one needs to know?
About Sebastian
Sebastian Deutsch (@sippndipp) is one of the founders of 9elements.com. 9elements is a small software boutique with a strong focus on design that loves to build web applications. Last year we created a little html5 demo that created a lot of buzz in the blogosphere.
About the author
- More at
You can leave a Reply here. Of course, you should follow me on twitter here.
