Building a Website #Day6.2

PAUL LEWIS: A couple of minor
updates today– firstly, that you can see on screen,
styling is getting underway, which means I've got
just a place holder for the actual page content. But I've got a footer
in place with a couple of links, the header. You can go around the
individual sections. Let me just make
that a bit wider. Code of conduct as
well, that's in there. Need to do a little bit
of tidying up there, I think, on the
text positioning. But you can see styling
is under way, finally getting somewhere a
little bit more visual, which is good for me. And then I've also worked
down here, like so, pretty much as we
were hoping to see. So that's the good news. Oh, I should mention the other
thing, which is the styling, I've actually opted for a
slightly different solution in the end. Do you remember how
I mentioned about I was going to do inline styles
and then like full fat styles, and I wasn't sure if
it was going to work.

OK, I've concluded
a couple things. Firstly, that I should
keep things simple. So let me show you what it's
like on a normal, standard issue page. Basically, you can see here– I
can get rid of a bunch of that there, can't I? We have just the style sheet,
straight in to the style sheet. So that is actually
what we're going to do. And that would be
render blocking. However, what I'm
banking on mostly is that most people will come
via the home page to the site. So if somebody comes
here, yeah they're going to have a bit
of render blocking.

I don't think it's going
to be that much, though. At the moment, the styles are 6
and 1/2 K. It's not a big deal. They'll get more. They'll get bigger, obviously. But hopefully, by the time
gzip is on, hopefully, not a huge deal. It's not loads and loads
and loads of styles, but we can still improve it. And as I say, most
people, I think, are going to come to
the home page, where I take a slightly
different tack, and I do use the inline style. So I have a style tag here
with just those inline styles. So it's things like
position information and so on– all fine– and a
bit of coloring information. And then I load,
via the JavaScript that you saw last time, I inject
this style sheet by JavaScript. Some people on YouTube
were saying, well, what happens if you
don't have JavaScript? Fair enough. It's a great question. That's why no
script was invented. And inside the no script,
we can pop in the link to the style sheet. So we'll get inline styles.

If somebody hasn't
got JavaScript, then they'll get
the link injected by the no script injected. It's in the no script. That will cause the
style sheets to download. And then for everybody
else– and in both cases, by the way, if they
get it from here or they get it from
the injected one, now the cache is kind of primed. So when you then go to schedule
or location or code of conduct or whatever, the CSS is
already in the cache, and so we'll get s
back nice and quickly. There are some file
inline styles specific for each individual page. So rather making a separate
style sheet for, say, home or schedule or
location, if there's specific styles for that page,
I'm inlining those as well. So it's a kind of combo of
those different approaches. We'll see how that pans out. It could be that I
revisit it again. Just to show you,
though, by the way, if I disable JavaScript in
Dev Tools, hopefully all being well, we still
get all the styles.

Because even though we
got the style there, with the no script, you can
see that that's actually now, instead of a piece of text,
that it's actually a link. That's actually become a thing. And you can see
here in the network, that while we don't have any
JavaScript being downloaded, we do have the style
sheet coming in as well. So it seems like a pretty
good combination of those two, inlines versus actual links. Good sign is that it's
not render blocking pretty much when I do this. So hopefully, that will pan out,
but we'll see how we get on. So there you go. Some stars in place– good. So, yeah, the mashing up of
all those styles, it's good. Don't forget you
subscribe, by the way. "You subscribe? No. Say that again, Paul.

Don't forget that
you can subscribe. I mean you should
subscribe, if you want to. Far be it for me to
tell you what you. Anyway, you can subscribe,
and hopefully you're enjoying these diary videos. Thank you to everybody who's
been popping comments in below and making suggestions and
just generally being involved. That's kind of what I was
hoping was going to happen. So, yeah, cool. I'll see you next time..