My company, Prosper.com, is having a difficult time finding front-end engineers. We’ve gone through many résumés, screened many people, and brought in a few for interviews. But none have the chops. This has made me very thoughtful about my role and my career.
A coworker of mine said that she knew several recently jobless people who know “more than front-end” as if the “more than” would sell them to me. I might have been kind of rude when I said “I don’t want more than front-end.” I just want a couple people who know front-end development well.
I think the role is under-appreciated by everyone. A service we used to find engineers matched us with back-end programers, but their front-end candidates were all a bust. Why? Because even professional technology screeners don’t know what to look for and there are very few good front-end web developers. The difference between Paul Irish and 99% of web developers is vast. The job seems easy perhaps, but a foundation is key.
For example, many front-end engineers (all I’ve interviewed) do not know CSS specificity well. That is, they don’t know the rules that determine what style an element will have. This is important to know! It removes the guesswork from styling and saves developers a lot of time. And if you don’t know it well, you will write poor markup and CSS and create hell for your client and anyone who inherits your code. You curse them basically, forcing them to write even worse markup and CSS to gain control.
Here is a list of questions I’m asking front-end candidates this week. I’ll also give the kinds of answers one would want to hear, so that screeners have a guide.
What are the rules that determine what style will be applied to an element?
element -> class -> id -> inline
———–> (increasing specificity)
(!important) element -> class -> id -> inline
———–> (increasing specificity)
Why would you use a JavaScript framework?
1) reduce cross-browser worries. 2) cleaner, simpler code. 3) plugin library.
What are some elements introduced with HTML5?
Ex. video, audio, canvas, aside, section, nav, footer, time, input type=”tel”, input type=”email”….etc.
How might you use new HTML5 elements while supporting browsers that do not recognize the new elements?
HTML5shim (“shiv”) for < IE 9.
What are some neat things you can do with CSS3?
Animations and transformations. Alpha transparency…
What online resources do you use?
MDN would be a good answer. W3Schools would not be.
What are your favorite webdev blogs?
Remy Sharp, Paul Irish, adactio.com, CSS-Tricks, A List Apart
What’s a closure?
Enclosing code in a function, and a good practice.
How might you keep a resource from being cached on the front-end?
Add a random string as a query parameter to the resource URL.
What are some ways to improve page speed?
Defer JavaScript, minify and combine linked resources, use better compression for images, use the Google Library API for common scripts, CDN, image sprites…
What is the last web development book you read?
Introducing HTML5, The Book of CSS3, Mobile First are good examples.
How might you transfer state between pages?
Cookies, HTML5
When would you use gif, jpeg and png?
PNGs compress better than GIFs and are very well supported by modern browsers, so use PNGs. JPEGs for photos. GIFs for simple animations possibly if you had to.
When would you use Flash, Canvas and SVG?
Canvas elements are raster images and so if you want to manipulate pixels, use canvas. SVG is vector art. Don’t use Flash.
What would your grandmother be? (hint: “behind”)