Glossary - HackMD

--- title: Glossary tags: miscellaneous --- # Glossary ## The MERN Stack :::info A 'full stack' web development framework consisting of a MongoDB database, Express and Node backend, and React frontend that you'll be using throughout this course. ::: **MongoDB**: Database system that stores node data for our webpage, accessed using HTTP requests. **Express.js**: Backend web application framework used for sending HTTP requests to MongoDB. **Node.js**: Backend Javascript runtime environment that runs the Express.js framework for sending HTTP requests to MongoDB. **React.js**: Frontend Javascript user interface library we use to display nodes. ## Development Tools :::info All of the development tools and platforms you'll be using throughout this course. ::: **Render**: A cloud platform that we deploy our backend code to. **Vercel**: A cloud platform that we deploy our frontend code to. **Github**: The version management system we use for this course. You should push your code frequently to avoid losing changes. The most important git commands for you to know are: ``` git add -A (stages all changes) git commit -m "commit message" (creates a commit of the staged files with the given commit message) git push (updates the remote repository with all local commits) ``` **Linter**: A tool that enforces code standards to reduce errors and increase readability. **NPM**: The default package manager for Node.js. **Postman**: App that we use for running and debugging HTTP requests. **Visual Studio Code**: The development environment we recommend you use for this course. ## Languages :::info All of the languages/file formats you'll be using throughout this course. ::: **CSS**: Cascading Style Sheets, describes webpage appearance. - **SCCS**: Extension of CSS with additional features including variables and nesting. **HTML**: Hypertext Markup Language, describes webpage content. You'll be primarily using JSX instead of HTML, but the syntax is very similar. **JavaScript**: Describes webpage behavior. Operator lookup for JavaScript: https://www.joshwcomeau.com/operator-lookup/ - **TypeScript**: Typed extension of JS. - **JSX**: Extension of JS that can be used in place of HTML for React apps. - **JSON**: Javascript Object Notation, open standard file and data exchange format that we use for storing node data. ## HTTP Requests :::info HTTP requests are used to interact with the database. ::: **HTTP**: Hypertext Transfer Protocol, request-response protocol developed by Tim Berners Lee. **Axios**: HTTP client for Node.js that we use to make HTTP requests in this course. **Post**: HTTP request for creating data. **Put**: HTTP request for updating data. **Get**: HTTP request for retrieving data. **Delete**: HTTP request for deleting data. ## Asynchronicity :::info Using asynchronous functions, we can make HTTP requests without blocking the call stack; a tutorial on asynchronicity can be found in the Lab 1 handout.  ::: **Async**: Keyword for function that returns a Promise, allows execution to continue while the Promise is resolved. - **Promise**: 'Promises' to eventually return a value. - **Await**: Keyword inside an async function to pause execution, wait for a promise to return a value, then resume execution. **Callback function**: Function that is passed into another function to be executed at some point. **Callback queue**: Keeps track of async functions waiting to go back to the call stack; First In First Out. **Call stack**: Keeps track of function calls; Last In First Out. **Event loop**: Pulls functions from the callback queue to the call stack when the call stack is empty. ## React Basics :::info React is the frontend user interface library used in the stencil code; the documentation can be found [here](https://reactjs.org). ::: **Component**: User interface elements that efficiently re-render as needed. **Props**: The argument passed into a component, it can itself contain multiple arguments that are *destructured* at the beginning of the component. **Hooks**: Manipulate the value of a variable and re-render impacted components. - **useState**: Track changes to a variable and re-render impacted components when the variable changes. - **useEffect**: Run a block of code whenever a variable in the dependency array changes value. If the dependency array is empty, the code only runs once on the initial render. If there is no dependency array, the code will be executed on every re-render. - **useCallback**: Prevents a component from re-rendering unless its props have changed. - **useMemo**: Prevents a function from re-running unless its arguments have changed. **Packages**: Code that someone else has written and distributed. - **Chakra**: A React package that the stencil code uses for user interfaces; the documentation can be found [here](https://chakra-ui.com). - **Recoil**: State management package the stencil code uses; the documentation can be found [here](https://recoiljs.org). ## CSS Basics **Bootstrap**:: Frontend package for responsive web design (i.e. creating websites that automatically adjust to different screen sizes); the documentation can be found [here](https://getbootstrap.com). | Important CSS property | Example values | | ----------- | ----------- | | `color` element text color | `red` `blue` `yellow` | | `background-color` element text color | `red` `blue` `yellow` | | `height` height of an element, not including padding/borders/margins | `50px` `20%`| | `width` width of an element, not including padding/borders/margins | `50px` `20%` | | `padding` `padding-left` `padding-right` `padding-top` `padding-bottom` space between element content and border | `10px` | | `margin` `margin-left` `margin-right` `margin-top` `margin-bottom` space between element border and other elements | `20px` | | `position` how an element is positioned relative to other elements | <ul> <li>`static` default position</li> <li>`absolute` positioned relative to first positioned ancestor </li> <li>`fixed` positioned relative to browser window</li> <li>`relative` positioned relative to normal po</li></ul> | | `left` `right` `top` `bottom` sets edge location of non-static positioned element | `50px` `20%`| | `display` what rendering box is created around the element | <ul> <li>`inline` element appears on existing line</li> <li>`block` element appears on new line </li> <li>`flex` element appears on new line, with its inner content displayed as a flexbox </li><li>`grid` element appears on new line, with its inner content displayed as a grid</li></ul> | ## Testing and Debugging **Mock**: Mock database that we use for backend unit testing. **Print Statements**: Messages that are output to the console using `console.log()` in Javascript. **Jest**: Javascript unit testing framework designed for use with React. **Try/Catch**: Statements used for debugging; 'trying' a block of code and 'catching' an exception if it occurs. ## Object-Oriented Programming (OOP) :::info A programming paradigm based on objects that have attributes (properties) and behaviors (methods). ::: **Class**: Template for creating an object that defines its properties and methods. **Generics**: Having a type parameter for an interface/object/etc., thereby allowing for greater code reusability. For example, having `IServiceResponse<T>` means that we can use the same `IServiceResponse` interface for returning the response for an IAnchor, an ILink, or an INode. **Interface**: In Typescript, used to describe the shape of an object (i.e. the variables/functions it requires). For example, an `IServiceResponse<T>` requires a message, payload, and success value. **Method**: A function that an object can call. **Method Chaining**: Calling multiple methods in a single statement without storing intermediate results. For example, in findAnchorsByNodeId method chaining is used for the database call `this.client.db().collection(this.collectionName).find(myQuery).forEach(function(doc) {foundAnchors.push(doc)})` **Object**: A specific instance of a class. **Property**: A member variable of an object. This is distinct from `props` which is the argument to a React component. **this**: Keyword to allow an object to access and set its own variables and methods internally. For example, the AnchorCollectionConnection class has `this.client = mongoClient` in its constructor to set its client variable. ## Functional Programming :::info A programming paradigm based on applying and composing functions. ::: **Callback**: A function that is passed as an argument to another function. ## Visual Studio Code Shortcuts - `cmd + shift + P`: VS Code commands - `cmd + left click`: navigate to implementation/usage - `cmd + P`: search by filename - `cmd + F`: search current file for term - `cmd + shift + F`: search entire code base for term - `cmd + shift + L`: select all instances of selected term in the current file - `option + left click`: add additional cursor at left click location - `option + ↓` or `option + ↑`: move line of code up or down These commands are for Mac; replace all `cmd` with `ctrl` for Windows. ## Useful Operators **Nullish coalescing**: `variable1 ?? variable2` returns variable1 if it isn't null/undefined, otherwise returns variable2 ## Miscellaneous Concepts **CLI**: Command-line interface. **CRUD**: Create, Read, Update, Delete; the four basic types of functionality models are expected to have. **Destructuring**: Unpacking array elements or object properties into distinct variables. **GUID**: Globally unique identifier. **Key/Value Pair**: Data type in which a unique key is associated with a specified value. **Shape**: The types of parameters Typescript requires for a variable/function. **Template literals / template strings**: Enclosed by backtick character `, these contain strings and embedded expressions (denoted by ${expression}) that get passed by default to a string interpolation function or another function that you specify.