| Video / Lesson Title | Recorded | Section | Description | Video URI |
|---|---|---|---|---|
| Hype Trailer | x | https://youtu.be/A0wabjmYRZ0 | ||
| Trailer | x | Trailer | https://youtu.be/5PB9UDOIuGk | |
| Introduction to the Course | x | Introduction | https://youtu.be/w0R1fE3qU5c | |
| Prequisites | x | Introduction | What you need to know or have to get the most out of this course | https://youtu.be/KrEtdI2KIRc |
| Join the community | x | Introduction | We have a community where we can ask questions, and give/receive help | https://youtu.be/Hp8_-YF_lEw |
| Setting up Rust | x | Setting Up | We're installing rust and some nice Cargo packages | https://youtu.be/o0se4Erg_g0 |
| Installing Wasm Bindgen CLI | x | Setting Up | Wasm Bindgen CLI is required to run Trunk without errors | https://youtu.be/1rXiwVmw0kk |
| Hello World in Rust | x | First Steps | Our first Rust program | https://youtu.be/NQ5q7LgpzMQ |
| Hello World in Yew.rs | x | First Steps | Now that we have a working Rust program, let's create our first Yew.rs program | https://youtu.be/uFUpC8yj6TQ |
| A better Hello World architecture | x | First Steps | Having everything in main.rs isn't ideal, let's set up a basic architecture that will work with us | https://youtu.be/k-gVqe3HgwY |
| Logging to the Console | x | First Steps | Logging to the console is one of the best ways to debug in browsers | https://youtu.be/NFOBWILWb1o |
| HTML in Rust | x | html | https://youtu.be/NeClBLl6uYk | |
| HTML Conditionals | x | html | https://youtu.be/sBXnesJGiHM | |
| HTML Loops | x | html | https://youtu.be/VmZLpP0jUGc | |
| Introduction to stylist | x | styling | We will be using a crate called stylist to apply css to our components | https://youtu.be/IQS6tWQWeYY |
| Inline styles | x | styling | The first and simplest of adding styles is to directly style the html | https://youtu.be/qj_mBAcaSaE |
| Separate CSS file | x | styling | We don't have to give up our editors helping with with css, we can use a separate css file! | https://youtu.be/RosdwpfOZU4 |
| Passing properties into components | x | properties | Components that can't receive data are boring | https://youtu.be/ure8M6FO-PA |
| enum properties | x | properties | Sometimes we want more advanced properties | https://youtu.be/Gv7N468f-WE |
| Callbacks | x | properties | We use callbacks so that we can communicate up to parent components | https://youtu.be/4yOf0_5r_wg |
| creating a form | x | handling events and hooks | We'll be creating a form so that we can explore handling DOM events | https://youtu.be/Y37wK1lMZws |
| handling text field events | x | handling events and hooks | Let's add a event handler to the text field | https://youtu.be/BRlt_hrHUfE |
| use state | x | handling events and hooks | React style hooks exist in Yew.rs! this maens we can set and use state in functional components! | https://youtu.be/LtZWzP4XVxs |
| multiple states | x | handling events and hooks | https://youtu.be/0lspzbYC1Zw | |
| one complicated state | x | handling events and hooks | https://youtu.be/cdsHbA-mY5s | |
| Simplifying Complicated State Updates | x | handling events and hooks | https://youtu.be/R3Bdpb9z43Y | |
| handling form submit events | x | handling events and hooks | It can be nice to handle form submit events rather than just a click listener on buttons | https://youtu.be/2JNw-ftN6js |
| Use Context Hook | x | handling events and hooks | access context state without needing prop drill many levels down | https://youtu.be/4XP8ZSgqqLI |
| Use Effect Hook | x | handling events and hooks | use effect allows us to hook into the event lifecycle and run code on first launch, every refresh, and shut down. | https://youtu.be/xdzmMiT6K5E |
| Setting up Yew Router | x | router | We can set up a frontend router so that we don't have to touch the server when navigating pages | https://youtu.be/ijogSYDzwiE |
| Linking to Pages | x | router | https://youtu.be/twl8rl_m2pE | |
| Programatic Linking to Pages | x | router | https://youtu.be/kEbfqmfbC_w | |
| Struct Components | x | struct components | Struct components are similar to Class-based components in React or Vue.js | https://youtu.be/eG6eKNh2YdI |
| styling struct componets | x | struct components | Styling is pretty much the same, the only real difference is where to store the stylesheet | https://youtu.be/KC7HCxr6OCE |
| struct properties | x | struct components | The props are stored in the context object | https://youtu.be/qIIWv9oB_hU |
| struct lifecycle methods | x | struct components | These methods are available on the impl of the component struct | https://youtu.be/HKAM6p34aIA |
| struct messages | x | struct components | Saving state in a struct component uses message passing | https://youtu.be/skvKGK9wzsg |
| Setting up Yewdux | x | stores | Yewdux is very similar to Redux for state management | https://youtu.be/-aHUoxHShS8 |
| Using Yewdux to Store Form Data | x | stores | We want to create a form and save it's data to the Yewdux store | https://youtu.be/cfxiv37bgxQ |
| Yewdux Functional | x | stores | https://youtu.be/mn3tRwXr22g | |
| Persistent State | x | stores | To handle staying logged in between page refreshes we can store our internal state, or at least the user information to local storage | https://youtu.be/rL7W_Jw5beo |
| Installing Docker | x | Setting Up | A server and database has been created to help us focus on front end dev, we can use Docker to set that up easily | https://youtu.be/Lg0R5q0S7QY |
| Starting the Todo Server | x | Setting Up | A crash course on using Docker and Docker-Dompose | https://youtu.be/RyOAa7KIyd4 |
| HTTP GET Requests | x | http | Websites are boring unless we can get data from other locations | https://youtu.be/P6p5Qzxva1s |
| HTTP post requests | x | http | We want to be able to create things in the database, this is usually done with a post request | https://youtu.be/2uvZDZoR_1c |
| Other HTTP requests | x | http | Updating resources uses either put or patch | https://youtu.be/Fo8wRW4Cjtk |
| Dynamically Setting the API_URI | x | http | We want to have one API URI for dev, and one for production | https://youtu.be/p07ALGFIWjo |
| Set Timeout | x | Miscellaneous | Being able to run arbitrary code after a short delay is great for having animations run | https://youtu.be/yAFOgUQ9ChU |
| Introducing the Project | x | Introducing the Project | Getting the backend up and running and exploring the API | https://youtu.be/Y_51NHzr4Pk |
| Project Solution Live Code - 1 | x | Live coding the project | uploaded | |
| Project Solution Live Code - 2 | x | Live coding the project | uploaded | |
| Project Solution Live Code - 3 | x | Live coding the project | https://youtu.be/1J6U5m_ZB1w | |
| Project Solution Live Code - 4 | x | Live coding the project | https://youtu.be/w6q6anvdisc | |
| Project Solution Live Code - 5 | x | Live coding the project | https://youtu.be/RZQOnLMac24 | |
| Project Solution Live Code - 6 | x | Live coding the project | uploaded | |
| Project Solution Live Code - 7 | x | Live coding the project | https://youtu.be/bNT90-GRjPc | |
| Project Solution Live Code - 8 | x | Live coding the project | https://youtu.be/_du6EBaGh5s | |
| Project Solution Live Code - 9 | x | Live coding the project | https://youtu.be/bUn3Dvvi9Lk | |
| Project Solution Live Code - 10 | x | Live coding the project | https://youtu.be/SHu2qSo0eEI | |
| Edit Text Input: Solution Live Code - 11 | x | Live coding the project | https://youtu.be/eXsfThJ3ubI | |
| Editing Task Description: Solution Live Code - 12 | x | Live coding the project | https://youtu.be/cx9yVyQ-DJo | |
| Editing Task Priority: Solution Live Code - 13 | x | Live coding the project | https://youtu.be/rgo25StmDoA | |
| Editing Task Completed: Solution Live Code - 14 | x | Live coding the project | https://youtu.be/XquRqHv9qjo | |
| Editing Task Save: Solution Live Code - 15 | x | Live coding the project | https://youtu.be/UOyB7cylfMg | |
| Fixing Text Inputs: Solution Live Code - 16 | x | Live coding the project | https://youtu.be/qjDd6Gs-M_g | |
| Fixing Textarea: Solution Live Code - 17 | x | Live coding the project | https://youtu.be/dINYVnoMbI8 | |
| Fixing Completed Checkbox: Solution Live Code - 18 | x | Live coding the project | https://youtu.be/XNY8zg6S2F8 | |
| Load Tasks on Refresh: Solution Live Code - 19 | x | Live coding the project | https://youtu.be/HA_XO8z349I | |
| Updating Tasks: Solution Live Code - 20 | x | Live coding the project | https://youtu.be/zqXgsLHMkMg | |
| Sucessfully Updating Tasks: Solution Live Code - 21 | x | Live coding the project | https://youtu.be/F7QIS_dgTQc | |
| Updating the Task in Yedux: Solution Live Code - 22 | x | Live coding the project | https://youtu.be/CspsMzHyPJg | |
| Deleting the Task: Solution Live Code - 23 | x | Live coding the project | https://youtu.be/0SptFxxyJYM | |
| Cancelling Editing: Solution Live Code - 24 | x | Live coding the project | https://youtu.be/aQ3jWNX7gCg | |
| Creating a New Task: Solution Live Code - 25 | x | Live coding the project | https://youtu.be/2MfPTwHi27g | |
| Displaying New Task: Solution Live Code 26 | x | Live coding the project | https://youtu.be/otEpS0Pz8UQ | |
| Completing the Task: Solution Live Code 27 | x | Live coding the project | https://youtu.be/IbVyxRAvjT0 | |
| Filter and Sort: Solution Live Code 28 | x | Live coding the project | https://youtu.be/Swtsb7xXFsE | |
| Logging Out: Solution Live Code 29 | x | Live coding the project | https://youtu.be/y6PKFuuS3b8 | |
| Creating the Error Message: Solution Live Code 30 | x | Live coding the project | https://youtu.be/cLUMn5TzNq4 | |
| Passing the Error Tests: Solution Live Code 31 | x | Live coding the project | https://youtu.be/FGeS4CU5EF4 | |
| Animating the Error Message: Solution Live Code 32 | x | Live coding the project | https://youtu.be/aES2WT_tfyE | |
| Cleaning Up: Solution Live Code 33 | x | Live coding the projcet | https://youtu.be/sAETo8lG72g | |
| Next Steps | x | Conclusion | Where do you go from here | https://youtu.be/yw_VcwYd-6E |
| Deploying The App | x | Addendum | Let's deploy the project to the internet! | https://youtu.be/Grk4_tbBCsc |
| Handling Static Files | x | Addendum | Auto copying CSS, images, or other static assets to the dist folder | https://youtu.be/IZodpoPVCQM |
| Bootstrap CSS | x | Addendum | https://youtu.be/3VJIPLGOPEU |
shyan1/full-stack-todo-rust-course
wip - we are building this out now in prep for the real course
RustMIT