Hello 👋, welcome to Turbo Training
This is a Turbo Training page. Each section will contain an exercise to solve using Turbo. It will progress in difficulty.
The Homepage of the showcase already provides you the solutions to most of these exercises. Don't look at them if you want to learn something...
turbo-frame tags have an ugly dotted border so you can always see them.
Have fun and don't forget to give it a ⭐️Star
1. Frame 'update-me'
In this exercise you need to implement a simple link that refreshes only the content of the frame in which is contained. The link displayes a page with a simple message "I got replaced.".
2. Frame 'update-me' and back
This exercise extends the previous one and gives the possibility to "go back". Once the frame is replaced, next to the "I got replaced message", there's a link that allows to go back, and see the video again.
3. The external frame
Implement a button that replaces the content of the frame on the right
Quite boring right? Let's implement something useful. There are some @elements available in this page. This exercise consists in paginating them and also allow to click on them. When clicked they of course "escape the frame" and open on a new page.
You can paginate the array with:
@elements = Kaminari.paginate_array(@elements).page(params[:page]).per(5)
in the controller and use
paginate @elements, theme: 'twitter-bootstrap-4', window: 2
in the view.
In this exercise you need to replace the name displayed, after submitting the form, without refreshing.
6. Frames eager and lazy loading
There's a frame here. Make it load the page /letters/a/slow both with eager and lazy loading. Bonus point if you display a loading indicator.
Bonus point if you actually display the content of the page... ;)