All

Question 1

URL stands for?

Answer 1

Uniform Resource Locator

Question 2

Amazon’s full secure home URL

Answer 2

https://www.amazon.com

Question 3

HTTPS stands for?

Answer 3

Hypertext Transfer Protocol Secure

Question 4

The command to generate a React project inside the current directory.

Answer 4

npx create-react-app ./

Question 5

Install command needed to use SASS

Answer 5

npm install node-sass

Question 6

HTML stands for?

Answer 6

Hypertext Markup Language

Question 7

CSS stands for?

Answer 7

Cascading Style Sheets

Question 8

BEM stands for?

Answer 8

Block Element Modifier

Question 9

In the URL, https://www.amazon.com/home

What is the ‘amazon.com’ part called?

Answer 9

Domain

Question 10

In the URL, https://www.amazon.com/home

What is the ‘/home’ part called?

Answer 10

Path

Question 11

IP Address stands for?

Answer 11

Internet Protocol Address

Question 12

What is 104.59.62.31 an example of?

Answer 12

IP address

Question 13

An IP address is a network device’s ___ ___.

Answer 13

unique identifier

Question 14

DNS Server stands for?

Answer 14

Domain Name System Server

Question 15

PEMDAS stands for?

Answer 15

Parenthasis Exponent Multiplication Division Addition Subtraction

Question 16

Acronym used to represent the order of math operations in Javascript

Answer 16

PEMDAS

Question 17

REPL stands for?

Answer 17

Read Evaluate Print Loop

Question 18

Acronym used to represent console operations.

Answer 18

REPL

Question 19

List of JS falsy values.

Answer 19

false, 0, “”, null, undefined, NaN

Question 20

false, 0, “”, null, undefined, NaN are Falsy values.

All other values are __.

Answer 20

Truthy

Question 21

The “for of” loop works on ___ like arrays and strings.

Answer 21

itterables

Question 22

The “for in” loop works on ___.

Answer 22

objects

Question 23

CORS stands for?

Answer 23

Cross-Origin Resource Sharing

Question 24

Give HTML comment with “some msg” inside.

Question 25

HTML5 declaration tag

Question 26

Default shortcut key to toggle Word-wrap mode in VSC.

Answer 26

alt + z

Question 27

What are the Font Awesome Icon types for fas, far, fal, fab, fad, in that order.

Answer 27

solid regular light brand duotone

Question 28

Font Awesome icon to make svg 3 times larger.

Answer 28

fa-3x

Question 29

# fill in the blank: \_\_\_(255, 255, 255, 0.4) 
returns a transparent shade of white

Answer 29

rgba

Question 30

f00

Answer 30

red

Question 31

0f0

Answer 31

green

Question 32

00f

Answer 32

blue

Question 33

fff

Answer 33

white

Question 34

000

Answer 34

black

Question 35

ff0

Answer 35

yellow

Question 36

f0f

Answer 36

fuchsia or magenta

Question 37

0ff

Answer 37

cyan or aqua

Question 38

What is the hex code for the HTML color ‘green’?

Answer 38

008000

Question 39

0f0

Answer 39

line

Question 40

box-shadow: 2px 2px 2px 2px rgba(0,0,0,.5)
What are these values called from left to right?

Answer 40

horizontal offset
vertical offset
blur
radius
color

Question 41

List all of the functions available for the CSS filter property.

Answer 41

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-totate()
invert()
opacity()
saturate()
sepia()
url()

Question 42

Return a random number from 0 to n (inclusive) using Javascript.

Answer 42

Math.floor(Math.random() * (n + 1))

Question 43

Return a random number from 1 to n (inclusive) using Javascript.

Answer 43

Math.floor(Math.random() * n) + 1

Question 44

Return a random number from 0 to n (excluding n) using Javascript.

Answer 44

Math.floor(Math.random() * n)

Question 45

Return a random number from m to n (inclusive) using Javascript.

Answer 45

Math.floor(Math.random() * (n - m + 1)) + m

Question 46

Convert the Grinning Face Emoji’s Unicode number (U+1F600) into an HTML entity DECIMAL code.
Hint: 1f600 hex = 128512 integer

Answer 46

😀
& # 1 2 8 5 1 2 ;

Question 47

Convert the Grinning Face Emoji’s Unicode number (U+1F600) into an HTML entity HEX code.
Hint: 1f600 hex = 128512 integer

Answer 47

😀
& # x 1 f 6 0 0 ;

Question 48

ALT codes without leading zeroes (ALT nnn) produce characters & symbols based on IBM Code Page 437 / DOS (codes 0 - 255)
Note: Most do not correlate with their Unicode hex value

Answer 48

reminder

Question 49

ALT codes with leading zeroes (ALT 0nnn) produce characters & symbols based on Windows Code Page 1252 (codes 01 - 0255)
Note: The decimal code can be derived from their Unicode hex value
Note2: These are a strict superset of ASCII wherein the first 128 codes are ASCII

Answer 49

reminder

Question 50

Convert the Grinning Face Emoji’s Unicode number (U+1F600) into a CSS string escape value.
ie
.someClass {
content: ‘emoji here’
}

Answer 50

/1f600

Question 51

Website for Emoji codes

Answer 51

emojipedia.org

Question 52

VS Code Extention to lookup and insert emojis in their single character format using intellisence.
ie
:emojiName

Answer 52

Emoji Snippets

Question 53

VS Code Extention to lookup and insert an emoji’s encoded string according to the current file’s language type.
ie
ji:emojiName

Answer 53

Emoji Code

Question 54

Windows shortcut key to open Emoji Picker

Answer 54

Win + period(.) or Win + semicolon(;)

Question 55

Given the below functions in a single file, how can you export all of them with the ‘helpful’ function being a default, in TWO lines of code.

const helpful = () =\> some code 
const sayHello = () =\> some code 
const listFoods = () =\> some code

Answer 55

export default helpful
export {sayHello, listFoods}

Question 56

Given the below export declaration in the “./test.js” file. How would you import all of its functions?

export default helpful
export {sayHello, listFoods}

Answer 56

import helpful, {sayHello, listFoods} from ‘./test’

Question 57

What does ‘000045’.slice(-3) return?

Answer 57

‘045’

Question 58

const randNum = Math.floor(Math.random() \* 1000) 
Use the .slice() array function and string litteral notation to return the random number as a string padded with zeros (ie '004' or '051')

Answer 58

00${randNum}.slice(-3)
\00765.slice(-3) -> ‘765’
\004.slice(-) -> ‘004’

Question 59

A way to declare default props on a Class or Function based component.

Answer 59

Call FuncOrClassName.defaultProps = { …someProps } before exporting.

Question 60

POJO stands for?

Answer 60

Plain Old Javascript Object

Question 61

setState() (class based version) with function callback that takes two params.

Answer 61

setState((prevState, props) =\> { 
 //some code 
 return newStateObject 
 //the new object only needs to contain the 
 //updated properties 
} )

Question 62

when using ‘this’ INSIDE of a function defined inside of a Class, the caller that later executes the function, loses the ‘this’ reference to the class (‘this’ becomes undefined, instead of pointing to class instance).

You can use the following to fix the reference to this:
1. in the class constructor:
this.someFunction = this.someFunction.bind(this)
2. when executing/when called:
call-> this.someFunction.bind(this)()
3. use an arrow function to define the function or execute the function within an arrow function

Answer 62

reminder

Question 63

The arrow function binds ‘this’ to context of the object it was defined in, rather than the context of the object it’s called on.

Answer 63

reminder

Question 64

Command to install FontAwesome Pro

Answer 64

npm install @fortawesom/fontawesome-pro

Question 65

Command to install FontAwesome Free

Answer 65

npm install @fortawesom/fontawesome-free

Question 66

In order to use FontAwesome PRO globally, what two npm commands need to be run?

Answer 66

npm config set “@fortawesome:registry” https://fontawesome.com/

npm config set “//npm.fontawesome.com/:_authToken” myProTokenId

Question 67

Filename to create in a project to use FontAwesome PRO, locally.

Answer 67

.npmrc

Question 68

What should be added into an local .npmrc to use FontAwesome Pro locally

Answer 68

@fortawesome:registry=https://npm.fontawesome.com/ 
//npm.fontawesome.com/:\_authToken=MyProAuthToken

Question 69

Import statement to include FontAwesome PRO

Answer 69

import ‘@fortawesome/fontawesome-pro/js/all’

Question 70

What are 4 special CSS properties to style the color and opacity of Duo-tone FontAwesome icons

Answer 70

• -fa-primary-color
• -fa-primary-opacity
• -fa-secondary-color
• -fa-secondary-opacity

Question 71

Class name to reverse the primary and secondary opacity for a FontAwesome Duotone icon?

Answer 71

fa-swap-opacity

Question 72

With FontAwesome you need to import css instead of js when you need to dynamically change which icon is used via className.

This is because the JS file generates and inserts an SVG. You rendered SVG doesn’t change based on className. An it seems the script that generates the SVG is compile time.

The CSS version of FontAwesome inserts a Unicode character which is inserted via the CSS class name. So you can dynamically swap out the icon via class name.

Answer 72

reminder

Question 73

CSS property and value (property: value;) to make a square element circular.

Answer 73

border-radius: 50%;

Question 74

A simple Math.random function/equations that returns True 25% of the time.

Answer 74

Math.random() < .25

Question 75

A simple Math.random function/equations that returns True 72% of the time.

Answer 75

Math.random() < .72

Question 76

A simple Math.random function/equations that returns false 65% of the time.

Answer 76

Math.random() >= .65

Question 77

CSS property: value to give only the bottom right of an element a 10px radius.

Answer 77

border-radius: 0 0 10px 0;

Question 78

CSS property: value to give only the top left of an element a 15px radius.

Answer 78

border-radius: 15px 0 0 0;

Question 79

A function to control multiple input fields with one handler. (controlled inputs)
This pattern requires that each input field in the group have a matching name property as the value field in the state object.

ie (reusing the same handler on mulple form inputs)
const [formState, setFormState] = useState({
name1: value1,
name2: value2,
name3: value3,
…})

Answer 79

const handler = e =\> { 
 setFormState(prev =\> { 
 {...prev, [e.target.name]:e.target.value } 
 }) 
}

Question 80

In the below statement, [e.target.name] is called a ___.

{[e.target.name]: e.target.value}

Answer 80

Computed Property

Question 81

On initialization of a component, component code seems to be run twice, even though the return/render only runs once.

values generated on the first execution of component code are used in the return/render. but values from the second run are received inside the subcomponents.

this won’t matter for static initial values, but dynamically generated values should be initialized outside of the component. ie v4() or Math.random()

Tried useRef and generating values in separate function. Neither work. UseState does not preserve the first generated value either.

Answer 81

reminder

Question 82

When updating state using an array of objects and needing to edit a single object’s values, what pattern should be used to copy the prevState for editing.

Note: this pattern is used instead of spreading the array, because the objects would be copied over by reference. AKA the arrays would be separate and unique but the objects and values inside would be tied together between the arrays.

Answer 82

const copyPrev = prevState.map(obj => ({…obj}))

Question 83

set a gradient background going from bottom left to top right with colors red, green, then white. Place it an element good for applying the style site wide

Answer 83

body {
background: linear-gradient(45deg, red, green, white);
}

Question 84

Can the linear-gradient css method be used with the properties background, background-color, or both?

Answer 84

background

Question 85

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

Answer 85

reminder

Question 86

const map1 = new Map();

map1. set(‘a’, 1);
map1. set(‘b’, 2);
map1. set(‘c’, 3);

What does map1.get(‘b’) return?

Answer 86

2

Question 87

How can you take an object parameter with unknown prop-name/value pairs, and assign them to the instance of the class in one line of code?

constructor(paramObj){ 
 //line of code 
}

Answer 87

Object.assign(this, paramObj)

Question 88

Use the Map() object to create a set called letterMap that tallies a count of each character in the following string. const ABA=’abacadabagoose’

Answer 88

const letterMap = new Map() 
for (let ltr of ABA) { 
 letterMap.set(ltr, (letterMap.get(ltr) || 0) + 1) 
}

Question 89

You can conditionally set a function to an event property in react. This is a good way to remove or add events based on some condition.

ie Do Something

Answer 89

Reminder

Question 90

You can pass a call back to setState() as a SECOND parameter, which will be run AFTER the new state is set.

i.e. setState({someStateProp: newStateValue}, execACallbackAfter)
OR
i.e. setState((prevSt, props) => { return newState}, execACallbackAfter)

Answer 90

Reminder

Question 91

list the three things that can cause a component to rerender.

Answer 91

setState() is called.
New prop value is received.
forceUpdate is called

Question 92

List the class based life cycle methods.

Answer 92

componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()

Question 93

For React, when setting a height relative to the body, don’t forget that there is a root element between the body and app component.

Answer 93

Reminder

Question 94

When using flex-direction of column, the containing element should have a height. Otherwise, thier is no space between the element to allow for arranging items in the vertical direction.

Answer 94

Reminder

Question 95

One line of code to return a random float from -45 to +45 (not inclusive).
only use Math.random() once.

Answer 95

Math.random() * 90 - 45

Question 96

One line of code to return a random float from -30 to +50 (not inclusive).
only use Math.random() once.

Answer 96

Math.random() * 80 - 30

Question 97

How can you make a box-shadow extend inward toward the center and behind an element, instead of radiating outward

Answer 97

add inset in the css value/definition.

Question 98

When using gsap animations on events, I should use the play, pause, reset, reverse methods instead of recalling the initial method. This should prevent the weird behavior I get when calling the gsap animation multiple times.

Answer 98

Reminder. (not yet proven)

Question 99

Custom Array sorting:
arr.sort((a, b) => someFunction())
if someFunction returns a value < 0 a sorts before b
if someFunction returns a value > 0 b sorts before a
if someFunction returns a value of 0 the sort stays the same.

Answer 99

Reminder

Question 100

const arr = [0, 5, 1, 10, 99, 2, -2, 75, 6, 7, 8] 
sort the above array in numeric order from largest to smallest

Answer 100

arr.sort((a, b) => b - a)

Question 101

log out the below fruit names, in order of count, descending.

const arr = [ 
 {fruit: 'pear', cnt: 99}, 
 { fruit: 'apple', cnt: 52 }, 
 {fruit: 'orange', cnt: 1}, 
 {fruit: 'Watermelon', cnt: 10}, 
 {fruit: 'banana', cnt: 8}, 
 {fruit: 'grape fruit', cnt: 0}, 
 {fruit: 'peach', cnt: 2} 
 ]

Answer 101

arr. sort((a, b) => b.cnt - a.cnt)
arr. forEach(f => console.log(f.fruit))

Question 102

log out the below fruit names, in order of name, descending.

const arr = [ 
 {fruit: 'pear', cnt: 99}, 
 { fruit: 'apple', cnt: 52 }, 
 {fruit: 'orange', cnt: 1}, 
 {fruit: 'watermelon', cnt: 10}, 
 {fruit: 'banana', cnt: 8}, 
 {fruit: 'grape fruit', cnt: 0}, 
 {fruit: 'peach', cnt: 2} 
 ]

Answer 102

arr.sort((a,b) =\> { 
 // if a normally comes before b (a **b.fruit) return -1 
 return 0 
}) 

arr.forEach(f => console.log(f.fruit))**

Question 103

const testObj = {prop1: ‘test’, cnt: 5}

1 Save the above object to local storage
2 Retrieve the object from local storage and assign it to a newVar as an object.

Answer 103

localStorage.setItem(‘testObj’, JSON.stringify(testObj))

const newVar = JSON.parse(localStorage.getItem(‘testObj’))

Question 104

What are 3 initial steps to adding React Router?

Answer 104

1. npm install react-router-dom
2. import {BrowserRouter} from ‘react-router-dom’
3. Wrap component with in index.js

Question 105

What React Router component is used to allow only the first matching route in a list of routes to be returned.

Question 106

Write a basic React Route that matches the root path only and returns a component called Home.

Question 107

Write a basic React Route that would always return an About component no matter what path it’s compared to.

Question 108

Use a React Router component that allow the navigation from the current path to a new path of /newpath/somewhere

Question 109

What is the difference between NavLink and Link

Answer 109

NavLink allows you to pass a special property called activeClassName

Question 110

What does the activeClassName property do for the NavLink component?

Answer 110

When the NavLink is clicked ALL rendered NavLinks that match it’s “to” path will dynamically receive the className specified in the property, which is useful for dynamic styling.
Note: Can use the “exact” property in the NavLink to prevent partial matches on multiple NavLink “to” paths.

Question 111

Write a basic React Route that matches the root path only and returns a component called About that needs a prop of userName=”Test User Jr”.

Answer 111

test

Question 112

What is the major reason for using the render prop instead of the component prop for passing components with props into the Route component.
example:

VS

Answer 112

component will cause the component to unmount and reinstantiated every time a path is matched (aka every time a a matching link is clicked), as where render will follow normal life cycle if a matching path is re-entered (aka, it may rerender by it won’t be unmounted and reinstantiated)

Question 113

What are the three props that are passed into a Route’s component/render function?

Answer 113

history, location, match

Question 114

What are the four properties found in the Router’s component/render function’s match property?

Answer 114

isExact, params, path, url

Question 115

withRouter allows you to receive the history prop from react-router-dom, when the component is not from a Route component. You need to encapsulate the component with withRouter in it’s export statement.

Answer 115

Reminider

Question 116

1.

Immediately redirects you to a new path. Elements after this component don’t get rendered and the route that pushed you to the Redirect is not saved to history (aka, you cant get back to it)

2. props.history.push(somePath)

Adds a new path to the history and updates the URL. Allows you to back into the page/url that got you to the push statement.

3 props.history.goBack()

Will take you back to the previous route stored in history

Answer 116

Reminder

Question 117

CSS property/value to set the background to a gradient?

going from left to right

angled 25degs to the right, off the vertical

the first 10 percent solid white

10% to 75% grade from white to red

75% to 90% grade from red to green

90% to 100% solid green

Answer 117

background: linear-gradient(

115deg,

white 0 10%,

red 75%,

green 90% 100%

)

Question 118

React router dom v6: List 7 commonly used named components

Answer 118

BrouserRouter

Navigate

Link

NavLink

Routes

Route

Outlet

Question 119

React-router-dom v6: List the following hooks.

Provides a function to traverse browser history (redirect URL).

Provides an object to access and update the URL query params.

Provides an object with access to param values.

Answer 119

useNavigate()

useSearchParams()

useParams()

Question 120

ES7 React/Redux/GraphQL/React-Native snippets shortcut to insert a functional component with export using arrow functions

Answer 120

_rafce

Question 121

ES7 React/Redux/GraphQL/React-Native snippets shortcut to insert a functional component with export and propTypes using arrow functions

Answer 121

_rafcp

Question 122

What property do you use on a NavLink to prevent the isActive from being triggered when one of its child paths is active?

Answer 122

end=true OR just pass end

Question 123

React Router Dom v6: In the ‘to’ property for Link, NavLink, Navigate components, you can specify an integer to direct it to jump forward or backward through browser history.

Answer 123

reminder

Question 124

A function that takes a function as an argument, returns a function, or both?

Answer 124

Higher-Order function

Question 125

A technique used to convert a function that takes multiple inputs to one that takes fewer (ie one or none) inputs by returning a function that takes the secondary input. You could then pass and execute the function as a callback since it will return a new function definition.

Answer 125

Currying

Review Code-with-mosh Redux Video #7 “Currying” for great example.

Question 126

const add = (a, b, c) => a + b + c

Rewrite the above function with the Currying technique so that it can be passed into the below as a parameter.

const addMore = (addFunc, someVal) => addFunc() + someVal

The problem that you’re trying to solve is the fact that addMore does not provide any values for the add function which you’ll be passing to addMore.

Answer 126

const add = (a,b,c) => ( ) => a + b + c

Now running add(2,4,6) returns a new function of ( ) => 2 + 4 + 6

Question 127

A function that when the same values are passed in, it will always return the same result.

ie const someFunc = (a, b) => a * b

someFunc(3, 2) will always return 6

Answer 127

Pure Function

Question 128

Copying an object using the spread operator (ie {…someObj}) results in a shallow copy, meaning that nested objects are still copied by reference.

You can copy the nested objects by overwriting their properties with another spread operator.

ie { …someObject, someSubObj: {…someObject.someSubObj}}

OR

You could copy using JSON.parse(JSON.stringify(someObject))

OR

Use a third party library like immer

Answer 128

reminder

Question 129

What are the three building blocks of a Redux application?

Answer 129

Action

Store

Reducer

Question 130

A Redux Action can be thought of as an event

A Redux Store can be thought of as a giant state object

A Redux reducer can be thought of as an event handler (a PURE function that updates the store state when an event happens)

Answer 130

reminder

Question 131

What are 4 steps to follow when building a Redux application?

Answer 131

Design the store

Define the actions

Create reducers

Setup the store (based on reducers)

Question 132

Given a single reducer exported by default from a file ‘./reducer’, write 4 lines of code to create a Redux store using the reducer and export it by default.

Answer 132

import {createStore } from ‘redux’

import reducer from ‘./reducer’

const store = createStore(reducer)

export default store

Question 133

The Redux store object is composed of 5 properties (all methods). With one being Symbol(observable), what are the other 4 along with the params they accept?

Answer 133

dispatch(action)

subscribe(listener)

getState()

replaceReducer(nextReducer)

Question 134

What does the command pwd stand for?

Answer 134

Print working directory

Question 135

What is the below array function?

Takes a function that loops though each element, returns false and exits the loop if any of the functions returns false, otherwise returns true

Answer 135

.every()

Question 136

What is the below array function?

Takes a function that loops though each element, returns a new array with each element being the return value of each function execution.

Answer 136

.map()

Question 137

What is the below array function?

Takes a function that loops though each element, returns a new array with each of the original elements where the executed function returned true.

Answer 137

.filter()

Question 138

What is the below array function?

Takes a value and returns true if the value is equal (triple equal) to one of the elements in the array and otherwise returns false.

Answer 138

.includes()

Question 139

What is the below array function?

Takes a function that loops through each element, returns the first element where the function returns true.

Answer 139

.find()

Question 140

Order of events for an event handler with UseState

event handler starts execution

hits setVarible call

runs any setVariable fn code

schedules variable update from return value

continues to end of event handler code with original variable value

state gets updated

component code is run through

component is rendered

all useEffects that include the state variable dependency or No dependency are run in order.

Question 141

Debouncing is a technique for having a timeout to wait to see if a user is completed entering data before taking an action.

useEffect, its cleanup return, with a setTimeout function is a good way to perform this technique

Answer 141

reminder

Question 142

An example of debouncing in react.

useEffect(() => {

const identifier = setTimeout(

setFormIsValid(

enteredEmail.includes(‘@’) && enteredPassword.trim().length > 6

)

, 500)

return () => {

clearTimeout(identifier)

}

}, [enteredEmail, enteredPassword])

Answer 142

reminder

Question 143

Write the import statement and the line of needed to Portal a render of component to a div element with the id=”overlays”

Answer 143

import ReactDOM from ‘react-dom’

ReactDOM.createPortal(, document.getElementById(‘overlays’))

Question 144

Write a file to create/initialize/export a context object to store a list of users with addUser and removeUser actions.

Answer 144

import React from ‘react’

const UserContext = React.createContext({

users: [],

addUser: user => {},

removeUser: id=> {}

})

export default UserContext

Question 145

Make a UserContext Provider wrapping Component file using the context from the below user-context.js file.

import React from ‘react’

const UserContext = React.createContext({

users: [],

addUser: user => {},

removeUser: id=> {}

})

export default UserContext

Answer 145

import UsersContext from “./users-context”

const UsersProvider = ({children}) => {

const addUserHandler = user => {}

const removeUserHandler = id => {}

const usersContext = {

users: [],

addUser: addUserHandler,

removeUser: removeUserHandler

}

return (

< UsersContext.Provider value={usersContext} >

{children}

< /UsersContext.Provider >

)

}

export default UserProvider

Question 146

Every time a react component is loaded all of its children will be reloaded and all of their children, regardless of whether the props on the children were changed.

If you wrap the child’s export with React.memo() this will prevent the child from being reloaded except for when it’s props have actually changed.

Note: any reference type props (like functions) passed to the child elements would be considered as a change in props, unless you create them using useCallback.

Answer 146

reminder

Question 147

If multiple state variables are changed in a single execution the component does NOT rerender multiple times. Instead, all of the updates are processed as a group before the component rerenders. The exception is any setVar calls during that execution that nested inside of an async function like setTimeout.

The individual setVar calls within the group can be run in any order. Thats why multiple calls to the same setVar need to use prev state AND setVar that depend on other other setVar values should be combined and updated using useReducer.

useEffect will only be called once, even if more than one of its dependencies were changed.

Key point: multiple setVar calls side by side in an execution only causes on rerender

Key point2: Multiple set calls -> all setvar are processed and updated -> One render -> One execution for each matching useEffect call

REVIEW React course with Max S -> Sec 12 (video 160 mostly) Understanding scheduling and batching

IMPORTANT NOTE In async functions any setVar calls after the first await statement gets executed individually and EACH will cause a rerender (ie batch stops after await statement). The same happens inside a setTimeout call, except an await call is not needed to separate the calls.

Answer 147

reminder

Question 148

useMemo is the same as useCallback, exept you use it for arrays/objects instead of functions.

Common to use on stuff like sorting array, to prevent having to resort even though the array hasn’t changed.

If using on a prop, you need to call it on the parent var that’s passing the prop and when processing the prop inside the child.

Answer 148

reminder

Question 149

API stands for?

Answer 149

Application Programming Interface

Question 150

When passing a callback function to an event into another function, using .bind() will allow you define the ‘this’ context as well as pass in additional parameter values. the additional parameter values will be place before the internally defined parameters. https://academind.com/tutorials/function-bind-event-execution

ie

Normally you would not be able to pass the below MyFnc var to onClick, because onClick would only pass you the event var. bind allow s you to include boundVal and accept 32 into it’s definition.

const myFnc = (boundVal, event) => boundVal

onClick={myFnc.bind(null, 32)}

Answer 150

reminder

Question 151

If you have multiple setUseStateVar executed in succession for the same variable, the prevState value in the function call version is needed to access the values returned from other calls in that execution context AND the last executed’s return value is the one that will be applied on the next render.

ie the set calls are put on the stack in order and are executed in order (still as a batch for that render cycle). If you use the var value, it will only give you the value from the last render. If you use the prevState, you’ll get the value passed from the prev set call in order(time to process the function does not interrupt the order).

Answer 151

reminder

Question 152

What button type property does not trigger a submit on a parent form?

Answer 152

type = “button”

Question 153

List out the 9 common folders you will use to build an express API. Plus a 10th one that will be generated with sequilize setup.

Answer 153

1. config
2. controllers
3. database
4. middleware
5. public
6. router
7. socket
8. uploads
9. validators
10. models

Question 154

List the step/code to setup Sequelize for querying ms SQL.

Answer 154

1. npm install sequelize
2. npm install sequelize-cli -g (needs to be install globally since it runs from the command line as its own function)
3. npm install tedious (this is the ms SQL driver.)
4. create a .sequelizerc file in the root server folder with the following content

const path = require(‘path’)

module.exports = {

‘config’: path.resolve(‘./config’, ‘database.js’),

‘models-path’: path.resolve(‘models’),

‘migrations-path’: path.resolve(‘database’, ‘migrations’),

‘seeders-path’: path.resolve(‘database’, ‘seeders’)

}

5. sequelize init (command to generate the above files/config)
6. update/fix the generated ./config/database.js file by:
   a. export the generated object (using module.exports = )
   b. update the config values (ideally pulling in values from require(‘dotenv’).config()
7. generate db model code into ./database/migrations path
   a. sequelize model:create –name [SomeTableName] –attributes [fieldName1:string, fieldName2:integer,etc…]
   b. note that nothing is enclosed in quotes and don’t include brackets
8. update model code with defaults, unique markers, etc as needed
9. sequelize db:migrate (to execute model code and generate database tables, running a second time will not update the database)
   a. if you want to rerun the command and update the migration, must drop using undo: (see b.)
   b. sequelize db:migration:undo
10. sequelize seed:create –name users (generates seeder code to help add seed data)
    a. code is generated in the ./database/seeders directory
    b. edit code file to insert your made up records. file contains commented code to remind how to do insert objects. The down: property will allow you to write delete code.
11. sequelize db:seed:all (to run insert commands created above)
    a. sequelize db:seed:undo (to reverse)

Question 155

Node module name used to encrypt passwords

Answer 155

bcrypt

Question 156

Write 2 lines of code to:

1. Import bcrypt into node
2. Use it to save a hashed version of plainTextPwd to a variable called hashedPassword

Answer 156

const bcrypt = require(‘bcrypt’)

const hashedPassword = bcrypt.hashSync(plainTextPwd, 10) //10 is the number of hashing rounds

Question 157

NOW( ) is used to get the current date/time in postgreSQL. What is the equivalent command in MSSQL?

Answer 157

GETDATE( )

Question 158

Write statements with bcrypt to determine if the encryptedPwd var is equal to the submittedPwd var. Include the import statement and save the result to passwordIsValid variable.

Answer 158

const bcrypt = require(‘bcrypt’)

const passwordIsValid = bcrypt.compareSync(submittedPwd, encryptedPwd)

Question 159

const user = {

name: ‘jordan’,
state: ‘IL’,
password: ‘mysecretpassword’

}

Write one line of code to remove the password prop completely from this user object.

Answer 159

delete user.password

Question 160

Write a line of node code to generate a random 64 character hex coded string and save it to a var call secretKey.

Answer 160

const secretKey = require(‘crypto’).randomBytes(64).toString(‘hex’)

Question 161

Write code for node, including the import statement to generate a token from a ‘user’ object, with the encryption key = someKey, and expires after a week. Save it to a var called token.

Answer 161

const jwt = require(‘jsonwebtoken’)

token = jwt(user, someKey, {expires: 60 * 60 * 24 * 7} //expires is in seconds for integer and ms for string number.

Question 162

What is a good validation package I could use in my node API code ?

Answer 162

express-validator

Question 163

What are 9 npm packages I should install by default in my node api’s

Answer 163

express

express-validator

bcrypt

dotenv

jsonwebtoken

sequelize + tedious and/or mssql

helmet

cors

nodemon –save-dev

Question 164

Write out 8 variables likely used in .env file for api (use lower case for easier typing here, but use upper case in app)

Answer 164

app_key

app_url

app_port

db_server

db_user

db_password

db_name

db_port

Question 165

write 1 line of code that makes process.env object available with .env file values.

Answer 165

require(‘dotenv’).config( )

Question 166

1 What are the 4 property names that you should export from .sequelizerc as part of an object that describes the folder/file path for each property.

2. what function are you going to use to generate the values for each config

Answer 166

config

models-path

migrations-path

seeders-path

path.resolve(‘folderPath’, [filename])

Question 167

list out the main properties dbConn.js should export

hint) {prop1, prop2, prop3, prop4, prop5: {subProp}}

Answer 167

user

password

database

server

options.trustServerCertificate

Question 168

What property name and value do you need to add to fields in a sequelize migration template for MS SQL to:

1. ) apply the current time.
2. ) specify that the field should be unique

Answer 168

defaultValue: sequeslize.literal(‘GETDATE( )’)

unique: true

Question 169

List all sequalize-cli commands

Answer 169

sequelize db:migrate Run pending migrations
sequelize db:migrate:schema:timestamps:add Update migration table to have timestamps
sequelize db:migrate:status List the status of all migrations
sequelize db:migrate:undo Reverts a migration
sequelize db:migrate:undo:all Revert all migrations ran
sequelize db:seed Run specified seeder
sequelize db:seed:undo Deletes data from the database
sequelize db:seed:all Run every seeder
sequelize db:seed:undo:all Deletes data from the database
sequelize db:create Create database specified by configuration
sequelize db:drop Drop database specified by configuration
sequelize init Initializes project
sequelize init:config Initializes configuration
sequelize init:migrations Initializes migrations
sequelize init:models Initializes models
sequelize init:seeders Initializes seeders
sequelize migration:generate Generates a new migration file
sequelize migration:create Generates a new migration file
sequelize model:generate Generates a model and its migration
sequelize model:create Generates a model and its migration
sequelize seed:generate Generates a new seed file
sequelize seed:create Generates a new seed file

Question 170

What does ORM stand for, in relation to databases?

Answer 170

Object Relational Mapping

Question 171

What is the additional install package name and corresponding dialect property value needed with sequelize for each of the following databases?

1 Postgres

2 MySQL

3 MariaDB

4 SQLite

5 Microsoft SQL Server

Answer 171

package name / dialect string value

1 pg pg-hstore / postgres

2 mysql2 / mysql

3 mariadb / mariadb

4 sqlite3 / sqlite

5 tedious / mssql

Question 172

findById() is Sequalize was replaced by what after version 5

Answer 172

findByPk

Question 173

What does OWASP stand for?

Answer 173

Open Web Application Security Project

Question 174

What are the top ten web app security risks identified by OWASP?

Answer 174

2021 compaired to 2017 https://owasp.org/www-project-top-ten/

A01:2021-Broken Access Control moves up from the fifth position; 94% of applications were tested for some form of broken access control. The 34 Common Weakness Enumerations (CWEs) mapped to Broken Access Control had more occurrences in applications than any other category.

A02:2021-Cryptographic Failures shifts up one position to #2, previously known as Sensitive Data Exposure, which was broad symptom rather than a root cause. The renewed focus here is on failures related to cryptography which often leads to sensitive data exposure or system compromise.

A03:2021-Injection slides down to the third position. 94% of the applications were tested for some form of injection, and the 33 CWEs mapped into this category have the second most occurrences in applications. Cross-site Scripting is now part of this category in this edition.

A04:2021-Insecure Design is a new category for 2021, with a focus on risks related to design flaws. If we genuinely want to “move left” as an industry, it calls for more use of threat modeling, secure design patterns and principles, and reference architectures.

A05:2021-Security Misconfiguration moves up from #6 in the previous edition; 90% of applications were tested for some form of misconfiguration. With more shifts into highly configurable software, it’s not surprising to see this category move up. The former category for XML External Entities (XXE) is now part of this category.

A06:2021-Vulnerable and Outdated Components was previously titled Using Components with Known Vulnerabilities and is #2 in the Top 10 community survey, but also had enough data to make the Top 10 via data analysis. This category moves up from #9 in 2017 and is a known issue that we struggle to test and assess risk. It is the only category not to have any Common Vulnerability and Exposures (CVEs) mapped to the included CWEs, so a default exploit and impact weights of 5.0 are factored into their scores.

A07:2021-Identification and Authentication Failures was previously Broken Authentication and is sliding down from the second position, and now includes CWEs that are more related to identification failures. This category is still an integral part of the Top 10, but the increased availability of standardized frameworks seems to be helping.

A08:2021-Software and Data Integrity Failures is a new category for 2021, focusing on making assumptions related to software updates, critical data, and CI/CD pipelines without verifying integrity. One of the highest weighted impacts from Common Vulnerability and Exposures/Common Vulnerability Scoring System (CVE/CVSS) data mapped to the 10 CWEs in this category. Insecure Deserialization from 2017 is now a part of this larger category.

A09:2021-Security Logging and Monitoring Failures was previously Insufficient Logging & Monitoring and is added from the industry survey (#3), moving up from #10 previously. This category is expanded to include more types of failures, is challenging to test for, and isn’t well represented in the CVE/CVSS data. However, failures in this category can directly impact visibility, incident alerting, and forensics.

A10:2021-Server-Side Request Forgery is added from the Top 10 community survey (#1). The data shows a relatively low incidence rate with above average testing coverage, along with above-average ratings for Exploit and Impact potential. This category represents the scenario where the security community members are telling us this is important, even though it’s not illustrated in the data at this time.

Question 175

What does TDD stand for?

Answer 175

Test Driven Development

Question 176

What are the development phases of TDD

Answer 176

Red, Green, Refactor

Question 177

What is the Red phase of TDD?

Answer 177

Write a test for the expected behavior

Question 178

What is the green phase of TDD

Answer 178

Write the code for the red test (expected behavior test) to pass

Question 179

What is the Refactor phase of TDD

Answer 179

Clean up your code (remove code duplication and etc)

Question 180

Jest naming convention is that its root folder be “__test__” and files have an extension of .spec.js or .test.js and are in pascal case (ie UserReg.spec.js)

Answer 180

reminder

Question 181

What is the shortcut key to rename a highlighted file in vscode

Answer 181

F2

Question 182

What is the shortcut key to autoformat current file in vscode

Answer 182

Shift + Alt + F

Question 183

What is the shortcut key to switch over to the Explerer window in vscode

Answer 183

ctrl + shft + e

Question 184

How do you search for or edit shortcut keys in vscode and which are some that I should edit on a new system.

Answer 184

Ctrl + shft + p

search for “Preferences: open keyboard shortcuts”

Should update explorer.newFile to ctrl + n

should update explorer.newFolder to ctrl + shft + n

workbench. action.files.save to ctrl + s
workbench. action.files.saveAll to ctrl + shft + s

Question 185

What are 7 datatypes in Sequelize along with their corresponding datatypes in MySQL?

Sequelize dt / MySQL dt

Answer 185

STRING / VARCHAR(255)

TEXT / TEXT

BOOLEAN / TINYINT(1)

INTEGER / INTEGER

FLOAT / FLOAT

STRING(2000) / VARCHAR(2000)

DATE / DATE

Question 186

What are the 5 properties you can use to configure your model’s table (the third parameter in the define( ) function) along with the value type that they accept

Answer 186

timestamps / boolean

freezeTableName / boolean

tableName / string

version / boolean

paramoid / boolean

Question 187

For the .sync() function in Sequelize, what are two alternate objects you can pass to change the way it syncs

Answer 187

.sync({force: true})

.sync({alter: true})

Question 188

Describe the 3 properties you can pass .define() when creating a model, in order.

Answer 188

table name as a string

an object modeling out the field values for that table

options for creating our table

Question 189

How would you add your own auto incrementing - primary key user_id field to the modeling parameter when configuring the definition of a Sequelize model

Answer 189

{

user_id: {

type: Sequelize.dataTypes.INTEGER,

autoIncrement: true,

primaryKey: true

}

}

Question 190

You have two models (User and Product) defined for a sequelize instance (called sequelizeApp1).

A.) How would you call the sync methed to build just the User table?

B.) How would you sync all tables?

Answer 190

A.) User.sync( )

B.) sequelizeApp1.sync( )

Question 191

What is the property and value to prevent nulls in a sequelize model definition?

Answer 191

allowNull: false

Question 192

Sequelize note:

You can use: .build( ) together with .save( ) to create a saveable object separately before saving it to the database. You might do this is you need to run some additional changes/executions to the object before saving it to the database.

OR

You can use: .create( ) which does the build and save operations all at once.

Answer 192

reminder

Question 193

List out 6 common sequalize data action methods (not query methods) and what they do

Answer 193

.create( ) - builds, saves to db, and returns a data object

.build( ) - builds and returns a data object, does not save to db

.save( ) - saves/updates a data object to the database (after build/create)

.reload( ) - reverts the data object back to its origonal build/create state

.destroy( ) - deletes the data object (undos save operation)

.bulkCreate([]) - builds, saves to db, and returns an array of data objects

Question 194

write sequelize queries to return the following given a User model and ‘sequelize’ db instance.

1) select * from users – returning a sequelize data array
2) select username, password from users – returning a sequelize data array
3) select username as ‘login_id’, password from users – returning a sequelize data array
4) select SUM(age) as ‘how old’ from users – NOTE: using an ‘as alias’ is required so that sequelize can return an object property name for the sum of the age. it does not default ‘age’
5) select * from users – excluding the password and age field
6) select * from users where age = 45
7) select username, password from users where age=45
8) select top 2 * from users
9) select * from users order by username DESC, age ASC
10) select username, SUM(age) as ‘sum_age’ from users group by username
11) select * from users where age=25 or username=’pizza’
12) select * from users where age > 25
13) select * from users where char_length(username) = 5
14) select * from users – RETURN result as POJO

Answer 194

User.findAll()

User.findAll({ attributes: [‘username’, ‘password’])

User.findAll({attributes: [[‘username’, ‘user_id’], ‘password’]

User.findAll({attributes: [[sequelize.fn(‘SUM’, sequelize.col(‘age), ‘how old’)]]

User.findAll({attributes: {exclude: [‘password’, ‘age’]}})

User.findAll({where: {age:45}})

User.findAll({attributes: [‘username’, ‘password’], where: {age:45})

User.findAll({limit: 2})

9) User.findAll({ order: [[‘username’, ‘DESC’], [‘age’, ‘ASC’] ]
10) User.findAll({
attributes: [‘username’, [sequelize.fn(‘SUM’, sequelize.col(‘age’)), ‘sum_age’] ],
group: ‘username’

})

11) User.findAll({ where: { [Sequelize.Op.or]: { age: 25, username: ‘pizza’ } } })
12) User.findAll({ where: { age: { [Sequelize.Op.gt]:25 } } })
13) User.findAll({
where: sequelize.where(
sequelize. fn(‘char_length’, sequelize.col(‘username’)),

5

)

}

14) User.findAll({ raw: true })

Question 195

Sequelelize: Updating Where (User model, users table, sequelize db instance, Sequelize class)

1) update users set username=’tom’ where age=45

Answer 195

1) User.update({ username: ‘tom’}, {where: {age: 45}})

Question 196

Sequelelize: Delete Where (User model, users table, sequelize db instance, Sequelize class)

1) delete from users where username=’pizza’ – returns number of deleted in array container
2) delete from users – delete all users, not the table

Answer 196

1) User.destroy({where: {username: ‘pizza’}})
2) User.destroy( {truncate: true})

Question 197

Sequelelize: select utility methods (User model, users table, sequelize db instance, Sequelize class)

select MAX(age) from users

select SUM(age) from users

select SUM(age) from users where username=’tom’

Answer 197

User.max(‘age’)

User.sum(‘age’)

User.sum(‘age’, {where: {username: ‘tom’}})

Question 198

If you want to await a group of asynchronous functions to complete before proceeding execution, what tool can you use.

ie.

step 1 await single function

step 2 await a single execution

step 3 await for the completion of multiple functions BUT allow them to run asynchronously (in any order at same time)

step 4 continue execution

Answer 198

Promise.all( […eachAsyncFunc( )] )

Question 199

What does IIFE stand for?

Answer 199

Immediately invoked function expression

Question 200

List other Sequelize query methods other than .findAll()

Hints:

1) returns a result base on Primary Key
2) returns the first row it finds that matches it’s conditions. If now conditions given it will just return the first row in the table.
3) queries and returns a record and if not found, it will generate and insert the record
4) return results same as findAll plus it gives a count of records returned

Answer 200

1) .findByPk( )
2) .findOne( )
3) .findOrCreate( )
4) .findAndCountAll()

Question 201

An object key defined with square brackets is called a ___

ie { [nameVar]: someValue }

Answer 201

Computed property

Question 202

What are the commands to generate a GUID/UUID value for mssql, MySQL, postgres, and sqlite respectively? Note, that it seems that you can use all of these as default generators, except in sqlite, which appears to only accept static defaults.

Answer 202

mssql / newid( )

postgres / gen_random_uuid()

mysql / uuid( )

sqlite / hex(randomblob(16))

Question 203

Code to get the current dialect value when marking up the up( ) function in sequelize migrations.

Answer 203

queryInterface.sequelize.options.dialect

Question 204

You can use the following vscode settings to enable emmet for all js files. However it’s better not to add it and name react components with .jsx, as emmet is on by default for that extension. Also, when emmet is on in .js files that are not react components, it dirties up code completion.

“emmet.includeLanguages”: {

“javascript”: “javascriptreact”

},

Answer 204

reminder

Question 205

What are the two common obj.method( )’s that you will use for the up/down methods in your seeder file?

Answer 205

queryInterface.bulkInsert() for up

queryInterface.bulkDelete() for down

Question 206

What are the two common obj.method( )’s that you will use for the up/down methods in your migrations file?

Answer 206

queryInterface.createTable( ) for up

queryInterface.dropTable( ) for down

Question 207

Show math to convert 0b101101 to decimal

Answer 207

45

(2⁵ * 1) + (2⁴ * 0) + (2³ * 1) + (2² * 1) + (2¹ * 0) + (2⁰ * 1)

32 + 0 + 8 + 4 + 0 + 1 = 45

Question 208

Show math to convert 0xAB9 to decimal

Answer 208

2745

(16² * 10) + (16¹ * 11) + (16⁰ * 9)

(256 * 10) + (16 * 11) + (1 * 9)

2560 + 176 + 9 = 2745

Question 209

With sequelize class modeling pattern using the autogenerated index

Class pattern with generated index file:

index will automatically associate the db connection/instance from config

index will use the modelName property for the defined export name. ie modelName.findOne( )

index does not care about the file name nor the classname, so you can name them whatever you want.

index provides named exports of { sequelize, Sequelize, eachOfYourModelNames}

you must specify timestamps: false if your table/migration does not use updatedAt & createdAt, even if your model does not have them listed in fields (otherwise queries will try to select them)

If not using an ‘id’ column you must add modelClassName.removeAttribute(‘id’) after the init call (before the return call) to remove this default field and to keep it from generating in queries. Also, some queries like findOne will still use ‘id’ to generate Order by clauses. This can be fixed by specifying an order: value. Alternativly, specifying an alternate PK field will correct the whole issue for this model.

the call to findOne() or any other queries will automatically query the tableName = modelName pluralized. You can add a tableName property to the model and specify whatever table name you want the model to query against.

Answer 209

reminder

Question 210

using Sequelizes’ .define( ) method to generate model against autogenerated index.js

This will work the same as with the generated Model class pattern, just need to export a (sequelize, DataTypes) => { //some code }function that returns the object from executing sequelize.define( ).

The modelName that is exported by name from index.js comes from the first parameter passed to define.

The tableName will be autogenerated from the modelName (pluralized by default unless you pass the freezeTableName: true option). You can pass a tableName: ‘someName’ option to use a completely different tableName.

pass timestamps: false option to stop queries from assuming table has createdAt, updatedAt fields

if the table does not have an ‘id’ field, you need to define an alternate primaryKey fields OR call removeAttribute on the returned sequelize.define( ) variable before returning from the exported function

index.js does not care what the filename or return variable name is.

Answer 210

reminder

Question 211

Sequelize assumes your tables will have ‘id’, ‘createdAt’, ‘updatedAt’ fields. If you don’t:

Sequelize injects an ‘id’ field into all models by default. You can define an alternate PK field and this default will be overwritten.

If you don’t have an alternate PK field and no ‘id’ field, you must use modelName.removeAttribute(‘id’) before using query functions with it. Also, any automatically ordered queries will default with ‘id’, so you’ll need to overwrite with an order: ‘something’ option.

Also, the timestamp option needs to be set to false if you don’t have timestamp fields in your table.

Answer 211

reminder

Question 212

the autogenerated models/index.js file, when imported, will:

loop through each model file and execute the returned function passing in a dbInstance generated by config. It will return the models created as properties, including a Sequelize property and sequelize property (ie dbInstance)

If I import the models/index.js file for its functionality, every model file must have the module.exports signature of (sequelize, DataTypes) => modelObj (modelObj can be created with .define( ) or the Model class). Any other type of exports will cause index.js’ code to fail.

I can separately import these specially exported modules and just pass them my own dbInstance to override the sequelize dbInstance generated by modules/index.js

Answer 212

reminder

Question 213

How do I include a partial scss or CSS file into my current one? ie a _variables.scss in a ../assest/scss folder

Answer 213

@import ‘../assets/scss’

Question 214

I have the below _variables.scss file in ‘../assets/scss’. What do I add to the file to export the variable for use in a jsx file. Once exported, how do I import it and set a variable equal to one of the values in Javascript?

$bg-color: ‘gray’;

$bg-main: ‘blue’;

Answer 214

add to variable.scss for export:

:export {

bgColor: $bg-color;

bgMain: $bg-main;

}

to import:

import variables from ‘../assets/scss/_variables.scss’

to use:

const { bgMain } = variables //used destructuring here but can use regular assigning also.

Question 215

What are the 4 css property names to set each of the individual border radiouses?

Answer 215

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-left-radius
4. border-bottom-right-radius

Question 216

Write code that exports a configured axios object that connects to API at HTTP://localhost:3001 and tell it to use JSON. Don’t forget the import and export code.

Answer 216

import axios from ‘axios’

export default axios.create({

baseURL: ‘http://localhost:3001’,

headers: {

Accept: ‘application/json’

}

})

Question 217

What does the Optional Chaining operator (ie ?. ) do?

Answer 217

It can be placed before any property on an object, array index call ( ie [] ), or function execution (ie ( ) ) to escape throwing an error if the object/array/func is undefined. Instead it will return undefined.

Question 218

someObj?.someProp

What is the ?. operator, attached to this object, called?

Answer 218

Optional Chaining operator

Question 220

With Sequelize queries on Models that contain getters, any call for raw:true will not execute the getter. In order for the getter values to be process, you must be pulling the value from a sequelized object. So, you need to use .toJSON() or call the property directly on the sequelized object, to get the calculated value. ie seqReturnObj.toJSON() or seqReturnObj.someCalculatedProperty.

Answer 220

reminder

Question 221

Helmet can overwrite CORS policy, and has blocked img src=http…somefile.svg elements for some reason. You can use helmet and disable its cors policies by calling it as:

app. use(helmet({crossOriginResourcePolicy: {policy:’cross-origin’}}))
https: //helmetjs.github.io/

Answer 221

reminder

Question 223

Sequelize provides constraint properties and validator properties.

Constraint properties apply on db sync or migration only and are only obeyed as a result of database errors. IE javascript will not stop the execution of the sql query.

Validation properties are checked before javascript sends a sql query to the database.

stuff like unique and all properties inside of validator are Validation properties.

stuff like primaryKey, autoIncrement are constraint properties.

things like allowNull and defaultValue can be either

Answer 223

reminder

Question 224

Terminal Shortcuts

1. Close current focused tab while in command prompt — custom
   
   • Terminal: Kill the Active Terminal Instance, When: terminalFocus
2. add a tab
3. go up/left one tab while in command prompt
4. go down/right one tab while in command prompt
5. move focus to tab list
6. remove selected tab while in tab list
7. rename selected tab while in tab list
8. move back to command prompt while in tab list
9. scroll up / down

Answer 224

1. ctrl + shft + F4
2. ctrl + shft + `
3. ctrl + PgUp
4. ctrl + PgDown
5. ctrl + shft + \
6. Del
7. F2
8. Enter (on selected tab)
9. crtl + shft + PgUp / PgDown

Question 225

With the following axios call in a try catch block. 1) How do you access the data if the call is successful and 2) how do you get the returned API’s error data (not the HTTP error)?

try {

const result = await axios.get(url, { email, password })

console.log( ___ ) // 1. access returned data ie fill in the blank

} catch (err) {

console.log( ___ ) // 2. access error data sent from api server, not the HTTP error

}

Answer 225

• result.data
• err.response.data

Question 226

Set the bearer/token on this axiosObj variable using the value stored in token.

Answer 226

axiosObj.defaults.headers[‘Authorization’] = Bearer ${token}

Question 227

What should the client side service functions do (in reference to auth, for now)

Answer 227

Make call with the axios api objects, receiving and passing in needed params.

The service will return the desired result data from the axiosObj calls or throw the error received

If successful user authentication, the service will apply an Authorization token to the axios API object

ie

• try
• const result = await axiosObj.post(somthing)
• axiosObj.defaults.headers[‘Authorization’] = Bearer ${token}
• return result.data
• catch(error)
• throw error

Question 228

In a controller, how do you get the Bearer token?

Answer 228

req.headers[‘authorization’] //authorization must be lower case

Question 229

What are the 4 config properties for configuring a Multer uploader middleware? IE multer({prop1, prop2, prop3, prop4})

Answer 229

storage or dest

fileFilter

limits

preservePath

Question 230

What method on the multer object do you use to create a storage config object? What 2 properties does this config object require?

Answer 230

.diskStorage( { } )

destination

filename

Question 231

What are the properties of a file returned by multer?

Answer 231

1. fieldname
2. origionalname
3. encoding
4. mimetype
5. size
6. destination - files stored in DiskStorage
7. filename - files stored in DiskStorage
8. path - files stored in DiskStorage
9. buffer - files stored in MemoryStorage

Question 232

When passing a fileFilter function to multer, the function receives req, file, and cb. Within the function, you execute cb(null, false) to reject the file, cb(null, true) to accept the file, and cb(new Error(‘Some error message’)) to throw an error.

Answer 232

reminder

Question 234

With file uploads, you can add a third argument (as an object) to the axios call that has an onUploadProgress property that takes a callback function to be run on change of upload progress. The callback passes a progressEven argument that is an object that contains the uploaded and total values.

Answer 234

reminder

Question 235

to use the onUploadProgress event from an imported axios service to update state values, you need to define the call back function or the whole options objected inside your compont (setting your state in the callback’s definition) and pass your definition to the axios service function.

Answer 235

reminder.

Question 236

What are the install package names for socket.io on the 1.) client and on the 2.) server

Answer 236

1. socket.io-client
2. socket.io

Question 237

What are the two packages that need to be installed for internationalization in a React project?

Answer 237

i18next react-i18next

Question 238

Write out the basic template to configure and initialize i18n for react to be able to translate ‘hello world’ and water between english ( en ) and Spanish (es). Including imports.

Answer 238

• import i18n from ‘i18next’
• import { initReactI18next } from ‘react-i18next’ // note the capital I
• i18n
• .use( initReactI18next )
• .init({
• resources: {
• en: {
• translation: {
• “helloWorld”: “hello world”, //notice use of JSON for word list, not POJO
• “water”: “water”
• }
• },
• es: {
• translation: {
• “helloWorld”: “hola world”, //notice use of JSON, not POJO
• “water”: “agua”
• }
• }
• },
• lng: ‘es’,
• fallbackLng: ‘en’,
• interpolation: {
• escapeValue: false
• }
• })

Question 239

You don’t make an export statement from a plain .json file. You can simply import from the file into a variable with any name. No need to parse either.

ie import anyName from ‘./someFile.json’

Answer 239

reminder

Question 240

List all the property names used in the i18next init method. tab in (3spaces) sub properties

Answer 240

1. resources
2. (languageAbbreviation)
3. translation
4. (wordLabelForTranslation)
5. lng
6. fallbackLng
7. interpolation
8. escapeValue

Question 241

You can create a file for the purpose of executing a function (imported, IFEE, defined). You would would write or inport the function and execute it in the file. You would not export the function from the file. Just importing the file into your app would trigger the execution.

ie import ‘./someFileWithExecutedFunc’

Answer 241

reminder

Question 242

How do you access your translations or change language? Write the import and lines of code to do both.

Answer 242

• import { useTranslations } from ‘react-i18next’
• const { t, i18n } = useTranslations( )
• const textExample = t( ‘translatedTextKey’ )
• i18n.changeLanguage( ‘languageKey’ )

Question 243

When adding your own primary key in a sequelize model, you must define it with primaryKey and a an autoIncrement or defaultValue of DataType.UUIDV4

If no id at all then Model.removeAttribute(‘id’)

If you use ‘id’ you can omit it from model unless, you need to default a UUID

KEY POINTS: ‘id’ integer primary key is defaulted into the model and is the only field that is auto excluded from inserts

ANY TIME you want the database to generate the default for an insert, you must use exclude the attribute

Answer 243

reminder

Question 244

app.use(helmet({crossOriginResourcePolicy: {policy:’cross-origin’}}))

Answer 244

Reminder

Question 245

REMINDER. Don’t try to set the value on a input of type file.

You might get the following errors:

The above error occurred in the ( input ) component:

Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable

Answer 245

reminder

Question 246

To set the initial value for a select tag on render in React, you must use the _???_ attribute. Most other methods will thrown an error.

Answer 246

defaultValue

Question 247

When doing a model.update() you must add returning: true if you want the updated record back (will get [count, resultsArray] instead of (counts) )

You must add individualHooks: true if you want the hooks to be processed.

Answer 247

reminder

Question 248

a model hook signature = (instance, options) => { }

The instance param starts out with all it’s current dataValues set with the new values passed into the methed called on the model (ie model.update(newObject,{ where: … } ) ). The values ommited from the passed in object get set to the values currently in the database.

the instance object also stores the previous values, those start out as the values pulled from the database.

the changed method will return true if you passed in a different value from what’s in the database. Done by comparing prevDataValues to current dataValues.

If you change a value inside the hook it would shift the current and previous dataValues with your new value.

Answer 248

reminder

Question 249

1. Use the multiple attribute to allow multiple files
2. Use the accept attribute to limit file types (comma separated string of extensions or mime types, including something like image/*)
3. Whether single or multiple files, the files get stored/added to a FileList object which is read only.
4. The FileList is stored in inputEl.files. It’s not an array, but can be spread into an array.
5. To clear an input, you can set inputEl.value = ‘’ (empty string)
6. DataTransfer class allows you to create an alternative to a fileList, but with the ability to add File objects ( using dataTransfer.items.add(file) )
7. You can add a dataTransfer file list (overwrite an inputs files) with inputEl.files = dataTransfer.files
8. DataTransfer was created for drag and drop but seems to work on simple input file types.
9. You can also set inputEl._value (note the underscore) with a regular array of File objects, but it does not update the file count when viewing the original input box.
10. You cant control a file input. You must use references to update the value.
11. https://pqina.nl/blog/the-trouble-with-editing-and-uploading-files-in-the-browser/ form some good info.

Answer 249

reminder

Question 251

when chaining errors by rethrowing them, each the receiving function must be an async function or use .catch or be a promise.

Particularly with receiving functions that use try catch block, you must await the statements that the error could be thrown too in the try block.

Otherwize you may get an uncaught error from the function rethrowing the error.

Answer 251

reminder

Question 252

an error/json caught from axios is stored in error.response.data

Answer 252

reminder

Question 254

When using multiple animated items in one container that leave or reset within the container, you should position: absolute the items, as when they leave, reset or move to the edges of the container, they will cause the container to change causing a jitter or jumping effect on the other items.

Answer 254

reminder

Question 255

Whenever you start a new line with something enclosed in parenthesis, you must close/end the previous line of code with a semicolun to prevent javascript from thinking its executing a function.

Answer 255

reminder

Question 256

You can play audito by using the new Audio(‘path/fileName’) and calling play( ) on the object created

const sound = new Audio(‘path/someFile’)

sound.play( )

You can also import the sound file and pass the imported variable into the new method. Also, you call play on new Audio using it like an IFEE

Answer 256

reminder

Question 257

you can call scrollIntoView(true) on an element to force a scroll to that element (ie it’s a to anchor method)

someElRef.current.scrollIntoView(true)

Answer 257

reminder

Question 258

Socket.io cors error from the client.

When creating the io object on the server, using socketIo(server, config), you must pass an object to the config param that contains a cors property and set the origin property.

otherwise you could trigger a cors error

example

• const socketIo = require(‘socket.io’)
• const SocketServer = (server) => {
• const io = socketIo(server, {
• cors: {
• origin: “*“
• }
• })
• io.on(‘connection’, (socket) => {
• socket.on(‘join’, async (user) => {
• console.log(“New user joined: “, user.firstName)
• })
• })
• }

Answer 258

reminder

Question 259

If getting an error from my reducers about not being able to convert non-serializable data, you can ignore the error and configure the store to not show the error by adding the below middleware property

will look up later on best practice for this issue.

• export default configureStore({
• reducer: {
• lang: langSlice.reducer,
• auth: authSlice.reducer,
• chat: chatSlice.reducer
• },
• middleware: (getDefaultMiddleware) => getDefaultMiddleware({
• serializableCheck: false,
• })
• })

Answer 259

reminder

Question 261

what is the heroku command to list all env variables including built in ones, on a deployed app (ie chat-server app)? (assume you already logged into the cli using heroku login)

Answer 261

heroku run printenv -a chat-server

Question 262

If you attempt to deploy an app to a server that self builds, it will fail if you only installed your font awesome pro license/token to the local/global config. What are the steps to allow the hosting service to build with your pro token.

Answer 262

1. create a .npmrc file in the project root
2. Add @fortawesome:registry=https://npm.fontawesome.com/ to the file
3. Add //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN} to the file
4. Add the actual token to an env var called FONTAWESOME_NPM_AUTH_TOKEN on the host service

Alternatively you could skip adding the environment var and replace ${ envVarKey } with the actual token on step 3

Question 264

What are the 4 pillars of OOP

Answer 264

Encapsulation

Abstraction

Inheritance

Polymorphism

Question 266

command line to generate a console based c# project

Answer 266

dotnet new console

Question 267

command line to start a c# console project

Answer 267

dotnet run

Question 268

What are the implicit (implied) using statements in .net 6.0

Answer 268

using System;

using System.IO;

using System.Collections.Generic;

using System.Linq;

using System.Net.Http;

using System.Threading;

using System.Threading.Tasks;

Question 269

Command to print a list of all the C# project templates.

Answer 269

dotnet new

Question 270

List the primative datatypes in C#

Answer 270

• byte
• short
• int
• long
• float
• double
• decimal
• char
• bool

Question 271

What is the byte size and range of values for the following primatives?

1. byte
2. short
3. int
4. long
5. float
6. double
7. decimal
8. char
9. bool

Answer 271

1. 1B / 0-255
2. 2B / -32768 to 32767
3. 4B / +- 2.1billion
4. 8B / +- 9.2 * 10^18
5. 4B / ±1.5 x 10^-45 to ±3.4 x 10^38
6. 8B / ±5.0 × 10^-324 to ±1.7 × 10^308
7. 16B / ±1.0 x 10^-28 to ±7.9228 x 10^28
8. 2B / Unicode char set
9. 1B / True or False

Question 272

How do you write the assigment of a decimil or float value in C#?

use the value 1.25 as an example and someVar as the variable name

Answer 272

float someVar = 1.25f;

float someVar = 1.25m;

Question 273

What are 4 common non-primative types in C#?

Answer 273

• String
• Array
• Enum
• Class

Question 274

When deploying a React router app to a web server/service (particularly Netlify) you need to add a ___ file to the public directory with what command? Note: the purpose of this file is to transfer routing over to the route of your app on initial load. It fixes the page not found error when someone loads/refreshes the site from a route.

https://www.freecodecamp.org/news/how-to-deploy-react-router-based-app-to-netlify/

Answer 274

_redirects

/* /index.html 200

Question 275

File uploads to Heroku, through the application, will work, but are only temporary. Uploaded files will be lost when the Heroku dyno restarts (at least daily).

Answer 275

reminder

Question 277

process. stdin.on(“data”, (input)=> {callback function})
process. stdin.on starts a listener process on the command line

the process can be programatically stopped with process.exit()

entered input gets suffixed with \r\n

Answer 277

reminder

Question 278

Easiest way to pad leading characters on a string.

return someNumberString as a string with 5 digits, using leading zeros.

Answer 278

return someNumberString.padStart(5, ‘0’)

Question 279

convert someNum to a 32 bit binary string

Answer 279

someNum.toString(2)

Question 280

convert a 32bit binary string call someBinString to a decimal number

Answer 280

parseInt(someBinString, 2)

Question 282

What does IAM stand for in regard to Amazon Web Services?

Answer 282

Identity Access Management

Question 284

What does S3 stand for in Amazon S3

Answer 284

Simple Storage Service

Question 285

What are the properties needed to configure an AWS S3 object? Insure correct casing.

resource on S3 aws-sdk - https://stackabuse.com/uploading-files-to-aws-s3-with-node-js/

Answer 285

accessKeyId, secretAccessKey, region, signatureVersion

Question 286

Write the call on s3 needed to get a file upload URL. Insure correct case sensitivity.

Answer 286

• s3.getSignedUrl(
• ‘putObject’,
• {
• Bucket: ‘bucket-name’,
• ContentType: ‘image/*’,
• Key: ‘thePath/AndFileName.ext’,
• Expires: someIntSeconds
• },
• (err, url) => {
• //some code to use the url or err
• }
• )

Question 287

what is the aws s3 url called that can be generated programmatically to allow a non user or application to temporarily add or retrieve a file from your s3 bucket?

Answer 287

presigned URL

Question 288

Generate and configure an S3 object 3 ways. 1. From the default export of ‘aws-sdk’ ,passing configs to that Class. 2. Pull the default export of aws-sdk and configure the s3 object while creating it. 3. use the named import of S3.

just use a presaved config var called awsConfigs to pass in the configs for this problem.

Answer 288

• const AWS = require(‘aws-sdk’)
• AWS.config.update(awsConfigs)
• const s3 = new AWS.S3()
• const AWS = require(‘aws-sdk’)
• const s3 = new AWS.S3(awsConfigs)
• const S3 = require(‘aws-sdk/clients/s3’) or const {S3} = require(‘aws-sdk’)
• const s3 = new S3(awsConfigs)

Question 289

Where do the validation methods for express validator come from?

Answer 289

validator. js
https: //www.npmjs.com/package/validator

Question 290

What are the 12 validation methods in express-validator that are additional to those included from validator.js

Answer 290

1. .bail()
2. .custom()
3. .exists()
4. .if()
5. .isArray()
6. .isObject()
7. .isString()
8. .not()
9. .notEmpty()
10. .optional()
11. .run()
12. .withMessage()

Question 291

To keep from getting an Uncontrolled changed to Controlled component error, you must make sure the initial value from your variable is not returning undefined.

Answer 291

reminder

Question 292

write a comparison to determin if a property exists in an object.

use the below example

const fruits = {

apple: ‘5 in inventory’,
orange: ‘2 in inventory’,
cherries: ‘0 in inventory’

}

determin if this this object has a banana property

Answer 292

(‘banana’ in fruits)

//should return false

Question 293

‘this’ inside of an arrow function represents the ‘this’ value of the containing function for which it was defined in.

strict mode forces the value of the unbound ‘this’ variable to be ‘undefined’ instead of being added to the window object.

inside class constructors ‘this’ follows strict mode rules.

Answer 293

reminder

Question 294

what are the 5 parameters profided in each file(aka module)

Answer 294

module, exports, require, __filename, __dirname

Question 295

the dog weighs ${someNum} lbs

What kind/type of string does the above expression use

Answer 295

Template String

Question 296

You have to rewatch Mosh H Node.js Extending Event Emmiter lecture, currently Section 2 Vid#21

Great example of creating your own class that extends a Node class and is used in other files.

Answer 296

reminder

Question 297

Show the equivilant x upgradability for the following npm version markers. x representing the part of the version that can be upgraded.

^4.2.5

~4.2.5

4.2.5

Answer 297

4. x //upgrade patches or minor version
5. 2.x //upgrade with patches
6. 2.5 //keep same version

Question 298

command to list out all node module versions in a tree?

command to list only node module versions that your app depends on?

Answer 298

npm list

npm list –depth=0

Question 299

command to see the package.json file for a node module?

Answer 299

npm view someNodeModuleName

Question 300

command to see just a node modules’s dependencies?

command to see all versions of a node module?

Answer 300

npm view moduleName dependencies

npm view moduleName versions

Question 301

How to install a specific version of a node module?

ie version 2.4.2 of mongoose

Answer 301

npm install mongoose@2.4.2

Question 302

command to list out any dependencies that have newer versions available?

command to list out any global packages that have newer versions available?

Answer 302

npm outdated

npm -g outdated

Question 303

command to trigger ALL node modules to update to the latest versions (minor and patch) based on their version prefixes (^ or ~)

trigger update for ALL global packages

Note: to upgrade a major version on ALL outdated node packages, you need something like npm-check-updates module.

Note: you should be able to upgrade the major version on a single package by running the install command again.

Answer 303

npm update

npm -g update

Question 304

step/commands to add my own package to npm?

note: rewatch Mosh H Section 3 videos 38 and 39 Publishing a package and Updating a published package for review and more detail.

Answer 304

cd into the project folder

npm login (npm adduser if wanting to create an account via command line)

npm publish (project must have a unique name)

Question 305

What does REST stand for?

Answer 305

Representational State Transfer

Question 306

How can you set environment variables on Mac and on Windows? set PORT to 5000 as an expample.

Answer 306

for mac: export PORT=5000

for win: set PORT=5000

Question 307

given the route ‘http://somesite.com/api/:id/:classOf?hasDogs=yes?isGraduated=no’ what request object holds the id and classOf and what request object holds hasDogs and isGraduated.

Answer 307

req. params
req. query

Question 308

what does status 400 mean

Answer 308

Bad Request

Question 309

What does status 404 mean?

Answer 309

Resource not found

Question 311

how to designate a static folder in node.js

use the public folder which is nested in src from the root

a test file can be read using the following get call: http://localhost:3000/pubfiles/test.txt

Note/Reminder: the static method is always relative to the root of the app no matter where the call is made from.

Answer 311

app.use(‘/pubfiles’, express.static(‘src/public’))

Question 312

Express has a list of middleware that can be used with it.

You can find the list on Express’ website under Resources/Middleware

can view at https://expressjs.com/en/resources/middleware.html

Answer 312

reminder

Question 313

Setting env vars:

in bash shell you can call:

export to list all env vars

echo $SOME_VAR to print specific env variable

You can set env vars with: export SOME_VAR=”value” OR SOME_VAR=value (no command)

in Powershell use: $env:SOME_VAR=”production”

*IMPORTANT: These values will NOT persist across terminal sessions. It will only apply to the apps/server sessions running in that terminal window.

Best options for persistence or repeat use

script the var with a call to app: USER_ID=239482 USER_KEY=foobar node app.js

OR use a .env but without having to call dotenv in my code

create a .env file for the app

install dotenv

call a dotenv command line before running the app: node -r dotenv/config index.js

Answer 313

reminder

Question 314

creating application variables/config based on environment and are not highly secure(not passwords and such)

• npm install config
• create a folder called config in the root
• create JSON files with names that matches exactly to the NODE_ENV name that you have custom configs for.
• import config into any files where you need to pull values
• call config.get(‘property.anySubProperty.etc’)

Note there is an option to create a file called custom-environment-variables.json in this folder which allows you to map the environment variables to config.get() properties just using the environment variable name as the property value. no need to use process.env.VAR_NAME

The above is an easy way to read env variable. BUT it does not set env vars. You still set those using dotenv, command line, or hosted settings.

Answer 314

reminder

Question 315

module for debugging - cleaner alternative to console logging

• install debug
• const debugMode1 = require(‘debug’)(‘app:mode1’)
• const debugMode2 = require(‘debug’)(‘app:mode2’)
• const someOtherDebugger = require(‘debug’)(‘other:debugSomething’)
• wherever I want to console log something related to a debug use:
  
  • debugMode1(‘Print some message/log related to debug Mode1’)
• set a DEBUG environment variable with the instance of debug you want to run:
  
  • i.e. DEBUG=app:mode1
• start the app like normal with the new environment variable OR set the env variable with the startup command.

Note you can run multiple debug instances with DEBUG=app:mode1,app:mode2,etc OR DEBUG=app:*

Answer 315

reminder

Question 316

How would you incorporate the pug templating engine

change the default root views folder to src/views

and

return a pug template as HTML response on the /test route

Answer 316

• app.set(‘view engine’, ‘pug’)
• app.set(‘views’, ‘./src/views’)
• create a .pug template file in the views path using pug syntax (ie index.pug)
• app.get(‘/’, (req, res) => {
  
  • //any code
  • res.render(‘index’, { pugTemplateVar1: ‘some value’, pugVar2: ‘some val’, etc…})
• })

Question 317

In javascript you can reuse the same function name in the same scope, as long as the functions have a different number of parameters.

you can even call the alternate signature within the function.

Answer 317

reminder

Question 320

What are the schema types available for mongoose?

Answer 320

String

Number

Date

Buffer

Boolean

ObjectID

Array

Question 321

Installing and setup steps for MongoDb locally.

Install MSI’s for MongoDB community, Mongo Shell, Mongo Tools, and Mongo Compass

Append the folder path for mongo.exe to the PATH System environment variable (this is just so you don’t have to move to this path in order to run mongo on the command line)

Make sure MongoDB is running in Services

When connecting you may need to use the 127.0.0.1:27017 instead of localhost

Answer 321

reminder

Question 322

What are 8 comparison Operators in mongoose along with their meaning

reminder: these operators will be prefixed with $ during use.

Answer 322

eq (equal)

ne (not equal)

gt (greater than)

gte (greater than or equal to)

lt (less than)

lte (less than or equal to)

in (in)

nin (not in)

Question 324

What are the 3 types of app Tests and their general meanings?

Answer 324

Unit Tests: Testing units of the app withOUT EXTERNAL dependencies

Integration Tests: Testing application WITH EXTERNAL dependencies

End to End Tests: Testing multiple units (ie classes) of an application together or as a whole. Another example is using selenium to automate a user interface test.

Question 325

in Jest, what is the difference between using the method .toBe() vs .toEqual()

Answer 325

toBe will compare reference variables by reference as where toEqual will compare reference objects by their contained values.

Question 326

for config.js what file name do you use for the config file that has global env settings. ie matches/pulls process.env values by property value name into the config object, no mater what NODE_ENV your in.

Answer 326

custom-environment-variables.json

Question 327

1 What is the command to install the Nest CLI

2 What is the command to start a nest project?

Answer 327

1. npm install -g @nestjs/cli
2. nest new pathName

Question 328

What are the 7 primative types in Typescript

Answer 328

string, number, boolean, null, undefined, void, symbol

Question 329

What are the 4 object types in typescript?

Answer 329

functions, arrays, classes, and objects

Question 330

A typescript object that is an array with a fixed structure. It resembles an object structure without property names by defining the value type of each index.

ie const pepsi: [string, boolean, number] = [‘brown’, true, 40]

index 0 represents the color of the drink

index 1 represents whether the drink is carbonated

index 2 represents the number of carbs

Answer 330

Tuple

Question 331

How can you predefine a tuple structure for reuse when defining them.

Answer 331

type SomeStructure = [string, boolean, boolean, etcetera]

Question 332

An interface (in Typescript) is a way to define an Object type. objects that receive an interface type are required to have all the properties of that interface. Not less, but the objects are allowed to have more properties.

Important note: With an object that has more properties than is defined in its interface, those additional properties become private inside the object. Basically, you cannot read any of the additional properties, only other properties inside the object can use these extra values using the ‘this’ keyword.

The above applies to function parameters that take an object based on an interface type. If you apply an interface to an instance of an object it will restrict you to only define properties that match the interface.

Answer 332

reminder

Question 333

What do the modifiers private, protected, and public mean added to methods on a class?

Extra Note1: the child class can’t escalate the protection level up from that assigned in the parent.

Extra Note 2: If you add modifiers to the parameters in the constructor of a class, you do not need to set a ‘this’ property nor initialize the variable. Also, the same type of protection levels apply.

Answer 333

Private means the method can only be used within the class

Protected means the method can only be used in the parent and it’s child classes.

Public is default and means that the method can be used anywhere outside the class.

Question 334

In classes that extend from a parent that takes initial values, you only need to call super if you need to define the constructor method to add additional parameters on the child class.

Basicallically, you don’t need to generate a constructor at all, as the constructor from the parent is called by default. But once you add a constructor for other reasons, the parent must be initialized by super.

Answer 334

reminder

Question 335

What is a good website to get a list of ascii character info

Answer 335

www.asciitable.com

Question 336

What are the two Type Guard opperators and the value types that each applies to (in a type guard role)?

Answer 336

typeof for string, boolean, number, symbol

instance of for every other value created with a constructor

Question 337

To setup c# development in VS Code, you must:

Install the .Net SDK

Install the C# extension in VSCode

For .net 6 you need to add a setting to VS Code settings: “omnisharp.useModernNet”: true

Answer 337

reminder

Question 338

To start a c# program in vscode.

to create project in current folder, run: dotnet new [type of project]

to get a list of project types, run: dotnet new -l

after creating project, if not promoted, go to command pallet and search for .Net Generate assets for build and debug, to add debugging files.

To run the project: dotnet run

Answer 338

reminder