bringing stuff over

Author: bradwestfall

examples/02-npm-basics/package-lock.json

@@ -0,0 +1,100 @@
+# Intro Lecture
+
+## Main Topics to Cover
+
+- ✅ Overview
+  - Node vs JavaScript
+  - MDN is the official documentation for JS?
+  - NVM
+  - How version numbers work
+  - Now NPM and package.json works
+  - package.json scripts
+  - Modules (CommonJS vs ESM)
+- ✅ Scope
+- ✅ Object and Array literals
+- ✅ Function Types
+- ✅ Expressions and Expression Chaining
+- ✅ File System (fs)
+
+This first lesson gives the attendees an overview of modern JavaScript syntax. Each topic doesn't have to be taught in exactly this order, but these should be the main takeaways by the lesson is done.
+
+## Overview
+
+Node is:
+
+- Asynchronous, event-driven, and non-blocking
+- Single Threaded
+- Uses Event Loop to handle requests and concurrency
+
+Modules:
+
+- Modules are file-based. Import any variable from a module including numbers, strings, arrays, classes, and functions.
+- We can also resolve a folder with an `index.js` file
+- Modules resolve: Core Modules, `npm_modules`, local modules
+
+## Scope
+
+The staring point for the lecture code has function scope with `var`. If we change the `i` to use `let` and `item` to use `const` we can demonstrate block scope.
+
+Talking Points:
+
+- Function Scope vs Block Scope (`var` vs `let` vs `const`)
+- `this` in JavaScript
+
+## Object and Array Literals
+
+- We don't need classes to have objects
+- Destructuring Objects and Arrays
+
+## Function Types
+
+Talking Points:
+
+- Declarations
+- Expressions
+- Arrow Functions (with implicit returns)
+- Callbacks
+
+## Expressions and Expression Chaining
+
+Talking Points:
+
+- Map, Reduce, Filter, Find
+
+## File System (synchronous `fs`)
+
+```js
+const fs = require('fs')
+const path = require('path')
+const dataPath = path.join(__dirname, `data.csv`)
+const data = fs.readFileSync(dataPath, 'utf8')
+
+let json = data
+  .split('\n')
+  .map((item) => {
+    const [id, name] = item.split(',')
+    return `{ "id": ${id}, "name": "${name}" }`
+  })
+  .join(',\n')
+
+json = `{ "users": [${json}] }`
+
+console.log(JSON.parse(json))
+```
+
+The above code has bugs unless we do these fixes:
+
+```js
+let json = data
+  .split('\n')
+  .map((item) => {
+    const [id, name] = item.split(',')
+    return id ? `{ "id": ${id}, "name": "${name.trim()}" }` : false // <-- Add ternary
+  })
+  .filter(Boolean) // <-- Add filter
+  .join(',\n')
+
+json = `{ "users": [${json}] }`
+
+console.log(JSON.parse(json))
+```

examples/03-module-basics/package-lock.json

@@ -0,0 +1,5 @@
+1, Michael Jackson
+2, Ryan Florence
+3, Brad Westfall
+4, Chance Stickland
+

examples/04-browser-modules/package-lock.json

@@ -0,0 +1,92 @@
+console.log("let's get started")
+
+/**
+ * Intro
+ */
+
+// EcmaScript, JavaScript, Node
+
+/**
+ * Versions
+ */
+
+// Node Versions
+// https://nodejs.dev/en/about/releases/
+
+/**
+ * Globals
+ */
+
+// https://nodejs.org/docs/latest/api/globals.html
+// console.log(process.versions)
+// console.log('process.cwd():', process.cwd())
+// console.log('__dirname:', __dirname)
+// console.log('__filename:', __filename)
+
+/**
+ * Modules
+ */
+
+// CommonJS
+// ESModules
+
+/**
+ * Env
+ */
+
+// require('dotenv').config()
+// console.log(process.env.SECRET) // from .env
+// console.log(process.env.NODE_ENV)
+
+/**
+ * Scope
+ */
+
+// var x = [5, 6, 7]
+// function scope() {
+//   for (var i = 0; i < x.length; i++) {
+//     var item = x[i]
+//     console.log(item)
+//   }
+
+//   console.log(i)
+//   console.log(item)
+// }
+// scope()
+
+/**
+ * Object and Array Literals
+ */
+
+/**
+ * Function Types
+ */
+
+/**
+ * Expressions and Expression Chaining
+ */
+
+/**
+ * Map, Filter, Reduce, Find, Includes
+ */
+
+/**
+ * File System
+ */
+
+// const fs = require('fs')
+// const path = require('path')
+// const dataPath = path.join(__dirname, `data.csv`)
+// const data = fs.readFileSync(dataPath, 'utf8')
+
+// let json = data
+//   .split('\n')
+//   .map((item) => {
+//     const [id, name] = item.split(',')
+//     return `{ "id": ${id}, "name": "${name}" }`
+//   })
+//   .join(',\n')
+
+// json = `{ "users": [${json}] }`
+
+// console.log(JSON.parse(json))

lessons/01-js-and-node/lecture/NOTES.md

@@ -0,0 +1,8 @@
+{
+  "users": [
+    { "id": 1, "name": "Michael Jackson" },
+    { "id": 2, "name": "Ryan Florence" },
+    { "id": 3, "name": "Brad Westfall" },
+    { "id": 4, "name": "Chance Stickland" }
+  ]
+}

lessons/01-js-and-node/lecture/data.csv

@@ -0,0 +1,9 @@
+const data = require('./data.json')
+// console.log(data)
+
+// Task:
+// Output `Ryan's id is 2`
+
+const ryan = data.users.find((user) => user.name.includes('Ryan'))
+const name = ryan.name.split(' ')[0]
+console.log(`${name}'s id is ${ryan.id}`)

lessons/01-js-and-node/lecture/index.js

@@ -0,0 +1,12 @@
+const data = require('./data.json')
+console.log(data)
+
+// Task:
+// Output `Ryan's id is 2`
+
+// Use <Array>.find() to find the object that has Ryan's name
+// Use <String>.includes() to see if a string includes a value (case sensitive)
+// Use <String>.split() to split a string into an array based on the argument delimiter
+// Use Template Strings to create the output
+
+// All exercises have a `.final` for files that you worked on if you need to see a solution

lessons/01-js-and-node/practice/data.json

@@ -0,0 +1,119 @@
+# Promises Lecture
+
+## Main Topics to Cover
+
+- ✅ General overview of asynchronous code
+- ✅ Single Threaded JavaScript
+- ✅ Event Loop
+- ✅ `process.nextTick()`
+- ✅ `setTimeout(fn, 0)` and `setImmediate()`
+  - https://nodejs.dev/en/learn/understanding-setimmediate/
+- ✅ fetch API
+- ✅ Promises
+
+## Lecture
+
+Progression of code for making our own promise-based function:
+
+```ts
+// ----------------
+// 1. Start
+const data = fs.readFileSync(dataPath, 'utf8')
+
+// ----------------
+// 2. Callback Approach
+fs.readFile(dataPath, 'utf8', (err, data) => {
+  console.log(data)
+})
+
+// ----------------
+// 3. Custom getCSVFile Function (callbacks)
+type Callback = (err: NodeJS.ErrnoException | null, data?: string) => void
+
+function getCSVFile(path: string, cb: Callback) {
+  fs.readFile(path, 'utf8', (err, data) => {
+    if (err) {
+      cb(err)
+      return
+    }
+    cb(null, data)
+  })
+}
+
+getCSVFile(dataPath, (err, data) => {
+  console.log(err, data)
+})
+
+// ----------------
+// 4. Use fsPromises to start explaining promises
+
+// const fsPromises = require('fs').promises
+import { promises as fsPromises } from 'fs'
+
+function getCSVFile(path: string) {
+  const p = fsPromises.readFile(path, 'utf8')
+  p.then((data) => {
+    console.log(data)
+  })
+  p.catch((err) => {
+    console.log(err)
+  })
+  // fs.readFile(path, 'utf8', (err, data) => {
+  //   if (err) {
+  //     cb(err)
+  //     return
+  //   }
+  //   cb(null, data)
+  // })
+}
+
+getCSVFile(dataPath)
+
+// ----------------
+// What if fsPromise never existed, let's make our own promise
+// 5. Refactor the old callback code to use promises
+function getCSVFile(path: string) {
+  return new Promise<string>((resolve, reject) => {
+    fs.readFile(path, 'utf8', (err, data) => {
+      if (err) {
+        reject(err)
+        return
+      }
+      resolve(data)
+    })
+  })
+}
+
+getCSVFile(dataPath).then((data) => {
+  console.log(data)
+})
+```
+
+It would be good to mention that most the time we use promises, we're consumers of an API or a native function that gives us a promise, so we don't typically have to do `new Promise` a lot. Let's consume this `fetch` promise-based function to get data from another server:
+
+```ts
+// ----------------
+// 6.
+
+// Change the lesson to start
+import fetch from 'node-fetch'
+
+function getVehicle(url: string) {
+  return fetch(url).then((response) => response.json())
+}
+
+function getPersonVehicles(id: number): Promise<string[]> {
+  return fetch(`https://swapi.dev/api/people/${id}`)
+    .then((response) => response.json())
+    .then((data) => data.vehicles)
+}
+
+getPersonVehicles(1)
+  .then((vehicles) => {
+    const p = vehicles.map((url) => getVehicle(url))
+    return Promise.all(p)
+  })
+  .then((allVehicles) => {
+    console.log(allVehicles)
+  })
+```

lessons/01-js-and-node/practice/index.final.js

@@ -0,0 +1,5 @@
+1, Michael Jackson
+2, Ryan Florence
+3, Brad Westfall
+4, Chance Stickland
+