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

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


SURMA: Welcome back to
the 2018 HTTP203 World Cup of Web Features. Yes! JAKE: I should have
just let you carry on. That was quite good. So in the previous episode,
we looked at eight features, and we whittled them down
to our favorite one of them. SURMA: Of those
eight features, yeah. JAKE: Of those eight features. And if you haven’t
seen that video, then– SURMA: You should. JAKE: Yeah. This will maybe make more sense. And if you haven’t seen it– SURMA: Spoiler alert. JAKE: Yeah. It was Scroll Snap
was our favorite one. SURMA: We’re not going to repeat
who Scroll Snap won against. JAKE: No. But we’re going to take a
look at the next feature. And I would like to talk
about Async Clipboard. SURMA: It probably does what
it says on the tin, doesn’t it? JAKE: It’s wild. Do you remember clipboard? Remember doing this? SURMA: execCommand, that is
some API designed straight out of hell. JAKE: Yes. Yes, it is. And you would have
to– if you wanted to copy some text, you’d have
to create an input element, because that’s where you could
do the focus on selecting properly. SURMA: Setting markers in the
Dom, text selection markers, which gets even worse. JAKE: It’s horrible. You copy. You’ve changed focus. You’ve changed selection. This is very destructive things. SURMA: And support was iffy. Then you had like
your fallback flash plugin until flash
support got– yeah. JAKE: Horrible. SURMA: Ah. JAKE: So this is it. It’s async. So for large content,
it’s less likely to be blocking on the main
thread, which is great. But I think the main sell
here is, isn’t that nice? SURMA: It’s so nice. JAKE: Isn’t that nice? SURMA: And I’m guessing
that it’s not just write text and read
text, but there’s also going to be files and images. And because you have screenshots
on many operating systems, it can just go onto
the clipboard first. JAKE: Yeah, potential
in many formats. So that bit is not there yet. SURMA: Yeah. JAKE: That’s something
that’s just text for now. SURMA: It’s still
winning already. JAKE: Absolutely,
absolutely winning. So that brings us on to– SURMA: The next one– JAKE: You want to talk about it. SURMA: Which is Typed OM. That’s a Houdini. That’s Typed OM. That’s the Houdini bit. So it’s actually one of the
lower almost less exciting APIs of Houdini. JAKE: You’re really selling it. SURMA: Yeah. JAKE: Good. SURMA: But it’s very
necessary to make all the other ones happen. And it’s actually addressing
a huge pain point, I think, of many developers,
because it gives types to CSS stylings. JAKE: OK. SURMA: So you might know get
computer styles or just the dot style property on an element. JAKE: Yep, yep, yep. SURMA: And there is
now the typed versions, which are either
Element.computerStyleMap or the attributeStyleMap. JAKE: OK. SURMA: And so now
we have a styleMap. So what does it actually mean? A styleMap basically
has scatters and gives you separate number
values and their units. So now you don’t need to
do string concatenation and like some weird splitting
or all these different things to figure out what is
the actual numeric value. Much easier to do math
with, which you sometimes have to do, or just analyze
them and figure certain things. JAKE: Well, before you– I really like what
they’ve done here. So we’ve got unit, px,
which is nice and short. It’s what you write
in CSS to have that. And then here we have
percent written out. SURMA: Yeah. I don’t remember why,
but there was a reason. JAKE: There was a reason. OK. That’s good. That’s good. SURMA: It actually goes farther
than that, because you can also create these types this way. So you can– you now have
basically a small part of CSS that’s parser exposed, and you
can just put it in the string, and it gives you back
that kind of typing. You can create them yourselves. And then set them this way. But even more excitingly, you
have add and subtract on these. You can actually do math. JAKE: Oh! So in the same way calc works. SURMA: Yeah! So this actually, if it’s the
same type of the same unit length, it will just coalesce. If you have
different– like here, I’m adding 5% to 10 pixels. It will actually give you
a proper arithmetic tree. So we can do all these
analyses or like reorder them. All the things
you sometimes want to do without having to
reimplement the CSS parser. JAKE: OK. I’m feeling that I might
know what has won here. SURMA: Maybe. Let’s go back to the tree. I don’t remember what
you’re talking about. Oh, yeah. JAKE: Oh, it’s so exciting! You can’t remember it, even 30
seconds later, whatever it was. I just– SURMA: To be fair– JAKE: I think Async
Clipboard is good. SURMA: Yeah. It’s not that often that
you need Typed OM directly. You need them for
lots of Houdini APIs. And if you need Typed OM,
it is so huge to have it. JAKE: Yes. SURMA: Then again, you
don’t need Clipboard that often as well,
I guess, unless in certain circumstances. So yeah, I’m going
to go with Typed OM. JAKE: OK. OK. I agree. So Async Clipboard, it’s a big
improvement to what we had, but there’s just a lot going
on in Typed OM, isn’t there? It feels like it wins just
for being a bigger feature. It’s definitely something I
would have loved in the past, like even for small
parts of that. I love when I get excited. It’s jingling. SURMA: And there were
some experiments where they had like
animation heavy sites, and they basically
rewrote them with Typed OM and actually got 80% faster. It’s an extreme case. JAKE: 80 is a big number. That’s a big number. I’m going to put it through. That goes through. Right. Next. Steady on, because the next
feature is Update Via Cache. SURMA: OK. JAKE: So this is a
Service Worker feature. SURMA: I’m not surprised. JAKE: What happens– we
ran into this problem where we were checking for
updates on the Service Worker using the HTTP cache, as things
normally happen everywhere for everything else. SURMA: Oh, that cache. That cache. JAKE: The HTTP cache. But we would always time
things out after 24 hours. If it was over 24 hours old,
we would go to the network regardless of what
was in the cache. SURMA: Ignore the
caching headers. JAKE: A lot of developers
still had a lot of issues with that, because they didn’t
have control over their headers for like one particular
JavaScript file, like the Service Worker. SURMA: Yeah. [INAUDIBLE] Pages is,
I think, a good example where you don’t have
control over your headers. JAKE: Exactly. Exactly. Yeah, they have a
default cache of like– SURMA: 10 minutes,
something random. JAKE: 10 minutes, yeah. So we introduced
Update Via Cache, where you can tell a Service
Worker what to go to the HTTP cache for, what to ignore. SURMA: So for the source,
you tell the browser whether to respect the HTTP
cache for the Service Worker file specifically. JAKE: Yes. Yes. So you updateViaCache all,
which was the old default. It’s not the default anymore. There’s imports,
which is saying, don’t go to the cache for
the main Service Worker file, but anything it imports, you
can go to the cache file. SURMA: Wow. That’s cool. JAKE: That’s the new default.
Or you can say, ignore the cache for everything. That’s my feature. SURMA: My feature. All right, but
what’s my feature? Desktop PWAs. So I have no code samples,
because it’s once again something that doesn’t
really change the way you write code or gives you
any new capabilities, but it’s basically the whole
install to home screen, but on desktop. Make it its own window. Make it its own button in the
launcher or on the Start menu, or whatever you have nowadays. And Edge has it kind of with
allowing you to submit PWAs to the store. JAKE: Yeah, they were ahead
of everyone in doing sort of– SURMA: But you still couldn’t
just install something from Edge to your desktop. That wasn’t possible. JAKE: Right. SURMA: You had to
submit it to the Store. You had to get it
approved, I think. And then it got in there. So now with Chrome on
Chrome OS and on Windows, and I think on Mac
behind the flag. JAKE: Yeah, it’s
behind the flag. SURMA: You can legit open the
menu and say, install this. And then it gets
into the launcher with its own window,
its own icon, its own command tap spot
in all these things. So becoming a proper
application on your desktop. JAKE: It’s kind of
replacing Electron for a lot of simple cases. SURMA: Hopefully. JAKE: Hopefully. OK. So this is a difficult
one, because when I talked about Update Via
Cache, the big news there is that we changed the default. SURMA: Yeah. JAKE: It’s not a new feature. It’s a change. So hmm, shaky ground. Desktop PWAs, it’s not a
developer facing feature. Well, it kind of
is, because it’s something you can talk about
my app can run on desktop. It’s not even on all
operating systems. SURMA: Yeah. JAKE: This is a weak round. So two things that have actually
been really well received. SURMA: I think Update
Via Cache solves– JAKE: Oh, really? I was going to say,
I think Desktop PWAs, it’s such a major thing. It’s something that’s moving
the web into a native space. SURMA: I guess– I think– I guess you’re absolutely right. It just doesn’t feel
as real to me yet. JAKE: Because there’s
no direct APIs for it. SURMA: Yeah, and there’s
not an install banner, I think, on desktop. It doesn’t prompt you to do it. JAKE: You need to set
up some JavaScripts to have a button for it. SURMA: I’m fine with letting
Desktop PWAs through. JAKE: What I find in
these sort of things, I feel like you’ve done
me a favor by siding with me, which is weird, because
it’s against the Service Worker feature. SURMA: You set
yourself up, mate. JAKE: I did, didn’t I? I worry that I now owe you
one maybe in a later round. SURMA: Oh, yeah. I’ll call in that
favor when I need it. JAKE: OK. So that moves Desktop
PWAs into the next round. SURMA: Into round two. JAKE: So Typed OM
and Desktop PWAs. SURMA: Typed OM. JAKE: I’m really
torn about this one. SURMA: Yeah, actually,
the more I think about it. JAKE: Well, it’s– SURMA: No. Typed OM. Because it doesn’t allow
me to write better code. Desktop PWAs don’t give me
necessarily new capabilities. I’m not– JAKE: They don’t make your
life easier as a web developer. SURMA: Yeah. JAKE: They might make it
easier to get more work, because you’re able to do things
that are more like native apps. SURMA: And also, I feel
like lots of other features are still missing to make
most of the things I do want to have in a separate app
actually possible in a web app. File access, it’s one of the
main things that comes to mind. So many apps I would like
to have as a proper app are still possible on the web. So the exceptions would be
like, yeah, what’s at web? I can install it, I guess. JAKE: It would be the PWA. But I’m also quite not too
sad about that being a tab. SURMA: Yeah. JAKE: I feel like
a lot of people are going to be screaming
at the screen right now. SURMA: Sure. I mean, they always do. JAKE: It is YouTube, after all,
going nuts in the comments. OK. So next up, as you may have
seen on the screen there. I actually find this
really difficult to read, because I kind of go Bitmap
Prerend, Bitmap Prerender, SURMA: Er-er-er. JAKE: Or Bitmap Prerenderer. OK. It’s BitmapPrerender. SURMA: BitmapPrerender. JAKE: Yeah. Check it out. Look at this. SURMA: It says,
BitmapRenderer here. JAKE: No, it– I’m now wondering if I– SURMA: I think it’s
BitmapRenderer, not BitmapPrerender,
because I think– it is BitmapRenderer,
not BitmapPrerender. JAKE: OK. Yes. See? It’s difficult to read. OK. It jingles when I
get angry as well. It’s BitmapRenderer. Of course it’s BitmapRenderer. Right. Here it is. Create a canvas. Get context. SURMA: Oh, it’s a
new get context type. JAKE: It’s a new context type. And what you can
do with this is you can create an image bitmap,
which is an existing feature. SURMA: Mhm. Separate feature. Nothing to do with this. JAKE: You can transfer
it onto the canvas. SURMA: So it’s just a fast path
for a basic canvas draw image. JAKE: Yeah. SURMA: That’s pretty cool,
but it’s like [INAUDIBLE].. I’m guessing this is super
fast under the hood, where there’s like all the
other layers are skipped. JAKE: It’s a little bit faster. It is very efficient on memory,
because this is transfer. SURMA: Yeah. JAKE: Like this
image object is now– SURMA: Oh! JAKE: Yeah, it’s been
transferred in the same way as if you were crossing
it over to a worker. So the image– [INTERPOSING VOICES] SURMA: The data buffer is
now neutered, as it’s called. JAKE: Neutered. Exactly. SURMA: Great. JAKE: And that’s it. SURMA: Lots of game engines
are going to be happy. All right. JAKE: Yeah. SURMA: Going up against
the “BitmapPrerender-er-er” is Web Locks. I have many feels, both good
and bad, about Web Locks. JAKE: Oh, interesting. SURMA: Let’s take
a look at the API. Basically, sometimes
you have a resource that might be shared between
multiple workers or even multiple tabs of your web app. JAKE: Yes. SURMA: Via IDB or
something else that is shared across your origin. The Service Worker, for example. JAKE: Yes. SURMA: And so you have some
code, and it does something. You don’t need to lock it. I mean, you lock your
request a lock by a name. It’s just a string name. And then an async function
will get invoked with the lock once you have that lock. And then you run your code. JAKE: Because that might
numb it straight away, because something
else has got a lock. SURMA: And then once that
async function starts running, the lock will be released,
and you can continue normally. And there is also a
concept of shared locks and exclusive locks. Shared locks, if you
request a shared lock, you can get it if there’s
only other shared locks. JAKE: Right. SURMA: If you request
an exclusive one, you have to wait until
there’s no other locks. And you will get
an exclusive lock. JAKE: Because shared locks
are fine if lots of things are reading from something. An exclusive lock
is for writing. SURMA: I like that when we
shared an exclusive, though, because there’s multiple
patterns, not just the read/write pattern. Because sometimes you might
be reading and writing, but on disjointed
parts of an array. JAKE: OK. SURMA: So that would also work. JAKE: Yes, OK. SURMA: So yeah, so this is
something that lots of people have requested. The more I think
about it, the more I think it’s actually necessary. I think there’s also a lot
to be done without this. And instead of using
the active [INAUDIBLE],, you have one designated thread,
but that’s a different story. JAKE: Why have you
done underscores? This is not very– SURMA: Because I
copy-pasted it from MDN. JAKE: Good excuse. That’s a good excuse. That’s a good way
out of it, because I dislike that in JavaScript. It’s not like any other APIs. I mean, it feels to me like
Web Locks is just a more– SURMA: It probably has– JAKE: It’s lower
level, more usage. SURMA: On average more use
cases than the BitmapRenderer. I think BitmapRenderer is kind
of niche for probably game engines, probably
some image processing. JAKE: It’s good if you’ve
got an offscreen canvas and you want to make
a transfer across. But yeah. Should we put Web Locks through? SURMA: Let’s declare Web Locks
the winner of round number seven. JAKE: Round number seven. OK. Right. So Web Locks is through
to the next round. What are we going
to look at now? I want to talk about Reach– Reature-Policy. OK, it’s the font again. This is Feature-Policy. SURMA: Lots of buzz around
Feature-Policy at CDS. JAKE: Yes, there was. So here’s basically
how it works. This is a header. You can serve this on your page,
and it’s essentially like CSP. It’s like CSP for features. SURMA: For features. JAKE: Exactly. So here I’m saying this page
may not use Geolocation. SURMA: So you’re
declining yourself access to the Geolocation
API, which is good, because that means that
if somebody evil injects JavaScript code, they
can’t do these things. JAKE: Exactly. Exactly. And you can also specify
it for an iframe. SURMA: Oh, that’s cool. JAKE: So you’re saying this
iframe may not use Geolocation. And there’s lots of features– SURMA: Great for
Ads, I would presume. JAKE: Yes, exactly. You’d probably want to put quite
a lot of this on if you really want to restrict
what– if you’ve got– SURMA: And there’s a massive
set of feature policies, for like if your images
are too big for this. JAKE: So that one, yes. That is one, but that’s
an experimental one. That’s not released. The ones that are released
are Autoplay, Camera, Document.domain, stopping
there, which I quite like, because that might come
with performance benefits later along. EME, Full Screen, Geolocation,
obviously, Microphone, MIDI, Payments stuff, VR. I’ve written Speaker here. I can’t remember what that is. Synchronous XHR as well. SURMA: Ah, sync. Yeah, that’s all good stuff. JAKE: Absolutely. Because that’s something you
would definitely want to stop. SURMA: And here
the final feature is like if you opt out of a
certain subset of features, you actually get– there could be the
option to enable a faster path in the browser,
because if you can opt out of legacy stuff, the
browser goes, oh, I don’t need the legacy stuff. I can be faster. It enables certain optimizations
potentially in the future. JAKE: Yes, absolutely,
absolutely. Right. SURMA: Next. JAKE: What have you got? SURMA: Coming up,
it’s CSS Paint API. JAKE: Oh, yeah. OK. SURMA: I would forward
people to my CDS talk. JAKE: Oh, yeah. SURMA: But maybe that’s
a 50-minute video if you want to see
the unedited version. JAKE: Yes. You had a little thing
that went wrong for you. SURMA: A little bit. JAKE: Yeah. SURMA: Let’s get the quick
version of CSS Paint API. Basically, it allows you to
define your own paint routine whenever CSS expects an image. JAKE: So just
before the squircle is the point where your
talk failed at CDS. SURMA: Yes! JAKE: Where you had a
catastrophic laptop meltdown. SURMA: I did. JAKE: And yet, you’ve
brought it up here. SURMA: Yes. JAKE: This is just– SURMA: I wanted to absolve the
squircle from the curse that is crushing it. JAKE: Sorry. I interrupted. SURMA: Yeah, so a
squircle is basically a square that is mathematically
closer to a circle than– it’s a way to paint a
rectangle with rounded corners. JAKE: But it looks a
bit more natural than how rounded corners– SURMA: For example. And browsers can do that. You have border radius. And if you don’t
like how it looks, then you’re kind of screwed. And now with CSS Paint,
you can basically hook into the actual Paint
part of the rendering pipeline, and define your
own paint routine. So here I basically
load a module, which is a JavaScript file,
into the Paint worklet. And I use a name. Then in that file, I can
define the paint routine and basically get the same
context like a canvas. JAKE: Right. SURMA: And just definite
what I’m going to draw. JAKE: And you get the
geometry, which is going to be telling you stuff like– SURMA: How big is the
element, the properties, what are the styles on this element. And you can incorporate all of
those in your JavaScript code. And the good thing is that
in the very near future, this code is going to
run off the main thread, basically not costing
you any main thread budget that you only have like
60 milliseconds per frame. JAKE: OK. SURMA: Because previously,
if you used Canvas, it could end up costing
your frame budget. JAKE: But is it on
the main thread now? SURMA: Currently, it is. JAKE: OK. OK. Like Cavas. SURMA: The feature of
worklets, in [INAUDIBLE],, they’re migratable. So whenever we think
it’s feasible to move it to a different thread, we can. JAKE: We can. SURMA: Without you having
to change your code. JAKE: OK. OK. Right. SURMA: So this allows you
to reduce the Dom and stuff. JAKE: Right. So I guess we should have a
think about those features. SURMA: This is a tough one. JAKE: Is it? SURMA: I think. JAKE: I was going to go
straight in with CSS Paint API. SURMA: Yeah, I was going to
lean towards Feature-Policy. JAKE: Oh, no. SURMA: But to be honest, that’s
mostly because of the projected future, and not off what
it gives you right now. Because right now, it’s
mostly in development, debugging/development feature,
like opting out of features. But I have the hope that it is
a way out of supporting legacy stuff for long amounts of time. JAKE: Well, Document.domain,
that is one of those. And I think if
Feature-Policy today, like it said, you put this
combination of things in, this stuff is going
to be twice as fast. SURMA: Yeah. JAKE: Then I think I would
be putting it through. SURMA: Yeah, true. But that’s not what it is today. JAKE: The range of things that
CSS Paint API sort of opens up, it feels like I’m
more excited about it. SURMA: True. And so am I. Yeah, it’s Houdini. JAKE: And I’m more excited
about what it can do today. SURMA: Flutter is using it
as well for their web port, for example. They published a blog post
about to do all the mask imaging for morphing
and all these things. It’s actually pretty impressive. Uses that I didn’t
necessarily think of myself. So it is quite good. So let’s call it CSS Paint API. JAKE: I’m going
to put it through. I’m going to put it through. SURMA: So now we have Web
Locks versus CSS Paint API. JAKE: Yes. CSS Paint API. SURMA: Two developer
features, one of them many more use cases,
in my opinion, on average than the other one. JAKE: Oh, which– because I– SURMA: CSS Paint API. Like for me, it would
be CSS Paint API. JAKE: There’s more
use cases there. SURMA: Yeah. It makes a lot of
new things possible. It also makes old things
much more efficient. And especially on
low end devices, where you’re under
memory constraints, it just gives you– makes more visual
things possible. It gives the web a more
high fidelity feel. It enables more high
fidelity UIs, I guess. JAKE: And it’s the first feature
that’s really opening up CSS. SURMA: Yeah. JAKE: I can see there being
more little micro libraries released with CSS. SURMA: It’s a very extensible
web API in that you are now hooking into the actual engine. JAKE: I really like
Web Locks, I really do. But I think you’re right. I’m going to put CSS Paint
API through to the next round. And that gives us another
semifinalist to decide as well. SURMA: Yeah, and now
we have to decide between Typed OM and CSS. So Houdini API
versus Houdini API. JAKE: Oh, this is
unfortunate, isn’t it? I mean, it was going to
happen at some point. SURMA: Yeah. It depends on how we judge them. On average, the problems
that I encounter when building a
web app, Paint API is more useful than Typed OM. And both of them are
currently, as far as I know, pretty much Chrome only. JAKE: But Typed OM has a lot of
lower level use cases, right? If you were trying to
figure out layout stuff, this is going to become handy. The amount of times I’ve
written little rubbish pauses just to take those
values and break them out. SURMA: So that’s where I
guess my experience differs, because it’d be problems
that Typed OM solves, I encounter much less than the
problems that Paint API solves. JAKE: Should we just
do that for 15 minutes? SURMA: Extended cut. JAKE: All right. Let’s find– SURMA: So you
would say Typed OM? You’re leaning towards Typed OM. JAKE: Let’s go with Paint API. It is– I am more interested
in the tooling that’s going to be built
around CSS Paint API. SURMA: Yeah. JAKE: I think that’s a really– SURMA: I’m hoping it will be– JAKE: That’s a really tough one. SURMA: Yeah. I’m hoping there will
be like an ecosystem of off-the-shelf modules with
all the effects, like a ripple, and like all the things that
you can potentially build. JAKE: Yeah, I do think
that’s interesting. And it also means
we can come up– SURMA: Our first– JAKE: Yeah, our first
semifinalists, we can come up with. Oh, and this is two– I mean, I was about to
say this is two good ones. You would hope at this late
a stage in the competition that this would
be two good ones. But it definitely is. SURMA: Two CSS
features once again. I see a pattern, I think. JAKE: Yeah, that’s interesting. SURMA: This is a really
tough one, actually. I would– JAKE: The amount of times
that I’ve wanted Scroll Snap and I’ve had to implement
it in JavaScript and it’s been horrible. SURMA: Yeah. JAKE: Because it’s been laggy. As soon as things are
moving, it’s fast, because you’re on a compositor. But that initial picking
up the touch event to starting to do the
movement, it often involves like setting up a lot
of layers in the compositor. SURMA: And then you
do pretend physics, and you have to do touch
and pointer events and mouse events. JAKE: Yes. There’s a horrible moment
where the user swipes, and then because it’s
happening to go into your code, it kind of– there’s a bit of
a break for it, then it flings. SURMA: And then you
figure out the ramp up curves and everything. And no– yeah, I agree. Scroll Snap removes
so much code. And it’s much more cross browser
than CSS Paint currently is. JAKE: That is true, actually. Scroll Snap is around
in Chrome and Safari, but there is a sort of
older standard that’s available in all
the other browsers. OK. Yeah, I’ll give it extra
points, because it is something that you can use today. SURMA: Pretty much today. JAKE: Like in projects. OK. So our finalist– SURMA: So we are 50% through. JAKE: We are 50% through. SURMA: We have whittled
down 16 features to one. And we will do all of that
all over again with another 16 features. JAKE: I regret
doing this already. SURMA: Well done us. JAKE: Yeah. How do we sign this off? I don’t know how. See you next time. Is that right? Is that OK? SURMA: Next video, next– on the other side,
on the flip side. I don’t know. JAKE: Yeah. See you in the next one. Subscribe. We keep getting
people back every day. Why didn’t we do one
episode per one of these? That would’ve been much better. Anyway. SURMA: So good at this. We’re so good at this. JAKE: See you next time. SURMA: See you next time.

32 Comments

Leave a Reply

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