JAKE: We have taken, so far-- doing maths in my head. I really struggled. SURMA: 12. JAKE: Thank you. Do you know what? The power of editing-- no one will ever know. We have taken eight features-- [LAUGHTER] SURMA: We have taken minus 4. [MUSIC PLAYING] JAKE: This is it, then. SURMA: Oh, it's happening. JAKE: The final episode
of our Christmas special, finding the best feature. And we haven't really agreed. SURMA: No, we haven't
agreed last year. We're not agreeing this year
on what to call this, really. JAKE: So far, we have
taken 12 features. SURMA: That's correct. JAKE: And we have whittled them
down to, well, two, so far. SURMA: Yes. JAKE: And that is
sharing on the web-- SURMA: Yeah. JAKE: And background fetch. SURMA: Yeah. So background fetch will
have to endure another match before it gets to face sharing. Or maybe not. Who knows? We will see. JAKE: We have four
features left. We've been picking
these at random, which is why we're so
scrappy at remembering them. But, yeah. It's time to do the last four. SURMA: Yeah. You start picking. JAKE: Oh, it's me? SURMA: Because symmetry. Yes. JAKE: Excellent. I'm going to pick this one. And I have-- prefers styles. SURMA: Prefers styles. Oh, no. It's a Paul Lewis. It's Jake. JAKE: Did you put
the wrong face on it? SURMA: Yeah, I did. JAKE: Yeah. It shows that we had
the software ready, just in case he walks in and
wants to do a few shows. SURMA: You never know with him. JAKE: You never know. SURMA: Some days he just appears
and just takes over the show. JAKE: He takes this
thing up from-- SURMA: He just can't let go. JAKE: Oh, yeah. You want me to talk
about this, right? OK. SURMA: You don't have to, but-- JAKE: Again, this is a
little bit of a two for one. SURMA: [SIGHS] JAKE: So-- I know. I know. This is a CSS feature. It allows you to hook into
things that the user prefers, like a preference that they
have expressed, usually at the operating system level. That's a good description. Don't laugh at me. That's what it is. They've said, I prefer,
like, everything to be dark. I'm sad about life. So can you do that? SURMA: And yes, we can. JAKE: Yes we can. And now you can do it
on the web as well. So this is how you'd have it. You'd have like
your media query-- prefers color scheme
dark or light. And you provide your
exceptions to your styles. Sometimes it would be
really-- when we did this with the Chrome
Dev Summit website, where we were just overwriting
a series of custom properties. SURMA: Yes. It worked great. JAKE: And it worked really good. SURMA: We did that
plus, I think, two or three minor adjustments
for contrast on some elements. But other than that, that
pattern worked great for us. JAKE: It worked
really, really well. You can also access it with
JavaScript using match media, as you can with all
the media queries. The other part of it is
prefers reduced motion. SURMA: Yeah. JAKE: Which, again, is a feature
that operating systems are exposing. SURMA: Does it bug you
that they didn't just make it a true-false media query? JAKE: That is a good point. But I think I know why. SURMA: OK. JAKE: So there's something that
Adam Argyle, our colleague who does a lot of the
CSS stuff, explained to me-- is the intent of this
is not to cancel all animation. SURMA: Right. JAKE: So you might-- it's more to, if you had like
a constant animation going-- SURMA: True. JAKE: Like it's sort of a
wavey thing on the page. SURMA: But that's why
I said, reduced motion. Like what is the
difference between saying, prefers reduced motion-- reduce-- to prefers
reduced motion. JAKE: Oh, that's true, isn't it? SURMA: I find it oddly
hard to memorize this. Like to actually remember
what the correct-- JAKE: That-- yeah. SURMA: Because the other one
is prefers color scheme-- light or dark. That makes sense. JAKE: Yes. SURMA: It's an open
ended question. But prefers reduced motion
is a yes-no question. And we reply with reduced. JAKE: It should
be prefers motion. SURMA: Yeah. JAKE: And then you
can add in none-- SURMA: Yeah. JAKE: --as a third value. To say, just, no. No. SURMA: Off roller coaster. JAKE: Or-- yeah. Oh, just go. SURMA: Go nuts. JAKE: Yeah. Just go for it. Just, like, make
everything move. Make the whole page spin around. Just do, in CSS, star,
animate, rotate, and see you've just got [WHOOSHING SOUNDS]. SURMA: I want to do that. I want to see what
that'd look like. JAKE: Who wouldn't want that? Because maybe you're stuck
in a washing machine, and your laptop is outside. SURMA: And you
counteract the rotation. JAKE: Exactly. So yes why wouldn't
you want to do that? You've really spoiled
this feature for me by pointing this out. SURMA: Takes two to tangent. JAKE: It's wrong. It's the wrong shape. Oh. I mean, it doesn't matter now. SURMA: You don't want
it to win anymore. JAKE: No, I hate this. This is disgusting. I mean, OK. Let's try and ignore the naming. This is an important feature for
people who maybe get nauseous if certain kinds of animation. And they've told their
operating system that. Your website can now
react to it using this slightly badly named API. So there you go. SURMA: Slightly. JAKE: Fine. There. That is the feature. SURMA: All right. JAKE: Yeah. SURMA: Up against
up against prefers reduced motion is
native lazy loading. JAKE: Native lazy loading. Check that out. OK. Yeah. SURMA: All right. Let me tell you. JAKE: What is it? SURMA: It is-- JAKE: Why is it? SURMA: Big fan of this feature. Basically, it allows you to just
put a new attribute on images. And the browser will
automatically not load them until you
scroll them into view. JAKE: Right. Yes. OK. SURMA: And here's a fun fact. It also works on iframes. JAKE: It does also
work on iframes. SURMA: Does it, Jake? JAKE: Right. OK. Story time. We talked about this on
stage at Chrome Dev Summit. SURMA: I did, in fact. JAKE: And I-- and Surma
said it works on iframes, and I ran on stage to
tell you you were wrong. But it was I who was wrong,
because I was thinking of the aspect ratio hack
that we talked about in earlier episode. SURMA: Which does
not work on iframes. JAKE: Does not work on iframes. This-- SURMA: So, yeah. Both iframes-- JAKE: --does work on iframes. SURMA: You are forgiven. JAKE: Thank you. Thank you. SURMA: Although I will
not let you forget it. JAKE: Thank you. SURMA: Yeah. So both images and iframes you
can now just put in your page and don't have to worry
about the initial payload, because the browser
can load them lazily. JAKE: Right. SURMA: And we know that
you can do something with IntersectionObserver
or scroll events-- like it is a good
amount of code. But it's mostly just a
super convenient feature. JAKE: Yes. It's polyfillable. SURMA: It is. Absolutely. As I said, the people
have written this with IntersectionObserver or-- JAKE: It's only-- so I wrote
it for the Chrome Dev Summit website. And it's like four lines
in IntersectionObserver. But it does depend
on JavaScript. SURMA: Yes. And you can't-- how do you
do progressive enhancement? How do you make
sure the image loads if JavaScript is
disabled or broken? JAKE: Yes. SURMA: But still not loaded
if you have JavaScript. And that's actually
quite challenging. JAKE: It is really challenging. So-- SURMA: What do we think? This is actually interesting. JAKE: Yes. SURMA: Both are fairly
high level, fairly simple. JAKE: Yes. SURMA: I think native lazy
loading does much more good for the web health of all. JAKE: So here's my summary of
the two, of the pros and cons. Prefer styles--
there's no polyfill, other than giving the
user a button to press. SURMA: Which was something
you want to do anyway, because just because the user
has dark mode enabled, maybe they don't actually want dark
mode on this site right now. JAKE: Possible, yeah. I think that is especially
true, like if you're in a darker room than usual. SURMA: Yeah. JAKE: I don't-- SURMA: You don't want to switch
your operators into dark mode just because you're
in a darker room. JAKE: Yes. Especially if you're
just reading one website that's a bit bright,
and it has an option. SURMA: Yeah. JAKE: OK. I'll take that. That's fair. Whereas with native
lazy loading, it is extremely polyfill. SURMA: That's true. JAKE: It's so easy. But that might still be a bar
that stops developers doing it. And especially with the
concerns around JavaScript, where it does get orders of
magnitude more complicated. SURMA: Yeah. JAKE: And native lazy loading
can save people a lot of data. And just having an
attribute that does it-- SURMA: And it's
resilient to Java-- like, it doesn't use JavaScript. Like, people who surf
without JavaScript, or who have disabled--
or when it crashes-- JAKE: Yes. SURMA: It will stay functional. JAKE: This is actually--
native lazy loading is a really good example
of the extensible web manifesto in progress. SURMA: Yes. JAKE: Because we did all
the low level stuff, which is IntersectionObserver-- it's is just that, isn't it? It's just IntersectionObserver. But then we have gone and
done the higher level thing. Here's-- you know, we've
seen how people use-- SURMA: Does the spec
actually rely on the-- does the native
lazy loading spec rely on the
IntersectionObserver spec. JAKE: That's a good question. I, actually, before
we came to film this-- there's discussion ongoing
around the spec for this. And part of the thing that
is happening right now is a discussion of how the
intersection is calculated. And I don't know if it is
referring directly to-- what might, actually, is
more likely to happen-- I think it would be less-- if this HTML feature depends
on IntersectionObserver, what they're probably
more likely to do is take those intersection
of things into the HTML spec and make the
IntersectionObserver spec reference to HTML. SURMA: That would make sense. And would probably
be as desirable. JAKE: Web standards. There you go. SURMA: I'll-- JAKE: It's native lazy
loading, isn't it? SURMA: Yeah. That's where I
would put my money. So-- JAKE: And dark mode
is very trendy. But, as you say, you
can do it with a button. SURMA: Yeah. JAKE: Yeah. Native lazy loading is,
yeah, a lovely solution to that problem. SURMA: Well, that means
natively lay loathing-- native lazy loading advances. JAKE: Matey lady loading-- SURMA: And now we
have to find out who native lazy loading
faces off against. JAKE: Right. It's that one. I've made my decision. (IN UNISON) Form elements. There's a more
specific thing there, because we've had
form elements for-- SURMA: We did have form
elements on our platform for a couple of while. JAKE: That was a good one? SURMA: Yeah. That was good. JAKE: Thank you. And I will tell you-- again, a couple of features
sort of rolled into one. SURMA: Did I have one double? I had one double feature. And it's in the finals. JAKE: Well, OK. So-- [INTERPOSING VOICES] SURMA: Oh look, there's
the form element. Found it. JAKE: There it is. What do you think? [LAUGHTER] When you do this here,
like this label-- well, there are a few behaviors
that are attached to this input here. If you click name, because
it's part of the label, it will now focus on the input. SURMA: Yeah. JAKE: Also-- it doesn't
have to be inside the label. It can have reference and ID. SURMA: For. JAKE: Yes. For an ID. But also, when you hit
submit here, the value "foo", or whatever the user
has typed in there, will be sent to the server
post with this action. SURMA: Yes. JAKE: This thing here,
this fancy custom input, does not have those features. SURMA: No, because it's custom. JAKE: Except it does now! SURMA: Oh. JAKE: Aha ha. Yeah. So there's a couple of ways
you can do parts of this. In terms of the
submission thing, this is an event
you can hook into. So the add event-- SURMA: Oh, OK. JAKE: --is formdata. What you get is an event object. It has a form data property. And that will contain what
the browser's collected about the form so far. And you can modify it. SURMA: Oh, I see-- you can
also inspect the other data. You can append your own. But you can also mangle
whatever is already there. JAKE: Exactly. So it's like a
post-processing step, which includes adding stuff. So that could be a simple way
to have your custom elements or whatever take part
in the form properly. SURMA: Yeah. JAKE: Or-- SURMA: Dun dun dun-- custom elements. JAKE: This is a custom
element feature. Now, the key here is to say,
form associated equals true. SURMA: That's magic, isn't it? JAKE: That is magic,
in the same way that the observed attributes-- SURMA: Right. JAKE: One is magic. And so, with this
being true, it's saying the browser now knows
this takes part in the form. And then you can do
this attach internals thing, which is a like a
way of getting a secret API. SURMA: So secret. JAKE: So secret. Which is a little bit how, when
you attach a shadow route-- SURMA: Right. JAKE: It's sort of a
little bit like that. But it's not an element. It just has a load of
APIs as part of it. So you can see
these things here. So getting the form will
return this internals form. SURMA: Form. Yeah. JAKE: Yeah. And if you've got an input
element or something, dot form will always
return the form. Just kind of good
practice to do that. We've got some method. And what that will do is set
the value to yes, please. And that's telling the browser-- this element, which is
taking part in a form, now has this value. So you will be internally
listening to clicks and stuff in the shadow route and
whatever, and updating what the form value is. And you can tell if
it's now valid or not. SURMA: Yeah. So all practices apply
in how to do an input or whatever-- custom elements. But now we can just
participate in the form part. JAKE: And by setting the
validity, when the user hit submit, if one or more of
the elements are not valid, it won't submit. And it'll do that thing where
it shows the little pointer saying, this is the wrong one. Do something about this. And that is the feature. SURMA: Oh. JAKE: So-- SURMA: I have one left. JAKE: One left. SURMA: You know what one it is? JAKE: No I can't-- SURMA: I can't remember either. JAKE: I can't
remember what it is. It must be a good one. SURMA: From entries. JAKE: From entries. SURMA: I'm going to
try to do the Jake. JAKE: Go on, then. SURMA: [GROANS] JAKE: That was really
good, actually. SURMA: Close. JAKE: That was much better
than my stupid attempt. Go on, then. Talk us through from entries. SURMA: From entries is-- I actually really like it. So there is
Object.entries, which will turn an object into an
array of key value pairs. JAKE: Yes. SURMA: So now you have a
basic list representation of what this object is. JAKE: This is old. But this is so
useful for iteration. SURMA: You can iterate
over the-- you can just write four loops
to get key value, and get both at the same time. You can actually map
over the entire object and say, oh, I want the
keys to be uppercase. Or I want the values to be +1-- or both at the same time. However, once you do
that, how do you then reassemble this list
representation back to an object? And that is pretty much
what from entries is. It's the inverse
of Object.entries. JAKE: Gotcha. SURMA: It takes a list
representation of key value pairs and just gives
you the object. JAKE: And I think-- well,
exactly what you said there. That's the cases where
I've really needed this or wanted this. And it's when I've done-- I want to map an object. SURMA: Yeah. JAKE: Like mapping
array is really easy. But I want to take this object. I want to map over the keys and
the values and output something different. And this just lets you do it. SURMA: Yeah. That's it. That's it. JAKE: All right. SURMA: That's it. JAKE: All right. Let's sort of think
about this then. Right. So we've got form-- SURMA: From entries is-- JAKE: From and form. SURMA: From entries is a
polyfill, which you can write with reduce as a one liner. JAKE: Oh, that's a good point. But-- yeah. SURMA: It's not
a new capability. It's super nice that we have it. It makes it much more-- like, code is just
much more expressive. But you can just define
your own from entries, and it's a one
liner with reduce. JAKE: It's-- oh. If you use reduce. Yeah. Yeah. SURMA: I'm not sure if there's
performance implications of mutating the object over
and over, but in the end-- JAKE: No, it should be fine. SURMA: So I would
say form entries. JAKE: Yeah, because you
would clone the object and then just mutate it. Yeah. I think, based on that-- it's not a new capability. It's nice it's there. It's good that it's there. But the form element-- SURMA: [MAKES BUZZER SOUND] JAKE: --is a new capability. And you could say part of that
is just like a custom element feature. A lot of people are like, I'm
not that bothered about custom elements. I was thinking, even
if you're using React, being able to define your
own custom form elements, this makes it much
more attractive to use custom elements
for it, because you get-- SURMA: I think so as well-- JAKE: It just ties it into how
the browser already behaves. SURMA: Yeah. Agreed. JAKE: All right. SURMA: So form
elements advances. JAKE: Yes, it does. SURMA: And goes against
native lazy loading. And I would say this is
tough, because I'm like, this is something. The native lazy
loading is something. I encounter on
every site I built. JAKE: Yes. SURMA: And I'm often
too lazy to do it right. I will omit progressive
enhancements or just do the
IntersectionObserver thing, and basically ignore people
who don't run JavaScript or where JavaScript breaks. Form elements is
not polyfillable, but I don't encounter
it that often. JAKE: And what I
would say is I don't know how much I care about
people who disable JavaScript, because, like you say, how do
I feel about people who disable SSL in their browser, you know? It's kind of like,
but why do that? It is part of the web. SURMA: Part of platform, yeah. JAKE: But the thing I
do care much more about is the people who
haven't deliberately disabled JavaScript,
but the people who are maybe running a browser
that is older than expected and maybe didn't test properly. [INTERPOSING VOICES] SURMA: Yeah,
JavaScript file just doesn't run, because you
have one const in there, and the browser
doesn't do const. JAKE: Or a server
hiccup that just returns an empty file or a 404. And this does happen. SURMA: Wrong MIME type. JAKE: Yeah, the MIME type goes
wrong, something like that. And that is one
of the reasons I'm super keen on
progressive enhancement, and always have been. It's never been about
non-JavaScript people for me. It's been about
performance and resilience. SURMA: Yeah. JAKE: So I do like it for that. And I like that it
lowers the bar to-- SURMA: Doing the right thing. JAKE: Yeah SURMA: Yeah. JAKE: Absolutely. The formal elements thing
is a new capability. And it has that-- it's not entirely
progressive enhancement, because it still
depends on JavaScript. SURMA: Yeah JAKE: But it depends
on less JavaScript to do the same thing
that form should do. And it will get you some of
the accessibility for free. Because if you're using
the native validation stuff and the native value
stuff, I'm assuming the data is there that can be exposed
to accessibility APIs. SURMA: Yeah. [INAUDIBLE] you can't-- there
is form data, as an API, to assemble form data and turn
it into a multi-part MindBody or whatever you need. JAKE: Yes. SURMA: But there is no API
to do a post navigation. JAKE: Oh, that's true. I mean, you can-- yeah. SURMA: So there's actually no-- because I thought, like, oh,
you could just use a form. You can cancel the submit and
then assemble your own form data. But there is no way to
send that form data-- JAKE: Oh, that's interesting. SURMA: As a post navigation. JAKE: Huh. That is really
interesting, because I hadn't thought about that. Because in my head
I was thinking, well, you can just assemble
a form in the background and call submit on it. That works. But that cannot include files. That cannot include--
whereas, with this-- that's interesting. That's a really niche
use case of this. But it is something that I've
heard people ask for before. It's like want to do a
navigation with a file. SURMA: We encountered it with-- JAKE: [INAUDIBLE], didn't we? SURMA: With the share targets. JAKE: Yes. SURMA: Where we
wanted to test it. And we had to-- you wrote
a form so you can test it. JAKE: That is true. So if you wanted to do your
own sort of rudimentary sharing from one site to another
using normal HTTP methods, we saw with sharing before
that you can do this with the native share platform. But you can do it
between websites using-- SURMA: So just to be clear,
you can do a fetch request. But that won't
navigate your page. JAKE: Yes. And whereas if
you're doing a share, you actually kind of want to-- SURMA: You navigate with a post
request, which is possible. JAKE: With data. Interesting. I hadn't thought about that. It's going to sort of
come down to how much is this going to
benefit the web? I guess-- SURMA: That's what I
was going to bring up. So I think native lazy loading
still takes this one home, because it is pretty much
literally every website. JAKE: Every website has images. SURMA: And you want
to lazy load them. It's the right thing to do. JAKE: They are, I believe,
the heaviest thing. SURMA: Yeah, 50% of a
page weight on average-- at least on HP Archive-- is images. JAKE: Yes. And so this will mean
you download less of it, especially if you're-- because if you're
just going to a page-- SURMA: Yeah. JAKE: Just to click
one of the things at the top of the page,
which I do all the time. SURMA: Open a blog post. Oh, I'm not
interested after all. Leave. JAKE: Yeah. Or even like you go to
a shopping website-- SURMA: Yeah. JAKE: --to click
the button there. But you've just downloaded
all of the stuff there. I mean, the browser
can cancel it. But by that time you've
already downloaded a lot-- big problem if you're
on metered connection. SURMA: So are we in agreement? JAKE: Yeah. Yeah. SURMA: All right. JAKE: Have it. Go on, then. All right. SURMA: So this is interesting. JAKE: We've got to
find the next finalist. SURMA: So in the
semifinal we have-- JAKE: That was a
janky animation. We need to get-- look,
this is such an old tablet that we've been doing
this stuff with. And it's only because we tried
to do it with a Pixelbook, but there was some flickering
thing with the camera. SURMA: Oh, I forgot. Hooked up? JAKE: Yeah. SURMA: Well, I think
we should get-- JAKE: My life. SURMA: I think we should get
the new, like $50,000 Mac Pro. JAKE: What, and just
balance a monitor here? SURMA: Yeah. JAKE: OK. SURMA: That should run
the animation smoothly. JAKE: It's not touch
screen though, is it? That's the problem. For $52,000, you still
don't get touch screen. SURMA: Yeah, that's
actually true, isn't it? JAKE: Yeah. SURMA: Come on. Just throw that in. JAKE: Yeah. Your machine can roll downhill. SURMA: Yeah. For $400. JAKE: No touch screen. Right. What are we talking about? SURMA: Tangent. JAKE: We've got native lazy
loading versus background fetch on our old janky
tablet that's so old, it doesn't even receive
Android updates anymore. SURMA: Nice. JAKE: I found that this morning. OK. SURMA: Oh, this is rough. I find this really hard. JAKE: So we've got a very
simple feature like this, as in it's simple to use. SURMA: And, as we said, useful
for pretty much every website that is in existence. JAKE: One of the
things I would say about this is that
an interesting part of this feature, the
native lazy loading thing, is the browser is actually
free to apply it automatically. SURMA: Is it? JAKE: Yes. The default value
for it is auto. And I believe-- SURMA: But don't many
sites rely on images being loaded off screen? JAKE: This is a fix
I made to the spec. Yes. Because I was saying,
I think that there are cases where people use
it for preloading images to go into a canvas--
something, something, something, something, something. So the rule is-- I think we came up with--
it must immediately load if it's detached
from the document, or if it's created
by JavaScript. SURMA: Oh, OK. Interesting. JAKE: So if you've got
a lot of image tags on the outer scroll
view that you're relying on lazy loading-- relying on listening for a load
event, it might never fire. SURMA: Interesting. JAKE: So I think we're
actively monitoring that. SURMA: Could also be a
trade like if there's an on load listener and no
[INAUDIBLE] loading attribute. JAKE: Oh, I see. Yeah. SURMA: It could load it. JAKE: Yeah. SURMA: Either way. OK. That's very interesting. Because that's
actually-- I wanted to bring it up originally but
didn't, because it can't work. But if that is the case,
that would be great if this opens a path for
just reducing the page weight of many pages, just by
making the user agent smarter. JAKE: Sorry, I was bouncing
that around in my head. You can't do the
load event detection, because you might have a load
event on the document element. And that would-- the image
wouldn't-- bubbles or captures, at least. There is ways of
listening to that. SURMA: Stupid. JAKE: Anyway, sorry. What were you're
saying, while I was just thinking about the other thing? SURMA: No, just like if
there is an actual path that allows us to reduce the
page weight by making these agents smarter. That's a big plus. JAKE: Whereas this feature
makes more downloading happen. Oh, it's an easy decision-- the one that saves data
rather than uses it. No. So, yeah, we're talking
about a new capability for a set of websites that are
doing uploads and downloads. SURMA: Yes, which
is a limited set. I don't want to
put a number on it. But it's definitely--
have I written a website where I would have used it? I don't think I have. I'm not saying that
nobody has, but the things that we have written
here, we wouldn't have used background
fetch, while we would have used image lazy loading. JAKE: Oh, yeah. This is a really tough one. SURMA: Yeah, it is. JAKE: You're right. SURMA: I sort of
convinced myself. JAKE: I don't need
background fetch on my blog, unless I do the
thing we talked about earlier of, like, download
all my articles or whatever. And again, yeah. With small enough data or
a fast enough connection, background fetch matters
less, definitely. SURMA: Yeah. You also do the right
thing, because you don't know how fast the
connection is for your user. JAKE: Things like uploading
videos to YouTube or photos to Flickr-- SURMA: That's amazing
that it works now. JAKE: Yeah. But everyone has images. SURMA: Yeah. JAKE: It feels like, the
second year in a row, we are converging on
high level features. SURMA: As a reminder, I think
last year it was scroll snaps. JAKE: It was scroll snaps. SURMA: Scroll snaps. JAKE: Was our winner. Yeah. SURMA: Yeah. JAKE: I don't know why I'm
getting so serious about this. I'm getting really worked
up, like all the rest are going to be deleted. SURMA: Everyone else is fired. JAKE: Especially because
this is the one I-- I worked on this one. Go on, then. Yeah. SURMA: Dun, dun, dun. And that means, for the final--
the final, final, final. JAKE: All right. SURMA: It is Surma versus Surma. JAKE: After all your complaining
in the first episode that it was just me winning,
the final has come down to you versus you. OK. And you killed my
feature in the process. SURMA: I did. And I am not sorry. JAKE: Right. OK. Come on. I'm going to try and
forget all about that. It's odd, because some
of the arguments you were making before apply again. Because sharing is very
much a sort of PWA feature. The use cases are niche-er. SURMA: Navigator.share-- I
guess that part I can't use, because that's not the new part. The new part is now
images in navigator.share. JAKE: When did we lose
the aspect ratio thing? I feel like I use that more
than native lazy loading. SURMA: Aspect ratio
lost against sharing. JAKE: This is rubbish. This is just rubbish. What have we done? SURMA: So sharing contains
being able to share images to the system from the web app. JAKE: And we should
say is specifically-- the sharing out is-- SURMA: That's what I mean. Because just being able to
tap into the sharing part is not new. Just being able to share
files out is new in 2019. So while sharing itself
is cool, sharing images is a more niche use
case, because it doesn't happen as often. Often you say like,
oh, here's my blog. Tweet it out, kind of thing. JAKE: So the big story here is
really the sharing from native to web. SURMA: Yes. JAKE: Which is a
PWA only feature. But it's a big deal. SURMA: It is. But also, again, less customers. JAKE: Yeah. Fewer than background
fetch, I'd say. That more things deal
with larger downloads. SURMA: Probably,
yeah, I think if we had sharing versus
background fetch, arguably background
fetch would have won. Maybe. But that match up didn't happen. So no time. JAKE: I think it's-- SURMA: It is. JAKE: I think it's
native lazy loading. SURMA: I think I agree. We have found the
best feature of 2019. JAKE: According to us. SURMA: Which is the
only way that matters. JAKE: It is native lazy loading. When we put this
to an audience-- SURMA: We're going to--
oh, it's going to be-- JAKE: Which is a video we
will release at some point. SURMA: At some point. JAKE: At some point. January, probably. SURMA: When the Christmas
hats don't make sense anymore. JAKE: Yeah. Well, no, I mean at CDS. We'll release the CDS version,
where we talk to the audience, where we were not
wearing Christmas stuff. It was background fetch. SURMA: Did we have
the same match up? No, just the overall winner
was background fetch. JAKE: No, because we've
done at random each time. SURMA: Yeah. JAKE: And I don't
know how much that-- SURMA: It could have
been, by coincidence, we had the same match up. JAKE: But I still think
that this was a lot of work. Like the spec for this
is actually really big. SURMA: Yes. JAKE: It was a lot of effort. SURMA: This is the first
time that it's an HTML that we're tapping into layout. JAKE: Yeah. But it was a really good
cross browser effort as well. I think it was-- SURMA: I think everybody
agreed that this is a problem that needs solving. JAKE: Yes. Absolutely. SURMA: Or an easier
way to solve it. JAKE: And there's
a lot to be said for lowering the bar for
doing the right thing. SURMA: Yeah. JAKE: And I think
that is something that we don't do enough
in web standards. Especially with the extensible
web model, a lot of times we throw out the tools. We go, off you go. And we still see many, many
websites not using those tools, because they're complicated. SURMA: They are. JAKE: Because they
can do lots of stuff. This is a good example
of lowering that bar. SURMA: And, together with
the aspect ratio proposal-- JAKE: Yes. SURMA: Boom. JAKE: Can we bring that
in and can we roll it into that as an extra feature? SURMA: No. JAKE: I really liked
the aspect ratio thing. OK. OK. Native lazy loading--
there we go. SURMA: We found our
feature for 2019. JAKE: And we will see you in-- 2020? SURMA: That's the next--
yes, that's the next number. 2020. See you there. Yes? Hello? JAKE: Are you on the telephone? Surma speaking,
how may I help you? We'd like to film
an episode of 203. Is that OK? Is it convenient for
you right now, sir? Shall I call back later? SURMA: (IN A HIGH-PITCHED
VOICE) Surma, get off the phone, I want to use the internet.
