Questions and Answers

Front End Interview Questions

Localizing means translating a software into a local language and culture.

• Find out who your audience is / define your audience
• Build a relationship with translators
• Ensure you localize the WHOLE experience, not just parts
• Don’t forget about measurements, currency, idioms, etc

Tell me two advantages of testing your code.

• Solid documentation
• Find errors before they happen
• Seamless deployment with a big team — integrating CI

Name three strategies for fixing cross-browser inconsistencies.

• HTML viewport metatag
• CSS flexbox and grid
• HTML + CSS validation tools

The point of this question is that consistency matters! Your app should have the same experience everywhere.

What are some tools and strategies you use to prevent shipping unstable code to production?

• Testing
• Solid GH Projects
• Git workflow
• Continuous Integration
• Continuous Deployment

What factors influence whether you’ll take a progressive enhancement vs. graceful degradation approach to building an application?

Progressive Enhancement: establish a basic level of user experience that all browsers provide, but then build more advanced functionality for browsers that can handle it

Graceful Degradation: Building functionality to provide a certain level of experience, but offer less on older browsers

Define the term ‘MVC’ and explain how an application is architected when following MVC patterns.

• MODEL — VIEW — CONTROLLER
• Model: Data model, data and logic
• View: UI logic
• Controller: Interface between model and view

What does CORS stand for and what issue does it address?

• Cross Origin Resource Sharing
• Essentially a security feature to ensure approved browsers get approved info

In as much detail as possible, describe the request-response cycle.

Tell me 3 new features of CSS3.

• Opacity
• More Web-Safe fonts
• Attribute Selectors (rather than just IDs and Classes)

Can you describe what responsive design is to you and how you would implement it?

• A principle of good web design that ensures a page looks good on all screen sizes. The app itself is response, it adjusts!

What’s the difference between display: inline and display: inline-block?

• Block: Takes up a whole line
• Inline: Shares the line

What is a pseudo class? What are they used for?

• A keyword on a selector that is more specific. Ex :hover

Describe z-index and how stacking context is formed.

• I understand this via my GIS background. It’s the third axis, and creates dimensionality. A model is on the Z axis

Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?f

• Fragility! Their value can be changed by any function and that ain’t good.

What does event bubbling or event propagation mean?

• The events that happen to inner elements “bubble up” through parent elements.

What’s the difference between undefined and null

• Null is no value, undefined means even less. Like we don’t know what this should even be. Null is on purpose. Undefined is usually not.

In as much detail as possible, explain how JSON Web Tokens work.

• Header
• Payload
• Strucutre
• It’s a standard way to write an access token and send info securely

What is Ajax?

• Ajax is not a technology, but a concept. It’s a set of techniques that use client side technology to create asynchronous web apps
• It separates the data layer from the interface

What is “use strict”? What are the advantages and disadvantages to using it?

• Define that JS should be executed in “strict mode” — you cannot use undeclared variables.

Explain why the following doesn’t work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE? Why?

• IIFE: Immediately invoked function expression OR self executing function

What are the pros and cons of using Promises instead of callbacks?

• Promises Pros: integrated error handling, readability
• Callback Pros: only one object can be returned

What is a closure, and how/why would you use one?

• Frequently used in JS for object data privacy in event handlers/callback functions.
• Gives you access to outer function’s scope from an inner function
• They are created every time a function is created
• Ex. defining a function inside of a funciton
• What advantages does React offer? What about disadvantages?

Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?

• B/c JS reads line by line — it parses and executes on the spot
• Being at the botton helps the page load more fully and faster

In an HTML file, what does the ‘doctype’ keyword do?

• It simple tells the browser what to expect!

Give an example of a self-closing HTML tag.

• <input />
• <image />

What’s the difference between window.onload and onDocumentReady

• Ready occurrs after HTML document has been loaded = specific to JQuery
• Onload occurs when all content has been loaded

Give an example of an element that is considered a ‘block-level’ element? An example of an inline element? What’s the difference between block-level and inline elements?

• Block-level: <div>
• Inline: <span>

What could we use instead of <b> tags for bold and <i> tags for italics to make our HTML more semantic?

• Lots of better examples exist for improved accessibility / readability
• <em> emphasis
• <strong> importance
• <cite> name of work
• <dfn> definition

What is the purpose of article, section, header and footer tags? Please explain with an example and why we should not use divs.

• In an effort ot write more “semantic”, ie specific, THNL, there are more container options

What are HTML data attributes?

• These are like object properties, for elements. Class, Id, source, etc

What is the event loop?

• JavaScripts concurrency model
• Call Stack: keeps track of all operations to be executed
• Queue: Send in new functions for processing

What are some popular NodeJS Modules?

• Webpack — for compiling
• Linters
• Express

What is the concept of state in React?

• State is the holder of truth. This is where we pill information to display to the user and to mutate. It is opposed to “props”, which are baskets that carry info (often from state) where the info needs to be

What is the virtual DOM in React?

• Document Object Model:
• This is an abstract representation of the DOM. In React, it’s purpose is to be a point of comparison against the “real” DOM. To determine if any changes have been made and need to be re-rendered.

How is an array different from an object?

• Arrays are ordered lists — but they are object like! The index number is the property.
• Objects is a list of name-value pairs.
• You can access the information differently. Access an object with strings for example, rather than the index

What is the DOM? How is the virtual dom different?

• Document Object Model:

What does npm eject do?

• If you are unsatisfied, it removes ever build dependency

What does npm build do?

• npm run build does nothing unless you specify what "build" does in your package.json file. It lets you perform any necessary building/prep tasks for your project, prior to it being used in another project

How do you make sure your project meets the requirements you have received?

• Testing, User Studies, PM tools

How does json work?

• JavaScript Object Notation
• a way of representing data LIKE JS objects
• used to send data
• can be used independently from JS!
• parse()
• stringify()

What is a restful api?

• REST — a set of architectural constraints

What is a callback function?

• A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
• It’s a function I pass into another function — for my purproses, it’s usually something I want to do later
• Example — passing an event into an mouse event like onClick

What is a react component?

• A modular building block of the React framework. Now that i’m working with hooks — I’m using “functional components” which are really just functions.
• They FEEL like classes to me — because they can have methods and variables and can be reused (modular). But a component can be rendered directly.

What problems does redux solve?

• I think Redux is like a global state manager? So that you can have more control over some variables that you want to share without prop drilling.

What are libraries you have used?

• Moch/Chai, React, Cypress, played around with chart.js

How are props different from state?

• State is where our hard and fast data is stored. We need to have a source of truth, and that is state. Props are often representations of state — but can be passed from component to component without making state/data vulnerable.

Do you know the concept of SCRUM?

• Scrum is a framework that helps teams work together. … Often thought of as an agile project management framework, scrum describes a set of meetings, tools, and roles that work in concert to help teams structure and manage their work.

What is JSX?

• JavaScript XML

How is JSX different from HTML?

• HTML: Hyper Text Markup Language — all the elements and so forth that are the bones of a webpage. A standard language for documents.
• My code is either already in HTML or compiled so browsers can read it as HTML
• JSX: Javascript XML. Syntatic Sugar! for React.createElelment( ). It is an extension of JS that allows devs to write HTML within Javascript.

Explain how a branch works

• A branch separates from main — main representing the trunk of the codebase, where all approved changes eventually flow. A branch will include code from main — that can be altered, added too, detracted from, tested, styled, etc — and then pushed to back into main to grow the main.

What can you tell me about Rest APIs?

• When a client request is made via a RESTful API, it transfers a representation of the state of the resource to the requester or endpoint. This information, or representation, is delivered in one of several formats via HTTP: JSON (Javascript Object Notation), HTML, XLT, Python, PHP, or plain text. JSON is the most generally popular file format to use because, despite its name, it’s language-agnostic, as well as readable by both humans and machines.
• Something else to keep in mind: Headers and parameters are also important in the HTTP methods of a RESTful API HTTP request, as they contain important identifier information as to the request’s metadata, authorization, uniform resource identifier (URI), caching, cookies, and more. There are request headers and response headers, each with their own HTTP connection information and status codes.

Do you know what a bearer token is in terms of JWT?

• JWT: Json Web token
• Short answer

JWTs are a convenient way to encode and verify claims.

A Bearer token is just string, potentially arbitrary, that is used for authorization.

• Context (story time)

A few years ago, before the JWT revolution, a <token> was just a string with no intrinsic meaning, e.g. 2pWS6RQmdZpE0TQ93X. That token was then looked-up in a database, which held the claims for that token. The downside of this approach is that DB access (or a cache) is required everytime the token is used.

JWTs encode and verify (via signing) their own claims. This allows folks to issue short-lived JWTs that are stateless (read: self-contained, don’t depend on anybody else). They do not need to hit the DB. This reduces DB load and simplifies application architecture because only the service that issues the JWTs needs to worry about hitting the DB/persistence layer (the refresh_token you've probably come across).

What is CORS?

• Cross Origin Resource Sharing — essentially a security feature to ensure approved browers receive approved infomation

Whats the difference between ES5 and ES6?

• ECMA Script 5(2009) and 6(2015). Used to standardize JS.
• ES6 releases let and const and arrow functions

How do you interact with APIs on the front end?

• I use API endpoints to get data, post data, etc(Get, Put, Post, Patch, Delete)

Whats the difference between an HTTP request and response?

• Request comes from the client. Response comes from the server.

What does a 200 status code mean?

• All good here!

What does a 400 status code mean?

• Something wrong happened, and it’s not the server’s fault

Whats the difference between let and const?

• const cannot be re-assigned. It is Constant

Whats your experience with React Hooks? Why use them?

• useEffect, useState
• Easier, more modular, clearer way to assign state, mutate state, and deal with side effects related to state

What is HTTP and give a brief definition?

• Hyper Text Transfer Protocol
• Foundation of the internet’s data communication

Explain a git merge workflow vs a git rebase workflow

• Oh god…. rebasing means you work through changes one by one?

What is TDD and give a brief definition?

• Test Driven Development
• Test First (most of the time) to ensure you’re actually building what you want to build

What does API stand for and how do you define it?

• Application Program Interface
• It’s remote data — data that is over THERE. That you can get if you ask properly

What does it mean to compile code?

• the transformation from Source Code (human readable) into machine code (computer executable)

How would you describe the prototype in Javascript?

• JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.

What is a Mock vs. a Stub in testing? When would you use each?

• Stub: a piece of mock data that allows you to control every aspect of a response object
• Mock: ?
• Intercept: Catch an outgoing network request before in reaches a server and then send the stub instead

Describe each of the four fundamental concepts of object-oriented programming.

• Inheritance
• Encapsulation
• Polymorphism
• Data Abstraction

What does it mean for a function to be deprecated?

• “retired”
• taking older code and marking it as no longer useful

What is the difference between synchronous vs. asynchronous?

• Synchronous: in sequence, a statement has to wait for an earlier statement to be executed
• Asynchronous: move to another task before the previous task finished

Explain meta tags in HTML

• Meta tags always go inside head tag of the HTML page
• Meta tags is always passed as name/value pairs
• Meta tags are not displayed on the page but intended for the browser
• Meta tags can contain information about character encoding, description, title of the document etc

Name some basic design elements

• LINE — The linear marks made with a pen or brush or the edge created when two shapes meet.
• SHAPE — A shape is a self contained defined area of geometric (squares and circles), or organic (free formed shapes or natural shapes). A positive shape automatically creates a negative shape.
• DIRECTION — All lines have direction — Horizontal, Vertical or Oblique. Horizontal suggests calmness, stability and tranquillity. Vertical gives a feeling of balance, formality and alertness. Oblique suggests movement and action
• SIZE — Size is simply the relationship of the area occupied by one shape to that of another.
• TEXTURE — Texture is the surface quality of a shape — rough, smooth, soft hard glossy etc.
• COLOUR — Colour is light reflected off objects. Color has three main characteristics: hue or its name (red, green, blue, etc.), value (how light or dark it is), and intensity (how bright or dull it is).

What is Node.js?

Node.js is a web application framework built on Google Chrome’s JavaScript Engine (V8 Engine).

Node.js comes with runtime environment on which a Javascript based script can be interpreted and executed (It is analogus to JVM to JAVA byte code). This runtime allows to execute a JavaScript code on any machine outside a browser. Because of this runtime of Node.js, JavaScript is now can be executed on server as well.

What is Scope in JavaScript?

In JavaScript, each function gets its own scope. Scope is basically a collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function’s scoped variables.

A variable name has to be unique within the same scope. A scope can be nested inside another scope. If one scope is nested inside another, code inside the innermost scope can access variables from either scope.

What is npm?

npm stands for Node Package Manager. npm provides following two main functionalities:

• Online repositories for node.js packages/modules which are searchable on search.nodejs.org
• Command line utility to install packages, do version management and dependency management of Node.js packages

What is webpack?

Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph. Webpack lets you use require() in your source code to point to local files, like images, and decide how they're processed in your final Javascript bundle, like replacing the path with a URL pointing to a CDN.

What is Binding in React? When should you bind?

Before we had ES6 arrow functions at our disposal, we had to manually bind our functions in the constructor, like this:

This took place in the constructor for a few reasons: you wouldn’t have to remember to bind it every place you wanted to pass it in the render, and it would only be declared once, when the constructor method was called. (Conversely, render is called every time the component state updates; there’s no need to have a bunch of identical bound addIdeas floating around in memory!)

You can see that using the arrow function is much shorter syntactically. However, it’s good to know the REASON behind using it, especially since some legacy codebases will still be using manually bound class methods.

Explain how this works in JavaScript.

this is a little tricky in JavaScript. Its value is determined by what the function you are inside of is called. In the global state, this is set to the window object. The value of this also depends on whether or not you are in strict mode. Inside a top-level function, a strict mode this will be undefined, whereas a non-strict mode this will be the window object. It's also worth knowing that the value of this can be overwritten with the bind method.

How can you manipulate an Object?

Object.keys, object.values, object.entries, add to an object, delete from an object.

You can add with dot notation object.key3 = “password”

You can delete with the delete operator

const Employee = {
  firstname: 'John',
  lastname: 'Doe'
};
delete Employee.firstname;
console.log(Employee.firstname);
// expected output: undefined

How do you merge an object?

• Use a spread operator ( ...)

let person = {     
  firstName: 'John',     
  lastName: 'Doe',     
  age: 25,     
  ssn: '123-456-2356' 
};   
let job = {     
  jobTitle: 'JavaScript Developer',     
  location: 'USA' 
};  
let employee = {     
  ...person,     
  ...job 
};

• Use the Object.assign() method

Object.assign(target, sourceObj1, sourceObj2, ...);
// Example:
let employee = Object.assign(person, job);

What is a deep copy versus a shallow copy?

Shallow copy

• Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

Deep copy

• A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

Describe how CSS works, the cascade, what rules take precedence?

• How do you manage state in a React App? Have you used Redux? (no) Follow up: without GSM, how do you manage state? Do you keep things more central and prop drill or spread things out between components, why?

Can you explain any common techniques or recent issues solved in regards to front-end security?

Explain what ARIA and screenreaders are, and how to make a website accessible.

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

Explain the difference between cookies, session storage, and local storage?

Why is it called a Ternary operator, what does the word “Ternary” indicate?

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

What is HTTPS?

Hypertext Transfer Protocol Secure is a version of HTTP (Hypertext Transfer Protocol) that is encrypted. This means that sensitive data like passwords are not able to be read while in transit. Any sensitive information should be sent over HTTPS. Companies like Google are even starting to push that all websites should be served over HTTPS as its become readily available and fast.

What is XSS?

Cross-Site Scripting attacks are when an attacker sneaks some malicious code into a web page viewed by others. Think of a social media site like Facebook. If you uploaded an image that looked like <img src=" javascript:alert('hello everybody')"></img>, you can imagine the surprise other users would have when they clicked on your image and saw a browser alert!

What is a SQL injection?

Another type of attack. If you have a search form, for example, and when a user types in a name like “Kelly” you take that string and do an SQL lookup for it. Let’s say your SQL looks like this:

SELECT * FROM Users WHERE UserId = yourVariable

An attacker could put something malicious in the search bar like Kelly OR 1=1, and now it will return a list of all users instead of just the requested one.

• Explain event delegation.
• Explain how prototypal inheritance works.
• What’s the difference between a variable that is: null, undefined or undeclared?
• What is a closure, and how/why would you use one?
• What language constructions do you use for iterating over object properties and array items?
• Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?
• What’s a typical use case for anonymous functions?
• What’s the difference between host objects and native objects?
• Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?
• Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
• Explain “hoisting”.
• What’s the difference between an “attribute” and a “property”?
• What are the pros and cons of extending built-in JavaScript objects?
• What is an example of an immutable object in JavaScript?
• What is the event loop?
• What is the difference between call stack and task queue?
• What are the differences between variables created using let, var or const?
• What are the differences between ES6 class and ES5 function constructors?
• What advantage is there for using the arrow syntax for a method in a constructor?
• What is the definition of a higher-order function?
• Can you give an example for destructuring an object or an array?