React, TypeScript & Testing, Databases & Security, Node.js, JavaScript, CSS layout, HTML/CSS Intro

What are some examples of falsey values in JS?

0, empty string, undefined, null, NaN

What are pure functions?

A Pure function doesn't change anything outside of its scope. It only depends on its inputs.

What is block element?How is it different from inline elements?

A block element is a display type that starts in a new line and takes up the whole line. It differs from an inline element that an inline element doesn't start with a new line nor takes up the whole line.

What is an HTTP request and HTTP response?

An HTTP request is what is sent from the front-end to the back-end to retrieve or submit information and data. An HTTP response is what is returned from the back-end to the front-end to confirm they have received the request. A status code will also be included in the response.

What is the Event interface?

An event interface is triggered by the event handler. The target is represented by .target, which is a reference to the DOM element that the event is dispatched from. The interface was conducted by manipulating this target.

What are some global objects in Node.js?

Built-in global objects are console and process.

What is CORS?

CORS stands for Cross-Origin Resource Sharing, it means that the server uses HTTP headers to decide which origins that a browser can load resources from.

Explain clickjacking. How do we prevent it?

Clickjacking means an attacker forces an authenticated user to send a request by tricking them into clicking something that looks legit. We could prevent it by using X-Frame Options, Content Security Policy headers, SameSite cookies, and frame-killing.

What is a closure? Can you provide an example use-case in words?

Closure is an inner function which references the outer function scope and its variable. For example, if there is a function called counter with a variable "let counter =0", there could be another function inside the counter function that increments counter and returns it.

What is code coverage about?

Code coverage is the percentage of code which is covered by automated tests. Proper range 85-95

What is CommonJS? How does it differ from ES Modules?

CommonJS is a module system in Node.js that allows a file to import modules synchronously. It differs from ES Modules in three ways. CommonJS is synchronous and loads as needed, while ES Modules is asynchronous and loads everything initially. CommonJS uses require() and module.exports while ES Module uses import and export keywords. The import usage of Common JS could be anywhere, while the ES Module has top-level scope import usage.

What are custom hooks for? What is the naming convention for them?

Custom hooks are functions that may call other hooks and return state, data, or other functions. They follow hook naming conventions.

What is data modeling? Can you give an example and explain data modeling in terms of entities and their relationships?

Data modeling is the process of analyzing data requirements and defining their relationships. There are three types of relationships: one-to-one, one-to-many, and many-to-many. For example, users and songs have a many-to-many relationship since a user could like multiple songs and a song could be liked by multiple users.

What are the different types of attribute selectors?

Different attribute selector types include: [attr], which stands for all elements with attribute "attr", [attr=value], which stands for attribute "attr" with value "value", [attr^=value], which stands for "attr" starts with "value", [attr$=value], which stands for "attr" ends with "value", [attr*=value], which stands for "attr" contains "value"

What are the different types of CSS selectors?

Different types of CSS selectors include simple selector, combinator selector, pseudo-class/element selector, and attribute selector.

What are the different types of scopes?

Different types of scopes include block scope, which is limited within a non-function body, function scope, which is limited to within a function body, and global scope, which is within all code.

Explain the diffing algorithm? How do keys play a role?

Diffing is a React's algorithm for comparing the two virtual DOMs to determine what to update in the real DOM. It starts at the two roots and continues down the tree with a depth-first search. Keys are attributes that uniquely identify the children nodes. It is used to match children in a list.

Explain embedded vs reference relationships.

Embedded relationships means documents of one model contain nested documents of another model. Reference relationships means documents of one model contain references to other documents of another model. Embedded relationships are denormalized, have one query access, and the document is retrieved together with the parent with mostly unique data. Reference relationships are normalized, have subqueries, and rarely retrieved with the parent.

What are 3 ways to iterate an array? What is their syntax?

For loop: for(var i=0; i<arr.length; i++), for(var num of arr), forEach: arr.forEach((num,index, arr)=>{})

How does HTTPS differ from HTTP?

HTTPS stands for HTTP Secure, it is HTTP with a layer of encryption that involves TLS/SSL certificates.

What is prototype-based OOP in JS?

JS implements OOP through class and objects. A class is a reusable template for creating objects with specified data properties and methods. An object is an instantiation of a class.

Can you name the new ES6 features?

Let, Const, Arrow Functions, Template string literals, Map, Set, Array & Object Destructuring, Spread & Rest Operator, Enhanced object literals, Default function parameters, Generators, Classes

Explain localStorage vs sessionStorage.

Local storage is an object that stores data until you explicitly clear cache or remove it. Session storage is an object that stores data as long as the tab is open, until the tab is closed.

Explain normalization and why it is useful.

Normalization is the process of organizing datasets efficiently by splitting them to prevent data redundancy and avoid anomalies.

Explain Promise.all() vs Promise.allSettled().

Promise.all() works like a logical 'AND.' It returns a promise that resolves only if all of the input of Promise.all() are successful. It is short circuited in a way that if a left side promise failed, it will stop execution and return rejected. Promise.allSettled() will return the result when all of the input is done processing. It will give you access to each promise status and result.

What is the advantage of Promises over callbacks?

Promises have a higher priority than callbacks. Using promises will allow content to be executed first in the event loop.

What is prop drilling?

Prop drilling is the process of sending props down through the nested child components, in which the middle components are just passing the data and don't actually need it.

How does TypeScript type-checking differ from React PropTypes?

PropTypes does type-checking during runtime while the application is running in the browser. However, TypeScript does type-checking during compile time when the TypeScript code is compiled to JavaScript.

Explain the difference between public, private, protected.

Public means this variable can be assessed inside and outside the class. Private means this variable can only be accessed within the class. Protected means this variable can only be accessed within the class or its subclasses.

What is pubsub-js? What is it used for?

Pubsub-js is a library that allows two components to send data regardless of their position in the component tree. Three methods included in this library are subscribe, unsubscribe, and publish.

What is a pure function? What are the advantages to writing pure functions?

Pure functions are functions that have their outputs depend only on their inputs. Pure functions don't modify input or anything outside of their scope. Pure functions are faster than regular functions and use less memory,

Explain what the Redux store, actions, reducers are and what they do. What is the workflow?

Redux store contains centralized state and handles updates. Redux action is a JS object containing a type and payload. Redux reducer is a pure function that is used to change content in the store. UI, click add to cart -> dispatch an action to the store -> sends old state and action to reducer -> new state back to store -> re-render in UI

What are reference data types in JS?

Reference data types associate keys to values. Object is reference data type, it includes functions, arrays, map, and set.

What are refs?

Refs provide a way to access DOM nodes for React elements created in the render method. We use it to modify a child component without using props. We use refs when we want to integrate third party DOM libraries or trigger animation.

What are regular expressions?

Regular expressions are strings that describe patterns for matching and searching text.

What are reusable components?

Reusable components could be easily customized with different props. They consist of multiple different data structures and options for styling, and could be used in different places throughout the application.

Explain serialization vs deserialization.

Serialization is the process of converting an object into a stream of bytes, in which data becomes platform-independent and easier to transfer over the network. Deserialization is the process of converting a stream of bytes into the original object.

What are sessions and cookies? Why do we use them?

Session is the time that a user spends on a website actively doing something. We use sessions to store user data in memory, files, or databases.

What would happen if I set float:left to a block element?

Setting float:left to an element will align it to the left.

What are the advantages of redux?

Some advances of redux include it is predictable and maintainable, it persists state between refresh, and it has internal optimization.

What are template engines and their advantages?

Template engines are software that transforms static template files into HTML files by substituting variables with actual values during server runtime. They would allow JS expressions in markup.

What is the benefit of Redux Dev Tools?

The Redux Dev Tools allow us to monitor and debug redux applications by reading state, undoing changes, and viewing errors.

What would happen if you clicked on a link created using <a href='javascript:void(0)' />?

The browser won't load a new page or refresh the page. Instead, It will perform JavaScript attached to the link. (freecodecamp)

What is the virtual DOM?

The virtual DOM is a lightweight, in-memory copy of the real DOM. It is faster to compare differences in updates.

What are the major differences between CSS transitions and animations?

Transition is a single transform between an initial state and a final state, while animation could have many states in between. Transition can only run once with a trigger, while animation could run infinitely with or without trigger.

What are the disadvantages of synchronous code?

Using synchronous code will make the code to be executed line-by-line. If there is one section of code that takes a lot of time to compile, code after it will have to wait for it to finish executing. It's not the most time-saving method.

What is the difference between vertical and horizontal scaling?

Vertical scaling means to upgrade a server with better CPU, more RAM, or more storage space. Horizontal scaling means to distribute the dataset and query load over multiple servers that handle a subset of the overall work.

How do we register event handlers for a selected element?

We add an event listener function to the element. Within the listener function, we include code to make the event do anything we desired.

How do you create/configure a store in redux?

We call the function "createStore" and pass in a reducer, an initial state, and an enhancer to create the store. We call ".getState", ".dispatch", and ".subscribe" functions to config the store.

How do you import CSS?

We could include external CSS with <link rel= "stylesheet" href= "..."> and include the path of the CSS file in the href section.

How do you pass data to another component through the router?

We could use this.prop.match.params, this.props.location.search, or this.props.location.state.

Explain XSS. How do we prevent it?

XSS means attackers inject scripts into a website through user input fields. We could prevent it by using input validation and output encoding.

What is SOP? How do we fix it?

SOP stands for same-origin policy, which means browsers restrict scripts from one origin from interacting with scripts or documents from another origin.

What is a SPA?

SPA stands for single-page application, which means a web app loads a single HTML document and rewrites the page with new data constantly.

How do SSR, CSR, and SSG affect page performance?

SSG (static files available before request) > CSR (empty HTML page and loads content to the page) > SSR (server generates a new HTML page every time). However, SSG shouldn't not be used when display different data to different users, and CSR has long initial JS loading and shouldn't be used when we want better SEO.

What is SSO? What are some examples?

SSO stands for single sign-on, it means using one set of credentials to authenticate themselves in multiple applications. One example could be using a Google or Facebook account to login to another platform.

Assume a parent element has width = 200px and one child element with width=100px. If the child element's margin-right is set to 'auto', what is the child element's left-margin & right-margin values?

left-margin=0px; right-margin=100px;

Explain mapStateToProps and mapDispatchToProps.

mapStateToProps specifies the slice of state to subscribe to and returns that in an object, and mapDispatchToProps specifies the functions to call that will dispatch actions to the store.

What are the different timing or scheduling functions in Node.js?

setTimer, setInterval, process.nextTick

What is @extend? What are some use cases?

@extend works like @include, but @mixin is replaced by "%" in this case. It doesn't take arguments.

What is the usage of !important? What are some use cases?

!important sets a style to highest priority. We should avoid using !important because a stylesheet may not function as we expected one of the styles might be set to !important elsewhere.

How do we declare a SCSS variable? How do we declare CSS variables?

"$" for SCSS variable, "--" for CSS variable.

What is the usage of '&' in SCSS?

"&" is used referring back to the parent selector in nested CSS

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

"==" will convert both sides to the same type for evaluation. "===" is a strict equal comparison that will return false if the two sides have different types.

What is 'use strict'? What are the major effects that it has?

'Use strict' is an expression that makes JS executed in strict mode. Some effects it will cause include users cannot use undeclared variables, objects, or functions, users cannot delete variables or objects, and users cannot have duplicate function argument names.

Assume an element has the following properties. What is the element size (width & height)? Please explain how you arrived at your solution. width: 100px; height: 100px; margin: 20px 50px; padding: 10px 10px; border: 2px; box-sizing: border-box;

(Width) Padding+Border=2*(10px+2px)=24, which is less than the width of 100px. (Height) Padding+Border=2*(10px+2px)=24, which is less than the height of 100px. Actual width=100px; Actual height=100px; Size=100px*100px

Explain the following hooks provided by react-router-dom (what it does, what's the syntax). 1. useNavigate 2. useParams 3. useLocation

1. useNavigate returns a function that can redirect users to paths specified by the router. 2. useParams returns an object of key/value pairs matching the current URL route parameters. 3. useLocation returns the location object that represents the current URL.

Explain the following hooks provided by react-redux (what it does, what's the syntax). 1. useSelector 2. useDispatch 3. useStore

1. useSelector returns a slice of state that component will subscribe to. 2. useDispatch returns the Redux store dispatch method. 3. useStore hook allows to read and write from the Store.

Explain the following hooks (what it does, what's the syntax). What are their class component equivalents? 1. useState 2. useReducer 3. useEffect 4. useRef

1. useState provides state to function components. It returns an array with the current state as the first argument and update state as the second argument. The states persist between re-renders. 2. useReducer provides state and a dispatch method to function components. It takes two arguments, the first argument is the reducer, and the second argument is the initial state. 3. useEffect executes code with side effects at different parts of the life cycle. It combines componentDidMount, componentDidUpdate, and componentWillUnmount. We pass in a callback function and a dependency array. When the dependency array changes, it will trigger the callback. 4. useRef returns a mutable ref object with a property "current."

What is @mixin? What are some use cases?

@mixin defines a rule that can be copied and reused throughout the stylesheet with @include. It accepts arguments.

What is a DOM event?

A DOM event is an action on the webpage that the code listens to and responds to using event handlers.

How many states does a Promise have? What are they?

A Promise has three states: pending, fulfilled, and rejected. Pending state represents the time when the Promise was just created. Fulfilled state means the promise was resolved with a value, and rejected state means the promise was rejected with an error.

How do first-class functions differ from higher-order functions?

A first-class function is treated like a variable. A higher-order function takes in functions as arguments and returns functions.

What is a flex container? Can you explain some flex container properties?

A flex container is a wrapper element styled with "display:flex." Some properties include: flex-direction: which item will items be arranged (row/column, row-reverse/column-reverse.) Default direction is row. flex-wrap: If a new line will be started as the screen become smaller (nowrap/wrap/ reverse). flex-flow: Shorthand property for flex-direction and flex-wrap, setting both at the same time. justify-content: Assign flex items in their main axis. (flex-start/flex-end/center/space-around/space-between) align items: Align items in their cross axis. (stretch, flex-start, flex-end, baseline) align-content: Align flex lines. (stretch, flex-start, flex-end, center, space-around, space-between)

What is a grid container? Can you explain some grid container properties?

A grid container is styled with "display:grid." Some properties include: grid-template-columns: space-separated list of lengths that represents the width of column. grid-template-rows: space-separated list of lengths that represents the height of row. justify-content: align grid horizontally (start/end/center/space-around/space-between.) align-content: align grid vertically (start/end/center/space-around/space-between.) gap: space between row and column

What are the major differences between a map and object?

A map has no default keys, has keys that could be type, has order based on insertion, uses .size to get size, is iterable, and could not be serialized or parsed. An object has default keys of prototype, has keys that could only be string or symbol, has no order, has to iterate to get size, and could be serialized or parsed.

What is a primary key and a foreign key?

A primary key is the column that uniquely identifies a record in a table. A foreign key is the column of one table that is the primary key of another table.

What is a Promise?

A promise is an object that represents eventual completion or failure of an asynchronous operation and its resulting value. Its declaration consists of a function with resolve and reject as parameters and use them to execute a callback.

What is a proxy?

A proxy is a server that acts as the middleman between a client and server holding resources. Client sends request to proxy, and proxy sends the request to the server. As the server provides a response, the proxy delivers it back to the client. It could be used to allow Cross Origin Resource Sharing.

What is a pseudo-element?

A pseudo-class defines a part of an element

What is a pseudo-class?

A pseudo-class defines a state of an element

What is a relational database?

A relational database has a static, pre-defined schema. It focuses on consistency and uses SQL as the query language. It has ACID properties, which include atomic, consistent, isolated, and durable.

What is a seed file for?

A seed file is a script that programmatically populates the data store with as much fake data as needed for testing purposes.

What are the major differences between a set and array?

A set is not ordered, could be iterated, unique values, uses .has() to check if it contains an element, and uses .add() to append an element. An array is ordered by index, different indexes can contain the same value, uses .includes() to look up if it contains a value, and uses .push(), .unshift(), or .splice() to add an element.

What is state, and how do you update it? Can you mutate it directly?

A state is a component's built-in object that persists between renders. We can't mutate it directly. We should use this.setState(new State, callback) to update the state asynchronously.

Could you explain the different classes of HTTP status codes? What are some common status codes?

A status code between 100-199 represents informational response. A status code between 200-299 represents successful responses. A status code between 300-399 represents directional responses. A status code between 400-499 represents client error responses. A status code between 500-599 represents server error responses. Some common status code include: 200 OK, 201 Created, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 500 Internal Server Error, and 503 Service Unavailable.

What are synthetic events?

A synthetic event is a react wrapper around the native DOM event for cross-browser compatibility.

What is a transaction? Assuming part of it succeeded and another failed, what happens?

A transaction is the execution of 1+ statement as a set. If a part of it succeeded and another failed, all changes are erased and rolled back.

Explain the difference type alias vs interface. When should you use each one?

A type alias is a name for a complex type that can be reused, while an interface defines object types to be reused. We should use aliases when combining other type aliases and interfaces, and use interfaces when annotating classes and objects.

What is AJAX?

AJAX uses XMLHttpRequest objects to asynchronously communicate with servers, exchange data, and update without reloading.

Could you explain accessibility, usability, and inclusion? Give some examples of each one in terms of web design.

Accessibility addresses equal usage of devices for people with disabilities. Examples include label and alt text for screen reader. Usability refers to designing the product to be effective, efficient, and satisfying. Examples include instructions on how to navigate through the site and emphasis on important content. Inclusion means universal design that is inclusive of people of all gender, race, demographics, and social status. Examples include providing multiple language options, time zone, and different currency and culture text and graphics.

Assume an element has the following properties. What is the element size (width & height)? Please explain how you arrived at your solution. width: 100px; height: 100px; margin: 20px 50px; padding: 10px 10px; border: 2px;

Actual width=100px+2*(10px+20px+2px)=164px, Actual height=100px+2 (10px+50px+2)=224px; Size=164px*224px

What is an execution context? How does it relate to the call stack?

An execution context is a container for all information needed to execute code. Two EC phases include creation and execution. The call stack stores all EC created when code is executed.

What is iframe?

An iframe is an inclusion of another webpage inside a webpage.

What are the differences between call, apply & bind?

Arguments for call() and bind() are separated by comma, for apply() this, comma, array of argument. Effect for call() and apply() executes function where 'this' refers to the given 'this', for bind() it copies function and makes 'this' refers to the given 'this.' The return for call() and apply() is a result of executing the function, for bind is the newly bound function.

How does the array type differ from tuples?

Array could be any length. Tuples are fixed length arrays of a length of 2.

What is async & await? How do we use them?

Async is a keyword for declaring a function that returns a promise. Await is an operator that pauses execution of the async function until a given promise completes. Async works like a Promise.resolve() wrapper and await works like a .then().

What do the async and defer attributes do when loading scripts?

Async means the script is downloaded in parallel and executed right after completion, even if HTML hasn't been fully parsed. Defer means the script is downloaded in parallel, but it will be executed only after HTML is fully parsed.

How do we test asynchronous code?

Asynchronous code could be tested with Mocha by adding async to the function.

What is asynchronous code in JavaScript?

Asynchronous code in JavaScript refers to the fact that JS engine invokes a long-running call-back function that executes after other operations are done.

What's the difference between authentication and authorization?

Authentication is to verify the identity, and authorization is to verify the permission.

What is axios? What are the benefits over using the fetch api?

Axios is a library that interacts with HTTP. It has three benefits compared to fetch API. First, it converts the response to json data automatically. Second, it could make use of interceptors for authorization. Third, it provides client-side support for CSRF protection.

What is the difference between BDD and TDD?

BDD stands for behavior driven development, which is an AGILE software development process that encourages collaboration among developers. TDD stands for test-driven development, which is a software development process relying on software requirements being converted to test cases before software is fully developed.

What do we use babel and web pack for in React applications?

Bable: transpile JSX to JS. Webpack: bundle JS file and minimize them

How are inline elements and block elements displayed in flow? Out of flow?

Block and inline elements work as expected for in flow and they are independent and don't take up space for out of flow.

What is CRUD?

CRUD stands for four basic operations that users should be able to do in software applications. They are Create, Read, Update, and Delete.

Explain CSRF. How do we prevent it?

CSRF stands for Cross-site Request Forgery. It means an attacker forces an authenticated user to send a request without them knowing or doing anything. We could prevent them by implementing retrieving only GET requests, avoiding cookies, using SameSite cookies, using CSRF token, and applying double-submit cookies.

What is a CSS preprocessor? What are the advantages and disadvantages, if any, to using them over plain CSS?

CSS preprocessor is a program with its own unique CSS-syntax that is transpiled into regular CSS.

What is CSS?

CSS stands for Cascade Style Sheet. It is used to add styles and decoration to HTML elements.

What is callback hell?

Callback hell happened in ES5, in which Promise was not added. There would be many nested functions that make it very difficult to read, maintain, and debug. This is solved in ES6 using the promise chain with .then().

What is the callback queue?

Callback queue holds Web API related operations. Promises are pushed into the microtask queue, which has the highest priority. Event listeners, timeouts, and intervals are pushed into the macrotask queue.

What is the difference between chai-http and supertest?

Chai HTTP is extended from the Chai Assertion library while supertest is an assertion library from Jest. Chai HTTP would automatically open and close the server while supertest won't do the same.

What are chart libraries for?

Chart libraries are components that allow us to visualize a set of data to a graphical representation.

What are functional components?How are they different from class components?

Class components are stateful, functional components are stateless. Functional components are functions that take props as input and return JSX. The first letter should be capitalized, and should be stateless.Class components will render. Function components do the same with return. We use the keyword "this" in class components but not in function components. You can not use hook in class components but could use them in functional components. Class components will automatically merge new key value pairs to state, but in function we have to manually copy previous state and add new state.

Explain component-based architecture.

Component-based architecture means the page consists of many independent, reusable components, with each representing a part of the page.

What is the order of execution regarding the constructor, render, and lifecycle methods?

Constructor, render, componentDidMount, componentDidUpdate, componentWillUnmount.

What is the difference between a controlled component and uncontrolled component?

Controlled component has its form data maintained by React components through state, while the uncontrolled component has its form data obtained by referencing the real DOM.

What is currying?

Currying means to break down a function that takes multiple arguments into a sequence of functions that take a single argument, where each nested function is a closure.

What is the DOM?

DOM stands for Document Object Model. It is a programming interface for web documents with a tree structure.

What is DRY?

DRY is a software development principle that stands for Don't Repeat Yourself. It means we should avoid repeated/duplicated code, usually by replacing it with abstractions.

What is dynamic typing?

Dynamic typing refers to variables not having fixed types when declaring. A variable could be a different type based on the value assigned to it at runtime.

What are dynamic websites?

Dynamic websites means pages may have different content and structure for different users with programmatically generated HTML.

What is ECMAScript?

ECMAScript is the standard of JavaScript for browser compatibility. Newer browsers could run older versions of ES, but older browsers can't run newer versions of ES. It's like W3C to HTML.

What are ES6 modules? Why are they useful? How do we make these modules available in other JS files?

ES6 modules are units of code with a specific task combined to create an application. We could encapsulate them in a .js file and export them to other files. In other files, we use "import" to make use of these same modules.

What are enums?

Enums defines an object with named constants that exists at runtime. It auto increments if values are unspecified.

What are error boundaries? How are they useful?

Error boundaries is a class component that catches errors from nested children components, logs the errors, and displays a fallback UI. Error boundaries could catch error during rendering, lifecycle methods, and hooks.

Explain event delegation. Why is it important?

Event delegation is a technique to apply event handlers to multiple sibling elements. We could bind the handler to their parents instead of each individual element. The parent will then handle the event for the specific child. It is important because it saves us a lot of time and effort in writing event handlers.

What is event propagation? How many phases are there? In what order does it occur?

Event interface is made through event propagation, which has three phrases: first is capturing from root to the specific location, second is targeting the location, third is bubbling up back to the root.

What is Express.js?

Express.js is a lightweight, unopinionated, most popular JS web framework. It has built-in tools for handling HTTP requests, port configuration, and middleware.

What is the difference between making server requests via fetch and XHR?

Fetch will return a promise. Fetch will only catch network failure errors, it uses .then() to process response and data and .catch() to send an error message. XHR uses .open() and include method and url to open a source, .send() to send a request, .onload to load the data, and .onerror to send an error message.

What is first contentful paint and time to interactive?

First contentful paint is the time it takes for the first text/image to become visible on the page. Time to interact is the time it takes for the page to become fully interactive.

What are flex items? Can you explain some flex item properties?

Flex items are direct child elements of a flex container. Some properties include: order: order the item by number. flex-basis: Length of item according to axis direction. flex-grow: a factor of grow relative to others. 0=original. flex-shrink: a factor of shrink relative to others. flex: shorthand for grow/shrink/basis. align-self: Specify vertical alignment that overrides container's align-items.

What is Flexbox?

Flexbox stands for Flexible Box Layout Module. It is a 1 dimensional layout. It uses a content-first approach, in which contents are defined first, resulting in a flexible layout. It will lay out all elements in one container.

When is float useful?

Float will enable wrapping text around images or other elements. Block elements will not take up a whole line now.

What is flow?

Flow determines if elements of a page will be affected by positions of other elements

What is the Flux architecture?

Flux is a pattern for unidirectional data flow designed by facebook. The sequence is action, dispatcher, store, and view.

Explain short-circuit evaluation.

For "||" evaluation, if the left side is true, there is no need to check the right side. The result will be true. For "&&" evaluation, if the left side is false, there is no need to check the right side. The result will be false.

How do we import files into other files in Node.js?

For ES Modules, use export on the files that we want to make use of and import to access the file. For Common JS, use module.exports on the files that we want to make use of and require to access that file.

How do you type functions?

Functions could be typed by ":" as function signature and "=>" as variable.

What are generators and generator functions?

Generators are objects that control execution of a generator function. It has two states: suspended and closed. The generator function uses the star sign and uses "yield" to pause execution and yield a current result. We use .next outside of the generator function to execute a yield.

What are generics?

Generics are placeholder types that are eventually substituted when the type is referenced, for creating reusable and type-safe code.

What are grid items? Can you explain some grid item properties?

Grid items are direct child elements of a grid container. Some properties include: grid-column: starting line/ ending line or starting line/ span #of column. grid-row: starting line/ ending line or starting line/ span #of row. grid-area: a way of declaring an area for a box with row-start/ col-start/ row-end/ col-end. grid-template-area: customizable layout of a page with different section names. These names could then be used to place a section at a specific location

What is Grid?

Grid stands for Grid Layout Module. It is a 2 dimensional layout. It has a layout-first approach, which means the layout is defined first, and the contents is placed at specific positions.

What is HOC?

HOC stands for higher-order component. It is a function wrapper that takes in a component and returns the component with things wrapping around it.

What is HTML?

HTML stands for HyperText Markup Language. It is a programming language that developers use to implement websites.

Is HTTP stateful or stateless? What does it mean for it to be stateful or stateless?

HTTP is stateless. Stateful authentication stores session information in the backend (Security Encyclopedia). Stateless authentication stores user sessions in the client side, and the server could only check if the payload and signature match.

Explain hashing. Why do we hash passwords and other sensitive information?

Hashing is a one-way encryption with a unique output. We hash passwords and other sensitive information because we want to hide their real values to avoid other people from making use of it.

What does it mean to have eventual consistency?

Having eventual consistency means some time after an update, the data in multiple databases will be consistent.

What is hoisting?

Hoisting means the code is scanned and all functions and variable declarations are done first before executing any code.

What are hooks in React? Why do we use them?

Hooks are functions that give function components access to state and React features. They are only usable in function components. We use them to make life easier, no need for higher order components and avoid wrapper hell. We also write less code.

What is immutability?

Immutability means the structure or data can not be changed. For example, if we have declared a String, we can't change the first letter of the string by setting String[0] to a different character.

What are the benefits of using TypeScript with React?

In a React project, TypeScript allows you to write HTML code directly. TypeScript delivers code completion for JSX when used with React (SimpliLearn).

How do unit, integration, and end-to-end testing work for the frontend?

In the frontend unit testing, we should make sure that each function works as expected. In integration testing, we test if the application is rendering the correct content and if the user interaction works as expected. In end-to-end testing, we make sure the application works on all browsers.

What does 'this' refer to in the cases that were discussed in lecture?

In the object method, this in the Keyword function refers to the parent object and this in the arrow function refers to the global object. In the global scope method, this in the Keyword function and arrow function refers to the global object. In the keyword function, this in the Keyword function refers to the global object and this in the arrow function refers to the keyword function's this. In the arrow function, this in the Keyword function refers to the global object and this in the arrow function refers to the arrow function's this. In the event handler, this in the Keyword function and the arrow function refers to the DOM element receiving the event.

Explain the differences between var, let, & const.

Initiation: var is initiated to undefined, let and const are not initiated. Scope: Var is global scope and let and const are block scope. Redeclaration: Var could be declared, let and const can't be redeclared.

How do interceptors work?

Interceptors work as a middleware in Express.js. It consists of incoming requests and outgoing responses. Interceptors are code blocks that you can use to preprocess or post-process HTTP calls

What is JSX?

JSX stands for JavaScript XML, which is React's HTML-like syntax for creating DOM elements. It allows us to write HTML in React.

What is JWT?

JWT stands for JSON Web Token, which is an open standard that defines a compact and self-contained way for securely transmitting data through JSON objects.

What are the differences between JWT and sessions & cookies for user auth?

JWT stores and appends a token while Session stores and appends a cookie. JWT uses a key to decode JWT while Session checks cookie SID in the session store. After the user logs out, JWT removes the token from web storage, clears the cookie and blacklists the token, while Session clears the cookie and deletes the session.

What is the JavaScript engine?

JavaScript engine is a software program that optimizes and executes JavaScript code. V8 is used for Google Chrome and Node.js. SpiderMonkey is used for Mozilla Firefox. JavaSciptCore is used for Safari, and Chakra is used for Internet Explorer and Microsoft Edge.

Since JS is single-threaded, how does it achieve asynchronous code?

JavaScript engine processes one statement at a time. It uses an event loop that includes a call stack and call back queue.

Explain just-in-time (JIT) compilation. What's the difference between JIT compilation and interpretation?

Just-in-time compilation converts byte code into machine code during runtime then executes immediately, which allows runtime optimization. Interpretation parses source code and directly executes instructions line by line.

What is an IIFE? When would you use it?

LIFE stands for Immediately-Invoked Function Expression. It is a function that is invoked when it is defined. To use it, we define a function, wrap it in parentheses, and invoke it. We use it when we try to avoid polluting the global object.

Explain MVC and the file structure in express.

MVC stands for Model View Controller. Module is data structure. View will define display. Controller is responsible for manipulation. Node module, repository, package.js, index.js

What are the major differences between static and dynamic websites?

Major differences between static and dynamic websites are their HTML contents and performance. Static websites have pre-built, hardcoded HTML for each page. Dynamic websites have their HTML code generated on request by reusing page templates. Static websites have quicker cached performance than dynamic websites.

What is the difference between margin and padding?

Margin is the space between the border and the page, while padding is the space between text and border.

What is the Microtask Queue?

Microtask queue consists of promises. It has a higher priority than the macrotask queue.

What is mongoose? Why would we use it instead of interacting with the native MongoDB shell?

Mongoose is a MongoDB object document mapping library that is designed to work in an asynchronous environment. It supports promises, callbacks, and data validation.

What are some differences between Node.js and JavaScript?

Node.js is a programming language that focuses on front-end development. Node.js is a JavaScript runtime environment that focuses on back-end development. JavaScript could be used in the browser, while Node.js is not built in Web APIs.

What is Node.js?

Node.js is an open-source backend JavaScript environment that runs on the V8 engine.

What is a non-relational database?

Non-relational databases are databases with storage models that are optimized for specific data requirements and scalability. It doesn't use tables or keys. Instead, it uses document, key-value, graph, or columnar.

What is npm?

Npm stands for Node package manager. It is used in the command line interface for installing and accessing packages from npm libraries.

What is OAuth 2.0? Describe the OAuth workflow in detail.

OAuth 2.0 stands for Open Authorization 2.0. It is a token-based authorization standard for allowing applications to access data from other applications. It requires user permission and doesn't share credentials between applications. An example would be logging into a website using Google and grant them access to your email address and avatar.

What is Object-Oriented Programming (OOP)?

Object-Oriented Programming is based on the concept of classes, objects, and four main features including abstraction, encapsulation, inheritance, and polymorphism.

Can padding be negative? Can margin be negative?

Padding can't be negative. Margin could be negative.

What are ports? Which one is reserved for HTTP and HTTPS?

Ports are the communication endpoints that separate web traffic for different services, ranging from 0 to 65,535. 0-1024 are reserved (80 for HTTP and 443 for HTTPS.)

What is the difference between position:fixed and position:absolute?

Position fixed has its offset relative to the viewport. It will stay as we scroll. Position absolute has its offset relative to nearest positioned ancestor or offset. It will not stay in the same place as we scroll.

How is position useful?

Positions allow us to link the position of an element to other elements or to the page.

What are primitive data types in JS?

Primitive data types are data that is not an object and has no methods or properties (mozilla.) They have dynamic typing and immutability properties. Seven primitive data types in JavaScript are string, number, boolean, undefined, null, symbol, and bigint.

What data types are immutable?

Primitive data types are immutable.

How do primitive and reference data types differ in where they're stored in memory? How does this affect them when they are passed as arguments to a function?

Primitive types are stored on the stack with a fixed size. We are manipulating the actual value stored in a variable. Reference types are stored on the heap with dynamic size. We are referencing a reference to that object in memory. Passing an object as an argument to a function and manipulating it will affect the original object, but primitive types will not be affected if we do the same.

What are props?

Props are single objects representing the data passed into a child component. It is read only.

Explain query strings vs route parameters.

Query string append parameters after the question mark. It is usually used for sorting and filtering data and is not included in the route path. Route parameters are named segments of the URL that represent values at that position. It is usually used for uniquely identifying a source.

What is REPL?

REPL stands for Read-Eval-Print-Loop. It is a programming language environment that accepts user input and prints the result to the console.

Explain React's Context API.

React Content API creates a wrapper component with global data that is accessible to all descendent components.

Explain the React component lifecycle and its methods.

React component lifecycle is a process that a component follows from when it appears on the page to when it is removed. It consists of three stages: mounting, updating, and unmounting. constructor and componentDidmount happen during the mounting stage. Render happens during the mounting and updating stages. ComponentDidUpdate happens during the updating stage. componentWillUnmount happens during the unmounting stage.

Name some differences between React and Angular.

React is a library created by Facebook. It is ideal for large web applications with frequent variable data, has virtual DOM, and uses one-way data binding. Angular is a framework developed by Google. It is ideal for creating highly active and interactive web applications, has real DOM, and uses two-way data binding.

Why would you use React? Name some advantages.

React is easy to learn and use. It has reusable components, which increases the efficiency of development. It also enhances performance and has UI focused design.

What is react-redux? How does it differ from the redux library?

React-redux is the official UI binding library for React and Redux. It has optimization for state updates, and it decouples Redux logic from React Components.

What is the react-router-dom? What is the point of <Link> and <Route>?

React-router-dom is a react-router with DOM based APIs. <Link> renders <a href> that is clicked to navigate to a <Route>, which is an object that maps URLs to React components.

What is React strict mode?

React.StrictMode is a tool for highlighting potential problems. Strict mode checks are run in the development mode only.

What is React.memo? How does it differ from useMemo? Explain in terms of syntax andhow they work.

React.memo is a higher order component that acts like React.PureComponent except it only does shallow comparison on props. It wraps child components who don't need to re-render when parents re-render. useMemo is a hook that returns memoized values and avoid re-rendering if the dependencies to a function have not changed

What does ReactDOM.render() do?

ReactDOM.render() generates HTML and inserts it into the root HTML element.

What is responsive web design (RWD)? What are some examples of RWD on a website? How do we achieve this?

Responsive web design means to make a website UI look great on all devices and screen sizes. Some examples of RWD include using flexbox grow/shrink, setting images with <picture> tag to load different sources of picture for different screen sizes, setting font size/weight using relative units, and using media queries to declare media type and features.

What is SSR, CSR, and SSG? When would you use each one?

SSR refers to server side rendering. It creates dynamic websites by generating HTML documents on the server during runtime. CSR refers to client-side rendering. It creates dynamic websites by generating HTML on the client browser. SSG refers to static site generation. It creates static websites by generating all possible HTML files on the server during build time. We use SSR when we want to have customized page contents per user, use CSR when content on a page frequently changes, and use SSG when we want to display static page contents.

What is SVG and why do we use it?

SVG stands for Scalable Vector Graphic. It is used for zoomable graphics and animation.

What libraries can we use to test JS? Explain some of their features.

Some testing frameworks to test JavaScript include Mocha, Jest, and Jasmine. For example, Mocha is one of the most known testing frameworks for Node.js that supports callbacks, promises, and async/await.

What are spies, mocks, and stubs? How & why would we use them in testing?

Spies offer information about function calls, and stubs replace functionality for object methods. Mocks replace whole objects easier by combining both spies and stubs. We use them by calling sinon.spy(...), sinon.stub(...), and jest.mock(...).

What is static type checking? How can developers benefit from it?

Static type checking is the process of verifying the type safety of a program based on analysis of a program's text (source code). If a program passes a static type checker, then the program is guaranteed to satisfy some set of type safety properties for all possible inputs.Developers benefit from it by making sure all variables have the correct types.

What are static websites?

Static websites means pages are hardcoded and displayed the same to all users with plain HTML, CSS, and JavaScript.

What are streams? In Node.js, what are the different kinds of streams?

Streams are interfaces for managing large amounts of data more efficiently by processing them in smaller chunks at a time. It solves storage and compiling time issues. Different kinds of streams include writable, readable, duplex, and transform.

What is the Box Model? Describe each part.

The Box Model is a layered structure including four parts: Content, Padding, Border, and Margin. Content is where text and images are. Padding is the transparent space around content. Border is the outside of the padding. Margin is the outside of the border.

Explain the request & response cycle.

The Domain Name System will process the request and return the server IP address. Browser will send HTTP request to that IP address. As the request is received, the server will process it and send back a response containing the html file. Finally the browser gets the response, parses the HTML, and displays the webpage.

What is the difference between GET and POST? What about POST and PUT?

The difference between GET and POST is that POST needs to have a body. The difference between POST and PUT is that POST creates a new instance and PUT updates exisited information.

What does the event loop do? What data structures does it use?

The event loop consists of a call stack and a call queue. JavaScript engine pushes normal events to the call stack and executes it right the way, and it will push Web API related events (DOM, HTTP requests, and Timeout functions) to a callback queue. The callback queue is going to be executed when the call stack is empty.

How does the event loop work in Node.js?

The event loop consists of phases, including timers, pending callbacks, idle/prepare handers, poll, check handlers, and close callbacks. It works like an asynchronous queue.

What is the importance of the meta tag?

The meta tag declares important information about the html page, including characters, viewpoint, and language for screen readers.

What is middleware?

The middleware in node. js is a function that will have all the access for requesting an object, responding to an object, and moving to the next middleware function in the application request-response cycle (Turing).

What is the prototype chain?

The prototype chain is the cycle of looking for an object's property on the current object, then its prototype, and its prototype's prototype, and so on until finding the property or reaching null.

What is the scope chain? How does lexical scoping work?

The scope chain is the cycle of looking for a variable's value within the current scope, the outer scope and so on until finding the value or reaching the global scope. Lexical scoping means code inside a function may access variables defined outside, but not reverse.

What does the lifecycle method shouldComponentUpdate do? How is it related to pure components?

The shouldComponentUpdate method makes the component to re-render only when there is a change in state or props of a component and that change will affect the output. React.PureComponent implements shouldComponentUpdate with shallow prop and state comparison. In this case, changes in nested reference types don't cause re-renders.

How many HTTP methods are there? Explain each one.

There are five most commonly used HTTP methods: GET: request data from a source, we use it when we want to retrieve information from a server. POST: send data to the server to create a source, we use it when we want to create information. PUT: send data to the server to replace a source, we use it when we want to update an entire row. PATCH: send data to the server to replace a source partially. DELETE: send data to the server to delete a source

Explain how the Node.js architecture is event-driven in terms of event emitters and other core modules.

There are three main players in the Node.js event-driven architecture: Event Emitter, Event Listener, and Event Handler. The Event Emitter emits an event when something important happens in the app. The Event Listener is going to pick up this event and fire a callback function called the Event Handler. Most of Node.js core modules like HTTP, file system, and timers are all built around this event-driven architecture.

What are the different kinds of tests?

There are unit test, which means testing the application code and logic, integration test, which means testing the application as it connects with the service of the application, regression test, which means testing the application behavior after a set of changes have been made.

How do you manage multiple node versions?

There is an npm library called n that must be installed globally. It will copy the specified node version to /usr/local/bin. There is also NVM, Node Version Manager, which is a standalone package that adds different visions to a specified PATH.

What are 3 ways to declare functions? What is their syntax?

Three ways to declare functions include function declaration (function f1() {};), function expression(var f2=function(){};), and arrow function(var f3()=>{};).

Explain token-based auth. Is it stateful or stateless and why?

Token-based auth are client-server requests contain tokens so that the server doesn't need to store user data. It is stateless because it could be generated anywhere and is valid until expiration.

How would two sibling components communicate through props?

Two sibling components would communicate through their parents with lifting state up.

What are two ways that we can make an element invisible? What is the difference?

Two ways of making an element invisible are setting "display=none" or "visibility=hidden." The difference is that setting display to none doesn't take space while setting visibility to hidden does occupy space.

Explain the difference between type any and unknown.

Type any is a type that can accept any type, while type unknown means not knowing what type it may be.

What is type assertion?

Type assertion tells the TypeScript Compiler to recognize a variable as some other type.

What is type coercion, and how does it differ from type conversion?

Type coercion changes a value's data type implicitly while we do operations on two different types of values. Type conversion changes a value's data type explicitly in which we manually assign a new type to a value.

What are type guards? What is narrowing?

Type guards are special code involving conditional statements to check a value's type before operating on it for safety purposes. Narrowing is the process of refining types to more specific types than declared

What is type inference?

Type inference means TypeScript infers types of variables that lack annotations based on their initial values.

What is type readonly?

Type readonly means TypeScript Compiler prevents you from re-assigning values to a variable.

What are UI component libraries for?

UI component libraries allow us to use elements with predefined functions and styling, therefore make the development process easier.

What is the difference between union and intersection types?

Union type works as a OR logic (|), which is formed from 2+ types or literal values, representing values that must match at least one of the member types. Intersection type works as an AND logic (&), which is formed from 2+ types, representing values that must match all of the member types.

How can you select an HTML element using JS?

Use querySelector() to select the first element that matches the selector, use querySelectorAll() to get a Nodelist, and use document.getElementById/TagName/ClassName to get a HTML collection.

When would you choose a RDBMS vs NoSQL database?

We choose RDBMS when we have multi-row transactions and complex joins (Zenet). A relational database system provides atomicity, consistency, isolation, and durability.

How do you asynchronously dispatch an action?

We coils use thunk, since it is a function with access to store.dispatch() and store.getState() that could dispatch actions based on asynchronous logic. We need to use thunk action creator to create the thunk and applyMiddleware to apply this thunk.

Where can we store JWT?

We could store JWT in cookies, web storage, or memory.

What tools do you use for testing your frontend application?

We could use Jest and React Testing Library for unit and integration testing, and we could use Google Lighthouse and New Relic for end-to-end testing.

How do you build a basic server in Node.js using express?

We could use middleware to handle incoming requests and outgoing responses. We const an app with express and use the .use function to apply the middleware and the method function to create a callback that handles HTTP requests with corresponding method and path.

What should we pay attention to when testing our code?

We should test if the response status is 200, if the schema of the response body is as expected, if the response payload is valid, and if the response latency is below 200ms?

Explain when you should and should not use TypeScript.

We should use TypeScript when we build complex applications in large teams to increase code readability, quality, and maintainability. We should avoid using TypeScript when being the sole developer, since it increases development time.

How do you implement inheritance in JavaScript before ES6 and with ES6?

We use Person.call(this, firstname, address) .prototype = Object.create(Person.prototype) Student.prototype.constructor = Student. After ES6: extends and super() on the first line in constructor();

When would you use componentDidMount and componentWillUnmount?

We use componentDidMount to perform something as the page loads. For example, we could fetch data within this method. We use componentWillmount when the component gets destroyed or unmounted from the DOM.

What are some methods you would find in a React class component?

We would find constructor, render, conponentDidMount, componentDidUpdate, componentWillUnmount, and self-defined functions and arrow functions.

When would you use the Context API? How about Redux?

We would use Content API for applications with small-scale, simple states, and infrequent updates. We would use Redux for applications with large-scale, complex states, and frequent updates.

How do prop updates affect rendering?

When there is a change in props, we could use getDerivedStateFromProps() function to return an object to update the state and shouldComponentUpdate() function to tell React whether it should re-render based on the change (LogRocker).

Assume a parent element has width = 200px and one child element. If the child element's width is set to 'auto', what are the values of its width, left-margin, & right-margin?

Width=200px, left-margin=0px; right-margin=0px;

What is XHR?

XHR is an object that manages server requests for data. We could use .open() and include method and url to open a source, .send() to send a request, and .onload to load the data, and .onerror to send an error message. We could debug XHR in the network console in the browser.

How can you make the server automatically restart when files are modified?

Yes, by using nodemon, the application will automatically restart when any changes in the directory are detected. The commands to activate it are "npm i -D nodemon" and then "nodemon index.js".

What does z-index do?

Z-index specifies the layer of elements. It only works for positioned elements.

Assume a parent element has width = 200px and one child element with width=100px. If the child's margin is set to 'auto', what is its left-margin & right-margin values?

left-margin=50px; right-margin=50px; What is the left & right margin values if the child's width was 300px? left-margin=0px; right-margin=-100px;

What is the difference between fs module's readFile and createReadStream?

readFile will read all content of the file at this path at once, while createReadStream will read file in chunks of the size you specify (Stack Overflow).

What is the difference between response.send() and response.write() in express?

response. send() sends the response and closes the connection, whereas with response. write() you can send multiple responses (Kevin Chisholm Blog).

Explain useCallback (what it does, what's the syntax). What are some use-cases?

useCallback returns a callback function that is memoized between renders. It is useful if child components receive function props and don't need to re-render unless it changes.

What is the difference between useCallback, useMemo, and React.memo?

useCallback returns a memorized callback useMemo is a a React Hook that returns a memorized value, React.memo is a HOC that returns a component that prevents a component from re-rendering if the props (or values within it) have not changed.

Explain the useContext hook.

useContent hook is used in a child component to access data in the context provider. use case: const user = useContext(UserContext).

What does clear do?

using clear on an element will make it appear below a float element