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

  1. http://www.tjkdesign.com/articles/block-formatting-contexts_and_hasLayout.asp
  2. http://www.satzansatz.de/cssd/onhavinglayout.html
  3. 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.

175 thoughts on “How to Recruit a Frontend Hero – Interview Question Series”

  1. Pingback: best
  2. Pingback: fucoxanthin
  3. Pingback: geniux pills
  4. Pingback: intelligex
  5. Pingback: intellux
  6. Pingback: radian c
  7. Pingback: supreme antler
  8. Pingback: genius reviews
  9. Pingback: testomax
  10. Pingback: TRACKR BRAVO
  11. Pingback: alpha fuel
  12. Pingback: alpha man pro
  13. Pingback: alpha peak
  14. Pingback: alpha xtrm
  15. Pingback: caralluma extract
  16. Pingback: anabolic rx24
  17. Pingback: cognifocus
  18. Pingback: garcinia melt
  19. Pingback: max synapse
  20. Pingback: nerventrax
  21. Pingback: testorip
  22. Pingback: testoroar
  23. Pingback: zynev
  24. Pingback: forskolin slim
  25. Pingback: garcinia cleanse
  26. Pingback: garcinia xt
  27. Pingback: forskolin fuel
  28. Pingback: vitapulse
  29. Pingback: Vita pulse
  30. Pingback: vitapulse reviews
  31. Pingback: vitapulse review
  32. Pingback: pure colon detox
  33. Pingback: pure colon detox
  34. Pingback: perfect biotics
  35. Pingback: vitapulse vitamins
  36. Pingback: vitapulse scam
  37. Pingback: vitapulse
  38. Pingback: vitapulse
  39. Pingback: vita pulse
  40. Pingback: probiotic america
  41. Pingback: horoscope
  42. Pingback: taurus
  43. Pingback: Diabetes Free pdf
  44. Pingback: Vitiligo Miracle
  45. Pingback: Diabetes Destroyer
  46. Pingback: Fat Loss Factor
  47. Pingback: T90 Xplode Review
  48. Pingback: Tea Tox Review
  49. Pingback: Tai Cheng Workout
  50. Pingback: MegaDrox
  51. Pingback: Test X180 Review
  52. Pingback: probiotic america
  53. Pingback: drones for sale
  54. Pingback: click site
  55. Pingback: see it here
  56. Pingback: news
  57. Pingback: find this
  58. Pingback: my review here
  59. Pingback: check my blog
  60. Pingback: my review here
  61. Pingback: weblink
  62. Pingback: visit
  63. Pingback: Visit Website
  64. Pingback: see this
  65. Pingback: other
  66. Pingback: look at this site
  67. Pingback: his explanation
  68. Pingback: see this here
  69. Pingback: directory
  70. Pingback: Visit Website
  71. Pingback: his explanation
  72. Pingback: visit
  73. Pingback: Visit Website
  74. Pingback: look at this site
  75. Pingback: Forex Trendy
  76. Pingback: click
  77. Pingback: my response
  78. Pingback: Visit Website
  79. Pingback: original site
  80. Pingback: visit
  81. Pingback: see this
  82. Pingback: his explanation

Comments are closed.