Front End

Question 1

Inline vs inline-block

Answer 1

Inline-block allows us to set width and height as if the element was of block display. Inline elements don’t have this ability

Question 2

What must an element have in order for margin: auto; to work?

Answer 2

It must have a set width

Question 3

What is an element’s default position?

Answer 3

Static

Question 4

If an element is given position: relative; what is it relative to?

Answer 4

Its default static position

Question 5

What does confirm(“whatever”) return?

Answer 5

A boolean

Question 6

What does prompt(“question”) return?

Answer 6

A string

Question 7

What does alert(“message”) return?

Answer 7

nothing

Question 8

If the script tag is in the head how do you make it work?

Answer 8

You add the keyword defer

Question 9

How do you select the immediate p child of a div?

Answer 9

div > p this is called a child combinator

Question 10

How do you select a p that is next to a div?

Answer 10

div + p this is called an adjacent sibling combinator

Question 11

How do you select all even li?

Answer 11

li:nth-child(even)

Question 12

What does git clean -xdf do?

Answer 12

Removes files not tracked by git (I think)

Question 13

How do you select all p siblings of a div?

Answer 13

div ~ p General sibling combinator

Question 14

How do you select list items with a class of “a” which are direct children of a <ul>?

Answer 14

ul > li[class=”a”]

Question 15

What’s the difference between parseInt() and Number()?

Answer 15

parseInt() evaluates the argument upto the first non digit character in the string passed in. Number takes the whole argument and tries to convert that. Also parseInt takes the radix as the second argument

Question 16

What are pseudo classes?

Answer 16

They are keywords added to a selector; ex. a:hover that specify a special state

Question 17

What are attribute selectors?

Answer 17

They match elements based on the presence of value of a particular attribute; ex. a[href=”www.fava.com”]

Question 18

How do you place the cursor in vscode at the same point on three different lines vertically stacked?

Answer 18

option shift click

Question 19

What is the difference between container and container-fluid?

Answer 19

container-fluid continuously resizes, never leaving empty space. container will resize at certain points

Question 20

How do you use the content property in a css selector such as a:after?

Answer 20

It replaces an element with a generated value; ex.
a:before {
content: “⛅”;
}

Question 21

How do you store some value, say, string “count” to a num 5 in localStorage?

Answer 21

localStorage.setItem(“count”, 5);

Question 22

How can I read arguments passed to the program from node js?

Answer 22

process.argv
this returns an array
process.argv[2] returns the first argument
for instance
node app.js hello world would return ‘hello’

Question 23

What is fs?

Answer 23

It’s a library package for reading and writing files;
const fs = require(“fs”);
then you can use fs.readFile, fs.writeFile etc

Question 24

How do you create a Node.js project?

Answer 24

npm init -y

Question 25

What does npm init -y do?

Answer 25

It creates a Node.js project, it also creates a package.json file where the dependencies will be listed

Question 26

What happens when you install a package like npm i inquirer@^8.0.0?

Answer 26

The node_modules folder is created within the project and the package.json is moved into it. Another file, called package-lock.json, is also created inside this folder

Question 27

Describe inquirer.prompt()

Answer 27

inquirer.prompt() takes an array of objects, each object is a question. Each question has several optional properties: type, message and name, etc.
Ex:
inquirer.prompt([
{
type: “input”,
message: “what’s your name?”,
name: “username”
}
]

It returns a promise object so it’s thenable.
.then(response) is chained.
the response is an object that looks like this:
{username: “whatever you typed”}
In essence, the object will contain the properties referenced by name, in this case just “username”.

Question 28

What’s the difference between rest and spread operators?

Answer 28

the spread operator takes the contents of an array and spreads them in another array:

const a = [1,2,3];
const b = [3,4,5];
const c = […a, …b];
console.log(c); // [1,2,3,4,5,6]

the rest parameter syntax allows a function to accept any number of arguments as an array

Question 29

How could you define “state” in React?

Answer 29

A Component’s memory

Question 30

What two things need to happen in React to re-render a component?

Answer 30

a- Retain the data
b- Trigger a re-render

Question 31

What does the useState Hook provide?

Answer 31

A state variable and a state setter function

Question 32

What are componentDidMount() and componentWillUnmount() called?

Answer 32

Lifecycle methods

Question 33

How do you create a variable ‘root’ into which to insert React elements?

Answer 33

const root = ReactDOM.createRoot(document.getElementById(‘root’));

Question 34

How do you add <Clock></Clock> to ‘root’?

Answer 34

root.render(<Clock></Clock>);

Question 35

What does <Navlink> do under the hood?</Navlink>

Answer 35

1 - event.preventDefault() so that the page doesn’t redirect
2 - sets the state, which then causes a re render

Question 36

The path in the ‘to’ of the <Navlink> must be the same as?</Navlink>

Answer 36

The value of ‘path’ in the <Route>
ex.</Route>

<NavLink></Navlink>
<Route path="about" element={<About></About>} />
</NavLink>

Question 37

What is an alternative syntax to this:
<Route path=”/” element={<Home></Home>} /> ?

Answer 37

Warning: this may be deprecated

<Route>
<Home></Home>
</Route>

Question 38

What are the three steps when writing a test?

Answer 38

Arrange, act, assert

Question 39

What does this React shortcut do?
div.mb-3>label.form-label+input.form-control

Answer 39

It creates a div with the margin bottom of 3 (bootstrap class). Inside of it the label with form-label as class and next to that the input with form-control class

Question 40

What is a handy shortcut to check if an obj called errors has a name AND a type property?

Answer 40

errors.name?.type
this is called optional chaining

Question 41

Say ‘categories’ in this code:
<option></option>
{categories.map((category, index) => (
<option key={index} value={category}>
{category}
</option>
))}
isn’t yet imported, how do you do it quickly?

Answer 41

option and . while cursor is on ‘categories’

Question 42

What is z.enum() ?

Answer 42

One of many values. I imagine they are passed in as an array