Coding Set 1

ISP

(Internet Service Provider) A company that provides access to the Internet.

React Reducers

//1. Reducers are pure functions- depend purely based on input to generate output, cant take things outside of functions variables //2. Never change state or action A reducer is a function that determines changes to an application's state. ... Redux relies heavily on reducer functions that take the previous state and an action in order to execute the next state

Functional Programming

A programming paradigm that uses functions to create programs. Less bugs - easier to reason about, less time - reuse more code form of programming in which you can pass functions as parameters to other functions and also return them as values. In functional programming, we think and code in terms of functions.

Getters and Setters

A property that is given the "public" modifier but that has been specifically given a "get" method but no "set" method cannot be set from outside its class https://www.youtube.com/watch?v=bl98dm7vJt0 Getter - to access properties Setters- Change (mutate) them prefix get function fullname() - can access fullname like a property set FullName(value) {} => person.fullName = "John Smith"

Protocol

A set of rules governing the exchange or transmission of data between devices.

Node.js

An open-source, cross platform JavaScript runtime environment designed to be run outside of browsers. Before 2009, it could only be run in the browser using Chrome's V8 engine - fastest JS engine available, embedded inside C++ program and called it Node. Basically it is a JavaScript outside of the browser Framework for writing server-side JS applications, used to build back end services that communicate with client-side applications These apps get and send data via API backend API serves as interface between different programs so they are able to talk to each other Node allows us to manipulate the file system by creating and deleting folders, query databases directly, and create web servers to serve data Node is good because of its asynchronous nature Node- front and back end

Event handler

A chunk of code that responds to actions performed by users or by other parts of the program. Event handlers can be used to handle, and verify, user input, user actions, and browser actions: Things that should be done every time a page loads. Things that should be done when the page is closed. Action that should be performed when a user clicks a button.

Immutable JS

A mutable object is an object whose state can be modified after it is created. An immutable object is an object whose state cannot be modified after it is created. Examples of native JavaScript values that are immutable are numbers and strings. Examples of native JavaScript values that are mutable include objects, arrays, functions, classes, sets, and maps. First declare a string, any mutating methods (such as 'slice') that are applied on that data structure returns a copy of the original data structure with the changes made to it. When you access the original data structure (ex: "declaration"), it remains unchanged.

API

Application Programming Interface is offered by a server for communication with a client app. A client computer program can send instructions to the server and get data from the server by sending requests to various URL endpoints that form the API. Remote server- remotely located computer optimized to process requests- part of server that receives requests and sends responses Talk from your website server directly i.e. Google server Render whole page- Google API call returns the data- allow complete action without leaving your website "Application" can refer to many things. Here are some of them in the context of API: A piece of software with a distinct function. The whole server, the whole app, or just a small part of an app.

Babel Translation

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: Transform syntax Polyfill features that are missing in your target environment (through @babel/polyfill) Source code transformations (codemods)

REM and EM

Both relative units, px is not EM - nested child assumes the parent is 1em(100%). Thus children inherit size by scaling in relation to the parent font size. REM - only relative to the html (root) font-size. I like to think of it as a reset. If a style sheet is built in a modular fashion, then rem shouldn't be needed very often, but it can be handy at times. https://j.eremy.net/confused-about-rem-and-em/

CI/CD

CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment. CI/CD is a solution to the problems integrating new code can cause for development and operations teams (AKA "integration hell"). CI/CD is really a process, often visualized as a pipeline, that involves adding a high degree of ongoing automation and continuous monitoring to app development. https://www.redhat.com/en/topics/devops/what-is-ci-cd

Event Capturing

Event Capturing is the event starts from top element to target element. Modern browser doesn't support event capturing by default but we can achieve that by code in JavaScript.

Stop Event Bubbling

Event.stopPropagation() method. If you want to stop the event flow from event target to top element in DOM, event.stopPropagation() method stops the event to travel to the bottom to top.

I/O

Input and output Accessing anything outside of your application - once an app has started, it is loaded into the machine's memory - what CPU will mostly use for running your program

HTTP pt 2.

It is a Stateless protocol- each command executed independently, without knowledge of previous commands- main reason hard to implement web sites that react intelligently to user input

JSX

JSX is a form of markup used in React. It looks very similar to HTML, but is converted to JavaScript behind the scenes. However, as these newer versions of Javascript have been released and developers begin adopting the accompanying features, browsers also need to update to account for these changes. If you try to run some new fancy version of Javascript in a browser that does not support it, your code will not work, and you will no longer be a happy developer. Babel is a tool that compiles all of your Javascript into an older version (ES5) that all browsers support. This means you can write all the fancy Javascript that your heart desires, and you don't have to worry about it not working on various browsers https://medium.com/javascript-in-plain-english/jsx-what-how-and-why-3669a56e6a8c

Var

Globally or function/locally scoped. Globally when declared outside a function- can be accessed anywhere. When it is scoped within a function, it is only accessible in that said function Can be re-declared and updated Problems: when you forget that the variable has been declared elsewhere before, and you start to define it again

Node

HTML element DOM is a tree structure that re[resents the HTML of a website, and every HTML element is node Is an interface that is implemented by multiple other objects, including document and element

Events

Responsible for interaction of JavaScript with HTML web pages. The general definition of event is any act can occur by someone. In the web development, the definition of events is also same. Events can be subscribed by listeners that occurs only when the particular event can be fired. Basic example of event is click on button

Metadata pt. 2

Metadata summarizes basic information about data, which can make finding and working with particular instances of data easier. For example, author, date created, date modified and file size are examples of very basic document metadata. Having the ability to filter through that metadata makes it much easier for someone to locate a specific document. The use of metadata on web pages can be very important. It contains descriptions of the page's contents, as well as keywords linked to the content. Meta tags are often evaluated by search engines to help decide a web page's relevance, and were used as the key factor in determining position in a search until the late 1990s

Node Inspector

Node Inspector is a debugger interface for Node. js applications that uses the Blink Developer Tools (formerly WebKit Web Inspector)

NPM dependencies

Node Package Manager These dependencies are the modules that the project relies on to function properly. Having dependencies in your project's package.json allows the project to install the versions of the modules it depends on. By running an install command (see the instructions for npm install below) inside of a project, you can install all of the dependencies that are listed in the project's package.json - meaning they don't have to be (and almost never should be) bundled with the project itself. Allows the separation of dependencies that are needed for production and dependencies that are needed for development https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/

Event Flow

Order in which event is received on the web page. If you click on an element like on div or on the button , which is nested to other elements, before the click is performed on the target element. It must trigger the click event each of its parent elements first, starting at the top with the global window object. By default, every element of HTML is child of the window object.

PostgreSQL

PostgreSQL is a powerful, open source object-relational database system that uses and extends the SQL language combined with many features that safely store and scale the most complicated data workloads. Database system SQL- relational database An object-relational database system means is a database management system similar to a relational database, but with an object-oriented database model: objects, classes, and inheritance are directly supported in database schemas and in the query language. Store data in tables- every row stores - SQL Schema Data is consistent, supports complex transactions https://www.youtube.com/watch?v=eM7hzKwvTq8

Stdin and Stdout

Standard input - this is the file handle that your process reads to get information from you. Standard output - your process writes normal information to this file handle. Readable stream - get info from file and stdout to write it out

Metadata in HTML

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. HTML5 introduced a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag

Event Bubbling

The event is first captured and handled by the innermost element and then propagated to outer elements Event starts from the deepest element or target element to its parents, then all its ancestors which are on the way to bottom to top https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e

Machine learning

The extraction of knowledge from data based on algorithms created from training data Search Results Featured snippet from the web Machine learning is a methodology to create a model based on sample data and use the model to make a prediction or strategy. It belongs to artificial intelligence. Machine learning code records "facts" or approximations in some sort of storage, and with the algorithms calculates different probabilities https://www.youtube.com/watch?v=f_uwKZIAeM0 https://stackoverflow.com/questions/2620343/what-is-machine-learning

Cookie Header

The server sends the following in its response header to set a cookie field. Set-Cookie:name=value If there is a cookie set, then the browser sends the following in its request header. Cookie:name=value HTTP headers are used to pass additional information with HTTP response or HTTP requests. A cookie is an HTTP request header i.e. used in the requests sent by the user to the server. It contains the cookies previously sent by the server using set-cookies. It is an optional header.

webpack dev server

The webpack-dev-server is a little Node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is connected to the server via Sock.js. Little server running on local machine- auto reload every time small change - React Spins a little nodejs server with extra features Have to tweak the build in Json Bundle is saved in memory HTTP not file location/path https://www.youtube.com/watch?v=HNRt0lODCQM

URL Anatomy

URL = Uniform Resource Locator - web address of online resource i.e. web site or document The protocol's connected to the domain name and the domain name's connected to the file path. Https = protocol Yahoo.com = domain name /news/international = path

Hoisting

Where variables and function declarations are moved to the top of their scope before code execution

Schema

a concept of framework that organizes and interprets information A database is the main container, it contains the data and log files, and all the schemas within it. You always back up a database, it is a discrete unit on its own. Schemas are like folders within a database, and are mainly used to group logical objects together, which leads to ease of setting permissions by schema. Schema is a way of categorizing the objects in a database. It can be useful if you have several applications share a single database and while there is some common set of data that all application accesses. Database is like container of data with schema, and schemas is layout of the tables their data types, relations and stuff a representation of a plan or theory in the form of an outline or model.

GetBy

getBy* queries return the first matching node for a query, and throw an error if no elements match or if more than one match is found (use getAllBy instead).

Higher order functions

higher-order function is a function that does at least one of the following: takes one or more functions as arguments, returns a function as its result A Higher-Order function is a function that receives a function as an argument or returns the function as output. - filter, map

Immutability in React

https://medium.com/@yej.arin.choi/this-is-a-post-that-summarizes-my-dive-into-immutability-in-programming-what-it-is-why-its-34cbba44f889 In React, more often than not you'll have a lot of different components that is affecting a particular state of the application. Because these different components are working all at the same time, it is best to keep an immutable state to keep track of the changes to your state. Immutable = we don't want to change, we make a copy https://www.youtube.com/watch?v=9M-r8p9ey8U

Var, Let, Const

https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e

Declarative vs Imperative JS

https://tylermcginnis.com/imperative-vs-declarative-programming/ An imperative approach (HOW): "I see that table located under the Gone Fishin' sign is empty. My husband and I are going to walk over there and sit down." A declarative approach (WHAT): "Table for two, please." The imperative approach is concerned with HOW you're actually going to get a seat. You need to list out the steps to be able to show HOW you're going to get a table. The declarative approach is more concerned with WHAT you want, a table for two.

useContext

https://www.youtube.com/watch?v=XLJN4JfniH4

Queryby

queryBy* queries return the first matching node for a query, and return null if no elements match. This is useful for asserting an element that is not present. This throws if more than one match is found (use queryAllBy instead). https://testing-library.com/docs/dom-testing-library/api-queries

HashMap

stores keys and associated values like a dictionary

JSON (JavaScript Object Notation)

A human-readable text format for data interchange that defines attributes and values in a document., communicate data with someone with specific rules Keys and values Some javascript is not JSON, vice versa JSON is string, you need to parse it to turn into JS

Vagrant

Vagrant is a virtual machine manager. It's a tool for building complete development environment.With easy-to-use workflows and focusing on automation it lower the development environment setup time increases development/production parity and makes the "Works on my machine" excuse a relic of past. Vagrant is a software configuration management (SCM) tool used for building and managing virtual machine environments. Before we get into all the technical stuff, sometimes it's easier to grasp a concept by understanding its antithesis. What does trouble look like for configuration management, and what are we trying to avoid? Let's take a look. A developer implementing a feature will commonly install a few bits of software and deploy code. If things are sloppy, this developer probably makes the team and manager aware of the intention to come back later to clean it all up—that it's simply a demonstration and will be rewritten soon. But then the deadline starts pressing, and the task of going back through and rewriting the installation steps as a script gets pushed lower and lower in priority. Before we know it, several years have passed, and a new developer gets put on the project. That developer is now left to pick up the pieces, trying to understand what happened. It's quite likely they aren't even going to touch the configuration of the server. Who knows what it would do! The above situation is precisely what configuration management helps you avoid. We don't want to be left in the dark as a result of developers setting up software without proper documentation/traceability. Rather, we want to know the answers to questions like What services are we running? What state are those services in? How did they get to their current state? What was the purpose for the changes? Configuration management can tell us these answers. Vagrant by HashiCorp is an open source tool for building and managing portable and virtual software development environments. It is used in tandem with tools that try to simplify software configuration management of virtualizations, such as VirtualBox, Docker containers, VMware, and AWS. So instead of having a bunch of environments that are all configured differently, or having to manually reproduce an environment to test an application, you only need to create an optimal environment ONCE, and can then share it with collaborators. Whether you are working on Linux, Mac OS X, or Windows, all your team members are running code in the same environment, against the same dependencies, all configured the same way. This saves time and makes it easier for devs to be creative and focus on the important aspects of the project. Hope this info was useful! https://www.quora.com/What-is-Vagrant-software

clientx clienty

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling), while clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window. pageX/Y gives the coordinates relative to the <html> element in CSS pixels. clientX/Y gives the coordinates relative to the viewport in CSS pixels. screenX/Y gives the coordinates relative to the screen in device pixels. The visual viewport is the part of the page that's currently shown onscreen. The layout viewport is synonym for a full page rendered on a desktop browser (with all the elements that are not visible on the current viewport). https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

This

"this" Refers to a Global Object By default, the execution context for an execution is global — which means if a code is being executed as part of a simple function call, then this refers to a global object. The window object is the global object in the case of the browser. And in a NodeJS environment, a special object called global will be the value of this. https://codeburst.io/all-about-this-and-new-keywords-in-javascript-38039f71780c

RESTful API

A RESTful API uses HTTP requests to GET, PUT, POST, and DELETE data. An architectural style called REST (Representational State Transfer) advocates that web applications should use HTTP as it was originally envisioned. Lookups should use GET requests. PUT, POST, and DELETE requests should be used for mutation, creation, and deletion respectively. Client and server interaction https://stackoverflow.com/questions/671118/what-exactly-is-restful-programming Accessing servers or clouds - which give you data- Request and Response Api connects you and that server - send JSON - particular structure If you want return data- create values of object of that in server side - send state of object We always do CRUD operations for results - use HTTP Methods - Post, delete, etc.

HTTP status code

A code used by Web servers to report the status of a browser's request. The HTTP status code 404 means document not found. Helps you know what went wrong based on response

Repl

A read-execute-print loop repeats the process of obtaining one instruction, executing it, and printing the output. In short, it starts an interactive console where you can type in commands and immediately see the result of these commands.

Devops

An approach based on lean and agile principles in which business owners and the development, operations, and quality assurance departments collaborate. Practices to breakdown culture of devs wanting to ship features faster and operators wanting reliability DevOps integrates developers and operations teams in order to improve collaboration and productivity by automating infrastructure and automating workflows and continuously measuring application performance -Place more focus on Automation -Automate Code Testing -Automate Workflows -Automate Infrastructure -Automate Everything Write software in small chunks - new feature, bug fix -increase deployment frequency and improve time to deploy new codes -Iterative process to monitor, measure and improve code and operations everyday -improve ability to respond to market needs or things impact software -Increase software delivery, time to market -Maintain better business focus -Innovate faster -Promotes collab between devs and operations https://www.youtube.com/watch?v=_I94-tJlovg

package.json

As a general rule, any project that's using Node.js will need to have a package.json file. What is a package.json file? At its simplest, a package.json file can be described as a manifest of your project that includes the packages and applications it depends on, information about its unique source control, and specific metadata like the project's name, description, and author.

Non-blocking I/O

Async, non-blocking servers like ones made in Node, use one thread to service all requests- means an instance of Node makes the most out of a single thread- server can serve a lot of requests without requiring more server hardware, which is expensive When requests arrive at the server, they are serviced one at a time. However, when the code serviced needs to query the DB for example, it sends the callback to a second queue and the main request continues to run; it doesn't wait. Now when the DB operation completes and returns, the corresponding callback is pulled out of the second queue and queued in a third queue where they are pending execution. When the engine gets a chance to execute something else, it picks up a callback from the third queue and executes it.

cURL

Client URL- command line tool for file transfer with URL syntax - supports protocols like HTTP, HTTPS, FTP - good for interacting with APIs Use it on command line terminal Good to test rest API, transferring data to and from server, making requests Supports every protocol CURL a url = gives us data back Curl - i = header, and information Can use curl to fetch data and put into a txt file Can copy image address https://www.youtube.com/watch?v=7XUibDYw4mc

MongoDB (noSQL)

Data- store all pieces of data in documents, no fixed schema Often as JSON objects- can be nested Flexible to change data model - risk of inconsistent data Performance, scalable Schema - accounts, posts array of object

Metadata

Data that describes other data. For example, a digital image may include metadata that describe the size of the image, number of colors, or resolution. Way to know some things surrounding a piece of information, so that we have a better idea of what that information is Different collections organized, categories of book = metadata= tells you info about the book - librarian takes that info - subject, author, cover, dimension, etc. Communications metadata - who, how often talk, how = kinda get to know them Get info from text -

Static Data

Data that does not change

DOM

Document Object Model Browser's internal programmable representation of the web page - you can manipulate without changing html - via JS, jQuery, etc. Also an API inside your browser- document.getElementbyID, document.createElement(name), append, etc. Object-based representation of the source HTML document- represented by node tree with a single parent - <html> element It is NOT - not your source HTML It represents the document as nodes and objects - programming languages can connect to the page- can be manipulated Object oriented representation of the web page, can be modified with a scripting language like JS

Blocking I/O (Synchronous)

How some web servers handle IO or network requests by default - if code is read from a file or database, your code blocks everything after from executing until first request is finished - in that period your machine is holding onto memory and processing time for a thread that is idle

URL Anatomy in depth version

Https:// = protocol video. = subdomain Yahoo.com = domain name :80 = port /news/international = path ?docid= = query cats&videos = parameters #0898 = fragment

HTTP

Hypertext Transfer Protocol Protocol used by WWW - defines how messages are formatted and transmitted- what actions web servers and browsers should take in response to various commands Enter a URL in browser- send HTTP command - to fetch and transmit requested web page

HTTPS

Hypertext Transfer Protocol Secure - secure version of HTTP Communications between browser that are encrypted by TLS (Transport Layer Security) or SSL (Secure Sockets Layer)

Let

Let is block scoped, lives within a curly bracket Let can be updated but not re-declared Unlike var, let cannot be re-declared within its scope, unless a variable is defined in different scopes Just like var, let declarations are hoisted to the top

Const

Maintain constant values Like let, also block scoped Cannot be updated or re-declared. Every const declaration must be initialized at the time of declaration. Const object cannot be updated, but its properties can be = greeting.message = "updated to this" Hoisting - hoisted to the top but are not initialized

URL part 3

Protocol = A set of rules governing the exchange or transmission of data between devices. Subdomain = sub division of main domain name: video,mail, etc. Domain = unique reference that identifies a web site on the internet, for example doepud.co.uk. A domain name always includes the top-level domain (TLD), which in Doepud's case is uk. The co part is shorthand for commercial and combined .co.uk is called a second-level domain (SLD). Port = The port number is rarely visible in URLs but always required. When declared in a URL it comes right after the TLD, separated by a colon. When it's not declared and in most cases where the protocol is http, port 80 is used. For https (secure) requests port 443 is used. Path = The path typically refers to a file or directory on the web server, e.g. /directory/file.php. Sometimes the file name won't be specified, e.g. https://doepud.co.uk/blog/ so a web browser will automatically look inside the /blog/ folder for a file called index or default. If neither can be found, a 404 Not Found error will usually be returned by the server. Query = commonly found in the URL of dynamic pages (ones which are generated from database or user-generated content) and is represented by a question mark followed by one or more parameters. The query directly follows the domain name, path or port number. Parameters = Parameters are snippets of information found in the query string of a URL. With reference to the Google query above, the parameters follow the question mark and are separated by an ampersand (&) character so they can be understood individually and used to display content on that page. Fragments = A fragment is an internal page reference, sometimes called a named anchor. It usually appears at the end of a URL and begins with a hash (#) character followed by an identifier. It refers to a section within a web page.

React element

React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.

React vs jQuery

React.js is a JavaScript library for building user interfaces, built by top engineers at Facebook. ... React is a JavaScript library, but is often mistakenly referred to as a framework. Like many popular frameworks (Bootstrap, for example), React is all about reusable components.ReactJS is a Javascript library that focus on building user interface of web apps. So, it only focus on the "V" of MVC. JQuery is a Javascript library used to add more interactivity (animations, etc) to websites and manipulate DOM.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. https://www.quora.com/What-is-the-difference-between-jquery-and-react https://www.quora.com/Is-React-js-really-better-than-jQuery-or-is-it-just-a-fancy-version-of-jQuery https://developer.ibm.com/recipes/tutorials/choosing-between-jquery-angularjs-reactjs-and-other-javascripting-tool/ https://www.youtube.com/watch?v=WJ2PQe-pQJw&t=24s

React Redux

Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Simply put, Redux is a state management tool. While it's mostly used with React, it can be used with any other JavaScript framework or library. It is lightweight at 2KB (including dependencies), so you don't have to worry about it making your application's asset size bigger. With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store

Middleware

Several different types of software that sit between and provide connectivity for two or more software applications When the web server receives a request for data, Express gives you a request object with information about the user and the data they are requesting. You can see their IP address. What language their browser is set to. What url they are requesting, and what parameters they have passed along. Express also gives you access to a response object that you can modify before the web server respond to the user. These objects are usually shortened to req, res. Middleware functions are the perfect place to modify the req and res objects with relevant information. For instance, after a user has logged in, you could fetch their user details from a database, and then store those details in res.user. In short, middleware gives you access to req and res in the apps request-> response cycle. Middleware allows you to define a stack of actions that you should flow through. Express servers themselves are a stack of middlewares. In express terms you just define a stack of operations you want express to handle for every incoming HTTP request. By now it should be clear that middleware is/are function(s) run between the client request and the server answer. The most common middleware functionality needed are error managing, database interaction, getting info from static files or other resources. To move on the middleware stack the next callback must be called, you can see it in the end of middleware function to move to the next step in the flow. https://stackoverflow.com/questions/7337572/what-does-middleware-and-app-use-actually-mean-in-expressjs Middleware functions can perform the following tasks: Execute any code. Make changes to the request and the response objects. End the request-response cycle. Call the next middleware in the stack.

DNS (Domain Name System)

The Internet's system for converting alphabetic names into numeric IP addresses. Protocol that provides framework for web browsing Type url, computer asks ISP DNS for a site's IP address - receives back to user's browser

OOP Video

Want an object that wraps data and functionality for an entity Person as an object - human object- concept of what it means to be a human being- a CLASS - has data (height, eye color, personality, etc) -has functionality - eat, walk, etc. Class - data model - structure that stores data what you're trying to model -contains properties, methods and events -properties - data points- name, active, salary etc. -methods - actions employee can perform - tasks - call in sick, work, etc events- something to occur - oncall sick event - define and handle that event - sent notification, etc. Then can use this in our apps- create instances of this class- live objects stored in memory- every class can rep different employees Class as blueprints - objects are real life version of blueprints When there are multiple classes that relate to each other i.e. employee classes and boss classes- hierarchy - A base class - all employee in hierarchy have similar properties like do work, name, etc -Worker classes, etc

webpack

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file. Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one (or more) bundles. With plugin "loaders" Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files. We determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js. Bundle all your files together, build codes, manage all your codes and js files = --dev = use only for dependency, not production -p can made a production mode - https://www.youtube.com/watch?v=GU-2T7k9NfI

Debugger

a programming utility that helps programmers test and correct a computer program Can examine the state of your program while your program is running You can use a debugger to halt the execution of your program when it reaches a particular place in your code, then examine the values of the variables in the program. You can use a debugger to run your program very slowly, one line of code at a time (called single stepping), while you examine the values of its variables. By using a debugger you can discover whether a variable has the wrong value, and where in your program its value changed to the wrong value. You can attach a debugger to a process already running your program. You might do if your program is stuck. In practice it is often easier to run your program under the control of a debugger from the very start. You indicate where your program should stop executing by indicating the source-code file and line number of the line at which execution should stop, or by indicating the name of the method/function at which the program should stop (if you want to stop as soon as execution enters the method). The technical means that the debugger uses to cause your program to stop is called a breakpoint and this process is called setting a breakpoint. https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems

object-oriented programming

designing a program by discovering objects, their properties, and their relationships 4 Principles Encapsulation - when each object keeps its state private inside a class. Other objects do not have access to this state. Instead, can only call a list of public functions- called methods Cat Class - state of cat is private variables - mood, hungry, energy -private method- meow() -public methods - sleep, play, feed - each modify internal state and invoke meow () somehow - binding between private and public method Abstraction - programs are very large in OOP, separate objects communicate with each other alot - maintaining large codebase like this with changes is difficult -small set of public methods which other class can call without knowing how they work -hide internal implementation, reveal operations relevant for other objects Inheritance - problem is objects are similar, share common logic but not entirely the same -create child classes that derive from parent classes to reuse common logic and extract unique logic into separate class -I.e. Person class, child classes = teacher, student, Polymorphism - gives a way to use class exactly like its parent so there's no confusion with mixing types, but each child class keeps its own methods as they are -defining parent interface to be used -if we want to use a collection, list which contains mix of all these classes but want to use it for children too -when defining a parent interface to be reused