Front End Flashcards
Inline vs inline-block
Inline-block allows us to set width and height as if the element was of block display. Inline elements don’t have this ability
What must an element have in order for margin: auto; to work?
It must have a set width
What is an element’s default position?
Static
If an element is given position: relative; what is it relative to?
Its default static position
What does confirm(“whatever”) return?
A boolean
What does prompt(“question”) return?
A string
What does alert(“message”) return?
nothing
If the script tag is in the head how do you make it work?
You add the keyword defer
How do you select the immediate p child of a div?
div > p this is called a child combinator
How do you select a p that is next to a div?
div + p this is called an adjacent sibling combinator
How do you select all even li?
li:nth-child(even)
What does git clean -xdf do?
Removes files not tracked by git (I think)
How do you select all p siblings of a div?
div ~ p General sibling combinator
How do you select list items with a class of “a” which are direct children of a <ul>?
ul > li[class=”a”]
What’s the difference between parseInt() and Number()?
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
What are pseudo classes?
They are keywords added to a selector; ex. a:hover that specify a special state
What are attribute selectors?
They match elements based on the presence of value of a particular attribute; ex. a[href=”www.fava.com”]
How do you place the cursor in vscode at the same point on three different lines vertically stacked?
option shift click
What is the difference between container and container-fluid?
container-fluid continuously resizes, never leaving empty space. container will resize at certain points
How do you use the content property in a css selector such as a:after?
It replaces an element with a generated value; ex.
a:before {
content: “⛅”;
}
How do you store some value, say, string “count” to a num 5 in localStorage?
localStorage.setItem(“count”, 5);
How can I read arguments passed to the program from node js?
process.argv
this returns an array
process.argv[2] returns the first argument
for instance
node app.js hello world would return ‘hello’
What is fs?
It’s a library package for reading and writing files;
const fs = require(“fs”);
then you can use fs.readFile, fs.writeFile etc
How do you create a Node.js project?
npm init -y
What does npm init -y do?
It creates a Node.js project, it also creates a package.json file where the dependencies will be listed
What happens when you install a package like npm i inquirer@^8.0.0?
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
Describe inquirer.prompt()
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”.
What’s the difference between rest and spread operators?
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
How could you define “state” in React?
A Component’s memory
What two things need to happen in React to re-render a component?
a- Retain the data
b- Trigger a re-render
What does the useState Hook provide?
A state variable and a state setter function
What are componentDidMount() and componentWillUnmount() called?
Lifecycle methods
How do you create a variable ‘root’ into which to insert React elements?
const root = ReactDOM.createRoot(document.getElementById(‘root’));
How do you add <Clock></Clock> to ‘root’?
root.render(<Clock></Clock>);
What does <Navlink> do under the hood?</Navlink>
1 - event.preventDefault() so that the page doesn’t redirect
2 - sets the state, which then causes a re render
The path in the ‘to’ of the <Navlink> must be the same as?</Navlink>
The value of ‘path’ in the <Route>
ex.</Route>
<NavLink></Navlink>
<Route path="about" element={<About></About>} />
</NavLink>
What is an alternative syntax to this:
<Route path=”/” element={<Home></Home>} /> ?
Warning: this may be deprecated
<Route>
<Home></Home>
</Route>
What are the three steps when writing a test?
Arrange, act, assert
What does this React shortcut do?
div.mb-3>label.form-label+input.form-control
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
What is a handy shortcut to check if an obj called errors has a name AND a type property?
errors.name?.type
this is called optional chaining
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?
option and . while cursor is on ‘categories’
What is z.enum() ?
One of many values. I imagine they are passed in as an array
