HackMD
Glossary
The MERN Stack
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
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
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
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
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
React is the frontend user interface library used in the stencil code; the documentation can be found here.
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.
- Recoil: State management package the stencil code uses; the documentation can be found here.
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.
| 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 |
|
left right top bottom sets edge location of non-static positioned element |
50px 20% |
display what rendering box is created around the element |
|
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)
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
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 commandscmd + left click: navigate to implementation/usagecmd + P: search by filenamecmd + F: search current file for termcmd + shift + F: search entire code base for termcmd + shift + L: select all instances of selected term in the current fileoption + left click: add additional cursor at left click locationoption + ↓oroption + ↑: 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.
