Front-End Development
Asking the Right Questions
This is the first in a series of posts looking to answer the questions presented in Front-End Developer Questions.
“A while ago, a group of very intelligent and experienced Front-End Developers got together and created a list of great Front-End focused job interview questions.”
General Questions
These questions are geared towards getting to know the candidate along with their overall knowledge of the history of the web in regards to current development practices.
Can you describe the difference between progressive enhancement and graceful degradation?
Progressive enhancement is an important strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. The idea behind using these is to present each in a layered fashion so that it allows access to the basic content and functionality of a web page while also providing an enhanced version of the page to those with browsers that can support these features.
Generally speaking, graceful degradation is a property of a system that allows the system to continue operating in the event of the failure of some of its components. For web equivalents of these fall-backs, web developers have tools such as Modernizr.js, markups for IE7/8/9, and HTML.
Explain what “Semantic HTML” means
Semantic HTML is the use of HTML markup to reinforce the meaning of the information in web pages rather than merely defining its presentation or look.
For example, the preference of <i> over <em>. The CSS stylesheet can then specify whether the emphasis is denoted by an italic font, a bold font, underlining, etc.
How would you optimize a websites assets/resources?
Three common methods used when looking to optimize a website’s assets/resources include file concatenation, file minification, and caching.
File concatenation is the process of bringing multiple files together into one single file. With this one file for the browser to download instead of several, we decrease the amount of HTTP requests needed in order to serve up our web page. The necessity of this becomes apparent as web sites grow in size. As you look to serve web pages you include vendor stylesheets like normalize and bootstrap, along with your own stylesheets, resulting in inflated load times due to multiple requests for these resources. Concatenating these files results in a significant reduction in load time as the number of HTTP requests decreases.
File minification looks to remove all unnecessary characters from the source code of a program without changing its functionality. This becomes especially useful in JavaScript files and CSS stylesheets as the minification process decreases file size significantly. These decreases in file sizes result in faster load times as the time it takes to download each resource becomes faster.
Caching comes in two forms. Server-side caching is a way to prepare a commonly requested resource so that the server is prepared to send such resource right away. Client-side caching keeps track of important files in session storage or in the browser’s local storage so that when a user revisits a site they don’t need to download all of its files again.
Why is it better to serve site assets from multiple domains?
One of the biggest impacts on end-user response times is the number of components that a browser will have to download from loading a page. Certain browsers are able to download multiple components in parallel per a hostname. A perfect example of this would be Twitter, who has a static asset domain. Using this domain, browsers who visit Twitter’s website then become able to download more assets in parallel and therefore cut down on end-user response time.
Name 3 ways to decrease page load. (perceived or actual load time)
- Minimize assets, decrease the number of HTTP requests for files
- G-zipping
- Optimize your images
- Resource prefetching
Source: Front-end Performance for Web Designs and Front End Developers
If you jumped on a project and they used tabs and you used spaces, what would you do?
- Suggest the project utilize something like EditorConfig
- Conform to the conventions (stay consistent)
- issue :retab! command
Write a simple slideshow page
Explain the importance of standards and standards bodies.
The relevance of web standards is most obvious when considering the emergence of new technologies. Where are these new tools going to belong? How do we structure them? What are they here for? The use of standards automatically makes every page you build genuinely cross-browser and cross-platform. With the use of web standards web designers, developers and engineers will be able to achieve a more stable web despite the ongoing introduction of new hardware and software. With the use of standards, both development and maintenance time become reduced as a result of faster debugging and troubleshooting when it comes to handling the code we create. Standards allow backwards compatibility and validation since they are written to be compliant with older browser versions. This compliant code can be validated through a validation service which makes the developer’s work a lot easier resulting in less production time. In addition to the previously mentioned benefits, the use of standards can also increase search engine success while also allowing for the certainty of graceful degradation.
What is FOUC? How do you avoid FOUC?
FOUC stands for a Flash of Unstyled Content. It exhibits a momentary flash of unstyled page content (as the name so aptly suggests) and is a side-effect of the CSS @import rule that exists in the Windows version of IE 5 or newer. It is caused by just one <link> element or <script> element inside a document’s <head>.
The LINK element solution — the addition of a link element to the basic head element is the most natural solution to the FOUC problem as almost every page can benefit from the addition of either an alternative stylesheet or a media-dependant stylesheet.
The SCRIPT element solution — The addition of a SCRIPT element to the basic HEAD element is an effective solution to this problem, however it is very unnatural to add a script element to some pages.
