Front-End Interview Questions

What is the difference between == and ===?

== is the abstract equality operator while === is the strict equality operator. The == operator will compare for equality after doing any necessary type conversions. The === operator will not do type conversion, so if two values are not the same type === will simply return false. When using ==, funky things can happen.

What is a closure?

A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables — a scope chain. The closure has three scope chains: - it has access to its own scope — variables defined between its curly brackets - it has access to the outer function's variables - it has access to the global variables

What are controlled components?

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.

What is "key" prop and what is the benefit of using it in arrays of elements?

A key is a special string attribute you should include when creating arrays of elements. Key prop helps React identify which items have changed, are added, or are removed. Most often we use ID from our data as key.

What are the pros and cons of monolithic vs microservice architectures?

A monolithic architecture means that your app is written as one cohesive unit of code whose components are designed to work together, sharing the same memory space and resources. A microservice architecture means that your app is made up of lots of smaller, independent applications capable of running in their own memory space and scaling independently from each other across potentially many separate machines. Monolithic Pros: The major advantage of the monolithic architecture is that most apps typically have a large number of cross-cutting concerns, such as logging, rate limiting, and security features such audit trails and DOS protection. When everything is running through the same app, it's easy to hook up components to those cross-cutting concerns. There can also be performance advantages, since shared-memory access is faster than inter-process communication (IPC). Monolithic cons: Monolithic app services tend to get tightly coupled and entangled as the application evolves, making it difficult to isolate services for purposes such as independent scaling or code maintainability. Monolithic architectures are also much harder to understand, because there may be dependencies, side-effects, and magic which are not obvious when you're looking at a particular service or controller. Microservice pros: Microservice architectures are typically better organized, since each microservice has a very specific job, and is not concerned with the jobs of other components. Decoupled services are also easier to recompose and reconfigure to serve the purposes of different apps (for example, serving both the web clients and public API). They can also have performance advantages depending on how they're organized because it's possible to isolate hot services and scale them independent of the rest of the app. Microservice cons: As you're building a new microservice architecture, you're likely to discover lots of cross-cutting concerns that you did not anticipate at design time. A monolithic app could establish shared magic helpers or middleware to handle such cross-cutting concerns without much effort. In a microservice architecture, you'll either need to incur the overhead of separate modules for each cross-cutting concern, or encapsulate cross-cutting concerns in another service layer that all traffic gets routed through. Eventually, even monolthic architectures tend to route traffic through an outer service layer for cross-cutting concerns, but with a monolithic architecture, it's possible to delay the cost of that work until the project is much more mature. Microservices are frequently deployed on their own virtual machines or containers, causing a proliferation of VM wrangling work. These tasks are frequently automated with container fleet management tools.

What is a promise?

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection. Promises are eager, meaning that a promise will start doing whatever task you give it as soon as the promise constructor is invoked. If you need lazy, check out observables or tasks. Fetch is a common example of a promise: fetch('http://example.com/movies.json') .then(response => response.json()) .then(data => console.log(data));

What is a pure function?

A pure function is a function which: - Given the same input, will always return the same output. - Produces no side effects.

Explain Ajax in as much detail as possible.

Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly substitute use JSON instead of XML, due to the advantages of JSON being native to JavaScript. The XMLHttpRequest API is frequently used for the asynchronous communication or these days, the fetch API.

What is the difference between Element and Component?

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated. Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

What skills are needed to be a good front-end developer?

Attention to detail, ability to learn things quickly and often, patience for digging into errors and bugs

What does a doctype do?

Basically, the DOCTYPE describes the HTML that will be used in your page. Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect one can trigger quirks mode. The kicker here is, that quirks mode in Internet Explorer is quite different from quirks mode in Firefox (and other browsers); meaning that you'll have a much harder job, trying to ensure your page renders consistently with all browsers if the quirks mode is triggered, than you will if it is rendered in standards mode.

What is the difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

What is the difference between classical inheritance and prototypal inheritance?

Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the `new` keyword. Class inheritance may or may not use the `class` keyword from ES6. Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or `Object.create()`. Instances may be composed from many different objects, allowing for easy selective inheritance.

Explain event delegation.

Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are: Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant. There is no need to unbind the handler from elements that are removed and to bind the event for new elements.

How to create components in React?

Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as first parameter and return React elements. Class Components: You can also use ES6 class to define a component.

What is functional programming?

Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and application state flows through pure functions. Contrast with object oriented programming, where application state is usually shared and colocated with methods in objects. Functional programming is a programming paradigm, meaning that it is a way of thinking about software construction based on some fundamental, defining principles (listed above). Other examples of programming paradigms include object oriented programming and procedural programming. Functional code tends to be more concise, more predictable, and easier to test than imperative or object oriented code — but if you're unfamiliar with it and the common patterns associated with it, functional code can also seem a lot more dense, and the related literature can be impenetrable to newcomers.

Explain "hoisting".

Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the var keyword will have their declaration "moved" up to the top of their module/function-level scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is. Note that the declaration is not actually moved - the JavaScript engine parses the declarations during compilation and becomes aware of declarations and their scopes. It is just easier to understand this behavior by visualizing the declarations as being hoisted to the top of their scope.

Talk about your preferred development environment.

I like VSCode because of the Git integration, the plethora of add-ons for code linting, style checking, and code snippets, plus the integrated terminal is really nice.

What excites or interests you about coding?

I love that there's always something new to learn.

Which version control systems are you familiar with?

I use Git and GitHub a lot.

What actions have you personally taken on recent projects to increase maintainability of your code?

I've made a point of trying to make my code more modular. For example, for one of my personal projects, I have a loading screen that displays while my application is making a fetch request from an API. Instead of just having the screen say "Loading," I want to be able to describe exactly what the user is waiting on (in that case, they have to wait for the browser geolocation API to finish gathering their location). But I want to be able to reuse that loading page for other scenarios in the application, so I went ahead and made the loading element its own component that receives its own props that will display a message based on whatever you send into it. That way, the loading component is reusable and can fit into a variety of contexts. Also, readability is a huge factor for me. Resisting the clever way to write something and just writing in a way that I have a chance of understanding later on makes a huge difference. Also, code comments used sparingly can be a huge help later on too. I like using a documentation system in Ruby called YARD, where for every method you explicitly say what data types your parameters are, what data type the result is, and briefly describing what the method does.

How many resources will a browser download from a given domain at a time?

IE7 allowed only two concurrent connections per host. But most browsers today allow more than that. IE8 allows 6 concurrent connections, Chrome allows 6, and Firefox allows 8. So if your web page only has 6 images, for example, then it'd really be pointless to spread your images across multiple subdomains.

When to use a Class Component over a Function Component?

If the component needs state or lifecycle methods then use class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in class component right in your function component.

Why should we not update the state directly?

If you try to update state directly then it won't re-render the component. Instead use setState() method. It schedules an update to a component's state object. When state changes, the component responds by re-rendering.

Can you describe some SEO best practices or techniques you have used lately?

Improving application speed (important for search result rankings), making mobile experience a priority (in March 2020 Google announced that it will now primarily use its mobile smartphone user-agent to crawl sites.)

What are the advantages of React?

Increases the application's performance with Virtual DOM. JSX makes code easy to read and write. It renders both on client and server side (SSR). Easy to integrate with frameworks (Angular, Backbone) since it is only a view library. Easy to write unit and integration tests with tools such as Jest.

What are the major features of React?

It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive. Supports server-side rendering. Follows Unidirectional data flow or data binding. Uses reusable/composable UI components to develop the view.

What is JSX?

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

Can you name two programming paradigms important for JavaScript app developers?

JavaScript is a multi-paradigm language, supporting imperative/procedural programming along with OOP (Object-Oriented Programming) and functional programming. JavaScript supports OOP with prototypal inheritance.

When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?

Making fewer requests, compressing an optimizing your assets via a build tool like ImageOptim, lazy loading, using a CDN, code splitting, loading JS asynchronously using async + defer

How did you handle a disagreement with your boss or your collaborator?

Manager had a problem with us wanting to get an exception monitoring tool like Honeybadger (reports errors, it helps you work with your team to fix them. Errors can be assigned. You can comment via email.). He kind of misunderstood what it was for, and he was thinking it would just be duplicating the results of a logging tool like Cloudwatch that we already had. But we needed a tool to get a deeper dive into the stack trace of our errors, so one of our DevOps people and I sent him some documentation about Honeybadger and outlined more clearly our use case for it. My manager ended up relenting, and I think it was because we approached him with clear justifications for why we were making that particular decision.

How would you optimize a website's assets/resources?

Minify your JavaScript using a tool like Uglify, use a tool like ImageOptim to compress your images

What did you learn yesterday/this week?

Next.js (built on top of React, better speed and performance for single-page apps, automatic code-splitting to only load the JS and CSS that's needed for a given page), also Tailwind (less opinionated CSS framework for you to build your own design system)

What are the pros and cons of functional programming vs object-oriented programming?

OOP Pros: It's easy to understand the basic concept of objects and easy to interpret the meaning of method calls. OOP tends to use an imperative style rather than a declarative style, which reads like a straight-forward set of instructions for the computer to follow. OOP Cons: OOP Typically depends on shared state. Objects and behaviors are typically tacked together on the same entity, which may be accessed at random by any number of functions with non-deterministic order, which may lead to undesirable behavior such as race conditions. FP Pros: Using the functional paradigm, programmers avoid any shared state or side-effects, which eliminates bugs caused by multiple functions competing for the same resources. With features such as the availability of point-free style (aka tacit programming), functions tend to be radically simplified and easily recomposed for more generally reusable code compared to OOP. FP also tends to favor declarative and denotational styles, which do not spell out step-by-step instructions for operations, but instead concentrate on what to do, letting the underlying functions take care of the how. This leaves tremendous latitude for refactoring and performance optimization, even allowing you to replace entire algorithms with more efficient ones with very little code change. (e.g., memoize, or use lazy evaluation in place of eager evaluation.) Computation that makes use of pure functions is also easy to scale across multiple processors, or across distributed computing clusters without fear of threading resource conflicts, race conditions, etc... FP Cons: Over exploitation of FP features such as point-free style and large compositions can potentially reduce readability because the resulting code is often more abstractly specified, more terse, and less concrete. More people are familiar with OO and imperative programming than functional programming, so even common idioms in functional programming can be confusing to new team members. FP has a much steeper learning curve than OOP because the broad popularity of OOP has allowed the language and learning materials of OOP to become more conversational, whereas the language of FP tends to be much more academic and formal. FP concepts are frequently written about using idioms and notations from lambda calculus, algebras, and category theory, all of which requires a prior knowledge foundation in those domains to be understood.

What is a recent technical challenge you experienced and how did you solve it?

Our product owner wanted a customized dropdown for our targeted search form, but it turns out it's very hard to style a select element in HTML, so I dug around and found a small Ruby gem that will wrap a select element in some JavaScript that you can then style yourself and add animations to. However, there was a huge bug introduced with that library, because whenever you pressed the back button on our application a duplicate select element would appear under the existing select element, and if you kept going backwards and forwards, the select element would keep duplicating in a huge stack. I suspected that Turbolinks was to blame, and sure enough, after fiddling around with Turbolinks settings for a long time, I figured out how to turn off Turbolinks for a specific part of your application. As a result, I learned a lot about the Turbolinks API, and I also got to contribute back to the library I used for the select element, because there was a whole thread of people having the same problem and I just commented my solution, which felt really good. There have been a lot of times when I gain a lot more appreciation for just how interconnected and complex the frontend can be, and how changing something in one area can have cascading effects elsewhere if you're not careful about your frontend architecture.

What are props in React?

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component. The primary purpose of props in React is to provide following component functionality: Pass custom data to your component. Trigger state changes. Use via this.props.reactProp inside component's render() method.

What is React?

React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It is used for handling view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012.

What are Pure Components?

React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won't compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.

What is Redux?

Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies.

What are the core principles of Redux?

Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application. State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.

Can you describe the difference between progressive enhancement and graceful degradation?

So, graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them. Progressive enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it. In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

What is state in React?

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components. State is similar to props, but it is private and fully controlled by the component. i.e, It is not accessible to any component other than the one that owns and sets it.

What is asynchronous programming, and why is it important in JavaScript?

Synchronous programming means that, barring conditionals and function calls, code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O. Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. When the response is ready, an interrupt is fired, which causes an event handler to be run, where the control flow continues. In this way, a single program thread can handle many concurrent operations. User interfaces are asynchronous by nature, and spend most of their time waiting for user input to interrupt the event loop and trigger event handlers. Node is asynchronous by default, meaning that the server works in much the same way, waiting in a loop for a network request, and accepting more incoming requests while the first one is being handled. This is important in JavaScript, because it is a very natural fit for user interface code, and very beneficial to performance on the server.

What resources do you use to learn about the latest in front end development and design?

Syntax podcast, Software Engineering Daily, Smashing Magazine, CSS Tricks, Reddit and Twitter

What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser's native event. It's API is same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

What are uncontrolled components?

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

What is Virtual DOM?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation. The Virtual DOM works in three simple steps: - Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation. - Then the difference between the previous DOM representation and the new one is calculated. - Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

When is classical inheritance an appropriate choice?

The answer is never, or almost never. Certainly never more than one level. Multi-level class hierarchies are an anti-pattern. A single level is sometimes OK, from a framework base-class such as React.Component.

What are the different phases of component lifecycle?

The component lifecycle has three distinct lifecycle phases: Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods. Updating: In this phase, the component get updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods. Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

What is Flash of Unstyled Content? How do you avoid FOUC?

The first technique is presented in a FOUC tutorial by Brad Baxter. He outlines a simple method for minimizing FOUC by hiding all or part of the web page until all styles and JavaScript are finished by applying a class name "js" as the selector that hides all content within a container that has an id="fouc". The "fouc" element is unhidden using a JavaScript getElementById function setting the display value to "block" level. A technique that is a no-brainer for most web developers is that you must include your link tag(s) to stylesheets within the <head> of your web page documents.

Explain how this works in JavaScript

There's no simple explanation for this; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of this depends on how the function is called. I have read many explanations on this online, and I found Arnav Aggrawal's explanation to be the clearest. The following rules are applied: If the new keyword is used when calling the function, this inside the function is a brand new object. If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument. If a function is called as a method, such as obj.method() — this is the object that the function is a property of. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object. If multiple of the above rules apply, the rule that is higher wins and will set the this value. If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.

What's a typical use case for anonymous functions?

They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope. As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.

What does "favor object composition over class inheritance" mean?

This is a quote from "Design Patterns: Elements of Reusable Object-Oriented Software". It means that code reuse should be achieved by assembling smaller units of functionality into new objects instead of inheriting from classes and creating object taxonomies. In other words, use can-do, has-a, or uses-a relationships instead of is-a relationships.

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

To prevent Cross-Site Scripting (XSS) Attack, use appropriate response headers (To prevent XSS in HTTP responses that aren't intended to contain any HTML or JavaScript, we can use the Content-Type and X-Content-Type-Options headers to ensure that browsers interpret the responses in the way you intend. Eg. A JSON data should never be encoded as text/html, to prevent it from accidental execution.)

What are two-way data binding and one-way data flow, and how are they different?

Two way data binding means that UI fields are bound to model data dynamically such that when a UI field changes, the model data changes with it and vice-versa. One way data flow means that the model is the single source of truth. Changes in the UI trigger messages that signal user intent to the model (or "store" in React). Only the model has the access to change the app's state. The effect is that data always flows in a single direction, which makes it easier to understand. One way data flows are deterministic, whereas two-way binding can cause side-effects which are harder to follow and understand. React is the new canonical example of one-way data flow, so mentions of React are a good signal.

What's the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

Undeclared variables are created when you assign a value to an identifier that is not previously created using var, let or const. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a ReferenceError will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a try/catch block. A variable that is undefined is a variable that has been declared, but not assigned a value. It is of type undefined. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of undefined. To check for it, compare using the strict equality (===) operator or typeof which will give the 'undefined' string. Note that you should not be using the abstract equality operator to check, as it will also return true if the value is null. A variable that is null will have been explicitly assigned to the null value. It represents no value and is different from undefined in the sense that it has been explicitly assigned. To check for null, simply compare using the strict equality operator. Note that like the above, you should not be using the abstract equality operator (==) to check, as it will also return true if the value is undefined.

Explain some of the pros and cons for CSS animations versus JavaScript animations.

Use CSS when you have smaller, self-contained states for UI elements. CSS transitions and animations are ideal for bringing a navigation menu in from the side, or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS. Use JavaScript when you need significant control over your animations. The Web Animations API is the standards-based approach, available today in most modern browsers. This provides real objects, ideal for complex object-oriented applications. JavaScript is also useful when you need to stop, pause, slow down, or reverse your animations.

How do you serve a page with content in multiple languages?

Using internationalization. So for our applications in Rails, our open-source engine provides a number of YAML files with internationalization, so that each piece of text in our UI has a proper translation that we can just load depending on the user's settings.

What are data- attributes good for?

When you want custom attributes on HTML elements, like to specify styling or to easily attach an id to a like button so that you can quickly send to the server the id of the thing that the user is clicking like on.

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

aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label, only the aria-label value will be used. You might use an aria-label attribute when you have some kind of visual indication of an element's purpose, such as a button that uses a graphic instead of text, but still need to clarify that purpose for anyone who cannot access the visual indication, such as a button that uses only an image to indicate its purpose. Unlabeled links and buttons (can't figure out what they're for), no image descriptions, poor use of headings for navigating a page with a screen reader, autoplaying video and audio (just goes to show that making the web accessible improves it for everyone, not just those with disabilities).

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

cross-origin resource sharing — The CORS standard is needed because it allows servers to specify not only who can access the assets, but also how they can be accessed. Cross-origin requests are made using the standard HTTP request methods. Most servers will allow GET requests, meaning they will allow resources from external origins (say, a web page) to read their assets. HTTP requests methods like PATCH, PUT, or DELETE, however, may be denied to prevent malicious behavior. For many servers, this is intentional. For example, it is likely that server A does not want servers B, C, or D to edit or delete its assets. With CORS, a server can specify who can access its assets and which HTTP request methods are allowed from external resources.

What are the lifecycle methods of React?

getDerivedStateFromProps: Invoked right before calling render() and is invoked on every render. This exists for rare use cases where you need derived state. Worth reading if you need derived state. componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur. shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop. getSnapshotBeforeUpdate: Executed right before rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position. componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false. componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

more semantic text markup new form elements vedio and audio new javascript API canvas and SVG new communication API geolocation API web worker API new data storage

Build me a click counter in React

y