00:00:10.800
Hello friends nice to be here with you
00:00:12.679
uh today we're going to talk about Ru
00:00:14.120
Ra's front end so you can first of all
00:00:16.000
find me in the socials Twitter uh
00:00:18.800
LinkedIn uh originally I am from Ukraine
00:00:21.600
from the north of Ukraine uh that's the
00:00:25.119
sad part the happy part I recently
00:00:27.199
became a father and uh you might know me
00:00:29.759
from from Super rails YouTube channel so
00:00:31.840
over the last four years I've recorded
00:00:33.600
like around 200 Short Ron rails videos
00:00:36.840
about how to do different uh cool stuff
00:00:40.239
and uh I have also recorded a lot of
00:00:43.280
videos about using stimulus JS about
00:00:45.640
hotfire so about the topics that are
00:00:48.120
dear to Marco's heart and uh I gave a
00:00:51.719
talk a year ago about hot fire cookbook
00:00:54.359
so common patterns common use cases for
00:00:57.559
different uh hot wire uh implementations
00:01:02.600
but today we're not going to focus on
00:01:04.159
hotfire we're going to focus on other
00:01:06.439
parts of RB rails front end
00:01:09.600
now before with RB rail 6 we used to use
00:01:12.520
a web Packer we had js. format we used
00:01:16.479
Trails ugs we also commonly used Jake
00:01:19.600
Fury and I would say it was not the best
00:01:23.560
ERA of rub rails and uh I think that's
00:01:26.119
when the meme is rub rails dead was
00:01:29.119
especially relevant so I call this ra
00:01:32.360
six Dark
00:01:33.680
Ages and uh it is the age when react
00:01:38.159
became popular and uh most ruins
00:01:41.560
developers uh that I know became backend
00:01:45.759
developers building just uh Rubin rails
00:01:48.560
in the back end serving apis and using
00:01:51.640
like rect for the front end for example
00:01:53.719
we've got me here that uses rubben res
00:01:56.479
for the back end they like one of the
00:01:58.479
sponsors and uh re in the front end yeah
00:02:03.200
uh so this were the Dark
00:02:05.880
Ages but uh now we have ruon rail 7 and
00:02:09.280
I really call it the Renaissance of
00:02:11.160
rails but especially the Renaissance of
00:02:12.800
the Rails front end because the back end
00:02:15.080
has stayed really more the same but we
00:02:17.400
have much better and many more tools to
00:02:21.680
write nice front ends maintainable front
00:02:24.200
ends with Rub rails so instead of that
00:02:26.400
Packer we have input Maps or build justb
00:02:29.920
was I would say rebranded and improved
00:02:32.440
with uh turbo stream format uh instead
00:02:35.239
of rails UJS we have uh turbo drive and
00:02:39.360
instead of Turbo links and turbo drive
00:02:41.200
has better documentation and it's kind
00:02:43.000
of a bit easier to use instead of J Fury
00:02:45.480
you can use stimulus JS and uh is rails
00:02:49.280
frontend changing between rails 7 and
00:02:51.599
rails 8 I would say no ra change so if
00:02:55.959
in rails 7 you would be using SP Rockets
00:02:58.480
uh in rails 8 you would be using prop
00:03:00.400
shaft for assets but it's more less the
00:03:02.640
same no big change in your usual
00:03:05.400
workflow so now I really enjoy working
00:03:09.159
Ruben rails front end it's uh a pleasant
00:03:12.200
experience to develop to uh create
00:03:15.400
reactive components and yeah we are
00:03:18.080
going to talk about a few patterns a few
00:03:21.000
common things you would usually need to
00:03:22.920
do when creating a eurs application and
00:03:25.680
doing the front end for it so and eurs
00:03:29.000
app starts with rails new and you have a
00:03:31.439
few options so you can select the uh CSS
00:03:34.920
framework you can select uh the way
00:03:37.280
you're going to serve JavaScript you can
00:03:38.840
select the uh assets for CSS uh before
00:03:44.480
like five years ago I would always go
00:03:46.400
with bootstrap and most of the companies
00:03:48.319
I worked with all used bootstrap
00:03:51.000
nowadays uh I don't see any well I
00:03:54.560
haven't worked with any projects that
00:03:56.519
started in the last like three or four
00:03:57.920
years that were not using tail vent uh
00:04:01.480
there's also an option to install Bulma
00:04:03.519
for example but I've never seen a non
00:04:05.879
hobby project uh on Bulma maybe just me
00:04:09.319
so tailent is uh like I would say the
00:04:12.360
gold standard of uh riding CSS in our
00:04:16.959
time as for JavaScript uh there are I
00:04:20.359
would say two main um options it's input
00:04:24.120
Maps or ES build input Maps is the
00:04:26.479
default and uh I would usually go with
00:04:28.759
input Maps if I I don't need to import a
00:04:31.240
lot of external Javascript packages if I
00:04:34.120
don't need to import JavaScript packages
00:04:35.919
that also have their own CSS but if you
00:04:39.000
go with es build you will definitely not
00:04:41.400
regret it and Es build is perfect if you
00:04:44.000
like import uh heavy JavaScript packages
00:04:47.280
that have a lot of their own CSS for
00:04:49.400
example like JavaScript
00:04:51.680
calendars okay so let's create an your
00:04:53.919
robon rails application we're going to
00:04:55.320
use stevent pay uh we can generate a few
00:04:58.960
pages for our application uh yeah
00:05:02.080
actually now we can generate
00:05:03.759
authentication for B rails so you don't
00:05:05.960
need the device for simple applications
00:05:08.520
you can just uh you can just use the
00:05:12.160
builtin uh rails authentication but you
00:05:14.520
have to be using the main rails Branch
00:05:16.919
because it is still not released in
00:05:18.600
rails
00:05:20.160
7.2 okay so we have generated a new
00:05:23.240
application a few pages and we see this
00:05:25.800
empty application but we like need to
00:05:28.120
make it look normal uh navigate within
00:05:30.039
all those pages so we need to add some
00:05:32.199
navigation and uh let's have a look at
00:05:34.880
how different popular websites approach
00:05:37.880
navigation the layout of the application
00:05:40.199
because I think like you should always
00:05:41.400
start with the layout
00:05:43.639
uh let's have a look so here we have
00:05:46.160
LinkedIn we have a F Bar a sidebar and
00:05:49.800
the main content we have a stick F Bar
00:05:53.039
you scroll it stays on top a fixed
00:05:55.479
sidebar and the scrollable main content
00:05:58.720
Twitter is the same
00:06:00.720
and slack is the same and C GPT is the
00:06:03.960
same and Microsoft teams is the same so
00:06:07.039
it looks like it's more L the uh gold
00:06:10.960
standard for layouts in uh applications
00:06:14.560
these days so a fbar a sidebar and a
00:06:18.440
main
00:06:19.520
content but you should not only think
00:06:22.280
about desktop because most of the users
00:06:25.160
uh these days are from mobile yes you've
00:06:28.080
all got laptops but like people
00:06:31.039
who do the sales in business people who
00:06:34.039
are in underdeveloped countries they
00:06:36.080
might be using mobile mostly and there's
00:06:39.520
like more Mobile Traffic than desktop
00:06:41.280
traffic now so you should also always
00:06:43.880
think of how is your website going to
00:06:45.360
look on mobile let's have a look at how
00:06:47.840
the mobile version of of the websites
00:06:50.360
look now this is not the LinkedIn app
00:06:53.000
this is just LinkedIn opened in a
00:06:55.879
browser and you know what it looks like
00:06:58.360
an app we have a nice uh header we have
00:07:01.680
the main content we have the footer same
00:07:03.919
with Twitter it's not an app that you
00:07:07.879
download and install but it looks like
00:07:09.960
an app same with Instagram so you have a
00:07:13.080
header a main content a footer and uh
00:07:16.560
here a couple of examples of what I have
00:07:18.639
built so uh the first is Twitter second
00:07:21.319
is an application that I have built both
00:07:23.199
look more less like an app but is just
00:07:25.720
responsive design same here LinkedIn and
00:07:28.560
an app that I have built
00:07:31.080
uh talking of drop down menus it is
00:07:33.400
common when you build like
00:07:35.639
a website with the NF bar to show the
00:07:39.840
links on a small screen in a drop down
00:07:41.759
menu as uh uh mdn dogs do but
00:07:46.520
uh no big apps uh have this UI uh design
00:07:51.960
and uh I think it's much cooler to have
00:07:54.560
like a nbar foter buttons than uh a drop
00:07:59.000
down that feels like it's a website but
00:08:01.520
not a web
00:08:03.120
application so okay there are two design
00:08:06.759
patterns that we have just noticed for
00:08:08.520
desktop and for mobile how do we build
00:08:11.840
this so uh here we have what we start
00:08:15.319
with and uh
00:08:17.360
yeah one important thing so commandment
00:08:20.039
number one
00:08:21.639
build responsive design and start from
00:08:25.440
layout like uh if you want to make your
00:08:27.440
application responsive if you want to
00:08:29.520
make it look good on desktop and
00:08:31.880
mobile there's no point in making the
00:08:35.039
elements inside the main era the B that
00:08:38.519
you yield responsive if you don't make
00:08:40.719
the layout itself
00:08:42.800
responsive so uh yeah here is an example
00:08:46.240
of a responsive layout that I have built
00:08:48.160
it looks uh good on desktop I make it
00:08:51.640
smaller it looks good on mobile and uh
00:08:55.080
here's the like initial code that is
00:08:57.279
generated uh when you create a new r
00:08:59.560
application with tail vnd and here is uh
00:09:03.279
a basic example of code that you can use
00:09:05.959
for having this specific pattern of uh
00:09:10.240
nbar sidebar on the desktop and nbar and
00:09:14.600
footer on the mobile so uh feel free to
00:09:17.560
use it and it would look like more less
00:09:20.120
like this so here is the desktop layout
00:09:23.399
here is the mobile layout so uh this is
00:09:27.040
like basic minimal CSS that you would
00:09:29.200
need for this okay we done with layout
00:09:31.320
design and uh talking of Tailwind uh if
00:09:34.839
I was starting uh to learn tail withd
00:09:37.720
now first of all I would figure out not
00:09:40.399
like different colors or different phone
00:09:42.320
fonts but first of all how do you place
00:09:44.680
the content on the page first of all you
00:09:46.200
figure out Flex grid and then different
00:09:49.800
like uh view ports so on the normal
00:09:53.079
screen you have uh text base on the V
00:09:57.480
screen you have bigger text so this is
00:10:01.399
like 101 how to start learning tail vent
00:10:04.800
okay so uh we have built the Side Bar we
00:10:07.880
build the header and we have the main
00:10:09.480
content and uh now we're going to focus
00:10:13.000
on like the main content the part that
00:10:15.000
you yield in your application so here is
00:10:18.560
uh like a few slides from an application
00:10:20.240
I built we have the sidebar we have the
00:10:21.920
main content and you see uh the main
00:10:25.279
content has something common on all the
00:10:27.720
pages we have a TI title a subtitle and
00:10:31.440
possibly we have a few
00:10:33.160
buttons so this is like the main content
00:10:36.440
and uh I notice that in most
00:10:39.160
applications that I work with I always
00:10:41.000
create a page component it's usually a
00:10:43.440
view component where I can pass a title
00:10:45.880
as a string a subtitle as a string I can
00:10:48.720
pass a block of actions and then I have
00:10:51.839
the yield and I also pass the pins so
00:10:55.560
the page component and often I would
00:10:57.920
want the page component to be not full
00:10:59.639
width but centered so it would have an
00:11:02.519
option full width true or false and this
00:11:05.680
is like a minimal code for this page
00:11:07.880
component using view
00:11:10.480
components then any rails application
00:11:13.600
would go with the flash messages so uh
00:11:17.399
if you're not using re rails maybe you
00:11:19.000
would want to use some kind of
00:11:19.880
JavaScript library for Flash messages I
00:11:22.320
myself some time ago uh before the real
00:11:25.079
7 would use this toaster JS uh library
00:11:28.920
but this days you don't need it for
00:11:30.920
Trails just with a tiny bit of code you
00:11:33.680
can uh uh make flash messages
00:11:37.120
automatically dismiss you can click on
00:11:39.519
the flash message to dismiss so yeah
00:11:41.920
this is like the code for having the
00:11:43.800
flash messages and uh again I have a
00:11:46.279
flash component I don't put it in the
00:11:48.040
Helper because this logic is used only
00:11:50.000
in the uh flash so like if I notice it
00:11:53.680
is blue if it is en load then it is red
00:11:56.279
and at dedicated uh uh s L controller on
00:12:01.240
connection it uh removes the flash
00:12:03.800
message after 5 seconds but if you click
00:12:05.880
it it removes it right
00:12:08.040
away yeah so flash messages another
00:12:10.800
thing that uh you would usually want to
00:12:14.079
do in an application is a helper for
00:12:16.480
active link to so highlight link to
00:12:19.720
current page U here's an example in the
00:12:22.480
sidebar here has an example on the
00:12:24.360
mobile
00:12:25.320
footer uh there exists a gem that is
00:12:28.920
also named active link to but uh maybe
00:12:32.040
you don't need to have an additional
00:12:33.720
dependency this is more as all the code
00:12:35.440
you need to uh have the implementation
00:12:38.279
of active link to that would work in
00:12:39.880
line and also with a block and here when
00:12:43.720
you do your helpers don't also forget to
00:12:45.880
write helper tests it will uh always be
00:12:48.399
beneficial to have a small test and if
00:12:50.560
you're using like gith pilot or
00:12:52.120
something like this it can write test
00:12:54.519
for components faster and also I
00:12:57.160
recorded it's un very visible behind me
00:12:59.000
but a video about how to create this and
00:13:03.440
logic behind it okay so buttons now this
00:13:06.880
is really interesting so some time ago
00:13:09.440
Alexandra Rodi asked a very interesting
00:13:12.440
question uh on Twitter what is the best
00:13:15.399
approach to have maintainable Buttons
00:13:17.680
CSS uh using tnd and there were a few
00:13:21.320
different answers uh also the creator of
00:13:24.040
tan CSS answered and uh if you look at
00:13:27.160
the
00:13:29.560
website of tailin CSS uh how they
00:13:32.680
propose you
00:13:34.600
to like have same CSS in different
00:13:37.360
places that propos proposition is use
00:13:40.680
your IDE and uh like edit everywhere at
00:13:44.360
the same time so uh here's the example
00:13:48.040
like you have a few links but if you're
00:13:49.959
like uh I don't know hardcoding
00:13:53.000
something what if you have like PX and
00:13:56.120
py in a reverse order it will already
00:13:58.680
not work
00:13:59.680
so I don't like this approach and also
00:14:02.360
tailin CSS uh uh website suggests you
00:14:05.360
not to abstract CSS with apply because
00:14:08.279
it kind of defines uh the point of tent
00:14:11.639
but I don't agree with this I don't like
00:14:14.120
this approach proposed by the official
00:14:15.800
tand docs also a very bad uh thing that
00:14:19.399
I have experienced in applications I've
00:14:21.399
worked with people trying to abstract
00:14:23.959
buttons into a separate
00:14:25.839
component so you would have like button
00:14:28.240
component with a lot of different
00:14:30.720
options uh usually it's not
00:14:35.440
uh easy to use and uh hard to get
00:14:38.519
unboarded and hard to
00:14:40.720
maintain why reinvent the wheel if
00:14:43.120
bootstrap has the perfect API for
00:14:45.560
buttons you have button class you have
00:14:48.160
button color you can have like button
00:14:50.120
disabled or so on and you can easily
00:14:53.160
easily with just a few lines of code
00:14:55.480
implement the same uh buttons API as you
00:14:58.240
have in bootstrap in your rubben rails
00:15:00.360
application and now when you want to
00:15:02.000
change button secondary you will change
00:15:04.040
it everywhere in your application so
00:15:07.720
uh I think sometimes using apply and
00:15:11.040
abstracting tent is uh very beneficial
00:15:13.720
other simple cases where I would
00:15:15.279
abstract delin would be like for input
00:15:18.360
fields or for like Nev
00:15:20.600
links and uh yeah if uh there is like
00:15:25.199
one thing uh I want you to know about
00:15:27.440
tailin today is it is
00:15:29.480
okay to abstract tailent and you don't
00:15:32.720
have to follow all the arbitrary rules
00:15:35.839
somebody
00:15:37.440
sets uh okay so we had a few examples of
00:15:40.759
different uh frontend abstractions we
00:15:42.959
had uh uh telant abstractions into like
00:15:46.279
buttons for example we had this active
00:15:48.440
link to that is a rails Helper and we
00:15:50.519
had like a page component or Flash
00:15:52.319
component that we used VI components for
00:15:54.800
so you see there's a few strategies and
00:15:56.759
you don't have to use only one you have
00:15:58.680
to use like the B that best fits the
00:16:00.880
specific use case um in terms of
00:16:03.240
complexity of terms of like uh how much
00:16:06.240
uh code is involved uh CSS abstraction
00:16:09.839
is the easiest then you have like this
00:16:11.639
active link to where you can also have
00:16:13.560
like some Rubik conditionals like if
00:16:15.880
this is current page if this is current
00:16:17.680
user and so on and uh these are like
00:16:20.160
full components that have a ruby file
00:16:22.399
and a HTML file that go together so uh
00:16:26.079
you don't have to use like only
00:16:28.120
components it's okay to use helpers it's
00:16:30.480
okay to use CSS
00:16:32.600
abstractions then stimulus JS I did not
00:16:36.399
like JavaScript I did not like
00:16:38.319
JavaScript uh development before
00:16:40.839
stimulus JS but stimulus really feels
00:16:43.440
nice to me because it lets you have like
00:16:45.880
small components that just like some
00:16:48.319
JavaScript and some HTML and it's really
00:16:52.279
um I don't know the word um yeah it's
00:16:56.399
like a component itself so here is a
00:17:00.839
simple example of tabs like
00:17:04.319
uh how would you do it you could uh do I
00:17:08.319
don't know uh inline script you could uh
00:17:13.439
okay never
00:17:15.120
mind um yeah another example of uh using
00:17:18.439
stimulus is uh form previews so here I'm
00:17:21.000
typing here I have uh the result trended
00:17:24.480
I could use uh like tuo streams I could
00:17:28.000
make a form submit Miss I could render
00:17:30.000
it but why do you need to uh have
00:17:32.880
serverid rendering for such a small
00:17:35.039
thing where you don't like have any
00:17:36.679
additional uh backend related logic so
00:17:40.360
sometimes you don't need like to streams
00:17:42.200
you can just use stimulus uh another
00:17:44.480
simple example like this is something
00:17:46.320
you would usually do only with
00:17:48.400
JavaScript or copy to
00:17:50.559
clipboard and uh talking about stimulus
00:17:53.600
uh you don't have to write your own
00:17:55.840
simulus controllers a lot there are some
00:17:58.159
very nice SL I really love stimulus
00:18:01.280
components then uh that offers you like
00:18:03.640
a lot of stimulus components that you
00:18:06.400
can just copy in your application and
00:18:08.840
use out of the box don't you don't have
00:18:11.039
to reinvent the B then there is better
00:18:12.960
stimulus a website by Julian rubish that
00:18:15.200
gives you good practices of how to use
00:18:18.200
uh stimulus and then there is stimulus
00:18:20.720
use that gives you behaviors that are
00:18:23.039
not included in stimulus by default like
00:18:26.000
close window if you click outside of
00:18:28.400
this window
00:18:29.559
so and uh in some cases you you even
00:18:32.679
don't need stimulus you don't need any
00:18:34.200
JavaScript you can just use native HTML
00:18:36.799
elements for example for a drop down you
00:18:40.320
can use the HTML details stag it's good
00:18:43.159
enough for many cases or this doesn't
00:18:46.520
have to be like a div above another div
00:18:48.520
you can just use the HTML progress
00:18:52.120
element talking of hot fire uh we have
00:18:55.840
like three main parts to drives frames
00:18:57.760
and streams so for Turbo Drive I've seen
00:19:00.760
applications that uh disable Turbo Drive
00:19:03.400
completely I've seen applications that
00:19:05.000
disable turbo drive on like links or
00:19:08.000
forms and uh 99% of cases you do not
00:19:11.480
need to disable turbo drive so uh
00:19:14.159
sometime go you need to to disable turbo
00:19:16.400
like make it data turbo false for device
00:19:18.799
you don't need to do it anymore for
00:19:20.200
device device works out of the box with
00:19:22.200
the hotfire sometimes when you do need
00:19:25.200
to disable turbo drive if you are
00:19:27.280
redirecting to an external
00:19:29.280
link like if you're doing Omni Al you
00:19:32.840
need to set data turbo files in terms of
00:19:36.200
Turbo frames and too streams first
00:19:39.200
implement the feature with serice uh
00:19:41.280
like with full page reloads and then you
00:19:43.880
can add some reactivity using frames and
00:19:45.960
streams so uh it's something you add on
00:19:50.039
top uh of your page if you're building
00:19:52.559
like a um a page where you can have like
00:19:56.080
a table with filters with search first
00:19:59.080
make it work without tuo frames and
00:20:01.960
streams and then if you need more
00:20:03.600
reactivity you can add them don't uh add
00:20:08.000
them too early talking about dark mode
00:20:12.240
uh there's a lot of fun talk on Twitter
00:20:16.280
about like oh I'm not going to use a
00:20:17.720
website that doesn't have dark mode or
00:20:19.440
so on but in reality if you want to
00:20:21.720
maintain both light mode and dark mode
00:20:24.039
it is going to be a big burden on your
00:20:26.000
development team it is an additional
00:20:28.159
thing that you need to check for every
00:20:30.200
component of your application and uh my
00:20:33.640
suggestion would be not to build a
00:20:35.440
separate dock mode uh I know that some
00:20:39.440
people who have like a stigmatism they
00:20:41.840
would need uh dark mode to properly view
00:20:44.880
the web but people who really need dark
00:20:46.799
mode can use uh uh browser plugins that
00:20:51.640
can make any website dock mode and you
00:20:53.919
can build your website in any design
00:20:55.480
that you want it to look you can build
00:20:57.799
dark mode out of the the box you can
00:20:59.039
build light mode
00:21:00.320
whatever uh also I like the idea of uh
00:21:04.120
being more visual than uh text so you
00:21:07.320
see like here we have the icons they're
00:21:09.960
easier to navigate than the text and uh
00:21:13.440
if you want to teach your user longterm
00:21:16.159
to use your application
00:21:19.200
uh it's easier for the user to learn
00:21:21.960
long term by icons it will be like
00:21:24.480
intuitive for them to use icons so if
00:21:27.760
you can use icon instead of a text for a
00:21:30.279
button try to use the icon also a simple
00:21:34.240
thing sometimes I can know that an
00:21:35.760
application was built with rub and rails
00:21:37.320
if I just go SL 404 and uh it's like a
00:21:41.760
small detail that can make your
00:21:43.840
application uh look more expensive look
00:21:47.600
richer build a nice uh eror Pages like
00:21:51.960
like this
00:21:53.880
one uh also using metatags so uh don't
00:21:58.720
forget to set Dynamic titles for your
00:22:01.640
application so in the application layout
00:22:04.159
file you will have a title by default
00:22:06.080
but you can override it for different
00:22:07.400
pages it will be useful for uh browser
00:22:10.480
tabs so I see like three different tabs
00:22:13.440
and I see what I have open in each tab
00:22:15.600
because each of them has a different
00:22:17.279
HTML title tag and also for social
00:22:20.120
sharing so if you're trying to share a
00:22:22.799
page in your application on uh LinkedIn
00:22:25.279
you will want to have a preview with a
00:22:28.520
title subtitle and image but not just uh
00:22:32.039
uh a link this would be much more
00:22:34.520
clickable also uh something I don't
00:22:37.279
really like uh previously we had the
00:22:40.360
tables in scuffles so like you create a
00:22:43.240
new application you create a list of
00:22:45.240
clients and boom you have a wonderful
00:22:47.440
table it works like Excel wonderful now
00:22:50.320
it looks like a list and uh sometimes I
00:22:53.559
have the feeling that uh uh I would want
00:22:55.880
to go back to tables well
00:22:59.919
thank you uh well you can do it uh you
00:23:04.520
can create custom scaffold templates so
00:23:06.360
you can put it in the lib library inside
00:23:09.080
your application and override the
00:23:11.279
scaffold generators so that they
00:23:13.520
generate uh HTML based on like uh what
00:23:17.039
your application should look
00:23:19.240
like uh also there are like lots of
00:23:21.720
component libraries if 5 years ago there
00:23:24.120
were none uh now there's like Polaris
00:23:26.600
that is using Shopify UI design and
00:23:29.559
there are like a few other libraries one
00:23:31.600
even is created and used by the UK uh
00:23:35.039
government so these are all view
00:23:36.760
component libraries and these are
00:23:39.120
libraries of components that you can
00:23:40.720
like start using out of the box in your
00:23:42.799
application and uh worry less about uh
00:23:45.640
writing the
00:23:46.919
CSS okay so we had uh a look at like
00:23:50.159
quite a lot of small different front end
00:23:52.360
things from the goas that we need to pay
00:23:54.520
attention on so first of all start with
00:23:56.480
the layout design and uh consider making
00:23:59.520
responsive layout then page component
00:24:02.960
flash styling active link to Buttons CSS
00:24:07.039
abstractions uh when to use hot wire how
00:24:10.520
to use stimulus a few other small things
00:24:13.279
and component libraries and uh yeah
00:24:16.039
friends if you want to learn how to
00:24:18.159
build all the components that we just
00:24:20.880
talked about how if you want to learn
00:24:22.400
how to build responsive uh Tailwind
00:24:25.360
inurn rails then feel free to visit
00:24:27.120
super rails.com I have a whole series of
00:24:29.559
videos how to build and how to learn
00:24:32.159
tailent and apply it to Ruben reals
00:24:34.760
applications also right now I'm working
00:24:36.840
on a new series how to build mobile
00:24:38.880
applications with ran rails turbon
00:24:41.120
native and Strada so feel free to watch
00:24:43.840
it and uh yeah a small announcement for
00:24:47.720
myself in the end uh I've been working
00:24:50.520
on Super els for like four years now and
00:24:53.240
uh it's all been free and now I started
00:24:56.000
uh creating a few like members only at
00:24:58.399
results so uh consider
00:25:11.440
subscribing yeah thank you
