Hot Seat

What is TypeScript?

TypeScript is a superscript of JavaScript that enforces static type-checking. A superscript means that it uses JavaScript and all of its functionality, however it also extends it with additional functionality. Using TypeScript requires a build-step in your development workflow because TypeScript needs to be compiled into JavaScript. During the build-step, errors and bugs can be caught. TypeScript allows you to validate your code, or ensure that your code has the desired structure, by introducing type-checking.

What is the flux design pattern?

Uni-directional architectural pattern for client-side applications. There is a store or several stores, actions, views, and dispatchers.

What is type coercion?

When the data type of a value is changed IMPLICITLY through mixed-mode arithmetic

What is styling like in React Native?

You can import the Stylesheet module from react. It emulates css (key:value pairs). It is common to use flexbox to create responsive styling. Create a variable (usually called styles) and set it to Stylesheet.create ( {} );

What are some 400 status codes?

400 bad request, 401 unauthorized, 403 forbidden, 404 not found

What is a VPC and a Security Group?

A VPC is a virtual private cloud and allows services to talk to one another as if they were in a local area network. A security group allows access to an aws resource. It acts as a white list (list of allowed things). An empty security group allows nothing to access its resources.

What is a component?

A component is an independent, reusable piece of the user interface. It encapsulates that piece's view, state, and behavior and can either be a class or a function component.

What is a higher order component?

A higher-order component is a function that takes a component and optionally props and returns a new component. A HOC is a useful way to share the same functionality across multiple components. The container component has that similar functionality and the component that you pass in can use that functionality.

What is an HTTP request?

A message sent from the client to the server. It contains a head which includes URL and method. Body contains data we are sending to the server.

What is an HTTP response?

A message sent from the server to the client. Head contains data like status code, body contains a response, like data or an HTML document.

What is ACID?

ACID are the four properties of a transaction. Atomic: entire transaction either succeeds or fails, each part of a transaction depends on the others. Consistent: transaction makes take the database from one valid state to another (no constraints violated, no orphaned data) Isolated: each transaction must be independent of the others (its success or failure must not depend on that of another). The order of transactions should not matter. Durable: Transaction must not put the database in a non-consistent state if interrupted.

What is AWS Gateway? Can you give an example of its use?

API Gateway is an API management tool that sits between a client and a collection of backend services.

What is an arrow function?

An anonymous function with a shorter syntax. It does not have function scope, it uses the scope of what it is contained in.

What is BASE?

Basically Available: basic reading and writing operations are available as much as possible (using all nodes of a database cluster), but without any kind of consistency guarantees (the write may not persist after conflicts are reconciled, the read may not get the latest write) Soft state: without consistency guarantees, after some amount of time, we only have some probability of knowing the state, since it may not yet have converged Eventually consistent: If the system is functioning and we wait long enough after any given set of inputs, we will eventually be able to know what the state of the database is, and so any further reads will be consistent with our expectations

What is bubbling and capturing?

Bubbling starts with the element that triggered an event and it goes up to the parent nodes all the way to the window object. Capturing starts with the parent element that triggered an event and it ends with a target element. You can specify if you want this behavior to occur when creating an event handler → addEventListener(event, function, true)

What are some CSS selectors?

By element, id, class, by grouping using comma to do more than one. Child selector: > Descendent: (a space) General Sibling: ~ Adjacent Sibling: + Pseudo-element: Allows you to style a specific part of an element, like element::first-letter, first-line, before, and after Pseudo-class: specifies the state of an element (active, hover)

What are some constraints of REST architecture?

Client-server architecture (separated UI from data). This constraint essentially means that client application and server application MUST be able to evolve separately without any dependency on each other. A client should know only resource URIs, and that's all. Statelessness: server should not maintain any client state (it is the client's job to maintain it's own state) Cacheability: ability to cache data retrieved by the server. each response ideally would implicitly or explicitly define whether or not it is safe to cache (save) that data in the client Layered System: service can consist of underlying services Resource manipulation through representations: when we try to update a resouce we send a presentation of that resouce with the changes we are trying to make to the server. server then updates the entity. Self-descriptive messages: get request should retrieve something, a post request should create a new entity on the server, etc. Request headers and bodies self-describe their intentions and their intended responses.

What is AWS CloudFormation? Can you give an example of its use?

CloudFormation is a service that allows us to programmatically create and deploy AWS resources. A template has parameters, what you pass into the template as a variable, resources that are being created, and outputs (arns or urls)

What are set operations?

Combines a result set vertically, tables need the same schema. Union gets all unique rows in both. Union all, gets all rows even non-unique from both. Intersect gets only matching rows from both sets. Except gets only non-matching rows from both sets.

What are the major features of React?

Components, JSX commonly used to create React elements, virtual DOM

What are some SQL constraints?

Constraints are rules you can place upon a column to restrict certain data. Primary keys have not null and unique constraints, but there is also check (specify a specific condition), default, foreign key, primary key as well

What are the 4 sublanguages of SQL?

DQL: data query language, select DML: data manipulation language, insert, update, delete DDL: data definition language. Create, alter, drop (for tables) DCL: data control language. Controls who can access data, grant revoke

What is AWS EC2? Can you give an example of its use?

EC2 is a service that allows us to provision computation capacity in the cloud

What is AWS ECS?

ECS stands for EC2 Container Service and it is a container orchestration service. It is a way to manage multiple containers across many "nodes" or instances such that services are dynamically made available. It monitors the health and traffic for each service and ensures that there are always enough services available.You create clusters and task definitions. For a cluster you can specify a service that runs a certain amount of task instances, which create your containers

What is the CSS box model?

Each element is inside of its own "box" made up of a margin (space between element and other elements), border, padding (space between content and border), and content.

What is an error boundary?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

What are common HTTP request methods?

GET: retrieves an entire collection or a specific resource. POST: creates or appends information to a collection on the server. Used in a collection inside of a resource to add to that collection. Has a body. PUT: replaces information at a specific location on a server or if used in a collection, replaces entire collection. On a resource it replaces or creates that resource. Has a body. PATCH: updates part of a collection or part of a resource. Has a body. DELETE: removes a specified resource.

What is HTTP?

HTTP stands for Hypertext Transfer Protocol. It was originally designed for the client-server model and communication between them is done through requests and responses.

What is hoisting in JavaScript?

Hoisting is JavaScript's default behavior of moving variable or function declarations to the top of the file. This allows you to use var variables and function declarations before their declaration statement, however vars will be undefined.

What is an IIFE?

IIFE stands for immediately invoked function expressions. They are enclosed in parenthesis and use the function-call operator so that they run as soon as they are defined. They are useful in that because they are enclosed in parenthesis, their variables cannot be accessed from outside of it. Assigning an IIFE to a variable returns the function's value, not the function itself.

What is a closure?

Implementing a closure is a way of taking advantage of lexical scope by having a function return another function. It is a great example of encapsulation since only the inner function has access to the outer function's variables, and the inner function being returned is available for use outside of the outer function. An example is to have a counter function declaration with a counter variable and it returns a function that increments the counter. You can create different variables and set them to that counter function. You can call those variables as functions and they each have their own respective counts that they are incrementing.

What is JSX?

JSX stands for JavaScript XML and is a syntax extension of JavaScript that is used with React to describe elements in the UI. Babel is used to transpile JSX into standard JS. The JSX elements themselves are transpiled into react elements. You can put as many elements into a JSX variable as long as there is only one parent tag. If you do not want to use a tag that will be rendered into an HTML element, you can use the <React.fragment> component as a parent tag.

What is JavaScript?

JavaScript is an interpreted, multi-paradigm, scripting language that can be used in either a browser or the server-side, using the Node.js runtime environment.

What is a join and what are some join types?

Joins are how data gets related to one another and where tables have some common columns but different schema. Inner Join: shows every row of data from table1 that matches table2 Outer Join: shows every row of data from both tables, including matches Left Outer Join: shows every row of data from table1 and also any matches from table2 Right Outer Join: shows every row of data from table2 and also any matches from table1 Cross join: every individual row from table1 is matched with every row in table2

What are keys in React?

Keys help React identify which items in a list of elements have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. Keys would ideally be unique to each item, using indexes is a last resort because the order of the items may change.

What is AWS lambda? Can you give an example of its use?

Lambda allows you to run functions without provision or managing a server.

How do you use Pixel Perfect?

Module designed to automatically convert our designs between screen sizes. We choose units and starting size, then it adjusts layout for every dimension we specify.

What is PostgreSQL?

PostgreSQL is a RDMS, or relational database management system, meaning that it is a software package that is designed for defining, manipulating, retrieving, and managing data in a database.

What are props?

Props are read-only properties passed in to a component from it's parent.

What is a pure component?

Pure Components in React are the components which do not re-render when the value of state and props has been updated with the same values.

What is AWS RDS? Can you give an example of its use?

RDS stands for relational database service and it allows you to create a database instance that makes it easy to set up, operate and scale a relational database in the cloud.

What is REST architecture?

REST stands for representational state transfer. It is an architecture style for designing loosely coupled applications over HTTP using a uniform interface.

What is React Native?

React Native is a framework built upon React, meaning it uses the same syntax and principles. It is used to build cross-platform applications that can run natively. A benefit of using React Native is being able to write in just one programming language, JavaScript and be able to deploy on multiple platforms.

What is React?

React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications.

What is Redux?

Redux is a state management tool for JavaScript applications that implements the Flux design pattern. It allows for us to have a "single source of truth" in our application meaning application state is located in one place and it allows us to ensure that complex applications are scalable.

What is AWS S3? Can you give an example of its use?

S3 stands for Simple Storage Service and is a scalable object storage solution.

What is serverless architecture?

Serverless Architecture is cloud-based, runs only when in use, and is fully-managed by a third-party.

What is state and how is it used in React?

State is the data that you have to work with, like variables set to values. React has local state inside of components that can be passed down as props. There is also the useContext hook that allows you to use state "globally" or make it available without passing it down as props.

What are some core components in React Native?

Text, View, Image, TextInput, ScrollViews, Flatlists

What are some useful modules that Expo provides?

The Expo SDK provides access to device and system functionality. You install modules from the Expo SDK using expo-cli with the expo install command. Contacts, Camera, and Location

What is the JSI vs the JSC?

The JSC, or JS Core was previously used with the Bridge. JavaScript and the native platform were not really "aware" of each other. This means that, to communicate, they rely on asynchronous JSON messages transmitted across The Bridge. The JSI or JS Interpreter is a lightweight layer that can be used with any JS engine, not just the JSC. By using JSI, JavaScript can hold reference to C++ Host Objects and invoke methods on them so that there IS an awareness between the JS and the host platform.

What is the Virtual DOM?

The virtual DOM is made up of virtual DOM objects that are representations of the real DOM objects. Manipulating the real DOM is slow, but updating the virtual DOM is faster since the virtual DOM is not actually being drawn on-screen. In React, when you render a JSX element, it updates the virtual DOM. React then compares the virtual DOM before and after the changes were made to see which objects changed, and then React would update only the necessary objects in the real DOM.

What is the event loop?

There is a stack which is where functions wait to be executed. It is last-in, first-out. Asynchronous code is put into an event loop which synchronous code continues to execute. When asynchronous code completes, for example a response is received, it goes into the callback queue where it waits for the stack to empty and then it gets transferred into stack and executed.

What is the lifecycle of a component?

There is mounting, updating, and unmounting. Mounting means putting elements into the DOM. During mounting initial state is set up and the component is rendered. For class components, this is where the constructor, getDerivedStateFromProps, and componentDidMount (runs code right after render) are called. A component is updated whenever there is a change in the component's state or props. During updating, you can call shouldComponentUpdate to indicate whether or not the component should render or not. Unmounting is when a component is removed from the DOM. During unmounting, any code in ComponentWillUnmount method is called when a component is about to be unmounted.

What are commonly used Redux hooks?

UseSelector, useDispatch.

What is React Navigation?

Way to provide navigation throughout the app. You have a main NavigationContainer, then you have a Stack, Tab, or Drawer Navigator. Inside that you have your screens that have names and a component to render. You pass down a navigation prop to every screen component and use navigation.navigate and give that a screen name. There is also navigation.push() to add a new route to the stack regardless if there is one already on the stack. There is also navigation.GoBack() to just go back to the previous screen.

Can you give me some examples of DOM traversal?

You can do parent.childNodes, firstChild, lastChild to get nodes or element.previous/nextElementSibling. You can also use getElementbyId, getElementsByClassName, getElementsByTagName, querySelectorAll (gets all elements that match a specified CSS selector), querySelector (gets first element that matches CSS selector)

Can you give me some examples of DOM manipulation?

You can use document.createElement to create a new element and attach it to the DOM. You can also do parentNode.repalceChild(new, old), removeChild, appendChild, insertBefore, etc. You can also use the innerHTML property to get both the text and html tags of an element. You can use the textContent property to get or set the text from a node.

What is Expo?

pen-source platform and framework for making universal native apps. It has a command line interface (Expo CLI) that allows you to initialize your project and has a web-based GUI to work with and it is useful for testing out your project on different devices. yYu can use it as opposed to the react-native CLI. It does a lot for you but you can't write in native code vs the react-native CLI, which gives you a base app (no-frills) but more control