All Of My Articles Part 2
Published: 2021-08-25 00:15:01

# CSS Interview Prep Quiz

Plus Css Cheat Sheet (82 questions total)

---

### CSS Interview Prep Quiz

#### Plus Css Cheat Sheet (82 questions total)

> Scroll Down To skip to quiz:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*3qTmnYskDL2PrW06.jpg" class="graf-image" /></figure>### Source:

#### <a href="https://websitesetup.org/css3-cheat-sheet/" class="markup--anchor markup--h4-anchor">Complete CSS Cheat Sheet</a>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*aahUgWrL4_5GILfw.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*2PQgJNqe_nP6lWnz.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*lOzM74JQovP54m_v.png" class="graf-image" /></figure>#### Q1. In the following example, which selector has the highest specificity ranking for selecting the anchor link element?

    ul li a
    a
    .example a
    div a

- <span id="8dcb">\[x\] `.example a`</span>
- <span id="37da">\[ \] `div a`</span>
- <span id="09ae">\[ \] `a`</span>
- <span id="a2d4">\[ \] `ul li a`</span>

#### Q2. Using an attribute selector, how would you select an `<a>` element with a "title" attribute?

- <span id="558d">\[x\] a\[title\]{…}</span>
- <span id="768a">\[ \] a &gt; title {…}</span>
- <span id="395f">\[ \] a.title {…}</span>
- <span id="d6fa">\[ \] a=title {…}</span>

#### Q3. CSS grid and flexbox are now becoming a more popular way to create page layouts. However, floats are still commonly used, especially when working with an older code base, or it you need to support older browser version. What are two valid techniques used to clear floats?

- <span id="2ea7">\[ \] Use the “clearfix hack” on the floated element and add a float to the parent element.</span>
- <span id="53b9">\[ \] Use the overflow property on the floated element or the “clearfix hack” on either the floated or parent element.</span>
- <span id="0f0b">\[ \] Use the “clearfix hack” on the floated element or the overflow property on the parent element.</span>
- <span id="3558">\[x\] Use the “clearfix hack” on the parent element or use the overflow property with a value other than “visible.”</span>

#### Q4. What element(s) do the following selectors match to?

`1) .nav {...}` `2) nav {...}` `3) #nav {...}`

- <span id="59b9">\[ \]</span>

<!-- -->

    1. An element with an ID of "nav"
    2. A nav element
    3. An element with a class of "nav"

- <span id="2ddd">\[ \]</span>

<!-- -->

    They all target the same nav element.

- <span id="1b5d">\[x\]</span>

<!-- -->

    1. An element with an class of "nav"
    2. A nav element
    3. An element with a id of "nav"

- <span id="7558">\[ \]</span>

<!-- -->

    1. An element with an class of "nav"
    2. A nav element
    3. An div with a id of "nav"

#### Q5. When adding transparency styles, what is the difference between using the opacity property versus the background property with an `rgba()` value?

- <span id="1ed9">\[ \] Opacity specifies the level of transparency of the child elements. Background with an `rgba()` value applies transparency to the background color only.</span>
- <span id="f371">\[ \] Opacity applies transparency to the background color only. Background with an `rgba()` value specifies the level of transparency of an element, as a whole, including its content.</span>
- <span id="bb37">\[x\] Opacity specifies the level of transparency of an element, including its content. Background with an `rgba()` value applies transparency to the background color only.</span>
- <span id="4dcd">\[ \] Opacity applies transparency to the parent and child elements. Background with an `rgba()` value specifies the level of transparency of the parent element only.</span>

#### Q6. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?)

- <span id="c7aa">\[ \] By default, block elements are the same height and width as the content container between their tags; inline elements span the entire width of its container.</span>
- <span id="a457">\[x\] By default, block elements span the entire width of its container; inline elements are the same height and width as the content contained between their tags.</span>
- <span id="4df6">\[ \] A `<nav>` element is an example of an inline element. `<header>` is an example of a block element.</span>
- <span id="15e8">\[ \] A `<span>` is an example of a block element. `<div>` is an example of an inline element.</span>

#### Q7. CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?

    .grid {
      display: grid;
      width: 500px;
      grid-template-columns: 50px 1fr 2fr;
    }

- <span id="517b">\[ \] The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.</span>
- <span id="c350">\[x\] The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.</span>
- <span id="5495">\[ \] The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.</span>
- <span id="58be">\[ \] The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.</span>

#### Q8. What is the line-height property primarily used for?

- <span id="f5fb">\[x\] to control the height of the space between two lines of content</span>
- <span id="03a3">\[ \] to control the height of the space between heading elements</span>
- <span id="67d7">\[ \] to control the height of the character size</span>
- <span id="7238">\[ \] to control the width of the space between characters</span>

#### Q9. Three of these choices are true about class selectors. Which is NOT true?

- <span id="20d4">\[ \] Multiple classes can be used within the same element.</span>
- <span id="c4b6">\[ \] The same class can be used multiple times per page.</span>
- <span id="b46b">\[ \] Class selectors with a leading period</span>
- <span id="b01a">\[x\] Classes can be used multiple times per page but not within the same element.</span>

#### Q10. There are many properties that can be used to align elements and create page layouts such as float, position, flexbox and grid. Of these four properties, which one should be used to align a global navigation bar which stays fixed at the top of the page?

- <span id="f95e">\[x\] position</span>
- <span id="6b6c">\[ \] flexbox</span>
- <span id="f283">\[ \] grid</span>
- <span id="e4ae">\[ \] float</span>

#### Q11. In the shorthand example below, which individual background properties are represented?

`background: blue url(image.jpg) no-repeat scroll 0px 0px;`

- <span id="ad35">\[x\]</span>

<!-- -->

    background-color: blue;
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0px 0px;

- <span id="b674">\[ \]</span>

<!-- -->

    background-color: blue;
    background-img: url(image.jpg);
    background-position: no-repeat;
    background-scroll: scroll;
    background-size: 0px 0px;

- <span id="da6f">\[ \]</span>

<!-- -->

    background-color: blue;
    background-src: url(image.jpg);
    background-repeat: no-repeat;
    background-wrap: scroll;
    background-position: 0px 0px;

- <span id="e005">\[ \]</span>

<!-- -->

    background-color: blue;
    background-src: url(image.jpg);
    background-repeat: no-repeat;
    background-scroll: scroll;
    background-position: 0px 0px;

#### Q12. In the following example, according to cascading and specificity rules, what color will the link be?

    .example {
      color: yellow;
    }
    ul li a {
      color: blue;
    }
    ul a {
      color: green;
    }
    a {
      color: red;
    }

    <ul>
      <li><a href="#" class="example">link</a></li>
      <li>list item</li>
      <li>list item</li>
    </ul>

- <span id="afd9">\[ \] green</span>
- <span id="f3bd">\[x\] yellow</span>
- <span id="85a8">\[ \] blue</span>
- <span id="d453">\[ \] red</span>

#### Q13. When elements overlap, they are ordered on the z-axis (i.e., which element covers another). The z-index property can be used to specify the z-order of overlapping elements. Which set of statements about the z-index property are true?

- <span id="9371">\[x\] Larger z-index values appear on top of elements with a lower z-index value. Negative and positive numbers can be used. z-index can only be used on positioned elements.</span>
- <span id="48a2">\[ \] Smaller z-index values appear on top of elements with a larger z-index value. Negative and positive numbers can be used. z-index must also be used with positioned elements.</span>
- <span id="8328">\[ \] Larger z-index values appear on top of elements with a lower z-index value. Only positive numbers can be used. z-index must also be used with positioned elements.</span>
- <span id="6f2e">\[ \] Smaller z-index values appear on top of elements with a larger z-index value. Negative and positive numbers can be used. z-index can be used with or without positioned elements.</span>

#### Q14. What is the difference between the following line-height settings?

    line-height: 20px
    line-height: 2

- <span id="96d7">\[x\] The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to twice the size of the corresponding font-size value.</span>
- <span id="ed5a">\[ \] The value of 20px will set the line-height to 20px. The value of 2 is not valid.</span>
- <span id="ed9d">\[ \] The value of 20px will set the line-height to 20px. The value of 2 will default to a value of 2px.</span>
- <span id="8591">\[ \] The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to 20% of the corresponding font-size value.</span>

#### Q15. In the following example, what color will paragraph one and paragraph two be? (Alternative: In this example, what color will paragraphs one and two be?)

    <section>
      <p>paragraph one</p>
    </section>

    <p>paragraph two</p>

    section p {
      color: red;
    }
    section + p {
      color: blue;
    }

- <span id="dd2a">\[ \] Paragraph one will be blue, paragraph two will be red.</span>
- <span id="3a7c">\[ \] Both paragraphs will be blue.</span>
- <span id="b3cf">\[x\] Paragraphs one will be red, paragraph two will be blue.</span>
- <span id="c825">\[ \] Both paragraphs will be red.</span>

#### Q16.What are three valid ways of adding CSS to an HTML page?

- <span id="4246">\[ \]</span>

<!-- -->

    1. External; CSS is written in a separate file.
    2. Inline; CSS is added to the <head> of the HTML page.
    3. Internal; CSS is included within the HTML tags.

- <span id="94e5">\[ \]</span>

<!-- -->

    1. External; CSS is written in a separate file and is linked within the <header> element of the HTML file.
    2. Inline; CSS is added to the HTML tag.
    3. Internal; CSS is included within the <header> element of the HTML file.

- <span id="e8e5">\[ \]</span>

<!-- -->

    1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
    2. Internal; CSS is included within the <header> element of the HTML file.
    3. Inline; CSS is added to the HTML tag.

- <span id="4992">\[x\]</span>

<!-- -->

    1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file .
    2. Inline; CSS is added to the HTML tag.
    3. Internal; CSS is included within the <head> element of the HTML file.

#### Q17. Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?)

- <span id="12ae">\[ \] CSS can be applied to SVGs but JavaScript cannot be.</span>
- <span id="c2ab">\[ \] SVGs work best for creating 3D graphics.</span>
- <span id="9ba2">\[x\] SVGs can be created as a vector graphic or coded using SVG specific elements such as &lt;svg&gt;, &lt;line&gt;, and &lt;ellipse&gt;.</span>
- <span id="c02b">\[ \] SVGs are a HAML-based markup language for creating vector graphics.</span>

#### Q18. In the example below, when will the color pink be applied to the anchor element?

    a:active {
      color: pink;
    }

- <span id="528b">\[ \] The color of the link will display as pink after its been clicked or if the mouse is hovering over the link.</span>
- <span id="43b3">\[ \] The color of the link will display as pink on mouse hover.</span>
- <span id="0448">\[x\] The color of the link will display as pink while the link is being clicked but before the mouse click is released.</span>
- <span id="45db">\[ \] The color of the link will display as pink before it has been clicked.</span>

#### Q19. To change the color of an SVG using CSS, which property is used?

- <span id="9f10">\[ \] Use background-fill to set the color inside the object and stroke or border to set the color of the border.</span>
- <span id="4955">\[ \] The color cannot be changed with CSS.</span>
- <span id="f7c0">\[ \] Use fill or background to set the color inside the object and stroke to set the color of the border.</span>
- <span id="724e">\[x\] Use fill to set the color inside the object and stroke to set the color of the border.</span>

#### Q20. When using position: fixed, what will the element always be positioned relative to?

- <span id="fe9c">\[ \] the closest element with position: relative</span>
- <span id="61e5">\[x\] the viewport</span>
- <span id="6260">\[ \] the parent element</span>
- <span id="50f0">\[ \] the wrapper element</span>

#### Q21. By default, a background image will repeat `\_\_\_`

- <span id="ff58">\[ \] only if the background-repeat property is set to repeat</span>
- <span id="e1f3">\[x\] indefinitely, vertically, and horizontally</span>
- <span id="c6c7">\[ \] indefinitely on the horizontal axis only</span>
- <span id="129a">\[ \] once, on the x and y axis</span>

#### Q22. When using media queries, media types are used to target a device category. Which choice lists current valid media types?

- <span id="8014">\[ \] print, screen, aural</span>
- <span id="3487">\[ \] print, screen, television</span>
- <span id="64a8">\[x\] print, screen, speech</span>
- <span id="73f7">\[ \] print, speech, device</span>

#### Q23. How would you make the first letter of every paragraph on the page red?

- <span id="7012">\[x\] p::first-letter { color: red; }</span>
- <span id="1b1b">\[ \] p:first-letter { color: red; }</span>
- <span id="c339">\[ \] first-letter::p { color: red; }</span>
- <span id="e2f8">\[ \] first-letter:p { color: red; }</span>

#### Q24. In this example, what is the selector, property, and value?

    p {
      color: #000000;
    }

- <span id="2d3c">\[ \]</span>

<!-- -->

    "p" is the selector
    "#000000" is the property
    "color" is the value

- <span id="eacd">\[x\]</span>

<!-- -->

    "p" is the selector
    "color" is the property
    "#000000" is the value

- <span id="b7d2">\[ \]</span>

<!-- -->

    "color" is the selector
    "#000000" is the property
    "#p" is the value

- <span id="d45e">\[ \]</span>

<!-- -->

    "color" is the selector
    "p" is the property
    "#000000" is the value

#### Q25. What is the rem unit based on?

- <span id="a6f1">\[ \] The rem unit is relative to the font-size of the p element.</span>
- <span id="ef56">\[ \] You have to set the value for the rem unit by writing a declaration such as rem { font-size: 1 Spx; }</span>
- <span id="0f15">\[ \] The rem unit is relative to the font-size of the containing (parent) element.</span>
- <span id="932b">\[x\] The rem unit is relative to the font-size of the root element of the page.</span>

#### Q26.Which of these would give a block element rounded corners?

- <span id="6abe">\[ \] corner-curve: 10px</span>
- <span id="30ca">\[ \] border-corner: 10px</span>
- <span id="942b">\[x\] border-radius: 10px</span>
- <span id="f0c6">\[ \] corner-radius: 10px</span>

#### Q27. In the following media query example, what conditions are being targeted?

    @media (min-width: 1024px), screen and (orientation: landscape) { … }

- <span id="1c01">\[x\] The rule will apply to a device that has either a width of 1024px or wider, or is a screen device in landscape mode.</span>
- <span id="4328">\[ \] The rule will apply to a device that has a width of 1024px or narrower and is a screen device in landscape mode.</span>
- <span id="09e2">\[ \] The rule will apply to a device that has a width of 1024px or wider and is a screen device in landscape mode.</span>
- <span id="0a5b">\[ \] The rule will apply to a device that has a width of 1024px or narrower, or is a screen device in landscape mode.</span>

#### Q28. CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element’s transformation origin. By default, what is the location of the origin?

- <span id="436c">\[x\] the top left corner of the element</span>
- <span id="2269">\[ \] the center of the element</span>
- <span id="15a2">\[ \] the top right corner of the element</span>
- <span id="c037">\[ \] the bottom left of the element</span>

#### Q29. Which of the following is not a valid color value?

- <span id="1101">\[ \] color: \#000</span>
- <span id="3038">\[ \] color: rgb(0,0,0)</span>
- <span id="f7d6">\[ \] color: \#000000</span>
- <span id="5eff">\[x\] color: 000000</span>

#### Q30. What is the vertical gap between the two elements below?

    <div style="margin-bottom: 2rem;">Div 1</div>
    <div style="margin-top: 2rem;">Div 2</div>

- <span id="05d8">\[x\] 2rem</span>
- <span id="1af6">\[ \] 32px</span>
- <span id="df6e">\[ \] 64px</span>
- <span id="5ba6">\[ \] 4rem</span>

#### Q31. When using the Flexbox method, what property and value is used to display flex items in a column?

- <span id="8f2e">\[x\] flex-flow: column; or flex-direction: column</span>
- <span id="788e">\[ \] flex-flow: column;</span>
- <span id="6fbe">\[ \] flex-column: auto;</span>
- <span id="3a1a">\[ \] flex-direction: column;</span>

#### Q32. Which type of declaration will take precedence?

- <span id="c09f">\[ \] any declarations in user-agent stylesheets</span>
- <span id="ccd0">\[x\] important declarations in user stylesheets</span>
- <span id="4014">\[ \] normal declarations in author stylesheets</span>
- <span id="f49d">\[ \] important declarations in author stylesheets</span>

#### Q33. The flex-direction property is used to specify the direction that flex items are displayed. What are the values used to specify the direction of the items in the following examples?

- <span id="b727">\[x\] Example 1: `flex-direction: row;` Example 2: `flex-direction: row-reverse;` Example 3: `flex-direction: column;` Example 4: `flex-direction: column-reverse;`</span>
- <span id="078d">\[ \] Example 1: `flex-direction: row-reverse;` Example 2: `flex-direction: row;` Example 3: `flex-direction: column-reverse;` Example 4: `flex-direction: column;`</span>
- <span id="e098">\[ \] Example 1: `flex-direction: row;` Example 2: `flex-direction: row-reverse;` Example 3: `flex-direction: column;` Example 4: `flex-direction: reverse-column;`</span>
- <span id="483c">\[ \] Example 1: `flex-direction: column;` Example 2: `flex-direction: column-reverse;` Example 3: `flex-direction: row;` Example 4: `flex-direction: row-reverse;`</span>

#### Q34. There are two sibling combinators that can be used to select elements contained within the same parent element; the general sibling combinator (~) and the adjacent sibling combinator (+). Referring to example below, which elements will the styles be applied to?

    h2 ~ p {
      color: blue;
    }
    h2 + p {
      background: beige;
    }

    <section>
      <p>paragraph 1</p>
      <h2>Heading</h2>
      <p>paragraph 2</p>
      <p>paragraph 3</p>
    </section>

- <span id="f0c8">\[ \] Paragraphs 2 and 3 will be blue. The h2 and paragraph 2 will have a beige background.</span>
- <span id="133d">\[x\] Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background.</span>
- <span id="0eb4">\[x\] Paragraphs 2 and 3 will be blue. Paragraph 2 will have a beige background.</span>
- <span id="e353">\[ \] Paragraph 2 will be blue. Paragraphs 2 and 3 will have a beige background.</span>

#### Q35. When using flexbox, the “justify-content” property can be used to distribute the space between the flex items along the main axis. Which value should be used to evenly distribute the flex items within the container shown below?

- <span id="cd2a">\[x\] justify-content: space-around;</span>
- <span id="bd21">\[ \] justify-content: center;</span>
- <span id="e2ab">\[ \] justify-content: auto;</span>
- <span id="9336">\[ \] justify-content: space-between;</span>

#### Q36. There are many advantages to using icon fonts. What is one of those advantages?

- <span id="b199">\[ \] Icon fonts increase accessibility.</span>
- <span id="d2bb">\[ \] Icon fonts can be used to replace custom fonts.</span>
- <span id="f602">\[x\] Icon fonts can be styled with typography related properties such as font-size and color.</span>
- <span id="06c5">\[ \] Icon fonts are also web safe fonts.</span>

#### Q37. What is the difference between `display:none` and `visibility:hidden`?

- <span id="07a0">\[ \] Both will hide the element on the page, but display:none has greater browser support. visibility:hidden is a new property and does not have the best browser support</span>
- <span id="6e5c">\[ \] display:none hides the elements but maintains the space it previously occupied. visibility:hidden will hide the element from view and remove it from the normal flow of the document</span>
- <span id="9b7b">\[x\] display:none hides the element from view and removes it from the normal flow of the document. visibility:hidden will hide the element but maintains the space it previously occupied.</span>
- <span id="b618">\[ \] There is no difference; both will hide the element on the page</span>

#### Q38. What selector and property would you use to scale an element to be 50% smaller on hover?

- <span id="6075">\[ \] element:hover {scale: 0.5;}</span>
- <span id="b4b8">\[x\] element:hover {transform: scale(0.5);}</span>
- <span id="766f">\[ \] element:hover {scale: 50%;}</span>
- <span id="1631">\[ \] element:hover {transform: scale(50%);}</span>

#### Q39. Which statement regarding icon fonts is true?

- <span id="e052">\[ \] Icon fonts can be inserted only using JavaScript.</span>
- <span id="3a2f">\[ \] Icon fonts are inserted as inline images.</span>
- <span id="7abf">\[ \] Icon fonts require browser extensions.</span>
- <span id="3e84">\[x\] Icon fonts can be styled with typography-related properties such as font-size and color.</span>

#### Q40. The values for the font-weight property can be keywords or numbers. For each numbered value below, what is the associated keyword?

`font-weight: 400; font-weight: 700;`

- <span id="93d9">\[ \] bold; normal</span>
- <span id="e81b">\[x\] normal; bold</span>
- <span id="6844">\[ \] light; normal</span>
- <span id="a658">\[ \] normal; bolder</span>

#### Q41. If the width of the container is 500 pixels, what would the width of the three columns be in this layout?

`.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }`

- <span id="6c18">\[x\] 50px, 150px, 300px</span>
- <span id="feee">\[ \] 50px, 200px, 300px</span>
- <span id="be1e">\[ \] 50px, 100px, 200px</span>
- <span id="2d94">\[ \] 50px, 50px, 100px</span>

#### Q42. Using the :nth-child pseudo class, what would be the most efficient way to style every third item in a list, no matter how many items are present, starting with item 2?

- <span id="d0e6">\[ \]</span>

<!-- -->

    li:nth-child(3 + 2n) {
      margin: 0 5 px;
    }

- <span id="92af">\[x\]</span>

<!-- -->

    li:nth-child(3n + 2) {
      margin: 0 5 px;
    }

- <span id="d2fe">\[ \]</span>

<!-- -->

    li:nth-child(2),
    li:nth-child(5),
    li:nth-child(8) {
      margin: 0 5 px;
    }

- <span id="7dcb">\[ \]</span>

<!-- -->

    li:nth-child(2n + 3) {
      margin: 0 5 px;
    }

#### Q43. Which selector would select only internal links within the current page?

- <span id="c0b6">\[ \] `a[href="#"] {...}`</span>
- <span id="e4b5">\[ \] `a[href~="#"]`</span>
- <span id="3783">\[ \] `a[href^="#"]`</span>
- <span id="7a55">\[x\] `a[href="#"]`</span>

#### Q44. What is not true about class selectors?

- <span id="3964">\[x\] Only one class value can be assigned to an element.</span>
- <span id="9dbc">\[ \] An element can have multiple class value.</span>
- <span id="d787">\[ \] Class selectors are marked with a leading period.</span>
- <span id="8b13">\[ \] More than one element can have the same class value.</span>

#### Q45. What is the difference between the margin and padding properties?

- <span id="8ea3">\[ \] Margin adds space around and inside of an element; padding adds space only inside of an element.</span>
- <span id="6617">\[x\] Margin adds space around an element; padding adds apace inside of an element.</span>
- <span id="5b08">\[ \] Margin adds a line around an element, padding adds space inside of an element.</span>
- <span id="e1d0">\[ \] Margin adds space inside of an element, padding adds space around an element.</span>

#### Q46. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

- <span id="ccfb">\[x\] padding: 10px 10px 0px 0px;</span>
- <span id="17cc">\[ \] padding: 10px 0px;</span>
- <span id="cff2">\[ \] padding: 10px 0;</span>
- <span id="cedb">\[ \] padding: 10px 0px 10px 0px;</span>

#### Q47. Is there an error in this code? If so, find the best description of the problem

    @font-face {
      font-family: 'Avenir', sans-serif;
      src: url('avenir.woff2') format('woff2'), url('avenir.woff') format('woff');
    }

- <span id="a817">\[ \] The font file formats are not supported in modern browsers.</span>
- <span id="81cd">\[ \] The src attribute requires a comma between the URL and format values.</span>
- <span id="4578">\[ \] There are no errors in the example.</span>
- <span id="8d73">\[x\] The sans-serif inclusion is problematic.</span>

#### Q48. Which style places an element at a fixed location within its container?

- <span id="0209">\[x\] position: absolute;</span>
- <span id="2fe7">\[ \] display: flex;</span>
- <span id="b051">\[ \] display: block;</span>
- <span id="f3d5">\[ \] float: left;</span>

#### Q49. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value?

    .example {
      margin-left: calc(5% + 5px);
    }

- <span id="e7bf">\[x\] The left margin value is equal to 5% of its parents element’s width plus 5px</span>
- <span id="d573">\[ \] The left margin value is equal to 5% of the viewport width plus 5px</span>
- <span id="9e5c">\[ \] The left margin value is equal to 5% of the closest positioned element’s width plus 5px</span>
- <span id="e324">\[ \] The left margin value is equal to 5% of the selected element’s width (.example) plus 5px</span>

#### Q50. What is the CSS selector for an `<a>` tag containing the title attribute?

- <span id="1fdd">\[x\] `a[title]`</span>
- <span id="bbf2">\[ \] `a > title`</span>
- <span id="3017">\[ \] `a=title`</span>
- <span id="149c">\[ \] `a.title`</span>

#### Q51. Which code would you use to absolutely position an element of the logo class?

- <span id="1d15">\[x\] `.logo { position: absolute; left: 100px; top: 150px; }`</span>
- <span id="ba83">\[ \] `.logo { position: absolute; margin-left: 100px; margin-top: 150px; }`</span>
- <span id="69d7">\[ \] `.logo { position: absolute; padding-left: 100px; padding-top: 150px; }`</span>
- <span id="fbc0">\[ \] `.logo { position: absolute; left-padding: 100px; top-padding: 150px; }`</span>

#### Q52. In this example, what color will Paragraph 1 be?

    p:first-of-type {
      color: red;
    }
    p {
      color: blue;
    }
    .container {
      color: yellow;
    }
    p:first-child {
      color: green;
    }

    <div class="container">
      <h1>Heading</h1>
      <p>Paragraph1</p>
      <p>Paragraph2</p>
    </div>

- <span id="6161">\[ \] blue</span>
- <span id="81b0">\[ \] green</span>
- <span id="458d">\[x\] red</span>
- <span id="031c">\[ \] yellow</span>

#### Q53. What is the `::placeholder pseudo-element` used for?

- <span id="3400">\[x\] It is used to format the appearance of placeholder text within a form control.</span>
- <span id="31df">\[ \] It specifies the default input text for a form control.</span>
- <span id="a147">\[ \] It writes text content into a hyperlink tooltip.</span>
- <span id="6d1f">\[ \] It writes text content into any page element.</span>

#### Q54. Which statement is true of the single colon (`:`) or double colon (`::`) notations for pseudo-elements-for example, `::before` and `:before`?

- <span id="7dfa">\[ \] All browsers support single and double colons for new and older pseudo-elements. So you can use either but it is convention to use single colons for consistency.</span>
- <span id="33aa">\[ \] In CSS3, the double colon notation (`::`) was introduced to create a consistency between pseudo-elements from pseudo-classes. For newer browsers, use the double colon notation. For IE8 and below, using single colon notation (`:`).</span>
- <span id="e90e">\[ \] Only the new CSS3 pseudo-elements require the double colon notation while the CSS2 pseudo-elements do not.</span>
- <span id="4412">\[x\] In CSS3, the double colon notation (`::`) was introduced to differentiate pseudo-elements from pseudo-classes. However, modern browsers support both formats. Older browsers such as IE8 and below do not.</span>

#### Q55. Which choice is not valid value for the font-style property?

- <span id="c8dd">\[ \] normal</span>
- <span id="7126">\[ \] italic</span>
- <span id="7333">\[x\] none</span>
- <span id="ff26">\[ \] oblique</span>

#### Q56. When would you use the @font-face method?

- <span id="5fb7">\[ \] to set the font size of the text</span>
- <span id="ed7c">\[x\] to load custom fonts into stylesheet</span>
- <span id="32cc">\[ \] to change the name of the font declared in the font-family</span>
- <span id="3ff4">\[ \] to set the color of the text</span>

#### Q57. When elements within a container overlap, the z-index property can be used to indicate how those items are stacked on top of each other. Which set of statements is true?

- <span id="e4c9">\[x\]</span>

<!-- -->

    1. Larger z-index values appear on top elements with a lower z-index value.
    2. Negative and positive number can be used.
    3. z-index can be used only on positioned elements.

- <span id="ce8c">\[ \]</span>

<!-- -->

    1. Smaller z-index values appear on top of elements with a larger z-index value.
    2. Negative and positive numbers can be used.
    3. z-index can be used with or without positioned elements.

- <span id="c21f">\[ \]</span>

<!-- -->

    1. Smaller z-index values appear on top of elements with a larger z-index value.
    2. Negative and positive number can be used.
    3. z-index must also be used with positioned elements.

- <span id="6fe9">\[ \]</span>

<!-- -->

    1. Larger z-index values appear on top of elements with a lower z-index value.
    2. Only positive number can be used.
    3. z-index must also be used with positioned elements.

#### Q58. You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to if your users are using Retina displays?

- <span id="f6fc">\[ \] 2000 x 1400 pixels</span>
- <span id="ffc8">\[ \] 200 x 100 pixels</span>
- <span id="c3a5">\[x\] 800 x 400 pixels</span>
- <span id="4122">\[ \] 400 x 200 pixels</span>

#### Q59. In Chrome’s Developer Tools view, where are the default styles listed?

- <span id="51e1">\[x\] under the User Agent Stylesheet section on the right</span>
- <span id="3df4">\[ \] in the third panel under the Layout tab</span>
- <span id="8f87">\[ \] under the HTML view on the left</span>
- <span id="2191">\[ \] in the middle panel</span>

#### Q60. While HTML controls document structure, CSS controls \_.

- <span id="b489">\[ \] semantic meaning</span>
- <span id="d30f">\[ \] content meaning</span>
- <span id="9e01">\[ \] document structure</span>
- <span id="5a6d">\[x\] content appearance</span>

#### Q61. What is the recommended name you should give the folder that holds your project’s images?

- <span id="fb5f">\[x\] images</span>
- <span id="f81e">\[ \] \#images</span>
- <span id="a031">\[ \] Images</span>
- <span id="724a">\[ \] my images</span>

#### Q62. What is an advantage of using inline CSS?

- <span id="f8c2">\[ \] It is easier to manage.</span>
- <span id="abc9">\[x\] It is easier to add multiple styles through it.</span>
- <span id="eebd">\[ \] It can be used to quickly test local CSS overrides.</span>
- <span id="e6e7">\[ \] It reduces conflict with other CSS definition methods.</span>

#### Q63.Which W3C status code represents a CSS specification that is fully implemented by modern browsers?

- <span id="7310">\[ \] Proposed Recommendation</span>
- <span id="8aaa">\[ \] Working Draft</span>
- <span id="b7b0">\[x\] Recommendation</span>
- <span id="745f">\[ \] Candidate Recommendation</span>

#### Q64. Are any of the following declarations invalid?

    color: red; /* declaration A */
    font-size: 1em; /* declaration B */
    padding: 10px 0; /* declaration C */

- <span id="abfe">\[ \] Declaration A is invalid.</span>
- <span id="ecfe">\[ \] Declaration B is invalid.</span>
- <span id="1e37">\[ \] Declaration C is invalid.</span>
- <span id="321a">\[x\] All declarations are valid.</span>

#### Q65. Which CSS will cause your links to have a solid blue background that changes to semitransparent on hover?

- <span id="6a34">\[x\]</span>

<!-- -->

    a:link {
      background: #0000ff;
    }
    a:hover {
      background: rgba(0, 0, 255, 0.5);
    }

- <span id="48e0">\[ \]</span>

<!-- -->

    a {
      color: blue;
    }
    a:hover {
      background: white;
    }

- <span id="10b4">\[ \]</span>

<!-- -->

    a:link {
      background: blue;
    }
    a:hover {
      color: rgba(0, 0, 255, 0.5);
    }

- <span id="6558">\[ \]</span>

<!-- -->

    a:hover {
      background: rgba(blue, 50%);
    }
    a:link {
      background: rgba(blue);
    }

#### Q66. Which CSS rule takes precedence over the others listed?

- <span id="2597">\[ \] `div.sidebar {}`</span>
- <span id="0013">\[ \] `* {}`</span>
- <span id="0436">\[x\] `div#sidebar2 p {}`</span>
- <span id="9751">\[ \] `.sidebar p {}`</span>

#### Q67. The body of your page includes some HTML sections. How will it look with the following CSS applied?

    body {
      background: #ffffff; /* white */
    }
    section {
      background: #0000ff; /* blue */
      height: 200px;
    }

- <span id="88c7">\[x\] blue sections on a white background</span>
- <span id="048b">\[ \] Yellow sections on a blue background</span>
- <span id="7762">\[ \] Green sections on a white background</span>
- <span id="c8f5">\[ \] blue sections on a red background</span>

#### Q68. Which CSS keyword can you use to override standard source order and specificity rules?

- <span id="7986">\[ \] `!elevate!`</span>
- <span id="49cf">\[ \] `*prime`</span>
- <span id="24b6">\[ \] `override`</span>
- <span id="796c">\[x\] `!important`</span>

#### Q69. You can use the \_ pseudo-class to set a different color on a link if it was clicked on.

- <span id="a5ed">\[x\] `a:visited`</span>
- <span id="ca48">\[ \] `a:hover`</span>
- <span id="f0d9">\[ \] `a:link`</span>
- <span id="a568">\[ \] `a:focus`</span>

#### Q70. Which color will look the brightest on your screen, assuming the background is white?

- <span id="8dc5">\[ \] `background-color: #aaa;`</span>
- <span id="a3ff">\[ \] `background-color: #999999;`</span>
- <span id="c586">\[ \] `background-color: rgba(170,170,170,0.5);`</span>
- <span id="a7ff">\[x\] `background-color: rgba(170,170,170,0.2);`</span>

#### Q71. Which CSS selector can you use to select all elements on your page associated with the two classes header and clear?

- <span id="f0f4">\[ \] `."header clear" {}`</span>
- <span id="85c7">\[ \] `header#clear {}`</span>
- <span id="e453">\[x\] `.header.clear {}`</span>
- <span id="8711">\[ \] `.header clear {}`</span>

#### Q72. A universal selector is specified using a(n) \_.

- <span id="052b">\[ \] “h1” string</span>
- <span id="34cd">\[ \] “a” character</span>
- <span id="5064">\[ \] “p” character</span>
- <span id="7a51">\[x\] “\*” character</span>

#### Q73. In the following CSS code, `'h1'` is the \_, while `'color'` is the \_.

    h1 {
      color: red;
    }

- <span id="ecb8">\[ \] property; declaration</span>
- <span id="4ebb">\[ \] declaration; rule</span>
- <span id="cbea">\[ \] “p” character</span>
- <span id="d058">\[x\] selector; property</span>

#### Q74. What is an alternate way to define the following CSS rule?

    font-weight: bold;

- <span id="caf3">\[ \] font-weight: 400;</span>
- <span id="92b1">\[ \] font-weight: medium;</span>
- <span id="8d5d">\[x\] font-weight: 700;</span>
- <span id="6381">\[ \] font-weight: Black;</span>

#### Q75. You want your styling to be based on a font stack consisting of three fonts. Where should the generic font for your font family be specified?

- <span id="62c8">\[ \] It should be the first one on the list.</span>
- <span id="d367">\[ \] Generic fonts are discouraged from this list.</span>
- <span id="7b55">\[x\] It should be the last one on the list.</span>
- <span id="2ce2">\[ \] It should be the second one on the list.</span>

#### Q76. What is one disadvantage of using a web font service?

- <span id="e9b4">\[ \] It requires you to host font files on your own server.</span>
- <span id="5b98">\[ \] It uses more of your site’s bandwidth.</span>
- <span id="5943">\[ \] It offers a narrow selection of custom fonts.</span>
- <span id="5bf8">\[x\] It is not always a free service.</span>

#### Q77. How do you add Google fonts to your project?

- <span id="9e31">\[x\] by using an HTML link element referring to a Google-provided CSS</span>
- <span id="b503">\[ \] by embedding the font file directly into the project’s master JavaScript</span>
- <span id="cbc6">\[ \] by using a Google-specific CSS syntax that directly links to the desired font file</span>
- <span id="32c6">\[ \] by using a standard font-face CSS definition sourcing a font file on Google’s servers</span>

#### Q78. which choice is not a valid color?

- <span id="ba0a">\[ \] color: `#000`;</span>
- <span id="26fe">\[ \] color: `rgb(0,0,0)`;</span>
- <span id="b9d1">\[ \] color: `#000000`;</span>
- <span id="c407">\[x\] color: `000000`;</span>

#### Q79. Using the following HTML and CSS example, what will equivalent pixel value be for .em and .rem elements?

    html {font-size: 10px}
    body {font-size: 2rem;}
    .rem {font-size: 1.5rem;}
    .em {font-size: 2em;}

    <body>
      <p class="rem"></p>
      <p class="em"></p>
    </body>

- <span id="998d">\[ \] The .rem will be equivalent to 25px; the .em value will be 20px.</span>
- <span id="ac5f">\[ \] The .rem will be equivalent to 15px; the .em value will be 20px.</span>
- <span id="725e">\[ \] The .rem will be equivalent to 15px; the .em value will be 40px.</span>
- <span id="4ecf">\[ \] The .rem will be equivalent to 20px; the .em value will be 40px.</span>

#### Q80. In this example, according to cascading and specificity rules, what color will the link be?

    .example {color: yellow;}
    ul li a {color: blue;}
    ul a {color: green;}
    a {color: red;}

    <ul>
      <li><a href="#" class="example">link</a></li>
      <li>list item</li>
      <li>list item</li>
    </ul>

- <span id="fc0e">\[ \] blue</span>
- <span id="24c3">\[ \] red</span>
- <span id="2417">\[x\] yellow</span>
- <span id="fe20">\[ \] green</span>

#### Q81. What property is used to adjust the space between text characters?

- <span id="1fb6">\[ \] `font-style`</span>
- <span id="5993">\[ \] `text-transform`</span>
- <span id="4491">\[ \] `font-variant`</span>
- <span id="2834">\[x\] `letter-spacing`</span>

\#\#\#\# Q82. What is the correct syntax for changing the curse from an arrow to a pointing hand when it interacts with a named element?

- <span id="2ed7">\[x\] `.element {cursor: pointer;}`</span>
- <span id="6bc4">\[ \] `.element {cursor: hand;}`</span>
- <span id="a193">\[ \] `.element {cursor: move-hand;}`</span>
- <span id="50ed">\[ \] `.element {cursor: pointer-hand;}`</span>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [June 3, 2021](https://medium.com/p/6e3e4de7ca53).

<a href="https://medium.com/@bryanguner/css-interview-prep-quiz-6e3e4de7ca53" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Data Structures & Algorithms Resource List Part 1

Guess the author of the following quotes:

---

### Data Structures & Algorithms Resource List Part 1

Guess the author of the following quotes:

> _Talk is cheap. Show me the code._

> _Software is like sex: it’s better when it’s free._

> _Microsoft isn’t evil, they just make really crappy operating systems._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*rbMyH5LxQQFozL7F" class="graf-image" /></figure>### Update:

#### Here’s some more:

- <span id="56aa"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/Framework%20and%20thoughts%20about%20learning%20data%20structure%20and%20algorithm.md" class="markup--anchor markup--li-anchor">The Framework for Learning Algorithms and intense problem solving exercises</a></span>
- <span id="805e"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/why_i_recommend_algs4.md" class="markup--anchor markup--li-anchor">Algs4: Recommended book for Learning Algorithms and Data Structures</a></span>
- <span id="2bf9"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/AnalysisOfDynamicProgramming.md" class="markup--anchor markup--li-anchor">An analysis of Dynamic Programming</a></span>
- <span id="f697"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/OptimalSubstructure.md" class="markup--anchor markup--li-anchor">Dynamic Programming Q&amp;A — What is Optimal Substructure</a></span>
- <span id="a35b"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/DetailsaboutBacktracking.md" class="markup--anchor markup--li-anchor">The Framework for Backtracking Algorithm</a></span>
- <span id="34eb"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/DetailedBinarySearch.md" class="markup--anchor markup--li-anchor">Binary Search in Detail: I wrote a Poem</a></span>
- <span id="c7c9"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/SlidingWindowTechnique.md" class="markup--anchor markup--li-anchor">The Sliding Window Technique</a></span>
- <span id="35dd"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/common_knowledge/linuxProcess.md" class="markup--anchor markup--li-anchor">Difference Between Process and Thread in Linux</a></span>
- <span id="fb0e"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/common_knowledge/OnlinePraticePlatform.md" class="markup--anchor markup--li-anchor">Some Good Online Practice Platforms</a></span>
- <span id="0f7b"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/AnalysisOfDynamicProgramming.md" class="markup--anchor markup--li-anchor">Dynamic Programming in Details</a></span>
- <span id="845b"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/OptimalSubstructure.md" class="markup--anchor markup--li-anchor">Dynamic Programming Q&amp;A — What is Optimal Substructure</a></span>
- <span id="2cc7"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/LongestCommonSubsequence.md" class="markup--anchor markup--li-anchor">Classic DP: Longest Common Subsequence</a></span>
- <span id="57a3"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/EditDistance.md" class="markup--anchor markup--li-anchor">Classic DP: Edit Distance</a></span>
- <span id="e2c1"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/ThrowingEggsinHighBuildings.md" class="markup--anchor markup--li-anchor">Classic DP: Super Egg</a></span>
- <span id="39a3"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/SuperEggDropAdvanced.md" class="markup--anchor markup--li-anchor">Classic DP: Super Egg (Advanced Solution)</a></span>
- <span id="c579"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/StrategiesForSubsequenceProblem.md" class="markup--anchor markup--li-anchor">The Strategies of Subsequence Problem</a></span>
- <span id="0ec0"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/GameProblemsInDynamicProgramming.md" class="markup--anchor markup--li-anchor">Classic DP: Game Problems</a></span>
- <span id="44c0"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/IntervalScheduling.md" class="markup--anchor markup--li-anchor">Greedy: Interval Scheduling</a></span>
- <span id="efef"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/KMPCharacterMatchingAlgorithmInDynamicProgramming.md" class="markup--anchor markup--li-anchor">KMP Algorithm In Detail</a></span>
- <span id="635b"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/BestTimeToBuyAndSellStock.md" class="markup--anchor markup--li-anchor">A solution to all Buy Time to Buy and Sell Stock Problems</a></span>
- <span id="0a3f"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/HouseRobber.md" class="markup--anchor markup--li-anchor">A solution to all House Robber Problems</a></span>
- <span id="c1b0"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/FourKeysKeyboard.md" class="markup--anchor markup--li-anchor">4 Keys Keyboard</a></span>
- <span id="dc7f"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/RegularExpression.md" class="markup--anchor markup--li-anchor">Regular Expression</a></span>
- <span id="12b8"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/LongestIncreasingSubsequence.md" class="markup--anchor markup--li-anchor">Longest Increasing Subsequence</a></span>
- <span id="5fbd"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/Framework%20and%20thoughts%20about%20learning%20data%20structure%20and%20algorithm.md" class="markup--anchor markup--li-anchor">The Framework for Learning Algorithms and intense problem solving exercises</a></span>
- <span id="0dd7"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/why_i_recommend_algs4.md" class="markup--anchor markup--li-anchor">Algs4: Recommended book for Learning Algorithms and Data Structures</a></span>
- <span id="5c73"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/binary_heap_implements_priority_queues.md" class="markup--anchor markup--li-anchor">Binary Heap and Priority Queue</a></span>
- <span id="f0a9"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/LRU_algorithm.md" class="markup--anchor markup--li-anchor">LRU Cache Strategy in Detail</a></span>
- <span id="ea8d"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/The_Manipulation_Collection_of_Binary_Search_Tree.md" class="markup--anchor markup--li-anchor">Collections of Binary Search Operations</a></span>
- <span id="e58e"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/MonotonicStack.md" class="markup--anchor markup--li-anchor">Special Data Structure: Monotonic Stack</a></span>
- <span id="8578"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/Monotonic_queue.md" class="markup--anchor markup--li-anchor">Special Data Structure: Monotonic Stack</a></span>
- <span id="aa92"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/design_Twitter.md" class="markup--anchor markup--li-anchor">Design Twitter</a></span>
- <span id="3bc6"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/reverse_part_of_a_linked_list_via_recursion.md" class="markup--anchor markup--li-anchor">Reverse Part of Linked List via Recursion</a></span>
- <span id="f3ce"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/ImplementQueueUsingStacksImplementStackUsingQueues.md" class="markup--anchor markup--li-anchor">Queue Implement Stack/Stack implement Queue</a></span>
- <span id="6631"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/ThewaytoAlgorithmlearning.md" class="markup--anchor markup--li-anchor">My Way to Learn Algorithm</a></span>
- <span id="df10"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/DetailsaboutBacktracking.md" class="markup--anchor markup--li-anchor">The Framework of Backtracking Algorithm</a></span>
- <span id="f891"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/DetailedBinarySearch.md" class="markup--anchor markup--li-anchor">Binary Search in Detail</a></span>
- <span id="05c2"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/Subset_Permutation_Combination.md" class="markup--anchor markup--li-anchor">Backtracking Solve Subset/Permutation/Combination</a></span>
- <span id="2184"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/double_pointer.md" class="markup--anchor markup--li-anchor">Diving into the technical parts of Double Pointers</a></span>
- <span id="1622"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/SlidingWindowTechnique.md" class="markup--anchor markup--li-anchor">Sliding Window Technique</a></span>
- <span id="4514"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/The_key_to_resolving_TwoSum_problems.md" class="markup--anchor markup--li-anchor">The Core Concept of TwoSum Problems</a></span>
- <span id="6a0d"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/CommonBitManipulation.md" class="markup--anchor markup--li-anchor">Common Bit Manipulations</a></span>
- <span id="cf84"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/Implementing_the_functions_of_a_calculator.md" class="markup--anchor markup--li-anchor">Breaking down a Complicated Problem: Implement a Calculator</a></span>
- <span id="cecf"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/PancakesSorting.md" class="markup--anchor markup--li-anchor">Pancake Sorting Algorithm</a></span>
- <span id="03c5"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/prefix_sum.md" class="markup--anchor markup--li-anchor">Prefix Sum: Intro and Concept</a></span>
- <span id="3463"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/string_multiplication.md" class="markup--anchor markup--li-anchor">String Multiplication</a></span>
- <span id="14f7"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/flood_fill.md" class="markup--anchor markup--li-anchor">FloodFill Algorithm in Detail</a></span>
- <span id="3778"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/IntervalMerging.md" class="markup--anchor markup--li-anchor">Interval Scheduling: Interval Merging</a></span>
- <span id="cb70"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/IntervalIntersection.md" class="markup--anchor markup--li-anchor">Interval Scheduling: Intersections of Intervals</a></span>
- <span id="02b6"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/RussianDollEnvelopes.md" class="markup--anchor markup--li-anchor">Russian Doll Envelopes Problem</a></span>
- <span id="dfec"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/several_counter_intuitive_probability_problems.md" class="markup--anchor markup--li-anchor">A collection of counter-intuitive Probability Problems</a></span>
- <span id="782c"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/Shuffle_Algorithm.md" class="markup--anchor markup--li-anchor">Shuffle Algorithm</a></span>
- <span id="438d"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/data_structure/RecursionInDetail.md" class="markup--anchor markup--li-anchor">Recursion In Detail</a></span>
- <span id="8524"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/LRU_algorithm.md" class="markup--anchor markup--li-anchor">How to Implement LRU Cache</a></span>
- <span id="c35b"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/Print_PrimeNumbers.md" class="markup--anchor markup--li-anchor">How to Find Prime Number Efficiently</a></span>
- <span id="7d80"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/dynamic_programming/EditDistance.md" class="markup--anchor markup--li-anchor">How to Calculate Minimium Edit Distance</a></span>
- <span id="ed1d"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/UsingBinarySearchAlgorithm.md" class="markup--anchor markup--li-anchor">How to use Binary Search</a></span>
- <span id="473b"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/Trapping_Rain_Water.md" class="markup--anchor markup--li-anchor">How to efficiently solve Trapping Rain Water Problem</a></span>
- <span id="d97b"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/RemoveDuplicatesfromSortedArray.md" class="markup--anchor markup--li-anchor">How to Remove Duplicates From Sorted Array</a></span>
- <span id="ea68"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/TheLongestPalindromicSubstring.md" class="markup--anchor markup--li-anchor">How to Find Longest Palindromic Substring</a></span>
- <span id="177f"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/reverse-nodes-in-k-group.md" class="markup--anchor markup--li-anchor">How to Reverse Linked List in K Group</a></span>
- <span id="7e76"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/valid-parentheses.md" class="markup--anchor markup--li-anchor">How to Check the Validation of Parenthesis</a></span>
- <span id="0d7c"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/missing_elements.md" class="markup--anchor markup--li-anchor">How to Find Missing Element</a></span>
- <span id="a78f"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/Find-Duplicate-and-Missing-Element.md" class="markup--anchor markup--li-anchor">How to Find Duplicates and Missing Elements</a></span>
- <span id="8f44"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/check_palindromic_linkedlist.md" class="markup--anchor markup--li-anchor">How to Check Palindromic LinkedList</a></span>
- <span id="53d5"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/ReservoirSampling.md" class="markup--anchor markup--li-anchor">How to Pick Elements From an Infinite Arbitrary Sequence</a></span>
- <span id="7c8e"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/Seatscheduling.md" class="markup--anchor markup--li-anchor">How to Schedule Seats for Students</a></span>
- <span id="dab2"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/Union-find-Explanation.md" class="markup--anchor markup--li-anchor">Union-Find Algorithm in Detail</a></span>
- <span id="6a63"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/think_like_computer/Union-Find-Application.md" class="markup--anchor markup--li-anchor">Union-Find Application</a></span>
- <span id="850c"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/one-line-code-puzzles.md" class="markup--anchor markup--li-anchor">Problems that can be solved in one line</a></span>
- <span id="b435"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/interview/findSebesquenceWithBinarySearch.md" class="markup--anchor markup--li-anchor">Find Subsequence With Binary Search</a></span>
- <span id="e2e0"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/common_knowledge/linuxProcess.md" class="markup--anchor markup--li-anchor">Difference Between Process and Thread in Linux</a></span>
- <span id="b421"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/common_knowledge/linuxshell.md" class="markup--anchor markup--li-anchor">You Must Know About Linux Shell</a></span>
- <span id="be57"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/common_knowledge/SessionAndCookie.md" class="markup--anchor markup--li-anchor">You Must Know About Cookie and Session</a></span>
- <span id="7539"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/common_knowledge/Cryptology.md" class="markup--anchor markup--li-anchor">Cryptology Algorithm</a></span>
- <span id="3628"><a href="https://72a70b9d-739e-477a-bd84-85357c883a09.vscode-webview-test.com/vscode-resource/file///c:/MY-WEB-DEV/_JOB-SEARCH/03-Interview-Prep/01-reference-guides/common_knowledge/OnlinePraticePlatform.md" class="markup--anchor markup--li-anchor">Some Good Online Practice Platforms</a></span>

### Algorithms:

- <span id="bdee"><a href="https://github.com/coells/100days" class="markup--anchor markup--li-anchor">100 days of algorithms</a></span>
- <span id="2e05"><a href="https://github.com/marcosfede/algorithms" class="markup--anchor markup--li-anchor">Algorithms</a> — Solved algorithms and data structures problems in many languages.</span>
- <span id="05d6"><a href="http://jeffe.cs.illinois.edu/teaching/algorithms/" class="markup--anchor markup--li-anchor">Algorithms by Jeff Erickson</a> (<a href="https://github.com/jeffgerickson/algorithms" class="markup--anchor markup--li-anchor">Code</a>) (<a href="https://news.ycombinator.com/item?id=26074289" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="a17f"><a href="https://www.reddit.com/r/compsci/comments/5uz9lb/top_algorithmsdata_structuresconcepts_every/ddy8azz/" class="markup--anchor markup--li-anchor">Top algos/DS to learn</a></span>
- <span id="9ab0"><a href="https://www.nayuki.io/category/programming" class="markup--anchor markup--li-anchor">Some neat algorithms</a></span>
- <span id="142f"><a href="https://stackabuse.com/mathematical-proof-of-algorithm-correctness-and-efficiency/" class="markup--anchor markup--li-anchor">Mathematical Proof of Algorithm Correctness and Efficiency (2019)</a></span>
- <span id="85a6"><a href="https://github.com/algorithm-visualizer/algorithm-visualizer" class="markup--anchor markup--li-anchor">Algorithm Visualizer</a> — Interactive online platform that visualizes algorithms from code.</span>
- <span id="9b84"><a href="https://mitpress.mit.edu/books/algorithms-optimization" class="markup--anchor markup--li-anchor">Algorithms for Optimization book</a></span>
- <span id="565c"><a href="https://www.algorithm-archive.org/" class="markup--anchor markup--li-anchor">Collaborative book on algorithms</a> (<a href="https://github.com/algorithm-archivists/algorithm-archive" class="markup--anchor markup--li-anchor">Code</a>)</span>
- <span id="b313"><a href="http://index-of.co.uk/Algorithms/Algorithms%20in%20C.pdf" class="markup--anchor markup--li-anchor">Algorithms in C by Robert Sedgewick</a></span>
- <span id="f0e0"><a href="http://mimoza.marmara.edu.tr/~msakalli/cse706_12/SkienaTheAlgorithmDesignManual.pdf" class="markup--anchor markup--li-anchor">Algorithm Design Manual</a></span>
- <span id="53a1"><a href="https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-006-introduction-to-algorithms-fall-2011/" class="markup--anchor markup--li-anchor">MIT Introduction to Algorithms course (2011)</a></span>
- <span id="7f59"><a href="http://codecapsule.com/2012/01/18/how-to-implement-a-paper/" class="markup--anchor markup--li-anchor">How to implement an algorithm from a scientific paper (2012)</a></span>
- <span id="cd31"><a href="https://github.com/scandum/quadsort" class="markup--anchor markup--li-anchor">Quadsort</a> — Stable non-recursive merge sort named quadsort.</span>
- <span id="3695"><a href="https://github.com/resumejob/system-design-algorithms" class="markup--anchor markup--li-anchor">System design algorithms</a> — Algorithms you should know before system design.</span>
- <span id="959b"><a href="http://www.cs.sjtu.edu.cn/~jiangli/teaching/CS222/files/materials/Algorithm%20Design.pdf" class="markup--anchor markup--li-anchor">Algorithms Design book</a></span>
- <span id="bc44"><a href="http://greenteapress.com/complexity/html/index.html" class="markup--anchor markup--li-anchor">Think Complexity</a></span>
- <span id="b149"><a href="https://github.com/TheAlgorithms/Rust" class="markup--anchor markup--li-anchor">All Algorithms implemented in Rust</a></span>
- <span id="e8ad"><a href="https://walkccc.github.io/CLRS/" class="markup--anchor markup--li-anchor">Solutions to Introduction to Algorithms book</a> (<a href="https://github.com/walkccc/CLRS" class="markup--anchor markup--li-anchor">Code</a>)</span>
- <span id="6f0a"><a href="https://www.jamisbuck.org/mazes/" class="markup--anchor markup--li-anchor">Maze Algorithms (2011)</a> (<a href="https://news.ycombinator.com/item?id=23429368" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="9a09"><a href="https://page.skerritt.blog/algorithms/" class="markup--anchor markup--li-anchor">Algorithmic Design Paradigms book</a> (<a href="https://github.com/brandonskerritt/AlgorithmsBook" class="markup--anchor markup--li-anchor">Code</a>)</span>
- <span id="dbff"><a href="https://wordsandbuttons.online/" class="markup--anchor markup--li-anchor">Words and buttons Online Blog</a> (<a href="https://github.com/akalenuk/wordsandbuttons" class="markup--anchor markup--li-anchor">Code</a>)</span>
- <span id="089a"><a href="https://www.chrislaux.com/" class="markup--anchor markup--li-anchor">Algorithms animated</a></span>
- <span id="4eb6"><a href="https://jiahai-feng.github.io/posts/cache-oblivious-algorithms/" class="markup--anchor markup--li-anchor">Cache Oblivious Algorithms (2020)</a> (<a href="https://news.ycombinator.com/item?id=23662434" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="4001"><a href="http://blog.ezyang.com/2012/03/you-could-have-invented-fractional-cascading/" class="markup--anchor markup--li-anchor">You could have invented fractional cascading (2012)</a></span>
- <span id="6fb5"><a href="https://labuladong.gitbook.io/algo-en/" class="markup--anchor markup--li-anchor">Guide to learning algorithms through LeetCode</a> (<a href="https://github.com/labuladong/fucking-algorithm/tree/english" class="markup--anchor markup--li-anchor">Code</a>) (<a href="https://news.ycombinator.com/item?id=24167297" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="be96"><a href="https://cstheory.stackexchange.com/questions/34/how-hard-is-unshuffling-a-string" class="markup--anchor markup--li-anchor">How hard is unshuffling a string?</a></span>
- <span id="6f50"><a href="https://sites.uclouvain.be/absil/amsbook/" class="markup--anchor markup--li-anchor">Optimization Algorithms on Matrix Manifolds</a></span>
- <span id="1a1c"><a href="https://runestone.academy/runestone/books/published/pythonds/index.html" class="markup--anchor markup--li-anchor">Problem Solving with Algorithms and Data Structures</a> (<a href="https://news.ycombinator.com/item?id=24287622" class="markup--anchor markup--li-anchor">HN</a>) (<a href="https://www.cs.auckland.ac.nz/compsci105s1c/resources/ProblemSolvingwithAlgorithmsandDataStructures.pdf" class="markup--anchor markup--li-anchor">PDF</a>)</span>
- <span id="a16e"><a href="https://github.com/TheAlgorithms/Python" class="markup--anchor markup--li-anchor">Algorithms implemented in Python</a></span>
- <span id="34d4"><a href="https://github.com/TheAlgorithms/Javascript" class="markup--anchor markup--li-anchor">Algorithms implemented in JavaScript</a></span>
- <span id="911d"><a href="https://github.com/williamfiset/Algorithms" class="markup--anchor markup--li-anchor">Algorithms &amp; Data Structures in Java</a></span>
- <span id="3bd3"><a href="https://github.com/scandum/wolfsort" class="markup--anchor markup--li-anchor">Wolfsort</a> — Stable adaptive hybrid radix / merge sort.</span>
- <span id="f3ea"><a href="https://github.com/fcampelo/EC-Bestiary" class="markup--anchor markup--li-anchor">Evolutionary Computation Bestiary</a> — Bestiary of evolutionary, swarm and other metaphor-based algorithms.</span>
- <span id="c434"><a href="http://elementsofprogramming.com/" class="markup--anchor markup--li-anchor">Elements of Programming book</a> — Decomposing programs into a system of algorithmic components. (<a href="http://www.pathsensitive.com/2020/09/book-review-elements-of-programmnig.html" class="markup--anchor markup--li-anchor">Review</a>) (<a href="https://news.ycombinator.com/item?id=24635947" class="markup--anchor markup--li-anchor">HN</a>) (<a href="https://lobste.rs/s/bqnhbo/book_review_elements_programmnig" class="markup--anchor markup--li-anchor">Lobsters</a>)</span>
- <span id="8d6b"><a href="https://cp-algorithms.com/" class="markup--anchor markup--li-anchor">Competitive Programming Algorithms</a></span>
- <span id="6a45"><a href="https://github.com/akshitagit/CPP" class="markup--anchor markup--li-anchor">CPP/C</a> — C/C++ algorithms/DS problems.</span>
- <span id="9ea4"><a href="https://www.adamconrad.dev/blog/how-to-design-an-algorithm/" class="markup--anchor markup--li-anchor">How to design an algorithm (2018)</a></span>
- <span id="5c20"><a href="https://www.youtube.com/playlist?list=PLOtl7M3yp-DX6ic0HGT0PUX_wiNmkWkXx" class="markup--anchor markup--li-anchor">CSE 373 — Introduction to Algorithms, by Steven Skiena (2020)</a></span>
- <span id="2f4f"><a href="http://homepages.math.uic.edu/~lreyzin/f20_mcs501/" class="markup--anchor markup--li-anchor">Computer Algorithms II course (2020)</a></span>
- <span id="9132"><a href="https://notebook.drmaciver.com/posts/2019-04-30-13:03.html" class="markup--anchor markup--li-anchor">Improving Binary Search by Guessing (2019)</a></span>
- <span id="d90f"><a href="https://blog.acolyer.org/2020/10/19/the-case-for-a-learned-sorting-algorithm/" class="markup--anchor markup--li-anchor">The case for a learned sorting algorithm (2020)</a> (<a href="https://news.ycombinator.com/item?id=24823611" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="f8c6"><a href="https://github.com/liuxinyu95/AlgoXY" class="markup--anchor markup--li-anchor">Elementary Algorithms</a> — Introduces elementary algorithms and data structures. Includes side-by-side comparisons of purely functional realization and their imperative counterpart.</span>
- <span id="7c37"><a href="https://sahandsaba.com/combinatorial-generation-for-coding-interviews-in-python.html" class="markup--anchor markup--li-anchor">Combinatorics Algorithms for Coding Interviews (2018)</a></span>
- <span id="4220"><a href="https://github.com/ZoranPandovski/al-go-rithms" class="markup--anchor markup--li-anchor">Algorithms written in different programming languages</a> (<a href="https://zoranpandovski.github.io/al-go-rithms/" class="markup--anchor markup--li-anchor">Web</a>)</span>
- <span id="e79b"><a href="https://johnlekberg.com/blog/2020-10-25-seq-align.html" class="markup--anchor markup--li-anchor">Solving the Sequence Alignment problem in Python (2020)</a></span>
- <span id="fc55"><a href="https://github.com/bingmann/sound-of-sorting" class="markup--anchor markup--li-anchor">The Sound of Sorting</a> — Visualization and “Audibilization” of Sorting Algorithms. (<a href="https://panthema.net/2013/sound-of-sorting/" class="markup--anchor markup--li-anchor">Web</a>)</span>
- <span id="a360"><a href="https://danlark.org/2020/11/11/miniselect-practical-and-generic-selection-algorithms/" class="markup--anchor markup--li-anchor">Miniselect: Practical and Generic Selection Algorithms (2020)</a></span>
- <span id="5d05"><a href="https://chasewilson.dev/blog/slowest-quicksort/" class="markup--anchor markup--li-anchor">The Slowest Quicksort (2019)</a></span>
- <span id="a4f7"><a href="https://blog.sigplan.org/2020/11/17/functional-algorithm-design-part-0/" class="markup--anchor markup--li-anchor">Functional Algorithm Design (2020)</a></span>
- <span id="2c4b"><a href="https://milofultz.com/2020/12/27/atlb-notes" class="markup--anchor markup--li-anchor">Algorithms To Live By — Book Notes</a></span>
- <span id="885a"><a href="http://people.csail.mit.edu/jsolomon/share/book/numerical_book.pdf" class="markup--anchor markup--li-anchor">Numerical Algorithms (2015)</a></span>
- <span id="0002"><a href="https://blog.vespa.ai/using-approximate-nearest-neighbor-search-in-real-world-applications/" class="markup--anchor markup--li-anchor">Using approximate nearest neighbor search in real world applications (2020)</a></span>
- <span id="85a7"><a href="https://arxiv.org/pdf/1911.06347.pdf" class="markup--anchor markup--li-anchor">In search of the fastest concurrent Union-Find algorithm (2019)</a></span>
- <span id="5d1b"><a href="https://www.cs.princeton.edu/courses/archive/fall13/cos521/" class="markup--anchor markup--li-anchor">Computer Science 521 Advanced Algorithm Design</a></span>

---

<figure><img src="https://cdn-images-1.medium.com/max/800/0*2fb7io8VD9z8080F.jpg" class="graf-image" /></figure>### Data Structures:

- <span id="fd86"><a href="https://github.com/floyernick/Data-Structures-and-Algorithms" class="markup--anchor markup--li-anchor">Data Structures and Algorithms implementation in Go</a></span>
- <span id="cbae"><a href="https://softwareengineering.stackexchange.com/questions/155639/which-algorithms-data-structures-should-i-recognize-and-know-by-name" class="markup--anchor markup--li-anchor">Which algorithms/data structures should I “recognize” and know by name?</a></span>
- <span id="0e28"><a href="https://xlinux.nist.gov/dads/" class="markup--anchor markup--li-anchor">Dictionary of Algorithms and Data Structures</a></span>
- <span id="e10f"><a href="https://g1thubhub.github.io/data-structure-zoo.html" class="markup--anchor markup--li-anchor">Phil’s Data Structure Zoo</a></span>
- <span id="f159"><a href="https://stratos.seas.harvard.edu/files/stratos/files/periodictabledatastructures.pdf" class="markup--anchor markup--li-anchor">The Periodic Table of Data Structures</a> (<a href="https://news.ycombinator.com/item?id=18314555" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="dc3c"><a href="https://www.cs.usfca.edu/~galles/visualization/Algorithms.html" class="markup--anchor markup--li-anchor">Data Structure Visualizations</a> (<a href="https://news.ycombinator.com/item?id=19082943" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="8405"><a href="http://blog.amynguyen.net/?p=853" class="markup--anchor markup--li-anchor">Data structures to name-drop when you want to sound smart in an interview</a></span>
- <span id="9893"><a href="https://pdziepak.github.io/2019/05/02/on-lists-cache-algorithms-and-microarchitecture/" class="markup--anchor markup--li-anchor">On lists, cache, algorithms, and microarchitecture (2019)</a></span>
- <span id="6c1d"><a href="http://web.stanford.edu/class/cs166/handouts/100%20Suggested%20Final%20Project%20Topics.pdf" class="markup--anchor markup--li-anchor">Topics in Advanced Data Structures (2019)</a> (<a href="https://news.ycombinator.com/item?id=19780387" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="ddce"><a href="http://web.stanford.edu/class/cs166/" class="markup--anchor markup--li-anchor">CS166 Advanced DS Course (2019)</a></span>
- <span id="f73e"><a href="https://courses.csail.mit.edu/6.851/fall17/" class="markup--anchor markup--li-anchor">Advanced Data Structures (2017)</a> (<a href="https://news.ycombinator.com/item?id=20044876" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="df52"><a href="https://github.com/jamesroutley/write-a-hash-table" class="markup--anchor markup--li-anchor">Write a hash table in C</a></span>
- <span id="602e"><a href="https://github.com/prabhupant/python-ds" class="markup--anchor markup--li-anchor">Python Data Structures and Algorithms</a></span>
- <span id="6894"><a href="https://vaibhavsagar.com/blog/2018/07/29/hamts-from-scratch/" class="markup--anchor markup--li-anchor">HAMTs from Scratch (2018)</a></span>
- <span id="4481"><a href="https://github.com/JoeKarlsson/data-structures" class="markup--anchor markup--li-anchor">JavaScript Data Structures and Algorithms</a></span>
- <span id="e30d"><a href="http://codecapsule.com/2012/11/07/ikvs-implementing-a-key-value-store-table-of-contents/" class="markup--anchor markup--li-anchor">Implementing a Key-Value Store series</a></span>
- <span id="355f"><a href="https://opendatastructures.org/" class="markup--anchor markup--li-anchor">Open Data Structures</a> — Provide a high-quality open content data structures textbook that is both mathematically rigorous and provides complete implementations. (<a href="https://github.com/patmorin/ods" class="markup--anchor markup--li-anchor">Code</a>)</span>
- <span id="53bb"><a href="https://www.csee.usf.edu/~kchriste/energy/ipl10.pdf" class="markup--anchor markup--li-anchor">A new analysis of the false positive rate of a Bloom filter (2009)</a></span>
- <span id="9e20"><a href="https://lampwww.epfl.ch/papers/idealhashtrees.pdf" class="markup--anchor markup--li-anchor">Ideal Hash Trees</a></span>
- <span id="5f72"><a href="http://citeseerx.ist.psu.edu/viewdoc/download;jsessionid=0265C1992F573129BCC7D4AF7734DBF7?doi=10.1.1.592.5377&amp;rep=rep1&amp;type=pdf" class="markup--anchor markup--li-anchor">RRB-Trees: Efficient Immutable Vectors</a></span>
- <span id="162a"><a href="https://github.com/jdan/ocaml-data-structures" class="markup--anchor markup--li-anchor">Some data structures and algorithms written in OCaml</a></span>
- <span id="523d"><a href="https://shachaf.net/w/b-trees" class="markup--anchor markup--li-anchor">Let’s Invent B(+)-Trees</a> (<a href="https://news.ycombinator.com/item?id=23001831" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="33f1"><a href="https://github.com/hydro-project/anna" class="markup--anchor markup--li-anchor">Anna</a> — Low-latency, cloud-native KVS.</span>
- <span id="9365"><a href="https://www.aleksandra.codes/persistent-data-structures" class="markup--anchor markup--li-anchor">Persistent data structures thanks to recursive type aliases (2019)</a></span>
- <span id="b266"><a href="https://yetanotherdevblog.com/lsm/" class="markup--anchor markup--li-anchor">Log-Structured Merge-Trees (2020)</a></span>
- <span id="41ad"><a href="https://sagi.io/bloom-filters-for-the-perplexed/" class="markup--anchor markup--li-anchor">Bloom Filters for the Perplexed (2017)</a></span>
- <span id="af99"><a href="https://yetanotherdevblog.com/bloom-filters/" class="markup--anchor markup--li-anchor">Understanding Bloom Filters (2020)</a></span>
- <span id="2878"><a href="https://yetanotherdevblog.com/dense-vs-sparse-indexes/" class="markup--anchor markup--li-anchor">Dense vs. Sparse Indexes (2020)</a></span>
- <span id="0fcf"><a href="https://www.techiedelight.com/list-of-problems/" class="markup--anchor markup--li-anchor">Data Structures and Algorithms Problems</a></span>
- <span id="bdb9"><a href="https://blog.pragmaticengineer.com/data-structures-and-algorithms-i-actually-used-day-to-day/" class="markup--anchor markup--li-anchor">Data Structures &amp; Algorithms I Actually Used Working at Tech Companies (2020)</a> (<a href="https://lobste.rs/s/n8tyip/data_structures_algorithms_i_actually" class="markup--anchor markup--li-anchor">Lobsters</a>) (<a href="https://news.ycombinator.com/item?id=23841491" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="c7c3"><a href="https://onatm.dev/2020/08/10/let-s-implement-a-bloom-filter/" class="markup--anchor markup--li-anchor">Let’s implement a Bloom Filter (2020)</a> (<a href="https://news.ycombinator.com/item?id=24102617" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="e238"><a href="https://ourmachinery.com/post/data-structures-part-1-bulk-data/" class="markup--anchor markup--li-anchor">Data Structures Part 1: Bulk Data (2019)</a> (<a href="https://lobste.rs/s/t8mrxn/data_structures_part_1_bulk_data" class="markup--anchor markup--li-anchor">Lobsters</a>)</span>
- <span id="afba"><a href="https://www.freecodecamp.org/news/learn-all-about-data-structures-used-in-computer-science/" class="markup--anchor markup--li-anchor">Data Structures Explained</a></span>
- <span id="5a14"><a href="https://rcoh.me/posts/cache-oblivious-datastructures/" class="markup--anchor markup--li-anchor">Introduction to Cache-Oblivious Data Structures (2018)</a></span>
- <span id="5ced"><a href="https://thedailycoding.com/" class="markup--anchor markup--li-anchor">The Daily Coding newsletter</a> — Master JavaScript and Data Structures.</span>
- <span id="63dd"><a href="https://www.cs.bham.ac.uk/~jxb/DSA/dsa.pdf" class="markup--anchor markup--li-anchor">Lectures Note for Data Structures and Algorithms (2019)</a></span>
- <span id="60bc"><a href="https://abhinavsarkar.net/posts/continuation-defunctionalization/" class="markup--anchor markup--li-anchor">Mechanically Deriving Binary Tree Iterators with Continuation Defunctionalization (2020)</a></span>
- <span id="446e"><a href="https://cp-algorithms.com/data_structures/segment_tree.html" class="markup--anchor markup--li-anchor">Segment Tree data structure</a></span>
- <span id="3a88"><a href="https://medium.com/@gballet/structure-of-a-binary-state-tree-part-1-48c587836d2f" class="markup--anchor markup--li-anchor">Structure of a binary state tree (2020)</a></span>
- <span id="86fd"><a href="https://github.com/sushinoya/fundamentals" class="markup--anchor markup--li-anchor">Introductory data structures and algorithms</a></span>
- <span id="1344"><a href="https://heap.io/blog/engineering/applying-textbook-data-structures-for-real-life-wins" class="markup--anchor markup--li-anchor">Applying Textbook Data Structures for Real Life Wins (2020)</a> (<a href="https://news.ycombinator.com/item?id=24761105" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="6bfa"><a href="https://www.youtube.com/watch?v=9XAx279s7gs" class="markup--anchor markup--li-anchor">Michael Scott — Nonblocking data structures lectures (2020)</a> — Nonblocking concurrent data structures are an increasingly valuable tool for shared-memory parallel programming.</span>
- <span id="fb01"><a href="https://github.com/cksystemsgroup/scal" class="markup--anchor markup--li-anchor">Scal</a> — High-performance multicore-scalable data structures and benchmarks. (<a href="http://scal.cs.uni-salzburg.at/" class="markup--anchor markup--li-anchor">Web</a>)</span>
- <span id="9fd5"><a href="https://github.com/HazyResearch/hyperbolics" class="markup--anchor markup--li-anchor">Hyperbolic embedding implementations</a></span>
- <span id="1d48"><a href="https://github.com/prathyvsh/morphisms-of-computational-structures" class="markup--anchor markup--li-anchor">Morphisms of Computational Constructs</a> — Visual catalogue + story of morphisms displayed across computational structures.</span>
- <span id="aeb8"><a href="http://djkooks.github.io/build-your-own-kv-store" class="markup--anchor markup--li-anchor">What is key-value store? (build-your-own-x) (2020)</a></span>
- <span id="f9af"><a href="https://stackoverflow.com/questions/500607/what-are-the-lesser-known-but-useful-data-structures" class="markup--anchor markup--li-anchor">Lesser Known but Useful Data Structures</a></span>
- <span id="7fbe"><a href="https://martin.kleppmann.com/2020/12/02/bloom-filter-hash-graph-sync.html" class="markup--anchor markup--li-anchor">Using Bloom filters to efficiently synchronize hash graphs (2020)</a></span>
- <span id="658b"><a href="https://llimllib.github.io/bloomfilter-tutorial/" class="markup--anchor markup--li-anchor">Bloom Filters by Example</a> (<a href="https://github.com/llimllib/bloomfilter-tutorial" class="markup--anchor markup--li-anchor">Code</a>)</span>
- <span id="8210"><a href="https://crypto.stanford.edu/pbc/notes/zdd/" class="markup--anchor markup--li-anchor">Binary Decision Diagrams</a> (<a href="https://news.ycombinator.com/item?id=25342922" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="c232"><a href="https://mochromatic.com/3-steps-to-designing-better-data-structures-in-elixir/" class="markup--anchor markup--li-anchor">3 Steps to Designing Better Data Structures (2020)</a></span>
- <span id="8b59"><a href="https://matteding.github.io/2019/04/25/sparse-matrices/" class="markup--anchor markup--li-anchor">Sparse Matrices (2019)</a> (<a href="https://news.ycombinator.com/item?id=25601288" class="markup--anchor markup--li-anchor">HN</a>)</span>
- <span id="43b6"><a href="https://github.com/xtaci/algorithms" class="markup--anchor markup--li-anchor">Algorithms &amp; Data Structures in C++</a></span>
- <span id="605a"><a href="https://drs.is/post/fancy-tree-traversals/" class="markup--anchor markup--li-anchor">Fancy Tree Traversals (2019)</a></span>
- <span id="b725"><a href="https://drs.is/post/robson-traversal/" class="markup--anchor markup--li-anchor">The Robson Tree Traversal (2019)</a></span>
- <span id="f67a"><a href="http://cr.yp.to/data.html" class="markup--anchor markup--li-anchor">Data structures and program structures</a></span>
- <span id="c4c4"><a href="http://cr.yp.to/cdb.html" class="markup--anchor markup--li-anchor">cdb</a> — Fast, reliable, simple package for creating and reading constant databases.</span>
- <span id="3ca0"><a href="https://pgm.di.unipi.it/" class="markup--anchor markup--li-anchor">PGM-index</a> — Learned indexes that match B-tree performance with 83x less space. (<a href="https://news.ycombinator.com/item?id=25899286" class="markup--anchor markup--li-anchor">HN</a>) (<a href="https://github.com/gvinciguerra/PGM-index" class="markup--anchor markup--li-anchor">Code</a>)</span>
- <span id="da38"><a href="https://minimalmodeling.substack.com/p/structural-and-pure-attributes" class="markup--anchor markup--li-anchor">Structural and pure attributes</a></span>
- <span id="2d44"><a href="http://aleksandar-prokopec.com/resources/docs/p137-prokopec.pdf" class="markup--anchor markup--li-anchor">Cache-Tries: O(1) Concurrent Lock-Free Hash Tries (2018)</a></span>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [June 4, 2021](https://medium.com/p/8bad647a8ad8).

<a href="https://medium.com/@bryanguner/data-structures-algorithms-resource-list-part-1-8bad647a8ad8" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Data Structures… Under The Hood

Data Structures Reference

---

### Data Structures… Under The Hood

### Data Structures Reference

---

### Array

Stores things in order. Has quick lookups by index.

### Linked List

Also stores things in order. Faster insertions and deletions than  
arrays, but slower lookups (you have to “walk down” the whole list).

!

### Queue

Like the line outside a busy restaurant. “First come, first served.”

### Stack

Like a stack of dirty plates in the sink. The first one you take off the  
top is the last one you put down.

### Tree

Good for storing hierarchies. Each node can have “child” nodes.

### Binary Search Tree

Everything in the left subtree is smaller than the current node,  
everything in the right subtree is larger. lookups, but only if the tree  
is balanced!

### Binary Search Tree

### Graph

Good for storing networks, geography, social relationships, etc.

### Heap

A binary tree where the smallest value is always at the top. Use it to implement a priority queue.

!\[A binary heap is a binary tree where the nodes are organized to so that the smallest value is always at the top.\]

### Adjacency list

A list where the index represents the node and the value at that index is a list of the node’s neighbors:

graph = \[ \[1\], \[0, 2, 3\], \[1, 3\], \[1, 2\], \]

Since node 3 has edges to nodes 1 and 2, graph\[3\] has the adjacency list \[1, 2\].

We could also use <a href="https://www.interviewcake.com/concept/hash-map" class="markup--anchor markup--p-anchor">a dictionary</a> where the keys represent the node and the values are the lists of neighbors.

graph = { 0: \[1\], 1: \[0, 2, 3\], 2: \[1, 3\], 3: \[1, 2\], }

This would be useful if the nodes were represented by strings, objects, or otherwise didn’t map cleanly to list indices.

### Adjacency matrix

A matrix of 0s and 1s indicating whether node x connects to node y (0 means no, 1 means yes).

graph = \[ \[0, 1, 0, 0\], \[1, 0, 1, 1\], \[0, 1, 0, 1\], \[0, 1, 1, 0\], \]

Since node 3 has edges to nodes 1 and 2, graph\[3\]\[1\] and graph\[3\]\[2\] have value 1.

a = LinkedListNode(5) b = LinkedListNode(1) c = LinkedListNode(9) a.next = b b.next = c

---

### Arrays

Ok, so we know how to store individual numbers. Let’s talk about storing _several numbers_.

That’s right, things are starting to _heat up_.

Suppose we wanted to keep a count of how many bottles of kombucha we drink every day.

Let’s store each day’s kombucha count in an 8-bit, fixed-width, unsigned integer. That should be plenty — we’re not likely to get through more than 256 (2⁸) bottles in a _single day_, right?

And let’s store the kombucha counts right next to each other in RAM, starting at memory address 0:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*FM_W-EkXYGYwG6LK" class="graf-image" /></figure>Bam. That’s an **array**. RAM is *basically* an array already.

Just like with RAM, the elements of an array are numbered. We call that number the **index** of the array element (plural: indices). In _this_ example, each array element’s index is the same as its address in RAM.

But that’s not usually true. Suppose another program like Spotify had already stored some information at memory address 2:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*IBpMv-88FpWo2gbu" class="graf-image" /></figure>We’d have to start our array below it, for example at memory address 3. So index 0 in our array would be at memory address 3, and index 1 would be at memory address 4, etc.:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Zeqpub-zKSWyyBeg" class="graf-image" /></figure>Suppose we wanted to get the kombucha count at index 4 in our array. How do we figure out what *address in memory* to go to? Simple math:

Take the array’s starting address (3), add the index we’re looking for (4), and that’s the address of the item we’re looking for. 3 + 4 = 7. In general, for getting the nth item in our array:

\\text{address of nth item in array} = \\text{address of array start} + n

This works out nicely because the size of the addressed memory slots and the size of each kombucha count are _both_ 1 byte. So a slot in our array corresponds to a slot in RAM.

But that’s not always the case. In fact, it’s _usually not_ the case. We _usually_ use _64-bit_ integers.

So how do we build an array of _64-bit_ (8 byte) integers on top of our _8-bit_ (1 byte) memory slots?

We simply give each array index _8_ address slots instead of 1:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Y_mxvkxQGPP7rqQJ" class="graf-image" /></figure>So we can still use simple math to grab the start of the nth item in our array — just gotta throw in some multiplication:

\\text{address of nth item in array} = \\text{address of array start} + (n \* \\text{size of each item in bytes})

Don’t worry — adding this multiplication doesn’t really slow us down. Remember: addition, subtraction, multiplication, and division of fixed-width integers takes time. So _all_ the math we’re using here to get the address of the nth item in the array takes time.

And remember how we said the memory controller has a _direct connection_ to each slot in RAM? That means we can read the stuff at any given memory address in time.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*kqv_M8aCHZWjRv90" class="graf-image" /></figure>**Together, this means looking up the contents of a given array index is time.** This fast lookup capability is the most important property of arrays.

But the formula we used to get the address of the nth item in our array only works _if_:

1.  <span id="ae12">**Each item in the array is the _same size_** (takes up the same</span>

number of bytes).

1.  <span id="cae3">**The array is _uninterrupted_ (contiguous) in memory**. There can’t</span>

be any gaps in the array…like to “skip over” a memory slot Spotify was already using.

These things make our formula for finding the nth item _work_ because they make our array _predictable_. We can _predict_ exactly where in memory the nth element of our array will be.

But they also constrain what kinds of things we can put in an array. Every item has to be the same size. And if our array is going to store a _lot_ of stuff, we’ll need a _bunch_ of uninterrupted free space in RAM. Which gets hard when most of our RAM is already occupied by other programs (like Spotify).

That’s the tradeoff. Arrays have fast lookups ( time), but each item in the array needs to be the same size, and you need a big block of uninterrupted free memory to store the array.

---

\#\# Pointers

Remember how we said every item in an array had to be the same size? Let’s dig into that a little more.

Suppose we wanted to store a bunch of ideas for baby names. Because we’ve got some _really_ cute ones.

Each name is a string. Which is really an array. And now we want to store _those arrays_ in an array. _Whoa_.

Now, what if our baby names have different lengths? That’d violate our rule that all the items in an array need to be the same size!

We could put our baby names in arbitrarily large arrays (say, 13 characters each), and just use a special character to mark the end of the string within each array…

<figure><img src="https://cdn-images-1.medium.com/max/800/0*DanfoIJ9nNaOKn-G" class="graf-image" /></figure>“Wigglesworth” is a cute baby name, right?

But look at all that wasted space after “Bill”. And what if we wanted to store a string that was _more_ than 13 characters? We’d be out of luck.

There’s a better way. Instead of storing the strings right inside our array, let’s just put the strings wherever we can fit them in memory. Then we’ll have each element in our array hold the _address in memory_ of its corresponding string. Each address is an integer, so really our outer array is just an array of integers. We can call each of these integers a **pointer**, since it points to another spot in memory.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*aLJ4pDr4uAXU1_Qs" class="graf-image" /></figure>The pointers are marked with a \* at the beginning.

Pretty clever, right? This fixes _both_ the disadvantages of arrays:

1.  <span id="0cd5">The items don’t have to be the same length — each string can be as</span>

long or as short as we want.

1.  <span id="8ecd">We don’t need enough uninterrupted free memory to store all our</span>

strings next to each other — we can place each of them separately, wherever there’s space in RAM.

We fixed it! No more tradeoffs. Right?

Nope. Now we have a _new_ tradeoff:

Remember how the memory controller sends the contents of _nearby_ memory addresses to the processor with each read? And the processor caches them? So reading sequential addresses in RAM is _faster_ because we can get most of those reads right from the cache?

<figure><img src="https://cdn-images-1.medium.com/max/800/0*UkWe4Y0h8O7mz0E_" class="graf-image" /></figure>Our original array was very **cache-friendly**, because everything was sequential. So reading from the 0th index, then the 1st index, then the 2nd, etc. got an extra speedup from the processor cache.

**But the pointers in this array make it _not_ cache-friendly**, because the baby names are scattered randomly around RAM. So reading from the 0th index, then the 1st index, etc. doesn’t get that extra speedup from the cache.

That’s the tradeoff. This pointer-based array requires less uninterrupted memory and can accommodate elements that aren’t all the same size, _but_ it’s _slower_ because it’s not cache-friendly.

This slowdown isn’t reflected in the big O time cost. Lookups in this pointer-based array are _still_ time.

---

### Linked lists

Our word processor is definitely going to need fast appends — appending to the document is like the _main thing_ you do with a word processor.

Can we build a data structure that can store a string, has fast appends, _and_ doesn’t require you to say how long the string will be ahead of time?

Let’s focus first on not having to know the length of our string ahead of time. Remember how we used _pointers_ to get around length issues with our array of baby names?

What if we pushed that idea even further?

What if each _character_ in our string were a _two-index array_ with:

1.  <span id="4410">the character itself 2. a pointer to the next character</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*KcG72KzdYU-ftXWq" class="graf-image" /></figure>We would call each of these two-item arrays a **node** and we’d call this series of nodes a **linked list**.

Here’s how we’d actually implement it in memory:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*0KZl9hNN_IFP15RH" class="graf-image" /></figure>Notice how we’re free to store our nodes wherever we can find two open slots in memory. They don’t have to be next to each other. They don’t even have to be *in order*:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*lSOAxFuMAS2xK3JI" class="graf-image" /></figure>“But that’s not cache-friendly, “ you may be thinking. Good point! We’ll get to that.

The first node of a linked list is called the **head**, and the last node is usually called the **tail**.

Confusingly, some people prefer to use “tail” to refer to _everything after the head_ of a linked list. In an interview it’s fine to use either definition. Briefly say which definition you’re using, just to be clear.

It’s important to have a pointer variable referencing the head of the list — otherwise we’d be unable to find our way back to the start of the list!

We’ll also sometimes keep a pointer to the tail. That comes in handy when we want to add something new to the end of the linked list. In fact, let’s try that out:

Suppose we had the string “LOG” stored in a linked list:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*c3-7UhJ39PZohsuz" class="graf-image" /></figure>Suppose we wanted to add an “S” to the end, to make it “LOGS”. How would we do that?

Easy. We just put it in a new node:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*U1OJCEX8zUd5QbuU" class="graf-image" /></figure>And tweak some pointers:

​1. Grab the last letter, which is “G”. Our tail pointer lets us do this in time.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*YzvjIGZQ6MnkGWcw" class="graf-image" /></figure>​2. Point the last letter’s next to the letter we’re appending (“S”).

<figure><img src="https://cdn-images-1.medium.com/max/800/0*-CA8KHc1tdRfVYoe" class="graf-image" /></figure>​3. Update the tail pointer to point to our *new* last letter, “S”.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Gbf918HOvlJhMHEf" class="graf-image" /></figure>That’s time.

Why is it time? Because the runtime doesn’t get bigger if the string gets bigger. No matter how many characters are in our string, we still just have to tweak a couple pointers for any append.

Now, what if instead of a linked list, our string had been a _dynamic array_? We might not have any room at the end, forcing us to do one of those doubling operations to make space:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*wSK-FGV0kCiskLNS" class="graf-image" /></figure>So with a dynamic array, our append would have a *worst-case* time cost of .

**Linked lists have worst-case -time appends, which is better than the worst-case time of dynamic arrays.**

That _worst-case_ part is important. The _average case_ runtime for appends to linked lists and dynamic arrays is the same: .

Now, what if we wanted to \*pre\*pend something to our string? Let’s say we wanted to put a “B” at the beginning.

For our linked list, it’s just as easy as appending. Create the node:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*MSenMuHQuHb1dV1X" class="graf-image" /></figure>And tweak some pointers:

1.  <span id="cf06">Point “B”’s next to “L”. 2. Point the head to “B”.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*GoeByRt15C4nQvQr" class="graf-image" /></figure>Bam. time again.

But if our string were a _dynamic array_…

<figure><img src="https://cdn-images-1.medium.com/max/800/0*PhElGwum7RgTPqAy" class="graf-image" /></figure>And we wanted to add in that “B”:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*n4qjPFNz4BVHBt5w" class="graf-image" /></figure>Eep. We have to *make room* for the “B”!

We have to move _each character_ one space down:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*n90vZS_Exw8Wjs2b" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*zryPfLJtzXqnGOth" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*PlEqTgXBKKpG5DCF" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*DampgIgyO6Silk8U" class="graf-image" /></figure>*Now* we can drop the “B” in there:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Xxkr4sYP9-drZeEe" class="graf-image" /></figure>What’s our time cost here?

It’s all in the step where we made room for the first letter. We had to move _all n_ characters in our string. One at a time. That’s time.

**So linked lists have faster \*pre\*pends ( time) than dynamic arrays ( time).**

No “worst case” caveat this time — prepends for dynamic arrays are _always_ time. And prepends for linked lists are _always_ time.

These quick appends and prepends for linked lists come from the fact that linked list nodes can go anywhere in memory. They don’t have to sit right next to each other the way items in an array do.

So if linked lists are so great, why do we usually store strings in an array? **Because** <a href="https://dev.to/bgoonz/common-data-structures-their-background-11eg#constant-time-array-lookups" class="markup--anchor markup--p-anchor"><strong>arrays have -time lookups</strong></a>**.** And those constant-time lookups _come from_ the fact that all the array elements are lined up next to each other in memory.

Lookups with a linked list are more of a process, because we have no way of knowing where the ith node is in memory. So we have to walk through the linked list node by node, counting as we go, until we hit the ith item.

def get_ith_item_in_linked_list(head, i): if i &lt; 0: raise ValueError(“i can’t be negative: %d” % i) current_node = head current_position = 0 while current_node: if current_position == i: \# Found it! return current_node \# Move on to the next node current_node = current_node.next current_position += 1 raise ValueError(‘List has fewer than i + 1 (%d) nodes’ % (i + 1))

That’s i + 1 steps down our linked list to get to the ith node (we made our function zero-based to match indices in arrays). **So linked lists have -time lookups.** Much slower than the -time lookups for arrays and dynamic arrays.

Not only that — **walking down a linked list is _not_ cache-friendly.** Because the next node could be _anywhere_ in memory, we don’t get any benefit from the processor cache. This means lookups in a linked list are even slower.

So the tradeoff with linked lists is they have faster prepends and faster appends than dynamic arrays, _but_ they have slower lookups.

---

\#\# Doubly Linked Lists

In a basic linked list, each item stores a single pointer to the next element.

In a **doubly linked list**, items have pointers to the next _and the previous_ nodes.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*OEAPr9oLUTWovm86" class="graf-image" /></figure>Doubly linked lists allow us to traverse our list *backwards*. In a *singly* linked list, if you just had a pointer to a node in the *middle* of a list, there would be *no way* to know what nodes came before it. Not a problem in a doubly linked list.

### Not cache-friendly

Most computers have <a href="https://www.interviewcake.com/article/data-structures-coding-interview#ram" class="markup--anchor markup--p-anchor">caching systems that make reading from sequential addresses in memory faster than reading from scattered addresses</a>.

<a href="https://www.interviewcake.com/concept/array" class="markup--anchor markup--p-anchor">Array</a> items are always located right next to each other in computer memory, but linked list nodes can be scattered all over.

So iterating through a linked list is usually quite a bit slower than iterating through the items in an array, even though they’re both theoretically time.

---

### Hash tables

Quick lookups are often really important. For that reason, we tend to use arrays (-time lookups) much more often than linked lists (-time lookups).

For example, suppose we wanted to count how many times each ASCII character appears in <a href="https://raw.githubusercontent.com/GITenberg/The-Tragedy-of-Romeo-and-Juliet_1112/master/1112.txt" class="markup--anchor markup--p-anchor">Romeo and Juliet</a>. How would we store those counts?

We can use arrays in a clever way here. Remember — characters are just numbers. In ASCII (a common character encoding) ‘A’ is 65, ‘B’ is 66, etc.

So we can use the character(‘s number value) as the _index_ in our array, and store the _count_ for that character _at that index_ in the array:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*84jW_RfhW2MNqLGl" class="graf-image" /></figure>With this array, we can look up (and edit) the count for any character in constant time. Because we can access any index in our array in constant time.

Something interesting is happening here — this array isn’t just a list of values. This array is storing _two_ things: characters and counts. The characters are _implied_ by the indices.

**So we can think of an array as a _table_ with _two columns_…except you don’t really get to pick the values in one column (the indices) — they’re always 0, 1, 2, 3, etc.**

But what if we wanted to put _any_ value in that column and still get quick lookups?

Suppose we wanted to count the number of times each _word_ appears in Romeo and Juliet. Can we adapt our array?

Translating a _character_ into an array index was easy. But we’ll have to do something more clever to translate a _word_ (a string) into an array index…

<figure><img src="https://cdn-images-1.medium.com/max/800/0*YuLIJSmkIcaveoBk" class="graf-image" /></figure>Here’s one way we could do it:

Grab the number value for each character and add those up.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*viH0fNvJKep80ecH" class="graf-image" /></figure>The result is 429. But what if we only have *30* slots in our array? We’ll use a common trick for forcing a number into a specific range: the modulus operator (%). Modding our sum by 30 ensures we get a whole number that’s less than 30 (and at least 0):

429 \\: \\% \\: 30 = 9

Bam. That’ll get us from a word (or any string) to an array index.

This data structure is called a **hash table** or **hash map**. In our hash table, the _counts_ are the **values** and the _words_ (“lies, “ etc.) are the **keys** (analogous to the _indices_ in an array). The process we used to translate a key into an array index is called a **hashing function**.

!\[A blank array except for a 20, labeled as the value, stored at index

1.  <span id="fadd">To the left the array is the word “lies,” labeled as the key, with an</span>

arrow pointing to the right at diamond with a question mark in the middle, labeled as the hashing function. The diamond points to the 9th index of the array.\](<a href="https://www.interviewcake.com/images/svgs/cs_for_hackers__hash_tables_lies_key_labeled.svg?bust=209" class="markup--anchor markup--p-anchor">https://www.interviewcake.com/images/svgs/cs_for_hackers\_\_hash_tables_lies_key_labeled.svg?bust=209</a>)

The hashing functions used in modern systems get pretty complicated — the one we used here is a simplified example.

Note that our quick lookups are only in one direction — we can quickly get the value for a given key, but the only way to get the key for a given value is to walk through all the values and keys.

Same thing with arrays — we can quickly look up the value at a given index, but the only way to figure out the index for a given value is to walk through the whole array.

One problem — what if two keys hash to the same index in our array? Look at “lies” and “foes”:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*FEGUBbShygDT_Xmp" class="graf-image" /></figure>They both sum up to 429! So of course they’ll have the same answer when we mod by 30:

429 \\: \\% \\: 30 = 9

So our hashing function gives us the same answer for “lies” and “foes.” This is called a **hash collision**. There are a few different strategies for dealing with them.

Here’s a common one: instead of storing the actual values in our array, let’s have each array slot hold a _pointer_ to a _linked list_ holding the counts for all the words that hash to that index:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*FJ_oFYwm3xi5gvS6" class="graf-image" /></figure>One problem — how do we know which count is for “lies” and which is for “foes”? To fix this, we’ll store the *word* as well as the count in each linked list node:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*zUqqK4NJil6nCjlK" class="graf-image" /></figure>“But wait!” you may be thinking, “Now lookups in our hash table take time in the worst case, since we have to walk down a linked list.” That’s true! You could even say that in the worst case *every* key creates a hash collision, so our whole hash table *degrades to a linked list*.

In industry though, we usually wave our hands and say **collisions are rare enough that on _average_ lookups in a hash table are time**. And there are fancy algorithms that keep the number of collisions low and keep the lengths of our linked lists nice and short.

But that’s sort of the tradeoff with hash tables. You get fast lookups by key…except _some_ lookups could be slow. And of course, you only get those fast lookups in one direction — looking up the _key_ for a given _value_ still takes time

### Breadth-First Search (BFS) and Breadth-First Traversal

**Breadth-first search** (BFS) is a method for exploring a tree or graph. In a BFS, you first explore all the nodes one step away, then all the nodes two steps away, etc.

Breadth-first search is like throwing a stone in the center of a pond. The nodes you explore “ripple out” from the starting point.

Here’s a how a BFS would traverse this tree, starting with the root:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*m463vT-gl3X8F6AS" class="graf-image" /></figure>We’d visit all the immediate children (all the nodes that’re one step away from our starting node):

<figure><img src="https://cdn-images-1.medium.com/max/800/0*_un0xsKDp2pgNPoM" class="graf-image" /></figure>Then we’d move on to all *those* nodes’ children (all the nodes that’re *two steps* away from our starting node):

<figure><img src="https://cdn-images-1.medium.com/max/800/0*b6vBOLT_H0Bpf2v4" class="graf-image" /></figure>And so on:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*CtPtZ_RChr2hrfH8" class="graf-image" /></figure>Until we reach the end.

Breadth-first search is often compared with **depth-first search**.

Advantages:

- <span id="123c">A BFS will find the **shortest path** between the starting point and</span>

any other reachable node. A depth-first search will not necessarily find the shortest path.

Disadvantages

- <span id="a412">A BFS on a binary tree _generally_ requires more memory than a DFS.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*1ptw-98Yjj1scRX6" class="graf-image" /></figure>### Binary Search Tree

A **binary tree** is a **tree** where &lt;==(**_every node has two or fewer children_**)==&gt;.  
The children are usually called **_left_** and **_right_**.

class BinaryTreeNode(object):

This lets us build a structure like this:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*jrVPHH5A60cni3qY" class="graf-image" /></figure>That particular example is special because every level of the tree is completely full. There are no “gaps.” We call this kind of tree “**perfect**.”

Binary trees have a few interesting properties when they’re perfect:

**Property 1: the number of total nodes on each “level” doubles as we move down the tree.**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*r1nTqbN_TJyaaT4L" class="graf-image" /></figure>**Property 2: the number of nodes on the last level is equal to the sum of the number of nodes on all other levels (plus 1).** In other words, about *half* of our nodes are on the last level.

&lt;==(\*\*Let’s call the number of nodes n, \*\*)==&gt;

&lt;==(**\_**and the height of the tree h. **\_**)==&gt;

**h can also be thought of as the “number of levels.”**

If we had h, how could we calculate n?

Let’s just add up the number of nodes on each level!

If we zero-index the levels, the number of nodes on the xth level is exactly 2^x.

1.  <span id="937f">Level 0: 2⁰ nodes,</span>
2.  <span id="5630">2. Level 1: 2¹ nodes,</span>
3.  <span id="72ca">3. Level 2: 2² nodes,</span>
4.  <span id="fd85">4. Level 3: 2³ nodes,</span>
5.  <span id="1685">5. _etc_</span>

So our total number of nodes is:

**n = 2⁰ + 2¹ + 2² + 2³ + … + 2^{h-1}**

Why only up to 2^{h-1}?

Notice that we **started counting our levels at 0.**

- <span id="7500">So if we have h levels in total,</span>
- <span id="6752">the last level is actually the “h-1”-th level.</span>
- <span id="da3a">That means the number of nodes on the last level is 2^{h-1}.</span>

But we can simplify.

**Property 2 tells us that the number of nodes on the last level is (1 more than) half of the total number of nodes**,

**so we can just take the number of nodes on the last level, multiply it by 2, and subtract 1 to get the number of nodes overall**.

- <span id="d63d">We know the number of nodes on the last level is 2^{h-1},</span>
- <span id="1c97">So:</span>

**n = 2^{h-1} \* 2–1  
n = 2^{h-1} \* 2¹ — 1  
n = 2^{h-1+1}- 1  
n = 2^{h} — 1**

So that’s how we can go from h to n. What about the other direction?

We need to bring the h down from the exponent.

That’s what logs are for!

First, some quick review.

&lt;==(log\_{10} (100) )==&gt;

simply means,

**“What power must you raise 10 to in order to get 100?”**.

Which is 2,

because .

&lt;==(10² = 100 )==&gt;

### Graph Data Structure: Directed, Acyclic, etc

Graph =====

### Binary numbers

Let’s put those bits to use. Let’s store some stuff. Starting with numbers.

The number system we usually use (the one you probably learned in elementary school) is called **base 10**, because each digit has _ten_ possible values (1, 2, 3, 4, 5, 6, 7, 8, 9, and 0).

But computers don’t have digits with ten possible values. They have _bits_ with _two_ possible values. So they use **base 2** numbers.

Base 10 is also called **decimal**. Base 2 is also called **binary**.

To understand binary, let’s take a closer look at how decimal numbers work. Take the number “101” in decimal:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*SeL92lcm_RTuG-32" class="graf-image" /></figure>Notice we have two “1”s here, but they don’t *mean* the same thing. The leftmost “1” *means* 100, and the rightmost “1” *means* 1. That’s because the leftmost “1” is in the hundreds place, while the rightmost “1” is in the ones place. And the “0” between them is in the tens place.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*5kyLwItFLJiwsDRY" class="graf-image" /></figure>**So this “101” in base 10 is telling us we have “1 hundred, 0 tens, and 1 one.”**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*BHTYqymE77CnzKpP" class="graf-image" /></figure>Notice how the *places* in base 10 (ones place, tens place, hundreds place, etc.) are *sequential powers of 10*:

- <span id="8102">10⁰=1 \* 10¹=10 \* 10²=100 \* 10³=1000 \* etc.</span>

**The places in _binary_ (base 2) are sequential powers of _2_:**

- <span id="1ddc">2⁰=1 \* 2¹=2 \* 2²=4 \* 2³=8 \* etc.</span>

So let’s take that same “101” but this time let’s read it as a _binary_ number:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*pKEnJ9JCGcMapiG4" class="graf-image" /></figure>Reading this from right to left: we have a 1 in the ones place, a 0 in the twos place, and a 1 in the fours place. So our total is 4 + 0 + 1 which is 5.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*bCIyxai2cNhILyxr" class="graf-image" /></figure>### Discover More:

<a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br />
<em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [June 4, 2021](https://medium.com/p/660256c2e4e3).

<a href="https://medium.com/@bryanguner/data-structures-under-the-hood-660256c2e4e3" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Deploy React App To Heroku Using Postgres & Express

Heroku is an web application that makes deploying applications easy for a beginner.

---

### Deploy React App To Heroku Using Postgres & Express

Heroku is an web application that makes deploying applications easy for a beginner.

Before you begin deploying, make sure to remove any `console.log`'s or `debugger`'s in any production code. You can search your entire project folder if you are using them anywhere.

You will set up Heroku to run on a production, not development, version of your application. When a Node.js application like yours is pushed up to Heroku, it is identified as a Node.js application because of the `package.json` file. It runs `npm install` automatically. Then, if there is a `heroku-postbuild` script in the `package.json` file, it will run that script. Afterwards, it will automatically run `npm start`.

In the following phases, you will configure your application to work in production, not just in development, and configure the `package.json` scripts for `install`, `heroku-postbuild` and `start` scripts to install, build your React application, and start the Express production server.

### Phase 1: Heroku Connection

If you haven’t created a Heroku account yet, create one <a href="https://signup.heroku.com/" class="markup--anchor markup--p-anchor">here</a>.

Add a new application in your <a href="https://dashboard.heroku.com/" class="markup--anchor markup--p-anchor">Heroku dashboard</a> named whatever you want. Under the “Resources” tab in your new application, click “Find more add-ons” and add the “Heroku Postgres” add-on with the free Hobby Dev setting.

In your terminal, install the <a href="https://devcenter.heroku.com/articles/heroku-command-line" class="markup--anchor markup--p-anchor">Heroku CLI</a>. Afterwards, login to Heroku in your terminal by running the following:

    heroku login

Add Heroku as a remote to your project’s git repository in the following command and replace `<name-of-Heroku-app>` with the name of the application you created in the <a href="https://dashboard.heroku.com/" class="markup--anchor markup--p-anchor">Heroku dashboard</a>.

    heroku git:remote -a <name-of-Heroku-app>

Next, you will set up your Express + React application to be deployable to Heroku.

### Phase 2: Setting up your Express + React application

Right now, your React application is on a different localhost port than your Express application. However, since your React application only consists of static files that don’t need to bundled continuously with changes in production, your Express application can serve the React assets in production too. These static files live in the `frontend/build` folder after running `npm run build` in the `frontend` folder.

Add the following changes into your `backend/routes.index.js` file.

At the root route, serve the React application’s static `index.html` file along with `XSRF-TOKEN` cookie. Then serve up all the React application's static files using the `express.static` middleware. Serve the `index.html` and set the `XSRF-TOKEN` cookie again on all routes that don't start in `/api`. You should already have this set up in `backend/routes/index.js` which should now look like this:

    // backend/routes/index.js
    const express = require('express');
    const router = express.Router();
    const apiRouter = require('./api');

    router.use('/api', apiRouter);

    // Static routes
    // Serve React build files in production
    if (process.env.NODE_ENV === 'production') {
      const path = require('path');
      // Serve the frontend's index.html file at the root route
      router.get('/', (req, res) => {
        res.cookie('XSRF-TOKEN', req.csrfToken());
        res.sendFile(
          path.resolve(__dirname, '../../frontend', 'build', 'index.html')
        );
      });

      // Serve the static assets in the frontend's build folder
      router.use(express.static(path.resolve("../frontend/build")));

      // Serve the frontend's index.html file at all other routes NOT starting with /api
      router.get(/^(?!\/?api).*/, (req, res) => {
        res.cookie('XSRF-TOKEN', req.csrfToken());
        res.sendFile(
          path.resolve(__dirname, '../../frontend', 'build', 'index.html')
        );
      });
    }

    // Add a XSRF-TOKEN cookie in development
    if (process.env.NODE_ENV !== 'production') {
      router.get('/api/csrf/restore', (req, res) => {
        res.cookie('XSRF-TOKEN', req.csrfToken());
        res.status(201).json({});
      });
    }

    module.exports = router;

Your Express backend’s `package.json` should include scripts to run the `sequelize` CLI commands.

The `backend/package.json`'s scripts should now look like this:

    "scripts": {
        "sequelize": "sequelize",
        "sequelize-cli": "sequelize-cli",
        "start": "per-env",
        "start:development": "nodemon -r dotenv/config ./bin/www",
        "start:production": "node ./bin/www"
      },

Initialize a `package.json` file at the very root of your project directory (outside of both the `backend` and `frontend` folders). The scripts defined in this `package.json` file will be run by Heroku, not the scripts defined in the `backend/package.json` or the `frontend/package.json`.

When Heroku runs `npm install`, it should install packages for both the `backend` and the `frontend`. Overwrite the `install` script in the root `package.json` with:

    npm --prefix backend install backend && npm --prefix frontend install frontend

This will run `npm install` in the `backend` folder then run `npm install` in the `frontend` folder.

Next, define a `heroku-postbuild` script that will run the `npm run build` command in the `frontend` folder. Remember, Heroku will automatically run this script after running `npm install`.

Define a `sequelize` script that will run `npm run sequelize` in the `backend` folder.

Finally, define a `start` that will run `npm start` in the \`backend folder.

The root `package.json`'s scripts should look like this:

    "scripts": {
        "heroku-postbuild": "npm run build --prefix frontend",
        "install": "npm --prefix backend install backend && npm --prefix frontend install frontend",
        "dev:backend": "npm install --prefix backend start",
        "dev:frontend": "npm install --prefix frontend start",
        "sequelize": "npm run --prefix backend sequelize",
        "sequelize-cli": "npm run --prefix backend sequelize-cli",
        "start": "npm start --prefix backend"
      },

The `dev:backend` and `dev:frontend` scripts are optional and will not be used for Heroku.

Finally, commit your changes.

### Phase 3: Deploy to Heroku

Once you’re finished setting this up, navigate to your application’s Heroku dashboard. Under “Settings” there is a section for “Config Vars”. Click the `Reveal Config Vars` button to see all your production environment variables. You should have a `DATABASE_URL` environment variable already from the Heroku Postgres add-on.

Add environment variables for `JWT_EXPIRES_IN` and `JWT_SECRET` and any other environment variables you need for production.

You can also set environment variables through the Heroku CLI you installed earlier in your terminal. See the docs for <a href="https://devcenter.heroku.com/articles/config-vars" class="markup--anchor markup--p-anchor">Setting Heroku Config Variables</a>.

Push your project to Heroku. Heroku only allows the `master` branch to be pushed. But, you can alias your branch to be named `master` when pushing to Heroku. For example, to push a branch called `login-branch` to `master` run:

    git push heroku login-branch:master

If you do want to push the `master` branch, just run:

    git push heroku master

You may want to make two applications on Heroku, the `master` branch site that should have working code only. And your `staging` site that you can use to test your work in progress code.

Now you need to migrate and seed your production database.

Using the Heroku CLI, you can run commands inside of your production application just like in development using the `heroku run` command.

For example to migrate the production database, run:

    heroku run npm run sequelize db:migrate

To seed the production database, run:

    heroku run npm run sequelize db:seed:all

Note: You can interact with your database this way as you’d like, but beware that `db:drop` cannot be run in the Heroku environment. If you want to drop and create the database, you need to remove and add back the "Heroku Postgres" add-on.

Another way to interact with the production application is by opening a bash shell through your terminal by running:

    heroku bash

In the opened shell, you can run things like `npm run sequelize db:migrate`.

Open your deployed site and check to see if you successfully deployed your Express + React application to Heroku!

If you see an `Application Error` or are experiencing different behavior than what you see in your local environment, check the logs by running:

    heroku logs

If you want to open a connection to the logs to continuously output to your terminal, then run:

    heroku logs --tail

The logs may clue you into why you are experiencing errors or different behavior.

#### If you found this guide helpful feel free to checkout my github/gists where I host similar content:

<a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a>

<a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br />
<em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

### Alternate Instructions:

### Deploy MERN App To Heroku:

#### Source: <a href="https://dev.to/stlnick/how-to-deploy-a-full-stack-mern-app-with-heroku-netlify-ncb" class="markup--anchor markup--h4-anchor">Article</a>

### Discover More:

<a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br />
<em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/70b7ea807986).

<a href="https://medium.com/@bryanguner/deploy-react-app-to-heroku-using-postgres-express-70b7ea807986" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Emmet Cheat Sheet

EMMET

---

### Emmet Cheat Sheet

### EMMET

_The a toolkit for web-developers_

### Introduction

Emmet is a productivity toolkit for web developers that uses expressions to generate HTML snippets.

### Installation

Normally, installation for Emmet should be a straight-forward process from the package-manager, as most of the modern text editors support Emmet.

### Usage

You can use Emmet in two ways:

- <span id="856f">Tab Expand Way: Type your emmet code and press `Tab` key</span>
- <span id="9aea">Interactive Method: Press `alt + ctrl + Enter` and start typing your expressions. This should automatically generate HTML snippets on the fly.</span>

**This cheatsheet will assume that you press** `Tab` **after each expressions.**

### HTML

### Generating HTML 5 DOCTYPE

`html:5`  
Will generate

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>

    </body>
    </html>

### Child items

Child items are created using `>`

`ul>li>p`

    <ul>
      <li>
        <p></p>
      </li>
    </ul>

### Sibling Items

Sibling items are created using `+`

`html>head+body`

    <html>
    <head></head>
    <body>

    </body>
    </html>

### Multiplication

Items can be multiplied by `*`

`ul>li*5`

    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

### Grouping

Items can be grouped together using `()`

`table>(tr>th*5)+tr>t*5`

    <table>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <t></t>
        <t></t>
        <t></t>
        <t></t>
        <t></t>
      </tr>
    </table>

### Class and ID

Class and Id in Emmet can be done using `.` and `#`

`div.heading`

    <div class="heading"></div>

`div#heading`

    <div id="heading"></div>

ID and Class can also be combined together

`div#heading.center`

    <div id="heading" class="center"></div>

### Adding Content inside tags

Contents inside tags can be added using `{}`

`h1{Emmet is awesome}+h2{Every front end developers should use this}+p{This is paragraph}*2`

    <h1>Emmet is awesome</h1>
    <h2>Every front end developers should use this</h2>
    <p>This is paragraph</p>
    <p>This is paragraph</p>

### Attributes inside HTML tags

Attributes can be added using `[]`

`a[href=https://?google.com data-toggle=something target=_blank]`

    <a href="https://?google.com" data-toggle="something" target="_blank"></a>

### Numbering

Numbering can be done using `$`  
You can use this inside tag or contents.

`h${This is so awesome $}*6`

    <h1>This is so awesome 1</h1>
    <h2>This is so awesome 2</h2>
    <h3>This is so awesome 3</h3>
    <h4>This is so awesome 4</h4>
    <h5>This is so awesome 5</h5>
    <h6>This is so awesome 6</h6>

Use `@-` to reverse the Numbering

`img[src=image$$@-.jpg]*5`

    <img src="image05.jpg" alt="">
    <img src="image04.jpg" alt="">
    <img src="image03.jpg" alt="">
    <img src="image02.jpg" alt="">
    <img src="image01.jpg" alt="">

To start the numbering from specific number, use this way

`img[src=emmet$@100.jpg]*5`

    <img src="emmet100.jpg" alt="">
    <img src="emmet101.jpg" alt="">
    <img src="emmet102.jpg" alt="">
    <img src="emmet103.jpg" alt="">
    <img src="emmet104.jpg" alt="">

### Tips

- <span id="b708">Use `:` to expand known abbreviations</span>

`input:date`

    <input type="date" name="" id="">

`form:post`

    <form action="" method="post"></form>

`link:css`

    <link rel="stylesheet" href="style.css">

- <span id="d43e">Building Navbar</span>

`.navbar>ul>li*3>a[href=#]{Item $@-}`

    <div class="navbar">
      <ul>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 1</a></li>
      </ul>
    </div>

### CSS

Emmet works surprisingly well with css as well.

- <span id="68eb">`f:l`</span>

<!-- -->

    float: left;

You can also use any options n/r/l

- <span id="d9cc">`pos:a­`</span>

<!-- -->

    position: absolute;

Also use any options, pos:a/r/f

- <span id="5b67">`d:n/b­/f/­i/ib`</span>

`d:ib`

    display: inline-block;

- <span id="26f6">You can use `m` for margin and `p` for padding followed by direction</span>

`mr` -&gt; `margin-right`

`pr` -&gt; `padding-right`

- <span id="01cc">`@f` will result in</span>

<!-- -->

    @font-face {
      font-family:;
      src:url();
    }

You can also use these shorthands

<figure><img src="https://cdn-images-1.medium.com/max/800/1*h8hsUrJNyVRLYqBQP63DCA.png" class="graf-image" /></figure>#### If you found this guide helpful feel free to checkout my github/gists where I host similar content:

<a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a>

<a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br />
<em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

Or Checkout my personal Resource Site:

<a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br />
<em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/24758e628d37).

<a href="https://medium.com/@bryanguner/emmet-cheat-sheet-24758e628d37" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# 10 Essential React Interview Questions For Aspiring Frontend Developers

Comprehensive React Cheatsheet included at the bottom of this article!

---

### 10 Essential React Interview Questions For Aspiring Frontend Developers

#### Comprehensive React Cheatsheet included at the bottom of this article!

### Resources:

<a href="https://javascript.plainenglish.io/introduction-to-react-for-complete-beginners-8021738aa1ad" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/introduction-to-react-for-complete-beginners-8021738aa1ad"><strong>Introduction to React for Complete Beginners</strong><br />
<em>All of the code examples below will be included a second time at the bottom of this article as an embedded gist.</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/introduction-to-react-for-complete-beginners-8021738aa1ad" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://bryanguner.medium.com/introductory-react-part-2-cda01615a186" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/introductory-react-part-2-cda01615a186"><strong>Beginner’s Guide To React Part 2</strong><br />
<em>As I learn to build web applications in React I will blog about it in this series in an attempt to capture the…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/introductory-react-part-2-cda01615a186" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://github.com/bgoonz/React_Notes_V3" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz/React_Notes_V3"><strong>bgoonz/React_Notes_V3</strong><br />
<em>A JavaScript library for building user interfaces Declarative React makes it painless to create interactive UIs. Design…</em>github.com</a><a href="https://github.com/bgoonz/React_Notes_V3" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://reactjs.org/docs" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://reactjs.org/docs"><strong>Getting Started - React</strong><br />
<em>A JavaScript library for building user interfaces</em>reactjs.org</a><a href="https://reactjs.org/docs" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

### Also … here is my brand new blog site… built with react and a static site generator called GatsbyJS!

#### It’s a work in progress

<a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--p-anchor">https://bgoonz-blog.netlify.app/</a>

<figure><img src="https://cdn-images-1.medium.com/max/1200/1*t3UQh848ndt4rgr_fDToaw.png" class="graf-image" /></figure>

---

<figure><img src="https://cdn-images-1.medium.com/max/800/0*39weCjnVdDf0Kuzj" alt="Photo by Ferenc Almasi on Unsplash" class="graf-image" /><figcaption>Photo by <a href="https://unsplash.com/@flowforfrank?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor">Ferenc Almasi</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor">Unsplash</a></figcaption></figure>### Beginning of the Article:

**Pros**

1.  <span id="156e">Easy to learn</span>
2.  <span id="859a">HTML-like syntax allows templating and highly detailed documentation</span>
3.  <span id="5b3a">Supports server-side rendering</span>
4.  <span id="cb03">Easy migrating between different versions of React</span>
5.  <span id="7332">Uses JavaScript rather than framework-specific code</span>

**Cons**

1.  <span id="e1f7">Poor documentation</span>
2.  <span id="db68">Limited to only view part of MVC</span>
3.  <span id="814a">New developers might see JSC as a barrier</span>

### Where to Use React

1.  <span id="fa3e">For apps that have multiple events</span>
2.  <span id="f46a">When your app development team excels in CSS, JavaScript and HTML</span>
3.  <span id="2d25">You want to create sharable components on your app</span>
4.  <span id="9729">When you need a personalized app solution</span>

### Misconceptions about React

#### <a href="https://aglowiditsolutions.com/blog/react-vs-angular/" class="markup--anchor markup--h4-anchor">React is a framework</a>:

<a href="https://aglowiditsolutions.com/blog/react-vs-angular/" class="markup--anchor markup--p-anchor">Many developers an</a>d aspiring students misinterpret React to be a fully functional framework. It is because we often compare React with major frameworks such as Angular and Ember. This comparison is not to compare the best frameworks but to focus on the differences and similarities of React and Angular’s approach that makes their offerings worth studying. Angular works on **the MVC model** to support the Model, View, and Controller layers of an app. React focuses only on the ‘V,’ which is the **view layer** of an application and how to make handling it easier to integrate smoothly into a project.

#### React’s Virtual DOM is faster than DOM.

React uses a **Virtual DOM**, which is essentially a tree of JavaScript objects representing the actual browser DOM. The advantage of using this for the developers is that they don’t manipulate the DOM directly as developers do with jQuery when they write React apps. Instead, they would tell React how they want the DOM to make changes to the state object and allow React to make the necessary updates to the browser DOM. This helps create a comprehensive development model for developers as they don’t need to track all DOM changes. They can modify the state object, and React would use its algorithms to understand what part of UI changed compared to the previous DOM. Using this information updates the actual browser DOM. Virtual DOM provides an excellent API for creating UI and minimizes the update count to be made on the browser DOM.

However, it is **not faster** than the actual DOM. You just read that it needs to pull extra strings to figure out what part of UI needs to be updated before actually performing those updates. Hence, Virtual DOM is beneficial for many things, but it **_isn’t faster than DOM._**

---

### **1. Explain how React uses a tree data structure called the virtual DOM to model the DOM**

> The virtual DOM is a copy of the actual DOM tree. Updates in React are made to the virtual DOM. React uses a diffing algorithm to reconcile the changes and send the to the DOM to commit and paint.

### **2. Create virtual DOM nodes using JSX** To create a React virtual DOM node using JSX, define HTML syntax in a JavaScript file.

> Here, the JavaScript hello variable is set to a React virtual DOM h1 element with the text “Hello World!”.

> You can also nest virtual DOM nodes in each other just like how you do it in HTML with the real DOM.

### **3. Use debugging tools to determine when a component is rendering**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*jf3yl4GKDHpxmPJk.gif" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/600/0*hBOo6hfwhKwS5UDM.jpg" class="graf-image" /></figure>#### We use the React DevTools extension as an extension in our Browser DevTools to debug and view when a component is rendering

### **4. Describe how JSX transforms into actual DOM nodes**

- <span id="358b">To transfer JSX into DOM nodes, we use the ReactDOM.render method. It takes a React virtual DOM node’s changes allows Babel to transpile it and sends the JS changes to commit to the DOM.</span>

### **5. Use the** `ReactDOM.render` **method to have React render your virtual DOM nodes under an actual DOM node**

---

### **6. Attach an event listener to an actual DOM node using a virtual node**

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called <a href="https://reactjs.org/docs/reconciliation.html" class="markup--anchor markup--p-anchor">reconciliation</a>.

This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.

Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term “virtual DOM” is usually associated with <a href="https://reactjs.org/docs/rendering-elements.html" class="markup--anchor markup--p-anchor">React elements</a> since they are the objects representing the user interface. React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React.

### Is the Shadow DOM the same as the Virtual DOM?

No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.

- <span id="8534">To add an event listener to an element, define a method to handle the event and associate that method with the element event you want to listen for:</span>

### **7. Use** `create-react-app` **to initialize a new React app and import required dependencies**

- <span id="6d60">Create the default create-react-application by typing in our terminal</span>

#### <a href="https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/" class="markup--anchor markup--h4-anchor">Explanation of npm vs npx from Free Code Camp:</a>

**npm** (node package manager) is the dependency/package manager you get out of the box when you install Node.js. It provides a way for developers to install packages both globally and locally.

Sometimes you might want to take a look at a specific package and try out some commands. But you cannot do that without installing the dependencies in your local `node_modules` folder.

### npm the package manager

npm is a couple of things. First and foremost, it is an online repository for the publishing of open-source Node.js projects.

Second, it is a CLI tool that aids you to install those packages and manage their versions and dependencies. There are hundreds of thousands of Node.js libraries and applications on npm and many more are added every day.

npm by itself doesn’t run any packages. If you want to run a package using npm, you must specify that package in your `package.json` file.

When executables are installed via npm packages, npm creates links to them:

- <span id="7798">**local** installs have links created at the `./node_modules/.bin/` directory</span>
- <span id="a534">**global** installs have links created from the global `bin/` directory (for example: `/usr/local/bin` on Linux or at `%AppData%/npm` on Windows)</span>

To execute a package with npm you either have to type the local path, like this:

    $ ./node_modules/.bin/your-package

or you can run a locally installed package by adding it into your `package.json` file in the scripts section, like this:

    {
      "name": "your-application",
      "version": "1.0.0",
      "scripts": {
        "your-package": "your-package"
      }
    }

Then you can run the script using `npm run`:

    npm run your-package

You can see that running a package with plain npm requires quite a bit of ceremony.

Fortunately, this is where **npx** comes in handy.

### npx the package runner

Since npm version <a href="https://github.com/npm/npm/releases/tag/v5.2.0" class="markup--anchor markup--p-anchor">5.2.0</a> npx is pre-bundled with npm. So it’s pretty much a standard nowadays.

**npx** is also a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the npm registry.

It’s now very easy to run any sort of Node.js-based executable that you would normally install via npm.

You can run the following command to see if it is already installed for your current npm version:

    $ which npx

If it’s not, you can install it like this:

    $ npm install -g npx

Once you make sure you have it installed, let’s see a few of the use cases that make **npx** extremely helpful.

### Run a locally installed package easily

If you wish to execute a locally installed package, all you need to do is type:

    $ npx your-package

npx will check whether `<command>` or `<package>` exists in `$PATH`, or in the local project binaries, and if so it will execute it.

### Execute packages that are not previously installed

Another major advantage is the ability to execute a package that wasn’t previously installed.

Sometimes you just want to use some CLI tools but you don’t want to install them globally just to test them out. This means you can save some disk space and simply run them only when you need them. This also means your global variables will be less polluted.

> Now, where were we?

`npx create-react-app <name of app> --use-npm`

- <span id="e1cb">npx gives us the latest version. `--use-npm` just means to use npm instead of yarn or some other package manager</span>

### **8. Pass props into a React component**

- <span id="9111">`props` is an object that gets passed down from the parent component to the child component. The values can be of any data structure including a function (which is an object)</span>

<!-- -->

- <span id="7a12">You can also <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" class="markup--anchor markup--li-anchor">interpolate values</a> into JSX.</span>
- <span id="f405">Set a variable to the string, “world”, and replace the string of “world” in the NavLinks JSX element with the variable wrapped in curly braces:</span>

> **Accessing props:**

To access our props object in another component we pass it the props argument and React will invoke the functional component with the props object.

### Reminder:

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

### Function and Class Components

The simplest way to define a component is to write a JavaScript function:

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

You can also use an <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes" class="markup--anchor markup--p-anchor">ES6 class</a> to define a component:

    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }

The above two components are equivalent from React’s point of view.

- <span id="99d5">You can pass down **as many props keys as you want**.</span>

### **9. Destructure props**

> You can destructure the props object in the function component’s parameter.

### **10. Create routes using components from the react-router-dom package**

a. Import the react-router-dom package:

    npm i react-router-dom

> In your index.js:

1.  <span id="46f3">Above you import your BrowserRouter with which you can wrap your entire route hierarchy. This makes routing information from React Router available to all its descendent components.</span>
2.  <span id="f675">Then in the component of your choosing, usually top tier such as App.js, you can create your routes using the Route and Switch Components</span>

---

### Discover More:

<a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br />
<em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

### REACT CHEAT SHEET:

_More content at_ <a href="http://plainenglish.io/" class="markup--anchor markup--p-anchor"><em>plainenglish.io</em></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [June 11, 2021](https://medium.com/p/cbaafb31765d).

<a href="https://medium.com/@bryanguner/react-md-cbaafb31765d" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Everything You Need To Become A Machine Learner

Part 1:

---

### Everything You Need To Become A Machine Learner

#### Part 1:

<figure><img src="https://cdn-images-1.medium.com/max/800/0*aApX3S2n_lUCFNYk.jpg" class="graf-image" /></figure>*This list of resources is specifically targeted at Web Developers and Data Scientists…. so do with it what you will…*

> _This list borrows heavily from multiple lists created by :_ <a href="https://github.com/sindresorhus" class="markup--anchor markup--blockquote-anchor"><em>sindresorhus</em></a>

<span class="graf-dropCap">M</span>achine learning is a subfield of artificial intelligence, which is broadly defined as the capability of a machine to imitate intelligent human behavior. Artificial intelligence systems are used to perform complex tasks in a way that is similar to how humans solve problems.

> _The goal of AI is to create computer models that exhibit “intelligent behaviors” like humans, according to_ <a href="https://www.csail.mit.edu/person/boris-katz" class="markup--anchor markup--blockquote-anchor"><em>Boris Katz</em></a>_, a principal research scientist and head of the InfoLab Group at CSAIL. This means machines that can recognize a visual scene, understand a text written in natural language, or perform an action in the physical world._

> _Machine learning is one way to use AI. It was defined in the 1950s by AI pioneer_ <a href="https://en.wikipedia.org/wiki/Arthur_Samuel" class="markup--anchor markup--blockquote-anchor"><em>Arthur Samuel</em></a> _as “the field of study that gives computers the ability to learn without explicitly being programmed.”_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*BaIm4BXgHJN8EJFI.png" class="graf-image" /></figure>-   <span id="0908">\[📖\] <a href="https://www.amazon.com/Delivering-Happiness-Profits-Passion-Purpose/dp/0446576220" class="markup--anchor markup--li-anchor">Delivering Happiness</a></span>
-   <span id="efe1">\[📖\] <a href="https://www.amazon.com/Good-Great-Some-Companies-Others-ebook/dp/B0058DRUV6" class="markup--anchor markup--li-anchor">Good to Great: Why Some Companies Make the Leap…And Others Don’t</a></span>
-   <span id="a119">\[📖\] <a href="https://www.amazon.com/Hello-Startup-Programmers-Building-Technologies/dp/1491909900" class="markup--anchor markup--li-anchor">Hello, Startup: A Programmer’s Guide to Building Products, Technologies, and Teams</a></span>
-   <span id="6430">\[📖\] <a href="https://www.howgoogleworks.net/" class="markup--anchor markup--li-anchor">How Google Works</a></span>
-   <span id="395e">\[📖\] <a href="https://www.goodreads.com/book/show/817589.Learn_to_Earn" class="markup--anchor markup--li-anchor">Learn to Earn: A Beginner’s Guide to the Basics of Investing and Business</a></span>
-   <span id="3ed1">\[📖\] <a href="https://www.goodreads.com/book/show/6732019-rework" class="markup--anchor markup--li-anchor">Rework</a></span>
-   <span id="31e6">\[📖\] <a href="https://www.amazon.com/Airbnb-Story-Ordinary-Disrupted-Controversy/dp/0544952669" class="markup--anchor markup--li-anchor">The Airbnb Story</a></span>
-   <span id="fb26">\[📖\] <a href="https://www.amazon.com/Personal-MBA-Master-Art-Business/dp/1591845572" class="markup--anchor markup--li-anchor">The Personal MBA</a></span>
-   <span id="2730">\[ \] <a href="https://learn.fb.com/skillset/marketing-started" class="markup--anchor markup--li-anchor">Facebook: Digital marketing: get started</a></span>
-   <span id="f6db">\[ \] <a href="https://learn.fb.com/skillset/marketing-further" class="markup--anchor markup--li-anchor">Facebook: Digital marketing: go further</a></span>
-   <span id="f40c">\[ \] <a href="https://analytics.google.com/analytics/academy/course/6" class="markup--anchor markup--li-anchor">Google Analytics for Beginners</a></span>
-   <span id="7c08">\[ \] <a href="https://moz.com/beginners-guide-to-seo" class="markup--anchor markup--li-anchor">Moz: The Beginner’s Guide to SEO</a></span>
-   <span id="7885">\[ \] <a href="https://smart.ly/course/abd47e21-4b59-4ccf-910d-fb1c18b2e9df" class="markup--anchor markup--li-anchor">Smartly: Marketing Fundamentals</a></span>
-   <span id="76f8">\[ \] <a href="https://teamtreehouse.com/library/seo-basics" class="markup--anchor markup--li-anchor">Treehouse: SEO Basics</a></span>
-   <span id="5e42">\[🅤\]ꭏ <a href="https://www.udacity.com/course/app-monetization--ud518" class="markup--anchor markup--li-anchor">App Monetization</a></span>
-   <span id="2abe">\[🅤\]ꭏ <a href="https://www.udacity.com/course/app-marketing--ud719" class="markup--anchor markup--li-anchor">App Marketing</a></span>
-   <span id="3c34">\[🅤\]ꭏ <a href="https://www.udacity.com/course/how-to-build-a-startup--ep245" class="markup--anchor markup--li-anchor">How to Build a Startup</a></span>

---

### Natural language processing

Natural language processing is a field of machine learning in which machines learn to understand natural language as spoken and written by humans, instead of the data and numbers normally used to program computers. This allows machines to recognize language, understand it, and respond to it, as well as create new text and translate between languages. Natural language processing enables familiar technology like chatbots and digital assistants like Siri or Alexa.

### Neural networks

Neural networks are a commonly used, specific class of machine learning algorithms. Artificial neural networks are modeled on the human brain, in which thousands or millions of processing nodes are interconnected and organized into layers.

In an artificial neural network, cells, or nodes, are connected, with each cell processing inputs and producing an output that is sent to other neurons. Labeled data moves through the nodes, or cells, with each cell performing a different function. In a neural network trained to identify whether a picture contains a cat or not, the different nodes would assess the information and arrive at an output that indicates whether a picture features a cat.

### Be familiar with how Machine Learning is applied at other companies

<a href="https://www.youtube.com/watch?v=tFq6Q_muwG0" class="markup--anchor markup--p-anchor">Trillions of Questions, No Easy Answers: A (home) movie about how Google Search works — YouTube</a>

- <span id="9bf3">\[📰\] <a href="https://ai.facebook.com/blog/how-facebook-uses-super-efficient-ai-models-to-detect-hate-speech" class="markup--anchor markup--li-anchor">How Facebook uses super-efficient AI models to detect hate speech</a></span>
- <span id="4ad7">\[📰\] <a href="https://ai.googleblog.com/2020/06/recent-advances-in-google-translate.html" class="markup--anchor markup--li-anchor">Recent Advances in Google Translate</a></span>
- <span id="6bf5">\[📰\] <a href="https://dropbox.tech/machine-learning/cannes--how-ml-saves-us--1-7m-a-year-on-document-previews" class="markup--anchor markup--li-anchor">Cannes: HowMachine Learning saves us $1.7M a year on document previews</a></span>
- <span id="77c3">\[📰\] <a href="http://nlathia.github.io/2020/10/Monzo-ML.html" class="markup--anchor markup--li-anchor">Machine Learning @ Monzo in 2020</a></span>
- <span id="0cab">\[📰\] <a href="https://dropbox.tech/machine-learning/how-image-search-works-at-dropbox" class="markup--anchor markup--li-anchor">How image search works at Dropbox</a></span>
- <span id="357c">\[ \] <a href="https://dev.to/bgoonz/everything-you-need-to-become-a-machine-learner-1cjp#" class="markup--anchor markup--li-anchor">Real-world AI Case Studies</a></span>
- <span id="616c">\[ \] <a href="https://www.youtube.com/watch?v=ZVJTqAuPvTU&amp;list=PL1T8fO7ArWlf4EkqeguoD70LsnOJ7c9Ib&amp;index=7" class="markup--anchor markup--li-anchor">Andrej Karpathy on AI at Tesla (Full Stack Deep Learning — August 2018)</a></span>
- <span id="0ee0">\[ \] <a href="https://youtu.be/8PjTWFfjkeY?list=PL1T8fO7ArWlf4EkqeguoD70LsnOJ7c9Ib" class="markup--anchor markup--li-anchor">Jai Ranganathan at Data Science at Uber (Full Stack Deep Learning — August 2018)</a></span>
- <span id="3818">\[ \] <a href="https://www.youtube.com/watch?v=9XdGZVohnno" class="markup--anchor markup--li-anchor">John Apostolopoulos of Cisco discusses “Machine Learning in Networking”</a> `0:48:44`</span>
- <span id="1306">\[ \] <a href="https://www.youtube.com/watch?v=Fw8adDBBfog" class="markup--anchor markup--li-anchor">Joaquin Candela, Director of Applied Machine Learning , Facebook in conversation with Esteban Arcaute</a> `0:52:27`</span>
- <span id="4833">\[ \] <a href="https://www.youtube.com/watch?v=z_OGYzT_MBo" class="markup--anchor markup--li-anchor">Eric Colson, Chief Algorithms Officer, Stitch Fix</a> `0:53:57`</span>
- <span id="3c8e">\[ \] <a href="https://www.youtube.com/watch?v=p0cQUErM5xs" class="markup--anchor markup--li-anchor">Claudia Perlich, Advisor to Dstillery and Adjunct Professor NYU Stern School of Business</a> `0:51:59`</span>
- <span id="31bb">\[ \] <a href="https://www.youtube.com/watch?v=imlp8DGNkk0" class="markup--anchor markup--li-anchor">Jeff Dean, Google Senior Fellow and SVP Google AI — Deep Learning to Solve Challenging Problems</a> `0:58:45`</span>
- <span id="2328">\[ \] <a href="https://www.youtube.com/watch?v=suamFkw9jws" class="markup--anchor markup--li-anchor">James Parr, Director of Frontier Development Lab (NASA), FDL Europe &amp; CEO, Trillium Technologies</a> `0:55:46`</span>
- <span id="e020">\[ \] <a href="https://www.youtube.com/watch?v=uyLT7EfWmsg" class="markup--anchor markup--li-anchor">Daphne Koller, Founder &amp; CEO of Insitro — In Conversation with Carlos Bustamante</a> `0:49:29`</span>
- <span id="4113">\[ \] <a href="https://www.youtube.com/watch?v=4owh40tJ0wA" class="markup--anchor markup--li-anchor">Eric Horvitz, Microsoft Research — AI in the Open World: Advances, Aspirations, and Rough Edges</a> `0:56:11`</span>
- <span id="3e42">\[ \] <a href="https://www.youtube.com/watch?v=5u35GY24A0Q" class="markup--anchor markup--li-anchor">Tony Jebara, Netflix — Machine Learning for Recommendation and Personalization</a> `0:55:20`</span>
- <span id="356b">\[💻\] <a href="https://www.datacamp.com/courses/analyzing-police-activity-with-pandas" class="markup--anchor markup--li-anchor">Analyzing Police Activity with pandas</a></span>
- <span id="ac9f">\[💻\] <a href="https://www.datacamp.com/courses/hr-analytics-in-python-predicting-employee-churn" class="markup--anchor markup--li-anchor">HR Analytics in Python: Predicting Employee Churn</a></span>
- <span id="f363">\[💻\] <a href="https://www.datacamp.com/courses/predicting-customer-churn-in-python" class="markup--anchor markup--li-anchor">Predicting Customer Churn in Python</a></span>
- <span id="6002">\[📺 \] <a href="https://www.youtube.com/watch?v=wDxTWp3KMMs" class="markup--anchor markup--li-anchor">How does YouTube recommend videos? — AI EXPLAINED!</a> `0:33:53`</span>
- <span id="8487">\[📺 \] <a href="https://www.youtube.com/watch?v=sIoHFPGOY0I" class="markup--anchor markup--li-anchor">How does Google Translate’s AI work?</a> `0:15:02`</span>
- <span id="4fb4">\[📺 \] <a href="https://www.youtube.com/watch?v=mbOkL39Uabs" class="markup--anchor markup--li-anchor">Data Science in Finance</a> `0:17:52`</span>
- <span id="1b7e">\[📺 \] <a href="https://www.youtube.com/playlist?list=PLjq6DwYksrzz_fsWIpPcf6V7p2RNAneKc" class="markup--anchor markup--li-anchor">The Age of AI</a></span>
- <span id="6978">\[ \] <a href="https://www.youtube.com/watch?v=UwsrzCVZAb8" class="markup--anchor markup--li-anchor">How Far is Too Far? | The Age of A.I.</a> `0:34:39`</span>
- <span id="5c9c">\[ \] <a href="https://www.youtube.com/watch?v=V5aZjsWM2wo" class="markup--anchor markup--li-anchor">Healed through A.I. | The Age of A.I.</a> `0:39:55`</span>
- <span id="4cc0">\[ \] <a href="https://www.youtube.com/watch?v=lrv8ga02VNg" class="markup--anchor markup--li-anchor">Using A.I. to build a better human | The Age of A.I.</a> `0:44:27`</span>
- <span id="a47e">\[ \] <a href="https://www.youtube.com/watch?v=Kr1fmKVY3cA" class="markup--anchor markup--li-anchor">Love, art and stories: decoded | The Age of A.I.</a> `0:38:57`</span>
- <span id="4d74">\[ \] <a href="https://www.youtube.com/watch?v=lIvrIKaNCRE" class="markup--anchor markup--li-anchor">The ‘Space Architects’ of Mars | The Age of A.I.</a> `0:30:10`</span>
- <span id="c733">\[ \] <a href="https://www.youtube.com/watch?v=f2aocKWrPG8" class="markup--anchor markup--li-anchor">Will a robot take my job? | The Age of A.I.</a> `0:36:14`</span>
- <span id="87df">\[ \] <a href="https://www.youtube.com/watch?v=0wy4u34fii4" class="markup--anchor markup--li-anchor">Saving the world one algorithm at a time | The Age of A.I.</a> `0:46:37`</span>
- <span id="9d5b">\[ \] <a href="https://www.youtube.com/watch?v=VwtC_4t2g5M" class="markup--anchor markup--li-anchor">How A.I. is searching for Aliens | The Age of A.I.</a> `0:36:12`</span>
- <span id="fa7d">\[📺 \] <a href="https://lucidworks.com/post/using-intent-data-to-optimize-the-self-solve-experience/" class="markup--anchor markup--li-anchor">Using Intent Data to Optimize the Self-Solve Experience</a></span>
- <span id="16cb">\[📺 \] <a href="https://www.youtube.com/watch?v=tFq6Q_muwG0" class="markup--anchor markup--li-anchor">Trillions of Questions, No Easy Answers: A (home) movie about how Google Search works</a></span>
- <span id="45ad">\[📺 \] <a href="https://www.youtube.com/watch?v=uF1V2MqX2U0" class="markup--anchor markup--li-anchor">Google Machine Learning System Design Mock Interview</a></span>
- <span id="bde7">\[📺 \] <a href="https://www.youtube.com/watch?v=12Ry6kGPQVs" class="markup--anchor markup--li-anchor">Netflix Machine Learning Mock Interview: Type-ahead Search</a></span>
- <span id="d278">\[📺 \] <a href="https://www.youtube.com/watch?v=J_0ms1ayqKE" class="markup--anchor markup--li-anchor">Machine Learning design: Search engine for Q&amp;A</a></span>
- <span id="2fa4">\[📺 \] <a href="https://www.youtube.com/watch?v=sEZsIUBIhNk" class="markup--anchor markup--li-anchor">Engineering Systems for Real-Time Predictions @DoorDash</a></span>
- <span id="2b17">\[📺 \] <a href="https://youtu.be/5UjCjVWa3yc?list=LL" class="markup--anchor markup--li-anchor">How Gmail Uses Iterative Design, Machine Learning and AI to Create More Assistive Features</a></span>
- <span id="67cb">\[📺 \] <a href="https://youtu.be/miMwyvXt9VI?list=LL" class="markup--anchor markup--li-anchor">Wayfair Data Science Explains It All: Human-in-the-loop Systems</a></span>
- <span id="8a01">\[📺 \] <a href="https://youtu.be/Z2FdH3j8Wbc?list=LL" class="markup--anchor markup--li-anchor">Leaving the lab: Building NLP applications that real people can use</a></span>
- <span id="602b">\[📺 \] <a href="https://www.youtube.com/watch?v=R9z6s0Jx2p0" class="markup--anchor markup--li-anchor">Machine Learning at Uber (Natural Language Processing Use Cases)</a></span>
- <span id="e854">\[📺 \] <a href="https://www.youtube.com/watch?v=Sx3Fpw0XCXk" class="markup--anchor markup--li-anchor">Google Wave: Natural Language Processing</a></span>
- <span id="d46f">\[📺 \] <a href="https://www.youtube.com/watch?v=U1yT_4xcglY" class="markup--anchor markup--li-anchor">Natural Language Understanding in Alexa</a></span>
- <span id="0aa8">\[📺 \] <a href="https://www.youtube.com/watch?v=Dkg1ULBASNA" class="markup--anchor markup--li-anchor">The Machine Learning Behind Alexa’s AI Systems</a></span>
- <span id="d257">\[📺 \] <a href="https://www.youtube.com/watch?v=mJqFI7vhqdA" class="markup--anchor markup--li-anchor">Ines Montani Keynote — Applied NLP Thinking</a></span>
- <span id="16e7">\[📺 \] <a href="https://youtu.be/25_kBogrzrs" class="markup--anchor markup--li-anchor">Lecture 9: Lukas Biewald</a></span>
- <span id="4572">\[📺 \] <a href="https://youtu.be/vF7UgqaegVI" class="markup--anchor markup--li-anchor">Lecture 13: Research Directions</a></span>
- <span id="a193">\[📺 \] <a href="https://youtu.be/hZd3X_nGdew" class="markup--anchor markup--li-anchor">Lecture 14: Jeremy Howard</a></span>
- <span id="fae7">\[📺 \] <a href="https://youtu.be/yvMgcLKuvVg" class="markup--anchor markup--li-anchor">Lecture 15: Richard Socher</a></span>
- <span id="6bed">\[📺 \] <a href="https://www.youtube.com/watch?v=pOnRSYSNuXI" class="markup--anchor markup--li-anchor">Machine learning across industries with Vicki Boykis</a> `0:34:02`</span>
- <span id="5d91">\[📺 \] <a href="https://www.youtube.com/watch?v=n_CTGZSq4m0" class="markup--anchor markup--li-anchor">Rachael Tatman — Conversational A.I. and Linguistics</a> `0:36:51`</span>
- <span id="e2c4">\[📺 \] <a href="https://www.youtube.com/watch?v=NbiG8ZuRsqU" class="markup--anchor markup--li-anchor">Nicolas Koumchatzky — Machine Learning in Production for Self Driving Cars</a> `0:44:56`</span>
- <span id="94d6">\[📺 \] <a href="https://www.youtube.com/watch?v=_Ot35PspXw4" class="markup--anchor markup--li-anchor">Brandon Rohrer — Machine Learning in Production for Robots</a> `0:34:31`</span>
- <span id="bee4">\[📺 \] <a href="https://youtu.be/g6bOwQdCJrc" class="markup--anchor markup--li-anchor">[CVPR’21 WAD] Keynote — Andrej Karpathy, Tesla</a></span>

---

### Be able to frame anMachine Learning problem

· **\[ \]** <a href="https://www.aws.training/learningobject/video?id=27224" class="markup--anchor markup--p-anchor"><strong>AWS: Types of Machine Learning Solutions</strong></a>

· **\[📰\]** <a href="https://theaisummer.com/Machine-Learning-Business/" class="markup--anchor markup--p-anchor"><strong>Apply Machine Learning to your Business</strong></a>

· **\[📰\]** <a href="https://mattturck.com/data2020/" class="markup--anchor markup--p-anchor"><strong>Resilience and Vibrancy: The 2020 Data &amp; AI Landscape</strong></a>

· **\[📰\]** <a href="https://medium.com/@karpathy/software-2-0-a64152b37c35" class="markup--anchor markup--p-anchor"><strong>Software 2.0</strong></a>

· **\[📰\]** <a href="https://lewtun.github.io/blog/research/conference/2020/07/31/icml2020.html" class="markup--anchor markup--p-anchor"><strong>Highlights from ICML 2020</strong></a>

· **\[📰\]** <a href="https://medium.com/@karpathy/a-peek-at-trends-in-machine-learning-ab8a1085a106" class="markup--anchor markup--p-anchor"><strong>A Peek at Trends in Machine Learning</strong></a>

· **\[📰\]** <a href="https://mlpowered.com/posts/how-to-deliver-on-machine-learning-projects/" class="markup--anchor markup--p-anchor"><strong>How to deliver on Machine Learning projects</strong></a>

· **\[📰\]** <a href="https://blog.picnic.nl/data-science-as-a-product-f383dead5aa4" class="markup--anchor markup--p-anchor"><strong>Data Science as a Product</strong></a>

· **\[📰\]** <a href="http://nlathia.github.io/2020/06/Customer-service-machine-learning.html" class="markup--anchor markup--p-anchor"><strong>Customer service is full of machine learning problems</strong></a>

· **\[📰\]** <a href="https://eugeneyan.com/writing/how-to-choose-problems/" class="markup--anchor markup--p-anchor"><strong>Choosing Problems in Data Science and Machine Learning</strong></a>

· **\[📰\]** <a href="https://mitsloan.mit.edu/ideas-made-to-matter/why-finance-deploying-natural-language-processing" class="markup--anchor markup--p-anchor"><strong>Why finance is deploying natural language processing</strong></a>

· **\[📰\]** <a href="https://adeshpande3.github.io/adeshpande3.github.io/The-Last-5-Years-in-Deep-Learning" class="markup--anchor markup--p-anchor"><strong>The Last 5 Years In Deep Learning</strong></a>

· **\[📰\]** <a href="https://mlpowered.com/posts/start-with-a-stupid-model/" class="markup--anchor markup--p-anchor"><strong>Always start with a stupid model, no exceptions.</strong></a>

· **\[📰\]** <a href="https://mlpowered.com/posts/2019-ml-trends/" class="markup--anchor markup--p-anchor"><strong>Most impactful AI trends of 2018: the rise ofMachine Learning Engineering</strong></a>

· **\[📰\]** <a href="https://www.jeremyjordan.me/ml-requirements/" class="markup--anchor markup--p-anchor"><strong>Building machine learning products: a problem well-defined is a problem half-solved.</strong></a>

· **\[📰\]** <a href="https://medium.com/huggingface/simple-considerations-for-simple-people-building-fancy-neural-networks-7abc3c0f0bd7" class="markup--anchor markup--p-anchor"><strong>Simple considerations for simple people building fancy neural networks</strong></a>

· **\[📰\]** <a href="https://mlinproduction.com/maximizing-business-impact-with-machine-learning/" class="markup--anchor markup--p-anchor"><strong>Maximizing Business Impact with Machine Learning</strong></a>

· **\[📖\]** <a href="https://www.amazon.com/AI-Superpowers-China-Silicon-Valley/dp/132854639X" class="markup--anchor markup--p-anchor"><strong>AI Superpowers: China, Silicon Valley, and the New World Order</strong></a>

· **\[📖\]** <a href="https://www.amazon.com/Humans-Guide-Machine-Intelligence-Algorithms/dp/0525560882" class="markup--anchor markup--p-anchor"><strong>A Human’s Guide to Machine Intelligence</strong></a>

· **\[📖\]** <a href="https://news.microsoft.com/uploads/2018/01/The-Future-Computed.pdf" class="markup--anchor markup--p-anchor"><strong>The Future Computed</strong></a>

· **\[📖\]** <a href="http://www.mlyearning.org/" class="markup--anchor markup--p-anchor"><strong>Machine Learning Yearning by Andrew Ng</strong></a>

· **\[📖\]** <a href="https://www.amazon.com/Prediction-Machines-Economics-Artificial-Intelligence/dp/1633695670" class="markup--anchor markup--p-anchor"><strong>Prediction Machines: The Simple Economics of Artificial Intelligence</strong></a>

· **\[📖\]** <a href="https://www.amazon.com/Building-Machine-Learning-Powered-Applications/dp/149204511X/" class="markup--anchor markup--p-anchor"><strong>Building Machine Learning Powered Applications: Going from Idea to Product</strong></a>

· **\[ \]** <a href="https://www.coursera.org/learn/ai-for-everyone" class="markup--anchor markup--p-anchor"><strong>Coursera: AI For Everyone</strong></a>

· **\[💻\]** <a href="https://www.datacamp.com/courses/data-science-for-everyone" class="markup--anchor markup--p-anchor"><strong>Data Science for Everyone</strong></a>

· **\[💻\]** <a href="https://www.datacamp.com/courses/machine-learning-with-the-experts-school-budgets" class="markup--anchor markup--p-anchor"><strong>Machine Learning with the Experts: School Budgets</strong></a>

· **\[💻\]** <a href="https://www.datacamp.com/courses/machine-learning-for-everyone" class="markup--anchor markup--p-anchor"><strong>Machine Learning for Everyone</strong></a>

· **\[💻\]** <a href="https://www.datacamp.com/courses/data-science-for-managers" class="markup--anchor markup--p-anchor"><strong>Data Science for Managers</strong></a>

· **\[ \]** <a href="https://research.fb.com/the-facebook-field-guide-to-machine-learning-video-series/" class="markup--anchor markup--p-anchor"><strong>Facebook: Field Guide to Machine Learning</strong></a>

· **\[G\]** <a href="https://developers.google.com/machine-learning/problem-framing" class="markup--anchor markup--p-anchor"><strong>Introduction to Machine Learning Problem Framing</strong></a>

· **\[ \]** <a href="https://www.pluralsight.com/courses/machine-learning-algorithms" class="markup--anchor markup--p-anchor"><strong>Pluralsight: How to Think About Machine Learning Algorithms</strong></a>

· **\[ \]** <a href="https://docs.google.com/presentation/d/1ZUimafgXCBSLsgbacd6-a-dqO7yLyzIl1ZJbiCBUUT4/edit#slide=id.g557254d430_0_0" class="markup--anchor markup--p-anchor"><strong>State of AI Report 2020</strong></a>

· **\[📺 \]** <a href="https://youtu.be/kYMfE9u-lMo" class="markup--anchor markup--p-anchor"><strong>Vincent Warmerdam: The profession of solving (the wrong problem) | PyData Amsterdam 2019</strong></a>

· **\[📺 \]** <a href="https://www.youtube.com/watch?v=ejWkDviM5QM" class="markup--anchor markup--p-anchor"><strong>Hugging Face, Transformers | NLP Research and Open Source | Interview with Julien Chaumond</strong></a>

· **\[📺 \]** <a href="https://www.youtube.com/watch?v=nJAmN6gWdK8&amp;ab_channel=PyData" class="markup--anchor markup--p-anchor"><strong>Vincent Warmerdam — Playing by the Rules-Based-Systems | PyData Eindhoven 2020</strong></a>

· **\[📺 \]** <a href="https://youtu.be/xNGI0B_Sn1E?list=LL" class="markup--anchor markup--p-anchor"><strong>Building intuitions before building models</strong></a>

---

### Be familiar with data ethics

- <span id="65f7">**\[📰\]** <a href="https://www.maartengrootendorst.com/blog/bias/" class="markup--anchor markup--li-anchor"><strong>How to Detect Bias in AI</strong></a></span>
- <span id="8aa8">**\[ \]** <a href="https://www.netflix.com/np/title/81328723" class="markup--anchor markup--li-anchor"><strong>Netflix: Coded Bias</strong></a></span>
- <span id="f012">**\[ \]** <a href="https://www.netflix.com/np/title/80117542" class="markup--anchor markup--li-anchor"><strong>Netflix: The Great Hack</strong></a></span>
- <span id="0031">**\[ \]** <a href="https://www.netflix.com/np/title/81254224" class="markup--anchor markup--li-anchor"><strong>Netflix: The Social Dilemma</strong></a></span>
- <span id="4d0c">**\[ \]** <a href="http://ethics.fast.ai/" class="markup--anchor markup--li-anchor"><strong>Practical Data Ethics</strong></a></span>
- <span id="9084">**\[ \]** <a href="https://www.youtube.com/watch?v=eFjk79ykWZk" class="markup--anchor markup--li-anchor"><strong>Lesson 1: Disinformation</strong></a></span>
- <span id="2d7b">**\[ \]** <a href="https://www.youtube.com/watch?v=mG-cTS3fnnw" class="markup--anchor markup--li-anchor"><strong>Lesson 2: Bias &amp; Fairness</strong></a></span>
- <span id="8da9">**\[ \]** <a href="https://youtu.be/s0s5A4xK0xQ" class="markup--anchor markup--li-anchor"><strong>Lesson 3: Ethical Foundations &amp; Practical Tools</strong></a></span>
- <span id="4dab">**\[ \]** <a href="https://youtu.be/79_rwZhewbQ" class="markup--anchor markup--li-anchor"><strong>Lesson 4: Privacy and surveillance</strong></a></span>
- <span id="5278">**\[ \]** <a href="https://youtu.be/HwfeDeqbmsI" class="markup--anchor markup--li-anchor"><strong>Lesson 4 continued: Privacy and surveillance</strong></a></span>
- <span id="936c">**\[ \]** <a href="https://youtu.be/US42H1znvKU" class="markup--anchor markup--li-anchor"><strong>Lesson 5.1: The problem with metrics</strong></a></span>
- <span id="f028">**\[ \]** <a href="https://youtu.be/TKYr4sS1SFw" class="markup--anchor markup--li-anchor"><strong>Lesson 5.2: Our Ecosystem, Venture Capital, &amp; Hypergrowth</strong></a></span>
- <span id="f2a8">**\[ \]** <a href="https://youtu.be/upU-_ECq80Y" class="markup--anchor markup--li-anchor"><strong>Lesson 5.3: Losing the Forest for the Trees, guest lecture by Ali Alkhatib</strong></a></span>
- <span id="34ae">**\[ \]** <a href="https://youtu.be/Nzvoc7aaEzw" class="markup--anchor markup--li-anchor"><strong>Lesson 6: Algorithmic Colonialism, and Next Steps</strong></a></span>
- <span id="d7e5">**\[📺 \]** <a href="https://www.youtube.com/watch?v=AoYD4eB3Vo4" class="markup--anchor markup--li-anchor"><strong>Lecture 9: Ethics (Full Stack Deep Learning — Spring 2021)</strong></a> **1:04:50**</span>
- <span id="5a15">**\[📺 \]** <a href="https://www.youtube.com/watch?v=0wCJKw3-siY" class="markup--anchor markup--li-anchor"><strong>SE4AI: Ethics and Fairness</strong></a> **1:18:37**</span>
- <span id="721e">**\[📺 \]** <a href="https://www.youtube.com/watch?v=5ZdrNYvTmq8" class="markup--anchor markup--li-anchor"><strong>SE4AI: Security</strong></a> **1:18:24**</span>
- <span id="e800">**\[📺 \]** <a href="https://www.youtube.com/watch?v=xRlFDXV3-8E" class="markup--anchor markup--li-anchor"><strong>SE4AI: Safety</strong></a> **1:17:37**</span>

### Be able to import data from multiple sources

- <span id="376d">**\[ \]** <a href="https://www.crummy.com/software/BeautifulSoup/bs4/doc/" class="markup--anchor markup--li-anchor"><strong>Docs: Beautiful Soup Documentation</strong></a></span>
- <span id="0ed1">**\[💻\]** <a href="https://www.datacamp.com/courses/importing-data-in-python-part-2" class="markup--anchor markup--li-anchor"><strong>Importing Data in Python (Part 2)</strong></a></span>
- <span id="d2c3">**\[💻\]** <a href="https://www.datacamp.com/courses/web-scraping-with-python" class="markup--anchor markup--li-anchor"><strong>Web Scraping in Python</strong></a></span>

### Be able to setup data annotation efficiently

<a href="https://www.youtube.com/watch?v=iPmQ5ezQNPY" class="markup--anchor markup--p-anchor">https://www.youtube.com/watch?v=iPmQ5ezQNPY</a>

- <span id="2ca0">**\[📰\]** <a href="https://towardsdatascience.com/create-a-synthetic-image-dataset-the-what-the-why-and-the-how-f820e6b6f718" class="markup--anchor markup--li-anchor"><strong>Create A Synthetic Image Dataset — The “What”, The “Why” and The “How”</strong></a></span>
- <span id="08c6">**\[📰\]** <a href="https://towardsdatascience.com/we-need-synthetic-data-e6f90a8532a4" class="markup--anchor markup--li-anchor"><strong>We need Synthetic Data</strong></a></span>
- <span id="0a44">**\[📰\]** <a href="https://trishalaneeraj.github.io/2020-07-05/weak-supervision" class="markup--anchor markup--li-anchor"><strong>Weak Supervision for Online Discussions</strong></a></span>
- <span id="7f6f">**\[📰\]** <a href="https://towardsdatascience.com/ml-infrastructure-tools-for-data-preparation-70d79e70f8d4" class="markup--anchor markup--li-anchor"><strong>Machine Learning Infrastructure Tools for Data Preparation</strong></a></span>
- <span id="5e2c">**\[📰\]** <a href="https://medium.com/jigsaw/creating-labeled-datasets-and-exploring-the-role-of-human-raters-56367b6db298" class="markup--anchor markup--li-anchor"><strong>Exploring the Role of Human Raters in Creating NLP Datasets</strong></a></span>
- <span id="98a2">**\[📰\]** <a href="https://towardsdatascience.com/inter-annotator-agreement-2f46c6d37bf3" class="markup--anchor markup--li-anchor"><strong>Inter-Annotator Agreement (IAA)</strong></a></span>
- <span id="9ab8">**\[📰\]** <a href="https://learnaitech.com/how-to-compute-inter-rater-reliablity-metrics-cohens-kappa-fleisss-kappa-cronbach-alpha-kripndorff-alpha-scotts-pi-inter-class-correlation-in-python/" class="markup--anchor markup--li-anchor"><strong>How to compute inter-rater reliability metrics (Cohen’s Kappa, Fleiss’s Kappa, Cronbach Alpha, Krippendorff Alpha, Scott’s Pi, Inter-class correlation) in Python</strong></a></span>
- <span id="be72">**\[📺 \]** <a href="https://www.youtube.com/watch?v=yu15Nf5eJEE" class="markup--anchor markup--li-anchor"><strong>Snorkel: Dark Data and Machine Learning — Christopher Ré</strong></a></span>
- <span id="0225">**\[📺 \]** <a href="https://youtu.be/59BKHO_xBPA" class="markup--anchor markup--li-anchor"><strong>Training a NER Model with Prodigy and Transfer Learning</strong></a></span>
- <span id="8752">**\[📺 \]** <a href="https://youtu.be/l4scwf8KeIA" class="markup--anchor markup--li-anchor"><strong>Training a New Entity Type with Prodigy — annotation powered by active learning</strong></a></span>
- <span id="2c84">**\[📺 \]** <a href="https://youtu.be/PCwpO3mLhZk?list=PLcD_yLvcdUll95mAnBDV0rZKhfClJMZMr" class="markup--anchor markup--li-anchor"><strong>ECCV 2020 WSL tutorial: 4. Human-in-the-loop annotations</strong></a></span>
- <span id="6a00">**\[📺 \]** <a href="https://youtu.be/V33Ut36eUsY?list=LL" class="markup--anchor markup--li-anchor"><strong>Active Learning: Why Smart Labeling is the Future of Data Annotation | Alectio</strong></a></span>
- <span id="754c">**\[📺 \]** <a href="https://www.youtube.com/watch?v=QlPiiyd8zQI" class="markup--anchor markup--li-anchor"><strong>Lecture 8: Data Management (Full Stack Deep Learning — Spring 2021)</strong></a> **0:59:42**</span>
- <span id="a574">**\[📺 \]** <a href="https://www.youtube.com/watch?v=iFvk9cGbIZ4" class="markup--anchor markup--li-anchor"><strong>Lab 6: Data Labeling (Full Stack Deep Learning — Spring 2021)</strong></a> **0:05:06**</span>
- <span id="1cb0">**\[📺 \]** <a href="https://youtu.be/T5jv8-xZhZI" class="markup--anchor markup--li-anchor"><strong>Lecture 6: Data Management</strong></a></span>
- <span id="5497">**\[📺 \]** <a href="https://www.youtube.com/watch?v=60lBFv9tyWk" class="markup--anchor markup--li-anchor"><strong>SE4AI: Data Quality</strong></a> **1:07:15**</span>
- <span id="e63c">**\[📺 \]** <a href="https://www.youtube.com/watch?v=6e6aI4yjAxc" class="markup--anchor markup--li-anchor"><strong>SE4AI: Data Programming and Intro to Big Data Processing</strong></a> **0:33:04**</span>
- <span id="ef89">**\[📺 \]** <a href="https://www.youtube.com/watch?v=iPmQ5ezQNPY" class="markup--anchor markup--li-anchor"><strong>SE4AI: Managing and Processing Large Datasets</strong></a> **1:21:27**</span>

---

### Be able to manipulate data with Numpy

- <span id="9a90">**\[📰\]** <a href="https://jalammar.github.io/visual-numpy/" class="markup--anchor markup--li-anchor"><strong>A Visual Intro to NumPy and Data Representation</strong></a></span>
- <span id="9692">**\[📰\]** <a href="https://albertcthomas.github.io/good-practices-random-number-generators/" class="markup--anchor markup--li-anchor"><strong>Good practices with numpy random number generators</strong></a></span>
- <span id="cdef">**\[📰\]** <a href="https://medium.com/better-programming/numpy-illustrated-the-visual-guide-to-numpy-3b1d4976de1d" class="markup--anchor markup--li-anchor"><strong>NumPy Illustrated: The Visual Guide to NumPy</strong></a></span>
- <span id="3468">**\[📰\]** <a href="https://pabloinsente.github.io/intro-numpy-fundamentals" class="markup--anchor markup--li-anchor"><strong>NumPy Fundamentals for Data Science and Machine Learning</strong></a></span>
- <span id="3a98">**\[💻\]** <a href="https://www.datacamp.com/courses/intro-to-python-for-data-science" class="markup--anchor markup--li-anchor"><strong>Intro to Python for Data Science</strong></a></span>
- <span id="8783">**\[ \]** <a href="https://www.pluralsight.com/courses/numpy-working-with-multidimensional-data" class="markup--anchor markup--li-anchor"><strong>Pluralsight: Working with Multidimensional Data Using NumPy</strong></a></span>

### Be able to manipulate data with Pandas

- <span id="1c4e">**\[📰\]** <a href="https://jalammar.github.io/visualizing-pandas-pivoting-and-reshaping/" class="markup--anchor markup--li-anchor"><strong>Visualizing Pandas’ Pivoting and Reshaping Functions</strong></a></span>
- <span id="a548">**\[📰\]** <a href="https://jalammar.github.io/gentle-visual-intro-to-data-analysis-python-pandas/" class="markup--anchor markup--li-anchor"><strong>A Gentle Visual Intro to Data Analysis in Python Using Pandas</strong></a></span>
- <span id="d4d1">**\[📰\]** <a href="https://pbpython.com/groupby-agg.html" class="markup--anchor markup--li-anchor"><strong>Comprehensive Guide to Grouping and Aggregating with Pandas</strong></a></span>
- <span id="46f5">**\[📰\]** <a href="https://re-thought.com/pandas-value_counts/" class="markup--anchor markup--li-anchor"><strong>8 Python Pandas Value_counts() tricks that make your work more efficient</strong></a></span>
- <span id="b311">**\[💻\]** <a href="https://www.datacamp.com/courses/pandas-foundations" class="markup--anchor markup--li-anchor"><strong>pandas Foundations</strong></a></span>
- <span id="bd59">**\[💻\]** <a href="https://www.datacamp.com/courses/pandas-joins-for-spreadsheet-users" class="markup--anchor markup--li-anchor"><strong>Pandas Joins for Spreadsheet Users</strong></a></span>
- <span id="49b2">**\[💻\]** <a href="https://www.datacamp.com/courses/manipulating-dataframes-with-pandas" class="markup--anchor markup--li-anchor"><strong>Manipulating DataFrames with pandas</strong></a></span>
- <span id="5810">**\[💻\]** <a href="https://www.datacamp.com/courses/merging-dataframes-with-pandas" class="markup--anchor markup--li-anchor"><strong>Merging DataFrames with pandas</strong></a></span>
- <span id="ba78">**\[💻\]** <a href="https://www.datacamp.com/courses/data-manipulation-with-pandas" class="markup--anchor markup--li-anchor"><strong>Data Manipulation with pandas</strong></a></span>
- <span id="1285">**\[💻\]** <a href="https://www.datacamp.com/courses/optimizing-python-code-with-pandas" class="markup--anchor markup--li-anchor"><strong>Optimizing Python Code with pandas</strong></a></span>
- <span id="0fef">**\[💻\]** <a href="https://www.datacamp.com/courses/streamlined-data-ingestion-with-pandas" class="markup--anchor markup--li-anchor"><strong>Streamlined Data Ingestion with pandas</strong></a></span>
- <span id="3945">**\[💻\]** <a href="https://www.datacamp.com/courses/analyzing-marketing-campaigns-with-pandas" class="markup--anchor markup--li-anchor"><strong>Analyzing Marketing Campaigns with pandas</strong></a></span>
- <span id="7568">**\[ \]** <a href="https://www.edx.org/course/implementing-predictive-analytics-spark-microsoft-dat202-3x-2" class="markup--anchor markup--li-anchor"><strong>edX: Implementing Predictive Analytics with Spark in Azure HDInsight</strong></a></span>
- <span id="292f">**\[📰\]** <a href="https://tomaugspurger.github.io/" class="markup--anchor markup--li-anchor"><strong>Modern Pandas</strong></a></span>
- <span id="cb82">**\[ \]** <a href="https://tomaugspurger.github.io/modern-1-intro.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 1)</strong></a></span>
- <span id="b84c">**\[ \]** <a href="https://tomaugspurger.github.io/method-chaining.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 2)</strong></a></span>
- <span id="3f07">**\[ \]** <a href="https://tomaugspurger.github.io/modern-3-indexes.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 3)</strong></a></span>
- <span id="f919">**\[ \]** <a href="https://tomaugspurger.github.io/modern-4-performance.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 4)</strong></a></span>
- <span id="806e">**\[ \]** <a href="https://tomaugspurger.github.io/modern-5-tidy.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 5)</strong></a></span>
- <span id="fc16">**\[ \]** <a href="https://tomaugspurger.github.io/modern-6-visualization.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 6)</strong></a></span>
- <span id="dda2">**\[ \]** <a href="https://tomaugspurger.github.io/modern-7-timeseries.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 7)</strong></a></span>
- <span id="153f">**\[ \]** <a href="https://tomaugspurger.github.io/modern-8-scaling.html" class="markup--anchor markup--li-anchor"><strong>Modern Pandas (Part 8)</strong></a></span>

### Be able to manipulate data in spreadsheets

- <span id="b30c">**\[💻\]** <a href="https://www.datacamp.com/courses/spreadsheet-basics" class="markup--anchor markup--li-anchor"><strong>Spreadsheet basics</strong></a></span>
- <span id="aa58">**\[💻\]** <a href="https://www.datacamp.com/courses/data-analysis-with-spreadsheets" class="markup--anchor markup--li-anchor"><strong>Data Analysis with Spreadsheets</strong></a></span>
- <span id="fba0">**\[💻\]** <a href="https://www.datacamp.com/courses/intermediate-spreadsheets-for-data-science" class="markup--anchor markup--li-anchor"><strong>Intermediate Spreadsheets for Data Science</strong></a></span>
- <span id="cb66">**\[💻\]** <a href="https://www.datacamp.com/courses/pivot-tables-with-spreadsheets" class="markup--anchor markup--li-anchor"><strong>Pivot Tables with Spreadsheets</strong></a></span>
- <span id="18ae">**\[💻\]** <a href="https://www.datacamp.com/courses/data-visualization-in-spreadsheets" class="markup--anchor markup--li-anchor"><strong>Data Visualization in Spreadsheets</strong></a></span>
- <span id="943b">**\[💻\]** <a href="https://www.datacamp.com/courses/statistics-in-spreadsheets" class="markup--anchor markup--li-anchor"><strong>Introduction to Statistics in Spreadsheets</strong></a></span>
- <span id="eba7">**\[💻\]** <a href="https://www.datacamp.com/courses/conditional-formatting-in-spreadsheets" class="markup--anchor markup--li-anchor"><strong>Conditional Formatting in Spreadsheets</strong></a></span>
- <span id="07ec">**\[💻\]** <a href="https://www.datacamp.com/courses/marketing-analytics-in-spreadsheets" class="markup--anchor markup--li-anchor"><strong>Marketing Analytics in Spreadsheets</strong></a></span>
- <span id="82d7">**\[💻\]** <a href="https://www.datacamp.com/courses/error-and-uncertainty-in-spreadsheets" class="markup--anchor markup--li-anchor"><strong>Error and Uncertainty in Spreadsheets</strong></a></span>
- <span id="a4d5">**\[ \]** <a href="https://www.edx.org/course/analyzing-visualizing-data-excel-microsoft-dat206x-7" class="markup--anchor markup--li-anchor"><strong>edX: Analyzing and Visualizing Data with Excel</strong></a></span>

### Be able to manipulate data in databases

- <span id="d294">**\[ \]** <a href="https://www.codecademy.com/courses/learn-sql" class="markup--anchor markup--li-anchor"><strong>Codecademy: SQL Track</strong></a></span>
- <span id="c8a7">**\[💻\]** <a href="https://www.datacamp.com/courses/intro-to-sql-for-data-science" class="markup--anchor markup--li-anchor"><strong>Intro to SQL for Data Science</strong></a></span>
- <span id="5fb7">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-using-mongodb-for-data-science-with-python" class="markup--anchor markup--li-anchor"><strong>Introduction to MongoDB in Python</strong></a></span>
- <span id="97be">**\[💻\]** <a href="https://www.datacamp.com/courses/intermediate-sql" class="markup--anchor markup--li-anchor"><strong>Intermediate SQL</strong></a></span>
- <span id="9dd5">**\[💻\]** <a href="https://www.datacamp.com/courses/sql-for-exploratory-data-analysis" class="markup--anchor markup--li-anchor"><strong>Exploratory Data Analysis in SQL</strong></a></span>
- <span id="128a">**\[💻\]** <a href="https://www.datacamp.com/courses/joining-data-in-postgresql" class="markup--anchor markup--li-anchor"><strong>Joining Data in PostgreSQL</strong></a></span>
- <span id="8452">**\[💻\]** <a href="https://www.datacamp.com/courses/querying-with-transact-sql" class="markup--anchor markup--li-anchor"><strong>Querying with TransactSQL</strong></a></span>
- <span id="cf6e">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-relational-databases-in-python" class="markup--anchor markup--li-anchor"><strong>Introduction to Databases in Python</strong></a></span>
- <span id="42c1">**\[💻\]** <a href="https://www.datacamp.com/courses/reporting-in-sql" class="markup--anchor markup--li-anchor"><strong>Reporting in SQL</strong></a></span>
- <span id="0548">**\[💻\]** <a href="https://www.datacamp.com/courses/applying-sql-to-real-world-problems" class="markup--anchor markup--li-anchor"><strong>Applying SQL to Real-World Problems</strong></a></span>
- <span id="e0ac">**\[💻\]** <a href="https://www.datacamp.com/courses/analyzing-business-data-in-sql" class="markup--anchor markup--li-anchor"><strong>Analyzing Business Data in SQL</strong></a></span>
- <span id="c344">**\[💻\]** <a href="https://www.datacamp.com/courses/data-driven-decision-making-with-sql" class="markup--anchor markup--li-anchor"><strong>Data-Driven Decision Making in SQL</strong></a></span>
- <span id="1754">**\[💻\]** <a href="https://www.datacamp.com/courses/database-design" class="markup--anchor markup--li-anchor"><strong>Database Design</strong></a></span>
- <span id="d415">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/sql-for-data-analysis--ud198" class="markup--anchor markup--li-anchor"><strong>SQL for Data Analysis</strong></a></span>
- <span id="13a0">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/intro-to-relational-databases--ud197" class="markup--anchor markup--li-anchor"><strong>Intro to relational database</strong></a></span>
- <span id="5ee4">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/database-systems-concepts-design--ud150" class="markup--anchor markup--li-anchor"><strong>Database Systems Concepts &amp; Design</strong></a></span>

### Be able to use Linux

### Resources:

<a href="https://bryanguner.medium.com/bash-proficiency-in-under-15-minutes-3ec9d4e2e65" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/bash-proficiency-in-under-15-minutes-3ec9d4e2e65"><strong>Bash Proficiency In Under 15 Minutes</strong><br />
<em>Cheat sheet and in-depth explanations located below main article contents… The UNIX shell program interprets user…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/bash-proficiency-in-under-15-minutes-3ec9d4e2e65" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://levelup.gitconnected.com/these-are-the-bash-shell-commands-that-stand-between-me-and-insanity-984865ba5d1b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/these-are-the-bash-shell-commands-that-stand-between-me-and-insanity-984865ba5d1b"><strong>These Are The Bash Shell Commands That Stand Between Me And Insanity</strong><br />
<em>I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack…</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/these-are-the-bash-shell-commands-that-stand-between-me-and-insanity-984865ba5d1b" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://medium.com/geekculture/bash-commands-that-save-time-920fb6ab9d0a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/bash-commands-that-save-time-920fb6ab9d0a"><strong>Bash Commands That Save Me Time and Frustration</strong><br />
<em>Here’s a list of bash commands that stand between me and insanity.</em>medium.com</a><a href="https://medium.com/geekculture/bash-commands-that-save-time-920fb6ab9d0a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://medium.com/geekculture/life-saving-bash-scripts-part-2-b40c8ee22682" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/life-saving-bash-scripts-part-2-b40c8ee22682"><strong>Life Saving Bash Scripts Part 2</strong><br />
<em>I am not saying they’re in any way special compared with other bash scripts… but when I consider that you can never…</em>medium.com</a><a href="https://medium.com/geekculture/life-saving-bash-scripts-part-2-b40c8ee22682" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb"><strong>What Are Bash Aliases And Why Should You Be Using Them!</strong><br />
<em>A Bash alias is a method of supplementing or overriding Bash commands with new ones. Bash aliases make it easy for…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a>

<a href="https://bryanguner.medium.com/bash-d3077114aea7" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/bash-d3077114aea7"><strong>BASH CHEAT SHEET</strong><br />
<em>My Bash Cheatsheet Index:</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/bash-d3077114aea7" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a>

---

> <a href="https://gist.github.com/bgoonz/df74dfa73bb5edd239ac738a14104eee" class="markup--anchor markup--pullquote-anchor">holy grail</a> of learning bash

- <span id="21be">**\[📰\]** <a href="https://dev.to/yankee/streamline-projects-using-makefile-28fe" class="markup--anchor markup--li-anchor"><strong>Streamline your projects using Makefile</strong></a></span>
- <span id="d934">**\[📰\]** <a href="https://www.tecmint.com/understand-linux-load-averages-and-monitor-performance/" class="markup--anchor markup--li-anchor"><strong>Understand Linux Load Averages and Monitor Performance of Linux</strong></a></span>
- <span id="bfee">**\[📰\]** <a href="https://adamdrake.com/command-line-tools-can-be-235x-faster-than-your-hadoop-cluster.html" class="markup--anchor markup--li-anchor"><strong>Command-line Tools can be 235x Faster than your Hadoop Cluster</strong></a></span>
- <span id="3055">**\[ \]** <a href="https://calmcode.io/makefiles/the-problem.html" class="markup--anchor markup--li-anchor"><strong>Calmcode: makefiles</strong></a></span>
- <span id="1822">**\[ \]** <a href="https://calmcode.io/entr/introduction.html" class="markup--anchor markup--li-anchor"><strong>Calmcode: entr</strong></a></span>
- <span id="047b">**\[ \]** <a href="https://www.codecademy.com/learn/learn-the-command-line" class="markup--anchor markup--li-anchor"><strong>Codecademy: Learn the Command Line</strong></a></span>
- <span id="8dc6">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-shell-for-data-science" class="markup--anchor markup--li-anchor"><strong>Introduction to Shell for Data Science</strong></a></span>
- <span id="0564">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-bash-scripting" class="markup--anchor markup--li-anchor"><strong>Introduction to Bash Scripting</strong></a></span>
- <span id="144c">**\[💻\]** <a href="https://www.datacamp.com/courses/data-processing-in-shell" class="markup--anchor markup--li-anchor"><strong>Data Processing in Shell</strong></a></span>
- <span id="742e">**\[ \]** <a href="https://www.youtube.com/playlist?list=PLyzOVJj3bHQuloKGG59rS43e29ro7I57J" class="markup--anchor markup--li-anchor"><strong>MIT: The Missing Semester of CS Education</strong></a></span>
- <span id="7a73">**\[ \]** <a href="https://www.youtube.com/watch?v=Z56Jmr9Z34Q" class="markup--anchor markup--li-anchor"><strong>Lecture 1: Course Overview + The Shell (2020)</strong></a> **0:48:16**</span>
- <span id="6b01">**\[ \]** <a href="https://www.youtube.com/watch?v=kgII-YWo3Zw" class="markup--anchor markup--li-anchor"><strong>Lecture 2: Shell Tools and Scripting (2020)</strong></a> **0:48:55**</span>
- <span id="4023">**\[ \]** <a href="https://www.youtube.com/watch?v=a6Q8Na575qc" class="markup--anchor markup--li-anchor"><strong>Lecture 3: Editors (vim) (2020)</strong></a> **0:48:26**</span>
- <span id="6cfe">**\[ \]** <a href="https://www.youtube.com/watch?v=sz_dsktIjt4" class="markup--anchor markup--li-anchor"><strong>Lecture 4: Data Wrangling (2020)</strong></a> **0:50:03**</span>
- <span id="f34e">**\[ \]** <a href="https://www.youtube.com/watch?v=e8BO_dYxk5c" class="markup--anchor markup--li-anchor"><strong>Lecture 5: Command-line Environment (2020)</strong></a> **0:56:06**</span>
- <span id="229a">**\[ \]** <a href="https://www.youtube.com/watch?v=2sjqTHE0zok" class="markup--anchor markup--li-anchor"><strong>Lecture 6: Version Control (git) (2020)</strong></a> **1:24:59**</span>
- <span id="0660">**\[ \]** <a href="https://www.youtube.com/watch?v=l812pUnKxME" class="markup--anchor markup--li-anchor"><strong>Lecture 7: Debugging and Profiling (2020)</strong></a> **0:54:13**</span>
- <span id="3263">**\[ \]** <a href="https://www.youtube.com/watch?v=_Ms1Z4xfqv4" class="markup--anchor markup--li-anchor"><strong>Lecture 8: Metaprogramming (2020)</strong></a> **0:49:52**</span>
- <span id="aa85">**\[ \]** <a href="https://www.youtube.com/watch?v=tjwobAmnKTo" class="markup--anchor markup--li-anchor"><strong>Lecture 9: Security and Cryptography (2020)</strong></a> **1:00:59**</span>
- <span id="fcc9">**\[ \]** <a href="https://www.youtube.com/watch?v=JZDt-PRq0uo" class="markup--anchor markup--li-anchor"><strong>Lecture 10: Potpourri (2020)</strong></a> **0:57:54**</span>
- <span id="e4e8">**\[ \]** <a href="https://www.youtube.com/watch?v=Wz50FvGG6xU" class="markup--anchor markup--li-anchor"><strong>Lecture 11: Q&amp;A (2020)</strong></a> **0:53:52**</span>
- <span id="a30d">**\[ \]** <a href="https://thoughtbot.com/upcase/mastering-the-shell" class="markup--anchor markup--li-anchor"><strong>Thoughtbot: Mastering the Shell</strong></a></span>
- <span id="89e0">**\[ \]** <a href="https://thoughtbot.com/upcase/tmux" class="markup--anchor markup--li-anchor"><strong>Thoughtbot: tmux</strong></a></span>
- <span id="14df">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/linux-command-line-basics--ud595" class="markup--anchor markup--li-anchor"><strong>Linux Command Line Basics</strong></a></span>
- <span id="21cd">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/shell-workshop--ud206" class="markup--anchor markup--li-anchor"><strong>Shell Workshop</strong></a></span>
- <span id="6bbf">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/configuring-linux-web-servers--ud299" class="markup--anchor markup--li-anchor"><strong>Configuring Linux Web Servers</strong></a></span>
- <span id="029d">**\[ \]** <a href="https://www.youtube.com/watch?v=DP218aBHm1Q&amp;list=PLu8EoSxDXHP7tXPJp5ZmUpuT7sFvrswzf&amp;index=2" class="markup--anchor markup--li-anchor"><strong>Web Bos: Command Line Power User</strong></a></span>
- <span id="0b7e">**\[📺 \]** <a href="https://www.youtube.com/playlist?list=PL284C9FF2488BC6D1" class="markup--anchor markup--li-anchor"><strong>GNU Parallel</strong></a></span>

### Be able to perform feature selection and engineering

- <span id="ea71">**\[📰\]** <a href="https://www.maartengrootendorst.com/blog/feature-engineering/" class="markup--anchor markup--li-anchor"><strong>Tips for Advanced Feature Engineering</strong></a></span>
- <span id="9d82">**\[📰\]** <a href="https://www.jeremyjordan.me/preparing-data-for-a-machine-learning-model/" class="markup--anchor markup--li-anchor"><strong>Preparing data for a machine learning model</strong></a></span>
- <span id="f0d4">**\[📰\]** <a href="https://www.jeremyjordan.me/feature-selection/" class="markup--anchor markup--li-anchor"><strong>Feature selection for a machine learning model</strong></a></span>
- <span id="5d04">**\[📰\]** <a href="https://www.jeremyjordan.me/imbalanced-data/" class="markup--anchor markup--li-anchor"><strong>Learning from imbalanced data</strong></a></span>
- <span id="ac2e">**\[📰\]** <a href="https://www.curiousily.com/posts/hackers-guide-to-data-preparation-for-machine-learning/" class="markup--anchor markup--li-anchor"><strong>Hacker’s Guide to Data Preparation for Machine Learning</strong></a></span>
- <span id="64d5">**\[📰\]** <a href="https://www.curiousily.com/posts/practical-guide-to-handling-imbalanced-datasets/" class="markup--anchor markup--li-anchor"><strong>Practical Guide to Handling Imbalanced Datasets</strong></a></span>
- <span id="50a1">**\[💻\]** <a href="https://www.datacamp.com/courses/analyzing-social-media-data-in-python" class="markup--anchor markup--li-anchor"><strong>Analyzing Social Media Data in Python</strong></a></span>
- <span id="6c36">**\[💻\]** <a href="https://www.datacamp.com/courses/dimensionality-reduction-in-python" class="markup--anchor markup--li-anchor"><strong>Dimensionality Reduction in Python</strong></a></span>
- <span id="d73a">**\[💻\]** <a href="https://www.datacamp.com/courses/preprocessing-for-machine-learning-in-python" class="markup--anchor markup--li-anchor"><strong>Preprocessing for Machine Learning in Python</strong></a></span>
- <span id="be71">**\[💻\]** <a href="https://www.datacamp.com/courses/data-types-for-data-science" class="markup--anchor markup--li-anchor"><strong>Data Types for Data Science</strong></a></span>
- <span id="b916">**\[💻\]** <a href="https://www.datacamp.com/courses/cleaning-data-in-python" class="markup--anchor markup--li-anchor"><strong>Cleaning Data in Python</strong></a></span>
- <span id="01c2">**\[💻\]** <a href="https://www.datacamp.com/courses/feature-engineering-for-machine-learning-in-python" class="markup--anchor markup--li-anchor"><strong>Feature Engineering for Machine Learning in Python</strong></a></span>
- <span id="1bfe">**\[💻\]** <a href="https://www.datacamp.com/courses/importing-managing-financial-data-in-python" class="markup--anchor markup--li-anchor"><strong>Importing &amp; Managing Financial Data in Python</strong></a></span>
- <span id="98af">**\[💻\]** <a href="https://www.datacamp.com/courses/manipulating-time-series-data-in-python" class="markup--anchor markup--li-anchor"><strong>Manipulating Time Series Data in Python</strong></a></span>
- <span id="db32">**\[💻\]** <a href="https://www.datacamp.com/courses/working-with-geospatial-data-in-python" class="markup--anchor markup--li-anchor"><strong>Working with Geospatial Data in Python</strong></a></span>
- <span id="7a5f">**\[💻\]** <a href="https://www.datacamp.com/courses/analyzing-iot-data-in-python" class="markup--anchor markup--li-anchor"><strong>Analyzing IoT Data in Python</strong></a></span>
- <span id="4a8f">**\[💻\]** <a href="https://www.datacamp.com/courses/dealing-with-missing-data-in-python" class="markup--anchor markup--li-anchor"><strong>Dealing with Missing Data in Python</strong></a></span>
- <span id="291b">**\[💻\]** <a href="https://www.datacamp.com/courses/exploratory-data-analysis-in-python" class="markup--anchor markup--li-anchor"><strong>Exploratory Data Analysis in Python</strong></a></span>
- <span id="f22a">**\[ \]** <a href="https://www.edx.org/course/data-science-essentials-microsoft-dat203-1x-5" class="markup--anchor markup--li-anchor"><strong>edX: Data Science Essentials</strong></a></span>
- <span id="9582">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/creating-an-analytical-dataset--ud977" class="markup--anchor markup--li-anchor"><strong>Creating an Analytical Dataset</strong></a></span>
- <span id="5b11">**\[📺 \]** <a href="https://www.youtube.com/watch?v=XpOBSaktb6s" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–04 — Preprocessing</strong></a> **1:07:40**</span>
- <span id="9fe4">**\[📺 \]** <a href="https://www.youtube.com/watch?v=FDhyS6Xjxa8" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–11 — Model Inspection and Feature Selection</strong></a> **1:15:15**</span>

### Be able to experiment in a notebook

- <span id="8951">**\[📰\]** <a href="http://veekaybee.github.io/2020/02/25/secrets/" class="markup--anchor markup--li-anchor"><strong>Securely storing configuration credentials in a Jupyter Notebook</strong></a></span>
- <span id="9bb8">**\[📰\]** <a href="https://switowski.com/blog/ipython-autoreload" class="markup--anchor markup--li-anchor"><strong>Automatically Reload Modules with %autoreload</strong></a></span>
- <span id="b122">**\[ \]** <a href="https://calmcode.io/ipywidgets/introduction.html" class="markup--anchor markup--li-anchor"><strong>Calmcode: ipywidgets</strong></a></span>
- <span id="5b76">**\[ \]** <a href="https://jupyterlab.readthedocs.io/en/stable/getting_started/overview.html" class="markup--anchor markup--li-anchor"><strong>Documentation: Jupyter Lab</strong></a></span>
- <span id="2306">**\[ \]** <a href="https://www.pluralsight.com/courses/jupyter-notebook-python" class="markup--anchor markup--li-anchor"><strong>Pluralsight: Getting Started with Jupyter Notebook and Python</strong></a></span>
- <span id="ffa2">**\[📺 \]** <a href="https://www.youtube.com/watch?v=kFhhCOeYcGw" class="markup--anchor markup--li-anchor"><strong>William Horton — A Brief History of Jupyter Notebooks</strong></a></span>
- <span id="d5dd">**\[📺 \]** <a href="https://www.youtube.com/watch?v=9Q6sLbz37gk" class="markup--anchor markup--li-anchor"><strong>I Like Notebooks</strong></a></span>
- <span id="d9d6">**\[📺 \]** <a href="https://www.youtube.com/watch?v=7jiPeIFXb6U" class="markup--anchor markup--li-anchor"><strong>I don’t like notebooks.- Joel Grus (Allen Institute for Artificial Intelligence)</strong></a></span>
- <span id="6969">**\[📺 \]** <a href="https://www.youtube.com/watch?v=hGHwu1h3l6g" class="markup--anchor markup--li-anchor"><strong>Ryan Herr — After model.fit, before you deploy| JupyterCon 2020</strong></a></span>
- <span id="950c">**\[📺 \]** <a href="https://www.youtube.com/watch?v=ZJTop5uqC2U&amp;feature=youtu.be" class="markup--anchor markup--li-anchor"><strong>nbdev live coding with Hamel Husain</strong></a></span>
- <span id="224e">**\[📺 \]** <a href="https://www.youtube.com/watch?v=A5YyoCKxEOU&amp;feature=emb_logo" class="markup--anchor markup--li-anchor"><strong>How to Use JupyterLab</strong></a></span>

### Be able to visualize data

- <span id="b724">**\[📰\]** <a href="https://towardsdatascience.com/creating-a-catchier-word-cloud-presentation-e17fa2c1ef46" class="markup--anchor markup--li-anchor"><strong>Creating a Catchier Word Cloud Presentation</strong></a></span>
- <span id="a93e">**\[📰\]** <a href="https://pbpython.com/effective-matplotlib.html" class="markup--anchor markup--li-anchor"><strong>Effectively Using Matplotlib</strong></a></span>
- <span id="31d0">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-data-visualization-with-python" class="markup--anchor markup--li-anchor"><strong>Introduction to Data Visualization with Python</strong></a></span>
- <span id="e7b9">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-seaborn" class="markup--anchor markup--li-anchor"><strong>Introduction to Seaborn</strong></a></span>
- <span id="60b1">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-matplotlib" class="markup--anchor markup--li-anchor"><strong>Introduction to Matplotlib</strong></a></span>
- <span id="5d97">**\[💻\]** <a href="https://www.datacamp.com/courses/data-visualization-with-seaborn" class="markup--anchor markup--li-anchor"><strong>Intermediate Data Visualization with Seaborn</strong></a></span>
- <span id="103a">**\[💻\]** <a href="https://www.datacamp.com/courses/visualizing-time-series-data-in-python" class="markup--anchor markup--li-anchor"><strong>Visualizing Time Series Data in Python</strong></a></span>
- <span id="0453">**\[💻\]** <a href="https://www.datacamp.com/courses/improving-your-data-visualizations-in-python" class="markup--anchor markup--li-anchor"><strong>Improving Your Data Visualizations in Python</strong></a></span>
- <span id="ded4">**\[💻\]** <a href="https://www.datacamp.com/courses/visualizing-geospatial-data-in-python" class="markup--anchor markup--li-anchor"><strong>Visualizing Geospatial Data in Python</strong></a></span>
- <span id="38bd">**\[💻\]** <a href="https://www.datacamp.com/courses/interactive-data-visualization-with-bokeh" class="markup--anchor markup--li-anchor"><strong>Interactive Data Visualization with Bokeh</strong></a></span>
- <span id="fa47">**\[📺 \]** <a href="https://www.youtube.com/watch?v=OW3oco7nlV4" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–02 Visualization and matplotlib</strong></a> **1:07:30**</span>

### Be able to model problems mathematically

- <span id="7410">**\[ \]** <a href="https://www.youtube.com/playlist?list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr" class="markup--anchor markup--li-anchor"><strong>3Blue1Brown: Essence of Calculus</strong></a></span>
- <span id="2490">**\[ \]** <a href="https://www.youtube.com/watch?v=WUvTyaaNkzM" class="markup--anchor markup--li-anchor"><strong>The Essence of Calculus, Chapter 1</strong></a> **0:17:04**</span>
- <span id="37af">**\[ \]** <a href="https://www.youtube.com/watch?v=9vKqVkMQHKk" class="markup--anchor markup--li-anchor"><strong>The paradox of the derivative | Essence of calculus, chapter 2</strong></a> **0:17:57**</span>
- <span id="a5b6">**\[ \]** <a href="https://www.youtube.com/watch?v=S0_qX4VJhMQ" class="markup--anchor markup--li-anchor"><strong>Derivative formulas through geometry | Essence of calculus, chapter 3</strong></a> **0:18:43**</span>
- <span id="7515">**\[ \]** <a href="https://www.youtube.com/watch?v=YG15m2VwSjA" class="markup--anchor markup--li-anchor"><strong>Visualizing the chain rule and product rule | Essence of calculus, chapter 4</strong></a> **0:16:52**</span>
- <span id="bc6e">**\[ \]** <a href="https://www.youtube.com/watch?v=m2MIpDrF7Es" class="markup--anchor markup--li-anchor"><strong>What’s so special about Euler’s number e? | Essence of calculus, chapter 5</strong></a> **0:13:50**</span>
- <span id="cd8f">**\[ \]** <a href="https://www.youtube.com/watch?v=qb40J4N1fa4" class="markup--anchor markup--li-anchor"><strong>Implicit differentiation, what’s going on here? | Essence of calculus, chapter 6</strong></a> **0:15:33**</span>
- <span id="ef54">**\[ \]** <a href="https://www.youtube.com/watch?v=kfF40MiS7zA" class="markup--anchor markup--li-anchor"><strong>Limits, L’Hôpital’s rule, and epsilon delta definitions | Essence of calculus, chapter 7</strong></a> **0:18:26**</span>
- <span id="8e2b">**\[ \]** <a href="https://www.youtube.com/watch?v=rfG8ce4nNh0" class="markup--anchor markup--li-anchor"><strong>Integration and the fundamental theorem of calculus | Essence of calculus, chapter 8</strong></a> **0:20:46**</span>
- <span id="cd1d">**\[ \]** <a href="https://www.youtube.com/watch?v=FnJqaIESC2s" class="markup--anchor markup--li-anchor"><strong>What does area have to do with slope? | Essence of calculus, chapter 9</strong></a> **0:12:39**</span>
- <span id="33fe">**\[ \]** <a href="https://www.youtube.com/watch?v=BLkz5LGWihw" class="markup--anchor markup--li-anchor"><strong>Higher order derivatives | Essence of calculus, chapter 10</strong></a> **0:05:38**</span>
- <span id="3f69">**\[ \]** <a href="https://www.youtube.com/watch?v=3d6DsjIBzJ4" class="markup--anchor markup--li-anchor"><strong>Taylor series | Essence of calculus, chapter 11</strong></a> **0:22:19**</span>
- <span id="bc10">**\[ \]** <a href="https://www.youtube.com/watch?v=CfW845LNObM" class="markup--anchor markup--li-anchor"><strong>What they won’t teach you in calculus</strong></a> **0:16:22**</span>
- <span id="d010">**\[ \]** <a href="https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab" class="markup--anchor markup--li-anchor"><strong>3Blue1Brown: Essence of linear algebra</strong></a></span>
- <span id="aa50">**\[ \]** <a href="https://www.youtube.com/watch?v=fNk_zzaMoSs" class="markup--anchor markup--li-anchor"><strong>Vectors, what even are they? | Essence of linear algebra, chapter 1</strong></a> **0:09:52**</span>
- <span id="1209">**\[ \]** <a href="https://www.youtube.com/watch?v=k7RM-ot2NWY" class="markup--anchor markup--li-anchor"><strong>Linear combinations, span, and basis vectors | Essence of linear algebra, chapter 2</strong></a> **0:09:59**</span>
- <span id="1b69">**\[ \]** <a href="https://www.youtube.com/watch?v=kYB8IZa5AuE" class="markup--anchor markup--li-anchor"><strong>Linear transformations and matrices | Essence of linear algebra, chapter 3</strong></a> **0:10:58**</span>
- <span id="7119">**\[ \]** <a href="https://www.youtube.com/watch?v=XkY2DOUCWMU" class="markup--anchor markup--li-anchor"><strong>Matrix multiplication as composition | Essence of linear algebra, chapter 4</strong></a> **0:10:03**</span>
- <span id="4bd8">**\[ \]** <a href="https://www.youtube.com/watch?v=rHLEWRxRGiM" class="markup--anchor markup--li-anchor"><strong>Three-dimensional linear transformations | Essence of linear algebra, chapter 5</strong></a> **0:04:46**</span>
- <span id="a9e8">**\[ \]** <a href="https://www.youtube.com/watch?v=Ip3X9LOh2dk" class="markup--anchor markup--li-anchor"><strong>The determinant | Essence of linear algebra, chapter 6</strong></a> **0:10:03**</span>
- <span id="1d19">**\[ \]** <a href="https://www.youtube.com/watch?v=uQhTuRlWMxw" class="markup--anchor markup--li-anchor"><strong>Inverse matrices, column space and null space | Essence of linear algebra, chapter 7</strong></a> **0:12:08**</span>
- <span id="6939">**\[ \]** <a href="https://www.youtube.com/watch?v=v8VSDg_WQlA" class="markup--anchor markup--li-anchor"><strong>Nonsquare matrices as transformations between dimensions | Essence of linear algebra, chapter 8</strong></a> **0:04:27**</span>
- <span id="d821">**\[ \]** <a href="https://www.youtube.com/watch?v=LyGKycYT2v0" class="markup--anchor markup--li-anchor"><strong>Dot products and duality | Essence of linear algebra, chapter 9</strong></a> **0:14:11**</span>
- <span id="8e5a">**\[ \]** <a href="https://www.youtube.com/watch?v=eu6i7WJeinw" class="markup--anchor markup--li-anchor"><strong>Cross products | Essence of linear algebra, Chapter 10</strong></a> **0:08:53**</span>
- <span id="984f">**\[ \]** <a href="https://www.youtube.com/watch?v=BaM7OCEm3G0" class="markup--anchor markup--li-anchor"><strong>Cross products in the light of linear transformations | Essence of linear algebra chapter 11</strong></a> **0:13:10**</span>
- <span id="eba8">**\[ \]** <a href="https://www.youtube.com/watch?v=jBsC34PxzoM" class="markup--anchor markup--li-anchor"><strong>Cramer’s rule, explained geometrically | Essence of linear algebra, chapter 12</strong></a> **0:12:12**</span>
- <span id="55e0">**\[ \]** <a href="https://www.youtube.com/watch?v=P2LTAUO1TdA" class="markup--anchor markup--li-anchor"><strong>Change of basis | Essence of linear algebra, chapter 13</strong></a> **0:12:50**</span>
- <span id="3e49">**\[ \]** <a href="https://www.youtube.com/watch?v=PFDu9oVAE-g" class="markup--anchor markup--li-anchor"><strong>Eigenvectors and eigenvalues | Essence of linear algebra, chapter 14</strong></a> **0:17:15**</span>
- <span id="fbfa">**\[ \]** <a href="https://www.youtube.com/watch?v=TgKwz5Ikpc8" class="markup--anchor markup--li-anchor"><strong>Abstract vector spaces | Essence of linear algebra, chapter 15</strong></a> **0:16:46**</span>
- <span id="3a80">**\[ \]** <a href="https://www.youtube.com/playlist?list=PLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pi" class="markup--anchor markup--li-anchor"><strong>3Blue1Brown: Neural networks</strong></a></span>
- <span id="7131">**\[ \]** <a href="https://www.youtube.com/watch?v=aircAruvnKk" class="markup--anchor markup--li-anchor"><strong>But what is a Neural Network? | Deep learning, chapter 1</strong></a> **0:19:13**</span>
- <span id="63f0">**\[ \]** <a href="https://www.youtube.com/watch?v=IHZwWFHWa-w" class="markup--anchor markup--li-anchor"><strong>Gradient descent, how neural networks learn | Deep learning, chapter 2</strong></a> **0:21:01**</span>
- <span id="dafa">**\[ \]** <a href="https://www.youtube.com/watch?v=Ilg3gGewQ5U" class="markup--anchor markup--li-anchor"><strong>What is backpropagation really doing? | Deep learning, chapter 3</strong></a> **0:13:54**</span>
- <span id="23a3">**\[ \]** <a href="https://www.youtube.com/watch?v=tIeHLnjs5U8" class="markup--anchor markup--li-anchor"><strong>Backpropagation calculus | Deep learning, chapter 4</strong></a> **0:10:17**</span>
- <span id="dc0d">**\[📰\]** <a href="https://blog.jinay.dev/posts/backprop/" class="markup--anchor markup--li-anchor"><strong>A Visual Tour of Backpropagation</strong></a></span>
- <span id="7902">**\[📰\]** <a href="https://towardsdatascience.com/entropy-cross-entropy-and-kl-divergence-17138ffab87b" class="markup--anchor markup--li-anchor"><strong>Entropy, Cross Entropy, and KL Divergence</strong></a></span>
- <span id="eefc">**\[📰\]** <a href="https://medium.com/acing-ai/interview-guide-to-probability-distributions-a6dfb08c3766" class="markup--anchor markup--li-anchor"><strong>Interview Guide to Probability Distributions</strong></a></span>
- <span id="342d">**\[📰\]** <a href="https://pabloinsente.github.io/intro-linear-algebra" class="markup--anchor markup--li-anchor"><strong>Introduction to Linear Algebra for Applied Machine Learning with Python</strong></a></span>
- <span id="836c">**\[📰\]** <a href="https://medium.com/@ajitrajasekharan/entropy-of-a-probability-distribution-explained-in-laymans-terms-8a4139b329bc" class="markup--anchor markup--li-anchor"><strong>Entropy of a probability distribution — in layman’s terms</strong></a></span>
- <span id="db2c">**\[📰\]** <a href="https://medium.com/@ajitrajasekharan/what-is-kl-divergence-d1fb7921ee5b" class="markup--anchor markup--li-anchor"><strong>KL Divergence — in layman’s terms</strong></a></span>
- <span id="bbc4">**\[📰\]** <a href="https://www.simonwardjones.co.uk/posts/probability_distributions/" class="markup--anchor markup--li-anchor"><strong>Probability Distributions</strong></a></span>
- <span id="922b">**\[📰\]** <a href="https://www.dhruvonmath.com/2018/12/31/matrices/" class="markup--anchor markup--li-anchor"><strong>Relearning Matrices as Linear Functions</strong></a></span>
- <span id="7824">**\[📰\]** <a href="https://www.dhruvonmath.com/2019/02/25/eigenvectors/" class="markup--anchor markup--li-anchor"><strong>You Could Have Come Up With Eigenvectors — Here’s How</strong></a></span>
- <span id="0019">**\[📰\]** <a href="https://www.dhruvonmath.com/2019/03/20/pagerank/" class="markup--anchor markup--li-anchor"><strong>PageRank — How Eigenvectors Power the Algorithm Behind Google Search</strong></a></span>
- <span id="a58c">**\[📰\]** <a href="https://www.dhruvonmath.com/2020/07/26/who-cares-about-eigenvectors/" class="markup--anchor markup--li-anchor"><strong>Interactive Visualization of Why Eigenvectors Matter</strong></a></span>
- <span id="6b15">**\[📰\]** <a href="https://medium.com/swlh/cross-entropy-and-kl-divergence-522d9f71bd3d" class="markup--anchor markup--li-anchor"><strong>Cross-Entropy and KL Divergence</strong></a></span>
- <span id="3f25">**\[📰\]** <a href="https://medium.com/swlh/why-randomness-is-information-f2468966b29d" class="markup--anchor markup--li-anchor"><strong>Why Randomness Is Information?</strong></a></span>
- <span id="4843">**\[📰\]** <a href="https://medium.com/swlh/probability-for-machine-learning-and-data-science-cccd4f4f1df1" class="markup--anchor markup--li-anchor"><strong>Basic Probability Theory</strong></a></span>
- <span id="3c58">**\[📰\]** <a href="https://towardsdatascience.com/math-you-need-to-succeed-in-ml-interviews-9e717d61f296" class="markup--anchor markup--li-anchor"><strong>Math You Need to Succeed InMachine Learning Interviews</strong></a></span>
- <span id="d9e7">**\[📖\]** <a href="https://machinelearningmastery.com/linear_algebra_for_machine_learning/" class="markup--anchor markup--li-anchor"><strong>Basics of Linear Algebra for Machine Learning</strong></a></span>
- <span id="7ba0">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-statistics-in-python" class="markup--anchor markup--li-anchor"><strong>Introduction to Statistics in Python</strong></a></span>
- <span id="7128">**\[💻\]** <a href="https://www.datacamp.com/courses/foundations-of-probability-in-python" class="markup--anchor markup--li-anchor"><strong>Foundations of Probability in Python</strong></a></span>
- <span id="e0be">**\[💻\]** <a href="https://www.datacamp.com/courses/statistical-thinking-in-python-part-1" class="markup--anchor markup--li-anchor"><strong>Statistical Thinking in Python (Part 1)</strong></a></span>
- <span id="4c55">**\[💻\]** <a href="https://www.datacamp.com/courses/statistical-thinking-in-python-part-2" class="markup--anchor markup--li-anchor"><strong>Statistical Thinking in Python (Part 2)</strong></a></span>
- <span id="8353">**\[💻\]** <a href="https://www.datacamp.com/courses/statistical-simulation-in-python" class="markup--anchor markup--li-anchor"><strong>Statistical Simulation in Python</strong></a></span>
- <span id="d598">**\[ \]** <a href="https://www.edx.org/course/essential-statistics-data-analysis-using-microsoft-dat222x-1" class="markup--anchor markup--li-anchor"><strong>edX: Essential Statistics for Data Analysis using Excel</strong></a></span>
- <span id="a945">**\[ \]** <a href="https://github.com/fastai/numerical-linear-algebra" class="markup--anchor markup--li-anchor"><strong>Computational Linear Algebra for Coders</strong></a></span>
- <span id="99e4">**\[ \]** <a href="https://www.khanacademy.org/math/precalculus" class="markup--anchor markup--li-anchor"><strong>Khan Academy: Precalculus</strong></a></span>
- <span id="a313">**\[ \]** <a href="https://www.khanacademy.org/mission/probability" class="markup--anchor markup--li-anchor"><strong>Khan Academy: Probability</strong></a></span>
- <span id="2236">**\[ \]** <a href="https://www.khanacademy.org/mission/differential-calculus" class="markup--anchor markup--li-anchor"><strong>Khan Academy: Differential Calculus</strong></a></span>
- <span id="0285">**\[ \]** <a href="https://www.khanacademy.org/math/multivariable-calculus" class="markup--anchor markup--li-anchor"><strong>Khan Academy: Multivariable Calculus</strong></a></span>
- <span id="b590">**\[ \]** <a href="https://www.khanacademy.org/math/linear-algebra" class="markup--anchor markup--li-anchor"><strong>Khan Academy: Linear Algebra</strong></a></span>
- <span id="b98b">**\[ \]** <a href="https://ocw.mit.edu/courses/mathematics/18-06-linear-algebra-spring-2010/" class="markup--anchor markup--li-anchor"><strong>MIT: 18.06 Linear Algebra (Professor Strang)</strong></a></span>
- <span id="d316">**\[ \]** <a href="https://www.youtube.com/watch?v=J7DzL2_Na80" class="markup--anchor markup--li-anchor"><strong>1. The Geometry of Linear Equations</strong></a> **0:39:49**</span>
- <span id="d01a">**\[ \]** <a href="https://www.youtube.com/watch?v=QVKj3LADCnA" class="markup--anchor markup--li-anchor"><strong>2. Elimination with Matrices.</strong></a> **0:47:41**</span>
- <span id="b622">**\[ \]** <a href="https://www.youtube.com/watch?v=FX4C-JpTFgY" class="markup--anchor markup--li-anchor"><strong>3. Multiplication and Inverse Matrices</strong></a> **0:46:48**</span>
- <span id="6b2c">**\[ \]** <a href="https://www.youtube.com/watch?v=MsIvs_6vC38" class="markup--anchor markup--li-anchor"><strong>4. Factorization into A = LU</strong></a> **0:48:05**</span>
- <span id="e6cd">**\[ \]** <a href="https://www.youtube.com/watch?v=JibVXBElKL0" class="markup--anchor markup--li-anchor"><strong>5. Transposes, Permutations, Spaces R^n</strong></a> **0:47:41**</span>
- <span id="f463">**\[ \]** <a href="https://www.youtube.com/watch?v=8o5Cmfpeo6g" class="markup--anchor markup--li-anchor"><strong>6. Column Space and Nullspace</strong></a> **0:46:01**</span>
- <span id="50a2">**\[ \]** <a href="https://www.youtube.com/watch?v=yjBerM5jWsc" class="markup--anchor markup--li-anchor"><strong>9. Independence, Basis, and Dimension</strong></a> **0:50:14**</span>
- <span id="8c31">**\[ \]** <a href="https://www.youtube.com/watch?v=nHlE7EgJFds" class="markup--anchor markup--li-anchor"><strong>10. The Four Fundamental Subspaces</strong></a> **0:49:20**</span>
- <span id="d0c6">**\[ \]** <a href="https://www.youtube.com/watch?v=2IdtqGM6KWU" class="markup--anchor markup--li-anchor"><strong>11. Matrix Spaces; Rank 1; Small World Graphs</strong></a> **0:45:55**</span>
- <span id="ab34">**\[ \]** <a href="https://www.youtube.com/watch?v=YzZUIYRCE38" class="markup--anchor markup--li-anchor"><strong>14. Orthogonal Vectors and Subspaces</strong></a> **0:49:47**</span>
- <span id="86ae">**\[ \]** <a href="https://www.youtube.com/watch?v=Y_Ac6KiQ1t0" class="markup--anchor markup--li-anchor"><strong>15. Projections onto Subspaces</strong></a> **0:48:51**</span>
- <span id="bf40">**\[ \]** <a href="https://www.youtube.com/watch?v=osh80YCg_GM" class="markup--anchor markup--li-anchor"><strong>16. Projection Matrices and Least Squares</strong></a> **0:48:05**</span>
- <span id="adfa">**\[ \]** <a href="https://www.youtube.com/watch?v=0MtwqhIwdrI" class="markup--anchor markup--li-anchor"><strong>17. Orthogonal Matrices and Gram-Schmidt</strong></a> **0:49:09**</span>
- <span id="2225">**\[ \]** <a href="https://www.youtube.com/watch?v=cdZnhQjJu4I" class="markup--anchor markup--li-anchor"><strong>21. Eigenvalues and Eigenvectors</strong></a> **0:51:22**</span>
- <span id="9710">**\[ \]** <a href="https://www.youtube.com/watch?v=13r9QY6cmjc" class="markup--anchor markup--li-anchor"><strong>22. Diagonalization and Powers of A</strong></a> **0:51:50**</span>
- <span id="2ebc">**\[ \]** <a href="https://www.youtube.com/watch?v=lGGDIGizcQ0" class="markup--anchor markup--li-anchor"><strong>24. Markov Matrices; Fourier Series</strong></a> **0:51:11**</span>
- <span id="a97e">**\[ \]** <a href="https://www.youtube.com/watch?v=UCc9q_cAhho" class="markup--anchor markup--li-anchor"><strong>25. Symmetric Matrices and Positive Definiteness</strong></a> **0:43:52**</span>
- <span id="1670">**\[ \]** <a href="https://www.youtube.com/watch?v=vF7eyJ2g3kU" class="markup--anchor markup--li-anchor"><strong>27. Positive Definite Matrices and Minima</strong></a> **0:50:40**</span>
- <span id="32ed">**\[ \]** <a href="https://www.youtube.com/watch?v=TX_vooSnhm8" class="markup--anchor markup--li-anchor"><strong>29. Singular Value Decomposition</strong></a> **0:40:28**</span>
- <span id="4c0f">**\[ \]** <a href="https://www.youtube.com/watch?v=Ts3o2I8_Mxc" class="markup--anchor markup--li-anchor"><strong>30. Linear Transformations and Their Matrices</strong></a> **0:49:27**</span>
- <span id="a26c">**\[ \]** <a href="https://www.youtube.com/watch?v=0h43aV4aH7I" class="markup--anchor markup--li-anchor"><strong>31. Change of Basis; Image Compression</strong></a> **0:50:13**</span>
- <span id="721a">**\[ \]** <a href="https://www.youtube.com/watch?v=Go2aLo7ZOlU" class="markup--anchor markup--li-anchor"><strong>33. Left and Right Inverses; Pseudoinverse</strong></a> **0:41:52**</span>
- <span id="593f">**\[ \]** <a href="https://www.youtube.com/playlist?list=PLblh5JKOoLUK0FLuzwntyYI10UQFUhsY9" class="markup--anchor markup--li-anchor"><strong>StatQuest: Statistics Fundamentals</strong></a></span>
- <span id="e7eb">**\[ \]** <a href="https://www.youtube.com/watch?v=qBigTkBLU6g" class="markup--anchor markup--li-anchor"><strong>StatQuest: Histograms, Clearly Explained</strong></a> **0:03:42**</span>
- <span id="895f">**\[ \]** <a href="https://www.youtube.com/watch?v=oI3hZJqXJuc" class="markup--anchor markup--li-anchor"><strong>StatQuest: What is a statistical distribution?</strong></a> **0:05:14**</span>
- <span id="aa19">**\[ \]** <a href="https://www.youtube.com/watch?v=rzFX5NWojp0" class="markup--anchor markup--li-anchor"><strong>StatQuest: The Normal Distribution, Clearly Explained!!!</strong></a> **0:05:12**</span>
- <span id="edee">**\[ \]** <a href="https://www.youtube.com/watch?v=vikkiwjQqfU" class="markup--anchor markup--li-anchor"><strong>Statistics Fundamentals: Population Parameters</strong></a> **0:14:31**</span>
- <span id="f435">**\[ \]** <a href="https://www.youtube.com/watch?v=SzZ6GpcfoQY" class="markup--anchor markup--li-anchor"><strong>Statistics Fundamentals: The Mean, Variance and Standard Deviation</strong></a> **0:14:22**</span>
- <span id="d312">**\[ \]** <a href="https://www.youtube.com/watch?v=yQhTtdq_y9M" class="markup--anchor markup--li-anchor"><strong>StatQuest: What is a statistical model?</strong></a> **0:03:45**</span>
- <span id="e085">**\[ \]** <a href="https://www.youtube.com/watch?v=XLCWeSVzHUU" class="markup--anchor markup--li-anchor"><strong>StatQuest: Sampling A Distribution</strong></a> **0:03:48**</span>
- <span id="e59e">**\[ \]** <a href="https://www.youtube.com/watch?v=0oc49DyA3hU" class="markup--anchor markup--li-anchor"><strong>Hypothesis Testing and The Null Hypothesis</strong></a> **0:14:40**</span>
- <span id="6d88">**\[ \]** <a href="https://www.youtube.com/watch?v=5koKb5B_YWo" class="markup--anchor markup--li-anchor"><strong>Alternative Hypotheses: Main Ideas!!!</strong></a> **0:09:49**</span>
- <span id="6297">**\[ \]** <a href="https://www.youtube.com/watch?v=vemZtEM63GY" class="markup--anchor markup--li-anchor"><strong>p-values: What they are and how to interpret them</strong></a> **0:11:22**</span>
- <span id="acff">**\[ \]** <a href="https://www.youtube.com/watch?v=JQc3yx0-Q9E" class="markup--anchor markup--li-anchor"><strong>How to calculate p-values</strong></a> **0:25:15**</span>
- <span id="77f8">**\[ \]** <a href="https://www.youtube.com/watch?v=HDCOUXE3HMM" class="markup--anchor markup--li-anchor"><strong>p-hacking: What it is and how to avoid it!</strong></a> **0:13:44**</span>
- <span id="37f3">**\[ \]** <a href="https://www.youtube.com/watch?v=Rsc5znwR5FA" class="markup--anchor markup--li-anchor"><strong>Statistical Power, Clearly Explained!!!</strong></a> **0:08:19**</span>
- <span id="f181">**\[ \]** <a href="https://www.youtube.com/watch?v=VX_M3tIyiYk" class="markup--anchor markup--li-anchor"><strong>Power Analysis, Clearly Explained!!!</strong></a> **0:16:44**</span>
- <span id="d476">**\[ \]** <a href="https://www.youtube.com/watch?v=qtaqvPAeEJY" class="markup--anchor markup--li-anchor"><strong>Covariance and Correlation Part 1: Covariance</strong></a> **0:22:23**</span>
- <span id="4a24">**\[ \]** <a href="https://www.youtube.com/watch?v=xZ_z8KWkhXE" class="markup--anchor markup--li-anchor"><strong>Covariance and Correlation Part 2: Pearson’s Correlation</strong></a> **0:19:13**</span>
- <span id="cf76">**\[ \]** <a href="https://www.youtube.com/watch?v=2AQKmw14mHM" class="markup--anchor markup--li-anchor"><strong>StatQuest: R-squared explained</strong></a> **0:11:01**</span>
- <span id="1e48">**\[ \]** <a href="https://www.youtube.com/watch?v=YAlJCEDH2uY" class="markup--anchor markup--li-anchor"><strong>The Central Limit Theorem</strong></a> **0:07:35**</span>
- <span id="de60">**\[ \]** <a href="https://www.youtube.com/watch?v=A82brFpdr9g" class="markup--anchor markup--li-anchor"><strong>StatQuickie: Standard Deviation vs Standard Error</strong></a> **0:02:52**</span>
- <span id="8960">**\[ \]** <a href="https://www.youtube.com/watch?v=XNgt7F6FqDU" class="markup--anchor markup--li-anchor"><strong>StatQuest: The standard error</strong></a> **0:11:43**</span>
- <span id="65c3">**\[ \]** <a href="https://www.youtube.com/watch?v=Exk0OoRG0PQ" class="markup--anchor markup--li-anchor"><strong>StatQuest: Technical and Biological Replicates</strong></a> **0:05:27**</span>
- <span id="f37b">**\[ \]** <a href="https://www.youtube.com/watch?v=67zCIqdeXpo" class="markup--anchor markup--li-anchor"><strong>StatQuest — Sample Size and Effective Sample Size, Clearly Explained</strong></a> **0:06:32**</span>
- <span id="9eb5">**\[ \]** <a href="https://www.youtube.com/watch?v=RiEZ_hEf96A" class="markup--anchor markup--li-anchor"><strong>Bar Charts Are Better than Pie Charts</strong></a> **0:01:45**</span>
- <span id="801a">**\[ \]** <a href="https://www.youtube.com/watch?v=fHLhBnmwUM0" class="markup--anchor markup--li-anchor"><strong>StatQuest: Boxplots, Clearly Explained</strong></a> **0:02:33**</span>
- <span id="b099">**\[ \]** <a href="https://www.youtube.com/watch?v=VSi0Z04fWj0" class="markup--anchor markup--li-anchor"><strong>StatQuest: Logs (logarithms), clearly explained</strong></a> **0:15:37**</span>
- <span id="02f5">**\[ \]** <a href="https://www.youtube.com/watch?v=TqOeMYtOc1w" class="markup--anchor markup--li-anchor"><strong>StatQuest: Confidence Intervals</strong></a> **0:06:41**</span>
- <span id="4c84">**\[ \]** <a href="https://www.youtube.com/watch?v=KEofcJ1tfkI" class="markup--anchor markup--li-anchor"><strong>StatQuickie: Thresholds for Significance</strong></a> **0:06:40**</span>
- <span id="d716">**\[ \]** <a href="https://www.youtube.com/watch?v=nnBJeb_I-q8" class="markup--anchor markup--li-anchor"><strong>StatQuickie: Which t test to use</strong></a> **0:05:10**</span>
- <span id="3578">**\[ \]** <a href="https://www.youtube.com/watch?v=bsZGt-caXO4" class="markup--anchor markup--li-anchor"><strong>StatQuest: One or Two Tailed P-Values</strong></a> **0:07:05**</span>
- <span id="cf15">**\[ \]** <a href="https://www.youtube.com/watch?v=J8jNoF-K8E8" class="markup--anchor markup--li-anchor"><strong>The Binomial Distribution and Test, Clearly Explained!!!</strong></a> **0:15:46**</span>
- <span id="2bfe">**\[ \]** <a href="https://www.youtube.com/watch?v=IFKQLDmRK0Y" class="markup--anchor markup--li-anchor"><strong>StatQuest: Quantiles and Percentiles, Clearly Explained!!!</strong></a> **0:06:30**</span>
- <span id="833b">**\[ \]** <a href="https://www.youtube.com/watch?v=okjYjClSjOg" class="markup--anchor markup--li-anchor"><strong>StatQuest: Quantile-Quantile Plots (QQ plots), Clearly Explained</strong></a> **0:06:55**</span>
- <span id="c53b">**\[ \]** <a href="https://www.youtube.com/watch?v=ecjN6Xpv6SE" class="markup--anchor markup--li-anchor"><strong>StatQuest: Quantile Normalization</strong></a> **0:04:51**</span>
- <span id="fbdb">**\[ \]** <a href="https://www.youtube.com/watch?v=pYxNSUDSFH4" class="markup--anchor markup--li-anchor"><strong>StatQuest: Probability vs Likelihood</strong></a> **0:05:01**</span>
- <span id="4247">**\[ \]** <a href="https://www.youtube.com/watch?v=XepXtl9YKwc" class="markup--anchor markup--li-anchor"><strong>StatQuest: Maximum Likelihood, clearly explained!!!</strong></a> **0:06:12**</span>
- <span id="03e9">**\[ \]** <a href="https://www.youtube.com/watch?v=p3T-_LMrvBc" class="markup--anchor markup--li-anchor"><strong>Maximum Likelihood for the Exponential Distribution, Clearly Explained! V2.0</strong></a> **0:09:39**</span>
- <span id="47a1">**\[ \]** <a href="https://www.youtube.com/watch?v=sHRBg6BhKjI" class="markup--anchor markup--li-anchor"><strong>Why Dividing By N Underestimates the Variance</strong></a> **0:17:14**</span>
- <span id="70b6">**\[ \]** <a href="https://www.youtube.com/watch?v=4KKV9yZCoM4" class="markup--anchor markup--li-anchor"><strong>Maximum Likelihood for the Binomial Distribution, Clearly Explained!!!</strong></a> **0:11:24**</span>
- <span id="9f32">**\[ \]** <a href="https://www.youtube.com/watch?v=Dn6b9fCIUpM" class="markup--anchor markup--li-anchor"><strong>Maximum Likelihood For the Normal Distribution, step-by-step!</strong></a> **0:19:50**</span>
- <span id="4a41">**\[ \]** <a href="https://www.youtube.com/watch?v=ARfXDSkQf1Y" class="markup--anchor markup--li-anchor"><strong>StatQuest: Odds and Log(Odds), Clearly Explained!!!</strong></a> **0:11:30**</span>
- <span id="6e00">**\[ \]** <a href="https://www.youtube.com/watch?v=8nm0G-1uJzA" class="markup--anchor markup--li-anchor"><strong>StatQuest: Odds Ratios and Log(Odds Ratios), Clearly Explained!!!</strong></a> **0:16:20**</span>
- <span id="769e">**\[ \]** <a href="https://www.youtube.com/watch?v=fU2PuYKsr6M" class="markup--anchor markup--li-anchor"><strong>Live 2020–04–20!!! Expected Values</strong></a> **0:33:00**</span>
- <span id="9c83">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/eigenvectors-and-eigenvalues--ud104" class="markup--anchor markup--li-anchor"><strong>Eigenvectors and Eigenvalues</strong></a></span>
- <span id="48e8">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/linear-algebra-refresher-course--ud953" class="markup--anchor markup--li-anchor"><strong>Linear Algebra Refresher</strong></a></span>
- <span id="df59">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/statistics--st095" class="markup--anchor markup--li-anchor"><strong>Statistics</strong></a></span>
- <span id="a70c">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/intro-to-descriptive-statistics--ud827" class="markup--anchor markup--li-anchor"><strong>Intro to Descriptive Statistics</strong></a></span>
- <span id="92f3">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/intro-to-inferential-statistics--ud201" class="markup--anchor markup--li-anchor"><strong>Intro to Inferential Statistics</strong></a></span>

### Be able to setup project structure

- <span id="d5e3">**\[📰\]** <a href="https://towardsdatascience.com/pydantic-688e897cfd3a" class="markup--anchor markup--li-anchor"><strong>pydantic</strong></a></span>
- <span id="0691">**\[📰\]** <a href="https://www.jeremyjordan.me/ml-projects-guide/" class="markup--anchor markup--li-anchor"><strong>Organizing machine learning projects: project management guidelines</strong></a></span>
- <span id="d424">**\[📰\]** <a href="https://theaisummer.com/logging-debugging/" class="markup--anchor markup--li-anchor"><strong>Logging and Debugging in Machine Learning — How to use Python debugger and the logging module to find errors in your AI application</strong></a></span>
- <span id="b737">**\[📰\]** <a href="https://theaisummer.com/best-practices-deep-learning-code/" class="markup--anchor markup--li-anchor"><strong>Best practices to write Deep Learning code: Project structure, OOP, Type checking and documentation</strong></a></span>
- <span id="d99f">**\[📰\]** <a href="https://medium.com/@robertbracco1/configuring-google-colab-like-a-pro-d61c253f7573" class="markup--anchor markup--li-anchor"><strong>Configuring Google Colab Like A Pro</strong></a></span>
- <span id="1e63">**\[📰\]** <a href="https://handyman.dulare.com/stop-using-print-start-using-loguru-in-python/" class="markup--anchor markup--li-anchor"><strong>Stop using print, start using loguru in Python</strong></a></span>
- <span id="bc57">**\[📰\]** <a href="https://cjolowicz.github.io/posts/hypermodern-python-01-setup/" class="markup--anchor markup--li-anchor"><strong>Hypermodern Python</strong></a></span>
- <span id="4268">**\[📰\]** <a href="https://cjolowicz.github.io/posts/hypermodern-python-02-testing/" class="markup--anchor markup--li-anchor"><strong>Hypermodern Python Chapter 2: Testing</strong></a></span>
- <span id="0cb6">**\[📰\]** <a href="https://cjolowicz.github.io/posts/hypermodern-python-03-linting/" class="markup--anchor markup--li-anchor"><strong>Hypermodern Python Chapter 3: Linting</strong></a></span>
- <span id="7e5b">**\[📰\]** <a href="https://cjolowicz.github.io/posts/hypermodern-python-04-typing/" class="markup--anchor markup--li-anchor"><strong>Hypermodern Python Chapter 4: Typing</strong></a></span>
- <span id="851a">**\[📰\]** <a href="https://cjolowicz.github.io/posts/hypermodern-python-05-documentation/" class="markup--anchor markup--li-anchor"><strong>Hypermodern Python Chapter 5: Documentation</strong></a></span>
- <span id="f80f">**\[📰\]** <a href="https://cjolowicz.github.io/posts/hypermodern-python-06-ci-cd/" class="markup--anchor markup--li-anchor"><strong>Hypermodern Python Chapter 6: CI/CD</strong></a></span>
- <span id="37c2">**\[📰\]** <a href="https://pythonspeed.com/articles/when-update-dependencies/" class="markup--anchor markup--li-anchor"><strong>Push and pull: when and why to update your dependencies</strong></a></span>
- <span id="6255">**\[📰\]** <a href="https://pythonspeed.com/articles/conda-dependency-management/" class="markup--anchor markup--li-anchor"><strong>Reproducible and upgradable Conda environments: dependency management with conda-lock</strong></a></span>
- <span id="7656">**\[📰\]** <a href="https://pythonspeed.com/articles/distributing-software/" class="markup--anchor markup--li-anchor"><strong>Options for packaging your Python code: Wheels, Conda, Docker, and more</strong></a></span>
- <span id="6b71">**\[📰\]** <a href="https://spell.ml/blog/spot-interruptions-XzQ5jRIAACIAK3h2" class="markup--anchor markup--li-anchor"><strong>Making model training scripts robust to spot interruptions</strong></a></span>
- <span id="7a23">**\[ \]** <a href="https://calmcode.io/logging/introduction.html" class="markup--anchor markup--li-anchor"><strong>Calmcode: logging</strong></a></span>
- <span id="7351">**\[ \]** <a href="https://calmcode.io/tqdm/making-a-progress-bar.html" class="markup--anchor markup--li-anchor"><strong>Calmcode: tqdm</strong></a></span>
- <span id="fc33">**\[ \]** <a href="https://calmcode.io/virtualenv/intro.html" class="markup--anchor markup--li-anchor"><strong>Calmcode: virtualenv</strong></a></span>
- <span id="c42d">**\[ \]** <a href="https://www.coursera.org/learn/machine-learning-projects?specialization=deep-learning" class="markup--anchor markup--li-anchor"><strong>Coursera: Structuring Machine Learning Projects</strong></a></span>
- <span id="2e19">**\[ \]** <a href="https://sp-fm.github.io/python-lifecycle-training/index.html" class="markup--anchor markup--li-anchor"><strong>Doc: Python Lifecycle Training</strong></a></span>
- <span id="86ed">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-data-engineering" class="markup--anchor markup--li-anchor"><strong>Introduction to Data Engineering</strong></a></span>
- <span id="1404">**\[💻\]** <a href="https://www.datacamp.com/courses/conda-essentials" class="markup--anchor markup--li-anchor"><strong>Conda Essentials</strong></a></span>
- <span id="61d8">**\[💻\]** <a href="https://www.datacamp.com/courses/conda-for-building-distributing-packages" class="markup--anchor markup--li-anchor"><strong>Conda for Building &amp; Distributing Packages</strong></a></span>
- <span id="6b5b">**\[💻\]** <a href="https://www.datacamp.com/courses/software-engineering-for-data-scientists-in-python" class="markup--anchor markup--li-anchor"><strong>Software Engineering for Data Scientists in Python</strong></a></span>
- <span id="f76b">**\[💻\]** <a href="https://www.datacamp.com/courses/designing-machine-learning-workflows-in-python" class="markup--anchor markup--li-anchor"><strong>Designing Machine Learning Workflows in Python</strong></a></span>
- <span id="e0c8">**\[💻\]** <a href="https://www.datacamp.com/courses/object-oriented-programming-in-python" class="markup--anchor markup--li-anchor"><strong>Object-Oriented Programming in Python</strong></a></span>
- <span id="d0c7">**\[💻\]** <a href="https://www.datacamp.com/courses/command-line-automation-in-python" class="markup--anchor markup--li-anchor"><strong>Command Line Automation in Python</strong></a></span>
- <span id="7ffa">**\[💻\]** <a href="https://www.datacamp.com/courses/creating-robust-python-workflows" class="markup--anchor markup--li-anchor"><strong>Creating Robust Python Workflows</strong></a></span>
- <span id="dc39">**\[ \]** <a href="https://www.datacamp.com/courses/developing-python-packages" class="markup--anchor markup--li-anchor"><strong>Developing Python Packages</strong></a></span>
- <span id="7973">**\[ \]** <a href="https://teamtreehouse.com/library/objectoriented-python-2" class="markup--anchor markup--li-anchor"><strong>Treehouse: Object Oriented Python</strong></a></span>
- <span id="0dd8">**\[ \]** <a href="https://teamtreehouse.com/library/setting-utorialtorialp-a-local-python-environment-windows" class="markup--anchor markup--li-anchor"><strong>Treehouse: Setup Local Python Environment</strong></a></span>
- <span id="d82a">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/writing-readmes--ud777" class="markup--anchor markup--li-anchor"><strong>Writing READMEs</strong></a></span>
- <span id="49c1">**\[📺 \]** <a href="https://youtu.be/5AjG5OPQuBM" class="markup--anchor markup--li-anchor"><strong>Lecture 1: Introduction to Deep Learning</strong></a></span>
- <span id="12f0">**\[📺 \]** <a href="https://youtu.be/tBUK1_cHu-8" class="markup--anchor markup--li-anchor"><strong>Lecture 2: Setting Up Machine Learning Projects</strong></a></span>
- <span id="5f63">**\[📺 \]** <a href="https://youtu.be/mmlvGLSXKLc" class="markup--anchor markup--li-anchor"><strong>Lecture 3: Introduction to the Text Recognizer Project</strong></a></span>
- <span id="7505">**\[📺 \]** <a href="https://youtu.be/f6jAz1zyrDI" class="markup--anchor markup--li-anchor"><strong>Lecture 4: Infrastructure and Tooling</strong></a></span>
- <span id="faaa">**\[📺 \]** <a href="https://uniroma1.zoom.us/rec/share/bTYldvVYRcN2UaBn8UTf3uuFQMkx8yy4UG4bRw8ikE1tT8Ll74Nl3WZoUXnJRCKE.HEhRruThY3al1jew?startTime=1620378786000" class="markup--anchor markup--li-anchor"><strong>Hydra configuration</strong></a></span>
- <span id="c134">**\[📺 \]** <a href="https://uniroma1.zoom.us/rec/share/W6zWeel0z0w561Rza8iaoP39daROQ7MN144R2VYSksMhSBrh6l1MPrd_jIUFiy4s.fpA9W3TdJdXg_2Hx?startTime=1620983293000" class="markup--anchor markup--li-anchor"><strong>Continuous integration</strong></a></span>
- <span id="14eb">**\[📺 \]** <a href="https://www.youtube.com/watch?v=IUhvO8QjWd8&amp;list=LL&amp;index=2" class="markup--anchor markup--li-anchor"><strong>Data Engineering +Machine Learning + Software Engineering // Satish Chandra Gupta // MLOps Coffee Sessions #16</strong></a></span>
- <span id="652a">**\[📺 \]** <a href="https://www.youtube.com/watch?v=VuQaS0FFUFY" class="markup--anchor markup--li-anchor"><strong>OO Design and Testing Patterns for Machine Learning with Chris Gerpheide</strong></a></span>
- <span id="9478">**\[📺 \]** <a href="https://www.youtube.com/watch?v=WkUBx3g2QfQ&amp;feature=youtu.be" class="markup--anchor markup--li-anchor"><strong>Tutorial: Sebastian Witowski — Modern Python Developer’s Toolkit</strong></a></span>
- <span id="ab2c">**\[📺 \]** <a href="https://www.youtube.com/watch?v=8daKeuaWgjk" class="markup--anchor markup--li-anchor"><strong>Lecture 13:Machine Learning Teams (Full Stack Deep Learning — Spring 2021)</strong></a> **0:58:13**</span>
- <span id="2977">**\[📺 \]** <a href="https://www.youtube.com/watch?v=pxisK6RMn1s" class="markup--anchor markup--li-anchor"><strong>Lecture 5:Machine Learning Projects (Full Stack Deep Learning — Spring 2021)</strong></a> **1:13:14**</span>
- <span id="a48d">**\[📺 \]** <a href="https://www.youtube.com/watch?v=760Mc_b3_N0" class="markup--anchor markup--li-anchor"><strong>Lecture 6: Infrastructure &amp; Tooling (Full Stack Deep Learning — Spring 2021)</strong></a> **1:07:21**</span>

### Be able to version control code

- <span id="3c88">**\[📰\]** <a href="https://dev.to/yankee/mastering-git-stash-workflow-223" class="markup--anchor markup--li-anchor"><strong>Mastering Git Stash Workflow</strong></a></span>
- <span id="26b2">**\[📰\]** <a href="https://blog.daftcode.pl/how-to-become-a-master-of-git-tags-b70fbd9609d9" class="markup--anchor markup--li-anchor"><strong>How to Become a Master of Git Tags</strong></a></span>
- <span id="181e">**\[📰\]** <a href="https://pgaijin66.medium.com/how-to-track-large-files-in-github-bitbucket-git-lfs-to-the-rescue-2f298e07b3d2" class="markup--anchor markup--li-anchor"><strong>How to track large files in Github / Bitbucket? Git LFS to the rescue</strong></a></span>
- <span id="7e66">**\[📰\]** <a href="https://coderwall.com/p/g16jpq/keep-your-git-directory-clean-with-git-clean-and-git-trash" class="markup--anchor markup--li-anchor"><strong>Keep your git directory clean with git clean and git trash</strong></a></span>
- <span id="7e14">**\[ \]** <a href="https://www.codecademy.com/learn/learn-git" class="markup--anchor markup--li-anchor"><strong>Codecademy: Learn Git</strong></a></span>
- <span id="d4f4">**\[ \]** <a href="https://www.pluralsight.com/courses/code-school-git-real" class="markup--anchor markup--li-anchor"><strong>Code School: Git Real</strong></a></span>
- <span id="8dff">**\[💻\]** <a href="https://www.datacamp.com/courses/introduction-to-git-for-data-science" class="markup--anchor markup--li-anchor"><strong>Introduction to Git for Data Science</strong></a></span>
- <span id="c4e1">**\[ \]** <a href="https://thoughtbot.com/upcase/mastering-git" class="markup--anchor markup--li-anchor"><strong>Thoughtbot: Mastering Git</strong></a></span>
- <span id="d293">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/github-collaboration--ud456" class="markup--anchor markup--li-anchor"><strong>GitHub &amp; Collaboration</strong></a></span>
- <span id="8630">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/how-to-use-git-and-github--ud775" class="markup--anchor markup--li-anchor"><strong>How to Use Git and GitHub</strong></a></span>
- <span id="e17c">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/version-control-with-git--ud123" class="markup--anchor markup--li-anchor"><strong>Version Control with Git</strong></a></span>
- <span id="911d">**\[📺 \]** <a href="https://youtu.be/xPFLAAhuGy0" class="markup--anchor markup--li-anchor"><strong>045 Introduction to Git LFS</strong></a></span>
- <span id="fb5a">**\[📺 \]** <a href="https://uniroma1.zoom.us/rec/share/bTYldvVYRcN2UaBn8UTf3uuFQMkx8yy4UG4bRw8ikE1tT8Ll74Nl3WZoUXnJRCKE.HEhRruThY3al1jew?startTime=1620371740000" class="markup--anchor markup--li-anchor"><strong>Git &amp; Scripting</strong></a></span>

### Be able to setup model validation

- <span id="528a">**\[📰\]** <a href="https://www.jeremyjordan.me/evaluating-a-machine-learning-model/" class="markup--anchor markup--li-anchor"><strong>Evaluating a machine learning model</strong></a></span>
- <span id="dbb1">**\[📰\]** <a href="https://www.maartengrootendorst.com/blog/validate/" class="markup--anchor markup--li-anchor"><strong>Validating your Machine Learning Model</strong></a></span>
- <span id="9967">**\[📰\]** <a href="https://glassboxmedicine.com/2019/03/02/measuring-performance-auprc/" class="markup--anchor markup--li-anchor"><strong>Measuring Performance: AUPRC and Average Precision</strong></a></span>
- <span id="279f">**\[📰\]** <a href="https://glassboxmedicine.com/2019/02/23/measuring-performance-auc-auroc/" class="markup--anchor markup--li-anchor"><strong>Measuring Performance: AUC (AUROC)</strong></a></span>
- <span id="3ee8">**\[📰\]** <a href="https://glassboxmedicine.com/2019/02/17/measuring-performance-the-confusion-matrix/" class="markup--anchor markup--li-anchor"><strong>Measuring Performance: The Confusion Matrix</strong></a></span>
- <span id="e81e">**\[📰\]** <a href="https://glassboxmedicine.com/2019/02/16/measuring-performance-accuracy/" class="markup--anchor markup--li-anchor"><strong>Measuring Performance: Accuracy</strong></a></span>
- <span id="21a8">**\[📰\]** <a href="https://www.pragmatic.ml/intuition-through-visualization-roc-auc/" class="markup--anchor markup--li-anchor"><strong>ROC Curves: Intuition Through Visualization</strong></a></span>
- <span id="4785">**\[📰\]** <a href="https://medium.com/synthesio-engineering/precision-accuracy-and-f1-score-for-multi-label-classification-34ac6bdfb404" class="markup--anchor markup--li-anchor"><strong>Precision, Recall, Accuracy, and F1 Score for Multi-Label Classification</strong></a></span>
- <span id="0415">**\[📰\]** <a href="https://glassboxmedicine.com/2020/07/14/the-complete-guide-to-auc-and-average-precision-simulations-and-visualizations/" class="markup--anchor markup--li-anchor"><strong>The Complete Guide to AUC and Average Precision: Simulations and Visualizations</strong></a></span>
- <span id="7f06">**\[📰\]** <a href="https://glassboxmedicine.com/2019/09/15/best-use-of-train-val-test-splits-with-tips-for-medical-data/" class="markup--anchor markup--li-anchor"><strong>Best Use of Train/Val/Test Splits, with Tips for Medical Data</strong></a></span>
- <span id="0402">**\[📰\]** <a href="https://maxhalford.github.io/blog/online-learning-evaluation/" class="markup--anchor markup--li-anchor"><strong>The correct way to evaluate online machine learning models</strong></a></span>
- <span id="7df3">**\[📰\]** <a href="https://gibsonbiddle.medium.com/4-proxy-metrics-a82dd30ca810" class="markup--anchor markup--li-anchor"><strong>Proxy Metrics</strong></a></span>
- <span id="854e">**\[📺 \]** <a href="https://youtu.be/YGuVuZpTop0" class="markup--anchor markup--li-anchor"><strong>Accuracy as a Failure</strong></a></span>
- <span id="1b6b">**\[📺 \]** <a href="https://www.youtube.com/watch?v=trg3YkCsjqE" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–09 — Model Evaluation and Metrics</strong></a> **1:18:23**</span>
- <span id="881c">**\[📺 \]** <a href="https://www.youtube.com/watch?v=fSytzGwwBVw" class="markup--anchor markup--li-anchor"><strong>Machine Learning Fundamentals: Cross Validation</strong></a> **0:06:04**</span>
- <span id="3545">**\[📺 \]** <a href="https://www.youtube.com/watch?v=Kdsp6soqA7o" class="markup--anchor markup--li-anchor"><strong>Machine Learning Fundamentals: The Confusion Matrix</strong></a> **0:07:12**</span>
- <span id="3d32">**\[📺 \]** <a href="https://www.youtube.com/watch?v=vP06aMoz4v8" class="markup--anchor markup--li-anchor"><strong>Machine Learning Fundamentals: Sensitivity and Specificity</strong></a> **0:11:46**</span>
- <span id="9779">**\[📺 \]** <a href="https://www.youtube.com/watch?v=EuBBz3bI-aA" class="markup--anchor markup--li-anchor"><strong>Machine Learning Fundamentals: Bias and Variance</strong></a> **0:06:36**</span>
- <span id="45b3">**\[📺 \]** <a href="https://www.youtube.com/watch?v=4jRBRDbJemM" class="markup--anchor markup--li-anchor"><strong>ROC and AUC, Clearly Explained!</strong></a> **0:16:26**</span>

---

### Be familiar with inner working of models

<figure><img src="https://cdn-images-1.medium.com/max/800/0*51fcXFljuwzW1aGE.png" class="graf-image" /></figure>**Bays theorem is super interesting and applicable ==&gt; — \[📰\]** <a href="https://www.jeremyjordan.me/naive-bayes-classification/" class="markup--anchor markup--blockquote-anchor"><strong>Naive Bayes classification</strong></a>

- <span id="9b44">**\[📰\]** <a href="https://www.jeremyjordan.me/linear-regression/" class="markup--anchor markup--li-anchor"><strong>Linear regression</strong></a></span>
- <span id="f982">**\[📰\]** <a href="https://www.jeremyjordan.me/polynomial-regression/" class="markup--anchor markup--li-anchor"><strong>Polynomial regression</strong></a></span>
- <span id="6d7e">**\[📰\]** <a href="https://www.jeremyjordan.me/logistic-regression/" class="markup--anchor markup--li-anchor"><strong>Logistic regression</strong></a></span>
- <span id="97dc">**\[📰\]** <a href="https://www.jeremyjordan.me/decision-trees/" class="markup--anchor markup--li-anchor"><strong>Decision trees</strong></a></span>
- <span id="7ded">**\[📰\]** <a href="https://www.jeremyjordan.me/k-nearest-neighbors/" class="markup--anchor markup--li-anchor"><strong>K-nearest neighbors</strong></a></span>
- <span id="c9ad">**\[📰\]** <a href="https://www.jeremyjordan.me/support-vector-machines/" class="markup--anchor markup--li-anchor"><strong>Support Vector Machines</strong></a></span>
- <span id="98b9">**\[📰\]** <a href="https://www.jeremyjordan.me/random-forests/" class="markup--anchor markup--li-anchor"><strong>Random forests</strong></a></span>
- <span id="cb1a">**\[📰\]** <a href="https://www.jeremyjordan.me/boosted-trees/" class="markup--anchor markup--li-anchor"><strong>Boosted trees</strong></a></span>
- <span id="4ba3">**\[📰\]** <a href="https://www.curiousily.com/posts/hackers-guide-to-fundamental-machine-learning-algorithms/" class="markup--anchor markup--li-anchor"><strong>Hacker’s Guide to Fundamental Machine Learning Algorithms with Python</strong></a></span>
- <span id="5b75">**\[📰\]** <a href="https://www.jeremyjordan.me/neural-networks-activation-functions/" class="markup--anchor markup--li-anchor"><strong>Neural networks: activation functions</strong></a></span>
- <span id="dbf8">**\[📰\]** <a href="https://www.jeremyjordan.me/neural-networks-training/" class="markup--anchor markup--li-anchor"><strong>Neural networks: training with backpropagation</strong></a></span>
- <span id="7872">**\[📰\]** <a href="https://theaisummer.com/Neural_Network_from_scratch/" class="markup--anchor markup--li-anchor"><strong>Neural Network from scratch-part 1</strong></a></span>
- <span id="c759">**\[📰\]** <a href="https://theaisummer.com/Neural_Network_from_scratch_part2/" class="markup--anchor markup--li-anchor"><strong>Neural Network from scratch-part 2</strong></a></span>
- <span id="c614">**\[📰\]** <a href="https://tsumansapkota.github.io/algorithm/2020/06/06/Perceptron-to-DeepNeuralNets/" class="markup--anchor markup--li-anchor"><strong>Perceptron to Deep-Neural-Network</strong></a></span>
- <span id="5ad8">**\[📰\]** <a href="https://www.geeksforgeeks.org/one-vs-rest-strategy-for-multi-class-classification/" class="markup--anchor markup--li-anchor"><strong>One-vs-Rest strategy for Multi-Class Classification</strong></a></span>
- <span id="acbd">**\[📰\]** <a href="https://radiant-brushlands-42789.herokuapp.com/towardsdatascience.com/multi-class-classification-one-vs-all-one-vs-one-94daed32a87b" class="markup--anchor markup--li-anchor"><strong>Multi-class Classification — One-vs-All &amp; One-vs-One</strong></a></span>
- <span id="152c">**\[📰\]** <a href="https://machinelearningmastery.com/one-vs-rest-and-one-vs-one-for-multi-class-classification/" class="markup--anchor markup--li-anchor"><strong>One-vs-Rest and One-vs-One for Multi-Class Classification</strong></a></span>
- <span id="6cb9">**\[📰\]** <a href="https://theaisummer.com/Deep-Learning-Algorithms/" class="markup--anchor markup--li-anchor"><strong>Deep Learning Algorithms — The Complete Guide</strong></a></span>
- <span id="1886">**\[📰\]** <a href="https://medium.com/acing-ai/machine-learning-techniques-primer-60edd9d14863" class="markup--anchor markup--li-anchor"><strong>Machine Learning Techniques Primer</strong></a></span>
- <span id="be33">**\[ \]** <a href="https://www.aws.training/learningobject/video?id=27233" class="markup--anchor markup--li-anchor"><strong>AWS: Understanding Neural Networks</strong></a></span>
- <span id="3be3">**\[📖\]** <a href="https://www.manning.com/books/grokking-deep-learning" class="markup--anchor markup--li-anchor"><strong>Grokking Deep Learning</strong></a></span>
- <span id="011a">**\[📖\]** <a href="https://www.amazon.com/Make-Your-Own-Neural-Network-ebook/dp/B01EER4Z4G" class="markup--anchor markup--li-anchor"><strong>Make Your Own Neural Network</strong></a></span>
- <span id="0182">**\[ \]** <a href="https://www.coursera.org/learn/neural-networks-deep-learning" class="markup--anchor markup--li-anchor"><strong>Coursera: Neural Networks and Deep Learning</strong></a></span>
- <span id="05e4">**\[💻\]** <a href="https://www.datacamp.com/courses/extreme-gradient-boosting-with-xgboost" class="markup--anchor markup--li-anchor"><strong>Extreme Gradient Boosting with XGBoost</strong></a></span>
- <span id="c8d4">**\[💻\]** <a href="https://www.datacamp.com/courses/ensemble-methods-in-python" class="markup--anchor markup--li-anchor"><strong>Ensemble Methods in Python</strong></a></span>
- <span id="3e6a">**\[ \]** <a href="https://www.youtube.com/playlist?list=PLblh5JKOoLUICTaGLRoHQDuF_7q2GfuJF" class="markup--anchor markup--li-anchor"><strong>StatQuest: Machine Learning</strong></a></span>
- <span id="fa2d">**\[ \]** <a href="https://www.youtube.com/watch?v=PaFPbb66DxQ" class="markup--anchor markup--li-anchor"><strong>StatQuest: Fitting a line to data, aka least squares, aka linear regression.</strong></a> **0:09:21**</span>
- <span id="e006">**\[ \]** <a href="https://www.youtube.com/watch?v=nk2CQITm_eo" class="markup--anchor markup--li-anchor"><strong>StatQuest: Linear Models Pt.1 — Linear Regression</strong></a> **0:27:26**</span>
- <span id="c2e7">**\[ \]** <a href="https://www.youtube.com/watch?v=NF5_btOaCig" class="markup--anchor markup--li-anchor"><strong>StatQuest: StatQuest: Linear Models Pt.2 — t-tests and ANOVA</strong></a> **0:11:37**</span>
- <span id="c9ec">**\[ \]** <a href="https://www.youtube.com/watch?v=ARfXDSkQf1Y" class="markup--anchor markup--li-anchor"><strong>StatQuest: Odds and Log(Odds), Clearly Explained!!!</strong></a> **0:11:30**</span>
- <span id="3472">**\[ \]** <a href="https://www.youtube.com/watch?v=8nm0G-1uJzA" class="markup--anchor markup--li-anchor"><strong>StatQuest: Odds Ratios and Log(Odds Ratios), Clearly Explained!!!</strong></a> **0:16:20**</span>
- <span id="acda">**\[ \]** <a href="https://www.youtube.com/watch?v=yIYKR4sgzI8" class="markup--anchor markup--li-anchor"><strong>StatQuest: Logistic Regression</strong></a> **0:08:47**</span>
- <span id="88bd">**\[ \]** <a href="https://www.youtube.com/watch?v=vN5cNN2-HWE" class="markup--anchor markup--li-anchor"><strong>Logistic Regression Details Pt1: Coefficients</strong></a> **0:19:02**</span>
- <span id="f2e1">**\[ \]** <a href="https://www.youtube.com/watch?v=BfKanl1aSG0" class="markup--anchor markup--li-anchor"><strong>Logistic Regression Details Pt 2: Maximum Likelihood</strong></a> **0:10:23**</span>
- <span id="2094">**\[ \]** <a href="https://www.youtube.com/watch?v=xxFYro8QuXA" class="markup--anchor markup--li-anchor"><strong>Logistic Regression Details Pt 3: R-squared and p-value</strong></a> **0:15:25**</span>
- <span id="8b2d">**\[ \]** <a href="https://www.youtube.com/watch?v=9T0wlKdew6I" class="markup--anchor markup--li-anchor"><strong>Saturated Models and Deviance</strong></a> **0:18:39**</span>
- <span id="25c1">**\[ \]** <a href="https://www.youtube.com/watch?v=JC56jS2gVUE" class="markup--anchor markup--li-anchor"><strong>Deviance Residuals</strong></a> **0:06:18**</span>
- <span id="4ec7">**\[ \]** <a href="https://www.youtube.com/watch?v=Q81RR3yKn30" class="markup--anchor markup--li-anchor"><strong>Regularization Part 1: Ridge (L2) Regression</strong></a> **0:20:26**</span>
- <span id="45b4">**\[ \]** <a href="https://www.youtube.com/watch?v=NGf0voTMlcs" class="markup--anchor markup--li-anchor"><strong>Regularization Part 2: Lasso (L1) Regression</strong></a> **0:08:19**</span>
- <span id="2982">**\[ \]** <a href="https://www.youtube.com/watch?v=Xm2C_gTAl8c" class="markup--anchor markup--li-anchor"><strong>Ridge vs Lasso Regression, Visualized!!!</strong></a> **0:09:05**</span>
- <span id="a240">**\[ \]** <a href="https://www.youtube.com/watch?v=1dKRdX9bfIo" class="markup--anchor markup--li-anchor"><strong>Regularization Part 3: Elastic Net Regression</strong></a> **0:05:19**</span>
- <span id="0f62">**\[ \]** <a href="https://www.youtube.com/watch?v=FgakZw6K1QQ" class="markup--anchor markup--li-anchor"><strong>StatQuest: Principal Component Analysis (PCA), Step-by-Step</strong></a> **0:21:57**</span>
- <span id="985d">**\[ \]** <a href="https://www.youtube.com/watch?v=HMOI_lkzW08" class="markup--anchor markup--li-anchor"><strong>StatQuest: PCA main ideas in only 5 minutes!!!</strong></a> **0:06:04**</span>
- <span id="d57c">**\[ \]** <a href="https://www.youtube.com/watch?v=oRvgq966yZg" class="markup--anchor markup--li-anchor"><strong>StatQuest: PCA — Practical Tips</strong></a> **0:08:19**</span>
- <span id="0941">**\[ \]** <a href="https://www.youtube.com/watch?v=Lsue2gEM9D0" class="markup--anchor markup--li-anchor"><strong>StatQuest: PCA in Python</strong></a> **0:11:37**</span>
- <span id="4aec">**\[ \]** <a href="https://www.youtube.com/watch?v=azXCzI57Yfc" class="markup--anchor markup--li-anchor"><strong>StatQuest: Linear Discriminant Analysis (LDA) clearly explained.</strong></a> **0:15:12**</span>
- <span id="379f">**\[ \]** <a href="https://www.youtube.com/watch?v=GEn-_dAyYME" class="markup--anchor markup--li-anchor"><strong>StatQuest: MDS and PCoA</strong></a> **0:08:18**</span>
- <span id="4502">**\[ \]** <a href="https://www.youtube.com/watch?v=NEaUSP4YerM" class="markup--anchor markup--li-anchor"><strong>StatQuest: t-SNE, Clearly Explained</strong></a> **0:11:47**</span>
- <span id="d84d">**\[ \]** <a href="https://www.youtube.com/watch?v=7xHsRkOdVwo" class="markup--anchor markup--li-anchor"><strong>StatQuest: Hierarchical Clustering</strong></a> **0:11:19**</span>
- <span id="c3cb">**\[ \]** <a href="https://www.youtube.com/watch?v=4b5d3muPQmA" class="markup--anchor markup--li-anchor"><strong>StatQuest: K-means clustering</strong></a> **0:08:57**</span>
- <span id="af60">**\[ \]** <a href="https://www.youtube.com/watch?v=HVXime0nQeI" class="markup--anchor markup--li-anchor"><strong>StatQuest: K-nearest neighbors, Clearly Explained</strong></a> **0:05:30**</span>
- <span id="9c6f">**\[ \]** <a href="https://www.youtube.com/watch?v=O2L2Uv9pdDA" class="markup--anchor markup--li-anchor"><strong>Naive Bayes, Clearly Explained!!!</strong></a> **0:15:12**</span>
- <span id="5d95">**\[ \]** <a href="https://www.youtube.com/watch?v=H3EjCKtlVog" class="markup--anchor markup--li-anchor"><strong>Gaussian Naive Bayes, Clearly Explained!!!</strong></a> **0:09:41**</span>
- <span id="88d6">**\[ \]** <a href="https://www.youtube.com/watch?v=7VeUPuFGJHk" class="markup--anchor markup--li-anchor"><strong>StatQuest: Decision Trees</strong></a> **0:17:22**</span>
- <span id="bd5e">**\[ \]** <a href="https://www.youtube.com/watch?v=wpNl-JwwplA" class="markup--anchor markup--li-anchor"><strong>StatQuest: Decision Trees, Part 2 — Feature Selection and Missing Data</strong></a> **0:05:16**</span>
- <span id="4359">**\[ \]** <a href="https://www.youtube.com/watch?v=g9c66TUylZ4" class="markup--anchor markup--li-anchor"><strong>Regression Trees, Clearly Explained!!!</strong></a> **0:22:33**</span>
- <span id="30a5">**\[ \]** <a href="https://www.youtube.com/watch?v=D0efHEJsfHo" class="markup--anchor markup--li-anchor"><strong>How to Prune Regression Trees, Clearly Explained!!!</strong></a> **0:16:15**</span>
- <span id="4e4d">**\[ \]** <a href="https://www.youtube.com/watch?v=J4Wdy0Wc_xQ" class="markup--anchor markup--li-anchor"><strong>StatQuest: Random Forests Part 1 — Building, Using and Evaluating</strong></a> **0:09:54**</span>
- <span id="01be">**\[ \]** <a href="https://www.youtube.com/watch?v=sQ870aTKqiM" class="markup--anchor markup--li-anchor"><strong>StatQuest: Random Forests Part 2: Missing data and clustering</strong></a> **0:11:53**</span>
- <span id="d4dc">**\[ \]** <a href="https://www.youtube.com/watch?v=wl1myxrtQHQ" class="markup--anchor markup--li-anchor"><strong>The Chain Rule</strong></a> **0:18:23**</span>
- <span id="e83f">**\[ \]** <a href="https://www.youtube.com/watch?v=sDv4f4s2SB8" class="markup--anchor markup--li-anchor"><strong>Gradient Descent, Step-by-Step</strong></a> **0:23:54**</span>
- <span id="ad35">**\[ \]** <a href="https://www.youtube.com/watch?v=vMh0zPT0tLI" class="markup--anchor markup--li-anchor"><strong>Stochastic Gradient Descent, Clearly Explained!!!</strong></a> **0:10:53**</span>
- <span id="f5c4">**\[ \]** <a href="https://www.youtube.com/watch?v=LsK-xG1cLYA" class="markup--anchor markup--li-anchor"><strong>AdaBoost, Clearly Explained</strong></a> **0:20:54**</span>
- <span id="eac8">**\[⨊ \]** <a href="https://www.youtube.com/watch?v=3CC4N4z3GJc" class="markup--anchor markup--li-anchor"><strong>Part 1: Regression Main Ideas</strong></a> **0:15:52**</span>
- <span id="bca2">**\[⨊ \]** <a href="https://www.youtube.com/watch?v=2xudPOBz-vs" class="markup--anchor markup--li-anchor"><strong>Part 2: Regression Details</strong></a> **0:26:45**</span>
- <span id="11aa">**\[⨊ \]** <a href="https://www.youtube.com/watch?v=jxuNLH5dXCs" class="markup--anchor markup--li-anchor"><strong>Part 3: Classification</strong></a> **0:17:02**</span>
- <span id="b17d">**\[⨊ \]** <a href="https://www.youtube.com/watch?v=StWY5QWMXCw" class="markup--anchor markup--li-anchor"><strong>Part 4: Classification Details</strong></a> **0:36:59**</span>
- <span id="b2e4">**\[⨊ \]** <a href="https://www.youtube.com/watch?v=efR1C6CvhmE" class="markup--anchor markup--li-anchor"><strong>Support Vector Machines, Clearly Explained!!!</strong></a> **0:20:32**</span>
- <span id="26fb">**\[ \]** <a href="https://www.youtube.com/watch?v=Toet3EiSFcM" class="markup--anchor markup--li-anchor"><strong>Support Vector Machines Part 2: The Polynomial Kernel</strong></a> **0:07:15**</span>
- <span id="330d">**\[ \]** <a href="https://www.youtube.com/watch?v=Qc5IyLW_hns" class="markup--anchor markup--li-anchor"><strong>Support Vector Machines Part 3: The Radial (RBF) Kernel</strong></a> **0:15:52**</span>
- <span id="f53a">**\[ \]** <a href="https://www.youtube.com/watch?v=OtD8wVaFm6E" class="markup--anchor markup--li-anchor"><strong>XGBoost Part 1: Regression</strong></a> **0:25:46**</span>
- <span id="c3ae">**\[ \]** <a href="https://www.youtube.com/watch?v=8b1JEDvenQU" class="markup--anchor markup--li-anchor"><strong>XGBoost Part 2: Classification</strong></a> **0:25:17**</span>
- <span id="fbc6">**\[ \]** <a href="https://www.youtube.com/watch?v=ZVFeW798-2I" class="markup--anchor markup--li-anchor"><strong>XGBoost Part 3: Mathematical Details</strong></a> **0:27:24**</span>
- <span id="a828">**\[ \]** <a href="https://www.youtube.com/watch?v=oRrKeUCEbq8" class="markup--anchor markup--li-anchor"><strong>XGBoost Part 4: Crazy Cool Optimizations</strong></a> **0:24:27**</span>
- <span id="fce9">**\[ \]** <a href="https://www.youtube.com/watch?v=Vf7oJ6z2LCc" class="markup--anchor markup--li-anchor"><strong>StatQuest: Fiitting a curve to data, aka lowess, aka loess</strong></a> **0:10:10**</span>
- <span id="1200">**\[ \]** <a href="https://www.youtube.com/watch?v=vikkiwjQqfU" class="markup--anchor markup--li-anchor"><strong>Statistics Fundamentals: Population Parameters</strong></a> **0:14:31**</span>
- <span id="8615">**\[ \]** <a href="https://www.youtube.com/watch?v=_UVHneBUBW0" class="markup--anchor markup--li-anchor"><strong>Principal Component Analysis (PCA) clearly explained (2015)</strong></a> **0:20:16**</span>
- <span id="79d6">**\[ \]** <a href="https://www.youtube.com/watch?v=q90UDEgYqeI" class="markup--anchor markup--li-anchor"><strong>Decision Trees in Python from Start to Finish</strong></a> **1:06:23**</span>
- <span id="6e81">**\[🅤\]ꭏ** <a href="https://www.udacity.com/course/classification-models--ud978" class="markup--anchor markup--li-anchor"><strong>Classification Models</strong></a></span>
- <span id="7189">**\[📺 \]** <a href="https://www.youtube.com/playlist?list=PLQVvvaa0QuDcjD5BAw2DxE6OF2tius3V3" class="markup--anchor markup--li-anchor"><strong>Neural Networks from Scratch in Python</strong></a></span>
- <span id="ee24">**\[ \]** <a href="https://www.youtube.com/watch?v=Wo5dMEP_BbI" class="markup--anchor markup--li-anchor"><strong>Neural Networks from Scratch — P.1 Intro and Neuron Code</strong></a> **0:16:59**</span>
- <span id="dcf5">**\[ \]** <a href="https://www.youtube.com/watch?v=lGLto9Xd7bU" class="markup--anchor markup--li-anchor"><strong>Neural Networks from Scratch — P.2 Coding a Layer</strong></a> **0:15:06**</span>
- <span id="3949">**\[ \]** <a href="https://www.youtube.com/watch?v=tMrbN67U9d4" class="markup--anchor markup--li-anchor"><strong>Neural Networks from Scratch — P.3 The Dot Product</strong></a> **0:25:17**</span>
- <span id="3d2a">**\[ \]** <a href="https://www.youtube.com/watch?v=TEWy9vZcxW4" class="markup--anchor markup--li-anchor"><strong>Neural Networks from Scratch — P.4 Batches, Layers, and Objects</strong></a> **0:33:46**</span>
- <span id="cd98">**\[ \]** <a href="https://www.youtube.com/watch?v=gmjzbpSVY1A" class="markup--anchor markup--li-anchor"><strong>Neural Networks from Scratch — P.5 Hidden Layer Activation Functions</strong></a> **0:40:05**</span>
- <span id="22c3">**\[📺 \]** <a href="https://www.youtube.com/watch?v=7_YzyMYC2zM" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–03 Supervised learning and model validation</strong></a> **1:12:00**</span>
- <span id="7eab">**\[📺 \]** <a href="https://www.youtube.com/watch?v=-OOsfj5Revo" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–05 — Linear Models for Regression</strong></a> **1:06:54**</span>
- <span id="38d4">**\[📺 \]** <a href="https://www.youtube.com/watch?v=_dqBhUrq09U" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–06 — Linear Models for Classification</strong></a> **1:07:50**</span>
- <span id="ef32">**\[📺 \]** <a href="https://www.youtube.com/watch?v=nomd5ylZ2dw" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–07 — Decision Trees and Random Forests</strong></a> **1:07:58**</span>
- <span id="6bcc">**\[📺 \]** <a href="https://www.youtube.com/watch?v=yrTW5YTmFjw" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–08 — Gradient Boosting</strong></a> **1:02:12**</span>
- <span id="7074">**\[📺 \]** <a href="https://www.youtube.com/watch?v=CRRPLlgYWZw" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–18 — Neural Networks</strong></a> **1:19:36**</span>
- <span id="7105">**\[📺 \]** <a href="https://www.youtube.com/watch?v=bmBezdqHTAg" class="markup--anchor markup--li-anchor"><strong>AppliedMachine Learning 2020–12 — AutoML (plus some feature selection)</strong></a> **1:25:38**</span>

---

_Originally published at_ <a href="https://dev.to/bgoonz/everything-you-need-to-become-a-machine-learner-1cjp" class="markup--anchor markup--p-anchor"><em>https://dev.to</em></a> _on November 12, 2020._

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [November 12, 2020](https://medium.com/p/382ee243f23c).

<a href="https://medium.com/@bryanguner/everything-you-need-to-become-a-machine-learner-382ee243f23c" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Everything You Need to Get Started With VSCode + Extensions & Resources

Commands:

---

### Everything You Need to Get Started With VSCode + Extensions & Resources

#### Every extension or tool you could possibly need

<figure><img src="https://cdn-images-1.medium.com/max/1200/1*gcp0kkiWQY6qd1Y4qEcqxw.png" class="graf-image" /></figure>

### Here’s a rudimentary static site I made that goes into more detail on the extensions I use…

<a href="https://5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app/#h18" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app/#h18"><strong>VSCodeExtensions</strong><br />
5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app</a><a href="https://5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app/#h18" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

### Here’s the repo it was deployed from:

<a href="https://github.com/bgoonz/vscode-Extension-readmes" class="markup--anchor markup--p-anchor">https://github.com/bgoonz/vscode-Extension-readmes</a>

---

### Commands:

> Command Palette

> Access all available commands based on your current context.

> Keyboard Shortcut: **Ctrl+Shift+P**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*BByhnDoVQdRPdO4F.gif" class="graf-image" /></figure>### Command palette

`⇧⌘P`Show all commands`⌘P`Show files

### Sidebars

`⌘B`Toggle sidebar`⇧⌘E`Explorer`⇧⌘F`Search`⇧⌘D`Debug`⇧⌘X`Extensions`⇧^G`Git (SCM)

### Search

`⌘F`Find`⌥⌘F`Replace`⇧⌘F`Find in files`⇧⌘H`Replace in files

### Panel

`⌘J`Toggle panel`⇧⌘M`Problems`⇧⌘U`Output`⇧⌘Y`Debug console`` ^` ``Terminal

### View

`⌘k` `z`Zen mode`⌘k` `u`Close unmodified`⌘k` `w`Close all

### Debug

`F5`Start`⇧F5`Stop`⇧⌘F5`Restart`^F5`Start without debugging`F9`Toggle breakpoint`F10`Step over`F11`Step into`⇧F11`Step out`⇧⌘D`Debug sidebar`⇧⌘Y`Debug panel

<figure><img src="https://cdn-images-1.medium.com/max/1200/0*llpkl5jsIMhWMucR.png" class="graf-image" /></figure>

---

### Tips-N-Tricks:

Here is a selection of common features for editing code. If the keyboard shortcuts aren’t comfortable for you, consider installing a <a href="https://marketplace.visualstudio.com/search?target=VSCode&amp;category=Keymaps&amp;sortBy=Downloads" class="markup--anchor markup--p-anchor">keymap extension</a> for your old editor.

Tip: You can see recommended keymap extensions in the Extensions view with Ctrl+K Ctrl+M which filters the search to `@recommended:keymaps`.

### Multi cursor selection

To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+click on macOS).

To set cursors above or below the current position use:

Keyboard Shortcut: Ctrl+Alt+Up or Ctrl+Alt+Down

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Le_oEOiYnEBmFfig.gif" class="graf-image" /></figure>You can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*WcrfwIln6NIG3zNW.gif" class="graf-image" /></figure>*Note: You can also change the modifier to Ctrl/Cmd for applying multiple cursors with the* `editor.multiCursorModifier` <a href="https://code.visualstudio.com/docs/getstarted/settings" class="markup--anchor markup--blockquote-anchor"><em>setting</em></a>* . See* <a href="https://code.visualstudio.com/docs/editor/codebasics#_multicursor-modifier" class="markup--anchor markup--blockquote-anchor"><em>Multi-cursor Modifier</em></a> *for details.*

If you do not want to add all occurrences of the current selection, you can use Ctrl+D instead. This only selects the next occurrence after the one you selected so you can add selections one by one.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*09EveaKtpZEKFEpO.gif" class="graf-image" /></figure>### Column (box) selection

You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*LrsOBXP4MVqr7aes.gif" class="graf-image" /></figure>You can also use <a href="https://code.visualstudio.com/docs/editor/codebasics#_column-box-selection" class="markup--anchor markup--p-anchor">keyboard shortcuts</a> to trigger column selection.

---

### Extensions:

#### <a href="https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-autohotkey-plus" class="markup--anchor markup--h4-anchor">AutoHotkey Plus</a>

> _Syntax Highlighting, Snippets, Go to Definition, Signature helper and Code formatter_

### <a href="https://marketplace.visualstudio.com/items?itemName=rogalmic.bash-debug" class="markup--anchor markup--h3-anchor">Bash Debug</a>

> _A debugger extension for Bash scripts based on_ `bashdb`

<figure><img src="https://cdn-images-1.medium.com/max/800/0*8j2gGGs0WHcuFIwY.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Remisa.shellman" class="markup--anchor markup--h3-anchor">Shellman</a>

> _Bash script snippets extension_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*wyimtX27gWygAeOb.gif" class="graf-image" /></figure>### C++

> <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools" class="markup--anchor markup--blockquote-anchor">C/C++</a> — Preview C/C++ extension by <a href="https://www.microsoft.com/" class="markup--anchor markup--blockquote-anchor">Microsoft</a>, read <a href="https://blogs.msdn.microsoft.com/vcblog/2016/03/31/cc-extension-for-visual-studio-code/" class="markup--anchor markup--blockquote-anchor">official blog post</a> for the details

> <a href="https://marketplace.visualstudio.com/items?itemName=llvm-vs-code-extensions.vscode-clangd" class="markup--anchor markup--blockquote-anchor">Clangd</a> — Provides C/C++ language IDE features for VS Code using clangd: code completion, compile errors and warnings, go-to-definition and cross references, include management, code formatting, simple refactorings.

> <a href="https://marketplace.visualstudio.com/items?itemName=austin.code-gnu-global" class="markup--anchor markup--blockquote-anchor">gnu-global-tags</a> — Provide Intellisense for C/C++ with the help of the GNU Global tool.

> <a href="https://marketplace.visualstudio.com/items?itemName=RichardHe.you-complete-me" class="markup--anchor markup--blockquote-anchor">YouCompleteMe</a> — Provides semantic completions for C/C++ (and TypeScript, JavaScript, Objective-C, Golang, Rust) using <a href="http://ycm-core.github.io/YouCompleteMe/" class="markup--anchor markup--blockquote-anchor">YouCompleteMe</a>.

> <a href="https://github.com/mitaki28/vscode-clang" class="markup--anchor markup--blockquote-anchor">C/C++ Clang Command Adapter</a> — Completion and Diagnostic for C/C++/Objective-C using Clang command.

> <a href="https://github.com/cquery-project/vscode-cquery" class="markup--anchor markup--blockquote-anchor">CQuery</a> — <a href="https://github.com/jacobdufault/cquery" class="markup--anchor markup--blockquote-anchor">C/C++ language server</a> supporting multi-million line code base, powered by libclang. Cross references, completion, diagnostics, semantic highlighting and more.

#### More

- <span id="4dd9"><a href="https://devblogs.microsoft.com/cppblog/vscode-cpp-may-2019-update/" class="markup--anchor markup--li-anchor">Microsoft’s tutorial on using VSCode for remote C/C++ development</a></span>

### C\#, ASP .NET and .NET Core

> <a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp" class="markup--anchor markup--blockquote-anchor">C#</a> — C\# extension by <a href="https://www.microsoft.com/" class="markup--anchor markup--blockquote-anchor">Microsoft</a>, read <a href="https://code.visualstudio.com/docs/languages/csharp" class="markup--anchor markup--blockquote-anchor">official documentation</a> for the details

> <a href="https://marketplace.visualstudio.com/items?itemName=Leopotam.csharpfixformat" class="markup--anchor markup--blockquote-anchor">C# FixFormat</a> — Fix format of usings / indents / braces / empty lines

> <a href="https://marketplace.visualstudio.com/items?itemName=jchannon.csharpextensions" class="markup--anchor markup--blockquote-anchor">C# Extensions</a> — Provides extensions to the IDE that will speed up your development workflow.

> <a href="https://marketplace.visualstudio.com/items?itemName=tintoy.msbuild-project-tools" class="markup--anchor markup--blockquote-anchor">MSBuild Project Tools</a>

> <a href="https://marketplace.visualstudio.com/items?itemName=fernandoescolar.vscode-solution-explorer" class="markup--anchor markup--blockquote-anchor">VSCode Solution Explorer</a>

> <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.dotnet-test-explorer" class="markup--anchor markup--blockquote-anchor">.NET Core Test Explorer</a>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*ZG5W4_VVBv89zO_g.gif" class="graf-image" /></figure>

---

### CSS

### <a href="https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek" class="markup--anchor markup--h3-anchor">CSS Peek</a>

> _Peek or Jump to a CSS definition directly from HTML, just like in Brackets!_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*MN4pNqxDw4FyRk8g.gif" class="graf-image" /></figure>-   <span id="7261"><a href="https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint" class="markup--anchor markup--li-anchor">stylelint</a> — Lint CSS/SCSS.</span>
-   <span id="e8d5"><a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer" class="markup--anchor markup--li-anchor">Autoprefixer</a> Parse CSS,SCSS, LESS and add vendor prefixes automatically.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*edXaUlo7z9TRDQnC.gif" class="graf-image" /></figure>-   <span id="b1b1"><a href="https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion" class="markup--anchor markup--li-anchor">Intellisense for CSS class names</a> — Provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace. Also supports React’s className attribute.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*AHJJrCMfkLWLHLH4.gif" class="graf-image" /></figure>### Groovy

- <span id="e453"><a href="https://marketplace.visualstudio.com/items?itemName=NicolasVuillamy.vscode-groovy-lint" class="markup--anchor markup--li-anchor">VsCode Groovy Lint</a> — Groovy lint, format, prettify and auto-fix</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*jmi5_-erJj7WOMq7.gif" class="graf-image" /></figure>### Haskell

- <span id="66eb"><a href="https://marketplace.visualstudio.com/items?itemName=hoovercj.haskell-linter" class="markup--anchor markup--li-anchor">haskell-linter</a></span>
- <span id="fd71"><a href="https://marketplace.visualstudio.com/items?itemName=alanz.vscode-hie-server" class="markup--anchor markup--li-anchor">Haskell IDE engine</a> — provides <a href="https://github.com/haskell/haskell-ide-engine" class="markup--anchor markup--li-anchor">language server</a> for stack and cabal projects.</span>
- <span id="cbfe"><a href="https://marketplace.visualstudio.com/items?itemName=truman.autocomplate-shell" class="markup--anchor markup--li-anchor">autocomplate-shell</a></span>

---

### Java

- <span id="cf71"><a href="https://marketplace.visualstudio.com/items?itemName=redhat.java" class="markup--anchor markup--li-anchor">Language Support for Java(TM) by Red Hat</a></span>
- <span id="d93f"><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-debug" class="markup--anchor markup--li-anchor">Debugger for Java</a></span>
- <span id="3c8c"><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven" class="markup--anchor markup--li-anchor">Maven for Java</a></span>
- <span id="2d5c"><a href="https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok" class="markup--anchor markup--li-anchor">Lombok</a></span>

---

### JavaScript

- <span id="8516"><a href="https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel" class="markup--anchor markup--li-anchor">Babel JavaScript</a></span>
- <span id="aa22"><a href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode" class="markup--anchor markup--li-anchor">Visual Studio IntelliCode</a> — This extension provides AI-assisted development features including autocomplete and other insights based on understanding your code context.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*i7CZbSbHqsWqEM4w.gif" class="graf-image" /></figure>See the difference between these two <a href="https://github.com/michaelgmcd/vscode-language-babel/issues/1" class="markup--anchor markup--p-anchor">here</a>

> <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin" class="markup--anchor markup--blockquote-anchor">tslint</a> — TSLint for Visual Studio Code (with `"tslint.jsEnable": true`).

> <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" class="markup--anchor markup--blockquote-anchor">eslint</a> — Linter for <a href="https://eslint.org/" class="markup--anchor markup--blockquote-anchor">eslint</a>.

> <a href="https://marketplace.visualstudio.com/items?itemName=samverschueren.linter-xo" class="markup--anchor markup--blockquote-anchor">XO</a> — Linter for <a href="https://github.com/xojs/xo" class="markup--anchor markup--blockquote-anchor">XO</a>.

> <a href="https://marketplace.visualstudio.com/items?itemName=samverschueren.ava" class="markup--anchor markup--blockquote-anchor">AVA</a> — Snippets for <a href="https://github.com/avajs/ava" class="markup--anchor markup--blockquote-anchor">AVA</a>.

> <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" class="markup--anchor markup--blockquote-anchor">Prettier</a> — Linter, Formatter and Pretty printer for <a href="https://github.com/prettier/prettier-vscode" class="markup--anchor markup--blockquote-anchor">Prettier</a>.

> <a href="https://marketplace.visualstudio.com/items?itemName=austinleegordon.vscode-schema-dot-org" class="markup--anchor markup--blockquote-anchor">Schema.org Snippets</a> — Snippets for <a href="https://schema.org/" class="markup--anchor markup--blockquote-anchor">Schema.org</a>.

> <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" class="markup--anchor markup--blockquote-anchor">Code Spell Checker</a> — Spelling Checker for Visual Studio Code.

Framework-specific:

#### <a href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" class="markup--anchor markup--h4-anchor">Vetur</a> — Toolkit for Vue.js

<figure><img src="https://cdn-images-1.medium.com/max/800/0*F7J_vW0ISbVMTXIZ.png" class="graf-image" /></figure>

---

### <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" class="markup--anchor markup--h3-anchor">Debugger for Chrome</a>

> _A VS Code extension to debug your JavaScript code in the Chrome browser, or other targets that support the Chrome Debugging Protocol._

### Facebook Flow

- <span id="155f"><a href="https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode" class="markup--anchor markup--li-anchor">Flow Language Support</a> — provides all the functionality you would expect — linting, intellisense, type tooltips and click-to-definition</span>
- <span id="ac2f"><a href="https://marketplace.visualstudio.com/items?itemName=gcazaciuc.vscode-flow-ide" class="markup--anchor markup--li-anchor">vscode-flow-ide</a> — an alternative Flowtype extension for Visual Studio Code</span>

### TypeScript

- <span id="8883"><a href="https://marketplace.visualstudio.com/items?itemName=eg2.tslint" class="markup--anchor markup--li-anchor">tslint</a> — TSLint for Visual Studio Code</span>
- <span id="9665"><a href="https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero" class="markup--anchor markup--li-anchor">TypeScript Hero</a> — Code outline view of your open TS, sort and organize your imports.</span>

---

### Markdown

### <a href="https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint" class="markup--anchor markup--h3-anchor">markdownlint</a>

> _Linter for_ <a href="https://github.com/DavidAnson/markdownlint" class="markup--anchor markup--blockquote-anchor"><em>markdownlint</em></a>_._

### <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" class="markup--anchor markup--h3-anchor">Markdown All in One</a>

> _All-in-one markdown plugin (keyboard shortcuts, table of contents, auto preview, list editing and more)_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*8oVrYuZ9kLRNSuBs.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji" class="markup--anchor markup--h3-anchor">Markdown Emoji</a>

> _Adds emoji syntax support to VS Code’s built-in Markdown preview_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*rckUMIIZ9Jh7UE5q.png" class="graf-image" /></figure>

---

### PHP

### IntelliSense

These extensions provide slightly different sets of features. While the first one offers better autocompletion support, the second one seems to have more features overall.

- <span id="94df"><a href="https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client" class="markup--anchor markup--li-anchor">PHP Intelephense</a></span>
- <span id="b2b4"><a href="https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense" class="markup--anchor markup--li-anchor">PHP IntelliSense</a></span>

### Laravel

- <span id="687e"><a href="https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel5-snippets" class="markup--anchor markup--li-anchor">Laravel 5 Snippets</a> — Laravel 5 snippets for Visual Studio Code</span>
- <span id="42ab"><a href="https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade" class="markup--anchor markup--li-anchor">Laravel Blade Snippets</a> — Laravel blade snippets and syntax highlight support</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*f4hMFe1l7NpJTG8v.gif" class="graf-image" /></figure>-   <span id="bf66"><a href="https://marketplace.visualstudio.com/items?itemName=ahinkle.laravel-model-snippets" class="markup--anchor markup--li-anchor">Laravel Model Snippets</a> — Quickly get models up and running with Laravel Model Snippets.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*1xydH2CgYGDSMZtB.gif" class="graf-image" /></figure>-   <span id="fa58"><a href="https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan" class="markup--anchor markup--li-anchor">Laravel Artisan</a> — Laravel Artisan commands within Visual Studio Code</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*rzK952c4UgikNNPR.gif" class="graf-image" /></figure>-   <span id="1e4d"><a href="https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv" class="markup--anchor markup--li-anchor">DotENV</a> — Support for dotenv file syntax</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*fSAaqpXfBx1Sgztf.png" class="graf-image" /></figure>

---

### Other extensions

- <span id="8443"><a href="https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php" class="markup--anchor markup--li-anchor">Format HTML in PHP</a> — Formatting for the HTML in PHP files. Runs before the save action so you can still have a PHP formatter.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*6gF0K20iKes7I9ZF.gif" class="graf-image" /></figure>-   <span id="f3f0"><a href="https://marketplace.visualstudio.com/items?itemName=ikappas.composer" class="markup--anchor markup--li-anchor">Composer</a></span>
-   <span id="e5ba"><a href="https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug" class="markup--anchor markup--li-anchor">PHP Debug</a> — XDebug extension for Visual Studio Code</span>
-   <span id="6a3c"><a href="https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker" class="markup--anchor markup--li-anchor">PHP DocBlocker</a></span>
-   <span id="a4ca"><a href="https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer" class="markup--anchor markup--li-anchor">php cs fixer</a> — PHP CS Fixer extension for VS Code, php formatter, php code beautify tool</span>
-   <span id="30f1"><a href="https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs" class="markup--anchor markup--li-anchor">phpcs</a> — PHP CodeSniffer for Visual Studio Code</span>
-   <span id="d82e"><a href="https://marketplace.visualstudio.com/items?itemName=kokororin.vscode-phpfmt" class="markup--anchor markup--li-anchor">phpfmt</a> — phpfmt for Visual Studio Code</span>

---

### Python

- <span id="0136"><a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python" class="markup--anchor markup--li-anchor">Python</a> — Linting, Debugging (multi threaded, web apps), Intellisense, auto-completion, code formatting, snippets, unit testing, and more.</span>

### TensorFlow

- <span id="402b"><a href="https://marketplace.visualstudio.com/items?itemName=vahidk.tensorflow-snippets" class="markup--anchor markup--li-anchor">TensorFlow Snippets</a> — This extension includes a set of useful code snippets for developing TensorFlow models in Visual Studio Code.</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*stmhgQ3sGvJBTvf2.gif" class="graf-image" /></figure>

---

### Rust

- <span id="cec4"><a href="https://marketplace.visualstudio.com/items?itemName=rust-lang.rust" class="markup--anchor markup--li-anchor">Rust</a> — Linting, auto-completion, code formatting, snippets and more</span>

---

### Productivity

### <a href="https://marketplace.visualstudio.com/items?itemName=bencoleman.armview" class="markup--anchor markup--h3-anchor">ARM Template Viewer</a>

> _Displays a graphical preview of Azure Resource Manager (ARM) templates. The view will show all resources with the official Azure icons and also linkage between the resources._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*p8bvCI9DXF44m4z3.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-cosmosdb" class="markup--anchor markup--h3-anchor">Azure Cosmos DB</a>

> _Browse your database inside the vs code editor_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*VWvSU6Hbf20Kfc_P.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=vsciot-vscode.azure-iot-toolkit" class="markup--anchor markup--h3-anchor">Azure IoT Toolkit</a>

> _Everything you need for the Azure IoT development: Interact with Azure IoT Hub, manage devices connected to Azure IoT Hub, and develop with code snippets for Azure IoT Hub_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*AobtCd80fICrbQPI.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks" class="markup--anchor markup--h3-anchor">Bookmarks</a>

> _Mark lines and jump to them_

### <a href="https://marketplace.visualstudio.com/items?itemName=orepor.color-tabs-vscode-ext" class="markup--anchor markup--h3-anchor">Color Tabs</a>

> _An extension for big projects or monorepos that colors your tab/titlebar based on the current package_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*SEp-hgfDLlubNRyc.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=hardikmodha.create-tests" class="markup--anchor markup--h3-anchor">Create tests</a>

> _An extension to quickly generate test files._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*DLZLYmrBiui0YOBt.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mkloubert.vs-deploy" class="markup--anchor markup--h3-anchor">Deploy</a>

> _Commands for upload or copy files of a workspace to a destination._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*lLasjzlmWnBwdbAT.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate" class="markup--anchor markup--h3-anchor">Duplicate Action</a>

> _Ability to duplicate files and directories._

### <a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" class="markup--anchor markup--h3-anchor">Error Lens</a>

> _Show language diagnostics inline (errors/warnings/…)._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*1tJJkV0p2Ka_W06r.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" class="markup--anchor markup--h3-anchor">ES7 React/Redux/GraphQL/React-Native snippets</a>

> _Provides Javascript and React/Redux snippets in ES7_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*W3N0kbgEumWYa-m4.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=rubbersheep.gi" class="markup--anchor markup--h3-anchor">Gi</a>

> _Generating .gitignore files made easy_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*sfddghz8B1D362UB.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs" class="markup--anchor markup--h3-anchor">GistPad</a>

> _Allows you to manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local. It’s like your very own developer library for building and referencing code snippets, commonly used config/scripts, programming-related notes/documentation, and interactive samples._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*1MiBQ0u4Z8TPNaG9.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory" class="markup--anchor markup--h3-anchor">Git History</a>

> _View git log, file or line History_

### <a href="https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager" class="markup--anchor markup--h3-anchor">Git Project Manager</a>

> _Automatically indexes your git projects and lets you easily toggle between them_

### <a href="https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink" class="markup--anchor markup--h3-anchor">GitLink</a>

> _GoTo current file’s online link in browser and Copy the link in clipboard._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Acgfn2rmhinuIPjk.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" class="markup--anchor markup--h3-anchor">GitLens</a>

> _Provides Git CodeLens information (most recent commit, \# of authors), on-demand inline blame annotations, status bar blame information, file and blame history explorers, and commands to compare changes with the working tree or previous versions._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*MZu4GV7SOCW88UQQ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=lamartire.git-indicators" class="markup--anchor markup--h3-anchor">Git Indicators</a>

> _Atom-like git indicators on active panel_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*vitZrD9ZU0_eWckU.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*0BHxQOLMx09FFuWZ.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*x8F97F4AdSvvtehT.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-github" class="markup--anchor markup--h3-anchor">GitHub</a>

> _Provides GitHub workflow support. For example browse project, issues, file (the current line), create and manage pull request. Support for other providers (e.g. gitlab or bitbucket) is planned. Have a look at the_ <a href="https://github.com/KnisterPeter/vscode-github/blob/master/README.md" class="markup--anchor markup--blockquote-anchor"><em>README.md</em></a> _on how to get started with the setup for this extension._

### <a href="https://marketplace.visualstudio.com/items?itemName=erichbehrens.pull-request-monitor" class="markup--anchor markup--h3-anchor">GitHub Pull Request Monitor</a>

> _This extension uses the GitHub api to monitor the state of your pull requests and let you know when it’s time to merge or if someone requested changes._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*TOq5OERkgQNETGPK.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=gitlab.gitlab-workflow" class="markup--anchor markup--h3-anchor">GitLab Workflow</a>

> _Adds a GitLab sidebar icon to view issues, merge requests and other GitLab resources. You can also view the results of your GitLab CI/CD pipeline and check the syntax of your _`.gitlab-ci.yml`_._

#### <a href="https://marketplace.visualstudio.com/items?itemName=richardwillis.vscode-gradle" class="markup--anchor markup--h4-anchor">Gradle Tasks</a>

> _Run gradle tasks in VS Code._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Vx-3DIT22BJpEnJr.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts" class="markup--anchor markup--h3-anchor">Icon Fonts</a>

> _Snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!_

### <a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost" class="markup--anchor markup--h3-anchor">Import Cost</a>

> _This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size._

### <a href="https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode" class="markup--anchor markup--h3-anchor">Jira and Bitbucket</a>

> _Bringing the power of Jira and Bitbucket to VS Code — With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more!_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*T6iuH2VnPYj93YqW.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations" class="markup--anchor markup--h3-anchor">JS Parameter Annotations</a>

> _Provides annotations on function calls in JS/TS files to provide parameter names to arguments._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*zHffPsYWln4dxhus.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy" class="markup--anchor markup--h3-anchor">Jumpy</a>

> _Provides fast cursor movement, inspired by Atom’s package of the same name._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*uPOceUJ4eMjCP_Qt.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mkloubert.vscode-kanban" class="markup--anchor markup--h3-anchor">Kanban</a>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*SzUG3UU1fl5ub7bA.gif" class="graf-image" /></figure>*Simple Kanban board for use in Visual Studio Code, with time tracking and Markdown support.*

### <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" class="markup--anchor markup--h3-anchor">Live Server</a>

> _Launch a development local Server with live reload feature for static & dynamic pages._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Oj5zPrWwMbCBViBi.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-multiclip" class="markup--anchor markup--h3-anchor">Multiple clipboards</a>

> _Override the regular Copy and Cut commands to keep selections in a clipboard ring_

### <a href="https://marketplace.visualstudio.com/items?itemName=philnash.ngrok-for-vscode" class="markup--anchor markup--h3-anchor">ngrok for VSCode</a>

> _ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on. This extension allows you to control_ <a href="https://ngrok.com/" class="markup--anchor markup--blockquote-anchor"><em>ngrok</em></a> _from the VSCode command palette_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*IX15MuJrEVBcTd0F.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-instant-markdown" class="markup--anchor markup--h3-anchor">Instant Markdown</a>

> _Simply, edit markdown documents in vscode and instantly preview it in your browser as you type._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*jBw9vP9cAtvv2IcV.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense" class="markup--anchor markup--h3-anchor">npm Intellisense</a>

> _Visual Studio Code plugin that autocompletes npm modules in import statements._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*iVJamJugt_b7-VsV.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=DominicVonk.parameter-hints" class="markup--anchor markup--h3-anchor">Parameter Hints</a>

> _Provides parameter hints on function calls in JS/TS/PHP files._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*BSj8-Qt7xtVTsl1Z.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff" class="markup--anchor markup--h3-anchor">Partial Diff</a>

> _Compare (diff) text selections within a file, across different files, or to the clipboard_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*KHki85jdv1hZeY3V.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype" class="markup--anchor markup--h3-anchor">Paste JSON as Code</a>

> _Infer the structure of JSON and paste is as types in many programming languages_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*K2GCRMGsYjpsK8OX.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" class="markup--anchor markup--h3-anchor">Path IntelliSense</a>

> _Visual Studio Code plugin that autocompletes filenames_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*xwxU_1ffZvZ6DeoO.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ego-digital.vscode-powertools" class="markup--anchor markup--h3-anchor">Power Tools</a>

> _Extends Visual Studio Code via things like Node.js based scripts or shell commands, without writing separate extensions_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Cb7J6-PYsXsnjqSN.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=nobuhito.printcode" class="markup--anchor markup--h3-anchor">PrintCode</a>

> _PrintCode converts the code being edited into an HTML file, displays it by browser and prints it._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*2spvNSEEHM-ETd_F.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager" class="markup--anchor markup--h3-anchor">Project Manager</a>

> _Easily switch between projects._

### <a href="https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard" class="markup--anchor markup--h3-anchor">Project Dashboard</a>

> _VSCode Project Dashboard is a Visual Studio Code extension that lets you organize your projects in a speed-dial like manner. Pin your frequently visited folders, files, and SSH remotes onto a dashboard to access them quickly._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*PxOoARROhi1rf63R.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv" class="markup--anchor markup--h3-anchor">Rainbow CSV</a>

> _Highlight columns in comma, tab, semicolon and pipe separated files, consistency check and linting with CSVLint, multi-cursor column editing, column trimming and realignment, and SQL-style querying with RBQL._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*XAb9jlOfGWlEaCEM.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack" class="markup--anchor markup--h3-anchor">Remote Development</a>

> _Allows users to open any folder in a container, on a remote machine, container or in Windows Subsystem for Linux(WSL) and take advantage of VS Code’s full feature set._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*b6XEPh9PJzeWDB_z.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=rafaelmaiolla.remote-vscode" class="markup--anchor markup--h3-anchor">Remote VSCode</a>

> _Allow user to edit files from Remote server in Visual Studio Code directly._

### <a href="https://marketplace.visualstudio.com/items?itemName=humao.rest-client" class="markup--anchor markup--h3-anchor">REST Client</a>

> _Allows you to send HTTP request and view the response in Visual Studio Code directly._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*zGne78bniDbTXzyf.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync" class="markup--anchor markup--h3-anchor">Settings Sync</a>

> _Synchronize settings, snippets, themes, file icons, launch, key bindings, workspaces and extensions across multiple machines using GitHub Gist_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*ilH91MRgGnMF6C8c.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=qcz.text-power-tools" class="markup--anchor markup--h3-anchor">Text Power Tools</a>

> _All-in-one extension for text manipulation: filtering (grep), remove lines, insert number sequences and GUIDs, format content as table, change case, converting numbers and more. Great for finding information in logs and manipulating text._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Pfp4noD5OeQRbmsZ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree" class="markup--anchor markup--h3-anchor">Todo Tree</a>

> _Custom keywords, highlighting, and colors for TODO comments. As well as a sidebar to view all your current tags._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*6utz502-rPCa0Xcg.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes" class="markup--anchor markup--h3-anchor">Toggle Quotes</a>

> _Cycle between single, double and backtick quotes_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*7kZFpggvGAVkvoYa" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=tusaeff.vscode-typescript-destructure-plugin" class="markup--anchor markup--h3-anchor">Typescript Destructure</a>

> _TypeScript Language Service Plugin providing a set of source actions for easy objects destructuring_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*sEi0imXK2Yx69m7H.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime" class="markup--anchor markup--h3-anchor">WakaTime</a>

> _Automatic time tracker and productivity dashboard showing how long you coded in each project, file, branch, and language._

---

### Formatting & Beautification

### <a href="https://marketplace.visualstudio.com/items?itemName=wwm.better-align" class="markup--anchor markup--h3-anchor">Better Align</a>

> _Align your code by colon(:), assignment(=,+=,-=,\*=,/=) and arrow(=&gt;). It has additional support for comma-first coding style and trailing comment._

> _And it doesn’t require you to select what to be aligned, the extension will figure it out by itself._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*5maDjvvH57MAks1l.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" class="markup--anchor markup--h3-anchor">Auto Close Tag</a>

> _Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*h6Q6HLQ8jfHLnPlJ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" class="markup--anchor markup--h3-anchor">Auto Rename Tag</a>

> _Auto rename paired HTML/XML tags_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*uRKX2-umhSQzlESv.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify" class="markup--anchor markup--h3-anchor">beautify</a>

> _Beautify code in place for VS Code_

### <a href="https://marketplace.visualstudio.com/items?itemName=dbalas.vscode-html2pug" class="markup--anchor markup--h3-anchor">html2pug</a>

> _Transform html to pug inside your Visual Studio Code, forget about using an external page anymore._

### <a href="https://marketplace.visualstudio.com/items?itemName=vilicvane.es-quotes" class="markup--anchor markup--h3-anchor">ECMAScript Quotes Transformer</a>

> _Transform quotes of ECMAScript string literals_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*W1Z1fIvOGgPclFMJ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Rubymaniac.vscode-paste-and-indent" class="markup--anchor markup--h3-anchor">Paste and Indent</a>

> _Paste code with “correct” indentation_

### <a href="https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines" class="markup--anchor markup--h3-anchor">Sort Lines</a>

> _Sorts lines of text in specific order_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*a4wPhA7VjJqkp3lu.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround" class="markup--anchor markup--h3-anchor">Surround</a>

> _A simple yet powerful extension to add wrapper templates around your code blocks._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*lyjRgfSrvdmhGFXd.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=konstantin.wrapSelection" class="markup--anchor markup--h3-anchor">Wrap Selection</a>

> _Wraps selection or multiple selections with symbol or multiple symbols_

### <a href="https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle" class="markup--anchor markup--h3-anchor">Formatting Toggle</a>

> _Allows you to toggle your formatter on and off with a simple click_

### <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" class="markup--anchor markup--h3-anchor">Bracket Pair Colorizer</a>

> _This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*m3nU-5UxgUxX4-eJ.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=steoates.autoimport" class="markup--anchor markup--h3-anchor">Auto Import</a>

> _Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX._

### <a href="https://github.com/foxundermoon/vs-shell-format" class="markup--anchor markup--h3-anchor">shell-format</a>

> _shell script & Dockerfile & dotenv format_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*TThlkfK1KgQm5AKU.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=funkyremi.vscode-google-translate" class="markup--anchor markup--h3-anchor">Vscode Google Translate</a>

> _Quickly translate selected text right in your code_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*JF8NuxAFDxXiTn_u.gif" class="graf-image" /></figure>### Explorer Icons

### <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" class="markup--anchor markup--h3-anchor">Material Icon Theme</a>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*67ZZ9mhoISPk_lM4.png" class="graf-image" /></figure>### Uncategorized

### <a href="https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview" class="markup--anchor markup--h3-anchor">Browser Preview</a>

> _Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by Chrome Headless, and works by starting a headless Chrome instance in a new process. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!_

> **_FYI:… I HAVE TRIED ENDLESSLEY TO GET THE DEBUGGER TO WORK IN VSCODE BUT IT DOES NOT… I SUSPECT THAT’S WHY IT HAS A 3 STAR RATING FOR AN OTHERWISE PHENOMINAL EXTENSION._**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Oilwsi7EKGpCZb46.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=CodeRoad.coderoad" class="markup--anchor markup--h3-anchor">CodeRoad</a>

> _Play interactive tutorials in your favorite editor._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*iV8P93QMmWdYfnrQ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" class="markup--anchor markup--h3-anchor">Code Runner</a>

> _Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F\# Script, C\# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*hMsM_IEyBklQXchd.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode" class="markup--anchor markup--h3-anchor">Code Time</a>

> _Automatic time reports by project and other programming metrics right in VS Code._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Uo1BYexJenprpgLa" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight" class="markup--anchor markup--h3-anchor">Color Highlight</a>

> _Highlight web colors in your editor_

<figure><img src="https://cdn-images-1.medium.com/max/800/1*ZwE7OHKR5opvDCJJOw9KeQ.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer" class="markup--anchor markup--h3-anchor">Output Colorizer</a>

> _Syntax highlighting for the VS Code Output Panel and log files_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*9DpzVZ9cUNp2TMyD.jpg" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash" class="markup--anchor markup--h3-anchor">Dash</a>

> _Dash integration in Visual Studio Code_

<figure><img src="https://cdn-images-1.medium.com/max/800/1*sqGllC-pgXNaEBfB-cxG9Q.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ryu1kn.edit-with-shell" class="markup--anchor markup--h3-anchor">Edit with Shell Command</a>

> _Leverage your favourite shell commands to edit text_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*2wW31HJ1nUCjORZe.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" class="markup--anchor markup--h3-anchor">Editor Config for VS Code</a>

> _Editor Config for VS Code_

### <a href="https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync" class="markup--anchor markup--h3-anchor">ftp-sync</a>

> _Auto-sync your work to remote FTP server_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*-viKhwxpeYQdWHRE.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag" class="markup--anchor markup--h3-anchor">Highlight JSX/HTML tags</a>

> _Highlights matching tags in the file._

### <a href="https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow" class="markup--anchor markup--h3-anchor">Indent Rainbow</a>

> _A simple extension to make indentation more readable._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*GK_yEd-50SU3yc_y.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ftonato.password-generator" class="markup--anchor markup--h3-anchor">Password Generator</a>

> _Create a secure password using our generator tool. Help prevent a security threat by getting a strong password today._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*qPJAZk9-NcYgsx7H.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.platformio" class="markup--anchor markup--h3-anchor">PlatformIO</a>

> _An open source ecosystem for IoT development: supports 350+ embedded boards, 20+ development platforms, 10+ frameworks. Arduino and ARM mbed compatible._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*RywVt_vikqB-5urO.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode" class="markup--anchor markup--h3-anchor">Polacode</a>

> _Polaroid for your code 📸._

> **_Note: Polacode no longer works as of the most recent update… go for Polacode2020 or CodeSnap…_**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Io4fPojDRrDf5CmW.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode" class="markup--anchor markup--h3-anchor">Quokka</a>

#### This one is super cool!

> _Rapid prototyping playground for JavaScript and TypeScript in VS Code, with access to your project’s files, inline reporting, code coverage and rich output formatting._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Q9kp8EWZHTD0Hfru.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=sozercan.slack" class="markup--anchor markup--h3-anchor">Slack</a>

> _Send messages and code snippets, upload files to Slack_

Personally I found this extension to slow down my editor in addition to confliction with other extensions: (I have over 200 as of this writing)….. **yes I have been made fully aware that I have a problem and need to get help**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*9-xxjXzdPCh_46kZ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify" class="markup--anchor markup--h3-anchor">Spotify</a>

_No real advantage over just using Spotify normally… it’s problematic enough in implementation that you won’t save any time using it. Further, it’s a bit tricky to configure … or at least it was the last time I tried syncing it with my spotify account._

> _Provides integration with Spotify Desktop client. Shows the currently playing song in status bar, search lyrics and provides commands for controlling Spotify with buttons and hotkeys._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*IqsxXiGpZQWbQbfD.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=jock.svg" class="markup--anchor markup--h3-anchor">SVG</a>

> _A Powerful SVG Language Support Extension(beta). Almost all the features you need to handle SVG._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*SC6zCXGaBnM_LkgC.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer" class="markup--anchor markup--h3-anchor">SVG Viewer</a>

> _View an SVG in the editor and export it as data URI scheme or PNG._

### <a href="https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker" class="markup--anchor markup--h3-anchor">Text Marker (Highlighter)</a>

> _Highlight multiple text patterns with different colors at the same time. Highlighting a single text pattern can be done with the editor’s search functionality, but it cannot highlight multiple patterns at the same time, and this is where this extension comes handy._

<figure><img src="https://cdn-images-1.medium.com/max/800/0*YDreVyGNjZmqj_KC.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=samundrak.esdoc-mdn" class="markup--anchor markup--h3-anchor">ESDOC MDN</a>

### THIS IS A MUST HAVE

> _Quickly bring up helpful MDN documentation in the editor_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*xiUfWBsz8x8beY70.gif" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*mMBU6d1iCkt5VHq2.gif" class="graf-image" /></figure>### Themes:

In the interest of not making the reader scroll endlessly as I often do… I’ve made a separate post for that here. If you’ve made it this far, I thank you!

<a href="https://bryanguner.medium.com/my-favorite-vscode-themes-9bab65af3f0f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/my-favorite-vscode-themes-9bab65af3f0f"><strong>My Favorite VSCode <em>Themes</em></strong><br />
Themesbryanguner.medium.com</a><a href="https://bryanguner.medium.com/my-favorite-vscode-themes-9bab65af3f0f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

---

### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

<a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br />
<em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br />
<em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

### Discover More:

<a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br />
<em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 18, 2021](https://medium.com/p/b9f4c8d91931).

<a href="https://medium.com/@bryanguner/everything-you-need-to-get-started-with-vscode-extensions-resources-b9f4c8d91931" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Everything You Need To Know About Relational Databases, SQL, PostgreSQL and Sequelize To Build…

For Front end developers who like myself struggle with making the jump to fullstack.

---

#### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a>

### **Everything You Need To Know About Relational Databases, SQL, PostgreSQL and Sequelize To Build Your Backend!**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*3wDVBrK5ltmjjVSJ.jpeg" class="graf-image" /></figure>**For Front end developers who like myself struggle with making the jump to fullstack.**

You can access and query the data using the findByPk, findOne, and findAll methods.

**Terminology:**

- <span id="c63a"><a href="https://nodejs.org/en/" class="markup--anchor markup--li-anchor">NodeJS</a> We re going to use this to run JavaScript code on the server. I ve decided to use the latest version of Node, v6.3.0 at the time of writing, so that we ll have access to most of the new features introduced in ES6.</span>
- <span id="11a6"><a href="https://expressjs.com/" class="markup--anchor markup--li-anchor">Express</a> As per their website, Express is a Fast, unopinionated, minimalist web framework for Node.js , that we re going to be building our Todo list application on.</span>
- <span id="5808"><a href="https://www.postgresql.org/docs/9.5/static/index.html" class="markup--anchor markup--li-anchor">PostgreSQL</a> This is a powerful open-source database that we re going to use. I ve attached an article I published on the setup below!</span>

<a href="https://bryanguner.medium.com/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089" class="markup--anchor markup--p-anchor" title="https://bryanguner.medium.com/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089"><strong>PostgreSQL Setup For Windows &amp; WSL/Ubuntu</strong><br />
<em>If you follow this guide to a tee you will install PostgreSQL itself on your Windows installation. Then, you will</em> bryanguner.medium.com</a>

- <span id="bb49">However, if you face issues while installing PostgreSQL, or you don t want to dive into installing it, you can opt for a version of PostgreSQL hosted online. I recommend <a href="https://www.elephantsql.com/" class="markup--anchor markup--li-anchor">ElephantSQL</a>. I found it s pretty easy to get started with. However, the free version will only give you a 20MB allowance.</span>
- <span id="539a"><a href="http://docs.sequelizejs.com/en/latest/" class="markup--anchor markup--li-anchor">Sequelize</a> In addition, we re going to use Sequelize, which is a database <a href="https://en.wikipedia.org/wiki/Object-relational_mapping" class="markup--anchor markup--li-anchor">ORM</a> that will interface with the Postgres database for us.</span>

**RDBMS and Database Entities**

**Define what a relational database management system is**

- <span id="6529">RDBMS stands for Relational Database Management System</span>
- <span id="6d7e">A software application that you run that your programs can connect to so that they can store, modify, and retrieve data.</span>
- <span id="79d9">An RDBMS can track many databases. We will use PostgreSQL, or postgres , primarily for our RDBMS and it will be able to create individual databases for each of our projects.</span>

**Describe what relational data is**

- <span id="d8fd">In general, relational data is information that is connected to other pieces of information.</span>
- <span id="2fa8">When working with relational databases, we can connect two entries together utilizing foreign keys (explained below).</span>
- <span id="e199">In a pets database, we could be keeping track of dogs and cats as well as the toys that each of them own. That ownership of a cat to a toy is the relational aspect of relational data. Two pieces of information that can be connected together to show some sort of meaning.</span>

**Define what a database is**

- <span id="06fe">The actual location that data is stored.</span>
- <span id="78c5">A database can be made up of many tables that each store specific kinds of information.</span>
- <span id="f752">We could have a pets database that stores information about many different types of animals. Each animal type could potentially be represented by a different table.</span>

**Define what a database table is**

- <span id="04ae">Within a database, a table stores one specific kind of information.</span>
- <span id="3878">The records (entries) on these tables can be connected to records on other tables through the use of foreign keys</span>
- <span id="d6f9">In our pets database, we could have a dogs table, with individual records</span>

**Describe the purpose of a primary key**

- <span id="4d0e">A primary key is used in the database as a unique identifier for the table.</span>
- <span id="8fb0">We often use an id field that simply increments with each entry. The incrementing ensures that each record has a unique identifier, even if their are other fields of the record that are repeated (two people with the same name would still need to have a unique identifier, for example).</span>
- <span id="8876">With a unique identifier, we can easily connect records within the table to records from other tables.</span>

**Describe the purpose of a foreign key**

- <span id="cf54">A foreign key is used as the connector from this record to the primary key of another table s record.</span>
- <span id="f397">In our pets example, we can imagine two tables to demonstrate: a table to represent cats and a table to represent toys. Each of these tables has a primary key of id that is used as the unique identifier. In order to make a connection between a toy and a cat, we can add another field to the cat table called owner_id , indicating that it is a foreign key for the cat table. By setting a toy s owner_id to the same value as a particular cat s id , we can indicate that the cat is the owner of that toy.</span>

**Describe how to properly name things in PostgreSQL**

- <span id="d6e6">Names within postgres should generally consist of only lowercase letters, numbers, and underscores.</span>
- <span id="0fb3">Tables within a database are plural by convention, so a table for cats would typically be cats and office locations would be office_locations (all lowercase, underscores to replace spaces, plural)</span>

**Connect to an instance of PostgreSQL with the command line tool psql**

- <span id="1b7f">The psql command by default will try to connect to a database and username that matches your system s username</span>
- <span id="1454">We connect to a different database by providing an argument to the psql command</span>
- <span id="3439">psql pets</span>
- <span id="fb37">To connect with a different username we can use the -U flag followed by the username we would like to use. To connect to the pets database as pets_user</span>
- <span id="d357">psql -U pets_user pets</span>
- <span id="e139">If there is a password for the user, we can tell psql that we would like a prompt for the password to show up by using the -W flag.</span>
- <span id="8709">psql -U pets_user -W pets (the order of our flags doesn t matter, as long as any arguments associated with them are together, such as pets_user directly following -U in this example)</span>

**Identify whether a user is a normal user or a superuser by the prompt in the psql shell**

- <span id="8ff5">You can tell if you are logged in as a superuser or normal user by the prompt in the terminal.</span>
- <span id="de97">If the prompt shows =&gt;, the user is a normal user</span>
- <span id="7ce3">If the prompt show =\#, the user is a superuser</span>

**Create a user for the relational database management system**

- <span id="f4dc">Within psql, we can create a user with the CREATE USER {username} {WITH options} command.</span>
- <span id="7eda">The most common options we ll want to use are WITH PASSWORD ‘mypassword’ to provide a password for the user we are creating, CREATEDB to allow the user to create new databases, or SUPERUSER to create a user with all elevated permissions.</span>

**Create a database in the database management system**

- <span id="3fff">We can use the command CREATE DATABASE {database name} {options} inside psql to create a new database.</span>
- <span id="7d2f">A popular option we may utilize is WITH OWNER {owner name} to set another user as the owner of the database we are making.</span>

**Configure a database so that only the owner (and superusers) can connect to it**

- <span id="1a73">We can GRANT and REVOKE privileges from a database to users or categories of users.</span>
- <span id="8795">In order to remove connection privileges to a database from the public we can use REVOKE CONNECT ON DATABASE {db_name} FROM PUBLIC;, removing all public connection access.</span>
- <span id="ee98">If we wanted to grant it back, or to a specific user, we could similarly do GRANT CONNECT ON DATABASE {db_name} FROM {specific user, PUBLIC, etc.};</span>

**View a list of databases in an installation of PostgreSQL**

- <span id="2111">To list all databases we can use the \\l or \\list command in psql.</span>

**Create tables in a database**

    CREATE TABLE {table name} (
    {columnA} {typeA},
    {columnB} {typeB},
    etc…
    );

- <span id="a2fc">The whitespace does not matter. Creating the SQL statements on multiple lines is easier to read, but just like JavaScript, they can be presented differently.</span>
- <span id="a203">One common issue is that SQL does not like trailing commas, so the last column cannot have a comma after its type in this example.</span>

**View a list of tables in a database**

- <span id="964a">To list all database tables, use the \\dt command.</span>

**Identify and describe the common data types used in PostgreSQL**

- <span id="a2fd">There are many different data types that we can use in our tables, here are some common examples:</span>
- <span id="1d53">SERIAL: autoincrementing, very useful for IDs</span>
- <span id="78ce">VARCHAR(n): a string with a character limit of n</span>
- <span id="2e02">TEXT: doesn t have character limit, but less performant</span>
- <span id="c20e">BOOLEAN: true/false</span>
- <span id="d525">SMALLINT: signed two-byte integer (-32768 to 32767)</span>
- <span id="6b96">INTEGER: signed four-byte integer (standard)</span>
- <span id="fa38">BIGINT: signed eight-byte integer (very large numbers)</span>
- <span id="aa0c">NUMERIC: or DECIMAL, can store exact decimal values</span>
- <span id="1fb6">TIMESTAMP: date and time</span>

**Describe the purpose of the UNIQUE and NOT NULL constraints, and create columns in database tables that have them**

- <span id="377b">In addition to the data type, we can provide flags for constraints to place on our column data.</span>
- <span id="bda2">The UNIQUE flag indicates that the data for the column must not be repeated.</span>
- <span id="e14c">By default we can create entries in our tables that are missing data from columns. When creating a pet, maybe we don t provide an age because we don t know it, for example. If we want to require that the data be present in order to create a new record, we can indicate that column must be NOT NULL.</span>
- <span id="6745">In the example below, we are requiring our pets to have unique names and for them to be present (both UNIQUE and NOT NULL). We have no such constraints on the age column, allowing repetition of ages or their complete absence.</span>

<!-- -->

    CREATE TABLE pets (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) UNIQUE NOT NULL,
    age SMALLINT
    );

**Create a primary key for a table**

- <span id="da50">When creating a table we can indicate the primary key by passing in the column name to parentheses like so:</span>

<!-- -->

    CREATE TABLE people (
    id SERIAL,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    PRIMARY KEY (id)
    );

- <span id="4871">We could have also used the PRIMARY KEY flag on the column definition itself:</span>

<!-- -->

    CREATE TABLE people (
    id SERIAL PRIMARY KEY,
    first_name VARCHAR(50),
    last_name VARCHAR(50)
    );

**Create foreign key constraints to relate tables**

- <span id="e576">In our table definition, we can use the line FOREIGN KEY (foreign_key_stored_in_this_table) REFERENCE {other table} ({other_tables_key_name}) to connect two tables.</span>
- <span id="4c08">This is probably easier to see in an example:</span>

<!-- -->

    CREATE TABLE people (
    id SERIAL PRIMARY KEY,
    first_name VARCHAR(50),
    last_name VARCHAR(50)
    );

    CREATE TABLE pets (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255),
    age SMALLINT,
    person_id INTEGER,
    FOREIGN KEY (person_id) REFERENCES people (id)
    );

**SQL is not case sensitive for its keywords but is for its entity names**

- <span id="7749">Exactly as the LO states, CREATE TABLE and create table are interpreted the same way. Using capitalization is a good convention in order to distinguish your keywords.</span>
- <span id="7d1b">The entity names that we use ARE case-sensitive, however. So a table named pets is unique from a table named Pets. In general, we prefer to use all lowercase for our entities to avoid any of this confusion.</span>

**SQL**

1. How to use the SELECT … FROM … statement to select data from a single table

- <span id="9202">Supply the column names in the SELECT clause. If we want all columns, we can also use \*</span>
- <span id="9fdc">Supply the table names in the FROM clause</span>

— Selects all columns from the friends table

    SELECT
    *
    FROM
    friends;

— Selects the first_name column from the friends table (remember whitespace is ignored)  
SELECT name  
FROM friends;

- <span id="ef22">Sometimes we may need to specify what table we are selecting a column from, particulurly if we had joined multiple tables together.</span>

— Notice here we are indicating that we want the “name” field from the “friends” table as well as the “name” field from the “puppies” table. We indicate the table name by table.column  
 — We are also aliasing these fields with the AS keyword so that our returned results have friend_name and puppy_name as field headers

    SELECT
    friends.name AS friend_name , puppies.name AS puppy_name
    FROM
    friends
    JOIN
    puppies ON friends.puppy_id = puppies.id

**How to use the WHERE clause on SELECT, UPDATE, and DELETE statements to narrow the scope of the command**

- <span id="6a59">The WHERE clause allows us to select or apply actions to records that match specific criteria instead of to a whole table.</span>
- <span id="7ec8">We can use WHERE with a couple of different operators when making our comparison</span>
- <span id="70eb">WHERE {column} = {value} provides an exact comparison</span>
- <span id="79bf">WHERE {column} IN ({value1}, {value2}, {value3}, etc.) matches any provided value in the IN statement. We can make this more complex by having a subquery inside of the parentheses, having our column match any values within the returned results.</span>
- <span id="150e">WHERE {column} BETWEEN {value1} AND {value2} can check for matches between two values (numeric ranges)</span>
- <span id="9077">WHERE {column} LIKE {pattern} can check for matches to a string. This is most useful when we use the wildcard %, such as WHERE breed LIKE ‘%Shepherd’, which will match any breed that ends in Shepherd</span>
- <span id="4a87">The NOT operator can also be used for negation in the checks.</span>
- <span id="db35">Mathematical operators can be used when performing calculations or comparisons within a query as well, such as</span>

<!-- -->

    SELECT name, breed, weight_lbs FROM puppies WHERE weight_lbs > 50; — OR SELECT name, breed, age_yrs FROM puppies WHERE age_yrs * 10 = 5;

**How to use the JOIN keyword to join two (or more) tables together into a single virtual table**

- <span id="a391">When we want to get information from a related table or do querying based on related table values, we can join the connected table by comparing the foreign key to where it lines up on the other table:</span>

— Here we are joining the puppies table on to the friends table. We are specifying that the comparison we should make is the foreign key puppy_id on the friends table should line up with the primary key id on the puppies table.

    SELECT
    *
    FROM
    friends
    JOIN
    puppies ON friends.puppy_id = puppies.id

**How to use the INSERT statement to insert data into a table**

- <span id="b3e7">When a table is already created we can then insert records into it using the INSERT INTO keywords.</span>
- <span id="d4d3">We provide the name of the table that we would like to add records to, followed by the VALUES keyword and each record we are adding. Here s an example:</span>

— We are providing the table name, then multiple records to insert  
 — The values are listed in the order that they are defined on the table

    INSERT INTO table_name
    VALUES
    (column1_value, colum2_value, column3_value),
    (column1_value, colum2_value, column3_value),
    (column1_value, colum2_value, column3_value);

- <span id="123c">We can also specify columns when we are inserting data. This makes it clear which fields we are providing data for and allows us to provide them out of order, skip null or default values, etc.</span>

— In this example, we want to use the default value for id since it is autoincremented, so we provide DEFAULT for this field

    INSERT INTO friends (id, first_name, last_name)
    VALUES
    (DEFAULT, ‘Amy’, ‘Pond’);

— Alternatively, we can leave it out completely, since the default value will be used if none is provided

    INSERT INTO friends (first_name, last_name)
    VALUES
    (‘Rose’, ‘Tyler’),
    (‘Martha’, ‘Jones’),
    (‘Donna’, ‘Noble’),
    (‘River’, ‘Song’);

**How to use an UPDATE statement to update data in a table**

- <span id="8e80">The UPDATE keyword can be used to find records and change their values in our database.</span>
- <span id="91b5">We generally follow the pattern of UPDATE {table} SET {column} = {new value} WHERE {match condition};.</span>
- <span id="5fff">Without a condition to narrow our records down, we will update every record in the table, so this is an important thing to double check!</span>
- <span id="cdee">We can update multiple fields as well by specifying each column in parentheses and their associated new values: UPDATE {table} SET ({column1}, {column2}) = ({value1}, {value2}) WHERE {match condition};</span>

— Updates the pet with id of 4 to change their name and breed

    UPDATE
    pets
    SET
    (name, breed) = (‘Floofy’, ‘Fluffy Dog Breed’) WHERE id = 4;

**How to use a DELETE statement to remove data from a table**

- <span id="1c5e">Similar to selecting records, we can delete records from a table by specifying what table we are deleting from and what criteria we would like to match in order to delete.</span>
- <span id="1b25">We follow the general structure DELETE FROM {table} WHERE {condition};</span>
- <span id="0e74">The condition here is also very important! Without a condition, all records match and will be deleted.</span>

— Deletes from the pets table any record that either has a name Floofy, a name Doggo, or an id of 3.

    DELETE FROM
    pets
    WHERE
    name IN (‘Floofy’, ‘Doggo’) OR id = 3;

**How to use a seed file to populate data in a database**

- <span id="687c">Seed files are a great way for us to create records that we want to start our database out with.</span>
- <span id="80f6">Instead of having to individually add records to our tables or manually entering them in psql or postbird, we can create a file that has all of these records and then just pass this file to psql to run.</span>
- <span id="28da">Seed files are also great if we ever need to reset our database. We can clear out any records that we have by dropping all of our tables, then just run our seed files to get it into a predetermined starting point. This is great for our personal projects, testing environments, starting values for new tables we create, etc.</span>
- <span id="22c5">There are two main ways we can use a seed file with psql, the &lt; and the | operators. They perform the same function for us, just in slightly different orders, taking the content of a .sql file and executing in within the psql environment:</span>
- <span id="19c8">psql -d {database} &lt; {sql filepath}</span>
- <span id="7ec0">cat {sql filepath} | psql -d {database}</span>

**SQL (continued)**

**How to perform relational database design**

- <span id="8204">Steps to Designing the Database:</span>
- <span id="0276">Define the entities. What data are are you storing, what are the fields for each entity?</span>
- <span id="cd73">You can think of this in similar ways to OOP (object oriented programming).</span>
- <span id="0cf7">If you wanted to model this information using classes, what classes would you make? Those are generally going to be the tables that are created in your database.</span>
- <span id="57f4">The attributes of your classes are generally going to be the fields/columns that we need for each table.</span>
- <span id="0681">Identify primary keys. Most of the time these will be ids that you can generate as a serial field, incrementing with each addition to the database.</span>
- <span id="99da">Establish table relationships. Connect related data together with foreign keys. Know how we store these keys in a one-to-one, one-to-many, or many-to-many relationship.</span>
- <span id="c8c4">With a one-to-one or one-to-many relationship, we are able to use a foreign key on the table to indicate the other specific record that it is connected to.</span>
- <span id="2e56">With a many-to-many relationship, each record could be connected to multiple records, so we have to create a join table to connect these entities. A record on this join table connects a record from one table to a record from another table.</span>

**How to use transactions to group multiple SQL commands into one succeed or fail operation**

- <span id="6bfa">We can define an explicit transaction using BEGIN and ending with either COMMIT or ROLLBACK.</span>
- <span id="0c34">If any command inside the block fails, everything will be rolled back. We can also specify that we want to roll back at the end of the block instead of committing. We saw that this can be useful when analyzing operations that would manipulate our database.</span>

<!-- -->

    BEGIN;
    UPDATE accounts SET balance = balance — 100.00
    WHERE name = ‘Alice’;
    UPDATE branches SET balance = balance — 100.00
    WHERE name = (SELECT branch_name FROM accounts WHERE name = ‘Alice’);
    UPDATE accounts SET balance = balance + 100.00
    WHERE name = ‘Bob’;
    UPDATE branches SET balance = balance + 100.00
    WHERE name = (SELECT branch_name FROM accounts WHERE name = ‘Bob’);
    COMMIT;

    BEGIN;
    EXPLAIN ANALYZE
    UPDATE cities
    SET city = ‘New York City’
    WHERE city = ‘New York’;
    ROLLBACK;

**How to apply indexes to tables to improve performance**

- <span id="704c">An index can help optimize queries that we have to run regularly. If we are constantly looking up records in a table by a particular field (such as username or phone number), we can add an index in order to speed up this process.</span>
- <span id="142a">An index maintains a sorted version of the field with a reference to the record that it points to in the table (via primary key). If we want to find a record based on a field that we have an index for, we can look through this index in a more efficient manner than having to scan through the entire table (generally O(log n) since the index is sorted, instead of O(n) for a sequential scan).</span>
- <span id="2c8f">To add an index to a field we can use the following syntax:</span>

<!-- -->

    CREATE INDEX index_name ON table_name (column_name);

- <span id="a6d3">To drop an index we can do the following:</span>

<!-- -->

    DROP INDEX index_name

- <span id="12fa">Making an index is not always the best approach. Indices allow for faster lookup, but slow down record insertion and the updating of associated fields, since we not only have to add the information to the table, but also manipulate the index.</span>
- <span id="0ef6">We generally wouldn t care about adding an index if:</span>
- <span id="8833">The tables are small</span>
- <span id="b3b0">We are updating the table frequently, especially the associated columns</span>
- <span id="5ebd">The column has many NULL values</span>

**Explain what the EXPLAIN command is used for:**

- <span id="36da">EXPLAIN gives us information about how a query will run (the query plan)</span>
- <span id="482c">It gives us an idea of how our database will search for data as well as a qualitative comparitor for how expensive that operation will be. Comparing the cost of two queries will tell us which one is more efficient (lower cost).</span>
- <span id="c7c7">We can also use the ANALYZE command with EXPLAIN, which will actually run the specified query. Doing so gives us more detailed information, such as the milliseconds it took our query to execute as well as specifics like the exact number of rows filtered and returned.</span>

1. Demonstrate how to install and use the node-postgres library and its Pool class to query a PostgreSQL-managed database

- <span id="8f73">We can add the node-postgres library to our application with npm install pg. From there we will typically use the Pool class associated with this library. That way we can run many SQL queries with one database connection (as opposed to Client, which closes the connection after a query).</span>

<!-- -->

    const { Pool } = require(‘pg’);

// If we need to specify a username, password, or database, we can do so when we create a Pool instance, otherwise the default values for logging in to psql are used:

    const pool = new Pool({ username: ‘<<username>>’, password: ‘<<password>>’, database: ‘<<database>>’})

- <span id="a267">The query method on the Pool instance will allow us to execute a SQL query on our database. We can pass in a string that represents the query we want to run</span>

<!-- -->

    const allAirportsSql = `
    SELECT id, city_id, faa_id, name
    FROM airports;
    `;

    async function selectAllAirports() {
    const results = await pool.query(allAirportsSql);
    console.log(results.rows);
    pool.end(); // invoking end() will close our connection to the database
    }

selectAllAirports();

- <span id="edf8">The return value of this asynchronous function is an object with a rows key that points to an array of objects, each object representing a record with field names as keys.</span>

**Explain how to write prepared statements with placeholders for parameters of the form $1 , $2 , and so on**

- <span id="ee72">The prepared statement (SQL string that we wrote) can also be made more dynamic by allowing for parameters to be passed in.</span>
- <span id="3b64">The Pool instance s query function allows us to pass a second argument, an array of parameters to be used in the query string. The location of the parameter substitutions are designated with $1, $2, etc., to signify the first, second, etc., arguments.</span>

<!-- -->

    const airportsByNameSql = `
    SELECT name, faa_id
    FROM airports
    WHERE UPPER(name) LIKE UPPER($1)
    `;

async function selectAirportsByName(name) {  
const results = await pool.query(airportsByNameSql, \[ \`%${name}%\` \]);  
console.log(results.rows);  
pool.end(); // invoking end() will close our connection to the database  
}

    // Get the airport name from the command line and store it
    // in the variable “name”. Pass that value to the
    // selectAirportsByName function.
    const name = process.argv[2];
    // console.log(name);
    selectAirportsByName(name);

**ORM**

1. How to install, configure, and use Sequelize, an ORM for JavaScript

- <span id="0e86">To start a new project we use our standard npm initialize statement</span>
- <span id="7bf0">npm init -y</span>
- <span id="564b">Add in the packages we will need (sequelize, sequelize-cli, and pg)</span>
- <span id="9c9b">npm install sequelize@⁵.0.0 sequelize-cli@⁵.0.0 pg@⁸.0.0</span>
- <span id="0b1c">Initialize sequelize in our project</span>
- <span id="8052">npx sequelize-cli init</span>
- <span id="d03e">Create a database user with credentials we will use for the project</span>
- <span id="bbc8">psql</span>
- <span id="caca">CREATE USER example_user WITH PASSWORD ‘badpassword’</span>
- <span id="72ab">Here we can also create databases since we are already in postgres</span>

<!-- -->

    CREATE DATABASE example_app_development WITH OWNER example_user

    CREATE DATABASE example_app_test WITH OWNER example_user

    CREATE DATABASE example_app_production WITH OWNER example_user

- <span id="ae27">If we don t create these databases now, we could also create them after we make our changes to our config file. If we take this approach, we need to make sure our user that we created has the CREATEDB option when we make them, since sequelize will attempt to make the databases with this user. This other approach would look like:</span>
- <span id="f6a3">In psql: CREATE USER example_user WITH PASSWORD ‘badpassword’ CREATEDB</span>
- <span id="45ac">In terminal: npx sequelize-cli db:create</span>
- <span id="cff2">Double check that our configuration file matches our username, password, database, dialect, and seederStorage (these will be filled out for you in an assessment scenario):</span>

<!-- -->

    {
    “development”: {
    “username”: “sequelize_recipe_box_app”,
    “password”: “HfKfK79k”,
    “database”: “recipe_box_development”,
    “host”: “127.0.0.1”,
    “dialect”: “postgres”,
    “seederStorage”: “sequelize”
    },
    “test”: {
    “username”: “sequelize_recipe_box_app”,
    “password”: “HfKfK79k”,
    “database”: “recipe_box_test”,
    “host”: “127.0.0.1”,
    “dialect”: “postgres”,
    “seederStorage”: “sequelize”
    },
    “production”: {
    “username”: “sequelize_recipe_box_app”,
    “password”: “HfKfK79k”,
    “database”: “recipe_box_production”,
    “host”: “127.0.0.1”,
    “dialect”: “postgres”,
    “seederStorage”: “sequelize”
    }
    }

1. How to use database migrations to make your database grow with your application in a source-control enabled way

**Migrations**

- <span id="3710">In order to make new database tables and sequelize models that reflect them, we want to generate a migration file and model file using model:generate</span>

<!-- -->

    npx sequelize-cli model:generate — name Cat — attributes “firstName:string,specialSkill:string”

- <span id="bc91">Here we are creating a migration file and a model file for a Cat. We are specifying that we want this table to have fields for firstName and specialSkill. Sequelize will automatically make fields for an id, createdAt, and updatedAt, as well, so we do not need to specify these.</span>
- <span id="4d04">Once our migration file is created, we can go in and edit any details that we need to. Most often we will want to add in database constraints such as allowNull: false, adding a uniqueness constraint with unique: true, adding in character limits to fields such as type: Sequelize.STRING(100), or specifying a foreign key with references to another table references: { model: ‘Categories’ }.</span>
- <span id="ca79">After we make any necessary changes to our migration file, we need to perform the migration, which will run the SQL commands to actually create the table.</span>

<!-- -->

    npx sequelize-cli db:migrate

- <span id="78a8">This command runs any migration files that have not been previously run, in the order that they were created (this is why the timestamp in the file name is important)</span>
- <span id="0790">If we realize that we made a mistake after migrating, we can undo our previous migration, or all of our migrations. After undoing them, we can make any changes necessary to our migration files (They won t be deleted from the undo, so we don t need to generate anything! Just make the necessary changes to the files that already exist and save the files.). Running the migrations again will make the tables with the updates reflected.</span>

<!-- -->

    npx sequelize-cli db:migrate:undo

    npx sequelize-cli db:migrate:undo:all

**Models Validations and Associations**

- <span id="a4dd">In addition to the migration files, our model:generate command also created a model file for us. This file is what allows sequelize to transform the results of its SQL queries into useful JavaScript objects for us.</span>
- <span id="5c70">The model is where we can specify a validation that we want to perform before trying to run a SQL query. If the validation fails, we can respond with a message instead of running the query, which can be an expensive operation that we know won t work.</span>

<!-- -->

    // Before we make changes, sequelize generates the type that this field represents specification:
    DataTypes.TEXT
    // We can replace the generated format with an object to specify not only the type, but the validations that we want to implement. The validations can also take in messages the respond with on failure and arguments.
    specification: {
        type: DataTypes.TEXT,
        validate: {
            notEmpty: {
                msg: 'The specification cannot be empty'
            },
            len: {
                args: [10, 100]
                msg: 'The specifcation must be between 10 and 100 characters'
            }
        }
    }

- <span id="94ef">Another key part of the model file is setting up our associations. We can use the belongsTo, hasMany, and belongsToMany methods to set up model-level associations. Doing so is what creates the helpful functionality like addOwner that we saw in the pets example, a function that automatically generates the SQL necessary to create a petOwner record and supplies the appropriate petId and ownerId.</span>
- <span id="e5fc">In a one-to-many association, we need to have a belongsTo association on the many side, and a hasMany association on the one side:</span>
- <span id="21c2">Instruction.belongsTo(models.Recipe, { foreignKey: ‘recipeId’ });</span>
- <span id="6e6b">Recipe.hasMany(models.Instruction, { foreignKey: ‘recipeId’ });</span>
- <span id="7d6a">In a many-to-many association, we need to have a belongsToMany on each side of the association. We generally specify a columnMapping object to show the association more clearly:</span>

<!-- -->

    // In our Owner model

    // To connect this Owner to a Pet through the PetOwner

    const columnMapping = {

    through: ‘PetOwner’,

    // joins table

    otherKey: ‘petId’,

    // key that connects to other table we have a many association with foreignKey: ‘ownerId’

    // our foreign key in the joins table

    }

    Owner.belongsToMany( models.Pet, columnMapping );

    // In our Pet model

    // To connect this Pet to an Owner through the PetOwner

    const columnMapping = { through: ‘PetOwner’,

    // joins table

    otherKey: ‘ownerId’,

    // key that connects to other table we have a many association with

    foreignKey: ‘petId’

    // our foreign key in the joins table

    }

    Pet.belongsToMany( models.Owner, columnMapping );

### **How to perform CRUD operations with Sequelize**

- <span id="fc1a">Seed Files</span>
- <span id="ad49">Seed files can be used to populate our database with starter data.</span>
- <span id="9058">npx sequelize-cli seed:generate — name add-cats</span>
- <span id="d2cf">up indicates what to create when we seed our database, down indicates what to delete if we want to unseed the database.</span>
- <span id="d605">For our up, we use the queryInterface.bulkInsert() method, which takes in the name of the table to seed and an array of objects representing the records we want to create:</span>

<!-- -->

    up: (queryInterface, Sequelize) => {
        return queryInterface.bulkInsert('<<TableName>>', [{
            field1: value1a,
            field2: value2a
        }, {
            field1: value1b,
            field2: value2b
        }, {
            field1: value1c,
            field2: value2c
        }]);
    }

- <span id="0cb9">For our down, we use the queryInterface.bulkDelete() method, which takes in the name of the table and an object representing our WHERE clause. Unseeding will delete all records from the specified table that match the WHERE clause.</span>

<!-- -->

    // If we want to specify what to remove:
    down: (queryInterface, Sequelize) => {
    return queryInterface.bulkDelete(‘<<TableName>>’, {
    field1: [value1a, value1b, value1c], //…etc.
    });
    };
    // If we want to remove everything from the table:
    down: (queryInterface, Sequelize) => {
    return queryInterface.bulkDelete(‘<<TableName>>’, null, {});
    };

- <span id="c9e3">Running npx sequelize-cli db:seed:all will run all of our seeder files.</span>
- <span id="8778">npx sequelize-cli db:seed:undo:all will undo all of our seeding.</span>
- <span id="d655">If we omit the :all we can run specific seed files</span>
- <span id="4788">Inserting with Build and Create</span>
- <span id="fc2d">In addition to seed files, which we generally use for starter data, we can create new records in our database by using build and save, or the combined create</span>
- <span id="3807">Use the .build method of the Cat model to create a new Cat instance in index.js</span>

<!-- -->

    // Constructs an instance of the JavaScript `Cat` class. **Does not
    // save anything to the database yet**. Attributes are passed in as a
    // POJO.
    const newCat = Cat.build({
        firstName: 'Markov',
        specialSkill: 'sleeping',
        age: 5
    });
    // This actually creates a new `Cats` record in the database. We must
    // wait for this asynchronous operation to succeed.
    await newCat.save();
    // This builds and saves all in one step. If we don't need to perform any operations on the instance before saving it, this can optimize our code.
    const newerCat = await Cat.create({
        firstName: 'Whiskers',
        specialSkill: 'sleeping',
        age: 2
    })

**Updating Records**

- <span id="4ecc">When we have a reference to an instance of a model (i.e. after we have queried for it or created it), we can update values by simply reassigning those fields and using the save method</span>

**Deleting Records**

- <span id="606a">When we have a reference to an instance of a model, we can delete that record by using destroy</span>
- <span id="be30">const cat = await Cat.findByPk(1); // Remove the Markov record. await cat.destroy();</span>
- <span id="0b7f">We can also call destroy on the model itself. By passing in an object that specifies a where clause, we can destroy all records that match that query</span>
- <span id="5f9f">await Cat.destroy({ where: { specialSkill: ‘jumping’ } });</span>

**How to query using Sequelize**

**findAll**

    const cats = await Cat.findAll();
    // Log the fetched cats.
    // The extra arguments to stringify are a replacer and a space respectively
    // Here we're specifying a space of 2 in order to print more legibly
    // We don't want a replacer, so we pass null just so that we can pass a 3rd argument
    console.log(JSON.stringify(cats, null, 2));

**WHERE clause**

- <span id="e68d">Passing an object to findAll can add on clauses to our query</span>
- <span id="ec33">The where key takes an object as a value to indicate what we are filtering by</span>
- <span id="aa61">{ where: { field: value } } =&gt; WHERE field = value</span>

<!-- -->

    const cats = await Cat.findAll({ where: { firstName: “Markov” } }); console.log(JSON.stringify(cats, null, 2));

**OR in the WHERE clause**

- <span id="755e">Using an array for the value tells sequelize we want to match any of these values</span>

{ where: { field: \[value1, value2\] } =&gt; WHERE field IN (value1, value2)

    const cats = await Cat.findAll({ where: { firstName: [“Markov”, “Curie”] } });const cats = await Cat.findAll({
        where: {
            firstName: "Markov",
            age: 4
        }
    });
    console.log(JSON.stringify(cats, null, 2));

    console.log(JSON.stringify(cats, null, 2));

**AND in the WHERE clause**

- <span id="afbb">Providing additional key/value pairs to the where object indicates all filters must match</span>
- <span id="45a1">{ where: { field1: value1, field2: value2 } } =&gt; WHERE field1 = value1 AND field2 = value2</span>

### Sequelize Op operator

- <span id="dd6a">By requiring Op from the sequelize library we can provide more advanced comparison operators</span>
- <span id="0a01">const { Op } = require(“sequelize”);</span>
- <span id="8936">Op.ne: Not equal operator</span>

<!-- -->

    const cats = await Cat.findAll({
        where: {
            firstName: {
                // All cats where the name is not equal to "Markov"
                // We use brackets in order to evaluate Op.ne and use the value as the key
                [Op.ne]: "Markov"
            },
        },
    });
    console.log(JSON.stringify(cats, null, 2));

### Op.and: and operator

    const cats = await Cat.findAll({
        where: {
            // The array that Op.and points to must all be true
            // Here, we find cats where the name is not "Markov" and the age is 4
            [Op.and]: [{
                firstName: {
                    [Op.ne]: "Markov"
                }
            }, {
                age: 4
            }, ],
        },
    });
    console.log(JSON.stringify(cats, null, 2));

### Op.or: or operator

    const cats = await Cat.findAll({
        where: {
            // One condition in the array that Op.or points to must be true
            // Here, we find cats where the name is "Markov" or where the age is 4
            [Op.or]: [{
                firstName: "Markov"
            }, {
                age: 4
            }, ],
        },
    });
    console.log(JSON.stringify(cats, null, 2));

Op.gt and Op.lt: greater than and less than operators

const cats = await Cat.findAll({ where: { // Find all cats where the age is greater than 4 age: { \[Op.gt\]: 4 }, } }, }); console.log(JSON.stringify(cats, null, 2));

#### Ordering results

- <span id="4ee4">Just like the where clause, we can pass an order key to specify we want our results ordered</span>
- <span id="46a6">The key order points to an array with the fields that we want to order by</span>
- <span id="ba7f">By default, the order is ascending, just like standard SQL. If we want to specify descending, we can instead use a nested array with the field name as the first element and DESC as the second element. (We could also specify ASC as a second element in a nested array, but it is unnecessary as it is default)</span>
- <span id="f9f9">const cats = await Cat.findAll({ // Order by age descending, then by firstName ascending if cats have the same age order: \[\[“age”, “DESC”\], “firstName”\], }); console.log(JSON.stringify(cats, null, 2));</span>

<!-- -->

    // Get a reference to the cat record that we want to update (here just the cat with primary key of 1)
    const cat = await Cat.findByPk(1);
    // Change cat's attributes.
    cat.firstName = "Curie";
    cat.specialSkill = "jumping";
    cat.age = 123;
    // Save the new name to the database.
    await cat.save();

- <span id="c46e">Limiting results</span>
- <span id="8e6f">We can provide a limit key in order to limit our results to a specified number</span>

<!-- -->

    const cats = await Cat.findAll({
        order: [
            ["age", "DESC"]
        ],
        // Here we are limiting our results to one record. It will still return an array, just with one object inside. We could have said any number here, the result is always an array.
        limit: 1,
    });
    console.log(JSON.stringify(cats, null, 2));

### findOne

- <span id="0151">If we only want one record to be returned we can use findOne instead of findAll</span>
- <span id="2a32">If multiple records would have matched our findOne query, it will return the first record</span>
- <span id="4c25">Unlike findAll, findOne will return the object directly instead of an array. If no records matched the query it will return null.</span>

<!-- -->

    // finds the oldest cat const cat = await Cat.findOne({ order: [[“age”, “DESC”]], }); console.log(JSON.stringify(cat, null, 2));

- <span id="3bc7">**Querying with Associations**</span>

We can include associated data by adding an include key to our options object

    const pet = Pet.findByPk(1, {
        include: [PetType, Owner]
    });
    console.log(pet.id, pet.name, pet.age, pet.petTypeId, pet.PetType.type, pet.Owners

We can get nested associations by having include point to an object that specifies which model we have an association with, then chaining an association on with another include

**How to perform data validations with Sequelize**

- <span id="e654">See the database migrations section above.</span>
- <span id="9f26">In general, we add in a validate key to each field that we want validations for. This key points to an object that specifies all of the validations we want to make on that field, such as notEmpty, notNull, len, isIn, etc.</span>

<!-- -->

    specification: {
        type: DataTypes.TEXT,
        validate: {
            notEmpty: {
                msg: 'The specification cannot be empty'
            },
            len: {
                args: [10, 100]
                msg: 'The specifcation must be between 10 and 100 characters'
            }
        }
    }

**How to use transactions with Sequelize**

- <span id="1059">We can create a transaction block in order to make sure either all operations are performed or none of them are</span>
- <span id="a632">We use the .transaction method in order to create our block. The method takes in a callback with an argument to track our transaction id (typically just a simple tx variable).</span>
- <span id="79f9">All of our sequelize operations can be passed a transaction key on their options argument which points to our transaction id. This indicates that this operation is part of the transaction block and should only be executed in the database when the whole block executes without error.</span>

<!-- -->

    async function main() {
        try {
            // Do all database access within the transaction.
            await sequelize.transaction(async (tx) => {
                // Fetch Markov and Curie's accounts.
                const markovAccount = await BankAccount.findByPk(
                    1, {
                        transaction: tx
                    },
                );
                const curieAccount = await BankAccount.findByPk(
                    2, {
                        transaction: tx
                    }
                );
                // No one can mess with Markov or Curie's accounts until the
                // transaction completes! The account data has been locked!
                // Increment Curie's balance by $5,000.
                curieAccount.balance += 5000;
                await curieAccount.save({
                    transaction: tx
                });
                // Decrement Markov's balance by $5,000.
                markovAccount.balance -= 5000;
                await markovAccount.save({
                    transaction: tx
                });
            });
        } catch (err) {
            // Report if anything goes wrong.
            console.log("Error!");
            for (const e of err.errors) {
                console.log(
                    `${e.instance.clientName}: ${e.message}`
                );
            }
        }
        await sequelize.close();
    }
    main();

---

### Sequelize Cheatsheet

#### Command Line

Sequelize provides utilities for generating migrations, models, and seed files. They are exposed through the `sequelize-cli` command.

#### Init Project

    $ npx sequelize-cli init

You must create a database user, and update the `config/config.json` file to match your database settings to complete the initialization process.

#### Create Database

    npx sequelize-cli db:create

#### Generate a model and its migration

    npx sequelize-cli model:generate --name <ModelName> --attributes <column1>:<type>,<column2>:<type>,...

#### Run pending migrations

    npx sequelize-cli db:migrate

#### Rollback one migration

    npx sequelize-cli db:migrate:undo

#### Rollback all migrations

    npx sequelize-cli db:migrate:undo:all

#### Generate a new seed file

    npx sequelize-cli seed:generate --name <descriptiveName>

#### Run all pending seeds

    npx sequelize-cli db:seed:all

#### Rollback one seed

    npx sequelize-cli db:seed:undo

#### Rollback all seeds

    npx sequelize-cli db:seed:undo:all

#### Migrations

### Create Table (usually used in the up() method)

    // This uses the short form for references
    return queryInterface.createTable(<TableName>, {
        <columnName>: {
            type: Sequelize.<type>,
            allowNull: <true|false>,
            unique: <true|false>,
            references: { model: <TableName> }, // This is the plural table name
                                                // that the column references.
        }
    });
    // This the longer form for references that is less confusing
    return queryInterface.createTable(<TableName>, {
        <columnName>: {
            type: Sequelize.<type>,
            allowNull: <true|false>,
            unique: <true|false>,
            references: {
                model: {
                    tableName: <TableName> // This is the plural table name
                }
            }
        }
    });

### Delete Table (usually used in the down() function)

    return queryInterface.dropTable(<TableName>);

### Adding a column

    return queryInteface.addColumn(<TableName>, <columnName>: {
        type: Sequelize.<type>,
        allowNull: <true|false>,
        unique: <true|false>,
        references: { model: <TableName> }, // This is the plural table name
                                            // that the column references.
    });

### Removing a column

    return queryInterface.removeColumn(<TableName>, <columnName>);

### Model Associations

### One to One between Student and Scholarship

`student.js`

    Student.hasOne(models.Scholarship, { foreignKey: 'studentId' });

`scholarship.js`

    Scholarship.belongsTo(models.Student, { foreignKey: 'studentId' });

### One to Many between Student and Class

`student.js`

    Student.belongsTo(models.Class, { foreignKey: 'classId' });

`class.js`

    Class.hasMany(models.Student, { foreignKey: 'classId' });

### Many to Many between Student and Lesson through StudentLessons table

`student.js`

    const columnMapping = {
        through: 'StudentLesson', // This is the model name referencing the join table.
        otherKey: 'lessonId',
        foreignKey: 'studentId'
    }
    Student.belongsToMany(models.Lesson, columnMapping);

`lesson.js`

    const columnMapping = {
        through: 'StudentLesson', // This is the model name referencing the join table.
        otherKey: 'studentId',
        foreignKey: 'lessonId'
    }
    Lesson.belongsToMany(models.Student, columnMapping);

### Inserting a new item

    // Way 1 - With build and save
    const pet = Pet.build({
        name: "Fido",
        petTypeId: 1
    });
    await pet.save();
    // Way 2 - With create
    const pet = await Pet.create({
        name: "Fido",
        petTypeId: 1
    });

### Updating an item

    // Find the pet with id = 1
    const pet = await Pet.findByPk(1);
    // Way 1
    pet.name = "Fido, Sr."
    await pet.save;
    // Way 2
    await pet.update({
        name: "Fido, Sr."
    });

### Deleting a single item

    // Find the pet with id = 1
    const pet = await Pet.findByPk(1);
    // Notice this is an instance method
    pet.destroy();

### Deleting multiple items

    // Notice this is a static class method
    await Pet.destroy({
        where: {
            petTypeId: 1 // Destorys all the pets where the petType is 1
        }
    });

### Query Format

### findOne

    await <Model>.findOne({
        where: {
            <column>: {
                [Op.<operator>]: <value>
            }
        },
    });

### findAll

    await <Model>.findAll({
        where: {
            <column>: {
                [Op.<operator>]: <value>
            }
        },
        include: <include_specifier>,
        offset: 10,
        limit: 2
    });

### findByPk

    await <Model>.findByPk(<primary_key>, {
        include: <include_specifier>
    });

### Eager loading associations with `include`

Simple include of one related model.

    await Pet.findByPk(1,  {
            include: PetType
        })

Include can take an array of models if you need to include more than one.

    await Pet.findByPk(1, {
            include: [Pet, Owner]
        })

Include can also take an object with keys `model` and `include`.  
This is in case you have nested associations.  
In this case Owner doesn't have an association with PetType, but  
Pet does, so we want to include PetType onto the Pet Model.

    await Owner.findByPk(1, {
            include: {
                model: Pet
                include: PetType
            }
        });

### toJSON method

The confusingly named toJSON() method does **not** return a JSON string but instead  
returns a POJO for the instance.

    // pet is an instance of the Pet class
    const pet = await Pet.findByPk(1);
    console.log(pet) // prints a giant object with
                     // tons of properties and methods
    // petPOJO is now just a plain old Javascript Object
    const petPOJO = pet.toJSON();
    console.log(petPOJO); // { name: "Fido", petTypeId: 1 }

### Common Where Operators

    const Op = Sequelize.Op
    [Op.and]: [{a: 5}, {b: 6}] // (a = 5) AND (b = 6)
    [Op.or]: [{a: 5}, {a: 6}]  // (a = 5 OR a = 6)
    [Op.gt]: 6,                // > 6
    [Op.gte]: 6,               // >= 6
    [Op.lt]: 10,               // < 10
    [Op.lte]: 10,              // <= 10
    [Op.ne]: 20,               // != 20
    [Op.eq]: 3,                // = 3
    [Op.is]: null              // IS NULL
    [Op.not]: true,            // IS NOT TRUE
    [Op.between]: [6, 10],     // BETWEEN 6 AND 10
    [Op.notBetween]: [11, 15], // NOT BETWEEN 11 AND 15
    [Op.in]: [1, 2],           // IN [1, 2]
    [Op.notIn]: [1, 2],        // NOT IN [1, 2]
    [Op.like]: '%hat',         // LIKE '%hat'
    [Op.notLike]: '%hat'       // NOT LIKE '%hat'
    [Op.iLike]: '%hat'         // ILIKE '%hat' (case insensitive) (PG only)
    [Op.notILike]: '%hat'      // NOT ILIKE '%hat'  (PG only)
    [Op.startsWith]: 'hat'     // LIKE 'hat%'
    [Op.endsWith]: 'hat'       // LIKE '%hat'
    [Op.substring]: 'hat'      // LIKE '%hat%'
    [Op.regexp]: '^[h|a|t]'    // REGEXP/~ '^[h|a|t]' (MySQL/PG only)
    [Op.notRegexp]: '^[h|a|t]' // NOT REGEXP/!~ '^[h|a|t]' (MySQL/PG only)
    [Op.iRegexp]: '^[h|a|t]'    // ~* '^[h|a|t]' (PG only)
    [Op.notIRegexp]: '^[h|a|t]' // !~* '^[h|a|t]' (PG only)
    [Op.like]: { [Op.any]: ['cat', 'hat']}

<figure><img src="https://cdn-images-1.medium.com/max/2560/1*IdBeXbBynFmQD7WwTNr7Hw.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/2560/1*bgZjuBly2EBDtGiCFaFoFw.png" class="graf-image" /></figure>

### Accessing the Data

You can access and query the data using the `findByPk`, `findOne`, and `findAll` methods. First, make sure you import the models in your JavaScript file. In this case, we are assuming your JavaScript file is in the root of your project and so is the models folder.

    const { Recipe, Ingredient, Instruction, MeasurementUnit } = require('./models');

The models folder exports each of the models that you have created. We have these four in our data model, so we will destructure the models to access each table individually. The associations that you have defined in each of your models will allow you to access data of related tables when you query your database using the `include` option.

If you want to find all recipes, for the recipe list, you would use the `findAll` method. You need to await this, so make sure your function is async.

    async function findAllRecipes() {

    return await Recipe.findAll();

    }

If you would like to include all the ingredients so you can create a shopping list for all the recipes, you would use `include`. This is possible because of the association you have defined in your Recipe and Ingredient models.

    async function getShoppingList() {

    return await Recipe.findAll({ include: [ Ingredient ] });

    }

If you only want to find one where there is chicken in the ingredients list, you would use `findOne` and `findByPk`.

    async function findAChickenRecipe() {

    const chickenRecipe = await Ingredient.findOne({

    where: {

    foodStuff: 'chicken'

    }

    });

    return await Recipe.findByPk(chickenRecipe.recipeId);

    }

### Data Access to Create/Update/Delete Rows

You have two options when you want to create a row in a table (where you are saving one record into the table). You can either `.build` the row and then `.save` it, or you can `.create` it. Either way it does the same thing. Here are some examples:

Let’s say we have a form that accepts the name of the recipe (for simplicity). When we get the results of the form, we can:

    const newRecipe = await Recipe.build({ title: 'Chicken Noodle Soup' });

    await newRecipe.save();

This just created our new recipe and added it to our Recipes table. You can do the same thing like this:

    await Recipe.create({ title: 'Chicken Noodle Soup' });

If you want to modify an item in your table, you can use `update`. Let's say we want to change the chicken noodle soup to chicken noodle soup with extra veggies, first we need to get the recipe, then we can update it.

    const modRecipe = await Recipe.findOne({ where: { title: 'Chicken Noodle Soup' } });

    await modRecipe.update({ title: 'Chicken Noodle Soup with Extra Veggies' });

To delete an item from your table, you will do the same kind of process. Find the recipe you want to delete and `destroy` it, like this:

    const deleteThis = await Recipe.findOne({ where: { title: 'Chicken Noodle Soup with Extra Veggies' } });

    await deleteThis.destroy();

**NOTE:** If you do not await these, you will receive a promise, so you will need to use `.then` and `.catch` to do more with the items you are accessing and modifying.

### Documentation

For the data types and validations in your models, here are the official docs. The sequelize docs are hard to look at, so these are the specific sections with just the lists:  
**Sequelize Data Types:** <a href="https://sequelize.org/v5/manual/data-types.html" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/data-types.html</em></a>  
**Validations:** <a href="https://sequelize.org/v5/manual/models-definition.html#validations" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/models-definition.html#validations</em></a>  
When you access the data in your queries, here are the operators available, again because the docs are hard to navigate, this is the specific section with the list of operators.  
**Operators:** <a href="https://sequelize.org/v5/manual/querying.html#operators" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/querying.html#operators</em></a>  
The documentation for building, saving, creating, updating and destroying is linked here, it does a pretty good job of explaining in my opinion, it just has a title that we have not been using in this course. When they talk about an instance, they mean an item stored in your table.  
**Create/Update/Destroy:** <a href="https://sequelize.org/v5/manual/instances.html" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/instances.html</em></a>

#### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

<a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br />
<em>There are tons of learning material on the Web The Front-End Checklist is an exhaustive list of all elements you need…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br />
<em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

Or Checkout my personal Resource Site:

(Under construction… may be broken at any time)

<a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br />
<em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 13, 2021](https://medium.com/p/8acb68284a98).

<a href="https://medium.com/@bryanguner/everything-you-need-to-know-about-relational-databases-sql-postgresql-and-sequelize-to-build-8acb68284a98" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Express APIs Part 2:

Overview

---

### Express APIs Part 2:

### Overview

`REST` is a generally agreed-upon set of principles and constraints. They are **recommendations**, not a standard.

    // inside /api/apiRoutes.js <- this can be place anywhere and called anything
    const express = require('express');

    // if the other routers are not nested inside /api then the paths would change
    const userRoutes = require('./users/userRoutes');
    const productRoutes = require('./products/productRoutes');
    const clientRoutes = require('./clients/clientRoutes');

    const router = express.Router(); // notice the Uppercase R

    // this file will only be used when the route begins with "/api"
    // so we can remove that from the URLs, so "/api/users" becomes simply "/users"
    router.use('/users', userRoutes);
    router.use('/products', productRoutes);
    router.use('/clients', clientRoutes);

    // .. and any other endpoint related to the user's resource

    // after the route has been fully configured, we then export it so it can be required where needed
    module.exports = router; // standard convention dictates that this is the last line on the file

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### Objective 1 — explain the role of a foreign key

### Overview

**Foreign keys** are a type of table field used for creating links between tables. Like **primary keys**, they are most often integers that identify (rather than store) data. However, whereas a primary key is used to id rows in a table, foreign keys are used to connect a record in one table to a record in a second table.

### Follow Along

Consider the following `farms` and `ranchers` tables.

<a href="https://www.notion.so/b88ebcd8fa3a4fa3a36cf99c939f6067" class="markup--anchor markup--p-anchor">Untitled</a>

<a href="https://www.notion.so/a4ccaec69c484ce0bcd03d2e8a83e489" class="markup--anchor markup--p-anchor">Untitled</a>

The `farm_id` in the `ranchers` table is an example of a `foreign key`. Each entry in the `farm_id` (foreign key) column corresponds to an `id` (primary key) in the `farms` table. This allows us to track which farm each rancher belongs to while keeping the tables normalized.

If we could only see the `ranchers` table, we would know that John, Jane, and Jen all work together and that Jim and Jay also work together. However, to know where any of them work, we would need to look at the `farms` table.

### Challenge

Open <a href="https://www.w3schools.com/sql/trysql.asp?filename=trysql_op_in" class="markup--anchor markup--p-anchor">SQLTryIT (Links to an external site.)</a>.

How many records in the products table belong to the category “confections”?

### Objective 2 — query data from multiple tables

Now that we understand the basics of querying data from a single table, let’s move on to selecting data from multiple tables using JOIN operations.

### Overview

We can use a `JOIN` to combine query data from multiple tables using a single `SELECT` statement.

There are different types of joins; some are listed below:

- <span id="9c7e">inner joins.</span>
- <span id="7cd3">outer joins.</span>
- <span id="96e6">left joins.</span>
- <span id="0e55">right joins.</span>
- <span id="d582">cross joins.</span>
- <span id="6716">non-equality joins.</span>
- <span id="b7f0">self joins.</span>

Using `joins` requires that the two tables of interest contain at least one field with shared information. For example, if a _departments_ table has an _id_ field, and an employee table has a _department_id_ field, and the values that exist in the _id_ column of the _departments_ table live in the _department_id_ field of the employee table, we can use those fields to join both tables like so:

    select * from employees
    join departments on employees.department_id = departments.id

This query will return the data from both tables for every instance where the `ON` condition is true. If there are employees with no value for department*id or where the value stored in the field does not correspond to an existing id in the* departments _table, then that record will NOT be returned. In a similar fashion, any records from the_ departments _table that don't have an employee associated with them will also be omitted from the results. Basically, if the_ id\* does not show as the value of department_id for an employee, it won't be able to join.

We can shorten the condition by giving the table names an alias. This is a common practice. Below is the same example using aliases, picking which fields to return and sorting the results:

    select d.id, d.name, e.id, e.first_name, e.last_name, e.salary
    from employees as e
    join departments as d
      on e.department_id = d.id
    order by d.name, e.last_name

Notice that we can take advantage of white space and indentation to make queries more readable.

There are several ways of writing joins, but the one shown here should work on all database management systems and avoid some pitfalls, so we recommend it.

The syntax for performing a similar join using Knex is as follows:

    db('employees as e')
      .join('departments as d', 'e.department_id', 'd.id')
      .select('d.id', 'd.name', 'e.first_name', 'e.last_name', 'e.salary')

### Follow Along

A good explanation of how the different types of joins can be seen <a href="https://www.w3resource.com/sql/joins/sql-joins.php" class="markup--anchor markup--p-anchor">in this article from w3resource.com (Links to an external site.)</a>.

### Challenge

Use <a href="https://www.w3schools.com/Sql/tryit.asp?filename=trysql_select_top" class="markup--anchor markup--p-anchor">this online tool (Links to an external site.)</a> to write the following queries:

- <span id="9ccf">list the products, including their category name.</span>
- <span id="b07f">list the products, including the supplier name.</span>
- <span id="7b08">list the products, including both the category name and supplier name.</span>

### What is SQL Joins?

An SQL JOIN clause combines rows from two or more tables. It creates a set of rows in a temporary table.

### How to Join two tables in SQL?

A JOIN works on two or more tables if they have at least one common field and have a relationship between them.

JOIN keeps the base tables (structure and data) unchanged.

### Join vs. Subquery

- <span id="eeea">JOINs are faster than a subquery and it is very rare that the opposite.</span>
- <span id="3b2e">In JOINs the RDBMS calculates an execution plan, that can predict, what data should be loaded and how much it will take to processed and as a result this process save some times, unlike the subquery there is no pre-process calculation and run all the queries and load all their data to do the processing.</span>
- <span id="84ce">A JOIN is checked conditions first and then put it into table and displays; where as a subquery take separate temp table internally and checking condition.</span>
- <span id="3002">When joins are using, there should be connection between two or more than two tables and each table has a relation with other while subquery means query inside another query, has no need to relation, it works on columns and conditions.</span>

### SQL JOINS: EQUI JOIN and NON EQUI JOIN

The are two types of SQL JOINS — EQUI JOIN and NON EQUI JOIN

1.  <span id="31e6">SQL EQUI JOIN :</span>

The SQL EQUI JOIN is a simple SQL join uses the equal sign(=) as the comparison operator for the condition. It has two types — SQL Outer join and SQL Inner join.

1.  <span id="d86b">SQL NON EQUI JOIN :</span>

The **SQL NON EQUI JOIN** is a join uses comparison operator other than the equal sign like &gt;, &lt;, &gt;=, &lt;= with the condition.

**SQL EQUI JOIN : INNER JOIN and OUTER JOIN**

The SQL EQUI JOIN can be classified into two types — INNER JOIN and OUTER JOIN

1.  <span id="c9b5">SQL INNER JOIN</span>

This type of EQUI JOIN returns all rows from tables where the key record of one table is equal to the key records of another table.

1.  <span id="6bc6">SQL OUTER JOIN</span>

This type of EQUI JOIN returns all rows from one table and only those rows from the secondary table where the joined condition is satisfying i.e. the columns are equal in both tables.

In order to perform a JOIN query, the required information we need are:

**a)** The name of the tables**b)** Name of the columns of two or more tables, based on which a condition will perform.

**Syntax:**

    FROM table1
    join_type table2
    [ON (join_condition)]

**Parameters:**

<a href="https://www.notion.so/3e2d9e2f028e4b7abf2da81156a54364" class="markup--anchor markup--p-anchor">Untitled</a>

**Pictorial Presentation of SQL Joins:**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*bbwqJEpV2a9WZG-t.gif" class="graf-image" /></figure>**Example:**

**Sample table: company**

**Sample table: foods**

To join two tables ‘company’ and ‘foods’, the following SQL statement can be used :

**SQL Code:**

    SELECT  company.company_id,company.company_name,
    foods.item_id,foods.item_name
    FROM company,foods;

Copy

Output:

    COMPAN COMPANY_NAME              ITEM_ID  ITEM_NAME
    ------ ------------------------- -------- ---------------
    18     Order All                 1        Chex Mix
    18     Order All                 6        Cheez-It
    18     Order All                 2        BN Biscuit
    18     Order All                 3        Mighty Munch
    18     Order All                 4        Pot Rice
    18     Order All                 5        Jaffa Cakes
    18     Order All                 7        Salt n Shake
    15     Jack Hill Ltd             1        Chex Mix
    15     Jack Hill Ltd             6        Cheez-It
    15     Jack Hill Ltd             2        BN Biscuit
    15     Jack Hill Ltd             3        Mighty Munch
    15     Jack Hill Ltd             4        Pot Rice
    15     Jack Hill Ltd             5        Jaffa Cakes
    15     Jack Hill Ltd             7        Salt n Shake
    16     Akas Foods                1        Chex Mix
    16     Akas Foods                6        Cheez-It
    16     Akas Foods                2        BN Biscuit
    16     Akas Foods                3        Mighty Munch
    16     Akas Foods                4        Pot Rice
    16     Akas Foods                5        Jaffa Cakes
    16     Akas Foods                7        Salt n Shake
    .........
    .........
    .........

**JOINS: Relational Databases**

- <span id="74c4"><a href="https://www.w3resource.com/oracle/joins/index.php" class="markup--anchor markup--li-anchor"><strong>Oracle JOINS</strong></a></span>
- <span id="f8da"><a href="https://www.w3resource.com/mysql/advance-query-in-mysql/mysql-joins.php" class="markup--anchor markup--li-anchor"><strong>MySQL JOINS</strong></a></span>
- <span id="33a5"><a href="https://www.w3resource.com/PostgreSQL/postgresql-join.php" class="markup--anchor markup--li-anchor"><strong>PostgreSQL JOINS</strong></a></span>
- <span id="b578"><a href="https://www.w3resource.com/sqlite/sqlite-inner-join.php" class="markup--anchor markup--li-anchor"><strong>SQLite JOINS</strong></a></span>

**Key points to remember:**

_Click on the following to get the slides presentation -_

<figure><img src="https://cdn-images-1.medium.com/max/800/0*lP_nQo6VtVu_68nx.png" class="graf-image" /></figure>###

**Practice SQL Exercises**

- <span id="0765"><a href="https://www.w3resource.com/sql-exercises/index.php" class="markup--anchor markup--li-anchor"><strong>SQL Exercises, Practice, Solution</strong></a></span>
- <span id="4cd9"><a href="https://www.w3resource.com/sql-exercises/sql-retrieve-from-table.php" class="markup--anchor markup--li-anchor"><strong>SQL Retrieve data from tables [33 Exercises]</strong></a></span>
- <span id="7204"><a href="https://www.w3resource.com/sql-exercises/sql-boolean-operators.php" class="markup--anchor markup--li-anchor"><strong>SQL Boolean and Relational operators [12 Exercises]</strong></a></span>
- <span id="3d4e"><a href="https://www.w3resource.com/sql-exercises/sql-wildcard-special-operators.php" class="markup--anchor markup--li-anchor"><strong>SQL Wildcard and Special operators [22 Exercises]</strong></a></span>
- <span id="7afb"><a href="https://www.w3resource.com/sql-exercises/sql-aggregate-functions.php" class="markup--anchor markup--li-anchor"><strong>SQL Aggregate Functions [25 Exercises]</strong></a></span>
- <span id="cc71"><a href="https://www.w3resource.com/sql-exercises/sql-fromatting-output-exercises.php" class="markup--anchor markup--li-anchor"><strong>SQL Formatting query output [10 Exercises]</strong></a></span>
- <span id="77bf"><a href="https://www.w3resource.com/sql/joins/s/sql-exercises/ql-exercises-quering-on-multiple-table.php" class="markup--anchor markup--li-anchor"><strong>SQL Quering on Multiple Tables [7 Exercises]</strong></a></span>
- <span id="0bc2"><a href="https://www.w3resource.com/sql-exercises/sorting-and-filtering-hr/index.php" class="markup--anchor markup--li-anchor"><strong>FILTERING and SORTING on HR Database [38 Exercises]</strong></a></span>
- <span id="e28a">SQL JOINS</span>
- <span id="84a2"><a href="https://www.w3resource.com/sql-exercises/sql-joins-exercises.php" class="markup--anchor markup--li-anchor"><strong>SQL JOINS [29 Exercises]</strong></a></span>
- <span id="f97b"><a href="https://www.w3resource.com/sql-exercises/joins-hr/index.php" class="markup--anchor markup--li-anchor"><strong>SQL JOINS on HR Database [27 Exercises]</strong></a></span>
- <span id="b33e">  
  </span>
- <span id="0983">SQL SUBQUERIES</span>
- <span id="423b"><a href="https://www.w3resource.com/sql-exercises/subqueries/index.php" class="markup--anchor markup--li-anchor"><strong>SQL SUBQUERIES [39 Exercises]</strong></a></span>
- <span id="a4d7"><a href="https://www.w3resource.com/sql-exercises/sql-subqueries-exercises.php" class="markup--anchor markup--li-anchor"><strong>SQL SUBQUERIES on HR Database [55 Exercises]</strong></a></span>
- <span id="b63d">  
  </span>
- <span id="2c29"><a href="https://www.w3resource.com/sql-exercises/union/sql-union.php" class="markup--anchor markup--li-anchor"><strong>SQL Union[9 Exercises]</strong></a></span>
- <span id="92c5"><a href="https://www.w3resource.com/sql-exercises/view/sql-view.php" class="markup--anchor markup--li-anchor"><strong>SQL View[16 Exercises]</strong></a></span>
- <span id="d3e5"><a href="https://www.w3resource.com/sql-exercises/sql-user-management.php" class="markup--anchor markup--li-anchor"><strong>SQL User Account Management [16 Exercise]</strong></a></span>
- <span id="e280">Movie Database</span>
- <span id="5198"><a href="https://www.w3resource.com/sql-exercises/movie-database-exercise/basic-exercises-on-movie-database.php" class="markup--anchor markup--li-anchor"><strong>BASIC queries on movie Database [10 Exercises]</strong></a></span>
- <span id="ddd5"><a href="https://www.w3resource.com/sql-exercises/movie-database-exercise/subqueries-exercises-on-movie-database.php" class="markup--anchor markup--li-anchor"><strong>SUBQUERIES on movie Database [16 Exercises]</strong></a></span>
- <span id="5363"><a href="https://www.w3resource.com/sql-exercises/movie-database-exercise/joins-exercises-on-movie-database.php" class="markup--anchor markup--li-anchor"><strong>JOINS on movie Database [24 Exercises]</strong></a></span>
- <span id="b248">  
  </span>
- <span id="d5ba">Soccer Database</span>
- <span id="a586"><a href="https://www.w3resource.com/sql-exercises/soccer-database-exercise/index.php" class="markup--anchor markup--li-anchor"><strong>Introduction</strong></a></span>
- <span id="d585"><a href="https://www.w3resource.com/sql-exercises/soccer-database-exercise/basic-exercises-on-soccer-database.php" class="markup--anchor markup--li-anchor"><strong>BASIC queries on soccer Database [29 Exercises]</strong></a></span>
- <span id="b626"><a href="https://www.w3resource.com/sql-exercises/soccer-database-exercise/subqueries-exercises-on-soccer-database.php" class="markup--anchor markup--li-anchor"><strong>SUBQUERIES on soccer Database [33 Exercises]</strong></a></span>
- <span id="95e1"><a href="https://www.w3resource.com/sql-exercises/soccer-database-exercise/joins-exercises-on-soccer-database.php" class="markup--anchor markup--li-anchor"><strong>JOINS queries on soccer Database [61 Exercises]</strong></a></span>
- <span id="05ba">  
  </span>
- <span id="2b7b">Hospital Database</span>
- <span id="788d"><a href="https://www.w3resource.com/sql-exercises/hospital-database-exercise/index.php" class="markup--anchor markup--li-anchor"><strong>Introduction</strong></a></span>
- <span id="0c32"><a href="https://www.w3resource.com/sql-exercises/hospital-database-exercise/sql-exercise-on-hospital-database.php" class="markup--anchor markup--li-anchor"><strong>BASIC, SUBQUERIES, and JOINS [39 Exercises]</strong></a></span>
- <span id="228b">  
  </span>
- <span id="54d4">Employee Database</span>
- <span id="c6fb"><a href="https://www.w3resource.com/sql-exercises/employee-database-exercise/index.php" class="markup--anchor markup--li-anchor"><strong>BASIC queries on employee Database [115 Exercises]</strong></a></span>
- <span id="0419"><a href="https://www.w3resource.com/sql-exercises/employee-database-exercise/subqueries-exercises-on-employee-database.php" class="markup--anchor markup--li-anchor"><strong>SUBQUERIES on employee Database [77 Exercises]</strong></a></span>
- <span id="cb3e">  
  </span>
- <span id="b3da">More to come!</span>

### Objective 3 — write database access methods

### Overview

While we can write database code directly into our endpoints, best practices dictate that all database logic exists in separate, modular methods. These files containing database access helpers are often called **models**

### Follow Along

To handle CRUD operations for a single resource, we would want to create a **model** (or database access file) containing the following methods:

    function find() {
    }

    function findById(id) {
    }

    function add(user) {
    }

    function update(changes, id) {
    }

    function remove(id) {
    }

Each of these functions would use Knex logic to perform the necessary database operation.

    function find() {
      return db('users');
    }

For each method, we can choose what value to return. For example, we may prefer `findById()` to return a single `user` object rather than an array.

    function findById(id) {
    // first() returns the first entry in the db matching the query
      return db('users').where({ id }).first();
    }

We can also use existing methods like `findById()` to help `add()` return the new user (instead of just the id).

    function add(user) {
      db('users').insert(user)
        .then(ids => {
          return findById(ids[0]);
        });
    }

Once all methods are written as desired, we can export them like so:

    module.exports = {
      find,
      findById,
      add,
      update,
      delete,
    }

…and use the helpers in our endpoints

    const User = require('./user-model.js');

    router.get('/', (req, res) => {
      User.find()
        .then(users => {
          res.json(users);
        })
        .catch(&nbsp;err => {});
    });

There should no be `knex` code in the endpoints themselves.

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### A database is a collection of data organized for easy retrieval and manipulation.

We’re concerned only with digital databases, those that run on computers or other electronic devices. Digital databases have been around since the 1960s. Relational databases, those which store “related” data, are the oldest and most common type of database in use today.

### Data Persistence

A database is often necessary because our application or code requires data persistence. This term refers to data that is infrequently accessed and not likely to be modified. In less technical terms, the information will be safely stored and remain untouched unless intentionally modified.

A familiar example of non-persistent data would be JavaScript objects and arrays, which reset each time the code runs.

### Relational Databases

In relational databases, **the data is stored in tabular format grouped into rows and columns** (similar to spreadsheets). A collection of rows is called a table. Each row represents a single record in the table and is made up of one or more columns.

These kinds of databases are relational because a _relation_ is a mathematical idea equivalent to a table. So relational databases are databases that store their data in tables.

### Tables

**Below are some basic facts about tables:**

> Tables organize data in rows and columns.

> Each row in a table represents one distinct record.

> Each column represents a field or attribute that is common to all the records.

> Fields should have a descriptive name and a data type appropriate for the attribute it represents.

> Tables usually have more rows than columns.

> Tables have primary keys that uniquely identify each row.

> Foreign keys represent the relationships with other tables.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*7ZPYzWNRcs2PBL6p.jpg" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### SQL:

SQL is a standard language, which means that it almost certainly will be supported, no matter how your database is managed. That said, be aware that the SQL language can vary depending on database management tools. This lesson focuses on a set of core commands that never change. Learning the standard commands is an excellent introduction since the knowledge transfers between database products.

The syntax for SQL is English-like and requires fewer symbols than programming languages like C, Java, and JavaScript.

It is declarative and concise, which means there is a lot less to learn to use it effectively.

When learning SQL, it is helpful to understand that each command is designed for a different purpose. If we classify the commands by purpose, we’ll end up with the following sub-categories of SQL:

- <span id="aba8">**Data Definition Language (DDL)**: used to modify database objects. Some examples are: `CREATE TABLE`, `ALTER TABLE`, and `DROP TABLE`.</span>
- <span id="4f3f">**Data Manipulation Language (DML)**: used to manipulate the data stored in the database. Some examples are: `INSERT`, `UPDATE`, and `DELETE`.</span>
- <span id="e1f2">**Data Query Language (DQL)**: used to ask questions about the data stored in the database. The most commonly used SQL command is `SELECT`, and it falls in this category.</span>
- <span id="4474">**Data Control Language (DCL)**: used to manage database security and user’s access to data. These commands fall into the realm of Database Administrators. Some examples are `GRANT` and `REVOKE`.</span>
- <span id="921b">**Transaction Control Commands**: used for managing groups of statements that must execute as a unit or not execute at all. Examples are `COMMIT` and `ROLLBACK`.</span>

As a developer, you’ll need to get familiar with DDL and become proficient using DML and DQL. This lesson will cover only DML and DQL commands.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>The four SQL operations covered in this section will allow a user to **query**, **insert**, and **modify** a database table.

### Query

A **query** is a SQL statement used to retrieve data from a database. The command used to write queries is `SELECT`, and it is one of the most commonly used SQL commands.

The basic syntax for a `SELECT` statement is this:

    select <selection> from <table name>;

To see all the fields on a table, we can use a `*` as the `selection`.

    select * from employees;

The preceding statement would show all the records and all the columns for each record in the `employees` table.

To pick the fields we want to see, we use a comma-separated list:

    select first_name, last_name, salary from employees;

The return of that statement would hold all records from the listed fields.

We can extend the `SELECT` command's capabilities using `clauses` for things like filtering, sorting, pagination, and more.

It is possible to query multiple tables in a single query. But, in this section, we only perform queries on a single table. We will cover performing queries on multiple tables in another section.

### Insert

To **insert** new data into a table, we’ll use the `INSERT` command. The basic syntax for an `INSERT` statement is this:

    insert into <table name> (<selection>) values (<values>)

Using this formula, we can specify which values will be inserted into which fields like so:

    insert into Customers (Country, CustomerName, ContactName, Address, City, PostalCode)
    values ('USA', 'WebDev School', 'Austen Allred', '1 WebDev Court', 'Provo', '84601');

### Modify

**Modifying** a database consists of updating and removing records. For these operations, we’ll use `UPDATE` and `DELETE` commands, respectively.

The basic syntax for an `UPDATE` statement is:

    update <table name> set <field> = <value> where <condition>;

The basic syntax for a `DELETE` statement is:

    delete from <table name> where <condition>;

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### Filtering results using WHERE clause

When querying a database, the default result will be every entry in the given table. However, often, we are looking for a specific record or a set of records that meets certain criteria.

A `WHERE` clause can help in both cases.

Here’s an example where we might only want to find customers living in Berlin.

    select City, CustomerName, ContactName
    from Customers
    where City = 'Berlin'

We can also chain together `WHERE` clauses using `OR` and `AND` to limit our results further.

The following query includes only records that match both criteria.

    select City, CustomerName, ContactName
    from Customers
    where Country = 'France' and City = 'Paris'

And this query includes records that match either criteria.

    select City, CustomerName, ContactName
    from Customers
    where Country = 'France' or City = 'Paris'

These operators can be combined and grouped with parentheses to add complex selection logic. They behave similarly to what you’re used to in programming languages.

You can read more about SQLite operators from <a href="https://www.w3resource.com/sqlite/operators.php" class="markup--anchor markup--p-anchor">w3resource (Links to an external site.)</a>.

To select a single record, we can use a `WHERE` statement with a uniquely identifying field, like an id:

    select * from Customers
    where CustomerId=3;

Other comparison operators also work in `WHERE` conditions, such as `>`, `<`, `<=`, and `>=`.

    select * from employees where salary >= 50000

### Ordering results using the ORDER BY clause

Query results are shown in the same order the data was inserted. To control how the data is sorted, we can use the `ORDER BY` clause. Let's see an example.

    -- sorts the results first by salary in descending order, then by the last name in ascending order
    select * from employees order by salary desc, last_name;

We can pass a list of field names to `order by` and optionally choose `asc` or `desc` for the sort direction. The default is `asc`, so it doesn't need to be specified.

Some SQL engines also support using field abbreviations when sorting.

    select name, salary, department from employees order by 3, 2 desc;

In this case, the results are sorted by the department in ascending order first and then by salary in descending order. The numbers refer to the fields’ position in the _selection_ portion of the query, so `1` would be _name_, `2` would be _salary_, and so on.

Note that the `WHERE` clause should come after the `FROM` clause. The `ORDER BY` clause always goes last.

    select * from employees where salary > 50000 order by last_name;

### Limiting results using the LIMIT clause

When we wish to see only a limited number of records, we can use a `LIMIT` clause.

The following returns the first ten records in the products table:

    select * from products
    limit 10

`LIMIT` clauses are often used in conjunction with `ORDER BY`. The following shows us the five cheapest products:

    select * from products
    order by price desc
    limit 5

### Inserting data using INSERT

An insert statement adds a new record to the database. All non-null fields must be listed out in the same order as their values. Some fields, like ids and timestamps, may be auto-generated and do not need to be included in an `INSERT` statement.

    -- we can add fields in any order; the values need to be in the same ordinal position
    -- the id will be assigned automatically
      insert into Customers (Country, CustomerName, ContactName, Address, City, PostalCode)
      values ('USA', 'WebDev School', 'Austen Allred', '1 WebDev Court', 'Provo', '84601');

The values in an insert statement must not violate any restrictions and constraints that the database has in place, such as expected datatypes. We will learn more about constraints and schema design in a later section.

### Modifying recording using UPDATE

When modifying a record, we identify a single record or a set of records to update using a `WHERE` clause. Then we can set the new value(s) in place.

    update Customers
    set City = 'Silicon Valley', Country = 'USA'
    where CustomerName = 'WebDev School'

Technically the `WHERE` clause is not required, but leaving it off would result in every record within the table receiving the update.

### Removing records using DELETE

When removing a record or set of records, we need only identify which record(s) to remove using a `WHERE` clause:

    delete from Customers
    where CustomerName = 'WebDev School`;

Once again, the `WHERE` clause is not required, but leaving it off would remove every record in the table, so it's essential.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>Raw SQL is a critical baseline skill. However, Node developers generally use an **Object Relational Mapper (ORM)** or **query builder** to write database commands in a backend codebase. Both **ORMs** and **query builders** are JavaScript libraries that allow us to interface with the database using a JavaScript version of the SQL language.

For example, instead of a raw SQL `SELECT`:

    SELECT * FROM users;

We could use a query builder to write the same logic in JavaScript:

    db.select('*').from('users');

**Query builders** are lightweight and easy to get off the ground, whereas **ORMs** use an object-oriented model and provide more heavy lifting within their rigid structure.

We will use a **query builder** called <a href="https://knexjs.org/" class="markup--anchor markup--p-anchor">knex.js (Links to an external site.)</a>.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### Knex Setup

To use Knex in a repository, we’ll need to add two libraries:

    npm install knex sqlite3

`knex` is our query builder library, and `sqlite3` allows us to interface with a `sqlite` database. We'll learn more about `sqlite` and other **database management systems** in the following module. For now, know that you need both libraries.

Next, we use Knex to set up a config file:

    const knex = require('knex');

    const config = {
      client: 'sqlite3',
      connection: {
        filename: './data/posts.db3',
      },
      useNullAsDefault: true,
    };

    module.exports = knex(config);

To use the query builder elsewhere in our code, we need to call `knex` and pass in a `config` object. We'll be discussing Knex configuration more in a future module. Still, we only need the `client`, `connection`, and `useNullAsDefault` keys as shown above. The `filename` should point towards the pre-existing database file, which can be recognized by the `.db3` extension.

**GOTCHA**: The file path to the database should be with respect to the **root** of the repo, not the configuration file itself.

Once Knex is configured, we can import the above config file anywhere in our codebase to access the database.

    const db = require('../data/db-config.js);

The `db` object provides methods that allow us to begin building queries.

### SELECT using Knex

In Knex, the equivalent of `SELECT * FROM users` is:

    db.select('*').from('users');

There’s a simpler way to write the same command:

    db('users');

Using this, we could write a `GET` endpoint.

    router.get('/api/users', (req, res) => {
      db('users')
      .then(users => {
        res.json(users);
      })
      .catch (err => {
        res.status(500).json({ message: 'Failed to get users' });
      });
    });

**NOTE**: All Knex queries return promises.

Knex also allows for a where clause. In Knex, we could write `SELECT * FROM users WHERE id=1` as

    db('users').where({ id: 1 });

This method will resolve to an array containing a single entry like so: `[{ id: 1, name: 'bill' }]`.

Using this, we might add a `GET` endpoint where a specific user:

    server.get('api/users/:id', (req, res) => {
      const { id } = req.params;

    db('users').where({ id })
      .then(users => {
        // we must check the length to find our if our user exists
        if (users.length) {
          res.json(users);
        } else {
          res.status(404).json({ message: 'Could not find user with given id.' })
       })
      .catch (err => {
        res.status(500).json({ message: 'Failed to get user' });
      });
    });

### INSERT using Knex

In Knex, the equivalent of `INSERT INTO users (name, age) VALUES ('Eva', 32)` is:

    db('users').insert({ name: 'Eva', age: 32 });

The insert method in Knex will resolve to an array containing the newly created id for that user like so: `[3]`.

### UPDATE using Knex

In knex, the equivalent of `UPDATE users SET name='Ava', age=33 WHERE id=3;` is:

    db('users').where({ id: 3 })
    .update({name: 'Ava', age: 33 });

Note that the `where` method comes before `update`, unlike in SQL.

Update will resolve to a count of rows updated.

### DELETE using Knex

In Knex, the equivalent of `DELETE FROM users WHERE age=33;` is:

    db('users').where({ age: 33}).del();

Once again, the `where` must come before the `del`. This method will resolve to a count of records removed.

---

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>###

### Here’s a small project you can practice with.

SQLlite Studio is an application that allows us to create, open, view, and modify SQLite databases. To fully understand what SQLite Studio is and how it works, we must also understand the concept of the Database Management Systems (DBMS).

### What is a DBMS?

To manage digital databases we use specialized software called **D**ata**B**ase **M**anagement **S**ystems (DBMS). These systems typically run on servers and are managed by **D**ata**B**ase **A**dministrators (DBAs).

In less technical terms, we need a type of software that will allow us to create, access, and generally manage our databases. In the world of relational databases, we specifically use Relational Database Mangement Systems (RDBMs). Some examples are Postgres, SQLite, MySQL, and Oracle.

Choosing a DBMS determines everything from how you set up your database, to where and how the data is stored, to what SQL commands you can use. Most systems share the core of the SQL language that you’ve already learned.

In other words, you can expect `SELECT`, `UPDATE`, `INSERT`, `WHERE` , and the like to be the same across all DBMSs, but the subtleties of the language may vary.

### What is SQLite?

**SQLite** is the DBMS, as the name suggests, it is a more lightweight system and thus easier to get set up than some others.

SQLite allows us to store databases as single files. SQLite projects have a `.db3` extension. That is the database.

SQLite is _not a database_ (like relational, graph, or document are databases) but rather _a database management system_.

### Opening an existing database in SQLite Studio

One useful visual interface we might use with a SQLite database is called **SQLite Studio**. <a href="https://sqlitestudio.pl/" class="markup--anchor markup--p-anchor">Install SQLITE Studio here. (Links to an external site.)</a>

Once installed, we can use SQLite Studio to open any `.db3` file from a previous lesson. We may view the tables, view the data, and even make changes to the database.

For a more detailed look at SQLite Studio, follow along in the video above.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>A **database schema** is the shape of our database. It defines what tables we’ll have, which columns should exist within the tables and any restrictions on each column.

A well-designed database schema keeps the data well organized and can help ensure high-quality data.

Note that while schema design is usually left to Database Administrators (DBAs), understanding schema helps when designing APIs and database logic. And in a smaller team, this step may fall on the developer.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>For a look at schema design in SQLite Studio, follow along in the video above.

When designing a single table, we need to ask three things:

- <span id="2e1a">What fields (or columns) are present?</span>
- <span id="52e7">What type of data do we expect for each field?</span>
- <span id="8aff">Are there other restrictions needed for each column?</span>

Looking at the following schema diagram for an `accounts` table, we can the answer to each other those questions:

<a href="https://www.notion.so/9790405dda624818822293a383eec2d2" class="markup--anchor markup--p-anchor">Untitled</a>

### Table Fields

Choosing which fields to include in a table is relatively straight forward. What information needs to be tracked regarding this resource? In the real world, this is determined by the intended use of the product or app.

However, this is one requirement every table should satisfy: a **primary key**. A primary key is a way to identify each entry in the database uniquely. It is most often represented as a auto-incrementing integer called `id` or `[tablename]Id`.

### Datatypes

Each field must also have a specified datatype. The datatype available depends on our DBMS. Some supported datatype in SQLite include:

- <span id="92fb">**Null:** Missing or unknown information.</span>
- <span id="32ef">**Integer:** Whole numbers.</span>
- <span id="181d">**Real:** Any number, including decimals.</span>
- <span id="ebce">**Text:** Character data.</span>
- <span id="c00e">**Blob:** a large binary object that can be used to store miscellaneous data.</span>

Any data inserted into the table must match the datatypes determined in schema design.

### Constraints

Beyond datatypes, we may add additional **constraints** on each field. Some examples include:

- <span id="14ca">**Not Null:** The field cannot be left empty</span>
- <span id="b533">**Unique:** No two records can have the same value in this field</span>
- <span id="f0c4">**Primary key:** — Indicates this field is the primary key. Both the not null and unique constraints will be enforced.</span>
- <span id="f116">**Default:** — Sets a default value if none is provided.</span>

As with data types, any data that does not satisfy the schema constraints will be rejected from the database.

###

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### Multi-Table Design

Another critical component of schema design is to understand how different tables relate to each other. This will be covered in later lesson.

Knex provides a **schema builder**, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.

When a schema needs to be updated, a developer must feel confident that the changes go into effect everywhere. This means schema updates on the developer’s local machine, on any testing or staging versions, on the production database, and then on any other developer’s local machines. This is where **migrations** come into play.

A `database migration` describes changes made to the structure of a database. Migrations include things like adding new objects, adding new tables, and modifying existing objects or tables.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### Knex Cli

To use migrations (and to make Knex setup easier), we need to use **knex cli**. Install knex globally with `npm install -g knex`.

This allows you to use Knex commands within any repo that has `knex` as a local dependency. If you have any issues with this global install, you can use the `npx knex` command instead.

### Initializing Knex

To start, add the `knex` and `sqlite3` libraries to your repository.

`npm install knex sqlite3`

We’ve seen how to use manually create a config object to get started with Knex, but the best practice is to use the following command:

    knex init

Or, if Knex isn’t globally installed:

    npx knex init

This command will generate a file in your root folder called `knexfile.js`. It will be auto populated with three config objects, based on different environments. We can delete all except for the development object.

    module.exports = {

    development: {
        client: 'sqlite3',
        connection: {
          filename: './dev.sqlite3'
        }
      }

    };

We’ll need to update the location (or desired location) of the database as well as add the `useNullAsDefault` option. The latter option prevents crashes when working with `sqlite3`.

    module.exports = {

    development: {
        // our DBMS driver
        client: 'sqlite3',
        // the location of our db
        connection: {
          filename: './data/database_file.db3',
        },
        // necessary when using sqlite3
        useNullAsDefault: true
      }

    };

Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.

    const knex = require('knex');

    const config = require('../knexfile.js');

    // we must select the development object from our knexfile
    const db = knex(config.development);

    // export for use in codebase
    module.exports = db;

### Knex Migrations

Once our `knexfile` is set up, we can begin creating **migrations**. Though it's not required, we are going to add an `addition` option to the config object to specify a directory for the migration files.

    development: {
        client: 'sqlite3',
        connection: {
          filename: './data/produce.db3',
        },
        useNullAsDefault: true,
        // generates migration files in a data/migrations/ folder
        migrations: {
          directory: './data/migrations'
        }
      }

We can generate a new migration with the following command:

`knex migrate:make [migration-name]`

If we needed to create an accounts table, we might run:

`knex migrate:make create-accounts`

Note that inside `data/migrations/` a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, **do not edit migration names.**

The migration file should have both an `up` and a `down` function. Within the `up` function, we write the ended database changes. Within the `down` function, we write the code to undo the `up` functions. This allows us to undo any changes made to the schema if necessary.

    exports.up = function(knex, Promise) {
      // don't forget the return statement
      return knex.schema.createTable('accounts', tbl => {
        // creates a primary key called id
        tbl.increments();
        // creates a text field called name which is both required and unique
        tbl.text('name', 128).unique().notNullable();
        // creates a numeric field called budget which is required
        tbl.decimal('budget').notNullable();
      });
    };

    exports.down = function(knex, Promise) {
      // drops the entire table
      return knex.schema.dropTableIfExists('accounts');
    };

References for these methods are found in the **schema builder** section of the <a href="https://knexjs.org/" class="markup--anchor markup--p-anchor">Knex docs (Links to an external site.)</a>.

At this point, the table is **not** yet created. To run this (and any other) migrations, use the command:

`knex migrate:latest`

Note if the database does not exist, this command will auto-generate one. We can use SQLite Studio to confirm that the accounts table has been created.

### Changes and Rollbacks

If later down the road, we realize you need to update your schema, you shouldn’t edit the migration file. Instead, you will want to create a new migration with the command:

`knex migrate:make accounts-schema-update`

Once we’ve written our updates into this file we save and close with:

`knex migrate:latest`

If we migrate our database and then quickly realize something isn’t right, we can edit the migration file. However, first, we need to **rolllback** (or undo) our last migration with:

`knex migrate:rollback`

Finally, we are free to rerun that file with `knex migrate` latest.

**NOTE**: A rollback should not be used to edit an old migration file once that file has accepted into a main branch. However, an entire team may use a rollback to return to a previous version of a database.

### Overview

Knex provides a **schema builder**, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.

When a schema needs to be updated, a developer must feel confident that the changes go into effect everywhere. This means schema updates on the developer’s local machine, on any testing or staging versions, on the production database, and then on any other developer’s local machines. This is where **migrations** come into play.

A `database migration` describes changes made to the structure of a database. Migrations include things like adding new objects, adding new tables, and modifying existing objects or tables.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### Knex Cli

To use migrations (and to make Knex setup easier), we need to use **knex cli**. Install knex globally with `npm install -g knex`.

This allows you to use Knex commands within any repo that has `knex` as a local dependency. If you have any issues with this global install, you can use the `npx knex` command instead.

### Initializing Knex

To start, add the `knex` and `sqlite3` libraries to your repository.

`npm install knex sqlite3`

We’ve seen how to use manually create a config object to get started with Knex, but the best practice is to use the following command:

    knex init

Or, if Knex isn’t globally installed:

    npx knex init

This command will generate a file in your root folder called `knexfile.js`. It will be auto populated with three config objects, based on different environments. We can delete all except for the development object.

    module.exports = {

    development: {
        client: 'sqlite3',
        connection: {
          filename: './dev.sqlite3'
        }
      }

    };

We’ll need to update the location (or desired location) of the database as well as add the `useNullAsDefault` option. The latter option prevents crashes when working with `sqlite3`.

    module.exports = {

    development: {
        // our DBMS driver
        client: 'sqlite3',
        // the location of our db
        connection: {
          filename: './data/database_file.db3',
        },
        // necessary when using sqlite3
        useNullAsDefault: true
      }

    };

Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.

    const knex = require('knex');

    const config = require('../knexfile.js');

    // we must select the development object from our knexfile
    const db = knex(config.development);

    // export for use in codebase
    module.exports = db;

### Knex Migrations

Once our `knexfile` is set up, we can begin creating **migrations**. Though it's not required, we are going to add an `addition` option to the config object to specify a directory for the migration files.

    development: {
        client: 'sqlite3',
        connection: {
          filename: './data/produce.db3',
        },
        useNullAsDefault: true,
        // generates migration files in a data/migrations/ folder
        migrations: {
          directory: './data/migrations'
        }
      }

We can generate a new migration with the following command:

`knex migrate:make [migration-name]`

If we needed to create an accounts table, we might run:

`knex migrate:make create-accounts`

Note that inside `data/migrations/` a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, **do not edit migration names.**

The migration file should have both an `up` and a `down` function. Within the `up` function, we write the ended database changes. Within the `down` function, we write the code to undo the `up` functions. This allows us to undo any changes made to the schema if necessary.

    exports.up = function(knex, Promise) {
      // don't forget the return statement
      return knex.schema.createTable('accounts', tbl => {
        // creates a primary key called id
        tbl.increments();
        // creates a text field called name which is both required and unique
        tbl.text('name', 128).unique().notNullable();
        // creates a numeric field called budget which is required
        tbl.decimal('budget').notNullable();
      });
    };

    exports.down = function(knex, Promise) {
      // drops the entire table
      return knex.schema.dropTableIfExists('accounts');
    };

References for these methods are found in the **schema builder** section of the <a href="https://knexjs.org/" class="markup--anchor markup--p-anchor">Knex docs (Links to an external site.)</a>.

At this point, the table is **not** yet created. To run this (and any other) migrations, use the command:

`knex migrate:latest`

Note if the database does not exist, this command will auto-generate one. We can use SQLite Studio to confirm that the accounts table has been created.

### Changes and Rollbacks

If later down the road, we realize you need to update your schema, you shouldn’t edit the migration file. Instead, you will want to create a new migration with the command:

`knex migrate:make accounts-schema-update`

Once we’ve written our updates into this file we save and close with:

`knex migrate:latest`

If we migrate our database and then quickly realize something isn’t right, we can edit the migration file. However, first, we need to **rolllback** (or undo) our last migration with:

`knex migrate:rollback`

Finally, we are free to rerun that file with `knex migrate` latest.

**NOTE**: A rollback should not be used to edit an old migration file once that file has accepted into a main branch. However, an entire team may use a rollback to return to a previous version of a database.

### Overview

Often we want to pre-populate our database with sample data for testing. **Seeds** allow us to add and reset sample data easily.

### Follow Along

The Knex command-line tool offers a way to **seed** our database; in other words, pre-populate our tables.

Similarly to migrations, we want to customize where our seed files are generated using our `knexfile`

    development: {
        client: 'sqlite3',
        connection: {
          filename: './data/produce.db3',
        },
        useNullAsDefault: true,
        // generates migration files in a data/migrations/ folder
        migrations: {
          directory: './data/migrations'
        },
        seeds: {
          directory: './data/seeds'
        }
      }

To create a seed run: `knex seed:make 001-seedName`

Numbering is a good idea because Knex doesn’t attach a timestamp to the name like migrate does. Adding numbers to the file name, we can control the order in which they run.

We want to create seeds for our accounts table:

`knex seed:make 001-accounts`

A file will appear in the designated seed folder.

    exports.seed = function(knex, Promise) {
      // we want to remove all data before seeding
      // truncate will reset the primary key each time
      return knex('accounts').truncate()
        .then(function () {
          // add data into insert
          return knex('accounts').insert([
            { name: 'Stephenson', budget: 10000 },
            { name: 'Gordon & Gale', budget: 40400 },
          ]);
        });
    };

Run the seed files by typing:

`knex seed:run`

You can now use SQLite Studio to confirm that the accounts table has two entries.

---

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>### SQL & PostgreSQL

**Foreign keys** are a type of table field used for creating links between tables. Like **primary keys**, they are most often integers that identify (rather than store) data. However, whereas a primary key is used to id rows in a table, foreign keys are used to connect a record in one table to a record in a second table.

###

Consider the following `farms` and `ranchers` tables.

<a href="https://www.notion.so/5b20c5e233dd4a70a33d6ab2c2e1c8bb" class="markup--anchor markup--p-anchor">Untitled</a>

<a href="https://www.notion.so/0b0a909c24a9474fb9df80938546f12a" class="markup--anchor markup--p-anchor">Untitled</a>

The `farm_id` in the `ranchers` table is an example of a `foreign key`. Each entry in the `farm_id` (foreign key) column corresponds to an `id` (primary key) in the `farms` table. This allows us to track which farm each rancher belongs to while keeping the tables normalized.

If we could only see the `ranchers` table, we would know that John, Jane, and Jen all work together and that Jim and Jay also work together. However, to know where any of them work, we would need to look at the `farms` table.

Now that we understand the basics of querying data from a single table, let’s move on to selecting data from multiple tables using JOIN operations.

### Overview

We can use a `JOIN` to combine query data from multiple tables using a single `SELECT` statement.

There are different types of joins; some are listed below:

- <span id="d886">inner joins.</span>
- <span id="43f5">outer joins.</span>
- <span id="882e">left joins.</span>
- <span id="ad86">right joins.</span>
- <span id="4d8b">cross joins.</span>
- <span id="eb21">non-equality joins.</span>
- <span id="fc6a">self joins.</span>

Using `joins` requires that the two tables of interest contain at least one field with shared information. For example, if a _departments_ table has an _id_ field, and an employee table has a _department_id_ field, and the values that exist in the _id_ column of the _departments_ table live in the _department_id_ field of the employee table, we can use those fields to join both tables like so:

    select * from employees
    join departments on employees.department_id = departments.id

This query will return the data from both tables for every instance where the `ON` condition is true. If there are employees with no value for department*id or where the value stored in the field does not correspond to an existing id in the* departments _table, then that record will NOT be returned. In a similar fashion, any records from the_ departments _table that don't have an employee associated with them will also be omitted from the results. Basically, if the_ id\* does not show as the value of department_id for an employee, it won't be able to join.

We can shorten the condition by giving the table names an alias. This is a common practice. Below is the same example using aliases, picking which fields to return and sorting the results:

    select d.id, d.name, e.id, e.first_name, e.last_name, e.salary
    from employees as e
    join departments as d
      on e.department_id = d.id
    order by d.name, e.last_name

Notice that we can take advantage of white space and indentation to make queries more readable.

There are several ways of writing joins, but the one shown here should work on all database management systems and avoid some pitfalls, so we recommend it.

The syntax for performing a similar join using Knex is as follows:

    db('employees as e')
      .join('departments as d', 'e.department_id', 'd.id')
      .select('d.id', 'd.name', 'e.first_name', 'e.last_name', 'e.salary')

### Follow Along

A good explanation of how the different types of joins can be seen <a href="https://www.w3resource.com/sql/joins/sql-joins.php" class="markup--anchor markup--p-anchor">in this article from w3resource.com (Links to an external site.)</a>.

### What is SQL Joins?

An SQL JOIN clause combines rows from two or more tables. It creates a set of rows in a temporary table.

### How to Join two tables in SQL?

A JOIN works on two or more tables if they have at least one common field and have a relationship between them.

JOIN keeps the base tables (structure and data) unchanged.

### Join vs. Subquery

- <span id="6fdc">JOINs are faster than a subquery and it is very rare that the opposite.</span>
- <span id="c648">In JOINs the RDBMS calculates an execution plan, that can predict, what data should be loaded and how much it will take to processed and as a result this process save some times, unlike the subquery there is no pre-process calculation and run all the queries and load all their data to do the processing.</span>
- <span id="d59c">A JOIN is checked conditions first and then put it into table and displays; where as a subquery take separate temp table internally and checking condition.</span>
- <span id="08ff">When joins are using, there should be connection between two or more than two tables and each table has a relation with other while subquery means query inside another query, has no need to relation, it works on columns and conditions.</span>

### SQL JOINS: EQUI JOIN and NON EQUI JOIN

The are two types of SQL JOINS — EQUI JOIN and NON EQUI JOIN

1.  <span id="2bb1">SQL EQUI JOIN :</span>

The SQL EQUI JOIN is a simple SQL join uses the equal sign(=) as the comparison operator for the condition. It has two types — SQL Outer join and SQL Inner join.

1.  <span id="a9be">SQL NON EQUI JOIN :</span>

The **SQL NON EQUI JOIN** is a join uses comparison operator other than the equal sign like &gt;, &lt;, &gt;=, &lt;= with the condition.

**SQL EQUI JOIN : INNER JOIN and OUTER JOIN**

The SQL EQUI JOIN can be classified into two types — INNER JOIN and OUTER JOIN

1.  <span id="cf44">SQL INNER JOIN</span>

This type of EQUI JOIN returns all rows from tables where the key record of one table is equal to the key records of another table.

1.  <span id="22a6">SQL OUTER JOIN</span>

This type of EQUI JOIN returns all rows from one table and only those rows from the secondary table where the joined condition is satisfying i.e. the columns are equal in both tables.

In order to perform a JOIN query, the required information we need are:

**a)** The name of the tables**b)** Name of the columns of two or more tables, based on which a condition will perform.

**Syntax:**

    FROM table1
    join_type table2
    [ON (join_condition)]

**Parameters:**

<a href="https://www.notion.so/5522c3e6d5d0443eb870f7a34f60c7ff" class="markup--anchor markup--p-anchor">Untitled</a>

**Pictorial Presentation of SQL Joins:**

<figure><img src="https://cdn-images-1.medium.com/max/800/0*2DcsnJXF_FOGhUtL.gif" class="graf-image" /></figure>**Example:**

**Sample table: company**

**Sample table: foods**

To join two tables ‘company’ and ‘foods’, the following SQL statement can be used :

**SQL Code:**

    SELECT  company.company_id,company.company_name,
    foods.item_id,foods.item_name
    FROM company,foods;

Copy

Output:

    COMPAN COMPANY_NAME              ITEM_ID  ITEM_NAME
    ------ ------------------------- -------- ---------------
    18     Order All                 1        Chex Mix
    18     Order All                 6        Cheez-It
    18     Order All                 2        BN Biscuit
    18     Order All                 3        Mighty Munch
    18     Order All                 4        Pot Rice
    18     Order All                 5        Jaffa Cakes
    18     Order All                 7        Salt n Shake
    15     Jack Hill Ltd             1        Chex Mix
    15     Jack Hill Ltd             6        Cheez-It
    15     Jack Hill Ltd             2        BN Biscuit
    15     Jack Hill Ltd             3        Mighty Munch
    15     Jack Hill Ltd             4        Pot Rice
    15     Jack Hill Ltd             5        Jaffa Cakes
    15     Jack Hill Ltd             7        Salt n Shake
    16     Akas Foods                1        Chex Mix
    16     Akas Foods                6        Cheez-It
    16     Akas Foods                2        BN Biscuit
    16     Akas Foods                3        Mighty Munch
    16     Akas Foods                4        Pot Rice
    16     Akas Foods                5        Jaffa Cakes
    16     Akas Foods                7        Salt n Shake
    .........
    .........
    .........

### Overview

While we can write database code directly into our endpoints, best practices dictate that all database logic exists in separate, modular methods. These files containing database access helpers are often called **models**

### Follow Along

To handle CRUD operations for a single resource, we would want to create a **model** (or database access file) containing the following methods:

    function find() {
    }

    function findById(id) {
    }

    function add(user) {
    }

    function update(changes, id) {
    }

    function remove(id) {
    }

Each of these functions would use Knex logic to perform the necessary database operation.

    function find() {
      return db('users');
    }

For each method, we can choose what value to return. For example, we may prefer `findById()` to return a single `user` object rather than an array.

    function findById(id) {
    // first() returns the first entry in the db matching the query
      return db('users').where({ id }).first();
    }

We can also use existing methods like `findById()` to help `add()` return the new user (instead of just the id).

    function add(user) {
      db('users').insert(user)
        .then(ids => {
          return findById(ids[0]);
        });
    }

Once all methods are written as desired, we can export them like so:

    module.exports = {
      find,
      findById,
      add,
      update,
      delete,
    }

…and use the helpers in our endpoints

    const User = require('./user-model.js');

    router.get('/', (req, res) => {
      User.find()
        .then(users => {
          res.json(users);
        })
        .catch(&nbsp;err => {});
    });

There should no be `knex` code in the endpoints themselves.

---

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>###

`Normalization` is the process of designing or refactoring database tables for maximum consistency and minimum redundancy.

With objects, we’re used to _denormalized_ data, stored with ease of use and speed in mind. Non-normalized tables are considered ineffective in relational databases.

###

**Data normalization** is a deep topic in database design. To begin thinking about it, we’ll explore a few basic guidelines and some data examples that violate these rules.

### Normalization Guidelines

> Each record has a primary key.

> No fields are repeated.

> All fields relate directly to the key data.

> Each field entry contains a single data point.

> There are no redundant entries.

### Denormalized Data

<a href="https://www.notion.so/19a01f68a659470fb85bbe6906fb4bad" class="markup--anchor markup--p-anchor">Untitled</a>

This table has two issues. There is no proper id field (as multiple farms may have the same name), and multiple fields are representing the same type of data: animals.

<a href="https://www.notion.so/075ad6dd99ac48698625d7b56ca67bef" class="markup--anchor markup--p-anchor">Untitled</a>

While we have now eliminated the first two issues, we now have multiple entries in one field, separated by commas. This isn’t good either, as its another example of denormalization. There is no “array” data type in a relational database, so each field must contain only one data point.

<a href="https://www.notion.so/375a15b0cb3f444a8698cd6cb3a08fe0" class="markup--anchor markup--p-anchor">Untitled</a>

Now we’ve solved the multiple fields issue, but we created repeating data (the farm field), which is also an example of denormalization. As well, we can see that if we were tracking additional ranch information (such as annual revenue), that field is only vaguely related to the animal information.

**When these issues begin arising in your schema design, it means that you should separate information into two or more tables.**

### Anomalies

Obeying the above guidelines prevent **anomalies** in your database when inserting, updating, or deleting. For example, imagine if the revenue of Beech Ranch changed. With our denormalized schema, it may get updated in some records but not others:

<a href="https://www.notion.so/e05f5b2e8ff141798adc6f188f56f31e" class="markup--anchor markup--p-anchor">Untitled</a>

Similarly, if Beech Ranch shut down, there would be three (if not more) records that needed to be deleted to remove a single farm.

Thus a denormalized table opens the door for contradictory, confusing, and unusable data.

###

What issues does the following table have?

<a href="https://www.notion.so/2793e8f6b70a47f48f9208779366e69e" class="markup--anchor markup--p-anchor">Untitled</a>

###

There are three types of relationships:

> One to one.

> One to many.

> Many to many.

Determining how data is related can provide a set of guidelines for table representation and guides the use of foreign keys to connect said tables.

###

### One to One Relationships

Imagine we are storing the financial projections for a series of farms.

We may wish to attach fields like farm name, address, description, projected revenue, and projected expenses. We could divide these fields into two categories: information related to the farm directly (name, address, description) and information related to the financial projections (revenue, expenses).

We would say that `farms` and `projections` have a **one-to-one** relationship. This is to say that every farm has exactly one projection, and every project corresponds to exactly one farm.

This data can be represented in two tables: `farms` and `projections`

<a href="https://www.notion.so/944e594f3464473ea06383bfdea13265" class="markup--anchor markup--p-anchor">Untitled</a>

<a href="https://www.notion.so/de32fcf6760e45f284707274433fee92" class="markup--anchor markup--p-anchor">Untitled</a>

The `farm_id` is the foreign key that links `farms` and `projections` together.

Notes about one-to-one relationships:

- <span id="198d">The foreign key should always have a `unique` constraint to prevent duplicate entries. In the example above, we wouldn't want to allow multiple projections records for one farm.</span>
- <span id="25c6">The foreign key can be in either table. For example, we may have had a `projection_id` in the `farms` table instead. A good rule of thumb is to put the foreign key in whichever table is more auxiliary to the other.</span>
- <span id="960d">You can represent one-to-one data in a single table _without_ creating anomalies. However, it is sometimes prudent to use two tables as shown above to keep separate concerns in separate tables.</span>

### One to Many Relationships

Now imagine, we are storing the full-time ranchers employed at each farm. In this case, each rancher would only work at one farm however, each farm may have multiple ranchers.

This is called a **one-to-many** relationship.

This is the most common type of relationship between entities. Some other examples:

- <span id="5627">One `customer` can have many `orders`.</span>
- <span id="cc42">One `user` can have many `posts`.</span>
- <span id="dae3">One `post` can have many `comments`.</span>

Manage this type of relationship by adding a foreign key on the “many” table of the relationship that points to the primary key on the “one” table. Consider the `farms` and `ranchers` tables.

<a href="https://www.notion.so/7dfd2e69c9804a01845f2e9b716a5ac2" class="markup--anchor markup--p-anchor">Untitled</a>

<a href="https://www.notion.so/c95f3d418db94ab4b4532eeba0e4f918" class="markup--anchor markup--p-anchor">Untitled</a>

In a many-to-many relationship, the foreign key (in this case `farm_id`) should _not_ be unique.

### Many to Many Relationships

If we want to track animals on a farm as well, we must explore the **many-to-many** relationship. A farm has multiple animals, and multiple of each type of animal is present at multiple different farms.

Some other examples:

- <span id="d757">an `order` can have many `products` and the same `product` will appear in many `orders`.</span>
- <span id="0256">a `book` can have more than one `author`, and an `author` can write more than one `book`.</span>

To model this relationship, we need to introduce an **intermediary table** that holds foreign keys that reference the primary key on the related tables. We now have a `farms`, `animals`, and `farm_animals` table.

<a href="https://www.notion.so/3269812d7c2a4578b1a9f6bc27e485b1" class="markup--anchor markup--p-anchor">Untitled</a>

<a href="https://www.notion.so/c2642c7f632f489cb1b9639c80b8400d" class="markup--anchor markup--p-anchor">Untitled</a>

<a href="https://www.notion.so/d0b0042c5e104edd9ed55e122af89084" class="markup--anchor markup--p-anchor">Untitled</a>

While each foreign key on the intermediary table is not unique, the combinations of keys should be unique.

###

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>The Knex query builder library also allows us to create multi-table schemas include foreign keys. However, there are a few extra things to keep in mind when designing a multi-table schema, such as using the correct order when creating tables, dropping tables, seeding data, and removing data.

We have to consider the way that `delete` and `updates` through our API will impact related data.

###

### Foreign Key Setup

In Knex, foreign key restrictions don’t automatically work. Whenever using foreign keys in your schema, add the following code to your `knexfile`. This will prevent users from entering bad data into a foreign key column.

    development: {
      client: 'sqlite3',
      useNullAsDefault: true,
      connection: {
        filename: './data/database.db3',
      },
      // needed when using foreign keys
      pool: {
        afterCreate: (conn, done) => {
          // runs after a connection is made to the sqlite engine
          conn.run('PRAGMA foreign_keys = ON', done); // turn on FK enforcement
        },
      },
    },

### Migrations

Let’s look at how we might track our `farms` and `ranchers` using Knex. In our migration file's `up` function, we would want to create two tables:

    exports.up = function(knex, Promise) {
      return knex.schema
        .createTable('farms', tbl => {
          tbl.increments();
          tbl.string('farm_name', 128)
            .notNullable();
        })
        // we can chain together createTable
        .createTable('ranchers', tbl => {
          tbl.increments();
          tbl.string('rancher_name', 128);
          tbl.integer('farm_id')
            // forces integer to be positive
            .unsigned()
            .notNullable()
            .references('id')
            // this table must exist already
            .inTable('farms')
        })
    };

Note that the foreign key can only be created _after_ the reference table.

In the down function, the opposite is true. We always want to drop a table with a foreign key _before_ dropping the table it references.

    exports.down = function(knex, Promise) {
      // drop in the opposite order
      return knex.schema
        .dropTableIfExists('ranchers')
        .dropTableIfExists('farms')
    };

In the case of a many-to-many relationship, the syntax for creating an intermediary table is identical, except for one additional piece. We need a way to make sure our combination of foreign keys is unique.

    .createTable('farm_animals', tbl => {
      tbl.integer('farm_id')
        .unsigned()
        .notNullable()
        .references('id')
        // this table must exist already
        .inTable('farms')
      tbl.integer('animal_id')
        .unsigned()
        .notNullable()
        .references('id')
        // this table must exist already
        .inTable('animals')

    // the combination of the two keys becomes our primary key
      // will enforce unique combinations of ids
      tbl.primary(['farm_id', 'animal_id']);
    });

### Seeds

Order is also a concern when seeding. We want to create seeds in the **same** order we created our tables. In other words, don’t create a seed with a foreign key, until that reference record exists.

In our example, make sure to write the `01-farms` seed file and then the `02-ranchers` seed file.

However, we run into a problem with truncating our seeds, because we want to truncate `02-ranchers` _before_ `01-farms`. A library called `knex-cleaner` provides an easy solution for us.

Run `knex seed:make 00-cleanup` and `npm install knex-cleaner`. Inside the cleanup seed, use the following code.

    const cleaner = require('knex-cleaner');

    exports.seed = function(knex) {
      return cleaner.clean(knex, {
        mode: 'truncate', // resets ids
        ignoreTables: ['knex_migrations', 'knex_migrations_lock'], // don't empty migration tables
      });
    };

This removes all tables (excluding the two tables that track migrations) in the correct order before any seed files run.

### Cascading

If a user attempt to delete a record that is referenced by another record (such as attempting to delete `Morton Ranch` when entries in our `ranchers` table reference that record), by default, the database will block the action. The same thing can happen when updating a record when a foreign key reference.

If we want that to override this default, we can delete or update with **cascade**. With cascade, deleting a record also deletes all referencing records, we can set that up in our schema.

    .createTable('ranchers', tbl => {
        tbl.increments();
        tbl.string('rancher_name', 128);
        tbl.integer('farm_id')
        .unsigned()
        .notNullable()
        .references('id')
        .inTable('farms')
        .onUpdate('CASCADE');
        .onDelete('CASCADE')
    })

<figure><img src="https://cdn-images-1.medium.com/max/800/1*9xpwm_56lgvHkFTKsmoMqg.gif" class="graf-image" /></figure>

<a href="https://expressjs.com/en/starter/basic-routing.html" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://expressjs.com/en/starter/basic-routing.html"><strong>Express basic routing</strong><br />
<em>Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI…</em>expressjs.com</a><a href="https://expressjs.com/en/starter/basic-routing.html" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://expressjs.com/en/guide/writing-middleware.html" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://expressjs.com/en/guide/writing-middleware.html"><strong>Writing middleware for use in Express apps</strong><br />
<em>Middleware functions are functions that have access to the request object ( req), the response object ( res), and the…</em>expressjs.com</a><a href="https://expressjs.com/en/guide/writing-middleware.html" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

[View original.](https://medium.com/p/d9edbf68cf9a)

Exported from [Medium](https://medium.com) on August 24, 2021.

# Express Quick Sheet

Settings

---

### Express Quick Sheet

### Settings

    app.set('x', 'yyy')
    app.get('x') //=> 'yyy'

    app.enable('trust proxy')
    app.disable('trust proxy')

    app.enabled('trust proxy') //=> true

### Enviorment

    app.get('env')

### Config

    app.configure('production', function() {
      app.set...
    })

### Wares

    app.use(express.static(__dirname + '/public'))
    app.use(express.logger())

### Helpers

    app.locals({
      title: "MyApp",
    })

---

### Request & response

### Request

    // GET  /user/tj
    req.path         //=> "/user/tj"
    req.url          //=> "/user/tj"
    req.xhr          //=> true|false
    req.method       //=> "GET"
    req.params
    req.params.name  //=> "tj"
    req.params[0]

    // GET /search?q=tobi+ferret
    req.query.q // => "tobi ferret"

    req.cookies

    req.accepted
    // [ { value: 'application/json', quality: 1, type: 'application', subtype: 'json' },
    //   { value: 'text/html', quality: 0.5, type: 'text',subtype: 'html' } ]

    req.is('html')
    req.is('text/html')

    req.headers
    req.headers['host']
    req.headers['user-agent']
    req.headers['accept-encoding']
    req.headers['accept-language']

### Response

    res.redirect('/')
    res.redirect(301, '/')

    res.set('Content-Type', 'text/html')

    res.send('hi')
    res.send(200, 'hi')

    res.json({ a: 2 })

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/8f93762c59ca).

<a href="https://medium.com/@bryanguner/express-quick-sheet-8f93762c59ca" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Express-Routing

Note: To read this in a rendered view, open your VS Code Command Palate (using Control+Shift+P on Windows, Command+Shift+P on macOS)

---

### Express-Routing

#### **Note:** To read this in a rendered view, open your VS Code Command Palate (using Control+Shift+P on Windows, Command+Shift+P on macOS) 

####

Create an Express application.

- <span id="216c">Has a page that shows a list of people</span>
- <span id="fc00">Has a page that allows you to add a person</span>
- <span id="b702">Is protected from Cross-Site Request Forgeries</span>

In the **images** directory, you will find

- <span id="b45d">A screenshot of the person listing page</span>
- <span id="39bc">A screenshot of the person creation form</span>

The screenshots show you what is expected from a _structure_ standpoint. They  
are meant to be guides. The tests will _not_ make any assertions about the  
styling of your pages, merely the structure of the pages and the data presented  
on them.

Use the technologies you have used up to this point. They are all installed in  
the **package.json** for your convenience.

- <span id="e52d">Express.js</span>
- <span id="ab8b">pg (the library to connect to PostgreSQL), Sequelize, and Sequelize CLI</span>
- <span id="8b4e">CSURF middleware</span>
- <span id="b9f8">Pug.js</span>
- <span id="b4d2">cookie-parser middleware</span>
- <span id="52f9">body-parser middleware</span>
- <span id="5536">nodemon (for development purposes)</span>

A **package.json** file already exists with the dependencies. Please run `npm install` to install those before doing your development and running your tests.  
Do not remove any dependencies already listed in the **package.json**.

### Running the application

You can run your application in “dev” mode. The **nodemon** package is installed  
and runnable from `npm run dev`.

### Running the tests

This is “black-box testing”. The tests will _only_ use your Express application.  
It will not make connections to the database or directly test your route  
handlers. They will merely make HTTP requests of your Express app and analyze  
the responses.

To ease your development, tests will run against your **development** database  
and _not_ the test database.

**You** will be responsible for creating, migrating, and seeding the data in  
your development database.

Run your tests with `npm test`. You can run `npm test test/test-file-name.js`  
to run the tests for a specific part of the assessment.

- <span id="5f97">Example: To only run the test `01-form-page.js` do,  
  `npm test test/01-form-page.js`</span>

If you get tired of seeing all of the Sequelize failures, you can try running:

    npm test 2> /dev/null

That should redirect the annoying messages into oblivion but leave the  
mocha output available for you to read. This may prevent you from seeing other  
errors, though, so make sure to run it without the `2> /dev/null` if you're  
trying to get a test to pass and need to see error output.

### App Requirements

These are the requirements for the application. Follow them closely. The tests  
will attempt to read data from your rendered HTML.

Read all of the requirements. Determine the data needed to include in your data  
model.

Please use port 8081 for your Express.js server.

### The database

Create a database user with `CREATEDB` priveleges:

- <span id="96a3">The login username that you must use is “express_practice_app”</span>
- <span id="6e88">The login password that you must use is “EzB5Dxo2dabnQBF8”</span>

Initialize Sequelize in your assessment and use the following configuration in  
your `config/config.json` file:

    {
      "development": {
        "username": "express_practice_app",
        "password": "EzB5Dxo2dabnQBF8",
        "database": "express_practice_development",
        "host": "127.0.0.1",
        "dialect": "postgres",
        "seederStorage": "sequelize",
        "logging": false
      }
    }

Remove `logging: false` if you want to see SQL output in your terminal when  
running tests with `npm test`.

Create the `development` database with those configurations.

For this assessment, the tests will be using your `development` database  
configuration defined in the `config.json` file. **The tests will not be  
testing your database explicitly, but test specs DO rely on you setting up the  
database AND database constraints properly.**

You will need to generate and run the migrations, models, and seeders. There is  
no need to run `npm test` until after doing this.

### The data model

You will need to store “People” data and “HairColor” data.

Generate a model (and migration) for the “HairColor” model with the attributes:

Attribute nameAttribute typeConstraintscolorstringunique, not nullable

- <span id="cda4">the “color” column will hold values up to 20 characters in length and  
  will not allow `NULL`s</span>

Generate a model (and migration) for the “Person” model with the attributes:

Attribute nameAttribute typeConstraintsfirstNamestringnot nullablelastNamestringnot nullableageintegerbiographytexthairColorIdintegernot nullable, references HairColors

Configure the migration so that:

- <span id="7b0d">the “firstName” column will hold values up to 50 characters in length and  
  will not allow `NULL`s</span>
- <span id="c44e">the “lastName” column will hold values up to 50 characters in length and  
  will not allow `NULL`s</span>
- <span id="e6f2">the “hairColorId” will not allow `NULL`s and references the "HairColors"  
  table</span>

Create a seeder file for `HairColors`:

    { color: "Auburn", createdAt: '2019-04-12', updatedAt: '2019-04-12'},
    { color: "Black", createdAt: '2019-04-12', updatedAt: '2019-04-12' },
    { color: "Blonde", createdAt: '2019-04-12', updatedAt: '2019-04-12' },
    { color: "Brown", createdAt: '2019-04-12', updatedAt: '2019-04-12' },
    { color: "Other", createdAt: '2019-04-12', updatedAt: '2019-04-12' },
    { color: "Red", createdAt: '2019-04-12', updatedAt: '2019-04-12' },
    { color: "White", createdAt: '2019-04-12', updatedAt: '2019-04-12' },

If you set up the seeder correctly, the `HairColors` table should have the  
following pre-defined data in it:

colorAuburnBlackBlondeBrownOtherRedWhite

**NOTE:** All of the data constraints for this assessment can be handled by the  
database with the `allowNull` and `unique` flags in your migrations. You **do  
not** need to use form validations in this project. They are good to have, in  
real applications, but can require too much time for you to integrate them into  
this project. Again, you **do not** need to use a form validator, just use  
database constraints and let the errors turn into 500 status codes by Express.

Make sure to make the appropriate associations.

After you’ve generated your models, migrations, and seeder files, don’t forget  
to migrate and seed your database with the appropriate Sequelize CLI commands.

### Your main file

You must use the **app.js** file to create and configure your Express  
application. You must store the instance of your Express.js application in a  
variable named “app”. That is what is exported at the bottom of the **app.js**  
file.

Set up your CSRF middleware to use cookies.

### The route “GET /new-person”

This page shows a form in which a visitor can add a new person. The form must  
have

- <span id="4869">a method of “post”</span>
- <span id="1861">an action of “/new-person”</span>

In the form, you should have these inputs with the provided name:

Field HTML nameField typeConstraintsDefault valuesfirstNamesingle-line textrequiredlastNamesingle-line textrequiredagenumberbiographymulti-line texthairColorIddropdownrequiredOne of the pre-defined hair colors_csrfhiddenThe value provided by the CSURF middleware

You should also have a submit button.

Please refer to the screenshot below:

### The route “POST /new-person”

The post handler should validate the data from the HTTP request. If everything  
is fine, then it should create a new person and redirect to the route “/”.

Remember, all of the data constraints for this assessment can be handled by the  
database with the `allowNull` and `unique` flags in your migrations. You **do  
not** need to use form validations in this project. They are good to have, in  
real applications, but can require too much time for you to integrate them into  
this project. Again, you **do not** need to use a form validator, just use  
database constraints and let the errors turn into 500 status codes by Express.

If the data does not pass validation, then no new record should be created. It  
is ok to just let Express return an error code of 500 in this case. **Note**:  
you would not do this in a real application.

### The route “GET /”

When someone accesses your application, they should see a list of people that  
are stored in your database. The list should contain:

- <span id="8be4">The person’s first name</span>
- <span id="30c2">The person’s last name</span>
- <span id="c4ee">The person’s age</span>
- <span id="392d">A short biography</span>
- <span id="15a9">Their hair color</span>

Please refer to the screenshot below:

To create a table in a Pug.js template, you’ll use something like the following  
code. You probably already know this, but it’s included for your reference.

    table
      thead
        tr
          th Header 1
          th Header 2
      tbody
        each thing in things
          tr
            td= thing.property1
            td= thing.property2

The tests will use a regular expression to determine if each piece of data is  
wrapped with TD tags. For example, to test for the “Auburn”  
value appearing in the HTML of the page, the tests would use the following  
regular expression.

    <td[^>]*>\s*Auburn\s*</td>

The regular expression will ignore any attributes that you put on the table data  
tag as well as any white space around the entry for the data value.

Again, the styling is not important to the tests.

[View original.](https://medium.com/p/40972026781f)

Exported from [Medium](https://medium.com) on August 24, 2021.

Fetch Quick Sheet
=================

Fetch

------------------------------------------------------------------------

### Fetch Quick Sheet

### Fetch

    fetch('/data.json')
      .then(response => response.json())
      .then(data => {
        console.log(data)
      })
      .catch(err => ...)

### Response

    fetch('/data.json')
    .then(res => {
      res.text()       // response body (=> Promise)
      res.json()       // parse via JSON (=> Promise)
      res.status       //=> 200
      res.statusText   //=> 'OK'
      res.redirected   //=> false
      res.ok           //=> true
      res.url          //=> 'http://site.com/data.json'
      res.type         //=> 'basic'
                       //   ('cors' 'default' 'error'
                       //    'opaque' 'opaqueredirect')

      res.headers.get('Content-Type')
    })

### Request options

    fetch('/data.json', {
      method: 'post',
      body: new FormData(form), // post body
      body: JSON.stringify(...),

      headers: {
        'Accept': 'application/json'
      },

      credentials: 'same-origin', // send cookies
      credentials: 'include',     // send cookies, even in CORS

    })

### Catching errors

    fetch('/data.json')
      .then(checkStatus)

    function checkStatus (res) {
      if (res.status >= 200 && res.status < 300) {
        return res
      } else {
        let err = new Error(res.statusText)
        err.response = res
        throw err
      }
    }

Non-2xx responses are still successful requests. Use another function to turn them to errors.

### Using with node.js

    const fetch = require('isomorphic-fetch')

See: <a href="https://npmjs.com/package/isomorphic-fetch" class="markup--anchor markup--p-anchor">isomorphic-fetch</a> *(npmjs.com)*

#### If you found this guide helpful feel free to checkout my github/gists where I host similar content:

<a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a>

<a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br />
<em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

Or Checkout my personal Resource Site:

<a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br />
<em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/8872650742b4).

<a href="https://medium.com/@bryanguner/fetch-quick-sheet-8872650742b4" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.


# Front End Behavioral Interview

Web Developer Job Interview Questions

---

### Front End Behavioral Interview

<figure><img src="https://cdn-images-1.medium.com/max/800/0*h1f0wDTq6vj_V8QS.png" class="graf-image" /></figure>### Web Developer Job Interview Questions

### 1. DESCRIBE A WEB DEVELOPMENT PROJECT YOU WORKED ON FROM START TO FINISH. WHAT APPROACH DID YOU TAKE, WHAT CHALLENGES DID YOU FACE, AND HOW WERE YOU SUCCESSFUL?

Tip: Be transparent about what a real web development project looks like for you. Highlight your wins, of course, but don’t shy away from being real about the challenges. Interviewers aren’t looking to hear that you never have setbacks (that’s not realistic). They want to hear how you get past setbacks and ultimately succeed.

### 2. DESCRIBE A PROJECT THAT WENT OFF THE RAILS. WHY DID IT GO WRONG AND HOW DID YOU REACT?

Tip: Similar to the last question, interviewers are looking for honesty here. Sometimes projects go badly, and that’s OK. What’s important is how you respond to failures and learn from them so they don’t happen next time.

### 3. WHICH PROGRAMMING LANGUAGES ARE YOU PROFICIENT IN? ARE THERE ANY LANGUAGES YOU’RE NOT FAMILIAR WITH THAT YOU FEEL LIKE YOU NEED TO LEARN?

Tip: This question is pretty straightforward — -let the interviewer know which languages you’re familiar with and how you use them. Ideally, you’ve scoped out the job beforehand and know that your experience syncs with what the employer needs. At the same time, have some new languages in mind that you’d like to learn. This highlights your willingness to keep growing professionally.

### 4. WHY ARE YOU DRAWN TO WEB DEVELOPMENT?

Tip: It’s a common pitfall to interview for a job and never explicitly say WHY you want to work in this specific field or for this particular employer/company. Even if the question doesn’t get asked, find a way to touch on it during the interview.

### 5. WHAT KIND OF TEAM ENVIRONMENT DO YOU THRIVE IN?

Tip: You may be tempted to say whatever you think the interviewer is looking for, but it’s way better to be honest. If the team you’ll be working with has a work style that’s completely outside of your comfort zone, then this particular job might not be a good fit for you. That being said, most development teams are dynamic and flexible, and if your employer knows what kind of environment suits you best, they can help find a spot on the team that WILL work for you.

### 6. HOW DO YOU KEEP ON TOP OF INDUSTRY NEWS AND TRENDS, AND HOW DO YOU APPLY THIS TO YOUR WORK?

Tip: You DO keep up with industry news, don’t you? If so, simply rattle off your list of favorite news sources and why they’re effective for keeping you in the know. And if tech news is something you’ve overlooked while being in the weeds of learning tech skills, take a few minutes to find a few suitable news blogs and tech Twitter accounts to put in your hip pocket (and be ready to bust them out at your next interview).

### 7. HOW DO YOU COMMUNICATE YOUR PROGRESS TO CLIENTS AND/OR STAKEHOLDERS?

Tip: The gist here is to demonstrate that you understand the importance of keeping clients and stakeholders up to date, and that you have ideas for establishing systems of communication (or that you’re willing to work with systems like Agile or Scrum if they’re used by your employer).

### 8. WHAT DO YOU DO IF A CLIENT OR STAKEHOLDER IS UNHAPPY WITH A PROJECT?

Tip: Having an effective communication strategy with stakeholders doesn’t mean you won’t sometimes receive negative feedback. So how do you respond? Do you get defensive? Shut down? Give up? Or do you find creative ways to accept that feedback and address client or shareholder concerns? Interviewers are looking for candidates who can adapt to and recover from hard times, so either think of a real example that you can share, or develop a client appeasement gameplan that you’ll use when the time comes.

### 9. GIVE ME AN EXAMPLE OF HOW YOU’D DESCRIBE WEB DEVELOPMENT (WHAT IT IS, WHY IT IS IMPORTANT) TO SOMEONE WHO IS COMPLETELY NEW TO TECH.

Tip: As a web developer you’ll find yourself in situations where you need to talk “tech” with non-techies. Making your work make sense to people who have no idea what it is you actually do is a valuable skill. Take off your developer hat for a day and think of some ways to describe web development to someone who doesn’t know Java from JavaScript.

### 10. GIVE AN EXAMPLE OF A WEBSITE OR WEB APPLICATION THAT YOU DON’T LIKE, POINT OUT WHAT’S WRONG WITH IT AND WHAT YOU WOULD CHANGE.

Tip: Interviewers may ask you to provide an example of a website you think is less than stellar, then ask you to describe what you think is lacking and what you’d do to improve it. It’s a good idea to have examples and explanations on hand (as well as examples of sites you think are super effective) going into an interview. Answering this question comprehensively shows interviewers that you aren’t signing on to mindlessly write code — -you understand what makes good sites good and how to make bad sites better.

### 11. WHAT KIND OF MANAGEMENT STYLE DO YOU RESPOND TO BEST?

Tip: This question is another one where you might be tempted to make the interviewer happy. But you know what’s guaranteed to make YOU unhappy? Working for a manager whose style you can’t stand. Be as flexible and as open minded as you can when describing your preferred management style, but if there’s something that’s a complete deal-breaker for you (or that you particularly appreciate), don’t be shy about making it known.

### 12. HOW WOULD YOU DESCRIBE THE ROLE OF A WEB DEVELOPER? WHAT ARE THE MOST IMPORTANT ASPECTS OF THE JOB AND WHY?

Tip: Your clear and concise summary of a web developer role shows how you think about the web development process in general, and lets interviewers know what specific developer strengths and interests you bring to the job.

### 13. HOW DO YOU MANAGE YOUR TIME DURING A DEVELOPMENT CYCLE, AND WHAT METHODS DO YOU USE FOR ESTIMATING HOW LONG SPECIFIC DEVELOPMENT TASKS WILL TAKE?

Tip: Managing your time and estimating how long individual tasks will take is critical to your success as a web developer. If you’re already good at time management and estimation, revisit what works for you and build on it ahead of this question. And if your current time management approach isn’t working? Now’s a great time to implement a new system and get the most out of your work day.

### 14. WHAT SOFT SKILLS WILL YOU BRING TO THE JOB, AND HOW DO YOU ENVISION USING THEM?

Tip: Soft skills can be a difference maker. If it’s a choice between a skilled programmer and a skilled programmer who can write well or who has experience with project management, most employers will pick the latter. So have a list of your own soft skills ready, but also have examples of how they’ll be relevant to a web developer job. It’s not enough to say you’re good at written and verbal communication. You need to explain how your excellent written and verbal communication skills will help you relay project details to team members and stakeholders.

### 15. GIVE AN EXAMPLE OF A NON-CODING/WEB DEVELOPMENT PROBLEM THAT YOU’VE SOLVED, AND WHAT YOUR PROBLEM SOLVING PROCESS INVOLVED.

Tip: Yes, you’re interviewing for a web developer job, but remember to look to other experiences in your life for inspiration. Examples like the time you helped improve the ordering system at the cafe you worked at or put together a volunteer fundraising effort to save the music program at your kids’ school all speak to the breadth of your problem solving abilities and experiences.

<a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br />
<em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [August 6, 2021](https://medium.com/p/bf5c079f7461).

<a href="https://medium.com/@bryanguner/front-end-behavioral-interview-bf5c079f7461" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Front End Interview Questions Part 2

These will focus more on vocabulary and concepts than the application driven approach in my last post!

---

#### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a>

### Front End Interview Questions Part 2

#### These will focus more on vocabulary and concepts than the application-driven approach in my last post!

<figure><img src="https://cdn-images-1.medium.com/max/1200/0*D3yQI42gBkYpnLXY.jpg" class="graf-image" /></figure>

### Here’s part one for reference:

<a href="https://bryanguner.medium.com/the-web-developers-technical-interview-e347d7db3822" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/the-web-developers-technical-interview-e347d7db3822"><strong>The Web Developer’s Technical Interview</strong><br />
<em>Questions….Answers… and links to the missing pieces.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/the-web-developers-technical-interview-e347d7db3822" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

- <span id="0232">**­­­­If you were to describe semantic HTML to the next cohort of students, what would you say?**</span>

Semantic HTML is markup that conveys meaning, not appearance, to search engines to make everything easier to identify.

- <span id="37b8">**Name two big differences between display: block; and display: inline;.**</span>

block starts on a new line and takes up the full width of the content.  
 inline starts on the same line as previous content, in line with other content, and takes up only the space needed for the content.

· **What are the 4 areas of the box model?**

content, padding, border, margin

· **While using flexbox, what axis does the following property work on: align-items: center?**

cross-axis

· **Explain why git is valuable to a team of developers.**

Allows you to dole out tiny pieces of a large project to many developers who can all work towards the same goal on their own chunks, allows roll back if you make a mistake; version control.

· **What is the difference between an adaptive website and a fully responsive website?**

An adaptive website “adapts” to fit a pre-determined set of screen sizes/devices, and a responsive one changes to fit all devices.

· **Describe what it means to be mobile first vs desktop first.**

It means you develop/code the site with mobile in mind first and work your way outward in screen size.

· **What does font-size: 62.5% in the html tag do for us when using rem units?**

This setting makes it so that 1 rem = 10 px for font size, easier to calculate.

· **How would you describe preprocessing to someone new to CSS?**

Preprocessing is basically a bunch of functions and variables you can use to store CSS settings in different ways that make it easier to code CSS.

· **What is your favorite concept in preprocessing? What is the concept that gives you the most trouble?**

Favorite is (parametric) mixins; but I don’t have a lot of trouble with preprocessing. What gives me the most trouble is knowing ahead of time what would be good to go in a mixin for a given site.

· **Describe the biggest difference between .forEach & .map.**

forEach iterates over an array item by item, and map calls a function on each array item, but returns another/additional array, unlike forEach.

· **What is the difference between a function and a method?**

Every function is an object. If a value is a function, it is a method. Methods have to be ‘received’ by something; functions do not.

· **What is closure?**

It is code identified elsewhere that we can use later; gives the ability to put functions together. If a variable isn’t defined, a function looks outward for context.

· **Describe the four rules of the ‘this’ keyword.**

1. Window/global binding — this is the window/console object. ‘use strict’; to prevent window binding.

2. Implicit binding — when a function is called by a dot, the object preceding the dot is the ‘this’. 80 percent of ‘this’ is from this type of binding.

3. New binding — points to new object created & returned by constructor function

4. Explicit binding — whenever call, bind, or apply are used.

· **Why do we need super() in an extended class?**

Super ties the parent to the child.

- <span id="d57b">**What is the DOM?**</span>

Document object model, the ‘window’ or container that holds all the page’s elements

- <span id="6172">**What is an event?**</span>

An event is something happening on or to the page, like a mouse click, doubleclick, key up/down, pointer out of element/over element, things like this. There are tons of “events” that javascript can detect.

- <span id="75c5">**What is an event listener?**</span>

Javascript command that ‘listens’ for an event to happen on the page to a given element and then runs a function when that event happens

- <span id="157d">**Why would we convert a NodeList into an Array?**</span>

A NodeList isn’t a real array, so it won’t have access to array methods such as slice or map.

- <span id="6934">**What is a component?**</span>

Reusable pieces of code to display info in a consistent repeatable way

· **What is React JS and what problems does it try and solve? Support your answer with concepts introduced in class and from your personal research on the web.**

ReactJS is a library used to build large applications. It’s very good at assisting developers in manipulating the DOM element to create rich user experiences. We need a way to off-load the state/data that our apps use, and React helps us do that.

· **What does it mean to _think_ in react?**

It makes you think about how to organize/build apps a little differently because it’s very scalable and allows you to build huge apps. React’s one-way data flow makes everything modular and fast. You can build apps top-down or bottom-up.

· **Describe state.**

Some data we want to display.

· **Describe props.**

Props are like function arguments in JS and attributes in HTML.

· **What are side effects, and how do you sync effects in a React component to state or prop changes?**

Side effects are anything that affects something outside the executed function’s scope like fetching data from an API, a timer, or logging.

· **Explain benefit(s) using client-side routing?**

Answer: It’s much more efficient than the traditional way, because a lot of data isn’t being transmitted unnecessarily.

· **Why would you use class component over function components (removing hooks from the question)?**

Because some companies still use class components and don’t want to switch their millions of dollars’ worth of code over to all functional hooks, and also there’s currently a lot more troubleshooting content out there for classes that isn’t out there for hooks. Also, functional components are better when you don’t need state, presentational components.

· **Name three lifecycle methods and their purposes.**

componentDidMount = do the stuff inside this ‘function’ after the component mounted

componentDidUpdate = do the stuff inside this function after the component updated

componentWillUnmount = clean-up in death/unmounting phase

· **What is the purpose of a custom hook?**

allow you to apply non-visual behavior and stateful logic throughout your components by reusing the same hook over and over again

· **Why is it important to test our apps?**

Gets bugs fixed faster, reduces regression risk, makes you consider/work out the edge cases, acts as documentation, acts as safety net when refactoring, makes code more trustworthy

· **What problem does the context API help solve?**

You can store data in a context object instead of prop drilling.

· **In your own words, describe actions, reducers and the store and their role in Redux. What does each piece do? Why is the store known as a ‘single source of truth’ in a redux application?**

Everything that changes within your app is represented by a single JS object called the store. The store contains state for our application. When changes are made to our application state, we never write to our store object but rather clone the state object, modify the clone, and replace the original state with the new copy, never mutating the original object. Reducers are the only place we can update our state. Actions tell our reducers “how” to update the state, and perhaps with what data it should be updated, but only a reducer can actually update the state.

· **What is the difference between Application state and Component state? When would be a good time to use one over the other?**

App state is global, component state is local. Use component state when you have component-specific variables.

· **Describe redux-thunk, what does it allow us to do? How does it change our action-creators?**

Redux Thunk is middleware that provides the ability to handle asynchronous operations inside our Action Creators, because reducers are normally synchronous.

· **What is your favorite state management system you’ve learned and this sprint? Please explain why!**

Redux, because I felt it was easier to understand than the context API.

· **Explain what a token is used for.**

Many services out in the wild require the client (our React app, for example) to provide proof that it’s authenticated with them. The server running these services can issue a JWT (JSON Web Token) as the authentication token, in exchange for correct login credentials.

· **What steps can you take in your web apps to keep your data secure?**

As we build our web apps, we will most likely have some “protected” routes — routes that we only want to render if the user has logged in and been authenticated by our server. The way this normally works is we make a login request, sending the server the user’s username and password. The server will check those credentials against what is in the database, and if it can authenticate the user, it will return a token. Once we have this token, we can add two layers of protection to our app. One with protected routes, the other by sending an authentication header with our API calls (as we learned in the above objective).

· **Describe how web servers work.**

The “world wide web” (which we’ll refer to as “the web”) is just a part of the internet — which is itself a network of interconnected computers. The web is just one way to share data over the internet. It consists of a body of information stored on web servers, ready to be shared across the world. The term “web server” can mean two things:

· a computer that stores the code for a website

· a program that runs on such a computer

The physical computer device that we call a web server is connected to the internet, and stores the code for different websites to be shared across the world at all times. When we load the code for our websites, or web apps, on a server like this, we would say that the server is “hosting” our website/app.

· **Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.**

Create, Read, Update, Delete

· **Mention two parts of Express that you learned about this week.**

Routing/router, Middleware, convenience helpers

· **Describe Middleware?**

array of functions that get executed in the order they are introduced into the server code

· **Describe a Resource?**

o everything is a **resource**.

o each resource is accessible via a **unique URI**.

o resources can have multiple **representations**.

o communication is done over a **stateless** protocol (HTTP).

o management of resources is done via **HTTP methods**.

· **What can the API return to help clients know if a request was successful?**

200 status code/201 status code

· **How can we partition our application into sub-applications?**

By dividing the code up into multiple files and ‘requiring’ them in the main server file.

· **Explain the difference between Relational Databases and SQL.**

SQL is the language used to access a relational database.

· **Why do tables need a primary key?**

To uniquely identify each record/row.

· **What is the name given to a table column that references the primary key on another table.**

Foreign key

· **What do we need in order to have a _many to many_ relationship between two tables.**

An **intermediary table** that holds foreign keys that reference the primary key on the related tables.

· **What is the purpose of using _sessions_?**

The purpose is to persist data across requests.

· **What does bcrypt do to help us store passwords in a secure manner?**

o password hashing function.

o implements salting both manual and automatically.

o accumulative hashing rounds.

· **What does bcrypt do to slow down attackers?**

Having an algorithm that hashes the information multiple times (rounds) means an attacker needs to have the hash, know the algorithm used, and how many rounds were used to generate the hash in the first place. So it basically makes it a lot more difficult to get somebody’s password.

· **What are the three parts of the JSON Web Token?**

Header, payload, signature

### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

<a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br />
<em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br />
<em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

### Or Checkout my personal Resource Site:

<a href="https://best-celery-b2d7c.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://best-celery-b2d7c.netlify.app/"><strong>Web-Dev-Hub</strong><br />
<em>preview of the Web-Dev-Hub</em>best-celery-b2d7c.netlify.app</a><a href="https://best-celery-b2d7c.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 19, 2021](https://medium.com/p/86ddc0e91443).

<a href="https://medium.com/@bryanguner/front-end-interview-questions-part-2-86ddc0e91443" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Fundamental Concepts In Javascript

This is the stuff that comes up on interviews…

---

### Fundamental Concepts In Javascript

#### This is the stuff that comes up on interviews…

<figure><img src="https://cdn-images-1.medium.com/max/800/0*v_HRUxnqaDN-wJd8.png" class="graf-image" /></figure>Or even deeper:

### Here are most of the below exercises!

<figure><img src="https://cdn-images-1.medium.com/max/1200/1*99CR4DhBOCjuVCkkK-lLwg.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/1200/1*UKRWX0waAKW3M_ZWJgRUmA.jpeg" class="graf-image" /></figure>

- <span id="1fd7">Label variables as either Primitive vs. Reference</span>
- <span id="de11">primitives: strings, booleans, numbers, null and undefined</span>
- <span id="c203">primitives are immutable</span>
- <span id="254c">refereces: objects (including arrays)</span>
- <span id="80bc">references are mutable</span>
- <span id="8b53">Identify when to use `.` vs `[]` when accessing values of an object</span>
- <span id="cb76">dot syntax `object.key`</span>
- <span id="91bc">easier to read</span>
- <span id="7ff8">easier to write</span>
- <span id="a46a">cannot use variables as keys</span>
- <span id="74e2">keys cannot begin with a number</span>
- <span id="c648">bracket notation `object["key]`</span>
- <span id="5677">allows variables as keys</span>
- <span id="f562">strings that start with numbers can be use as keys</span>
- <span id="08df">Write an object literal with a variable key using interpolation</span>

### put it in brackets to access the value of the variable, rather than just making the value that string

- <span id="d0b0">Use the `obj[key] !== undefined` pattern to check if a given variable that contains a key exists in an object</span>
- <span id="9f75">can also use `(key in object)` syntax interchangeably (returns a boolean)</span>
- <span id="811d">Utilize Object.keys and Object.values in a function</span>
- <span id="1f44">`Object.keys(obj)` returns an array of all the keys in `obj`</span>
- <span id="8efe">`Object.values(obj)` returns an array of the values in `obj`</span>

### Iterate through an object using a `for in` loop

### Define a function that utilizes `...rest` syntax to accept an arbitrary number of arguments

- <span id="eb23">`...rest` syntax will store all additional arguments in an array</span>
- <span id="e2d4">array will be empty if there are no additional arguments</span>

### Use `...spread` syntax for Object literals and Array literals

- <span id="438a">Destructure an array to reference specific elements</span>

### Write a function that accepts a array as an argument and returns an object representing the count of each character in the array

### Callbacks Lesson Concepts

- <span id="133e">Given multiple plausible reasons, identify why functions are called “First Class Objects” in JavaScript.</span>
- <span id="22a1">they can be stored in variables, passed as arguments to other functions, and serve as return value for a function</span>
- <span id="5b83">supports same basic operations as other types (strings, bools, numbers)</span>
- <span id="2419">higher-order functions take functions as arguments or return functions as values</span>
- <span id="2cc7">Given a code snippet containing an anonymous callback, a named callback, and multiple `console.log`s, predict what will be printed</span>
- <span id="7d16">what is this referring to?</span>
- <span id="e1c6">Write a function that takes in a value and two callbacks. The function should return the result of the callback that is greater.</span>

#### Write a function, myMap, that takes in an array and a callback as arguments. The function should mimic the behavior of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" class="markup--anchor markup--h4-anchor">`Array#map`.</a>

### Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of `Array#filter`.

### Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of `Array#every`.

---

### Scope Lesson Concepts

<figure><img src="https://cdn-images-1.medium.com/max/800/0*2WT03WQBOGKWH_9i.png" class="graf-image" /></figure>-   <span id="cd3f">Identify the difference between `const`, `let`, and `var` declarations</span>

> `const` **_- cannot reassign variable, scoped to block_**

> `let` **_- can reassign variable, scoped to block_**

> `var` **_- outdated, may or may not be reassigned, scoped to function. can be not just reassigned, but also redeclared!_**

- <span id="dc31">_a variable will always evaluate to the value it contains regardless of how it was declared_</span>

#### Explain the difference between `const`, `let`, and `var` declarations

> `var` _is function scoped—so if you declare it anywhere in a function, the declaration_ **_(but not assignment…the fact that it exists is known to the javascript engine but the value assigned to it is a mystery until the code is run line by line!) is "hoisted"_** _so it will_ **_exist in memory as “undefined”_** _which is bad and unpredictable_

> `var` _will also allow you to redeclare a variable, while_ `let` _or_ `const` _will raise a syntax error. you shouldn't be able to do that!_

#### `!!const` _won't let you reassign a variable!!_

> _but if it points to a mutable object, you will still be able to change the value by mutating the object_

- <span id="2e8a">**block-scoped variables allow new variables with the same name in new scopes**</span>
- <span id="b7a6">block-scoped still performs hoisting of all variables within the block, but it doesn’t **initialize to the value of** `undefined` **like** `var` **does,** so it throws a specific reference error if you try to access the value before it has been declared</span>
- <span id="d64f">**if you do not use** `var` **or** `let` **or** `const` **when initializing, it will be declared as global—THIS IS BAD** _(pretend that’s something you didn’t even know you could do)_</span>
- <span id="a6c4">if you assign a value without a declaration*(la la la la….I’m not listening)*, it exists in the global scope (so then it would be accessible by all outer scopes, so bad). however, there’s no hoisting, so it doesn’t exist in the scope until after the line is run.</span>

### Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining

<figure><img src="https://cdn-images-1.medium.com/max/800/0*P22Rwsk7Uzn5vJNS.png" class="graf-image" /></figure>-   <span id="904e">**scope of a program means the set of variables that are available for use within the program**</span>
-   <span id="2aa4">**global scope is represented by the** `window` **object in the browser and the** `global` **object in Node.js**</span>
-   <span id="e255">*global variables are available everywhere, and so increase the risk of name collisions*</span>

#### local scope is the set of variables available for use within the function

- <span id="bb8a">when we enter a function, we enter a new scope</span>
- <span id="6bc8">includes functions arguments, local variables declared inside function, and any variables that were already declared when the function is defined (hmm about that last one)</span>
- <span id="b80e">for blocks (denoted by curly braces `{}`, as in conditionals or `for` loops), variables can be block scoped</span>
- <span id="5ae1">inner scope does not have access to variables in the outer scope</span>
- <span id="068c">scope chaining — if a given variable is not found in immediate scope, javascript will search all accessible outer scopes until variable is found</span>
- <span id="c44e">so an inner scope can access outer scope variables</span>
- <span id="37e1">but an outer scope can never access inner scope variables</span>

### Define an arrow function

### Given an arrow function, deduce the value of `this` without executing the code

- <span id="98d6">arrow functions are automatically bound to the context they were declared in.</span>
- <span id="c91b">unlike regular function which use the context they are invoked in (unless they have been bound using `Function#bind`).</span>
- <span id="66a9">if you implement an arrow function as a method in an object the context it will be bound to is NOT the object itself, but the global context.</span>
- <span id="b6e8">so you can’t use an arrow function to define a method directly</span>

### Implement a closure and explain how the closure effects scope

#### a closure is “the combination of a function and the lexical environment within which that function was declared”

- <span id="bb50">**alternatively, “when an inner function uses or changes variables in an outer function”**</span>
- <span id="87c8">closures have access to any variables within their own scope + scope of outer functions + global scope</span>
- <span id="a9e4">the set of all these available variables is “lexical environemnt”</span>
- <span id="8562">closure keeps reference to all variables \*\* even if the outer function has returned</span>
- <span id="0a13">Without a closure to access the variables of an outer function from within a call to an inner function the outer function ‘closed’ over …each function has a private mutable state that cannot be accessed externally</span>
- <span id="2d6a">The inner function will maintain a reference to the scope in which it was declared.so it has access to variables that were initialized in any outer scope- even if that scope</span>
- <span id="d0d9">The inner function will maintain a reference to the scope in which it was declared.so it has access to variables that were initialized in any outer scope- even if that scope</span>

### Q:

#### if a variable exists in the scope of what could have been accessed by a function(e.g.global scope, outer function, etc), does that variable wind up in the closure even if it never got accessed ?

### A:

#### if you change the value of a variable(e.g.i++) you will change the value of that variable in the scope that it was declared in

### Define a method that references `this` on an object literal

- <span id="e43c">when we use `this` in a method it refers to the object that the method is invoked on</span>
- <span id="568d">it will let you access other pieces of information from within that object, or even other methods</span>
- <span id="3cc8">method style invocation — `object.method(args)` (e.g. built in examples like `Array#push`, or `String#toUpperCase`)</span>
- <span id="e9b1">context is set every time we invoke a function</span>
- <span id="5423">function style invocation sets the context to the global object no matter what</span>
- <span id="31b8">being inside an object does not make the context that object! you still have to use method-style invocation</span>
- <span id="fa5a">Utilize the built in `Function#bind` on a callback to maintain the context of this</span>
- <span id="5e6d">when we call bind on a function, we get an exotic function back — so the context will always be the same for that new function</span>

can also work with arguments, so you can have a version of a function with particular arguments and a particular context.the first arg will be the context aka the \`this\` you want it to use.the next arguments will be the functions arguments that you are binding — if you just want to bind it to those arguments in particular, you can use \`null\` as the first argument, so the context won ‘t be bound, just the arguments — Given a code snippet, identify what \`this\` refers to

> Important to recognize the difference between scope and context

- <span id="a071">**scope works like a dictionary that has all the variables that are available within a given block, plus a pointer back the next outer scope(which itself has pointers to new scopes until you reach the global scope.so you can think about a whole given block ‘s scope as a kind of linked list of dictionaries) (also, this is not to say that scope is actually implemented in this way, that is just the schema that i can use to understand it)**</span>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*ATcQhZwwSH5EPFWk.gif" class="graf-image" /></figure>-   <span id="f933">**context refers to the value of the \`this\` keyword**</span>
-   <span id="03e2">the keyword \`this\` exists in every function and it evaluates to the object that is currently invoking that function</span>
-   <span id="7933">so the context is fairly straightforward when we talk about methods being called on specific objects</span>
-   <span id="f7bb">you could, however, call an object ‘s method on something other than that object, and then this would refer to the context where/how it was called, e.g.</span>

### CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!

- <span id="1757">could throw an error if it expects this to have some other method or whatever that doesn’t exist</span>
- <span id="11b1">you could also overwrite values or assign values to exist in a space where they should not exist</span>
- <span id="e2bc">if you call a function as a callback, it will set `this` to be the outer function itself, even if the function you were calling is a method that was called on a particular object</span>

we can use strict mode with `"use strict";` this will prevent you from accessing the global object with `this` in functions, so if you try to call `this` in the global context and change a value, you will get a type error, and the things you try to access will be undefined

- <span id="2d21">CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!</span>
- <span id="e8e4">could throw an error if it expects this to have some other method or whatever that doesn’t exist</span>
- <span id="b227">you could also overwrite values or assign values to exist in a space where they should not exist</span>
- <span id="a0a0">if you call a function as a callback, it will set `this` to be the outer function itself, even if the function you were calling is a method that was called on a particular object</span>

> _we can use strict mode with_ `"use strict";` _this will prevent you from accessing the global object with_ `this` _in functions, so if you try to call_ `this` _in the global context and change a value, you will get a type error, and the things you try to access will be undefined_

### POJOs

### POJOs

#### 1. Label variables as either Primitive vs. Reference

Javascript considers most data types to be ‘primitive’, these data types are immutable, and are passed by value. The more complex data types: Array and Object are mutable, are considered ‘reference’ data types, and are passed by reference.

- <span id="05bb">Boolean — Primitive</span>
- <span id="a5ab">Null — Primitive</span>
- <span id="8aa7">Undefined — Primitive</span>
- <span id="5c6b">Number — Primitive</span>
- <span id="2e68">String — Primitive</span>
- <span id="e2a1">Array — Reference</span>
- <span id="1fe0">Object — Reference</span>
- <span id="545b">Function — Reference</span>

#### 2. Identify when to use . vs \[\] when accessing values of an object

#### 3. Write an object literal with a variable key using interpolation

#### 4. Use the obj\[key\] !== undefined pattern to check if a given variable that contains a key exists in an object

#### 5. Utilize Object.keys and Object.values in a function

#### 6. Iterate through an object using a for in loop

#### 7. Define a function that utilizes …rest syntax to accept an arbitrary number of arguments

#### 8. Use …spread syntax for Object literals and Array literals

#### 9. Destructure an array to reference specific elements

#### 10. Destructure an object to reference specific values

#### 11. Write a function that accepts a string as an argument and returns an object representing the count of each character in the array

### Review of Concepts

#### 1. Identify the difference between const, let, and var declarations

#### 2. Explain the difference between const, let, and var declarations

    var a = "a";

- <span id="cb01">`var` is the historical keyword used for variable declaration.</span>
- <span id="f2d5">`var` declares variables in function scope, or global scope if not inside a function.</span>
- <span id="8c4a">We consider `var` to be deprecated and it is never used in this course.</span>

<!-- -->

    let b = "b";

- <span id="9912">`let` is the keyword we use most often for variable declaration.</span>
- <span id="f9dd">`let` declares variables in block scope.</span>
- <span id="75e1">variables declared with `let` are re-assignable.</span>

<!-- -->

    const c = "c";

- <span id="5f80">`const` is a specialized form of `let` that can only be used to initialize a variable.</span>
- <span id="7bc0">Except when it is declared, you cannot assign to a `const` variable.</span>
- <span id="5df7">`const` scopes variables the same way that `let` does.</span>

#### 3. Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining

Consider this `run` function, inside which `foo` and `bar` have `function scope` . `i` and `baz` are scoped to the block expression.

Notice that referencing `baz` from outside it's block results in JavaScript throwing a ReferenceError.

Consider this `run` function, inside of which `foo` has `function scope` .

#### 6. Implement a closure and explain how the closure effects scope

#### 4. Define an arrow function

    const returnValue = (val) => val;

This simple construct will create a function that accepts `val` as a parameter, and returns `val` immediately. We do not need to type `return val` , because this is a single-line function.

Identically, we could write

    const returnValue = (val) => {
        return val;
    };

#### 5. Given an arrow function, deduce the value of `this` without executing the code

If we use a function declaration style function, the `this` variable is set to the `global` object (i.e. `Object [global]` in Node. JS and `Window` in your browser).

    const adder = (arr) => {
        console.log(this);
        arr.reduce((acc, ele) => sum += ele);
    };
    adder([1, 2, 4, 6]);

In this example, we use a fat arrow style function. Note that when we declare a functions like this `this` becomes

#### 7. Define a method that references this on an object literal

#### 8. Utilize the built in Function\#bind on a callback to maintain the context of `this`

#### 9. Given a code snippet, identify what `this` refers to

<a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br />
<em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a>

<figure><img src="https://cdn-images-1.medium.com/max/800/0*Ff29X3kTbA17Qgoz.jpg" class="graf-image" /></figure>

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [August 11, 2021](https://medium.com/p/8e093a665b04).

<a href="https://medium.com/@bryanguner/fundamental-concepts-in-javascript-8e093a665b04" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.

# Fundamental Concepts In React That Will Probably Come Up On An Interview

Incomplete Article

---

### Fundamental Concepts In React That Will Probably Come Up On An Interview

#### Incomplete Article

<a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>A list of all of my articles to link to future posts</strong><br />
<em>You should probably skip this one… seriously it’s just for internal use!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a>

**Explain how React uses a tree data structure called the “virtual DOM” to model the DOM**

> ↠The Virtual DOM is an in-memory tree representation of the browser’s Document Object Model. React’s philosophy is to interact with the Virtual DOM instead of the regular DOM for developer ease and performance.

> ↠By abstracting the key concepts from the DOM, React is able to expose additional tooling and functionality increasing developer ease.

> ↠By trading off the additional memory requirements of the Virtual DOM, React is able to optimize for efficient subtree comparisons, resulting in fewer, simpler updates to the less efficient DOM. The result of these tradeoffs is improved performance.

<figure><img src="https://cdn-images-1.medium.com/max/800/0*iVSdRNTWikevU4dG.png" class="graf-image" /></figure>

---

### **Describe how JSX transforms into React.createElement calls:**

#### ↠JSX is a special format to let you construct virtual DOM nodes using familiar HTML-like syntax. You can put the JSX directly into your .js files, however you must run the JSX through a pre-compiler like <a href="https://babeljs.io/" class="markup--anchor markup--h4-anchor">Babel</a> in order for the browser to understand it.

#### ↠ReactDOM.render is a simple function which accepts 2 arguments: what to render and where to render it:

---

### Describe how JSX transforms into React.createElement calls:

> ↠JSX is a special format to let you construct virtual DOM nodes using familiar HTML-like syntax.

> ↠You can put the JSX directly into your .js files, however you must run the JSX through a pre-compiler like <a href="https://babeljs.io/" class="markup--anchor markup--blockquote-anchor">Babel</a> in order for the browser to understand it.

---

> **_Here we initialize a Clock component using JSX instead of React.createElement ._**

> Using <a href="https://babeljs.io/" class="markup--anchor markup--pullquote-anchor">Babel</a> this code is compiled to a series of recursively nested createElement calls:

### TBC…

By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [June 29, 2021](https://medium.com/p/5495b6421287).

<a href="https://medium.com/@bryanguner/fundamental-concepts-in-react-that-will-probably-come-up-on-an-interview-5495b6421287" class="p-canonical">Canonical link</a>

Exported from [Medium](https://medium.com) on August 24, 2021.