HTML/JavaScript

Behavioral Pattern: Mediator

- Controls communication between objects so neither has to be coupled to the others (in the observer pattern , the observer didn't know about subject , but subject knows everything) -loosely coupled neither side knows about each other -one object manages all communication -many to many relationship

JS Event Loop

- Event loop reads from callback queue : Callback Queue -Event loop only pulls from task/callback queue if the stack is empty - if we have a long running task in the stack (computationally expensive or otherwise) we will block the event loop from processing these tasks/callbaks -WebAPIs in the browser include the DOM, ajax (xhr), and setTimeout -Browser only refreshes at 60fps but event loop can tick much faster

Chaining Fluent API

-Useful for creating fluent APIs against mutable object -Designed around returning the source object -popularized by jquery (and used in .NET linq) -without an explicit return operation js will return undefined so the second in the chain will fail

Function Currying

- can pass all the arguments of the function, or just a subset of them and it still works - reset parameters of a function via .bind() or nested function/ closures 1) Bind method let multiply = function(x,y){ console.log(x*y) } let multiplyByTwo = multiply.bind(this, 2) //reset x param as 2 multiplyByTwo(5) //10 let multiplyByThree = multiply.bind(this, 3) //reset x as 3 multiplyByThree(5) //15 ---------------------------------- 2) Nested Functions / Clsoures let multiply = function(x){ return function(y){ console.log(x*y) } } let multiplyByTwo = multiply(2) multiplyByTwo(5) //10

Bind() Polyfill

- create your own bind method by adding a function on the prototype - this in mybind refers to the printName function let name = { firstname: 'ryan', lastname: 'lewis' } let printName = function(hometown){ console.log(this.firstname + " " + this.lastname + " " + hometown) } Function.prototype.mybind = function(...args){ let params = args.slice(1) return (...args2) => { this.apply(args[0], [...params, ...args2] ) } } let boundPrintName = printName.mybind(name) boundPrintName('walnut creek'

Javascript "Block"

- curly braces define a block that group/make a compound statement - if you want to write multiple statements you need curly braces and a block if(true) console.log('yes') //one statement allowed if(true){ //multiple statements allowed }

Progressive Web App (PWA)

- deliver experience indistinguishable from native apps - web apps that work for ios, android, and the web from a single codebase - Normally a website runs on a single thread while tab is open - modern websites now register a Service Worker (runs as a script in the background) Service Worker - does caching, background sync, listen to push notifications. Can write your own code or use a tool like Workbox - Ex Twitter ==> - can be installed like a native app - works without a connection - can interact w/ device camera - - can run Lighthouse audit - can let you know what you need to qualify as a PWA (needs to load quickly and be accessible on mobile) - available in Application tab in chrome dev tools - manifest.json - contains icons and metadata about app - once you meet the PWA certification in lighthouse - it can be installed on most native devices (can even be listed on site

ES6 - Template Literals/String Interpolation

- denoted with backtick key : ` -use multi-line strings and string interpolation features with them. function myf(name){ console.log(`Here's ${name}`); } myf(`ryan`);

"use strict"

- doesn't let you get away with not using the var keyword which might pollute the root scope -silent failing assignments will throw error Errors thrown -------------------- - repeating obj property more than once, duplicate function argument, escape char , using reserved keyword - this becomes undefined in a function 'use strict' function x(){ //use strict extends to all child scopes console.log(this) // undefined }

Functional Programming Principles: Declarative Programming

- emphasize what a program should do rather than how it should do it - fn programming is a subset of declarative programming - emphasizes use of fn to describe behavior - fn style lends itself well to declarative expressions (map , filter, and reduce lend itself to immutability where we avoid modifying original data and instead create new data structures that represent the transformations we want to make) (terraform and react are declarative - they describe the desired state of the system - and the system takes care of actually getting you there - for react instead of updating the dom, you just describe what you want the UI to be)

Debouncing

- every time a key is pressed the function is called, so we want to add some middelware code to make sure the final function only executes when we stop typing (after 300 ms) -debounce takes a method and returns a method which accounts for lots of calls let counter = 0; const getData = ()=> { console.log('Fetching Data ...' , counter++) } //only call if delay in keypresses greater than 300ms const debounce = function(fn, delay){ let timer; return function(){ clearTimeout(timer) timer = setTimeout( ()=>{ fn.apply(this, arguments) }, delay) } } const betterFunction = debounce(getData, 300); //delay 300 ms <input type="text" onkeyup="betterFunction()"/> https://codepen.io/akshaymarch7/pen/wNyjVX

Object vs Function Prototype Inheritance Chain

- functions are of type __proto__ and their __proto__ point to Function.prototype - all prototypes are of type Object SuperHero.__proto__ === Function.prototype //true SuperHere.prototype.__proto__ === Object.prototype //true

Functional Programming Principles: Higher Order Functions / Functions as First-Class Citizens

- functions can be treated as values and passed around like any other value - higher order fn create reusable and composable code ( reusable => ie operation() could take any mathematical operation we want to use) Ex => define four functions that perform basic arithmetic operations: add(), subtract(), multiply(), and divide(). We also define a higher-order function calculate(), We can then use calculate() to perform any arithmetic operation by passing in the corresponding function as the operation argument.

Global object in browser vs node js

- in browser, when a var is created, memory is allocated on the window/global object - in Node - var are created in a module - similar to an IIFE. anbd variables declared in a file are scoped to the module in which they are defined . These module scope vars are not accessible outside the module unless they're exported (function() { // The wrapper Node.js provides node-style modules // This is "module" scope var foo = 10; function fn () { console.log (this.foo); } fn(); })(); // End of the wrapper - in modern browsers you can simulate what node is doing by doing type="module" on the script tag - but this inside a fn would be undefined since all modules are executed in strict mode https://stackoverflow.com/questions/60298608/difference-between-window-browser-and-global-node-js-objects

Event Delegation

- instead of attaching event handlers to each child, we should attach it to one parent/container (parent will handle it via event bubbling) Pros: - event delegation saves memory ( only use one event handler) -mitigate risk of performance bottleneck - less code written - dynamically added children elements (via infinite scroll) will be handled if the parent is handling the event Cons: -Any events specific to one element do not bubble: focus, blur, load, unload, change, reset, scroll, most of the DOM events (DOMFocusIn, DOMFocusOut, DOMNodeRemoved, etc), mouseenter, mouseleave, etc -stopPropagation() will not allow bubble up https://codepen.io/akshaymarch7/pen/MLRmWz?editors=1010

Functional Programming Principles: filter, map, reduce

- map is an example of immutability in functional programming, where we avoid modifying the original data and instead create new data structures that represent the transformations we want to make - if we chain things together - each function takes an array as input and returns a new array as output

Function Recursion sum(a)(b)(c)(d)

- nested function / function currying let sum = function(a){ return function(b){ if(b){ return sum(a+b) } return a } } sum(1)(2)(3)(4)()

JS Pass by Value or Pass By Reference

- primitives are pass by value - complex are pass by reference

JS this keyword in nested functions

- this refers to the direct owning object - if you have a nested non-arrow function, that nested function this will be pointing to window (or document in the browser) - In regular functions (non arrow fn), the value of this is determined by the context in which the function is called, not the context in which it is defined.

How to test web accessibility

- unplug mouse and use tab and shift-tab to browse -Turn on screen reader - eslint has support for accessibility - react-axe package - logs errors in dev (finds insufficient color contract, or helps achieve AAA standard) - browser extension like tota11y helps visualize regions

JS Hoisting

- var variables and fn declaration are hoisted and set to undefined , - let and const are hoisted and will not be given a value - you will get a reference error ------------------------------------------- console.log(x); //undefined (still runs) var x; ----------------------------------------- console.log(x) //reference error let x; ----------------------------------------- - best practice is to not use var, use let and const. If you do use var , use it at the top of scope -function are hoisted to the top but not function expressions --------------------------------------------------------------------- Function myf() { alert(..) } <= gets hoisted to the top Var x = function myf() { alert(..) } <= only x gets hoisted to the top ---------------------------------------------------------------------------

let and const vs var hoisting

- when var is declared, it is hoisted and attached as undefined to the global/window object -let and const are hoisted but go in the "temporal dead zone" - when declared they are stored in a different memory space (not the global/window object) and we can't access them until they are initialized - we get a reference error trying to access a let var before it's declared console.log(x) // reference error : x is not defined // x in temporal dead zone let x = 2; //variable now on global object console.log(x) // 2 https://stackoverflow.com/questions/33198849/what-is-the-temporal-dead-zone

es6 class static methods

- with a static method we can avoid having to use new keyword and just expose an interface to create an object class Vehicle { constructor (name, type) { this.name = name; this.type = type; } getName () { return this.name; } getType () { return this.type; } static create (name, type) { return new Vehicle(name, type); } } let car = Vehicle.create('Tesla', 'car'); console.log(car.getName()); // Tesla console.log(car.getType()); // car

CORS (Cross Origin Resource Sharing)

- yahoo.com call to: - yahoo.com/api - allowed - api.yahoo.com - disallowed (requires CORS) - yahoo.com:5050 - diallowed (requires CORS) - google.com/api - disallowed (requires CORS) - different protocol (source is https and desintation is just http) - disallowed (requires CORS) 1) If we want to make a cross domain call - we make a CORS preflight request before the actual CORS call made (also called an OPTIONS call) 2) If call is valid - B will return additional headers that says this call will be safe · Access-Control-Allow-Origin : i. * for a public API ii. List specific origin (server can check if the source origin · 3) Actual call (GET / POST) is made -sometimes it's just a simple request if it meets certain conditions - If it's a GET/HEAD/POST, If we manually set certain headers, if we set the right Content Type - The preflight request can also be cached so that, until the cache expires, the preflight request can be avoided some chrome browser extensions bypass CORS

ES6 - Spread and Rest Operators

-3 dot syntax as parameter - expands or contracts an array. These are opposites of each other 1) Spread: spread/separate an array into individual vars function myFunction(x, y, z) { var z; } var args = [0, 1, 2]; myFunction(...args); ===================================== 2)Rest - individual vars get put into array function fun1(...theArgs) { console.log(theArgs.length); } fun1(); // 0 fun1(5); // 1 fun1(5, 6, 7); // 3

JS Closure

-A JavaScript closure is a function that has a pointer reference to a free variable. A free variable is one that has otherwise fallen out of scope (and been garbage collected) after its parent function has returned. -closure variables are variables defined in an outer function that are used (have to be used in inner) within an inner function when the outer function returns -used in the module pattern to help get private and public functions. The exported public functions have access to the private variables when these functions are created. - any variables declared in a function get created everytime the function is called

Creational Pattern: Revealing Module Pattern

-Defines a public api -returns an object with private functions

ES6 - Promises

-ES6 makes promises native (instead of before we had to use a promise library)

ES6 - Sets / WeakSet

-The Set object lets you store unique values of any type, whether primitive values or object references. var items = new Set(['5', 6,7,8]); items.add(4); items.add('4'); items.add(4); //add for(let item of items){ console.log(item); } items.clear(); Weaksets: -only takes object -respects scope of components (allows garbage collection) -can't iterate over it -can only do items.has(someValue) -only useful for specific memory consideratoins

JS call, apply, bind

-a function in js is an object - this function object has a call property which lets us call the underlying function -call will call with a different context and the this reference in foo is bound to whatever we pass in --- Ex: -------------------------------------- function foo() {this.abc = "def"; } foo.call( myObj ) //myObj.abc = 'def' ---------------------------------------------- -foo() and foo.call() are equivalent -apply is same as call but takes an array-like object -bind makes a function always execute with a certain context -used in async environment to prevent

ES6 - Arrow Functions

-arrow functions don't have this, arguments, super, or new.target -shorthand notation: no need to type function keyword or return -if only one line no need for curly braces -if only one argument parameter - can remove parenthesis //No curly braces or paranthesis var square = a => a*a console.log( square(2) ) function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| properly refers to the //person object }, 1000); } var p = new Person();

Behavioral Pattern: Observer

-collection of objects to watch an object and be notified of changes -observers and subject -Allows for loosely coupled system -One object becomes the focal point (subject) and a group of objects watch for changes (observers) -Decorate task with list of observers and Notify() method which sends message to the 3 observer when task changes

ES6 - Const

-constants -block scoped like let (most other languages are blocked scoped) -if you try to change it, there will be an error const block scoped ex: ----------------------------------- const env = 'debug'; if(true){ const env = 'prod'; console.log(env); } console.log(env); //prod //debug -const is about no redaclartion. -const does not mean immutability - const is an ojbect -const does not hoist

Bootstrap

-container : fixed width container -container-fluid : full width container spanning entire width of viewport <div class="container-fluid"> <h1>Hello World!</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> </div> </div>

ES6 - Function Parameter Defaults

-default parameters (similar to python) function sum(x=1, y=1){ return x+y; } sum(1) // 2 Parameter is variable defined in function declaration. Argument is the actual value of this variable that get passed to the function .

JS Scope

-default scope is the window scope -function defines its own scope -for loop or if blocks do not create scopes with just block -inner scopes have access to outter scopes -before es6 everything is function scoped but w/ ES6 'let' keyword introduced for block scoped variables (block is a for or if loop)

JS Prototypes

-every function has a prototype property that points to its prototype -when we try to access a property of an object we look inside the object first, if it's not there we walk up the prototype chain until we find it -an instantiated object points back to its prototype via __proto__ -can create our own prototype chain by setting prototype constructor back to Cat

ES6 - Generators

-function that can pause and resume - denoted by function* and yield keyword pauses function function* gen(){ yield(1); yield(2); } var it = gen(); console.log(it.next()); //{ value: 1, done: false } console.log(it.next()); // { value: 2, done: false} console.log(it.next()); // { value: undefined, done: true}

es6 classes function and variables on prototype?

-functions are on the parent prototype - this variables are in the instantiated/inherited object - class fields (variables defined on the class) are on the instantiated object

JS Promises

-help organize callbacks -placeholder for an async result (like httprequest) -can chain promises together -get() function here acts as a wrapper around xmlhttprequest

JS Prototype Advantages vs add this member inside a constructor function

-in order to not have a bunch of copies of the same code - if we put members in a prototype we share the same function -disadvantange: can't access constructor function private var from prototype https://stackoverflow.com/questions/1450582/classical-vs-prototypal-inheritance

ES6 - let

-initialization only happens once but for(let i=0; i<5; i++){ // } -using let everywhere recommended -

ES6: Classes

-just syntactical sugar over JavaScript's existing prototype-based inheritance -constructor members are on the actual object -additional members are on the prototype class Vehicle { constructor (name, type) { this.name = name; this.type = type; } getName () { return this.name; } getType () { return this.type; } } class Car extends Vehicle { constructor (name) { super(name, 'car'); } getName () { return 'It is a car: ' + super.getName(); } } let car = new Car('Tesla'); console.log(car.getName()); // It is a car: Tesla console.log(car.getType()); // car

ES6 - Maps (and WeakMaps)

-kind of like dictionaries with key value pairs -similar to object literals, but object literals require strings -objects are not ordered, maps are -maps are easily iterable -maps are smaller space - don't have the prototype associated -WeakMaps are similar to weak sets - have to have objects as keys and respects scope. Only useful in memory specific requirements

ES6 - Block Scope with let and const

-let variable is block scoped (scoped only inside curly braces) -let variables are hoisted but you can't using it with - so accessing a let variable before will error out as opposed to var will just be undefined ex: var x = 1; for(let x = 0; x<10; x++){ console.log(x); } console.log('x= ' + x); 0 1 2 3 4 5 6 7 8 9 x= 1

localStorage (and sessionStorage vs Cookies

-localStorage is only read client side. Cookies meant to be read server-side. -Local storage more secure and larger amount of data. Limit 5MB - local storage is per origin - all pages from the same origin can store and access teh same data 1) window.localStorage - no expiration 2) window.sessionStorage - data lost when browser tab closed Cookies: store data that has to be sent back to the server with each request. Expiration varies based on type. Can be used for ads or authentication Cookies primarily for server-side reading, local/session storage can only be read client side. Cookies can have httpOnly which means they cannot be accessed via client-side script

Asynchronous Module Definition (AMD)

-makes app faster by asynchronous load of new code -breaks up code into different functionality -RequireJS is a client side implementation of this

Creational Pattern: Factory Pattern

-pattern used to simplify object creation. Creating different objects based on need. Good for repository creation - if we don't know what type of repo the controller we need.

Structural Pattern: Facade

-provide a simplified interface to a complicated system(façade is a clean front of a building which could have chaos inside) -hide complicated API -Think jQuery - simple interface to deal with complex DOM API -decorator pattern adds functionality - façade just covers up existing functionality

ES6 - Destructuring

-pull only the pieces you want out of an object - instead of pulling the whole thing -Object destructuring: const obj = { first: 'Jane', last: 'Doe' }; const {first: f, last: l} = obj; // f = 'Jane'; l = 'Doe' -Arrays: var [x,y,z] = [1,2,3,4,5]; console.log(`x=${x} y=${y} z=${z}`); //x=1, y=2, z= 3 -Swapping variables: [a,b] = [b,a] -Default values: [a=5, b=7] = [1];

Creational Pattern: Singleton

-restrict an object to one instance of that object across the application -if you try to create a second instance of object it will just hand back what you first initialized

setTimeout vs setInterval

-setTimeout executes the callback once after timeout -setInterval executes continuously with the specified delay between each execution

ES6 For OF loop

-simpler way to loop function sum (first,...args) { var sum = first; for(num of args){ sum = sum+num; } return sum; } console.log( sum(1,2,3,4,5)); //1+2+3+4+5

Creational Pattern: Module Pattern

-since js doesn't have public/private the module pattern is a way to group together functions (like a toolbox) and encapsulate - maintainability - easier to maintain since all related code encapsulated in single block. Logically independent blocks easier to update - reusability - single unit of code can be reused across application. -module at its core is just an object literal -object is to hide variable accessibliity from outside world var mynamespace= (function(){ //your code here }()); -es6 introduces the import export keyword

Structural Pattern: Decorator

-used to add new functionality to an existing object -wraps an object with additional feature that weren't there before and protects existing object integrity -simply decoration on urgent task to overwrite the save function and decorate original functionality with an additional notify()

const / let best practices

-wherever you can use const - you should - try to use let wherever else possible - so you will not run into multiple assignments or undefined situations - always put declarations/initializations at the top - this will help avoid (shrink) temporal dead zone - use var consciously

.sass vs .scss

.scss is the newer way that uses brackets and semicollons and doesn't care about indentation -fully css compliant, lower learning curve, has the most plugins, encourages modular code with @extend - .sass is the original - with indented syntax

ES6 - Object Literal Shortcut

//when we return in the revealing module pattern we don't need to do sayHi: sayHi - it does this implicitly for us function greetingService(name){ var z; var sayHi = function(){ console.log('Hello '+ name + '!'); } var sayBye = function(){ console.log('Goodbye '+ name + '!'); } return { sayHi, sayBye } }

JS Function Declaration vs Function Expression

1) Declaration: function x(){ } - can be placed anywhere in the script because fn declarations are hoisted. - 2) Expression: var x = function(){}

JS this keyword

1) In a method, this refers to the owner object. var obj = { x: 2, z : function(){ this.x } //2 } 2) Alone, this refers to the global object. this.x 3)In a function, this refers to the global object. function z(){ this.z = 'z' } console.log(this.z) //'z' 4)In a function, in strict mode, this is undefined. 'use strict' function z(){ this.z = 'z' } console.log(this.z) // undefined 5) In an event, this refers to the element that received the event. <button onclick="this.style.display='none'">Click to Remove Me!</button> 6)Methods like call(), and apply() can refer this to any object.

Creating objects in JS - 4 ways

1) Object literal var data= { foo: 42, bar: 43 }; ======================================= 2) Constructor Function/Pattern function cat() { this.name= .. this.color =...} var fluffy = new cat(); //new keyword defines a new //object inside function and returns the obj at end //of function =========================================== 3) ES6 Classes: (syntactic sugar/abstraction on top of object.create() class cat{ constructor(name, color) { this.name = .. , this.color = } speak() { console.log('meow'); } } var fluffy = new cat('fluffy', 'white') fluffy.speak() =========================================== 4) Object.create -generally not used - can expose property descriptors -writable - if false we can't change the property -enumerable: if false can't use for..in loop on it, or Object.keys, or Json.stringify() -configurable: if false can't change to numerable or writeable and can't delete

Web Accessibility - Best Practices

1) Semantic HTML - use correct html elements that describe the text (ie - use button instead of div . use the html5 semantic elements) - for the screenreader - and allows you to skip to different content easily - 2) Use headings h1 - h6 - shows doc structure 3) Use alt attribute for images 4) declare language - <html lang="en" 5) Link test should describe what it does/ where it goes <a href="...">Click here to do this specific action </a> 6) Use title attribute (can be a tooltip) 7) use React fragments instead of div 8) sufficient color contract 9) label all form controls <label htmlFor="nameInput"> <input id="nameInput" type="test> - closed caption or subtitles - transcripts for podcasts ARIA - accessible rich internet application - set of rules states and property that you can apply to semantic html elements that make them more like semantic html elements - IE sometimes you don't want something to be a button Storybook Lighthouse - bunch of tests with different internet (including accessibility tests) Github Actions - can add github checks via lighthouse or other tests Chrome dev tools simulator - simulate blurry vision, color blindness Figma => accessibility annotations

TypeError, SyntaxError,

1) TypeError const b = 1000 b = 2 // TypeError - assignment to constant variable 2) Syntax Error const b; // SyntaxError - missing initializer for const let a = 2 let a =3 // Syntaxerror - identifier 'a' already declared 3) ReferenceError' console.log(a) // ReferenceError - a is not defined let a = 2

for of vs for ... in

1) for.... in - for iterting over enumerable properties of an object. for (const key in obj) { console.log( obj[key] ) } - also works for array and string (though not advised) - it can iterate over inherited properties as long as they're enumarable 2) for...of - introduced in es6 - iterating over iterable collections const array = ['a','b','c', 'd']; const iterator = array[Symbol.iterator](); console.log( iterator.next().value ) - the for...of is a wrapper around the Symbol.iterator to create loops - does not work with objects

Functional Programming Principles: Pure Functions

1) given the same input, return the same output 2) does not modify external state - such as global vars or objects outside of the function 3) does not have any side effects - such as printing output or modifying files pure fn make it easier to: a) reason about, (easier to debug) b) test - because pure fn are deterministic. Non pure fn will modify external state or have side effects that can produce difference results based on the state of the system. You isolate the logic of your program from external state c) compose - makes it easier to function add(x, y) { return x + y; } function square(x) { return x * x; } const addAndSquare = (x, y) => square(add(x, y)); console.log(addAndSquare(2, 3)); // output: 25 - can't use Math.random() or date as it will cause the return value to be different each time and it will not be a pure fn Downside - can't effect anything outside of fn IE - calling db is impure - you do need impure functions to do that - however most functions should be pure

this - implicit, explicit, default binding

1) implicit binding - whatever is to the left of the dot becomes the context for this in function obj2 = { z: 99, myfun: function(){ console.log(this.z) } } obj2.myfun() 2) explicit binding - using call, apply, bind var obj = { x: 1, y:2 } function myf(){ console.log(this.x) // 1 } myf.call(obj) 3) default binding - this becomes global context whenever a function is invoked without an implicit or explicit binding - watch out for callbacks (such as a callback in settimeout - need to use

Script tag - async vs defer

1) script src= " " html parsing stops for both download and execution of scripts 2) script async src = " " -html parsing only stops for execution of script - can't gaurantee order scripts are executed , so async can be bad for scripts that have dependencies on each other -Use case => useful for google analytics scripts - Bad use case => - async scripts that modify the DOM may cause issues since they're executed before the dom loaded - scripts that are large can be blocking when using async 3) script defer src=" " - download happens in parallel, execution is deferred to end, - best of both worlds (download in parallel and executed deferred) - allows us to guarantee order scripts are executed - Use case => better for scripts that modify the DOM or are large (so they don't block) it's possible to use both async and defer attributes on a single script tag. However, it's important to note that when both are present, the async attribute takes precedence

JS Tricky Questions

1) type coercion add/subtract 2+'2' // '22' '2'+2 // '22' 2-'2' //0 '2'-2 //0 - with a plus operator - things are converted to a string - with a minus operator - things are converted to a number 2) console.log([ ] + [ ]) - gives empty string because plus operator works on numbers or strings - otherwise it has to type cast to string console.log({} + [ ] ) // '[object Object]' - stringified object 3) function as an array element function fn(){ console.log(this.length) //outputs 2 - corresponding to the length of the arr // this refers to the array } let myargs = [1,fn] myargs[1]() 4) precision error 0.1+0.2 // 0.30000000000000004 - conversion from base 10 to binary and back results in floating point precision errors

JS Equality Best Practice

1)Use triple equals as the default ==== 2) To see if a var exists, use typeof and undefined //BAD!! if(x){ console.log('we exist') //GOOD if(typeof x != 'undefined'){ console.log('we don't exist'); } https://dorey.github.io/JavaScript-Equality-Table/

Execution Context

2 parts 1) variable environment / memory - where variables and functions are stored in key:value pairs 2) thread of execution - where code gest executed 2 phases of execution: 1) creation phase (hoisting) 2) code execution phase (assignment and execution) - each time a function is invoked , a new execution contexted is created (memory and code section - when a function invocations is finished, the execution context is deleted (this also happens with the whole code / global execution context deleted) - call stack manages execution context - maintains order of execution of call stack = execution stack = program stack = control stack = runtime stack= machien stack

ARIA attributes

Accessible Rich Internet Applications - a way to add accessibility info th HTML elements. adds semantic info not already conveyed by HTML elements intself - assists screen readers aria-label - provides text alternative for element <button> <i class="fas fa-search" aria-label="Search"></i> </button> aria-hidden - indicates an element should be ignored by assistive technologies aria-describedby - associates an element with additional description - generally better to use semantic HTML elements (button, input, label, section nav , header etc...) - as these elements already are self describing. ARIA attributes should be used as a supplement to semantic HTML, not a replacement for

Idempotency importance

Benefits of idempotent methods => 1) network retries (dropped connection during a request) won't improperly change server state -IE a network request that gets performed but doesn't return to the client - and the client retries on failure 2) Cacheability - idempotent methods are more cacheable - since the idempotent request will not change w/ repeated calls - it can be safely cached by intermediaries such as proxies/browsers - can improve performance and reduce network traffic 3) simplifies api design - ensuring same request can be safely repeated, developers can simplify logic/error handling Idempotency => helps ensure safe and predictable behavior, simplify system design, and improve performance/cacheability

Debouncing vs Throttling

Debouncing - if difference between two keystroke events is greater than limit (500 ms) - ie wait for person to stop typing in input Throttling - only allowing the function call to happen every 500ms . Like setting an interval to wait. - think of throttling better for handling a machine gun that continually fires event use cases: -window resizing being triggered hundreds of times - best to use throttling - searching in input box - use debounce to make function call after stop typing - on button click triggers an event - -tracking a user scroll

CommonJS module.exports vs ES6 import/export

ES6 import/export => statically loaded (before code runs) - dependencies known at compile time - making it easier for tools to optimize the code - has an export default syntax while common (commonjs requires exporting the whole object) - more modern/concise way - widely supported by most modern browsers Commonjs module.export => loaded dynamically - slower performance - more common in node (though node can use es6 way)

JS Scope vs Context

Fundamentally, scope is function-based while context is object-based. In other words, scope pertains to the variable access of a function when it is invoked and is unique to each invocation. Context is always the value of the this keyword which is a reference to the object that "owns" the currently executing code.

HTTP Methods/Verbs

GET - read POST - create PUT - update DELETE - delete standard methods map to

const missing initializer

Have to assign/initialize const when you declare it const x; x = 2; //SyntaxError: Missing initializer in const declaration

API HATEOAS

Hypermedia as the Engine of Application State -Provide full URL links to related resources. -Encourage clients to learn how to use those links. An HTTP API that is hypermedia-driven or uses HATEOAS provides URL links to related documents: { "name" : "Paul Hallett", "images" : "http://phalt.co/api/users/1/images/" } In the example above we see a response from an API about a specific user, with a hypermedia link to the images for that user. This API is hypermedia driven because it's providing a link to a related resources (the images). This feels very RESTful, and to some extent it is. It's also completely stateless: it requires zero knowledge by the client to know where to go to get images for this user, it's already described in the API response. A client built around HATEOAS that consumes this response, will understand that images is a hypermedia link it can follow to a related resource. If you build your client right, this can provide infinite flexibility when you want to add in new related resources to the user without making any changes to your client.

HTTP Methods Idempotent and why it's important

Idempotent Methods - making multiple requests is the same as making one request GET, HEAD, OPTIONS, TRACE - never change resource state on server PUT - the first will update the server, subsequent requests make the same update DELETE - first will delete on server, subsequent requests will be a 404 not found Non-Idempotent Methods (cannot be repeated safely) : if we create more than once we keep POST PATCH (can be non-idempotent in some cases => ex if PATCH request makes adds an operation like stock +1 ) - When you design API you need to design fault-tolerant API code such that duplicate requests don't leave the system unstable

Throttling

If a function/event is called/done repeatedly, only allow it to be called every certain number of milliseconds const loggerFunc = (a,b) => { console.count("Throttled Function",a,b); } const throttle = (fn, limit) => { let flag = true; return function(){ let context = this; let args = arguments; if(flag){ fn.apply(context, args); flag = false; setTimeout(() => { flag=true; }, limit); } } } const betterLoggerFunction = throttle(loggerFunc, 1000); window.addEventListener("resize",betterLoggerFunction); https://codepen.io/akshaymarch7/pen/pXgxGo

IIFE

Immediately Invoked Function Expression -prevents polluting the root scope (function(){ //your code })();

Functional Programming Principles: Immutability

Immutability - once it is created, it cannot be changed - instead of directly modifying/changing a data structure, a new data structure is created - code becomes easier to reason about and avoids unintended side effects and errors - Libraries that help with immutability => immutable.js, lodash, - ideas like structural sharing where the array is a tree like structure, and we have the tree update its pointer to the new value - in image example => For the array - use the spread syntax and add to end with a new array rather than push() (push is a non-functional way since it modifies the array in place) For the object - don't update the object directly - use object.create(

Web Accessibility - 3 levels of performance

Level A is the minimum level. Level AA includes all Level A and AA requirements. Many organizations strive to meet Level AA. Level AAA includes all Level A, AA, and AAA requirements. ARIA ==> Accessible rich internet application

HTML5 Features: -Semantic tags -HTML5 API -Multimedia -Graphic Elements

New semantic elements like <header>, <footer>, <article>, and <section>. -semantic elements are self-describing and help search engines -Graphic elements: <svg> and <canvas> -Multimedia: <audio> and <video> HTML5 APIS: Canvas: The HTML5 Canvas API allows developers to create and manipulate graphics and animations in real-time using JavaScript. Web Storage: The HTML5 Web Storage API provides a way to store data locally on a user's device, such as preferences, settings, or cached data. Web Workers: The HTML5 Web Workers API allows developers to run scripts in the background, enabling them to execute resource-intensive tasks without blocking the user interface. WebSockets: The HTML5 WebSocket API provides a way for developers to create real-time, bidirectional communication channels between a client and a server, enabling data to be transmitted instantly between the two. Geolocation: The HTML5 Geolocation API allows web applications to retrieve the user's geographic location, which can be used to deliver location-aware content and services. Drag and Drop: The HTML5 Drag and Drop API enables users to drag and drop files and other content between different parts of a web page, such as between windows or applications. Audio and Video: The HTML5 Audio and Video APIs allow developers to embed multimedia content directly into web pages, providing a more seamless and integrated user experience. Server-Sent Events -enables servers to send real-time updates to clients using a unidirectional communication channel. SSE is similar to WebSockets in that it allows servers to push data to clients without requiring the clients to poll for updates. However, unlike WebSockets, SSE uses a standard HTTP connection, making it more firewall-friendly and easier to implement. (a long-lived HTTP connection between the client and the server) - real time feeds like stock updates, social media feeds

Looping through Array vs Looping through object

Object - for( let [key, value] of Object.entries(obj) - for( let num in obj) - Object.entries(obj).forEach( ([k,v],idx) => console.log(k,v,idx) ) Array - arr.forEach( (item, idx) => ....) - for(let i=0; i<arr.length; i++){ } - for(let num of arr){ } - for( let [num, idx] of arr.entries()) { }

JS Types

Primitives: (pass by value ) ------------------ -Number -String -Boolean -Null - exactly one value (null) -Undefined - variable that hasn't been defined -Symbol (es6) Complex: (pass by reference) -------------- -Object -Booleans (w/ new keyword) -Numbers (w/ new keyword) -Strings (w/ new keyword) -Dates -Math -RegExp -Array -Function -Object -adding a number and a string, JS will treat the number as a string

Arrow Functions Pros and Cons

Pros - this is lexically bound - it uses this from parent context Cons - can be harder to debug because you can't trace the name (arrow fn don't have a name) - arrow fn can't self-reference (ie for recursion or event handlers)

Prototype vs Classical Inheritance - Pros and Cons

Prototypical Inheritance 2 types: 1) delegation - property not found on instance, it is search for on instances prototype. (allows you to share methods among many instances - giving you flyweight pattern) 2) concatenation - dynamically add properties to an object enables you to freely copy any properties from one object to another -pro ==> more flexible - pro ==> loose coupling - instance never has to make direct reference to parent class / prototype. - pro => flat hierarchies - can keep a single level of object delegation and single instance, w/ no ref to parent classes - pro ==> trivial multiple inheritance - con ==> ability to override behavior - changing behavior for all objects based on that prototype - con ==> no standard (built-in ) way of writing it Classical Inheritance - con ==> tight coupling - descendant classes have knowledge of ancestor. This causes brittle architecture. - con ==> inflexible hierarchies - single parent hierarchies are rarely capable of describing all possible use cases (and multiple inheritance difficult) - con ==> Subclasses have to take all parent offers, sometimes it doesn't need all properties

Call Stack

Push items onto stack data structure - and return keyword pops off when done

REST

Representational State Transfer -resource based URI -uri contains nouns not verbs - ie.... /messages/{messageId} - -HTTP method (get, post, put, delete) -HTTP status codes (200, 500, 404) -Message headers (ie content-type )

SASS

Syntactically Awesome Style Sheets - basically programming with css 1)*Variables* - can re-use throughout stylesheet to store colors, font, etc... $primary-color: #333; 2)*Nesting* - clear visual hierarchy that expands on compile nav{ ul { margin:0 } } 3) *Partials* - partials contain snippets of css that you can @import (include) in other sass files. Partials start with an underscore. 4) *Mixins* - groups of css declarations that you want to reuse throughout your site. They can take parameters @mixin grid($flex) { @include grid(true); } @include border-radius(10) 5) *String Interpolation* - making use of variables in selectors -content: url(${file} ) 6) Inheritance - share set of css properties from one selector to another .sucess{ extend .message; border-color:green} 7) Math Operators: add, subtract, multiply, divide width: 600px/960px*100%; 8) Loops: @each or @for @each $item in $list {.... }

Pub/Sub Pattern

The pattern works using a middleman; an agent that bridges publishers and subscribers. Publishers are the objects that fire events when they are done doing some processing and subscribers are objects who wish to be notified when the publisher is done - i.e. they are interested in the work of publishers. Pros: loose coupling, scalable, cleaner design Cons: decoupling can lead to failed dlieveries and no acknowledgement of delivery, can buckle under load, possible security vulnerability, updating relationships can be tricky

Functional Programming Principles: Currying

allows us to create new functions by partially applying existing ones - leading to more modular and reusable code -instead of passing all arguments to a function at once, you can pass them one at a time and get back a new function that expects the next argument. - enables us to create higher-order functions that take functions as arguments and return new functions

2 default arguments to every function

arguments and this -es6 arrow functions don't have these

HTTP Status Codes

come back in response headers 200 - success 500 - server error 404 - not found 1xx - informational responses 2xx - success 3xx - redirection 4xx - client errors 5xx - server error

Array some, every, find, findIndex, includes, filter

every - test if all elements in array pass test arr.every( elem=> elem%2===0) some -returns true if at least one element in array returns true for function arr.some(elem => elem%2===0) find - return the first element that passes function const found = array1.find(element => element > 10); findIndex - return the first index that passes function filter - create new array that includes all elements that pass test words.filter( word=> word.length >3)

es6 fetch

fetch('http://example.com/movies.json') .then( response => { return response.json(); }) .then( myJson => { console.log(JSON.stringify(myJson)); }) .catch( e => { console.log(e) } )

Event Bubbling (bubble up) and Capture (trickle down)

first trickle down happens ==> then bubble up addEventListener( event, callbackFunction , useCapture) - useCapture is a boolean , if true, then we call event on trickle down - if you don't specify useCapture parameter or set useCapture to false - we call event on bubble up https://codepen.io/rylew2/pen/YzGyWzE?editors=1011

Array forEach() vs map()

forEach - forEach doesn't return anything -there's no way to stop a forEach() other than throwing an exception map - map returns something - don't use map if you're not returning anything - use forEach or for...of instead https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map f

JS Prototype - Object/Function chain

functions are created from the master Object

Functional Programming Principles: object oriented vs imperative vs declarative/functional programming

no one paradigm is better than others, they just have different advantages/disadvantages. It's about picking the best tool in certain situations Imperative Programming - good if you just need to write a quick script and don't need to maintain it Object Oriented - good for trying to model real world objects (students, courses, classes, rooms) Functional Programming - want to avoid bugs that are hard to track down - maybe consider things as functions - and pipe through multiple functions - can break things down into small functions that do only one thing

localStorage Same Origin Policy

storage apis follow Same Origin Policy due to security concernts - when we set localStorage , we are setting it for a particular origin. 3 things that define origin: 1) Protocol (http vs https)\ 2) host/domain 3) Port (80 , 8081) -ie if we try to access localStorage on https (and you set on http) , it won't be available

JS Asynchronous Flow Control

the js you write only runs on 1 thread but the async requests are sent to a different thread Async flow control options worst to best: -vanilla js : xhr object -jquery : $.get(data....) -Callbacks -Promises -Generators ES6

undefined vs null

undefined - we have declared a var but not defined it. null - similar to undefined but its similar to mark N/A on a form entry - we have seen the value but don't want to assign a value JSON.parse('null') // null JSON.parse('undefined') // SyntaxError null is explicit nothingness undefined is implicit nothingness

JS Window and Document Object

window is the global object document gets rendered as a child object -if we try to access a var we check the current scope, then we check the parent, and keep checking the parent until we reach the window object

setTimeout in a For Loop (var vs let)

with var -var is function scoped and (if not in any enclosing function) is global - at the end of the loop the value of i=3 - the memory value is overwrittent at each iteration, so when setTimeout calls complete, they reference this global var with let - with let in a for loop, we get a new memory binding with each loop, thus when the https://www.dotnetodyssey.com/2019/07/02/difference-between-var-and-let-keyword-in-javascript-in-calling-asynchronous-functions/

"Block Scope" and Shadowing

{ var a = 10 let b = 20 //hoisted in separate memory space in block as undefined const c = 30 //hoisted in separate memory space in block as undefined } console.log(a) //10 console.log(b) // ReferenceError console.log(c) // ReferenceError Shadowing var a = 100; { var a = 10 console.log(a) // 10 - variable is shadowed } console.log(a) // 10 - a is on global scope and inside block it points to same var Illegal Shadowing let a= 20 { var a = 50 // error - can't shadow a let wit ha var let a = 500 //valid - can shadow a let with let }