remove unpkg. offline ftw

.eslintignore

@@ -1,6 +1,6 @@
 node_modules
 build
-public/build
+public
 playwright-report
 test-results
 server-build

.prettierignore

@@ -1,7 +1,7 @@
 node_modules
 
 **/build/**
-**/public/build/**
+**/public/**
 .env
 
 **/package.json

exercises/01.js-hello-world/01.problem.hello/README.mdx

@@ -9,3 +9,12 @@ document.
 
 🐨 We'll be in <InlineFile file="index.html" /> to help guide you through making
 this work! See you there!
+
+👨‍💼 Once you're finished, open up the
+[browser devtools](https://developer.chrome.com/docs/devtools) so
+you can check the DOM is what you expect it to be.
+
+{/* prettier-ignore */}
+<callout-info class="aside">
+💡 Tip: you may find it useful to{' '}<a target="_blank" href="/app/playground">open the playground in a separate tab</a>{'.'}
+</callout-info>

exercises/01.js-hello-world/02.problem.root/index.html

@@ -9,7 +9,6 @@
 			// 🐨 you can even add the id to the root element if you like
 
 			const element = document.createElement('div')
-
 			element.className = 'container'
 			element.textContent = 'Hello World'
 

exercises/01.js-hello-world/02.solution.root/README.mdx

@@ -1 +1,7 @@
 # Generate the Root Node
+
+👨‍💼 Great! Now we can create DOM nodes dynamically using JavaScript. This is only
+the beginning of our journey. Creating DOM nodes ourselves is not typically the
+best way to build a full fledged application, but it's important for you to
+understand that what libraries like React are doing is not magic. They're just
+creating and modifying DOM nodes using JavaScript.

exercises/01.js-hello-world/FINISHED.mdx

@@ -1,3 +1,4 @@
 # Hello World in JS
 
-Great job! You did it!
+👨‍💼 Great job! You did it! Now's your opportunity to review what you learned.
+Writing down what you've learned helps you to remember it better.

exercises/01.js-hello-world/README.mdx

@@ -32,6 +32,11 @@ on top of that generated HTML for interactivity. However, as requirements for
 that interactivity became more challenging, this approach produced applications
 that were difficult to maintain and had performance issues.
 
+<callout-info class="aside">
+	If you'd like to learn more about the history, read [The Web's Next
+	Transition](https://www.epicweb.dev/the-webs-next-transition).
+</callout-info>
+
 So modern JavaScript frameworks were created to address some of the challenges
 by programmatically creating the DOM rather than defining it in hand-written
 HTML.
@@ -64,4 +69,6 @@ it easier (and you get a lot of other critical pieces to the puzzle as well).
 We're going to focus on the client-side of things in this workshop, but you can
 apply the same principles to frameworks like Remix. But let's just start with
 the total fundamentals of creating and appending our own DOM nodes before we
-get into the React side of things.
+get into the React side of things. I call this "going down to level up." You'll
+find yourself much more efficient with React if you understand the fundamentals
+of the DOM and JavaScript. So let's get started!

exercises/02.raw-react/01.problem.elements/README.mdx

@@ -1,13 +1,13 @@
 # Create React Elements
 
-Let's convert this to use React! But don't worry, we won't be doing any JSX just
+👨‍💼 Let's convert this to use React! But don't worry, we won't be doing any JSX just
 yet... You're going to use raw React APIs here.
 
 In modern applications you'll get React and React DOM files from a "package
 registry" like [npm](https://npmjs.com) ([react](https://npm.im/react) and
 [react-dom](https://npm.im/react-dom)). But for these first exercises, we'll use
-the script files which are available on [unpkg.com](https://unpkg.com) and
-regular script tags so you don't have to bother installing them. So in the
+the script files which are available in the `./public` directory of this repo
+and regular script tags so you don't have to bother installing them. So in the
 exercise you'll be required to add script tags for these files.
 
 Once you include the script tags, you'll have two new global variables to use:
@@ -50,5 +50,7 @@ ReactDOM.createRoot(rootElement).render(reactElement)
 
 Alright! Let's do this!
 
-💰 Tip: `console.log` the `reactElement` to see what it looks like. You might
-find it kinda interesting!
+<callout-info class="aside">
+	💰 Tip: `console.log` the `reactElement` to see what it looks like. You might
+	find it kinda interesting!
+</callout-info>

exercises/02.raw-react/01.problem.elements/index.html

@@ -1,10 +1,13 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
 
 	<!-- 🐨 add React and ReactDOM on the page.
 			 💰 Here are script tags that'll do the job:
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
 	-->
 
 	<script type="module">

exercises/02.raw-react/01.solution.elements/README.mdx

@@ -1 +1,5 @@
 # Create React Elements
+
+👨‍💼 Great work! We're well on our way to using React for building UIs on the web!
+But most apps are a little more complicated than a single element. Let's go
+deeper!

exercises/02.raw-react/01.solution.elements/index.html

@@ -1,7 +1,10 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
 	<script type="module">
 		const rootElement = document.getElementById('root')
 		const element = React.createElement('div', {

exercises/02.raw-react/02.problem.nesting/README.mdx

@@ -1,7 +1,7 @@
 # Nesting Elements
 
-See if you can figure out how to write the JavaScript + React code to generate
-this DOM output:
+👨‍💼 See if you can figure out how to write the JavaScript + React code to
+generate this DOM output:
 
 ```html
 <ul class="sams-food">
@@ -10,5 +10,9 @@ this DOM output:
 </ul>
 ```
 
+Hint: you'll be using the `children` prop!
+
 Note also, depending on how you implement this, you may get a warning in the
 developer console about needing a "key" prop. We'll get to that later.
+
+- [📜 `createElement`](https://react.dev/reference/react/createElement#createelement)

exercises/02.raw-react/02.problem.nesting/index.html

@@ -1,7 +1,10 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
 	<script type="module">
 		const rootElement = document.getElementById('root')
 		const element = React.createElement('div', {

exercises/02.raw-react/02.solution.nesting/README.mdx

@@ -1,4 +1,4 @@
 # Nesting Elements
 
 👨‍💼 Great! Now we've got a nice way to nest our React elements so we can build
-complex structures in our generated HTML. Let's go deeper!
+complex structures in our generated HTML. Let's go **even deeper**!

exercises/02.raw-react/02.solution.nesting/index.html

@@ -1,7 +1,10 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
 	<script type="module">
 		const rootElement = document.getElementById('root')
 		const element = React.createElement('div', {

exercises/02.raw-react/03.problem.deep-nesting/README.mdx

@@ -1,7 +1,7 @@
 # Deep Nesting Elements
 
-👨‍💼 Let's go a little deeper. Just to make sure we really understand how to nest
-this stuff. Try to create this using React's APIs:
+👨‍💼 Just to make sure we really understand how to nest this stuff. Try to create
+this using React's APIs:
 
 ```html
 <div class="container">

exercises/02.raw-react/03.problem.deep-nesting/index.html

@@ -1,7 +1,10 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
 	<script type="module">
 		const rootElement = document.getElementById('root')
 

exercises/02.raw-react/03.solution.deep-nesting/index.html

@@ -1,7 +1,10 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
 	<script type="module">
 		const rootElement = document.getElementById('root')
 		const element = React.createElement(

exercises/02.raw-react/FINISHED.mdx

@@ -1,4 +1,4 @@
 # Raw React APIs
 
-Wahoo! I'll bet you're excited to get into JSX after working with the raw APIs
-huh? 😅
+👨‍💼 Wahoo! I'll bet you're excited to get into JSX after working with the raw
+APIs huh? 😅

exercises/02.raw-react/README.mdx

@@ -5,7 +5,7 @@ same APIs that you're using when it creates DOM nodes.
 
 <callout-success>
 	In fact, [here's where that happens in the React source
-	code](https://github.com/facebook/react/blob/5dd35968bef791ccc5948c657fabf191a77fff3f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L479)
+	code](https://github.com/facebook/react/blob/fb10a2c66a923d218471b535fdaf0dbc530417ee/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L480)
 	at the time of this writing.
 </callout-success>
 
@@ -31,10 +31,14 @@ the web:
 - ReactDOM: responsible for rendering React elements to the DOM (kinda like
   `rootElement.append()`)
 
-You can learn more about this in [the react docs](https://react.dev/reference/react).
+You can learn more about this in
+[the react docs](https://react.dev/reference/react).
 
-We'll also be using a service called [unpkg.com](https://unpkg.com/) to load
-these files into our application. unpkg is a CDN (content delivery network) for
-any file that's on npm. It works great for our purposes of keeping this as
-simple as possible so you can learn React and not get distracted by a bunch of
-tools (don't worry, those will come later).
+We'll also be loading these files into our application from the `./public`
+directory. This works great for our purposes of keeping this as simple as
+possible so you can learn React and not get distracted by a bunch of tools
+(don't worry, those will come later).
+
+Finally, from now on, as you save your work, the browser will reload
+automatically thanks to the `kcd_ws.js` file we'll be including at the top of
+the `index.html` file. You're welcome 😊.

exercises/03.using-jsx/01.problem.intro/index.html

@@ -1,11 +1,14 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
 
 	<!-- 🐨 add Babel to the page.
 			 💰 Here is the script tag that'll do the job:
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/babel-standalone.js"></script>
 	-->
 
 	<script type="module">

exercises/03.using-jsx/01.solution.intro/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const element = <div className="container">Hello World</div>
 		ReactDOM.createRoot(document.getElementById('root')).render(element)

exercises/03.using-jsx/02.problem.interpolation/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const element = <div className="container">Hello World</div>
 		ReactDOM.createRoot(document.getElementById('root')).render(element)

exercises/03.using-jsx/02.solution.interpolation/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const children = 'Hello World'
 		const className = 'container'

exercises/03.using-jsx/03.problem.spread/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const children = 'Hello World'
 		const className = 'container'

exercises/03.using-jsx/03.solution.spread/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const children = 'Hello World'
 		const className = 'container'

exercises/03.using-jsx/04.problem.nesting/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const children = 'Hello World'
 		const className = 'container'

exercises/03.using-jsx/04.solution.nesting/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const rootElement = document.getElementById('root')
 		const element = (

exercises/03.using-jsx/05.problem.fragments/index.html

@@ -1,8 +1,11 @@
 <body>
+	<!-- this is here to add automatic browser reloading as you save your work -->
+	<script type="module" src="kcd_ws.js"></script>
+
 	<div id="root"></div>
-	<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
-	<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
-	<script src="https://unpkg.com/@babel/standalone@7.23.5/babel.js"></script>
+	<script src="/react.js"></script>
+	<script src="/react-dom.js"></script>
+	<script src="/babel-standalone.js"></script>
 	<script type="text/babel">
 		const rootElement = document.getElementById('root')
 		const element = (