Good questions to ask in a frontend interview

Any interview you faced as a frontend developer, you might got the trivial questions like what is difference between 'null' and undefined or how to center a div element. Although nothing wrong in these questions, but these answers can be remembered and any frequent interviewee will be able to answer them. So you might miss a good thoughtful developer (who don't remember all the book answers) and may hire an inexperienced person, who might not fit in the job later on.

Example:

Bad question: 'What is difference between angular1 and angular2'?

Better question: 'Implement bi-directional data flow in a framework of your choice'

A seasoned interviewee will be able to crack your first question, while a person with good hands-on experience might offer you insights with second question and will be suitable better for the job

Curated list of practical frontend interview questions

The questions are taken from multiple resources, and doesn't include framework or library specific queries.

1. JavaScript

• Execution context, especially lexical scope and closures, IIFE.
• Hoisting, function & block scoping and function expressions & declarations.
• Binding – specifically call, bind, apply and lexical this.
• Object prototypes, constructors and mixins.
• Composition and high order functions.
• Event delegation and bubbling.
• Type Coercion using typeof, instanceof and Object.prototype.toString.
• Handling asynchronous calls with callbacks, promises, await and async.
• When to use function declarations and expressions.
• Prototypal Inheritence and Pseudo-Classical Inheritence
• Implementing Array methods like filter, reduce and map
• Event loop and setTimeout
• let and Const
• How web engines work
• Operands
• ES6 Fundamentals - Proxy, Reflection, Iteration, Object destructuring, lexical enviornment in arrow functions

2. CSS

• Layout – sitting elements next to each other and how to place elements in two columns vs three columns.
• Responsive design – changing an element’s dimensions based on the browser width size.
• Adaptive design – changing an element’s dimensions based on specific break points.
• Specificity – how to calculate a selector’s specificity and how the cascade affects attributes.
• Appropriate namespacing and naming of classnames.

3. HTML

• Semantic markup.
• Tag attributes, such as disabled, async, defer and when to use data-*.
• Knowing how to declare your doctype (most people are not writing new pages every day and forget this) and what meta tags are available to use.
• Accessibility concerns, for example, making sure an input checkbox has a larger responding area (use label “for”). Also, role=”button”, role=”presentation”, etc.
• Viewport
• Selecting or finding nodes using document.querySelector and in older browsers document.getElementsByTagName.
• Traversal up and down – Node.parentNode, Node.firstChild, Node.lastChild and Node.childNodes.
• Traversal left and right – Node.previousSibling and Node.nextSibling.
• Manipulation – add, remove, copy, and create nodes in the DOM tree. You should know operations such as how to change the text content of a node and toggle, remove or add a CSS classname.
• Performance – touching the DOM can be expensive when you have many nodes, you should at least know about document fragments and node caching.
• How Single Page application will work with single index.html

4. System Design

• Rendering – client-side (CSR), server-side (SSR) and universal rendering.
• Layout – if you’re designing a system used by multiple development teams, you need to think about building components and if you require teams to follow a consist markup to use said components.
• State management such as choosing between unidirectional data flow or two-way data binding. You should also think about if your design will follow a passive or reactive programming model, and how components related to each other for example Foo–> Bar or Foo –>Bar.
• Async flow – your components may need to communicate in real-time with the server. The design you propose should consider XHR vs bidirectional calls. If your interviewer asks you to support older browsers, your design will need to choose between hidden iFrames, script tags or XHR for messaging. If not, you could propose using websockets or you might decide server-sent events (SSE) are better.
• Separation of concerns – Model-View-Controller (MVC), Model-View-ViewModel (MVVM) and Model-View-Presenter (MVP) patterns.
• Multi-device support ?
• Asset delivery – CDN or inline them to reduce network latency.
• Multi-lingual System
• Setting up build for multiple environment like dev, qa or prod

5. Performance

• Critical rendering path.
• Service workers.
• Image optimizations.
• Lazy loading and bundle splitting.
• General implications of HTTP/2 and server-push.
• When to prefetch and preload resources.
• Reduce browser reflows and when to promote an element to the GPU.
• Differences between the browser layout, compositing and painting.

6. General

• HTTP requests – GET and POST along with associated headers such as Cache-Control, ETag, Status Codes, and Transfer-Encoding.
• REST vs RPC.
• Security – when to use JSONP, CORs, and iFrame policies.
• Server Side rendering
• Virtual Dom, Shallow Dom

Regards, I hope this list helps you to become an expert interviewer and interviewee.

I will keep on adding new topics as soon as find out.