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/KC7HCxr6OCE |
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 |