WEBVTT
00:00:00.000 --> 00:00:05.860
So if you saw my talk last year,
we quickly went over for the external data sites
00:00:05.860 --> 00:00:11.060
on how we help use external data
and some internal data to inform our decisions.
00:00:11.060 --> 00:00:17.430
I wanted to revisit this talk again
because it's almost, I want to give a,
00:00:18.630 --> 00:00:20.040
help you understand
00:00:20.040 --> 00:00:23.050
all the different inputs that we take
into account in making decisions,
00:00:23.050 --> 00:00:24.830
because the interactions
I have with web developers
00:00:24.830 --> 00:00:28.120
and designers often still
have these type of feedback.
00:00:28.860 --> 00:00:30.980
Why don't you have this feature?
00:00:30.980 --> 00:00:32.730
Why isn't the bug I filed fixed yet?
00:00:33.560 --> 00:00:37.400
And I almost want to write this
to my former self.
00:00:37.400 --> 00:00:41.070
If I knew when I was a web developer what I know now,
00:00:43.160 --> 00:00:46.190
I would probably work on the Web platform
in a completely different way.
00:00:46.190 --> 00:00:51.900
Because I've now learned
that your voice, if I can click it&
00:00:53.010 --> 00:00:55.290
Your voice in the way
you build your site has power.
00:00:56.170 --> 00:01:00.320
It doesn't matter if you're working on
the largest sites or the smallest sites, it has power
00:01:00.320 --> 00:01:02.660
and it helps shape
what and how we do.
00:01:02.660 --> 00:01:05.590
And while yes, I work for Microsoft Edge,
it's important to understand
00:01:05.590 --> 00:01:09.430
that this also impacts other browsers,
as well as the standards bodies.
00:01:09.430 --> 00:01:12.750
Because all of us have engineering realities
and constraints that we have to live within.
00:01:13.770 --> 00:01:19.210
If you would have asked me when I first started off
working in web development what made a great browser,
00:01:19.210 --> 00:01:20.840
I would have told you the features,
00:01:20.840 --> 00:01:23.450
because man is it great to remove a polyfill
00:01:23.450 --> 00:01:28.510
or 20 lines of hacky CSS code, to use CSS grid,
as Melanie was showing you earlier.
00:01:28.510 --> 00:01:31.490
But quickly as you begin working
and you begin testing, you quickly realize
00:01:31.990 --> 00:01:34.600
the features actually aren't that
great if they're not interoperable.
00:01:34.600 --> 00:01:37.430
You need them to work together,
because one of the beauties of the web
00:01:37.430 --> 00:01:42.700
is the web is one of the few things
that is getting closer to write once,
00:01:42.700 --> 00:01:45.020
run anywhere, within any platform.
00:01:45.640 --> 00:01:48.560
And so without it being interoperable,
the features of it are no good.
00:01:49.480 --> 00:01:53.460
Additionally, it doesn't matter how interoperable
and how great your features set
00:01:53.460 --> 00:01:56.660
is if you're crashing all the time,
or they're slow and unusable.
00:01:57.430 --> 00:02:01.090
So you need all three of these things,
in actuality, to make a great browser
00:02:01.090 --> 00:02:03.420
There's certain browsers that just shove
as many features in there
00:02:03.420 --> 00:02:05.680
and like sweet, look at our score on these things.
00:02:05.680 --> 00:02:07.830
But that isn't what necessarily makes a great browser.
00:02:08.430 --> 00:02:13.220
So at Microsoft Edge what we're trying to always do
is find that intersection for each release,
00:02:13.220 --> 00:02:18.130
to ensure that we're providing our mutual
users the best experiences possible.
00:02:18.850 --> 00:02:21.880
So we end up getting feedback from a number
of channels, some of them you've already heard about.
00:02:21.880 --> 00:02:24.700
We'll go through some of those as well
and a little bit more in-depth.
00:02:26.700 --> 00:02:32.140
We get feedback from our users
directly on what they do and don't like.
00:02:32.140 --> 00:02:34.460
We get feedback from you,
web developers and designers,
00:02:34.460 --> 00:02:38.560
on what you want us to be working on
with some of the largest sites on the planet,
00:02:39.250 --> 00:02:41.470
from our partners such as Pinterest for example,
00:02:41.470 --> 00:02:43.730
and our internal partners, Office,
00:02:43.730 --> 00:02:47.990
Outlook, and also business goals
that we have for Microsoft.
00:02:47.990 --> 00:02:53.030
We end up getting multiple inputs,
bugs, feature requests, data, standards
00:02:53.030 --> 00:02:55.760
and those Microsoft business
rules end up rolling in
00:02:55.760 --> 00:02:58.100
to determine the relative
priority of what we work on.
00:02:58.930 --> 00:03:03.160
We roll this information up, as you heard earlier,
on the status.MicrosoftEdge.com.
00:03:03.160 --> 00:03:05.680
And this is just a great site,
if you haven't gone to it,
00:03:05.680 --> 00:03:09.770
to see what we are working on,
where it ranks, what browsers support it,
00:03:11.480 --> 00:03:15.040
whether or not it's a low, medium
or high priority on our backlog.
00:03:16.000 --> 00:03:18.050
And so how do we determine
that low, medium or high?
00:03:18.650 --> 00:03:23.340
Well, we need to look at those actual inputs
that we do take into account, starting with bugs.
00:03:23.930 --> 00:03:24.910
All software has bugs.
00:03:24.910 --> 00:03:27.790
Has anybody found a bug in Microsoft Edge
at all, anybody at all?
00:03:28.520 --> 00:03:30.330
Well, there's a lot less hands.
00:03:30.330 --> 00:03:32.080
We can just go home.
00:03:32.080 --> 00:03:33.780
This is great.
All right.
00:03:33.780 --> 00:03:35.960
So you can provide bugs
in numerous ways.
00:03:35.960 --> 00:03:40.260
It's right in the dropdown,
report an unsafe site, say that there's a site issue.
00:03:40.260 --> 00:03:43.290
Via the feedback hub,
whether it's a feature request or an issue.
00:03:43.910 --> 00:03:48.570
But for web developers and designers
we launched last year issues.MicrosoftEdge.com.
00:03:48.570 --> 00:03:52.640
We launched this specifically because it gives you
the capability of providing us with more information
00:03:52.640 --> 00:03:54.690
such as whether it repros
in other browsers.
00:03:54.690 --> 00:03:58.360
It allows us to converse with you directly,
so maybe the content on the site changed,
00:03:58.360 --> 00:04:00.440
but we still want to reach
out to you and say hey,
00:04:00.440 --> 00:04:02.550
do you by chance have a way
for us to reduce this problem,
00:04:02.550 --> 00:04:05.390
so that we can go and still address
that site and that problem.
00:04:06.150 --> 00:04:10.740
After launching this last year, we have a real
wonderful web developer and designer,
00:04:10.740 --> 00:04:12.700
I highly recommend following
her and reading her books,
00:04:12.700 --> 00:04:15.250
she will definitely level up
your web development capability.
00:04:15.250 --> 00:04:19.380
Tweeted it out and asked,
I would file so many more bugs on browsers
00:04:19.380 --> 00:04:20.970
if I could just
submit them via Twitter.
00:04:20.970 --> 00:04:23.330
A few of us looked around the office
and we were like, why not?
00:04:24.080 --> 00:04:24.820
I mean these are great.
00:04:24.820 --> 00:04:28.910
These are reductions, they're automatically
actionable by our developers.
00:04:28.910 --> 00:04:33.410
So all you have to do is send us
a tweet, as you can imagine, with a reduction.
00:04:33.410 --> 00:04:36.760
And basically a reduction
is the smallest amount of code
00:04:36.760 --> 00:04:38.200
as possible to repro the issue.
00:04:38.200 --> 00:04:42.560
So hey, this box is red and it should be green
And then basically the text surrounding
00:04:42.560 --> 00:04:45.840
it becomes the title
within the bug, hash tag it.
00:04:45.840 --> 00:04:48.610
And we end up replying to you
with the issues at once,
00:04:48.610 --> 00:04:50.800
and we will follow up later
with what you would like.
00:04:50.800 --> 00:04:56.290
But we what as much of that as possible
so we can encourage and improve the web platform.
00:04:56.290 --> 00:05:00.300
All the ways of filing these bugs come back
to our team foundation server in the back end.
00:05:00.300 --> 00:05:06.200
We triage, we prioritize, we get these onto the teams
that need them in order to make the best decisions,
00:05:06.200 --> 00:05:09.580
and then also sometimes put them on the milestones
of when they're going to be worked on.
00:05:09.580 --> 00:05:12.970
So the question comes back to,
how do bugs influence the priority?
00:05:13.870 --> 00:05:17.290
Well there's a button that you may not have
noticed on this subpage, and it is just called me to.
00:05:18.440 --> 00:05:25.000
And this is an important button, because
in the back end this rolls up into basically a counter.
00:05:25.780 --> 00:05:30.460
And when we do bugs, even if you didn't
click the me too button, we also increase this counter,
00:05:30.460 --> 00:05:32.790
because we live under
engineering constraints
00:05:32.790 --> 00:05:34.570
just like everybody in this room.
00:05:34.570 --> 00:05:38.400
And so if we only have time to fix two bugs, we go with
the one that's going to have the biggest impact.
00:05:38.400 --> 00:05:40.610
So it's very important that you file the bugs.
00:05:40.610 --> 00:05:45.260
You're actually helping out your future self,
as well as future web developers, by filing the bugs.
00:05:47.120 --> 00:05:48.950
We also take into account future requests.
00:05:48.950 --> 00:05:51.120
This is the one I think when
interacting with web developers,
00:05:51.120 --> 00:05:55.040
this is the one they get the most excited about,
the one that they want to talk about all the time.
00:05:55.040 --> 00:05:56.450
When is the new shiny stuff going to come?
00:05:57.090 --> 00:05:59.850
And we get feature requests
from multiple different venues.
00:05:59.850 --> 00:06:01.600
In person, like at conferences like this.
00:06:01.600 --> 00:06:07.440
In the last fiscal year alone, we sponsored, spoke at
or attended to get that feedback, dozens.
00:06:07.440 --> 00:06:11.510
This is just a few of them, dozens of events,
in order to get that feedback.
00:06:12.080 --> 00:06:17.720
Our ecosystem team, and I love this, goes out and meets
with some of the largest sites out there
00:06:17.720 --> 00:06:20.660
including LinkedIn, and they are over at Pinterest,
00:06:20.660 --> 00:06:23.400
and they run an exercise
called the $100 exercise.
00:06:23.400 --> 00:06:27.830
And basically what we do is we walk in the room
and we say, what don't you like about Microsoft Edge?
00:06:28.430 --> 00:06:32.630
And as you can imagine, we start compiling a list
and trying to understand that list a little bit better.
00:06:33.170 --> 00:06:35.740
And then about 30 minutes in,
we ask the question, we say
00:06:35.740 --> 00:06:40.440
OK, if you only had $100 to spend,
how would you allocate it to this list.
00:06:41.070 --> 00:06:44.430
And it's great, because even people within that room,
you have people that are JavaScript developers,
00:06:44.430 --> 00:06:46.330
you have designers,
you have people in CSS,
00:06:46.330 --> 00:06:48.350
they don't even agree on
how to allocate that money.
00:06:48.930 --> 00:06:53.110
And then so you quickly find where
the nuisances are, and their real pain points are.
00:06:53.110 --> 00:06:56.320
We've had people like give $100
solely to dev tools.
00:06:56.320 --> 00:07:01.840
As you heard Jacob speak to, that's one of the reasons
we have been investing so heavily in that space.
00:07:03.150 --> 00:07:07.630
And you may be sitting there saying,
Greg that's great that you go to these conferences
00:07:07.630 --> 00:07:08.880
and that you go to these big websites.
00:07:09.750 --> 00:07:12.410
I don't attend conferences.
I don't go to a lot of websites.
00:07:12.410 --> 00:07:13.230
But you've heard about this.
00:07:13.230 --> 00:07:18.900
We care about your voice and that's why we launched,
if I can click it, uservoice.MicrosoftEdge.com.
00:07:19.580 --> 00:07:22.410
This is a great site that is
similar to the $100 exercise.
00:07:22.410 --> 00:07:23.960
You get an allotment of votes.
00:07:23.960 --> 00:07:26.700
You're able to go into any feature
and you're able to vote for those.
00:07:27.300 --> 00:07:30.790
And then when you vote for those,
if we begin implementation on it,
00:07:30.790 --> 00:07:34.180
we email you and let you know hey,
we've begun implementation on it.
00:07:35.010 --> 00:07:37.810
We gave your votes back, you're able
to then go vote on something else
00:07:37.810 --> 00:07:39.190
that you would like us to be working on.
00:07:39.780 --> 00:07:44.180
The astute among you, they may go to this site,
and I've had this question on Twitter.
00:07:44.880 --> 00:07:49.340
And I went there and I noticed that shadow
DOM and custom elements are the top requested feature.
00:07:50.020 --> 00:07:51.820
Why aren't you working on it?
00:07:51.820 --> 00:07:55.160
I think it's important to always
point back to, it is one input.
00:07:55.160 --> 00:07:57.010
It is not the input.
00:07:57.010 --> 00:07:58.470
And so there's always a lot of context
00:07:58.470 --> 00:08:00.510
and I'll go through a few
more examples later in the talk.
00:08:01.140 --> 00:08:04.240
The engineering realities,
we wrote a blog post on this recently
00:08:04.240 --> 00:08:07.410
where our DOM has been going through
a multi-year re-architect effort.
00:08:08.060 --> 00:08:12.620
And anybody in this room understands, when you're
rebuilding something, you don't build on top of it.
00:08:12.620 --> 00:08:16.310
That's not the only reason we haven't necessarily
moved on that, but it's one of the largest reasons.
00:08:17.080 --> 00:08:21.050
To scope in a little bit, I'm on the layout team,
so we get to do a lot of cool CSS stuff.
00:08:21.570 --> 00:08:25.430
But just to show you in Edge 15,
we shipped CSS variables.
00:08:25.430 --> 00:08:27.130
At the time that was
the top-ranked feature.
00:08:27.690 --> 00:08:30.320
Position sticky objects and CSS grid
are shipping next release,
00:08:30.320 --> 00:08:32.260
this is an awesome release
for CSS, by the way.
00:08:32.260 --> 00:08:34.160
I'm just like super stoked about Edge 16.
00:08:34.800 --> 00:08:38.570
Position sticky and object
fit were one and two when we began implementation,
00:08:38.570 --> 00:08:41.590
and CSS grid was in third
or fourth place at the time.
00:08:41.590 --> 00:08:45.120
It's important to know that we actually
began implementation all at the same time,
00:08:45.120 --> 00:08:49.070
but we wanted to announce CSS grid
a little bit later, at an event apart,
00:08:49.070 --> 00:08:51.490
and that's why it ended up
getting so many more votes.
00:08:52.280 --> 00:08:56.280
I also think it's important to understand
that with each and every single one of these inputs,
00:08:56.280 --> 00:08:58.400
there's sub data to analyze as well.
00:08:58.980 --> 00:09:01.620
We can't just look at both and go,
oh, that's definitely the most impactful.
00:09:02.330 --> 00:09:04.390
Because let's take a look
at the user voice trends here.
00:09:05.290 --> 00:09:09.630
2014 to 2017, you'll notice
we pretty much have no votes
00:09:09.630 --> 00:09:11.630
for the majority of the time
that this feature has existed,
00:09:11.630 --> 00:09:13.790
and then there's
a massive spike in 2017.
00:09:14.800 --> 00:09:16.570
This is actually CSS grid.
00:09:17.570 --> 00:09:22.220
And usually what this tells us
is that the spike is usually due to a thought leader
00:09:22.220 --> 00:09:23.430
requesting it in a talk,
00:09:23.430 --> 00:09:26.020
a blog post on Twitter,
or something of that nature.
00:09:26.720 --> 00:09:32.730
And Jenn Simmons, a designer advocate at Mozilla,
did just that and we saw it spike drastically.
00:09:32.730 --> 00:09:35.360
That doesn't nullify the votes,
but it does tell a different story
00:09:35.360 --> 00:09:37.260
than necessarily all of you just saying hey,
00:09:37.260 --> 00:09:40.450
we really want to go have
CSS grid, let's go vote for it.
00:09:41.090 --> 00:09:44.190
Additionally, here's another trend
over the same time period.
00:09:44.190 --> 00:09:47.150
You'll notice consistent voting
is occurring over and over again.
00:09:47.840 --> 00:09:51.850
This is for object fit, it has half the votes,
but this paints a different picture.
00:09:52.780 --> 00:09:55.270
This is a common problem now, today.
00:09:55.810 --> 00:09:58.260
What is happening is web
developers are working on it,
00:09:58.260 --> 00:09:59.850
they are showing it to their
designers and they're like,
00:10:00.370 --> 00:10:01.920
why doesn't it
look great in Edge.
00:10:02.550 --> 00:10:03.190
This stinks.
00:10:03.190 --> 00:10:07.100
And so they go to a Stack Overflow
or their favorite forum,
00:10:07.100 --> 00:10:09.460
and they find out, oh they haven't implemented it,
we need to vote for it.
00:10:09.460 --> 00:10:10.840
So they go vote for it.
00:10:10.840 --> 00:10:15.510
So this is again how we can understand
the underlying data to help inform our decisions,
00:10:15.510 --> 00:10:17.330
to make the best
impactful decision
00:10:17.330 --> 00:10:19.470
for not only the web developers
but our shared users.
00:10:20.510 --> 00:10:24.470
Speaking of data, we covered
the external data last year,
00:10:24.470 --> 00:10:28.000
data.MicrosoftEdge.com,
so we'll quickly cover it here today.
00:10:28.640 --> 00:10:33.920
But we have the API catalog,
and this has the DOM APIs across the standards,
00:10:33.920 --> 00:10:35.160
as well as the various browsers.
00:10:35.160 --> 00:10:37.890
You can compare any three to see
the overlap between them.
00:10:39.040 --> 00:10:41.120
This is great when trying
to make decisions on.
00:10:41.120 --> 00:10:44.470
CSS usage also is built
on our Azure inter-app crawler.
00:10:44.470 --> 00:10:46.670
It gives us the capability
of seeing every CSS property
00:10:46.670 --> 00:10:50.710
that is utilized on the site, as well as the sites
utilizing, the values that are used.
00:10:51.640 --> 00:10:54.630
And I really want to do a great call
out to our friends over at Mozilla.
00:10:54.630 --> 00:10:57.800
Last year, if you saw in my talk,
we weren't able to crawl with Mozilla.
00:10:57.800 --> 00:11:00.840
They actually made a product
adjustment for us so that we can run with them,
00:11:00.840 --> 00:11:02.480
so that when we're working in the W3C
00:11:02.480 --> 00:11:05.480
we're able to discuss
and make informed decisions
00:11:06.090 --> 00:11:07.660
regarding Mozilla properties as well.
00:11:09.240 --> 00:11:10.600
The web is massive.
00:11:10.600 --> 00:11:15.850
It would be naive and ignorant for us to just
solely use our own data in order to make decisions.
00:11:15.850 --> 00:11:22.070
So we also look at our
competitors information as well,
00:11:22.070 --> 00:11:26.990
and we have discussions with them
regularly on what they've seen, web compats.
00:11:26.990 --> 00:11:30.310
We also go look at GitHub repos
to see what you all are using as well.
00:11:30.310 --> 00:11:33.020
Just again, to have as many data
end points as we can.
00:11:34.100 --> 00:11:37.930
And while all this external data is useful,
we also have in-product telemetry
00:11:37.930 --> 00:11:41.130
which is approved telemetry from our users
to help make the product better for them.
00:11:41.630 --> 00:11:43.710
This includes crash stats.
00:11:43.710 --> 00:11:46.450
So when a site crashes, we can go to the URL,
00:11:46.450 --> 00:11:49.680
and we can make it so that it no
longer crashes for you and your users.
00:11:50.250 --> 00:11:51.770
This means intermittent hang.
00:11:51.770 --> 00:11:56.100
So when you see this wonderful thing, this could be to
a web developer writing a terrible while loop,
00:11:56.100 --> 00:11:58.430
or it could be optimizations
that we need to make in our engine
00:11:58.430 --> 00:12:03.070
in order to make it so the entire experience
on the Edge HTML is better.
00:12:03.070 --> 00:12:05.620
This also includes DOM API accounts.
00:12:05.620 --> 00:12:09.500
And for some reason on this session,
somebody is calling console.log way too many times.
00:12:09.500 --> 00:12:13.080
But this gives us the capability again
to make performance and business decisions
00:12:13.080 --> 00:12:17.000
in a prioritized and realistic way to make
the biggest impact for our users.
00:12:17.660 --> 00:12:21.220
A good example of this telemetry
is seen in independent rendering,
00:12:21.220 --> 00:12:24.560
which will be coming out next month.
00:12:24.560 --> 00:12:26.360
We actually shipped it in IE11.
00:12:27.100 --> 00:12:30.220
Todd will be going more in-depth
on this a little bit later on.
00:12:30.220 --> 00:12:34.930
But to give you a quick overview, the main thread,
also something we refer to as the UI thread,
00:12:34.930 --> 00:12:36.700
is where the majority
of the work is done.
00:12:36.700 --> 00:12:40.890
You can see here that we're doing some content
processing and then we do rendering,
00:12:40.890 --> 00:12:43.150
and then maybe there's some
silent validations that we do,
00:12:43.150 --> 00:12:45.070
and so we need to redo
some more work in the engine,
00:12:45.070 --> 00:12:48.670
and then we have content that we need
to paint and we render it again as well.
00:12:49.170 --> 00:12:52.290
In IE11, we shipped the independent
rendering capability
00:12:52.290 --> 00:12:54.760
where we were able to move the painting
the composition to another thread.
00:12:56.200 --> 00:12:58.240
The thing is that we weren't able
to accomplish this for everything,
00:12:58.240 --> 00:13:02.540
so we prioritized it accordingly,
but then also wisely added in the telemetry,
00:13:02.540 --> 00:13:06.700
so if ever our users went to
the slow path, we would understand why.
00:13:07.460 --> 00:13:11.230
So that we could again, go fix those
issues in a prioritized manner.
00:13:12.310 --> 00:13:14.490
In some of the perf clubs
our perf team was doing,
00:13:14.490 --> 00:13:16.800
they started kind of seeing
this as a reoccurring theme,
00:13:16.800 --> 00:13:18.050
that people were falling back.
00:13:18.050 --> 00:13:23.140
And so we went and looked at the telemetry,
and 98 percent of it was due to complex SVG,
00:13:23.140 --> 00:13:27.860
the canvas element and the select control
is why we were falling back to these paths.
00:13:28.620 --> 00:13:32.510
And so in Edge 16, these now
are all independently rendered,
00:13:32.510 --> 00:13:34.530
so that our users,
when they touch the screen they get
00:13:34.530 --> 00:13:37.760
that wonderful perceptive performance
00:13:37.760 --> 00:13:39.230
improvement of the browser,
00:13:39.230 --> 00:13:40.690
automatically rendering that content,
00:13:40.690 --> 00:13:42.930
even if we're still doing work on the UI thread,
00:13:42.930 --> 00:13:44.560
to provide them with the updated content.
00:13:47.630 --> 00:13:49.310
Standards.
00:13:49.310 --> 00:13:54.620
This is the one I would say if I looked back,
this is the one that is most misunderstood.
00:13:55.570 --> 00:13:58.310
Because you know what's interesting
is when I worked on a browser,
00:13:58.310 --> 00:14:00.380
I always wanted and I always
believed in standards.
00:14:00.380 --> 00:14:03.490
I like really loved the goal
and the drive for standards.
00:14:04.770 --> 00:14:08.410
And I think inherently all of us
as web developers, when we work with a browser,
00:14:08.910 --> 00:14:12.920
we want to believe that the browser that
we're using is adhering to standards.
00:14:13.880 --> 00:14:17.740
And I think it's important to understand
that just because something is implemented,
00:14:17.740 --> 00:14:19.320
does not mean it is standard.
00:14:19.320 --> 00:14:22.270
For example, you heard about CSS grid earlier.
00:14:22.270 --> 00:14:24.800
We've had MS grid in our browser since IE10.
00:14:24.800 --> 00:14:27.100
That doesn't mean it was a standard yet.
00:14:27.620 --> 00:14:31.430
A good example of the question that we commonly
get is hey, how come you don't implement Web-B.
00:14:32.000 --> 00:14:33.670
There is no spec or standard for that?
00:14:33.670 --> 00:14:35.970
Basically we get pointed
to the chromium blink code.
00:14:38.000 --> 00:14:40.400
To make this more confusing,
just because there's a spec
00:14:40.400 --> 00:14:42.630
doesn't mean it's ready to implement.
00:14:42.630 --> 00:14:45.660
And so, I actually have a great
example of where this occurred
00:14:45.660 --> 00:14:47.750
with our wonderful MC,
Patrick Kettner, actually.
00:14:48.260 --> 00:14:52.040
We were at the CSS working group
in August, in the face phase here in Mozilla's office.
00:14:53.530 --> 00:14:57.390
And they're trying to solve a really,
really good use case of vertical rhythm.
00:14:57.390 --> 00:14:58.630
You actually see it in print all the time,
00:14:58.630 --> 00:15:02.640
where the lines of text are aligned
with each other in columns.
00:15:03.940 --> 00:15:07.920
And he sent me this tweet, an idea and I was like,
I love this, it's in Chrome,
00:15:07.920 --> 00:15:09.680
I want this like yesterday, this is awesome.
00:15:10.190 --> 00:15:14.190
He's just super excited about it,
but I had just been literally like two days
00:15:14.190 --> 00:15:18.090
before in a meeting where Firefox,
David Baron in this case,
00:15:18.090 --> 00:15:20.640
would say I'm discouraging
people from implementing it
00:15:20.640 --> 00:15:23.040
because I don't want to implement
this in this manner.
00:15:23.670 --> 00:15:25.910
And I think it's important to understand,
he's not saying the use case,
00:15:25.910 --> 00:15:27.790
he's saying just the current state of the spec.
00:15:27.790 --> 00:15:29.710
So what this tells us is hey.
00:15:29.710 --> 00:15:31.830
We have engineering constraints.
00:15:31.830 --> 00:15:34.290
We know the spec is going to change drastically.
00:15:34.290 --> 00:15:38.140
That's nothing against the spec,
we will iron those issues out, and we'll go work on it,
00:15:38.140 --> 00:15:41.600
but this is why we're not necessarily going to jump in
and go implement this right now.
00:15:41.600 --> 00:15:45.530
None of us, none of us want another flex box
where it's constantly changing and everybody
00:15:45.530 --> 00:15:47.210
is snapping to different points,
00:15:47.210 --> 00:15:49.770
and we just have this interoperable mess
00:15:49.770 --> 00:15:52.540
until we finally were able
to get the spec in a stable state
00:15:52.540 --> 00:15:54.040
and everybody could align on that.
00:15:55.200 --> 00:15:59.080
Additionally, Elica who's on it
feels like pretty much every CSS spec,
00:15:59.080 --> 00:16:01.030
also was saying was saying hey,
00:16:01.870 --> 00:16:03.290
I don't feel this is well-designed.
00:16:03.290 --> 00:16:09.780
Again, this is not to bash it, this is just to say,
this is context that we have, at times,
00:16:09.780 --> 00:16:12.680
that this is why, for example,
on status it shows up as medium.
00:16:12.680 --> 00:16:15.290
We're not necessarily against
the spec, we're not at times.
00:16:15.290 --> 00:16:16.820
Sometimes we are.
00:16:16.820 --> 00:16:21.330
But at times, there are things that we have context of,
why we aren't making it a high priority,
00:16:21.330 --> 00:16:23.840
because we don't want
to go implement this
00:16:23.840 --> 00:16:26.200
and then end up having
to re-implement it again
00:16:26.200 --> 00:16:27.760
because it's changed so much.
00:16:28.520 --> 00:16:37.690
So ultimately, as you heard Jacob
actually say, help us help you.
00:16:38.930 --> 00:16:40.930
File bugs on us.
00:16:45.060 --> 00:16:48.550
IssuesorBugs.MicrosoftEdge.com,
please, fill bugs on us.
00:16:48.550 --> 00:16:51.510
We definitely want to make
the web platform better for you.
00:16:51.510 --> 00:16:56.140
But again, because it's not
just us, file bugs on Mozilla if you find them.
00:16:56.760 --> 00:16:59.080
File bugs on Web Kit
if you find them.
00:16:59.680 --> 00:17:01.870
File bugs on Chrome
if you find them.
00:17:01.870 --> 00:17:06.770
It's important to note, even if you don't know it's
our fault, we'll end up going and looking at the spec,
00:17:06.770 --> 00:17:08.330
and we'll work with
the other browser vendors.
00:17:08.330 --> 00:17:11.300
There's much more cooperation here
than I think people actually understand,
00:17:11.900 --> 00:17:14.030
and we truly want
to make everything better.
00:17:14.030 --> 00:17:16.470
So here's one slide,
please everybody take a picture,
00:17:16.470 --> 00:17:18.790
because I was forced to add one slide
with all of them on there.
00:17:18.790 --> 00:17:21.050
Take a picture of it.
Share it on Twitter.
00:17:21.050 --> 00:17:22.950
Please file bugs with everybody.
00:17:23.840 --> 00:17:26.850
And another thing, please go vote.
00:17:26.850 --> 00:17:28.030
Your votes do matter.
00:17:28.030 --> 00:17:30.790
It is very important to vote
for the things that you want,
00:17:30.790 --> 00:17:34.910
so that we can ensure to make
the web platform what you want it to be,
00:17:34.910 --> 00:17:36.940
and then when we say
it's in development, vote again.
00:17:38.530 --> 00:17:40.540
It is easy to yell at us on Twitter.
00:17:41.110 --> 00:17:43.110
It is easy to vote.
00:17:43.660 --> 00:17:49.060
A remarkable impacting thing is to use
progressive enhancement to use it on a production site.
00:17:49.770 --> 00:17:51.310
I cannot stress this enough.
00:17:52.190 --> 00:17:55.310
Please, go use the technologies you love.
00:17:55.310 --> 00:17:57.130
Use them in a progressive
enhancement manner,
00:17:57.130 --> 00:17:59.500
so that all of our users are still
getting a great experience,
00:17:59.500 --> 00:18:03.150
but the users and the browsers that support something
are getting a richer experience.
00:18:03.750 --> 00:18:05.080
We are watching telemetry.
00:18:05.080 --> 00:18:06.980
We're looking, that's why
we have the inter-app crawler,
00:18:06.980 --> 00:18:10.610
so we can go see what things
that we don't implement
00:18:10.610 --> 00:18:12.290
are being used on the web.
00:18:12.290 --> 00:18:14.360
Please go use them.
00:18:14.360 --> 00:18:15.120
Make noise.
00:18:15.120 --> 00:18:16.930
Hit us up on Twitter.
00:18:16.930 --> 00:18:19.780
I'm @gregwhitworth,
please let me know anything.
00:18:19.780 --> 00:18:21.030
I don't really care what it's about.
00:18:21.030 --> 00:18:24.490
I will help you make sure that
we get the inputs that we need.
00:18:25.130 --> 00:18:26.050
Blog and give talks.
00:18:26.050 --> 00:18:29.080
I'm not saying everybody needs
to become a developer evangelist,
00:18:29.080 --> 00:18:30.720
but if something bugs you,
00:18:30.720 --> 00:18:32.030
if you want the standards bodies
00:18:32.030 --> 00:18:34.520
to do something or a browser engine
to work on something,
00:18:34.520 --> 00:18:35.810
please make noise about it.
00:18:35.810 --> 00:18:39.390
We're all listening, I think
again to my previous self,
00:18:39.390 --> 00:18:41.930
way more than I think
we even realize.
00:18:41.930 --> 00:18:43.520
So please, make noise about it.
00:18:44.400 --> 00:18:45.890
You'll notice I haven't
covered one of them.
00:18:47.290 --> 00:18:48.750
I'm not ignorant.
00:18:48.750 --> 00:18:51.210
I know you're not naive.
00:18:51.210 --> 00:18:53.080
I work for Microsoft.
00:18:53.080 --> 00:18:55.160
And this is something
that we take into account.
00:18:56.290 --> 00:19:00.210
And I actually asked this very question
when I was interviewing at Microsoft,
00:19:00.210 --> 00:19:04.090
and I feel this is a great talk
to finally put this discussion to bed.
00:19:06.340 --> 00:19:07.830
Why did we even build Edge HTML?
00:19:09.000 --> 00:19:10.220
Why?
00:19:10.220 --> 00:19:12.580
Why do we work
on this browser engine?
00:19:13.470 --> 00:19:16.130
Because we strongly believe
that no one company
00:19:16.130 --> 00:19:18.060
or entity should control the web.
00:19:18.970 --> 00:19:21.720
We strongly believe that's why
we're involved in the standards bodies,
00:19:22.580 --> 00:19:23.700
and that's why
we do what we do.
00:19:23.700 --> 00:19:24.500
Well, what does that mean?
00:19:24.500 --> 00:19:25.890
To put it a little bit
of a different way,
00:19:26.740 --> 00:19:30.790
Jake Archibald of Google says
browser diversity is good for the web.
00:19:31.760 --> 00:19:33.820
And in my opinion,
even a little bit better,
00:19:33.820 --> 00:19:36.690
Peter Shaughnessy
of Samsung Internet
00:19:36.690 --> 00:19:39.750
says browser diversity
is what makes the web the web.
00:19:40.320 --> 00:19:42.760
And so I totally sympathize with you all.
00:19:42.760 --> 00:19:45.710
When you hit interrupt bugs
and it drives you crazy during the testing.
00:19:46.290 --> 00:19:49.770
But having browser diversity
is what makes the web the web.
00:19:50.810 --> 00:19:53.970
So how does Edge HTML improve the web?
00:19:53.970 --> 00:19:55.970
How do we make it better?
00:19:57.740 --> 00:19:59.330
Through responsible
resource utilization.
00:20:00.300 --> 00:20:06.710
We showed in 2016 that we have leading in-class battery
life support among browsers.
00:20:06.710 --> 00:20:12.660
When the service team goes and spends years
in R&D building beautiful hardware and software
00:20:13.440 --> 00:20:16.080
and the number one used application
on the operating system
00:20:16.080 --> 00:20:21.030
is not using those resources reliably,
I won't call out names, but some eat up all of the ram.
00:20:22.270 --> 00:20:25.930
We need to be utilizing
those resources responsibly.
00:20:25.930 --> 00:20:27.190
And guess what?
00:20:27.190 --> 00:20:31.960
Doing this puts pressure on
other competitors to do the same.
00:20:34.310 --> 00:20:35.280
Finally, enhance security.
00:20:35.280 --> 00:20:42.720
You heard from Nathan this morning that the vulnerable
exploits have gone down year over year.
00:20:42.720 --> 00:20:46.540
This is something that you cannot do
without control of the compiler,
00:20:46.540 --> 00:20:49.740
the operating system
and the web browser.
00:20:49.740 --> 00:20:51.210
This is something that has
been years in the making
00:20:51.210 --> 00:20:53.150
and something that we are
thrilled to be able to achieve.
00:20:53.690 --> 00:20:56.490
This is something that helps
out both our shared users
00:20:56.490 --> 00:20:58.940
to ensure that they are having
a safe time browsing the web.
00:20:59.440 --> 00:21:03.320
And finally, since everybody loves
to talk about features, innovation.
00:21:04.160 --> 00:21:06.040
Innovation
such as Windows 8.
00:21:07.450 --> 00:21:09.960
And no, I'm not referring
to the start screen.
00:21:11.370 --> 00:21:15.720
I'm referring to, at that time, PWAs are great
and I'm super excited about it.
00:21:16.810 --> 00:21:22.590
But making the Web platform a first-class citizen
in native applications is not new at Microsoft.
00:21:23.380 --> 00:21:25.150
In Windows 8 there was
a decision that was made.
00:21:26.160 --> 00:21:29.880
Stored application should be able to use
Edge HTML to render content.
00:21:30.610 --> 00:21:34.120
HTML, CSS and JavaScript
are first-class citizens on Windows.
00:21:35.180 --> 00:21:38.830
And as people began to move away
from the Windows Presentation Foundation
00:21:38.830 --> 00:21:41.700
they quickly realized they couldn't
do two dimensional layout.
00:21:43.130 --> 00:21:46.630
One dimensional layout, they could do
and they could hack together two dimensional layout,
00:21:46.630 --> 00:21:49.110
but there was a massive gap.
00:21:49.110 --> 00:21:51.300
Until we noticed that
and we said you know what?
00:21:51.300 --> 00:21:52.990
This is a problem
that we need to solve.
00:21:53.810 --> 00:21:57.360
And we solved it in IE10
and then brought it to the standards bodies
00:21:57.360 --> 00:22:01.620
and the web community, and everybody worked together
to produce what is now CSS grid.
00:22:02.180 --> 00:22:05.450
We got together and we produced
a short little synopsis of this history,
00:22:05.450 --> 00:22:07.230
and we're excited to share
that with you today.
00:22:12.810 --> 00:22:17.160
- The web has always been
traditionally very document-centric.
00:22:17.720 --> 00:22:20.720
- So people have always been
asking for better layouts.
00:22:20.720 --> 00:22:23.530
- Most of the conversations
ended up the same way,
00:22:23.530 --> 00:22:28.130
they are complaining about all
the dirty hacks they had to do.
00:22:28.130 --> 00:22:30.810
- The hacks that we were
employing weren't as powerful
00:22:30.810 --> 00:22:34.570
as the old methods of just put it all
on a big old table element.
00:22:34.570 --> 00:22:36.370
That was popular for a reason.
00:22:36.370 --> 00:22:39.400
It let you do powerful
complex layouts.
00:22:39.400 --> 00:22:42.950
It was just the worst thing to maintain
and the worst thing for semantics.
00:22:42.950 --> 00:22:45.810
- I wanted to see some of the
technologies that I had worked
00:22:45.810 --> 00:22:48.770
with previously from the Windows
Presentation Foundation,
00:22:48.770 --> 00:22:51.460
stacked panel, wrap panel and grid layout.
00:22:51.460 --> 00:22:54.400
The flex box backfilled that
stacked panel and wrap panel gap,
00:22:54.400 --> 00:22:57.100
so we were left with how do
we fill the gap for grid?
00:22:57.100 --> 00:23:00.110
We're going to need to make a new spec
and we're going to need to build it.
00:23:00.110 --> 00:23:01.320
And so that's what we did.
00:23:01.320 --> 00:23:06.890
- And we wanted grid to be more
than what the developer world thought they needed.
00:23:06.890 --> 00:23:09.980
What they thought they needed was
the things that they could do already.
00:23:09.980 --> 00:23:13.970
- And so we've been working on it since then,
for five years or so actively now.
00:23:13.970 --> 00:23:15.580
- To make CSS what it was meant to be,
00:23:15.580 --> 00:23:20.720
which is to be a flexible, robust, powerful
and understandable system for doing layout.
00:23:20.720 --> 00:23:26.090
- And it actually provides web authors
with the capability of doing web application
00:23:26.090 --> 00:23:28.530
layout in a sane,
practical manner,
00:23:28.530 --> 00:23:30.500
without extra markup like tables.
00:23:30.500 --> 00:23:32.080
Without hacks like floats.
00:23:32.080 --> 00:23:36.070
Without all the necessary JavaScript
overhead that you need with absolute position.
00:23:36.670 --> 00:23:41.080
- It allows you to do style development
in a totally different way.
00:23:41.640 --> 00:23:46.250
You create the templates, you create
your grid first, you pull the content into that.
00:23:46.250 --> 00:23:49.160
- It lets us do amazing page layouts
00:23:49.160 --> 00:23:53.900
that were previously only really possible
to do with table-based stuff.
00:23:53.900 --> 00:23:58.560
- After reading the spec
for the first time, I thought oh wow,
00:23:58.560 --> 00:24:01.900
this really has the potential
to change everything.
00:24:01.900 --> 00:24:04.390
- As soon as I saw that, I was like,
this is something that we really need,
00:24:04.390 --> 00:24:06.490
is this ability to populate things out.
00:24:06.490 --> 00:24:10.130
So I started digging into it and building
some kind of examples to show the people,
00:24:10.130 --> 00:24:13.210
and I was absolutely determined
that grid layout wasn't going to disappear.
00:24:13.210 --> 00:24:17.270
It was going to be something that other people
found out about and got excited about.
00:24:17.270 --> 00:24:20.580
- The thing that changed it
from a dream to reality here
00:24:20.580 --> 00:24:23.080
was getting an implementer
deeply interested in it,
00:24:23.080 --> 00:24:27.810
which in this case was Microsoft, first leading
with its version of the grid spec.
00:24:27.810 --> 00:24:31.380
- It takes both the users
who are demanding the feature,
00:24:31.380 --> 00:24:37.330
as well as the browser developers who are dedicating
their resources to go and develop this.
00:24:37.930 --> 00:24:40.150
- The developer feedback
has been remarkable,
00:24:40.150 --> 00:24:44.100
with all the major browser vendors
implementing it and shipping it in 2017,
00:24:44.100 --> 00:24:46.070
it's not just something
we're talking about.
00:24:46.070 --> 00:24:47.410
They can go use it.
00:24:47.410 --> 00:24:48.900
- We should have maybe pushed more.
00:24:48.900 --> 00:24:52.720
I think the grid is something that is
probably from very early on,
00:24:52.720 --> 00:24:54.460
maybe from the start of CSS already.
00:25:07.920 --> 00:25:09.090
- Awesome, that's it for me.
00:25:09.090 --> 00:25:13.790
Thank you.
- Thanks, Greg.
00:25:15.000 --> 00:25:16.380
Great job.
00:25:16.380 --> 00:25:17.410
So it's time for another break.
00:25:17.410 --> 00:25:19.080
We've got about 15 minutes.
00:25:19.080 --> 00:25:21.890
If you guys want to go grab coffee,
stretch your legs, go to the bathroom,
00:25:21.890 --> 00:25:23.950
I'll give an announcement
a couple minutes beforehand.
00:25:24.770 --> 00:25:27.550
Feel free to ask our people upstairs
if you have any questions,
00:25:27.550 --> 00:25:30.570
or Greg's over here if you want to bother him
about what he just talked about.
00:25:31.110 --> 00:25:31.580
See you guys soon.