Front End

Question 1

What is the DOM

Answer 1

Document Object Model

• It’s a programming interface that represents the web page as nodes and takes the raw HTMl and JS to represent the page state.
• The nodes can then be manipulated through JS (ex: event listeners)
• DOM is not a language
• Makes structural representation of the webpage language agnostic w/ consistent API

Question 2

What is CORS?

Answer 2

Cross origin resource sharing

CORS is mechanism where additional HTTP requests are made to access resources on another domain than the current site.

For security, browsers restrict HTTP requests initiated from within scripts.

CORS headers must be used to get around this.

Could maybe learn deeper on security risks and mitigation measures built into browsers.

Question 3

Media Queries

Answer 3

A useful tool for when you want to apply css selectively based on the device the site is being viewed on.

ex:
@media screen and (min-width: 30em) and (orientation: landscape) { … }

ex2:
@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

ex3:
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;} ... etc
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;} ... etc
}

reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Question 4

Isomorphic rendering

Answer 4

In short it refers to the ability to render both on the backend and front end (individually)

In an isomorphic application, the first request made by the web browser is processed by the server while subsequent requests are processed by the client.

Question 5

Virtual DOM

Answer 5

Used in react and is compared to actual DOM state to force a re-render. (Local, simplified version of the DOM allowing it to be faster than actual DOM manipulations)

Add more!

Question 6

React element

Answer 6

This is what a react component is converted to for insertion into the virtual DOM.

Question 7

React Components

Answer 7

Components can just be thought of as javascript that produces html. (like jsx)

Question 8

Block-level element

Answer 8

Block level elements begin on new lines.

May contain inline elements and other block elements.

ex:

<p>a paragraph is a kind of block</p>

Question 9

Inline element

Answer 9

Only occupies the the “space” within the tags they are bound. Does not contain other elements either.

ex:
<span>spans are inline</span>

inline styling is somewhat frowned upon…

Question 10

What is a declarative programming?

Answer 10

SQL ,HTML, and CSS are declarative languages.

Like functional programming, there are no side-effects.

Any style of programming that is not imperative.

Declarative programming describe the desired results without listing the steps that must be performed to reach those results.

More of a WHAT rather than a HOW.

**Most declarative solutions are an abstraction over some imperative implementation.

Question 11

React - App.js

AND functional component vs. class component

Answer 11

import React from ‘react’;
import {component} from ‘react’;

export default class App extends Component {
    render() {
        return (
            <div>Sample contents!</div>
        )
    }
}

ORRR

import React from ‘react’;

(CLASS BASED component)
class App extends React.Component {
const App = () => (
    render() (
        <div>Stuff.</div>
    )
}

(functional component)
const App = () => (
<div>Stuff.</div>
)

export default App;

Note:
React needs to be imported because js conversion uses React.createElement….

Question 12

how to access contents in event handler function (ex: input text)?

Answer 12

class Example extends React.Component {
   render() (

)
}

handleInputChange(e) {
console.log(e.target.value);
}

WITH STATE:

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { term: "" };
    }   

render() (
    this.setState({term: e.target.value})} />    ) }

Question 13

controlled component

Answer 13

A component that takes it’s value from the state.

example:

render() (
    this.setState({term: 
       e.target.value})} />    )

in this case, input is a controlled component since it takes its value from the state!

Note:
This is an example of declarative code.

Question 14

es6 shorthand for when key and property have the same name?

Answer 14

ex:
video => this.setState({video: video})

can be rewritten as:
video => this.setState({video})

ex2:
const VideoListItem = (props) => {
    const video = props.video;

return <li>Whatever you want.</li> }

CAN BE REWRITTEN

const VideoListItem = ({video}) => {
    //note that props is still being passed in

return <li>Whatever you want.</li> }

Question 15

Pass down callbacks as props in React

Answer 15

You can pass a function as a prop in order to collect a “selection” from a child component for the purpose of updating the parent and/or sibling component

AKA threading methods/functions

Question 16

How to throttle a search?

Answer 16

You can use lodash:debounce!

npm install lodash
import lodash into component

ex:
const videoSearch = _.debounce( term => {this.videoSearch(term)}, 300 );

//once every 300ms this will run (won’t search while changes of state happen unless 300ms pause)

Question 17

What is Redux and why?

Answer 17

Redux manages the front-end data. (state container)

Difference from other frameworks. CENTRALIZED STORE aka application level state

Reduz is built off of Flux.

Question 18

What is a Reducer?

Answer 18

A part of the redux framework. Just a function that returns a piece of state. Produces a value for a state key.

ex: 
//root reducer
import {combineReducers} from 'redux';
import BooksReducer from './books_reducer'

const rootReducer = combineReducer({
    book: BooksReducer
});

ex specific reducer:

const ReviewReducer = (state = [], action) => { 
    Object.freeze(state);
    let newstate = Object.assign({}, state); //creates a dup

    switch (action.type) {
        case RECEIVE_REVIEW:
            newstate[action.review.id] = action.review   
            return newstate;
        default:
            return state;
    }
}

Question 19

What are containers?

Answer 19

Containers are given to us from react-redux and provide data from redux to react components.

containers and related components are considered “smart components”

uses the connect function!

ex:
import {connect} from ‘react-redux’;

function mapStateToProps(state) {
    return {
        books: state.books
    }
}

const mapDispatchToProps = (dispatch) => ….

export default connect(mapStateToProps, mapDispatchToProps)(Booklist);
//booklist is a container component

Question 20

Actions/action creators and redux flow.

Answer 20

User does something -> Action Creator -> Action object is created and sent to Reducer -> Reducer returns a certain slice of state -> goes into Applications state and causes re-render

Question 21

CSS variables

Answer 21

You declare variables on an element.

ex:
\:root {
    --base: #ffc600;
    --spacing: 10px;     
}

Question 22

CSS variables

Answer 22

You declare variables on an element.

ex:

:root {
    --base: #ffc600;
    --spacing: 10px;     
}

img {
    padding: var(--spacing)
}

    function handleUpdate() {
        const suffix = this.dataset.sizing || '';
        document.documentElement.style.setProperty(`--$(this.name}`. this.value + suffix);   
    }