A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
https://github.com/darcyclarke/Front-end-Developer-Interview-Questions
This repo contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.
What did you learn yesterday/this week?
AngularJS
What excites or interests you about coding?
Solving problem with great freedom.
Cool
Reduce the boring & repeating works
The learning process is happiness
What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
So big question...
Talk about your preferred development environment. (OS, Editor or IDE, Browsers, Tools etc.)
Win/Ubuntu/Unix(Mac OS)
Sublime Text 2/3, Eclipse
Chrome
Browsers DevTools,Git,Node
Which version control systems are you familiar with?
Git, SVN, Perforce
Can you describe your workflow when you create a web page?
study prototype
set structures(html tag)
render with style
add interactive by scripts
If you have 5 different stylesheets, how would you best integrate them into the site?
File concatenation
Can you describe the difference between progressive enhancement and graceful degradation?
Bonus points for describing feature detection
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.
Graceful degradation
Providing an alternative version of your functionality or making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable.
Progressive enhancement
Starting with a baseline of usable functionality, then increasing the richness of the user experience step by step by testing for support for enhancements before applying them.
I agree with progressive enhancement, and increaseing user experience with feature detection.For example,once i detectived that the browser support round-corner or shadow text,i will apply the futures to pages.
How would you optimize a websites assets/resources?
Looking for a number of solutions which can include:
File concatenation
File minification
CDN Hosted
Caching
etc.
Three common methods used when looking to optimize a website’s assets/resources include file concatenation, file minification, andcaching.
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.
Traditionally, why has it been better to serve site assets from multiple domains?
How many resources will a browser download from a given domain at a time?
What are the exceptions?
Bonus points for identifying mobile as a possible downside (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)
Bonus points for identifying SPDY as an exception
Multiple domains could increase the number of parallel downloads that the browser can perform.
about 4 to 6 connections per domain
Not all browsers are restricted to just two parallel downloads per hostname. Opera 9+ and Safari 3+ do four downloads per hostname. Internet Explorer 8, Firefox 3, and Chrome 1+ do six downloads per hostname. Sharding across two domains is a good compromise that improves performance in all browsers.
The optimal number of domains to shard across is 2-4. After 4 domains, response time degrades.
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)
Reduce the number of requests
Minimize HTTP Requests
optimize images
minify css&js file
compress(gzip)
yahoo 14 rules
Minimize assets, decrease the number of HTTP requests for files
G-zipping
Optimize your images
Resource prefetching
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 (http://editorconfig.org)
Conform to the conventions (stay consistent)
issue :retab! command (sublime text retab setting)
Write a simple slideshow page
Bonus points if it does not use JS.
What tools do you use to test your code's performance?
Profiler
JSPerf
Dromaeo
chrome devTool(profiles panel)
If you could master one technology this year, what would it be?
Android
What are the differences between Long-Polling, Websockets and SSE?
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.
Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.
http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/
