Frontend Notes

frontend-notes.md

CSS Notes

Box Model

• Every element has a box around it. Display, margin, border and padding affect the behaviour of the box

Display

• Changing the value of the display property can change whether the outer display type of a box is block or inline. This changes the way it displays alongside other elements in the layout.
• Flex and Grid (display: flex and display: grid) are used to affect the contents
• Block and inline
  • If an element is given block display, then it has a newline before and after it (it starts in a new line).
  • If an element has inline used, then it is present in the same line. inline-flex causes the elements to be inline and also in flex

Box Model Image
(1) : Shows block display
(2) : Shows inline-flex display
(3) : Shows inline display

For span and inline elements top and bottom properties (height, margin-top/bottom, etc) do not have any effect.

Other properties

• margin: distance between the container's border to the objecct's border
• padding: distance between the object's border and the object content
• border: width of the elemen'ts border.

Flex Model

• Flex is one dimensional positioning.

Object

• flex-direction (row/column) determines the direction of the flex.
• flex-wrap determines if wrap will be there.
• flex-grow : <number> proportion of the size that the element takees space

Item

• flex : <number> determines the proportion of size. (For 4 elements, with number 2 will take 2/(1 + 1 + 1 + 2) = 2/5th of the space.

article {
  flex: 1 200px;
}

• align-items: Where the children times are aligned (vertically - start (top) or end (9bottom)) [object]
• align-self: Where the chiild is aligned vertically [item]
• justify-content : Where the chiildren align horizontally [object]
• order: Order of the child [item]

The justify-items property is ignored in flexbox layouts.

Positioning

Positions offered :

div {
  position: static; /* default */
  position: relative;
  position: absolute;
  position: fixed;
  position: inherit; /* Not very common */
}

Relative : Allows 2 things

• To nudge elements in different directions with top, right, bottom and left values. (The objects takes it original space but it looks as though moved to another place from there)

  

• Allow a child element to be positioned absolutely with reference to it.

Absolute

• Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does.
• When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.

If there are no parent elements that has a relative position, then the absolutely positioned element will take its reference from the browser window.

Fixed

Similar to position absolute, an element that has fixed position is taken out of the document flow. The major difference is: elements with position fixed is always positioned relative to the browser window.

Reference : https://zellwk.com/blog/css-positions/

react-nodes.md

Notes to self for CSS and React experience :

• For grid columns use grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); This will automatically fill the grids with appropriate number of columns. Checkout auto-fill and auto-fit for this property Source : https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

• Wrap async function into promise wrappers for better handling of errors :

const FetchTemplates = (props) => {
  return new Promise(async (resolve, reject) => {
    // contents

    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        token: props.token,
        // options
      }),
    };

    try {
      const response = await fetch(
        "<URL>",
        options
      );
      if (response.status >= 200 && response.status < 300) {
        const data = await response.json();
        // handle data
        resolve(data);
      } else {
        reject(new Error(`HTTP Error ${response.status}`));
      }
    } catch (error) {
      // log error and handle it
      reject(error);
    }
  });
};

• use context API (useContext, createContext) for Authentication and route protection Remember how it is passed, else you may waste time on debuggingg undefined values :

const DashboardContext = createContext({});

const MyComponent = () => {
    return (
        <DashboardContext.Provider
      value={{ pdfList, setPdfList, addPdfModal, setAddPdfModal }}
    >
    // rest of content
    </DashboardContext.Provider>
    );
}

• remember that wheh you check for events like onClick and onSubmit from elements, keep a ref on the target element. The value / id or anything you set on the element can be used to get it's value. Also when passing the function to the handler, use useCallback functions and DO NOT DO THIS :

<form onSubmit={(e) => handleSubmit(e)}    >       // Don't do this
<form onSubmit={handleSubmit} >        // Do this and check for e on the callback.

• remember the element that is absoolute is positioned relatively to the nearest parent node that is relative