00:01
hi I'm Fredrik Philipp von weiss and
00:05
thank you for consuming the Thunderer
00:07
nerds a conversation with the people
00:09
behind the technology love what they do
00:11
and do tech good doing tech hi thank you
00:17
so much for being on the show thanks for
00:19
having yeah it's real honor to have you
00:21
on here I've personally listened to you
00:23
on the podcast for a long time big fans
00:26
so it's really neat to actually talk to
00:29
you in person it's some point I'll get
00:34
back to it somehow yeah do you still
00:35
have that yeah it's a great these things
00:39
have been focusing on making videos for
00:41
lanolin so mm-hmm
00:42
yeah I watched some of your CSS layout
00:46
grid videos yeah those are really
00:48
awesome I think that put a link on there
00:50
on the old Twitter's yesterday and I was
00:52
like oh yeah that's right yeah oh yeah
01:02
so divide a design advocate host
01:06
obviously am an executive producer of
01:08
the web ahead you mind telling our
01:10
audience a little bit about you sure um
01:13
so I'm a web designer designing web site
01:15
since 1996 but also I did I started in
01:19
theater and I was doing a lot of print
01:21
design at the same time and a lot of
01:22
arts administration and event production
01:24
and then I went to I was teaching a lot
01:26
I went to film school I was teaching as
01:28
a professor also while making websites
01:30
you know but then I moved to New York oh
01:33
so exciting I'm like yeah I'm in New
01:34
York and I guess I thought maybe I would
01:36
be doing theater but I needed to pay my
01:38
rent
01:38
oh well there's this play called
01:52
teaching through things like layout LAN
01:54
or teaching at conferences like an event
01:56
apart and which is where we are right
01:59
now and yeah like like being able to
02:01
have like a bigger impact which is
02:03
pretty exciting so these is I work at
02:04
Mozilla the company that makes the
02:06
Firefox browser yeah we all love Mozilla
02:08
yeah and those dev tools are really nice
02:11
and yeah so I my job is designer and
02:15
developer advocate which means that I
02:16
get to come to events and talk to people
02:19
and get information about what
02:21
developers need or what designers need
02:23
what the trends are which are all things
02:24
that I was paying attention to already
02:26
anyway but I get to even be more to
02:28
spend even more time doing research and
02:29
then take that information back to
02:31
Mozilla and be like yes we need to
02:33
implement CSS shapes which we just
02:36
shipped and yes people are excited about
02:38
it see a grid inspector let's go ahead
02:40
and make some other tools or whatever I
02:41
can help make sure that you know how the
02:43
company set priorities both in
02:47
implementing to the browser and in
02:49
implanting sometimes dev tools and
02:51
things um but then also it's my job to
02:53
be about representative Mozilla and to
02:55
go out into the world and to help people
02:57
understand how to make websites better
02:59
so and I've been focusing on CSS and
03:01
focusing on graphic design especially a
03:04
layout the last three four five years
03:06
actually and accessibility and Semantic
03:10
Web but how do you make a great way of
03:12
saying how do you make sure it works all
03:13
the time how do you make sure it works
03:14
on every device for every person using
03:15
every kind of different piece of
03:17
technology they might be using under any
03:18
kind of network conditions those kinds
03:20
of values of what the web is about yeah
03:22
are very important to many of us and
03:24
they're very important to Mozilla so
03:26
it's it's part of what priscila does and
03:28
then having MDM the website as well with
03:30
all those Doc's to be like hey we care
03:31
about you we want to make your job
03:33
easier we want to make sure that you're
03:34
able to do this well we want to make
03:36
sure that the long-term health of the
03:38
web is good because the people who are
03:41
making a web are good at their jobs so
03:44
it's a great partnership match whatever
03:46
job you know to be able to run around
03:48
and be like hey hey I'm gonna be so much
03:50
fun to be able to like express alike do
03:53
your passion as your job and be able to
03:55
get the voice out there I feel very
03:58
lucky and it allowed me as well to join
03:59
the CSS working group so I'm a
04:01
representative of Mozilla along with
04:03
several of our browser engineers to show
04:05
up and say hey this is the kind of CSS
04:08
we think should get invented Green is
04:10
awesome but you know what we also need
04:12
we need like the ability to style selves
04:14
so maybe we can add that to grid level
04:16
three and maybe that will be a tool that
04:18
people can use in two or three or four
04:19
years but it's cool and frequently the
04:23
people who are on the working group are
04:24
engineer
04:25
from browser makers or their people who
04:27
are managers or whatever from browser
04:29
makers and their because the browser
04:30
makers coordinating with each other to
04:32
make sure that whatever CSS or HTML or
04:35
all the other working groups for all the
04:37
other web technologies JavaScript are
04:39
the same the standards are clear and
04:41
clean and they make sense and then every
04:43
drawers are making epaulettes things
04:44
exactly the same but I get to get on the
04:47
CSS working group as well and say yes I
04:51
don't actually know all the details of
04:53
how browsers are but I can advocate for
04:59
designers and developers I have a game
05:01
for authors advocate for people who make
05:03
websites yeah that's amazing I remember
05:08
when I first saw the cool tools and
05:10
within four uh I think was West's boss
05:14
he did a big thing on on a CSS grid and
05:17
I was like oh my God look at these great
05:20
tools that you could use like wow like
05:22
that was so eye-opening to me yeah I
05:24
knew because I was started to learn CSS
05:27
grid in 2016 before it landed in
05:30
browsers in March of 2017 but it was in
05:33
browsers behind experimental flags
05:35
before that for several years as the
05:37
browser makers were implementing it and
05:39
as the working group was finishing the
05:41
specification which is very different
05:43
than what happened with flexbox so if
05:44
you're yeah
05:45
with Flex box there was um something's
05:49
just simple like border-radius
05:50
the people who sit on the CSS working
05:52
group could sit around and be like hey
05:53
let's have rounded corners okay what
05:56
should we call it okay how should it
05:57
work like this it's conceptually very
05:59
easy
06:00
oh that's implemented greatest
06:02
implemented done but with something like
06:03
the Flex box it was much more
06:05
complicated to figure out how to make it
06:06
actually work and so the browser the
06:09
people who make browsers needed some
06:10
time to put it in a browser and go oh
06:13
that's about a real estate agent oh yeah
06:15
that works well but it doesn't quite
06:16
work the way we thought it was let's add
06:18
this let's change the name of that
06:20
that's a bad name was Nick a better name
06:21
Wow so they did that out in the real
06:25
world in actual production browsers
06:29
about find those prefixes like the -
06:32
WebKit and the - Moz or the - bow or the
06:35
- MS
06:37
yeah and that's why we had like three
06:40
totally different versions of flexbox
06:42
where you maybe it's started using the
06:43
2012 version and then it changed and
06:46
then you had to start using the 2014
06:48
version and then you were like how do I
06:50
have both and then maybe you use this
06:52
and it got crazy crazy ugly because the
06:54
intention was that that was an
06:56
opportunity for them to do a rough draft
06:58
mm-hmm and that we people who make
07:00
websites we're not supposed to use it I
07:01
know that I was like oh man your
07:03
prefixes I could just use competent well
07:09
take care of that but yeah so it was
07:12
very very painful for all of us because
07:14
the working group kept wanting to change
07:16
things and they did and the people were
07:18
complaining and it got hard you can only
07:21
change things so much once they are on
07:23
real websites and there was a point at
07:24
which you can't change it so the working
07:27
group they spent years figuring out
07:29
flexbox in the open kind of like in a
07:32
world that we had that we could see a
07:35
lot of people didn't use flexbox for a
07:38
long time a lot of people were like I'm
07:39
not going anywhere near that that's a
07:40
big buggy incompatible mess I know of
07:43
them fix that and I'll close it yeah so
07:46
let me wait four years and then maybe
07:47
I'll splurge flexbox but we see us as
07:49
greatly the browser makers were like
07:51
yeah that did not go well we're not
07:54
doing that again
07:54
and they didn't there are no new CSS
07:59
properties being created with vendor
08:01
prefixes many prefixes are like no over
08:04
I mean there's still some a little bit
08:05
older ones that have prefixes too
08:07
sometimes you still write that those
08:08
things in your code but there will be
08:10
fewer and fewer and fewer of them
08:11
there's no new ones being created oh and
08:15
instead what happened with CSS grid
08:17
because the working group needed that
08:19
same period of time to try out ideas and
08:21
to put it into a working web browser
08:23
into write code and to experiment with
08:26
grid and then be like now that's about
08:27
idea yeah oh let's change the name of
08:29
that oh hey we should add this little
08:31
thing that we didn't think about it at
08:32
first so all of that happened it
08:34
happened between 2012 and 2013
08:37
y'all just didn't know about it because
08:40
it was behind a fly you had to go into
08:43
Firefox nightly or Chrome Canary or one
08:46
of the other experimental browsers now
08:47
it wasn't out yet but now it would be
08:50
Safari
08:51
was a safari one called the night we won
08:53
yeah well there's WebKit nightly yeah
08:55
but then there's the Safari there's like
08:59
a gold with the purple the blue yeah and
09:03
the name I know but I just
09:04
yeah but um those browsers like you can
09:08
go to about : config in Firefox you type
09:11
about colon config in the URL bar as if
09:14
that were working URL and it goes to the
09:16
special secret page
09:18
it's like watch out you might you might
09:19
break everything and you're like fine
09:21
that's fine yeah and then you get this
09:23
big crazy long list of all of the things
09:25
that are half finished it's like being
09:27
on a development server for a project
09:29
you're working on right like the
09:30
difference between the dev server and
09:32
the production server well you don't
09:34
want the client on the dev server
09:35
because they're gonna freak out because
09:37
we just have rated it's the same thing
09:39
so it's like this way to see the like
09:40
development version of the browser and
09:42
see things that are half done
09:43
so you can try it out long before so in
09:46
2015-2016 I'm really but for me it was
09:49
2016 I started learning grid by using
09:51
Firefox nightly and by having it turned
09:53
on and it wasn't finished and there were
09:55
a few things missing and there are
09:56
things that were broken it also my
09:57
understanding of it was broken I was
09:59
still learning it so it's kind of a
10:00
chaotic time Rachel Andrew had spent
10:03
really the entire time that grid was in
10:05
under construction on it being drafted
10:08
and being implemented Rachel was
10:10
following the development and chain and
10:12
every time it changed she understood
10:14
what that change was and knew what the
10:15
change was and she had all those
10:16
examples of the grid by example and she
10:18
kept updating her examples to match the
10:20
new version of grid and so I was
10:23
learning from her and I was learning
10:24
from ellika and - man who's on the
10:26
working group who wrote much of the
10:28
great specification she was helping me a
10:30
lot right so once I got but he had kind
10:34
of wrapped around green and I started
10:36
making demos and playing around with it
10:37
in Firefox nightly are you are also
10:39
chrome Chrome Canary I knew that the
10:44
hardest thing especially because grid
10:46
was still under construction
10:48
I couldn't tell when my code was broken
10:52
or when the browser was broken which is
10:54
in a normal condition but they were that
10:56
reality but then when my code was broken
10:59
I couldn't understand if my
11:00
understanding was broke
11:02
or if my great container coated open or
11:06
my great item code was broken oh and I
11:09
because in large part because I couldn't
11:11
see anything and I'm like but are the
11:13
lines where I think they are and I'm
11:16
putting the items on the wrong line or
11:17
are the lines like not where I think and
11:20
so I knew I needed a way to quickly
11:22
visualize what that thing would look
11:24
like and so I got together with somebody
11:26
on my team Hotch his name is ponch
11:28
there's a nickname and we made a Firefox
11:30
add-on I was like watch let's make it
11:32
let's do it let's we need a dev tool ah
11:34
let's and I wasn't sure how to make a
11:37
depth will exist so I'm like let's never
11:39
sometimes the best way to get somebody
11:41
to do something is to like start
11:43
competing with them so we made an add-on
11:46
and that the intention was never for the
11:47
add-on to be a big thing the intention
11:49
was for the add-on to be a draft an idea
11:52
an experiment way for us to figure out
11:55
well it how helpful is it to see the
11:57
lines how helpful is it to see do we
11:59
need numbers do we need and so we did we
12:02
created this grid inspector at all
12:04
Firefox that we use for hosts well six
12:09
months at least maybe a little longer
12:10
and then I was able to talk to folks
12:13
like Eric Meyer and Rachel Andrew and
12:16
there's a whole group of people in New
12:17
York City who've been coming to a
12:18
meet-up called the CSS layout club and I
12:21
have a slide channel for the CSS layout
12:22
club and so there was this great group
12:24
of people mostly women actually all
12:26
these freman developers from all these
12:27
amazing companies in New York City who
12:29
were giving us all this feedback and
12:31
user testing and being like okay you're
12:32
learning great wonderful because we need
12:34
to user test it among people obviously
12:35
new grid and there weren't very many
12:37
people who knew creek because grid
12:38
wasn't even out yet Zoo them scene but
12:40
they were coming and learning and so it
12:42
was like okay what do you think this one
12:43
that's what do you think of this and
12:45
then I got the intention of one of our
12:47
browser engineers or one of our
12:49
developer tool Engineers gave long and
12:51
he was like this is awesome I want to
12:53
make this and then he took all the ideas
12:55
from the plug-in and started actually
12:57
building it into the real tool and then
12:59
he and I collaborated for the better
13:00
part of I'm in the six or eight months
13:02
until it was ready to ship and we ship
13:05
the very sort of MVP version of it in
13:08
when we shipped grid in Firefox 52 and
13:12
then very quickly
13:13
shipped the rest of it in Firefox 57 we
13:15
you could see the line numbers and all
13:17
kinds of things there's still there's
13:19
still a big road map which is a little
13:20
stalled out I'm hoping we can get back
13:22
to that they will prioritize I can get
13:24
back to it but we have area you can see
13:26
area names I really want to be able to
13:27
see the names of the lines as well yeah
13:30
and there's you know lots ideas actually
13:33
today I think Gabe is dropping in the
13:37
ability to turn on more than one grid at
13:39
once stuff because that was always the
13:42
intention that's why those are not radio
13:44
buttons yeah cuz people are always like
13:46
how come those are radio buttons you can
13:47
only click on one of them they should be
13:48
radio buttons and I'm like I know they
13:50
should be but I don't want to make the
13:52
radio buttons because you're supposed to
13:53
be able to turn more than one oh my gosh
13:55
but there's always been performance
13:56
problems like Gabe made that happen and
13:58
then it was like supercilious like we
14:00
can't do anything slow but I think he's
14:02
finally figured out that performance
14:03
problems and we're good to be able to
14:05
click them like turn on more than one so
14:06
that you can if you have two grids you
14:08
can see if they're lining up the way you
14:09
want and then when some great is coming
14:12
out because they're working we're
14:13
working on subgrade inside Mozilla right
14:15
now and I mean I keep hearing like if
14:18
you like him to fall out like you carry
14:19
new 5.64 and I'm like I don't I don't
14:23
think we're gonna ship it in Firefox
14:24
6450 bookie I keep hearing that number
14:26
we just soon yeah so I'm like we have to
14:30
make sure the tool works or some grits
14:31
that's there's lots and lots of things
14:33
that we're still working on for the grid
14:34
inspector but I hope we can continue to
14:36
polish it and make it better and I'm
14:38
sure you getting such great response
14:40
from people yes because and I you know
14:44
I've always been a designer and in front
14:46
of L at the same time it used to be
14:48
called a webmaster day and I love
14:51
designing in the browser and I you know
14:54
you really think about it Firebug you
14:56
has this HTML page and he had the CSS
14:58
pane and it was awesome could you look
15:00
at your HTML you could write CSS you
15:01
could rewrite your CSS right there and
15:03
then that's all we have and now it's 15
15:06
years later and that's all you like
15:08
until recently that still all you have
15:09
your system will occur like there's all
15:12
these JavaScript tools all these
15:13
performance tools all those amazing
15:14
things but it's like Boop
15:16
how come they're not were CSS cool yes
15:19
yeah so the grid inspector was the first
15:21
well long before I got to Mozilla they
15:23
created an animation inspector to come
15:25
yeah
15:26
see the animations right and there is
15:30
now also a shape path editor do you I
15:34
don't know I haven't played with that so
15:35
if you're using clip path or you're
15:38
using CSS shades there is a fundamental
15:40
geometry under the hood that creates the
15:45
shape so CSS shapes you can take like a
15:46
photo for example you could take
15:48
anything but it works great for a photo
15:49
you take a photo and you float it and
15:51
maybe your photo is of ball or something
15:55
that has you know grapes and that are
15:57
like not a square and though you're like
15:59
these beautifully photographic grapes on
16:01
a white background with a white website
16:03
and so then you can float you float that
16:07
and if you have text after it then the
16:08
text is gonna flow around that but all
16:12
floats so far only ever float like the
16:15
text is gonna be in a rectangular shape
16:17
right yeah but it wouldn't it be awesome
16:19
if it were like a magazine where the
16:21
text could flow around the photo so this
16:25
property called shake outside that you
16:26
apply to the thing that you've floated
16:28
so like you apply it to the image you
16:30
say shape - outside :
16:32
and you apply it to that photo and you
16:35
can apply a circle and ellipse or a
16:37
polygon shape and the text will follow
16:41
instead of the text following the what
16:44
does it usually follow it flows the
16:45
margin box of the thing it will follow
16:47
the shape box of the thing that's
16:49
amazing is you're gonna have a photo of
16:51
a person with the text kind of going
16:53
around the edges of their body or oh my
16:55
gosh it's also shapes CSS shapes is
16:59
awesome and it's been in Chrome and
17:01
Safari for a very long time if we
17:04
finally shipped it in Firefox recently
17:06
or like three months ago perhaps and
17:08
it's not an edge yet but hopefully I'll
17:10
work on it especially people really cry
17:12
for it and start using it yeah I mean
17:14
they've been pushing out so many great
17:17
things an edge I imagine they want to
17:19
adopt anything yeah it's just a matter
17:20
of resources like any project if you
17:22
don't have enough engineers but the
17:25
shapes so it also then click paths the
17:27
clubhouse is a different property so
17:28
let's say you have an image that's a
17:30
photo but you want to clip it so that
17:33
it's not a rectangle
17:34
maybe you want to make it a diamond
17:36
there maybe you just want to make it
17:38
some sort of a polygon she
17:39
you can use clip path to clip that
17:42
object and it will click what's being
17:44
shown you can also click text you can
17:47
clip anything clip you just make it
17:48
empty div and put some background color
17:50
on it and then clip it into a shape you
17:52
can make it into a star lifti gonna be
17:55
the best idea maybe he really should be
17:56
using an SVG to create an illustration
17:58
but there are times when maybe like I
18:00
built a website for a jazz album a
18:04
record company that put such as albums
18:06
and I wanted to take all the bios of the
18:09
jazz artists and instead of just putting
18:10
the photos of the jazz artists online is
18:12
like regular old rectangles I took them
18:14
and like prop them all a little bit into
18:16
all these different polygon shapes a
18:18
little bit so click path uses the same
18:24
kind of underlying geometry to you can
18:28
use a circle you can use it in lips I
18:29
think I have to look this up but you can
18:32
definitely use a polygon so those points
18:34
now the thing about that polygon is like
18:36
where do you get the math for the
18:38
polygon like do you go to illustrator
18:40
and you try to draw a polygon and then
18:42
you try to bring it into math do you
18:44
like make it SVG where's how do you get
18:46
the coordinates of that stuff
18:49
and what happened is that shape outside
18:52
was created by Adobe
18:54
when Adobe had this little team called
18:56
the web platform team inside of it
18:58
inside Adobe it was run by out Stern's
19:00
who's the right now he's the co-chair of
19:02
the CSS working group and somebody named
19:05
Roz one Kalima worked with him and I
19:06
think they had other folks working there
19:08
too and they wrote the specification for
19:10
season shapes and Raghavan made a chrome
19:13
plugin so that you could add it to
19:15
Chrome and have this tool oh and you
19:17
could actually draw where you could just
19:19
like you have to start with some kind of
19:21
code in your CSS but once you have it
19:23
you could click on it and it would show
19:24
you the points and you could grab the
19:26
points and you could just drag them
19:27
around to make it right now I saw that
19:30
tool and I was like this is awesome I
19:32
think this was back in 2015 2014 and I
19:35
started demonstrating it on stage and
19:37
I'd show a video of it actually
19:39
everybody was like and people wanted it
19:43
so badly but house that's a little bit
19:46
buggy and there's some things about the
19:48
user experience ever but because it's an
19:50
extension to Chrome and it's not part of
19:52
the chrome dev tools
19:53
like Rossum I couldn't make it better
19:54
because there's limits on what you can
19:56
do
19:56
sure with an extension and so I was like
20:00
we have to put Firefox and we had to
20:02
make it even better we had even more
20:03
features to it and so we did it's in
20:05
Firefox right now and that's on Kali man
20:08
he had left his job at Adobe and I was
20:10
like we have to hire serendipity
20:15
razvan finished up that tool and we
20:18
shipped it so you can use CSS shapes and
20:20
you can use clip paths and you can kind
20:22
of start I have a video about this on
20:24
land so you might start with some sort
20:25
of rudimentary code in your CSS just to
20:27
get started and then you open up the
20:29
tool and you can track all your points
20:30
around and it's like you're in sketch or
20:32
you're in Illustrator you're in a
20:34
drawing program except you're not you're
20:36
in a web browser and you're just
20:37
dragging the lines on the website itself
20:40
until you get what you want and then
20:42
it's like right there in the little CSS
20:45
pane and you can copy it you can paste
20:47
it into here that's so valuable that's
20:49
nice it's really cool that you're able
20:50
to like be so hands-on in these new
20:54
products that muscle is you know
20:56
offering for us like Jason Pimentel
20:59
Pimentel yeah I was talking about how
21:02
you guys were working on a yes also
21:11
along the way you know I was finding
21:13
myself working with the grid inspector I
21:15
need to have like the HTML one pane and
21:17
CSS and the other paint and you can find
21:18
these tools so you can find a green
21:20
inspector in the font editor in the like
21:22
where the CSS pane is then there's these
21:24
tabs and there's the animation yeah and
21:27
there's a computed tab and now there's a
21:29
new layout tab and there's a there's
21:31
been a inspector or font
21:34
information guide in there for a long
21:37
time in my box but we've sort of
21:39
completely replaced it with this new
21:40
font editor so it's that's where that is
21:43
but there's also this little button now
21:44
and I think it's clicked by default
21:46
where instead of having two panes you
21:48
three panes
21:49
you can on your HTML you can have your
21:51
CSS and then you have your everything
21:54
else yeah so you can see the grid
21:56
inspector you can see the font editor I
21:58
knew especially for the fonts because
22:00
you're gonna want to see the font enter
22:01
and see your CSS right next to each
22:03
other
22:06
and if you hate that if you don't want
22:08
three that's fine there's a little icon
22:09
up there where you can click that I kind
22:12
of goes back to being in - yeah so the
22:17
font editor I think the team the
22:20
existing developer tools team had been
22:22
discussing what to do with the font
22:23
editor for a while and they were trying
22:24
to figure out how you evolve it and what
22:26
to do next with it and I heard about
22:27
variable fonts coming yeah I personally
22:30
for a while wasn't really a fan of the
22:31
monitor and I was a little bit like
22:33
let's get rid of it I was totally wrong
22:34
um but then when I heard about variable
22:37
funds I was like I know what we should
22:38
do
22:40
because one of the things about very
22:42
good fonts right so a variable font is a
22:43
is a normal web font file still open
22:46
type it still wofe - and still all this
22:49
stuff but it's a new version of the open
22:51
type specifications yeah one type got
22:53
more superpowers and in version 1.8 and
22:56
higher anybody who makes a font has the
22:59
ability to export it in this way so that
23:02
it has an axis of variation so there are
23:06
five that are registered axes that it's
23:09
just sort of an agreement among people
23:11
who make fonts to say hey if you're
23:13
gonna make it squish or you're gonna
23:14
make it bold a lot more and less bold
23:16
they don't just make it some random name
23:19
let us have this little all agree to use
23:22
the same name and we'll all agree to use
23:24
the same code and we'll all agree to do
23:25
it in the same way so there's five of
23:27
those kind of official registered weight
23:29
with Optical sizing italics and slant
23:33
okay because they knew that those are
23:35
going to be commonly added to fonts
23:38
right and that group of registered X's
23:41
will probably evolve and there probably
23:42
be more over time but the other thing
23:44
that people who make fonts can do is
23:46
just make up whatever they can be like
23:48
this get grows more worms this one adds
23:52
more leaves as if the characters are
23:54
trees this one has more Sparkle this one
23:57
this is a Western phonic it's like more
24:00
Western these are all fun so let's see
24:05
so there's a lot of websites popping up
24:07
a lot of the folks who make fonts and
24:09
who are excited about variable fun so
24:10
then building out these cool websites
24:12
like v - fonts comm or access practice
24:15
was the original one mmm
24:17
so you go to access practice and then a
24:19
whole bunch of fonts you can like choose
24:20
different fonts it's sort of a workspace
24:22
you're gonna like typeset a bunch of
24:24
type and then you can see what's
24:26
possible and a lot of those tools
24:29
everybody's using these sliders so you
24:31
can like drag the sliders around and you
24:33
can kind of see what's going on with the
24:35
fine and you can be like ooh that's
24:36
really cool I like that more worm or
24:40
that's dumb I like whatever I like this
24:43
one because it's just normal it like
24:44
goes it's very narrow or very wide or
24:47
very bold very humble but the thing that
24:52
those sites reminded me of is back a
24:55
couple generations ago when you were
24:57
trying to learn about typography or
24:59
choose a different font especially I
25:00
remember doing this back in the days of
25:02
system of fonts yeah like choosing a
25:04
system font or what's the name of this
25:07
project it was really good projects
25:09
whose name I'm not gonna remember that
25:10
was a chance to kind of create your own
25:12
set of content
25:14
oh very fiddly interface because don't
25:18
build in JavaScript on a website and so
25:19
it was kind of fiddly and a little
25:21
slower and more clunky than you wanted
25:22
but it was a chance to say I'm gonna put
25:24
my content into a headline into a
25:26
paragraph and into another program and
25:28
then I'm gonna you could just like pull
25:30
up web fonts from services all over the
25:33
web competing services and be like well
25:36
what does this font look like what does
25:37
this look like what is this oh yeah yeah
25:39
and you get to the point you sort of
25:41
narrow down your choices around which
25:42
font you wanted to use or what sizes or
25:44
colors you might use and it really
25:46
wasn't a place to refine your typography
25:47
but it was a place to start making
25:48
choices especially around what font to
25:51
use and access practice and the rest of
25:54
these sites reminded me of that and my
25:56
problem with those other projects was
25:59
always I would get in there I'd spend an
26:02
extra two hours like loading it up with
26:04
my own content I would compare and
26:06
contrast a bunch of choices I would get
26:08
to the point where I was like that's the
26:09
font I want that font and then I would
26:11
buy it and I put it on my own website
26:13
the real website with the real actual
26:14
real content and the rest of the
26:16
branding and I'd be like that looks
26:18
totally different
26:19
mm yeah I don't know that I like that
26:21
fun oh I thought that that was gonna
26:22
look great set at 1.4 m/s but it's
26:25
really now I have to start all over and
26:28
tweak it again like there was something
26:29
about B
26:30
on a third-party app site that just
26:34
didn't quite give you what it is to be
26:37
in the browser with your own real
26:39
website yeah and so when I saw that
26:41
happen with the variable fonts I was
26:42
like yeah that's nice to go and test
26:44
drive and play and to learn about
26:46
variable fonts but when it comes to
26:49
actually kicking ass and getting work
26:51
done you're gonna need to be in your own
26:52
developer tools exactly yeah and the
26:54
only way to be in your own developer
26:55
tool at that point was to just handwrite
26:58
the CSS and type numbers and type
27:00
different numbers and it type different
27:01
numbers and the registered X's you know
27:04
you you can use your weight X's using
27:07
the font weight is it font weight yeah
27:10
font weight probably or you can use the
27:12
with X's with the font stretch property
27:15
in CSS or italics and slant map to font
27:20
style or maybe not slant but look it up
27:25
and so then you could be in there and be
27:27
like okay font weight 200 font weight
27:30
300 font weight 250 font weight 247 font
27:33
weight to 45 and but really is that hmm
27:38
but the tricky thing is that the custom
27:42
axes are sort of secret because it they
27:46
use this font variation of settings
27:49
property with this like short code a
27:51
four digit short code that you have to
27:53
put in quotes and then some random
27:54
number and then order to know what
27:57
number you should use or what short code
27:58
you should use like Utica look all that
28:01
stuff up yeah and that I know from 20
28:05
years in this business that as soon as
28:07
something becomes a little bit hard or a
28:09
little bit extra work like you totally
28:10
don't do it and there and also open type
28:14
features so there's a whole bunch of
28:16
features that fonts can have around
28:19
stylistic alternatives different kinds
28:22
of numbers like old-style numbers or you
28:27
know using certain fancy ligatures that
28:29
you wouldn't want to use all the time
28:30
but you might want to use in a certain
28:32
specific place or swashes like there's
28:34
some fun sounds these beautiful swatches
28:36
do any of us use I think that stuff we
28:38
don't why I was like oh yeah that's been
28:41
on my back of my mind to-do list
28:44
that I keep meaning to go learn about
28:45
that stuff Richard Rutter knows about it
28:48
oh he just wrote this awesome book about
28:49
it but I still haven't learned it myself
28:50
yeah it's because there's no quick and
28:53
easy way to understand oh I have a font
28:55
does it have OpenType features which
28:58
ones what's the code for writing them
29:01
and if it were right there in the
29:02
browser and you couldn't access it very
29:03
quickly it was very easy to use open
29:05
text answers instead at this point there
29:08
are no browser tools and you have to
29:09
like go to the font foundry where the
29:11
font came from download the PDF user
29:14
manual that comes with the phone and
29:17
read it so I could see that the very
29:29
variable fonts were about to do the same
29:31
thing that they were about to become
29:33
this thing that was too hard to use and
29:35
I was worried that all these people
29:38
would stand up saying to me like this is
29:39
so awesome and then the industry
29:41
wouldn't quite actually adopt it because
29:42
it's just a little bit too much friction
29:44
in the process of getting it done so I
29:46
thought here's an opportunity let's take
29:48
the font editor let's make it much more
29:51
visual and let's make it into an editor
29:53
so that there's all these sliders and
29:55
you can grab the sliders and you could
29:56
drag them and it changes your foot
29:58
directly very much like access practices
30:00
very much like other websites but your
30:02
real website so you go to a font and it
30:04
will show you the variation that is a
30:06
variation that are available and you can
30:08
go ahead and just use them and it
30:09
changes to CSS and you can just go ahead
30:11
and use it and we're about to ship
30:13
October 23rd
30:15
2018 we're gonna ship that font editor
30:17
into regular to the regular version of
30:19
Firefox with 500 just ships at the port
30:24
for variable fonts in Firefox 62 a few
30:28
weeks ago so we subtract our supports
30:30
variable fonts now and it will have this
30:33
tool in it and if you want to use a tool
30:34
today you can use it in Firefox beta or
30:36
Firefox developer edition our father's
30:37
nightly because that tools in there and
30:39
my hope is that the team will have the
30:42
excitement and the vision to go ahead
30:44
and also add all of these open type
30:46
features so that you can quickly see do
30:49
I have ligatures are they on do I need
30:51
to do something about that no I don't
30:53
need to do something because they are on
30:54
or Oh which kind of swatches have
30:57
you know on this headline right here on
30:59
this first letter on this headline I'm
31:01
gonna go ahead and like use a fancy
31:02
swatch yes and then that's it becomes
31:04
like super easy for us to use but I
31:06
think the developer tools are the key to
31:08
some of these things that we need better
31:09
CSS developer tools yes thank you may be
31:12
involved in that yeah it's fun makes our
31:14
jobs like just and faster and more
31:18
enjoyable yeah it's fun to be able to
31:22
try these things out more people are
31:23
going to give it a go yeah so yeah check
31:29
out Firefox but perfect nightly is the
31:31
place that people want to get the like I
31:33
don't want to wait I want to use it
31:35
right now it's okay if it breaks every
31:37
once in a while I'll give you some food
31:39
will land and nightly sometime soon and
31:41
then the new that when I say that the
31:43
ability to check more than one green at
31:44
the same time that will land in nightly
31:46
first and then it needs to go through a
31:47
rigorous QA process and if it's at all
31:49
slow or it or no problematic then it
31:51
won't ship and it will hang out until
31:53
it's ready and stuff you know exactly
31:54
like a website so but if you want to
31:56
jump ahead especially for the developer
31:58
tools stuff yeah Marty you're not
32:01
waiting for something that your users
32:02
have it's just for you so you can
32:04
download Firefox nightly and use it and
32:06
check out the tools there and also if
32:09
you are working in nightly you can give
32:11
us feedback and tell us I love that new
32:14
thing mmm what are you why are you
32:17
adding that that no don't know that's
32:21
bad it's like it helps shape the tool
32:23
because you know what I've learned
32:25
working at Mozilla is that the people
32:27
who make rendering engines and the
32:29
people who make developer tools do not
32:31
make websites for a living and most of
32:34
them so they don't know what it's like
32:37
to be a front-end developer and they
32:38
need or maybe they know they knew what
32:40
it was like to be a front-end developer
32:41
in 2004 or in 2009 mm well but they
32:48
funny now because they're focused on
32:50
making developer tools they're focused
32:52
on making a rendering engine and they
32:54
need we need your help we need your help
32:56
to remember what it's like to be you and
32:58
we need your help to say I really do
33:00
want that this other thing and you know
33:01
that would be cool but if you're having
33:03
to set priorities and I only get to
33:04
choose one this is the one way the more
33:07
people can say those things and the more
33:09
they
33:09
and paying firefox people like this is
33:12
also true for Chrome this is those be
33:13
true for edges less mature for all of it
33:14
like I was surprised but it's really
33:16
true that all the browsers makers need
33:19
feedback the CSS working group needs
33:20
feedbacks yeah they need an authentic
33:23
discussion because a lot of times people
33:24
think oh they got it I don't need to ask
33:28
about these things there is there's
33:30
smart people that are already thinking
33:32
about it and they are they are to be
33:34
fair but it's also great to have that
33:37
real-world I mean we know from people
33:40
especially those of us who design
33:41
websites or think about user experience
33:42
design there's a difference between the
33:44
people who obsess about the
33:45
such-and-such website all day every day
33:47
and the people who are just normal
33:49
people who use it
33:50
mm-hmm and so even though it's still
33:53
technology people and technology people
33:55
it's like well these people write C++
33:56
all day mm-hmm
33:57
these people write rust all day these
33:59
people are using javascript and react
34:01
all day but they're not building web
34:02
sites they're building difference it's
34:04
not the same as the people who are
34:06
making websites so it's just this
34:08
constant communication and information
34:10
it really helps shake because it's
34:11
customer research it's like what do you
34:13
need let us know and what does you do
34:15
user testing let's see where it is
34:16
that's we're looking for people to make
34:17
sure we make the right decisions oh my
34:19
gosh I love it that makes me super happy
34:21
if you loved
34:30
yeah for sure and I think that's a huge
34:34
pain point at least maybe I'm like you
34:36
know most companies that I have worked
34:38
for is like you know CSS is like a net
34:41
net it's always like the backburner
34:44
thing like make it work and then make it
34:45
look pretty I don't know and that's the
34:47
bootstrap
34:51
it's so it's so nice to be able to like
34:54
go into you know Mike because I I do all
34:58
of my development in Firefox nightly
34:59
just all of it and then I check
35:01
afterwards everyone should check all the
35:05
other guys but like I feel the most
35:09
comfortable in Firefox which is just
35:11
that didn't used to be a thing a year
35:13
ago right here guys like Chrome just I
35:15
don't even don't look at Firefox ever
35:17
right and now I'm just like its home for
35:20
me so it's really nice to be able to
35:22
like do what I do best
35:24
and faster with fire and why do you want
35:27
that time um for me it was using the
35:29
West boss course first and I just like
35:31
oh this is this is cool but it looks
35:33
kind of difficult right so I went
35:35
through the the CSS grid course with
35:38
West boss and was just you know I was
35:41
enamored with with you know what CSS
35:43
query could do and all right this is
35:46
cool this is fine and but I had to like
35:49
download Firefox doesn't there's no no
35:51
no just like why why I don't understand
35:55
and so you know going through that
35:57
course really just made things like okay
35:59
that's what that's worth that's what
36:01
this does like oh I can I don't have to
36:03
like look at things awkwardly like over
36:05
here right look I could have everything
36:07
great like I can move all the HTML to
36:10
the side and have like my animations
36:12
here and now notepad if I need it like I
36:15
loved it so now it's like well and I
36:19
know the depth Oh seam it also is very
36:23
focused on creating kind of export
36:25
changes to start out with a track
36:27
changes feature so that as your because
36:29
right now I'm you know I think for many
36:31
of us especially those of us who are
36:32
using Firebug and using tux holes when
36:34
they were more rudimentary um you would
36:37
just make only a handful of changes
36:39
you'd be like I mean like the amount of
36:42
changes that I can make it so remember
36:43
everything I did and then you've
36:44
immediately go back to your code in it
36:47
and then you know like like I don't try
36:48
this one thing so you I mean I don't
36:49
know that a lot of people realize this
36:51
if you're not a front-end developer like
36:52
it's this you've got these multiple
36:54
windows open and it's almost as if
36:56
they're in one program because you're
36:57
just in your code editor in your
37:00
slide slide slide slide here's your
37:03
browser code enter browser code in a
37:05
browser coded in our browser get good at
37:09
our gonna get presently and but there is
37:13
a way in which perhaps to make the
37:15
browser more powerful it would be great
37:17
to be able to put more changes straight
37:19
into the browser then you could remember
37:21
at one point yeah and you could like
37:23
really go crazy and then somehow
37:26
magically export the changes save you
37:29
could save them you could have them like
37:32
and so the first thing that they're
37:33
working on right now is a way to just
37:36
get a list out like a kind of a track
37:39
changes type the list of like what did I
37:41
do
37:41
so that you can then recreate it I know
37:44
they're they're trying to work out the
37:45
designs right now around well what what
37:47
would be the next step of power at that
37:49
point what we did wouldn't be cool if
37:51
you could somehow like just create an
37:52
email and be like I'm not one of the
37:55
developers on this project but I have
37:56
ideas about how it should be I'm just
37:58
gonna sit here in a browser an animal in
38:00
there in Firefox and then I'm gonna
38:01
create an email and I'm gonna email it
38:03
to you and you're gonna click on that
38:05
link and it's going to open up Firefox
38:06
it's going to open up our website and
38:07
then it's going to apply all the changes
38:08
that I made to your copy of the website
38:11
that's nice
38:12
yeah and you be like approved or I hate
38:15
it or whatever and we can have a
38:16
conversation and then right so there's
38:19
all kinds of ideas about what does it
38:21
mean to have workflow on a team and
38:23
would it be to go ahead and have
38:25
something that's not just a temporary
38:27
change on my copy of the website locally
38:31
but be like no I actually went crazy
38:33
with it alright I did three completely
38:35
different things and then I want to
38:36
email this to our developers and let
38:38
them open them in three different tabs
38:39
and compare and tell me what they think
38:40
without needing to understand how to set
38:42
up their own copy of the development
38:44
environment or without them being able
38:46
to use git or without them being able to
38:48
do things because again those things
38:50
show I haven't checked in with the team
38:53
lately about where they are with them I
38:54
know that they're working on this to
38:55
figure out like that look like how could
38:57
we do that what's what's where we need
38:59
to do with that it'd be so cool to you
39:03
to have like junior devs and designers
39:04
kind of have that ability to you right
39:07
so they could be like well if you set it
39:09
up like this it's a little bit easier
39:10
for you to like get to this thing and
39:12
this
39:12
this thing right and that way you can
39:14
just be like this is how you do it right
39:16
and it's already there for them you
39:17
don't have to sit down for like an hour
39:19
and a half trying to configure things
39:20
yeah it'd be super cool yeah yeah that'd
39:24
be great for like students to work with
39:26
their teachers you know there's all
39:27
sorts of uses yeah let's see oh my gosh
39:30
thank you so much
39:31
wait did we even talk about your talk no
39:38
[Laughter]
39:41
is everything you need to know or
39:44
everything you know about the web about
39:47
Web Design has just changed yes what
39:49
changed so it's a little link baby right
39:53
a lot of things around user experience
39:56
design or this is what responsive means
39:58
totally you have not changed what's
40:00
changed is graphic design on the web
40:02
graphic design layout it's changed
40:05
drastically in fact it's changed so much
40:07
that I'm actually daring to stand on
40:08
stage this year and say responsive web
40:11
design and I mean layout I don't mean
40:13
everything else I mean layout is over
40:16
there's a new whole new layout model
40:19
it's not anything like responsive web
40:21
design let's call it intrinsic bug
40:24
design how about that name let's use
40:25
that name sticks and yeah what you think
40:29
you know you need to let go of because
40:31
this is different and it's not the first
40:34
time we've changed I think for a lot of
40:35
people I think that responsive web
40:36
design is sort of the way we've always
40:37
done it or maybe they think okay well no
40:40
remember there being a kind of fight
40:41
about it and switching to it so there
40:43
must be something before responsive
40:44
before ever supposed to web design
40:46
responsive web design solves problem
40:49
right the model like the layout model
40:52
the one that we've been using over the
40:54
last eight years is about taking floats
40:56
and floating things and then putting
40:59
percent widths on everything and having
41:01
it grow and shrink at the same time yeah
41:03
that's the only tools we have it the
41:05
only tools we've had in CSS the whole
41:07
time we've been using CSS tools at work
41:10
have been floats by responsive web
41:13
design has only been around for eight
41:14
years and before that we were doing a
41:17
lot of fixed with design but before that
41:20
we were doing fluid design as it floats
41:23
but before that
41:25
using flash we're doing all of our
41:26
layouts and flash and there's just a
41:28
completely different mental model
41:29
because it's just it's a like
41:30
Illustrator or sketch where you just
41:33
grab an object and you stick it on the
41:35
page and it stays where you put it and
41:36
then you drag it and then stays there
41:38
and then you drag it in it stays there
41:39
right looks flat that model of lamb but
41:43
before that we use tables for layout
41:45
HTML tables for land when people would
41:48
take a HTML table and jam things slice
41:51
them into little puzzle they get all
41:52
days reassembly rounded corners with
41:55
your tables yeah and then before that
41:57
was just HTML and floor layout and if
42:00
you look at the timeline and I've
42:02
created a timeline in this talk you look
42:03
at the timeline it's like when we did
42:05
this for 3 years we've done for 5 years
42:07
we did this for 7 6 years we did this
42:09
for responsive web design has been 8
42:11
years it's like the longest period at
42:14
all of those like we've been doing
42:17
responsive web design longer than we've
42:19
been with them we were doing the fixed
42:21
way there longer than we were doing
42:22
flash or longer which to me is super
42:25
interesting it's not a solved problem
42:27
and layout has been a pain because we've
42:30
never truly had real tools to do page
42:32
layout on the web not tools that work we
42:34
do temps but nothing really actually
42:36
worked until CSS grid but it's not just
42:39
CSS pretty it's grid combined with
42:41
multi-column combined with flexbox
42:43
combined with flow layout flow layout
42:45
being the original layout model of the
42:47
web the thing that happens we can do
42:48
nothing
42:48
super important to understand flow and
42:50
to understand writing modes and
42:52
understand how to manipulate that and
42:53
use that understanding when to use it
42:55
and why he's it what you get out of it
42:57
and then there's all sorts of other
42:59
little things other pieces of CSS things
43:02
like object fit that really can help you
43:03
create amazing or or CSS shapes that can
43:07
help you create moments in your layout
43:09
that are graphically really beautiful or
43:11
or blend modes or all these tools that
43:14
we have a lot of them are new and I do
43:16
hope that we will not just take grids
43:20
yes it's great and kind of make
43:21
bootstrap style layouts or make
43:24
responsive whips you know that kind of
43:26
specific idea of what responsive
43:28
websites are using CSS grid I mean that
43:30
is an improvement and I think that might
43:32
be an intermediate step for a lot of
43:34
sites to be like well we had all this
43:36
crap codes rid of the strip and then
43:37
we're going to just do a 12 columns
43:39
metrical layout using CSS great like
43:40
okay okay yeah bye I'm not excited about
43:44
grid because it makes it faster to do 12
43:46
column symmetrical layouts cuz I'm
43:47
totally bored
43:50
I don't think them anymore I think the
43:52
reason we did them is because it tamed
43:54
the chaos of oh my god we don't have any
43:57
tools for layout I guess we're using
43:58
floats and floats or super paint made
44:01
sense at the time it made sense at the
44:02
time but now that we have real tools
44:04
it's like well let's let's go back to
44:07
the kind of creativity that we had in
44:08
the 90s when they were using tables for
44:10
layout we didn't worry about how awful
44:12
the code was or how unusable or be
44:13
usable that code was or inaccessible or
44:15
you know like we our first impulse when
44:18
we were doing getting creative about
44:20
we're about web design back in the 90s
44:22
was an incredibly creative era with
44:25
amazingly
44:27
space dayalan and we can do that at just
44:30
50 Magritte
44:31
you can do all of that but you know what
44:33
it's not actually work very well I
44:34
actually switched it to doing using um
44:37
transitions and other I don't know we'd
44:39
still need something for circles we
44:40
don't have any good circle grid likes to
44:43
make to to like boxes in two dimensions
44:45
yeah so I want us I've been for five
44:49
years I've been really like one
44:50
conference to talk after another trying
44:52
to encourage people to shift our
44:55
thinking about what layout is and shift
44:57
our thinking about what graphic design
44:58
is and this year saying like I'm gonna
45:02
draw a line I'm gonna say that was
45:04
responsive this is intrinsic intrinsic
45:07
you will go learn about the new stuff
45:09
it's different Wow
45:11
so that was my talk this year I love
45:13
that one the name intrinsic intrinsic
45:15
web design so the word intrinsic really
45:18
is about saying hey this layout model
45:23
this ability to do layouts is of the web
45:26
is for the first time it's really about
45:29
the web it's in terms of to the web this
45:31
is the layout model of CSS like stop
45:33
using all these third-party bootstrap
45:35
whatever frameworks
45:37
those were a good crutch when we needed
45:39
help because
45:41
hacks were so the all the hacks are so
45:43
painful and you kept having to spend all
45:45
this time doing the same hacks over and
45:47
over again for different websites even
45:49
though you basically got the same result
45:50
and it's like can we just stop repeating
45:53
ourselves with the same horrible painful
45:55
code yeah okay let's just download a kid
45:57
and we'll just write but we don't need
45:59
to do that anymore so really what this
46:01
is about is saying well we've never
46:02
downloaded kits for color palettes we
46:05
weren't downloaded kids for typography
46:06
let's stop downloading kits for layout
46:08
let's use what's intrinsically part of
46:11
the web let's just use CSS for doing
46:13
layouts
46:14
not just grid you're not always going to
46:16
use grid it's grid plus flex box plus
46:18
multi-column plus flow plus whatever
46:20
else gets invented so yeah in terms of
46:23
what it's like it's also one of the
46:24
things i'm rachel andrew is is is
46:26
helping people understand this by
46:28
writing a lot about this and talking
46:29
about this at her talks this year in
46:31
order to truly understand the layout
46:33
model this new layout model that we have
46:35
you have to understand some fundamental
46:38
things about the web then in the past we
46:40
didn't really ever think about and one
46:41
of those is sizing there's a
46:43
specification called the CSS intrinsic
46:46
and extrinsic sizing module and there's
46:49
all this information in there that is
46:52
fundamental to understanding what's
46:53
going on
46:54
so like when is an image it's intrinsic
46:59
size like a view export an image of 400
47:01
pixels by 600 pixels and you stick it on
47:03
a website you there's words for that
47:05
called
47:06
oh that's the extrinsic signs I'm sorry
47:08
that's the intrinsic size of that image
47:10
it's just what it is is what it is now
47:13
we who make websites have that we've
47:15
been doing that for a long time but we
47:16
never needed to talk about it so we
47:18
didn't have words for it but the people
47:20
who make browsers have words for these
47:22
things so they have to talk about those
47:23
things they have to think about them and
47:24
there are words for those things it was
47:26
worth some been around for decades but
47:28
now that things have gotten more
47:29
complicated it's like oh and you have a
47:31
choice with with before responsive you
47:34
just put the image on the site and it
47:36
was what the size it was yeah if you
47:37
wanted to be smaller you went back into
47:39
Photoshop me made small yeah
47:43
with responsive web design you put it
47:45
width or a min with 100% on it and it
47:47
would like squish and grow so in that
47:49
world it was like we used to always do
47:51
the intrinsic sizes of images and now
47:54
you always do the and then during
47:55
responsive you always resize it
47:57
extrinsic aliy which means that there
47:59
was some sort of external parameter
48:01
external code external condition that
48:03
was imposed
48:04
on the image and the image would be made
48:05
whatever size it was usually based on
48:07
the size of the width of the viewport
48:08
right yeah because the image is 100
48:11
percent of his container and its
48:12
container is 25% of the total and so
48:14
calculate calculate math boo
48:16
you get the extrinsic size image so
48:19
there's an entire CSS module about
48:21
answering the question how big is that
48:24
thing mm-hmm nothing and so the browser
48:29
makers know this in depth the browser
48:31
engineers understand this like Oh what
48:32
does it means it's sizing right but now
48:35
that we have choices because in the new
48:37
in terms of web design world we you
48:39
could use an image at the size that it
48:41
came out in Photoshop yeah
48:42
or you can ask the layout engine to like
48:45
resize the photo based on what
48:46
parameters you want you can do both of
48:48
those things at the exact same time you
48:50
put this one in a container that's
48:51
that's growing and shrinking and you can
48:53
put this one it's fixed right next to it
48:55
and it's fine like you can have a column
48:57
of ads that are fixed size with the IAB
49:00
regulations and then you can have like
49:02
fluid content right next to it and that
49:04
it's fine
49:06
because the browser's doing far more of
49:07
the math this idea of like making
49:09
everything be a column that's a certain
49:11
percent sometimes we're going to use 4
49:13
cents
49:13
most of the time we're not most this
49:14
time we're gonna use Fr units and it's
49:16
just the beauty of that math it's
49:18
amazing and you can it's just so much
49:21
easier and it takes a lot of the load
49:23
off of us if it's a lot more of the load
49:25
on the browser you know lets us imagine
49:28
the layout model and the way we want to
49:30
program the layout mode and then it lets
49:31
the browser do all the math we don't
49:33
have to do all that post-it notes
49:34
without zero yeah you want a browser to
49:36
be smart and you want you to be creative
49:38
if you wonder what seems to be like
49:40
fantastic I get it it turns out
49:43
computers are really good at doing this
49:53
whole three part series about like
49:57
sizing and like what does it mean to use
49:59
Fr unit versus a min/max statement
50:01
versus the main content or max content
50:03
statement in your grid layout or what is
50:05
it and I'll be making many many more
50:07
videos about in terms of web design what
50:08
difference is it how is it different
50:10
than responsive web design what do we
50:12
want to think I mean one thing so for
50:14
example if you take a responsive website
50:15
and you make the browser narrower
50:17
lighter everything gets smaller or
50:21
bigger at the same time and the same
50:23
rate but with intrinsic web design it's
50:25
very easy to set up a situation where
50:27
actually this thing gets smaller until
50:29
it hits a certain thing and then this
50:31
one starts to get smaller and then this
50:32
one gets bigger until it hits a certain
50:34
point and then this one gets bigger so
50:35
that there's multiple stages or wear
50:38
when you're squishing it this one will
50:40
will get small slowly and this one will
50:42
get small much more quickly so the rate
50:44
of change is different on different
50:46
parts of the layout yeah it's not the
50:48
same it was not no that's so far it kind
50:52
of feels like you're saying like you
50:55
know it is what it is
50:57
versus like it is what it's not I know
50:59
that it's weird to kind of say that's
51:01
what kept popping into my head so that's
51:04
really really awesome but like it can be
51:07
what it isn't right like it's it's not
51:09
necessarily like a big picture but we
51:11
can make it big which is really cool so
51:13
you know no good I'm done I know spend
51:17
the next four or five years at least if
51:19
not long aren't just playing and
51:20
exploring and trying and understanding
51:22
all those things because we just don't
51:23
know yet yeah I mean I'm standing on
51:25
stage as the expert explaining all these
51:27
things and then go back home to my room
51:28
and I start so our people have stopped
51:30
me in the hall or so to have ideas I
51:32
don't know and the end to I mean I don't
51:35
know just make a demo people are like
51:37
how is this gonna work I'm like I don't
51:38
know make a demo right put it in a
51:40
browser
51:41
tell me literally literally know this
51:48
you know for a long time it's been like
51:49
do it this way don't do it this way you
51:51
can do that you can't do that yeah
51:53
forget all of that throw all of that out
51:56
the window there are definitely limits
51:58
sure but we don't know what they are
51:59
right now
52:00
it's so exciting explore do ya plan I
52:07
just made a mono okay well in a designer
52:09
it's like I have this idea and the fan
52:10
developers like you can't do those the
52:12
work the work doesn't work that way be
52:13
like yeah excuse me
52:17
we're gonna make a prototype and we're
52:19
going to see whether or not it's
52:20
possible because maybe it's not maybe it
52:22
is exactly you don't know until you try
52:24
yeah at this point all bets of how
52:26
things used to be are off and we have a
52:28
whole new thing love that so exciting
52:30
yeah
52:30
oh I'm sure we've taken up far too much
52:34
of your time yeah thank you so much for
52:36
being a part of the show and coming on
52:39
to talk to us and yeah I really enjoyed
52:42
it and you know we'll put a link to your
52:43
slides because I went through your
52:45
slides and like you said yeah
52:46
a lot of a lot of good points on there
52:47
and we'll put a link a bunch of links to
52:49
your videos as well okay yeah thank you
52:52
so much for being on the show and stay
52:55
tuned everybody we'll have a lot more
52:56
speakers coming up