Continuing on my topic of what makes a good front-end engineer, here’s a list of questions that I usually ask people when I’m interviewing them for a front-end engineering position.
- What does semantic markup mean?
- Semantic markup usually means using proper HTML tags for your content (p tags for paragraphs, divs for large content areas of your page, tables for tabular data, etc) and meaningful classes and id’s for your CSS. It also means not putting any inline CSS or Javascript in the body of your HTML page. There are exceptions to this rule, but for most of the time, this is how a properly coded webpage will be structured.
- Knowing the answer to this question means the interviewee has been paying attention to web development for the past 5 years. It also means they understand the proper design and coding principles like separation of content (HTML), style (CSS) and behavior (JS).
- Describe the box model
- The box model describes rectangular boxes that are generated for elements in a web page. The properties of these boxes are margin, border, padding, width and height.
- If an interviewee doesn’t know this, they probably haven’t read 1 book or website about the basics of CSS.
- When would you use a table in a webpage?
- For tabular data. Representing data in a database or a spreadsheet. NOT for layout
- Tables for layout is definitely in the past, so if a developer talks about using them for layout, they’ve been out of the loop for a long time. CSS is for layout, it provides much finer control and allows for semantic markup of your content and data.
- Is Javascript an object oriented language?
- Yes, Javascript is an object oriented language. Base objects or classes are called prototypes. They allow for dynamically adding attributes and functions to the prototypes and they will immediately be available to all instances of the prototype. (There’s a lot more you can do with prototypes)
- This question is actually a tough one. Lots of developers program in Javascript frequently and never learn more than the basics. Learning about Javascript prototypes is one of the first steps in understanding what makes Javascript different than most classical object oriented languages
- Can you assign behavior (open a new window, show/hide an element in the page) to a link in a webpage without placing any Javascript in your html markup?
- Yes, you can. 1) Include a Javascript file in your document 2) Search the DOM for the link by Id, class or tag. 3) Attach a function to the element’s onclick event via the addEventListener (W3C event specification) function or attachEvent (IE). 4) When the function is called, perform the required action and stop the event from continuing via event.stopPropagation or event.cancelBubble (IE), event.preventDefault or event.returnValue (IE).
- Events are very tricky in browsers. I had to research a bit to figure out how to do it without a Javascript library. If a developer mentions adding javascript:foo() into the href or onlick=”foo()”, they most likely haven’t learned about proper separation of HTML and Javascript. They also most likely don’t know about graceful degradation/progressive enhancement. This allows for handling search engine crawlers, browsers with Javascript turned off, Javascript errors that stop execution and mobile browsers that don’t support Javascript.
- What’s a closure and how/why would you use it in Javascript?
- This one’s tough. I’m still learning how closures work in Javascript. In very simple terms, they are references to variables or functions inside a function after it has executed. (I think that’s a good explanation.)
- A good use for them is to hide variables or functions from external code. This is similar to private variables and functions
- Knowing at least the basics of Javascript closures means you know Javascript pretty well. Once you learn closures and how to use them, you can start doing really nifty things with Javascript.
- How do you debug a webpage?
- Lots of ways. Alert statements (basic debugging), Firebug, DebugBar, DragonFly, Web Inspector, and Developer Toolbar.
- Knowledge of development tools is important and increases productivity immensely when you can inspect your website’s state without using alerts all over the place. Programming large websites becomes tedious and time-consuming if you don’t have tools like Firebug or the Developer Toolbar.
- What are some ways to increase performance of a web(site, page)?
- Any number of these methods.
- With the current proliferation of AJAXy web apps and Web 2.0 designs, sites are getting much slower. Knowing how to take a site that loads in 5-10 seconds and cut it down to 1-2s is very important. Users do notice and care how fast sites load, and so should you.
Those are my questions, what are yours?
