00:01
hi I'm Janelle Pizarro and I'm Frederick
00:04
Philipp von vise and thank you for
00:06
consuming the Thunder nerds a
00:07
conversation with the people behind the
00:10
technology that love what they do and do
00:13
tech good we are here in Orlando at an
00:17
event apart yeah so great to be
00:20
everybody and we are joined by the
00:23
amazing Rachel Andrew Rachel you are the
00:26
co-founder of perch a web developer
00:29
speaker author yeah so amazing to have
00:32
you here you have quite a what a lot of
00:35
accomplishments in the industry yeah
00:37
I've been doing this for a long time
00:39
house yeah I think what did Chris
00:44
quarter say how he got a such a popular
00:47
blog he just did it for eight years so
00:49
yeah if you if you keep doing it you'll
00:52
you'll eventually get there yeah you
00:54
should have amassed a bunch of stuff do
00:58
you mind uh providing our audience a
00:59
little bit of context about you and who
01:01
you are yeah so I am a British web
01:05
developer live in Bristol in the UK I
01:08
watch from the North East of England
01:09
efficiently and yeah I've been working
01:12
on the web for about 20 years
01:14
so I kind of predate CSS these days I am
01:17
an invited expert status working groups
01:19
to actually work on CSS as well as doing
01:22
a whole bunch for the things perch and I
01:23
thought it noticed and wondering I'm
01:26
speaking and I've written 23 books at
01:28
this point well as another author so
01:30
yeah kind of a lot of stuff over many
01:32
years that's amazing oh my gosh
01:36
sue so what's your talk gonna be about
01:37
today is it today or yesterday I change
01:40
something and yes I'm talking about
01:42
well CSS grid layout and layout in
01:45
general so I think one of the things I'm
01:49
trying to kind of get across is the fact
01:50
that it's not just one technology it's
01:52
not a CSS grid or flexbox or it's
01:54
actually there's a whole bunch of stuff
01:56
underlying these things and it's those
01:58
things these are sizing alignments and
02:00
so on that really pull everything
02:01
together and so yeah I'm talking about
02:03
that and just kind of how list of all
02:05
already works that's so cool yeah I mean
02:09
it really is a new technology if you
02:13
will I think that's fair to say
02:14
it's
02:15
with certain support with edge and
02:18
chrome and and I think edges come a long
02:21
way but they still have a little bit of
02:23
funny funny this is and that's within
02:26
there and I mean the layout stuff work
02:28
sewing because the the specter in this
02:30
is a square that she came from like
02:31
stuff in the first place and so that was
02:33
their spec and they they had an
02:35
implementation in in nine ten eleven and
02:38
they've updated their edge of notation
02:40
they're too much everybody else's so I
02:42
mean great layout itself is its variable
02:46
so idiots just sort of how many could
02:48
run over to browse or some things issue
02:50
how do you not talk a bit about that
02:53
oh yeah how do you get to like um you
02:56
know talk tell people all about like CSS
02:58
grid and and layout in general you know
03:01
especially as a pioneer of CSS grid and
03:04
and and CSS really as a whole how do you
03:08
think like your message comes across and
03:10
how do you get like you know if people
03:11
not like glassy-eyed like just oh my
03:14
gosh it's really a lot of the people on
03:23
the swing we brought you browser
03:25
engineer's they work you know about
03:27
browser code the work for web browsers
03:28
they're not actually using CSS as a
03:31
developer which is what I do
03:33
and so there's stuff I talk about it's
03:34
really just what I've figured out you
03:36
know and that's always what it's been
03:37
it's what I've done for 20 years now
03:38
figure things out I write it down and
03:40
then more recently have been speaking
03:41
about it and so I try and speak about
03:44
this stuff at the same in the same place
03:47
the attendees of that you know yes I'm
03:50
involved you know I'm a spec editor now
03:51
on the stateís working group but I try
03:53
and talk about it stuff just as a web
03:55
developer you know like hey these are
03:57
interesting things this is useful this
03:59
will make your life easier that's all
04:00
good job music is making my job easy
04:09
interpretations on is it difficult to
04:11
break people out of the mindset of the
04:13
old float idea like people that will
04:16
hold on to that really really dearly and
04:18
go oh no I'm I'm good with this I could
04:20
do this for another five or six years
04:23
yeah it's different way of thinking
04:25
about this stuff and where
04:27
found say I do sort of photo workshops
04:29
teaching this and I find that the
04:31
beginners the people who are completely
04:33
coming to this new they're absolutely
04:35
new to CSS they pick up all the new
04:37
stuff so quickly all day they're just
04:39
building websites they're like this is
04:40
great you know about system this is
04:42
under all of the people who've been
04:44
doing this for years okay we sort of
04:47
make this behave a bit like float you
04:50
know and they're trying to kind of take
04:51
it back into different old way of
04:52
thinking because that's how we used to
04:54
doing things now we're so used to
04:56
hacking around with you know to fake a
04:59
grid system essentially with floats you
05:01
know we're basically things a size and
05:02
pushing them out to make it so it looks
05:04
like a grid that was so used to doing
05:07
that that I think it's difficult to get
05:10
out of that I think all of us would be
05:12
doing this a long time have stuff in our
05:13
code that is there like to support ie6
05:16
you know I stopped coming it's okay you
05:25
have to do this doing it just in case so
05:30
you think if there's a lot of
05:31
trepidation from people that are trying
05:33
to support these old technologies like
05:35
an you know to be fair you mention ie6
05:37
rather than going going future and then
05:40
providing some kind of layer behind that
05:44
of you know if if you are using that
05:46
here's a little extra CSS that you know
05:49
you can use yeah I think I don't think
05:50
it's not even just that it's just that
05:52
we get so used to working in a certain
05:53
way you know oh if I if I dunno you know
05:56
there's just all this stuff that's in
05:57
built that we know oh you know we
05:59
shouldn't do this we should do that and
06:01
a lot of it is referring back to a
06:03
browser that we don't even need to
06:04
support anymore you know it's just that
06:07
we just been built we've that's how we
06:08
build web sites you know so we learn in
06:10
that knowledge what about in the
06:15
corporate environment you you feel me
06:17
that we have to I don't know kind of
06:21
take a step back from grid or we need to
06:23
stay within the floats or flexbox within
06:27
that kind of like a website like like an
06:30
audience for maybe a small to medium
06:33
sized business or make it enterprise I
06:36
think obsessing a particular
06:38
technologies is the wrong thing to be
06:40
doing
06:40
I
06:41
I think that it's more a case of well
06:42
what solves the problem I've gotten fun
06:44
to make now if you consult that in the
06:46
simplest possible way that is supported
06:48
by you know browsers right back then do
06:50
that you know you don't need to use CSS
06:52
grid because it exists but if you've got
06:54
a pattern that can only be built using
06:55
CSS grid you know if your choice is
06:57
using CSS quit or using like a ton of
06:59
JavaScript to kind of get everything
07:01
into place and use the performance
07:05
technology and provide a nice fall back
07:07
you know it's like you don't have to use
07:09
this stuff you know it's saying it's
07:11
working good we don't go around with
07:12
people up and yell at them aren't using
07:14
this but you don't have to use and are
07:28
getting their head round it for the time
07:30
when you know threads of the big from at
07:33
the moment is people stuck on my ten
07:34
eleven and a lot in particularly in the
07:38
UK a lot it's the bigger businesses did
07:40
not move people over to edge yet you
07:44
know you don't have to use this stuff
07:45
you want to start learning it we want to
07:48
know it's there because you're going to
07:49
come across patterns that you can only
07:51
solve with it and and you can create
07:54
decent fallbacks for this stuff and
07:56
that's going to be better than a
07:57
horrible janky mess javascript you know
07:59
that's that because that's the problem
08:01
is that people are saying oh what I want
08:03
to do this fancy layout I'm not sure
08:06
there's enough support for grid oh I'll
08:08
just do it with JavaScript that's the
08:09
worst thing to do giving all the people
08:12
on terrible browsers a whole load of
08:14
JavaScript everything around yes you
08:24
don't need to use this stuff if you can
08:26
solve your problems without it you know
08:28
and if if you can do something simpler
08:31
that means you have better browser
08:32
support with what you're doing last fine
08:34
you know
08:35
people obsess about you know oh we can't
08:38
use any of this tool you say this the
08:40
wrong way you might be able to use grid
08:42
team hands something and make it much
08:46
nice a lot of people who do have the
08:47
technology but it's still fine for
08:49
everybody else I have a question for you
08:52
if you don't mind um what are your
08:54
favorite resource
08:54
to kind of give people to learn more
08:57
about just layout in general especially
08:59
like there's you know fak and engineers
09:01
that sometimes I feel like jump into the
09:03
front end because you know everything's
09:05
on fire so how would you kind of go
09:09
about saying okay well this is the
09:11
fastest way that you can learn you know
09:13
the concept of layout and then maybe
09:15
move on into making this grid layout
09:19
work for you yeah I say actually for
09:22
anyone and mdn and there was other web
09:25
Docs project is probably the best place
09:27
to start there's I mean I've actually
09:29
written an awful lot of the layout dogs
09:30
for Mozilla but there's a huge amount of
09:34
stuff there and it is always being
09:36
updated cuz the things essentially a
09:37
wiki so if people spot problems they
09:38
don't fix it and so there's a big learn
09:41
layout section there anyway which is
09:42
designed for complete beginners to
09:44
layout to learning that stuff I'm
09:46
building a CSS cookbooks or layout
09:49
cookbook section which is lots of design
09:50
patterns just you know here's how you do
09:53
this kind of navigation or bits pieces
09:55
like that so yeah MTN is definitely
09:57
basically for anyone to go for all of
09:59
this stuff because it's just such a
10:02
wonderful resource cool well so well
10:05
wouldn't be and for some of the people
10:07
that can't make it today and tomorrow
10:11
and the next day rather well would be
10:13
some of the takeaways that you might
10:15
want to hit that that you might be
10:17
talking about I think really it's
10:20
understand the underlying things that
10:22
tie all these layouts packs together so
10:23
things like sizing and alignment are
10:25
really really important and I've written
10:27
quite a lot about that stuff in the last
10:29
year and you know creating could fall
10:34
backs and new CSS has been developed to
10:37
be able to overwrite nicely old CSS so
10:39
you can create a faux thing you can
10:40
enhance it with grid we've got things
10:42
like feature queries so you can say you
10:44
know hey browser do you support quit and
10:45
if it does support grid we can do good
10:47
stuff and if not the browsers getting
10:49
the other stuff so we've got built into
10:51
CSS the ability to do elegant fall backs
10:55
and to enhance with this stuff I think
10:58
that's really important to understand
10:59
that we don't have to we do have to
11:01
detecting browsers through JavaScript we
11:03
don't have to be trying to create we
11:05
don't have tramp polyfill we would have
11:07
to try and yeah
11:08
the same experience for other browsers
11:11
we need to give a good experience so
11:12
everyone was able to get the content to
11:14
use the application or whatever but
11:15
doesn't need to be identical because
11:17
your customers are not ABT's maybe
11:20
testing your websites you know they
11:22
never ever looked at it into browsers so
11:24
as long as it works well in the one that
11:26
there in front of that's all I care
11:27
about
11:28
so I think it's that sort of stuff you
11:30
know just as how we can start to be
11:32
using this stuff in a in a useful way
11:34
well it's appropriate yeah I make a lot
11:36
of sense you know I saw on your on the
11:39
bio that that they put up on the website
11:41
that you're a runner yes yeah yes there
11:44
was actually a bunch of us out this
11:45
morning and oh you did it
11:47
yeah have to because so Josh Park is
11:50
here he invented couch to 5k so I'd love
12:00
to run a friend so you know nothing
12:01
about what I actually do they just went
12:03
away I'm hosting on an airplane to do
12:26
three yeah that's okay oh it's probably
12:38
getting on for ten years now so to get
12:41
news traffic on at the moment so well
12:43
because I thought you know running is
12:44
not enough we need to have extra pair of
12:46
running backs and jumping in lakes first
12:49
Wow good for you I do a lot of travel
12:54
and running is a good way to see in
12:56
cities and to get out before conferences
12:59
you know otherwise I would just sit in
13:00
hotels all day yeah well it's nice to
13:03
loosen up and like you say you get to
13:05
see the city you know what exercise it's
13:13
a nice way to chats people yeah I guess
13:15
the kind of question is off and yeah
13:17
you're not in work mode but you as cooks
13:19
end up talking about this
13:20
[Laughter]
13:25
no one speaks a shared interest next
13:34
size of one's awesome
13:35
you know I'm uh I'm a big fan of perch I
13:37
really enjoy it what is it now it's 70
13:41
bucks for a license it's yes yes yeah
13:44
and yeah we were just talking last night
13:46
because said because Drew's here with me
13:48
who's the other half of perch and we
13:51
were - we're gonna be 10 years Wow doing
13:54
this a long time so cool yeah so this
13:58
it's quite a quite thing I think I might
14:00
have heard of it the first time on maybe
14:02
bow out rollers yeah maybe yeah yeah so
14:06
yeah so that's us do that but yeah 10
14:11
years is a lot it's a long time in Webb
14:12
years
14:13
yeah yeah right to have the one product
14:15
yeah it's so nice though because just
14:18
what are you bringing with perches that
14:21
you could use it with anything yeah you
14:23
know you have your in your design and
14:25
you you want to build it out well you
14:27
just back this in and you build your own
14:29
logic out yeah you know you know a lot
14:34
of other systems you kind of have to go
14:35
all in you've got to build templates for
14:37
that system I've got a website I'd like
14:39
to edit that stuff that yeah I just want
14:41
to make that into a face yeah yeah I
14:44
think that that was always and that
14:46
still is you know why why most people
14:47
you say is they just got bits of content
14:49
they need anything because not everyone
14:51
needs everything into a CMS yeah I just
14:55
want to make a content type out of one
14:56
thing yeah boom there it is yeah I love
14:59
that I know so many people who put spend
15:02
a lot of time implementing a CMS on a
15:04
project and the client never ever logs
15:06
in story and actually probably what all
15:12
the client actually wants to do is be
15:14
able to change the stories on the home
15:15
page or doing that's the sort of thing
15:17
the purchase really great time you know
15:18
when you don't need you know you're not
15:19
interested in giving them everything to
15:22
edit because they're never gonna do it
15:23
you know they're not interested a lot of
15:25
times they say oh I need oh I need a
15:27
WordPress website because in their mind
15:29
they think a website is they were
15:31
pressed just yeah and they don't know
15:33
welcome
15:34
they're they're not looking for you to
15:36
create some kind of calm complexity of
15:38
of content I just need basic things yeah
15:43
yeah I love that I do have any any final
15:46
words for our audience anything you like
15:48
to say I'm terrible I must get to
15:52
talking about CSS I can carry on all day
15:54
but you know were you're very welcome
16:00
for for CSS and for the web in general
16:04
and the things that are happening and
16:05
you know if you are in a position where
16:08
you think you know you know always takes
16:09
ages for things to happen it takes ages
16:11
things to get into browsers that really
16:12
is changing and so don't write up new
16:16
things but you think it's going to be
16:17
five years before you can use it because
16:19
you know with the speed of releases now
16:21
with browsers it's something new is
16:23
going to show up you know we can be
16:24
inventing stuff in CSS working group and
16:26
seeing it in perhaps or six months later
16:28
is it really is that fast so you know
16:31
get excited about use different play
16:33
with it and let people know let the see
16:35
this written group let people like
16:37
myself you know happens to be the voice
16:38
of web developers let the browser
16:41
vendors know what you want because
16:42
that's how I get stuff enter into our
16:44
practice and usable for us yeah have an
16:46
actual dialogue with the people rather
16:49
than going you know where are the gaps
16:56
where are the things we need to invent
16:57
you know install next well thanks
17:06
everybody uh our guest Rachel Andrew and
17:09
we'll have a lot more coming up all
17:12
through the day and all through the next
17:14
three days so thanks everybody