Training

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...

All 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

Replace me

Do something to replace my content

4. Pagination


          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.

0
1
2
3
4
5
6
7
8
9
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z

5. Forms


          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... ;)