Best web features of 2018: Part 3/4 – HTTP203
Articles,  Blog

Best web features of 2018: Part 3/4 – HTTP203

SURMA: Maybe we should
always speak fast. It just sounds like check
marks are appearing. [MUSIC PLAYING] Welcome back to the 203 2018
Web Development Feature World Championship. JAKE: Contest 2018. Yes. Yeah. Well, we’ve been looking
at web features that have landed in Chrome
in 2018, because I went on to all of the
New in Chrome posts and ripped them out. SURMA: Then put them in, right? JAKE: Yes, thank you, Pete. Put them into a chart here. And we whittled 16 of them
down to one, Scroll Snap. SURMA: That’s the
first finalist. JAKE: Yeah. That was a spoiler
if you haven’t watched the other videos. So there’s no point
watching them now. SURMA: It sucks to be you. JAKE: Yeah. Well, it sucks to be us,
because we don’t get the views. SURMA: It’s fair enough. All the way back to the bottom. JAKE: All the way
back to the bottom. We’re going to look
at some more features. And the first one I
want to talk about is WebAuth PublicKeyCredential. SURMA: Yes. JAKE: Yes, it is. This is part of the WebAuth API. SURMA: OK. JAKE: The Credential Management
stuff, which is– maybe I have not really looked
at, and I struggled to find like an example of this. I found a demo. I struggled to get
the code out of it, which is really bad of me. But basically, I can describe
what the feature’s going to do. SURMA: ISUVPAA. JAKE: What’s a “zoof”? SURMA: ISUVPAA. JAKE: I have no
idea what that is. Well, I’m going to press it. SURMA: User verifying platform
authenticator is not available. JAKE: That’s what even
what that– oh, OK. So the user verifying platform– SURMA: Authenticator. JAKE: Oh, who knows? That was exciting,
though, wasn’t it? It’s a bit of a– SURMA: Is this like
the nubby things maybe? Integrated. JAKE: No, this is
the nubby things. SURMA: Oh. JAKE: It’s now asking me
to insert a security key. And it can be a Bluetooth
one or a USB one. SURMA: Do you have one? JAKE: No. But I tried it earlier, and it
will give you the key details, like the private files. Not the private files. Don’t say private files. SURMA: You don’t see
the private parts. Well, that’s good. JAKE: It gives
you enough details so you can authenticate
that user later on. SURMA: OK. So basically I can skip– I could allow users
to skip all kinds of username/password
thingamajigs and just be like– JAKE: Yes. SURMA: Put in your nubby. JAKE: Put in your nubby. Is that the name
for those things? Is that a brand name? SURMA: I don’t know. JAKE: I don’t know. It sounds horrendous. But yes, so you– and I
used this with GitHub, being able to use it– SURMA: Oh, that’s so convenient. Yeah, I love that. JAKE: The two-factor
authentication. SURMA: Maybe we don’t use that. JAKE: I don’t know. SURMA: Because I
think for now it was pretty much Chrome only
that had native support for those things. JAKE: Yes. That is true. So yes, that is Public Auth,
Public Web Key Credential thing. SURMA: Going up against the
Web PublicKeyCredential thing is ToggleAttribute. Now, this code sample, the code
that I’ve written for this, is going to blow you away. JAKE: OK. Here we go. Oh, that’s it, is it? Can I guess? SURMA: Yes. Go take a wild guess. JAKE: It’s going to toggle
an attribute, isn’t it? SURMA: It is. It’s brilliant. JAKE: So OK. SURMA: It’s literally
like classless toggle, but for attributes. JAKE: Right. SURMA: It also has the
second Boolean parameter if you wanted to like
toggle like classless does, but most of the time you
want to toggle a class. JAKE: But this is going
to be destructive, though, because if I toggle– because
it could have a value. It could be hidden
equals something. SURMA: That’s actually true. I didn’t check that, if
you can pass a value. JAKE: No, I don’t think you can. SURMA: Yeah, OK. There you go. Cool. JAKE: That’s it. OK. OK. So we’ll– SURMA: Go back to the brackets. JAKE: Back to the brackets. We’ve got
ToggleAttribute versus– now, although I really badly
sold the PublicKeyCredentials. SURMA: I’m actually very
excited about the prospect of being able to access
two-factor authentication tokens through the browser. JAKE: Yeah, it’s one
of those things that– credentials payments
are the things where native apps are so far ahead. SURMA: Yeah. JAKE: Or were. And so having these
sort of things. SURMA: If I can at
some point write a web app where people can
authenticate with a fingerprint or something, and I
didn’t have to loop them through an authentication
flow in my back end, but just do it all
client side, winning. Absolutely winning. JAKE: Brilliant. SURMA: There we go. JAKE: Put it through. OK. Let’s look at our next
couple of features. I would like to talk
about OffscreenCanvas. SURMA: I know you’re
excited about that one. JAKE: We’ve already talked
about this, haven’t we? SURMA: A little bit. JAKE: I think we talked
about it in a podcast. But not– SURMA: Yes, a little bit. JAKE: And we maybe– SURMA: About the Bitmap
Renderer as well. JAKE: The Bitmap Prerenderer-er. SURMA: Er-er. JAKE: Or whatever it is. OffscreenCanvas, there you go. SURMA: It’s like a
canvas, but offscreen. JAKE: But offscreen. SURMA: And therefore
available to worker. JAKE: Yeah, exactly. SURMA: That’s exciting. JAKE: So if you want to
do bitmap manipulation in the worker, that’s great. You can also proxy
it so you’re doing the computation in the worker. Because this has just
got regular Canvas now. You know, 2D WebGL. But you can also sort
of transfer it so the– SURMA: Create it
on the main thread. Send it over to a worker. And all the paint operation
the worker does magically appears on the– JAKE: Well, yeah. The other way around. So your main thread,
basically of your webpage is being updated by the workers,
which I do think is amazing. SURMA: Going up against this
is the Focus Management API. Now, this is a very fancy word. It was mentioned
in one of the New in Chrome blog posts with
no explanation of what this API is, no code
sample, no link to the spec. And I googled it. It was very hard to find. It turns out it’s
the focus method. So you might remember
you can focus an element. JAKE: It’s been
around for a while. SURMA: It’s very old. So what’s new about this, it
takes a new options object now, which has exactly one option. And that option
is preventScroll. So you can focus an element
without scrolling to it. JAKE: It almost feels like
calling this the Scroll Management API is a little– SURMA: Someone
wanted to feel legit. JAKE: That’s someone making
up their own job title of like Master of Development. SURMA: I own the
Focus Management API. Thank you very much. JAKE: Yeah. SURMA: OK. JAKE: So it’s just one
option, but it is useful. SURMA: Maybe. Yeah, sure. JAKE: If you wanted
to send focus for accessibility
reasons, especially, and you didn’t want
it messing around with the scroll position. SURMA: Yeah, I guess. That probably is the use case. That’s why it got standardized. I did not– JAKE: There probably
are use cases. That’s why it got standardized. That’s a good way
to think about it. SURMA: I have not
run into this myself. And it’s– yeah. JAKE: I feel like I
might have if the default way the browser would scroll
might still be obscured by a position fixed element. I don’t know. Yeah, OK. Yeah, OK. Let’s stop talking. SURMA: So putting up
against each other is OffscreenCanvas
versus Focus API. It’s OffscreenCanvas. JAKE: I’m going to put
Offscreen Canvas through. SURMA: Yeah, that’s
not a big discussion. JAKE: I mean, just because
it does so much more. It’s something that– well,
from a selfish point of view, I’ve wanted it for ages. Although, there is a
negative point against it, because we tried to use
Offscreen Canvas for Squoosh and there’s a bug in Chrome. SURMA: Yeah, it
forces a GPU switch. If you have a laptop with two
GPUs, an integrated one which is not as powerful,
but does most of the time, and the discrete
one for like high power things, for some reason, it forces a
switch, and that’s super janky. JAKE: Yes. SURMA: It’s like a 1
second pause in the system. JAKE: Because I was doing
some rotation of an image. And it meant with very
little code in a worker. It wouldn’t– I was actually
rotating big images, so it was taking
300 milliseconds, even with the power of
the GPU and everything. But that 300 milliseconds,
like moving that off the main thread,
was just destroyed by the 1 second of
operating system jank you get with a GPU switch. So that’s a shame. SURMA: So as a result of
OffscreenCanvas winning, we now have to decide WebAuth
PublicKeyCredential API versus OffscreenCanvas. JAKE: OffscreenCanvas. SURMA: So are we talking
about the current incarnation of OffscreenCanvas
or the projected future of OffscreenCanvas? JAKE: Well, so what do you mean
in terms of– like with that? SURMA: Do we incorporate– JAKE: The bug fix? SURMA: This bug, for example. JAKE: Let’s assume the
bug is going to get fixed. SURMA: Yeah, because I think
OffscreenCanvas is massive. Yes, for me, it would
be OffscreenCanvas. JAKE: I think if we were talking
about WebAuth as a whole, not just this sort
of part of WebAuth, I think I’d be putting
WebAuth through. But I think I’m going to put– SURMA: Yeah, you
might have a point. JAKE: I’m going to put– I’m going to agree with you
and go with OffscreenCanvas. SURMA: OffscreenCanvas. JAKE: All right. That goes through to
the quarterfinals. SURMA: I think the other
problem is that I don’t build apps that have login. Maybe I should change it to
get some experience with that. JAKE: Ah, you’ve done quiz. SURMA: True. JAKE: But we used Google. OK. Fine. Fine. Let’s look at the
next set of features. I would like to talk
to you about Sensors. SURMA: Sensors. JAKE: Sensors. Specifically the
generic Sensor API. And that is these things. SURMA: Which is like
an umbrella term. We already had, I
think, gyroscope, for example, for
a long time now. JAKE: Yes, it was
like an event on the– SURMA: Yeah, some weird thing. JAKE: On the document
or something. And the motion
changed or something. This brings them all together. SURMA: There’s a
lot of sensors, yo. JAKE: There’s a lot of sensors. And these are the ones
that are in Chrome now. But they all have
a very similar API in that you get like a
reading event out of them, and then the properties
of the object has changed. So you’ll get the– SURMA: I think the event
name really bugs me. JAKE: Reading. Yeah, do you know what? Because when I first
saw that, I thought that meant it has begun reading. SURMA: Yeah, like a stream
in there or something. But you probably get an event
every time there’s a new– JAKE: I think it’s the– SURMA: Dataset
available to read. JAKE: I think it’s
not the verb reading. It’s the noun. It’s a reading. SURMA: Cool. JAKE: Which I would– SURMA: I would think
it to be like– JAKE: Change events,
like we have a lot of. SURMA: Yeah. JAKE: I’m sure there
must be a reason why it’s not a change event. And I think it’s because
it’s debounced maybe. SURMA: It’s there now. It will be. It’ll stick around forever. JAKE: So you get
all these things. SURMA: These are
actually really useful. So that’s kind of cool
that they’re there. JAKE: It’s especially
for like XR, VR. SURMA: All these things. JAKE: All of that sort of stuff. SURMA: All right. Going up against
the Sensors is– JAKE: I forgot that you
might want to do one. SURMA: Is BigInt. JAKE: A BigInt. SURMA: A BigInt. JAKE: A BigInt. SURMA: So basically– JAKE: I like BigInts. SURMA: You might have
seen them before. JAKE: BigInt. SURMA: This is a BigInt. It’s a very big integer. JAKE: That is a big integer. SURMA: Yeah, because there’s
a magic n at the end. JAKE: That’s bigger than
numbers I know, like 12 and 89. SURMA: So we’ve got
the n at the end. Java comes out null. So this is supposed
to be an integer, and not just a float number. And it can be arbitrarily big. JAKE: Oh. SURMA: Java will always
be saving every digit. And you can have
multiplication and addition and all these things now working
on arbitrarily large numbers. JAKE: Division? SURMA: There’s a module. There’s probably
integer division. I wouldn’t– JAKE: Oh, OK. Integer division. [MUMBLING] Integer division. Right. OK. SURMA: Fun side fact, it is
actually a new primitive type. JAKE: Oh, excellent. Which is we don’t
get those very often. SURMA: No. JAKE: Symbol. SURMA: It’s been–
yeah, we got symbol. It’s probably the
most recent edition. Before it was number,
object, function, string. JAKE: BigInt. OK. Excellent. Right. So let’s talk about them
two, Sensors, BigInt. Now, these both feel like
things that not many developers are going to use. SURMA: I have run into
big integer concerns and chose to ignore
them, because there was no other way around them. JAKE: Would you use
BigInt for small ints? Wait. Hear me out. I realize this sounds stupid. But I’m going to try and
rescue it in the next sentence. Would you use BigInt
for small ints if you did not want
floats to happen. Like for instance you– SURMA: To make sure
it is always integers. JAKE: So I’m thinking
like if you had– SURMA: Money. JAKE: Currency. SURMA: Yeah. Yeah. Now we’re like boom. JAKE: Wouldn’t it have been
better if we said the same thing, but we didn’t. We couldn’t possibly
reshoot this and edit it in. Let’s leave it at that. SURMA: Maybe, actually. Maybe. But also, I often– whenever you like
talk about certain– I wonder if these work in JSON,
actually, if you send them down from the server. If JSON parse will
actually understand them. JAKE: Nope! SURMA: Probably not. JAKE: The answer is no. That much I know. SURMA: But there’s
oftentimes when I just don’t want to worry about
if I’m going to overflow. Whenever I build
certain libraries, generating random UUIDs instead
of like distributing integers across an array and
then doing operations, I could just build one UUID
and then just slice it up. There are many use cases where
I see them as being useful. Sensors are more niche
to me than BigInts. JAKE: Yeah, that’s fine. SURMA: I’m going to admit that
still BigInts are probably kind of niche and not– JAKE: That’s the thing. These are both really niche. SURMA: Not really. I think Sensors are more
niche, except in XR land. JAKE: Yeah, OK. Yeah, OK. Yeah. Yeah, OK. Yeah, OK. Mostly because I
can’t make a decision, I’m going to let you
make the decision. BigInt goes through
to the next round. Excellent. Next up, here we go. This is the Lifecycle API. We did a big episode about this. SURMA: We did a big
episode on this one. JAKE: I don’t even know how
much we talk about it again. But it’s this. SURMA: It’s the first time we’ve
shown code about it, I think. JAKE: Yeah, I think
you’re right, actually. It was a podcast one. SURMA: In a way,
it’s just new events, but they’re really useful. JAKE: Yes! It takes stuff that
mobile browsers already do, discarding tabs,
because to save memory. It kind of wraps
a spec around it. It also introduces this idea
that page will be frozen, which means that it’s
not running anymore, but the memory for it still
exists, so it can be resumed. So this is if it is discarded,
as in it’s taken out of memory, and the user revisits the
tab, the page is essentially reloaded, but you
can detect that. SURMA: It’s something
that all native platforms have from literally version 1. Lifecycles are the
first thing they build to recycle views to
figure out where they go. And the web didn’t have it. And now it does. So it’s a massive step in
actually building something that behaves more like an
app and how you expect it. JAKE: You sold it
better than I have. Let’s see how you do
on one of your own. SURMA: What do I have? Server-Timings. I didn’t know about
this, and I actually found it quite interesting. So Server-Timings
in and of themselves are literally just a new header. So it allows you to
put a word in there, and say like this request
missed the cache, for example. You can have multiple
Server-Timings in a header. For example, this request
took 2.4 milliseconds to be processed. JAKE: Of CPU time? SURMA: This is
just random names. You can give them
your own names. JAKE: Oh! SURMA: These are just names
for these different timings. So I said, this one has a flag
set to true called missedCache. The CPU Server-Timing
is set to 2.4. JAKE: Oh, I see. I see. SURMA: If I wanted to, I
can even add a description. And these are sent along with
a response from the server. So you can send your
Server-Timings to the client. And over there,
you basically use the performance.getEntriesBy
resource array, which are used for the
requests on your page. You can now inspect. And in there, you have– every entry is a
resource, and each entry has an array of Server-Timings. And so in there, you have
the missedCache flag. You have the CPU thing
that I set up there. JAKE: What would you
do with this data? SURMA: Probably send it to your
analytics to tie it to a user, and be like, oh, a user on
this device had problems, but the server was already slow. And maybe correlate
certain features. It’s mostly analytics. JAKE: Your server sends
these things to the client. SURMA: Yeah. JAKE: So the client can
send it to the server. SURMA: Well, the problem– yes, it sounds a bit weird. But the problem is that often
when you have load balancers, they make a decision based on,
for example, the user agent. JAKE: Right. SURMA: So these timings
might differ depending on what the client is. So you want to tie these
measurements to the client, and ideally, to get timing that
might emit more measurements on the client side later on. JAKE: Right. Of course, because you
could take the client processing performance
stuff as well and tie that into one big
analytic that you send. SURMA: Maybe one user has
an extraordinary large music collection, and so all the
clients have become slow, but there’s no way to tie these
two timings together until now. JAKE: Until now. Fair enough. Fair enough. OK. Let’s discuss these ones then. SURMA: Still an
easy one, I think. JAKE: Oh, OK. I was going to say Lifecycle. SURMA: Yeah. JAKE: Oh, OK. OK. That’s good. SURMA: I think– I know there’s many
data-driven people out there who get super excited
about collecting more data. JAKE: And I’m excited for them. SURMA: And statistics
are great and everything. But for me as a developer,
Lifecycle is just a big hitter. JAKE: Agreed. I am excited about the
sort of stuff we’ll learn from Server-Timings. I’m excited that hopefully
things like Google Analytics will make that not something
I have to implement. SURMA: True. JAKE: It’ll just happen. SURMA: Actually true, yeah. JAKE: Although, I guess, maybe
if some of the server stuff, I would have to do that. But that’s not a big deal. But yet, Lifecycle,
for me, it just explains some platform
things, which have been under spec for so long. SURMA: Yeah. JAKE: And to finally
have them is a big deal. And now we need to figure out– SURMA: BigInt JAKE: Versus Lifecycle API. I’m going to go Lifecycle there. SURMA: Yeah, I agree. It’s not a big
discussion for me. BigInt is great, and I
love that we have it, because all the
libraries were super big. But again, it’s niche,
while Lifecycle is literally every app. Literally every app will
probably touch this API if you want to do it right. JAKE: And to be able to– especially on mobile to be
able to go back to a tab and have a way to– even though the page
is closed, reload. SURMA: Restore the state. JAKE: It restores the state. Yeah, absolutely. And this means we get to
decide our next semifinalist. SURMA: Now, that’s rough. JAKE: This is a tough one. This is a tough one. OffscreenCanvas
versus Lifecycle API. SURMA: I know,
politically, in terms of the overarching– the
story arc of the web. JAKE: Yeah. SURMA: It would be Lifecycle. For me, personally, the
things that I do on the web, it would be OffscreenCanvas. JAKE: OK. So the Squoosh use case,
which was like doing things like rotation. SURMA: I think you built
an image compressor. JAKE: We did. We finally built an
image compressor. But doing things like
rotation, resize, and that without experiencing
Main Thread stuff. SURMA: Generating a new favicon. All these little things
that you often want to do. JAKE: Yes. And that’s– yeah. If you’re generating a
notification icon in a service worker, like here’s
the two people that are part of this chat. Generate the icon for that. I’d like that. I worry it’s niche, but then– so here’s the thing. Lifecycle shouldn’t be niche. Everyone should be doing it. SURMA: Yeah. JAKE: Because everyone
should enable their tab to come back to life in the
same state that it was before. SURMA: And that actually
requires a big mentality shift, because right now nobody
writes apps in this way. JAKE: Although, if you
do it with the URL, if all of your state is
in the URL, you’re fine. SURMA: I guess. But in a lot of
apps, that’s hard. If you think about just
a simple to-do list, you’re in the process of writing
a to-do, you switch tabs, it gets frozen or discarded. Nobody persists that
half-written to-do to the URL bar. JAKE: That’s true. SURMA: You want to
go back and still have your half-written
to-do list there. JAKE: Yeah. And it will rely on something,
checking IDB and page load, which I know GitHub
does a good job of. SURMA: So if requires
a big mentality shift. But so does moving work to a
worker, as I have found out. It’s very hard to get
developers in that mindset. So I think both of them– JAKE: I’ve got this pain. SURMA: It is. I’m working on it. JAKE: It’s painful. SURMA: I’m working on it. I’m going to say– I think we agree that
Lifecycle is probably, overarching, the more
important problem to solve. JAKE: Let’s go with it. I’m definitely willing
to go with that. SURMA: Now we have
Lifecycle API is our first second semifinalist. JAKE: Our first
second semifinalist. Exactly. That makes sense. So yeah, we’re going to leave
that there for this episode. SURMA: We’re going to find our
second second semifinalist in– JAKE: And our– SURMA: And our winner, actually. JAKE: Yes! We’re going to find
our second finalist. And while we’re there, we
may as well do the winner. SURMA: I’m not ready for that. JAKE: Oh, you want
to say that as well? SURMA: I don’t know. Maybe. JAKE: Nothing’s
going to be linear. We’ve really messed this one up. We’re going to get
it right from now on.


Leave a Reply

Your email address will not be published. Required fields are marked *