#Ref Topics

#Javascript:

Execution context, especially lexical scope and closures.

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.

#DOM

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.

#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.

#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.

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 – Will your design use the same implementation for the web, mobile web, and hybrid apps or will they be separate implementations? If you were building a site like Pinterest, you might consider three columns on the web but only one column on mobile devices. How would your design handle this?

Asset delivery – In large applications, it’s not uncommon to have independent teams owning their own codebases. These different codebases probably have dependencies on each other and each usually has their own pipeline to release changes to production. Your design should consider how assets are built with dependencies (code splitting), tested (unit and integration tests) and deployed. You should also think about how you will vend assets through a CDN or inline them to reduce network latency.

#Web 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.

- memory management helps

- O(N) and O(N Log N)

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.

#JavaScript Inheritance Patterns

#Concepts:

javascript objects

Prototypal inheritance

Scoping and hosting

Closures

JavaScript Callback (Higher-Order) Functions

The event loop

Event bubbling

Apply, call, and bind

Callbacks and promises, async/await

Variable and function hoisting

Currying

localstorage

Map, filter, reduce , sort of arrays

#Design Pattern:

Decorator

Factory

Singleton

Revealing module

Facade

Observer

MVC, MVP, MVVM

#Data Structure Concepts:

Linked lists

Hashtables

Stacks and queues

Trees (binary trees and heaps)

Graphs

#Sorting Concepts:

Binary search

Bubble sort

Insertion sort

Merge sort

Quick sort

Selection sort

https://gist.github.com/ericelliott/263f24b5ad987e2f09d2