For all demonstrations that involve him writing code, it is probably worth asking him to use JSFiddle: http://jsfiddle.net/
A client wants some text scrolling horizontally across the page. Write something to do this for him.
- Bad answer: Code uses the tag. It is a bad answer as the marquee tag isn't standard, and technically doesn't exist.
- Good answer: He simulates the behaviour of the marquee tag in JavaScript. Minus points if he uses inline style or javascript.
- Best answer: He tries to talk you out of it.
- Serve site assets from multiple domains, as browsers can only handle a certain amount of requests to one domain at the same time
- Minify assets to reduce the amount of information transferred
- Use less images, replace them with CSS, as images are bigger
- Creates cleaner and easier to maintain code
- Easier to debug, as working out where a CSS rule is coming from can be tricky if they are defined in multiple places
- More semantic
- Making algorithms more efficient
- Caching array length before looping through it
- Looping backwards through array so that only one expression is evaluated per iteration instead of two when looping forwards
- Avoid the use of the for-in loop, as it is slower than other types of loop
- Use switch statements instead of lots of if-else statements when working with a large number of conditionals
- Most other things are obvious, such as doing less work per loop and iterating less.
Explain to me, a backend developer, what the most recent relevant article you read was about.
Which libraries have you use in JavaScript? Which was your favourite, and why?
Some popular libraries include jQuery, MooTools, Prototype, Yui
What's your favourite new feature of HTML5, and why?
Explain the difference between the call and apply function methods in JavaScript.
Both method are used for calling functions, and work like this:
function test(arg1, arg2) {
}
test.call(null, arg1, arg2);
test.apply(null, [arg1, arg2]);The difference between them is that the call method accepts arguments for the function as arguments, and apply accepts an array of arguments.
Describe a cross-browser compatibility problem you once had, and how you solved the issue.
In JavaScript, what is a closure?
A closure is a function that is used to create a new scope to solve an issue like the following:
for (var i = 0; i < 10; i++) {
$('#e' + i).click(function () {
console.log('Element ' + i + ' clicked.');
});
}That code would output "Element 10 clicked." every time, as by the time the element is clicked the loop has ran all the way through and i has been increased to 10. a closure is a function expression which is used to "copy" the variable into a new scope where it will not be modified:
for (var i = 0; i < 10; i++) {
(function (i) {
$('#e' + i).click(function () {
console.log('Element ' + i + ' clicked.');
});
})(i);
}Write a CSS selector to get the following elements:
<body>
<div>
<div class="test">Not this element</div>
</div>
<div class="test">This element</div>
</body>Answer: body > .test
<body>
<div data-abc="foo">Not this element</div>
<div data-abc="bar">This element</div>
</body>Answer: [data-foo="bar"]
<body>
<div>Not this element</div>
<div>Not this element</div>
<div>This element</div>
<div>Not this element</div>
</body>Answer: :nth-child(3)
All elements linking to a page on http://example.com/
Answer: a[href^="http://example.com"]
What does "Semantic HTML" mean?
From Wikipedia (it explains it better than I can):
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation (look).
http://en.wikipedia.org/wiki/Semantic_HTML
What tools do you use to test your codes performance?
If he tells you something, it is probably fine. I and a lot of developers use JSPerf.
Name three ways to decrease page load times
Explain why it is important to keep the JavaScript and CSS separate from the HTML.
Name some advantages and disadvantages of using WebSockets over long polling (AJAX) in the context of a simple chat application.
Advantages are that it that there is less latency as messages are pushed from the server, not pulled by the browser. The browser doesn't have to keep checking for new messages, which means that less bandwidth would be used. The disadvantages is that browser support for WebSockets isn't as good as it is for AJAX.
Explain how the browser would handle the following selector: #someelement .foo
Not many developers will get this right. The correct answer it that it first looks for all elements with class foo, and then out of them looks for ones with parents with ID someelement.
Most developers, however, will say that it looks for all elements with ID someelement and then looks for children of that element with class foo.
If they don't get that, explain it to them and then ask:
Using what you just learned, improve the following snippet of code:
$('#foo p');There are two possible answers:
$('p', '#foo');
// Or:
$('#foo').find('p');What position of the page should scripts be loading from for best page performance?
The footer; when JavaScript is downloaded and parsed, it blocks the loading of the page. This means that if a large amount of JavaScript is loaded, the user will just see a white page until the JavaScript is finished loading. Moving it to the footer means that the user can start reading the page while the JavaScript loads.
Name a few common optimisation techniques used in JavaScript
Name a few advantages and disadvantages of using CSS3 gradients instead of images
Advantages: Uses less bandwidth, is easier to customise.
Disadvantages: uses more CPU, browser support isn't as good as it is newer.