completed

Author: btholt

lessons/03-rscs-without-a-framework/A-intro-to-react-server-components.md

@@ -36,7 +36,7 @@ We'll end up writing a whole app in Next.js by the end of the course, but we're
 
 ## NotePasser
 
-Remember in school when you would pass notes by hand? No? Well, back in my day (_shakes fist at passing cloud_) we didn't have cell phones and had to rely penmanship and steathily trying to pass a paper note to our friend in class.
+Remember in school when you would pass notes by hand? No? Well, back in my day (_shakes fist at passing cloud_) we didn't have cell phones and had to rely on penmanship and steathily trying to pass a paper note to our friend in class.
 
 We're going to build an app inspired by that today, where we can pass notes from one user to another.
 

lessons/03-rscs-without-a-framework/B-rsc-dependencies.md

@@ -1,3 +1,7 @@
+---
+title: "RSC Dependencies"
+---
+
 There's a lot to getting this set up by hand, but bear with me, and I promsie at the end of this you're going to understand RSCs at a depth that allows you to make trade-offs of when to use them and when to avoid them.
 
 So, first, we're going to use Webpack and Babel directly (despite normally I'd suggest Vite.) Why? Because this allows us to use the React team's code directly without a layer indirection between Vite and Webpack. In general I suggest Vite for React devs.
@@ -145,6 +149,8 @@ Looks quite similar to our previous ones. Let's make a /public/index.css. [Copy
 
 Copy [this SQLite file][sqlite] to your root directory as well.
 
+> Both of these files should be in the root directory of the project if you cloned it. notes.db and index.css. Put them into your project
+
 Lastly add these scripts to your package.json
 
 ```json
@@ -158,5 +164,5 @@ Okay, this should give us everything that's needed for our app to function befor
 
 Another new thing you might be the `--conditions react-server` part of running our server app. This lets Node.js know how to resolve its modules - we're in a react-server condition so only import those and know not to import client modules. I had never used this feature of Node.js before but it's pretty cool, even if it's a bit niche.
 
-[css]:
-[sqlite]:
+[css]: https://raw.githubusercontent.com/btholt/irv6-project/refs/heads/main/completed/no-framework/public/index.css
+[sqlite]: https://github.com/btholt/irv6-project/blob/main/notes.db

lessons/05-performance-optimizations/B-the-project.md

@@ -1,3 +1,8 @@
+> You will need to open the folder `perf` from the repo in your project.
+>
+> - [The starter template][starter]
+> - [The completed project][completed]
+
 Let's open the `perf` project in our repo and run `npm install`.
 
 We're going to build a markdown previewer! On some laptops this can be pretty slow to parse and re-render to the DOM. On my laptop it's actually fast enough to get through it so we're going to introduce some artifical jank. Your computer may not need it.
@@ -89,3 +94,5 @@ Alright, go play with it now (you may need to mess with the JANK_DELAY as well a
 So how can we fix at least the scroll portion, as well make the other two a little less painful (as they'll only re-renderingo once as opposed to continually.)
 
 [xss]: https://owasp.org/www-community/attacks/xss/
+[starter]: https://github.com/btholt/irv6-project/tree/main/starter/perf
+[completed]: https://github.com/btholt/irv6-project/tree/main/completed/perf

lessons/06-transitions/B-the-project.md

@@ -1,6 +1,9 @@
-We're making a little scoreboard project, let's familiar ourselves with it.
+> You will need to open the folder `transitions` from the repo in your project.
+>
+> - [The starter template][starter]
+> - [The completed project][completed]
 
-[Start with the transitions][folder]. The complete solution is in the [transitions-complete][complete] folder if you need to reference it.
+We're making a little scoreboard project, let's familiar ourselves with it.
 
 - Run `npm install`
 - It's a plain ol' Vite project. No server side anything. You can do transitions with servers, we just don't need to.
@@ -9,5 +12,5 @@ We're making a little scoreboard project, let's familiar ourselves with it.
 - Vite will proxy the Node.js server from port 3000 to port 5173 so you can call localhost:5173/score?game=1 - all same origin
 - Everything else is a pretty standard React project.
 
-[folder]:
-[complete]:
+[starter]: https://github.com/btholt/irv6-project/tree/main/starter/transitions
+[completed]: https://github.com/btholt/irv6-project/tree/main/completed/transitions

lessons/07-optimistic-values/B-the-project.md

@@ -1,3 +1,8 @@
+> You will need to open the folder `optimistic` from the repo in your project.
+>
+> - [The starter template][starter]
+> - [The completed project][completed]
+
 Let's open the project.
 
 1. Open optimisitic folder in your editor of choice
@@ -76,3 +81,6 @@ export default function App() {
 - The big issue here is that the user is shown no feedback while the POST happening.
 - We could just append to thoughts and hope for the best - and this is what we used to do.
 - However we can use `useOptimisticState` and get a lot of the error cases and other problems wrapped up and taken care of for us.
+
+[starter]: https://github.com/btholt/irv6-project/tree/main/starter/optimistic
+[completed]: https://github.com/btholt/irv6-project/tree/main/completed/optimistic

lessons/08-deferred-values/B-the-project.md

@@ -1,4 +1,7 @@
-Open the `deferred` project from our repo.
+> You will need to open the folder `deferred` from the repo in your project.
+>
+> - [The starter template][starter]
+> - [The completed project][completed]
 
 Let's hop into our src directory and create a Slider.jsx file.
 
@@ -130,3 +133,6 @@ export default function App() {
 
 - Now we can see something rendered. Notice it's _super_ janky.
 - You'll notice that DisplayImage is re-rendering 100% of the time. This is because we haven't memoized it and also filterStyle is changing every time a slider is. When props change, a component will always re-render, memoized or not.
+
+[starter]: https://github.com/btholt/irv6-project/tree/main/starter/deferred
+[completed]: https://github.com/btholt/irv6-project/tree/main/completed/deferred

styles/courses.css

@@ -40,7 +40,7 @@ a {
 }
 
 .navbar {
-  border-bottom: 1px solid #ccc;
+  border-bottom: 2px solid var(--icons);
   position: fixed;
   width: 100%;
   top: 0;
@@ -90,7 +90,7 @@ header .cta-btn {
 .cta-btn {
   border-radius: 10px;
   background: var(--nav-buttons);
-  color: var(--nav-buttons-text);
+  color: black;
   padding: 7px 20px;
   display: flex;
   justify-content: center;
@@ -340,6 +340,10 @@ blockquote > *:last-child {
   margin-bottom: 0;
 }
 
+blockquote > *:first-child {
+  margin-top: 0;
+}
+
 .lesson-content img {
   max-width: 100%;
 }
@@ -424,6 +428,8 @@ ol.sections-name .lesson-details {
   flex: 1;
   background: var(--bg-lesson);
   position: relative;
+  border: 2px solid var(--icons);
+  border-radius: 4px;
 }
 
 .details-bg {
@@ -491,7 +497,7 @@ ol.sections-name .lesson-details {
 .lesson-links a {
   border-radius: 10px;
   background: var(--nav-buttons);
-  color: var(--nav-buttons-text);
+  color: black;
   padding: 15px 20px;
   display: inline-block;
   display: flex;
@@ -511,6 +517,7 @@ ol.sections-name .lesson-details {
 .lesson-links a:hover {
   background: #152837;
   text-decoration: none;
+  color: var(--icons);
 }
 
 .lesson-links .arrow {