spotifyovercastrssapple-podcasts

Use the Platform

We discuss what it means to use the web platform, and how that helps improve the user and developer experience in Elm apps.
April 25, 2022
#55

Transcript

[00:00:00]
Hello, Jeroen.
[00:00:02]
Hello, Dillon.
[00:00:03]
And what are we talking about today?
[00:00:05]
Today we're talking about using the platform.
[00:00:08]
Ah, I love this one.
[00:00:10]
Use the platform.
[00:00:11]
So, yeah, what do we mean by use the platform?
[00:00:15]
Yeah, it's a sense that I've been hearing a lot
[00:00:17]
in the web development ring.
[00:00:21]
And web rings?
[00:00:22]
Web rings.
[00:00:24]
Sounds very old school.
[00:00:29]
It's not like the hedgehog, to be honest, rings.
[00:00:33]
But yeah, using the platform,
[00:00:35]
it's something we often hear about,
[00:00:38]
but I think it's a bit undefined,
[00:00:40]
at least it is still to me.
[00:00:42]
So hopefully I will learn more today.
[00:00:44]
Yeah.
[00:00:45]
So, yeah, what do we mean when we say use the platform?
[00:00:49]
Like, first of all, what is considered to be the platform?
[00:00:53]
Right, right, good question.
[00:00:58]
And I think that answer might be surprisingly deep
[00:01:03]
because it...
[00:01:04]
So the deep web?
[00:01:06]
The deep web.
[00:01:07]
Because the web is, in a way,
[00:01:10]
something that we move away from more and more
[00:01:12]
as we've been replacing some of the functionality
[00:01:15]
in the web with JavaScript.
[00:01:17]
And I think there's more of a move back to
[00:01:19]
rather than replacing web functionality
[00:01:22]
and reinventing the wheel,
[00:01:27]
but leverage the existing functionality where possible.
[00:01:30]
And it turns out there's some...
[00:01:32]
There are a lot of benefits to that approach.
[00:01:34]
And I've got to say,
[00:01:37]
my development career started out doing Rails development.
[00:01:41]
And I think I thought of myself a lot more in those days
[00:01:45]
as somebody who...
[00:01:46]
I thought of myself more as a backend developer in those days
[00:01:49]
because you work with data modeling
[00:01:54]
with building APIs and business logic
[00:01:58]
and things like that.
[00:01:59]
That's how I tended to think of myself
[00:02:01]
because I'm like, that's this nice, clean stuff,
[00:02:04]
the sort of front end part.
[00:02:06]
Making things look good.
[00:02:08]
Yeah, like I never...
[00:02:10]
That was never my forte,
[00:02:12]
and it was never the part that felt exciting to me.
[00:02:15]
The part that felt exciting was,
[00:02:17]
let's do test driven development
[00:02:22]
with tested business logic
[00:02:23]
and iterate on it quickly and things like that.
[00:02:25]
And the web part almost felt like an afterthought
[00:02:28]
in my early career.
[00:02:30]
Then when I was doing more front end development
[00:02:33]
and Elm development,
[00:02:35]
I thought of myself more maybe like a front end developer.
[00:02:38]
And actually Elm Pages has really made me think of myself
[00:02:42]
a lot more as a web developer.
[00:02:44]
And that's been a cool shift.
[00:02:46]
I think to a certain extent,
[00:02:51]
I've learned a lot about these kind of web primitives
[00:02:54]
that we're given
[00:02:55]
and how to use them as much as possible
[00:02:57]
and think more deeply about what they mean.
[00:02:59]
And even when I'm not building with Elm Pages,
[00:03:01]
it makes me think more about
[00:03:03]
how to leverage those primitives.
[00:03:05]
So there's one thing that I want to clear up first.
[00:03:07]
So you mentioned that the platform is the web.
[00:03:10]
The way that I think I understood it was,
[00:03:13]
it was more meant like the platform is the browser
[00:03:18]
because the web is a thing, sure,
[00:03:22]
that I would actually have a hard time defining.
[00:03:24]
If you want to do that, go ahead.
[00:03:26]
But it's the browsers that give you a lot of things for free
[00:03:31]
or that do a lot of things for you,
[00:03:33]
which I think is the point of the sentence slogan.
[00:03:37]
This is very good distinction.
[00:03:39]
So let's break that down.
[00:03:41]
So the browser versus the web.
[00:03:46]
What is the browser doing when it displays a page?
[00:03:49]
It's making an HTTP request, and that's part of the web.
[00:03:53]
And what if it gets a 404, or if it does a redirect,
[00:03:57]
or if it chooses to cache a certain resource,
[00:04:00]
or if it preloads a resource,
[00:04:02]
or if it's doing that with a CDN or a web server,
[00:04:08]
it's taking these headers
[00:04:10]
that the web server is sending back.
[00:04:15]
There's the server side and the front end side.
[00:04:18]
That's one piece.
[00:04:19]
And those are both part of web standards
[00:04:21]
because the server is communicating with the browser
[00:04:25]
through these web standards.
[00:04:26]
So that's one piece.
[00:04:28]
Another piece is that, I mean,
[00:04:30]
you can interact with APIs through different services.
[00:04:35]
You could have a voice assistant, for example,
[00:04:38]
consuming your site.
[00:04:43]
I guess that's why I look at it as a little bit broader
[00:04:45]
than just the browser.
[00:04:47]
But the browser is a huge part of that
[00:04:49]
and is very emblematic of the whole
[00:04:51]
use the platform and these web standards.
[00:04:54]
So is the platform more the web standards?
[00:04:57]
Yes.
[00:04:58]
Use the web standards should be the episode's title?
[00:05:01]
Yes, I think you put your finger on it.
[00:05:04]
It is exactly web standards, yes.
[00:05:07]
So I've been thinking about this more broadly
[00:05:12]
and I think it matters.
[00:05:13]
And to me, I think the bottom line is
[00:05:15]
that it matters because conventions matter.
[00:05:19]
So web standards, conventions, they're sort of related.
[00:05:24]
Web standards matter because we build tools
[00:05:27]
on these conventions and standards.
[00:05:30]
Do you actually know the difference
[00:05:32]
between a convention and standards?
[00:05:34]
It's very pleasant to me.
[00:05:36]
I mean, web standards are a thing.
[00:05:41]
And it says exactly what the handshake should be
[00:05:45]
for opening up a socket connection.
[00:05:48]
And it says what is valid HTML and what's invalid HTML,
[00:05:53]
which HTML elements need a closing tag
[00:05:55]
and which ones should not have a closing tag
[00:05:58]
and strange things like this.
[00:06:00]
And sometimes conventions can even break those standards
[00:06:05]
and then the standards have to formalize those conventions.
[00:06:10]
So the conventions are the nonwritten ones.
[00:06:13]
Standards are the written ones
[00:06:14]
and conventions are what people do in practice, I guess.
[00:06:17]
Yes, I would say.
[00:06:18]
Hopefully they're the same.
[00:06:19]
Right, exactly.
[00:06:21]
And the web is all about those conventions.
[00:06:25]
And I mean, it's this strange thing
[00:06:27]
where you're building for multiple consumers.
[00:06:30]
And I guess that's one of the really interesting things
[00:06:32]
about building for this nebulous platform, right?
[00:06:37]
It could be a voice assistant,
[00:06:39]
it could be a device that doesn't exist yet,
[00:06:41]
it could be somebody using a screen reader.
[00:06:43]
It could be curl.
[00:06:45]
Exactly, exactly.
[00:06:46]
And that's all web, that's all the platform.
[00:06:49]
So yeah, conventions matter.
[00:06:51]
And another thing that I think matters with conventions
[00:06:56]
is just what users expect.
[00:06:58]
If you go to a website,
[00:07:00]
there are certain things you expect in the experience.
[00:07:05]
And it takes you to a page,
[00:07:07]
you click the back button,
[00:07:08]
and it takes you to the page you were at before.
[00:07:10]
And you can break that convention.
[00:07:13]
And to do that, in a certain sense,
[00:07:15]
you're going against the grain to do that,
[00:07:17]
but there are plenty of ways to do that type of thing
[00:07:19]
where you break users expectations.
[00:07:22]
What I feel is, my understanding is that
[00:07:25]
we are talking about this more and more
[00:07:27]
because people have been accustomed
[00:07:32]
or they have been breaking those standards and conventions
[00:07:35]
more and more by doing things by hand.
[00:07:38]
Is that your impression as well?
[00:07:40]
Yes, I think you're right.
[00:07:42]
I think that the web was basically built
[00:07:46]
with this idea of structured markup and links.
[00:07:52]
It's basically the web.
[00:07:53]
That's why it's called the web, I think,
[00:07:55]
is because you have these things interweaved
[00:08:00]
with this fundamental tool of the web.
[00:08:03]
And it was like a document delivery platform.
[00:08:06]
And then you get these things added on,
[00:08:08]
you get CSS to style the web.
[00:08:11]
That vision evolves.
[00:08:13]
I think it was originally thought of as something
[00:08:15]
that users could bring their own CSS,
[00:08:18]
and that isn't really a common practice.
[00:08:21]
Because who wants to use an application
[00:08:26]
and running it themselves?
[00:08:29]
I don't want to go to YouTube
[00:08:31]
and then have a very ugly page,
[00:08:34]
and therefore I have to style it myself.
[00:08:39]
No, that sounds terrible.
[00:08:41]
It's nice to be able to customize things, but yeah.
[00:08:46]
I guess, to a certain extent,
[00:08:48]
that speaks to how things have evolved.
[00:08:50]
Because in the early days,
[00:08:55]
there were these simple tags,
[00:08:57]
and bold, and whatever, flash,
[00:09:00]
whatever those fun early web 1.0 tags were
[00:09:04]
that we've lost nowadays,
[00:09:05]
the blink tags and stuff.
[00:09:07]
In those simpler times,
[00:09:09]
you have these primitives that you use,
[00:09:13]
and you style them.
[00:09:15]
But now it's so much more sophisticated
[00:09:17]
what we express.
[00:09:18]
And the semantic HTML we have
[00:09:23]
is doing GitDiffs in GitHub.
[00:09:25]
If someone uses a tab,
[00:09:27]
then you can choose how to render it
[00:09:30]
as two spaces, four spaces, eight spaces,
[00:09:32]
if you're weird.
[00:09:35]
Yeah, things were simpler then.
[00:09:37]
There was less expressive power.
[00:09:39]
There was less to express.
[00:09:40]
People weren't really building apps.
[00:09:42]
They were basically sharing documents.
[00:09:44]
They were sharing articles
[00:09:46]
and tables of contents and things like that.
[00:09:51]
It makes a lot of sense
[00:09:53]
that you style your browser the way you want.
[00:09:56]
So it's basically,
[00:09:57]
I'm not styling this website.
[00:09:59]
I'm styling whatever the documents I'm getting.
[00:10:02]
Exactly.
[00:10:03]
Which you can still do to some extent
[00:10:05]
with the browser settings.
[00:10:07]
But CSS has taken a life on its own.
[00:10:10]
Right, you could say,
[00:10:11]
this is my preferred font.
[00:10:12]
This is my preferred font size.
[00:10:14]
This is how big I like heading 1s
[00:10:15]
and heading 2s.
[00:10:20]
The divs would have seemed incomprehensible
[00:10:23]
in the early days of Web 1.0.
[00:10:26]
And nowadays, it's like,
[00:10:28]
yeah, I'm not surprised.
[00:10:30]
That makes sense.
[00:10:32]
Only 10?
[00:10:35]
Yeah, so the vision of what the web does has evolved.
[00:10:39]
And I think that the platform,
[00:10:42]
there's this sort of back and forth
[00:10:47]
about reaching the boundaries
[00:10:48]
of what the platform can do.
[00:10:50]
And then it catches up
[00:10:51]
and you try to standardize that
[00:10:53]
and you try to provide new primitives
[00:10:55]
to build in these new features
[00:10:57]
that were at the bleeding edge before.
[00:11:00]
I mean, jQuery is the classic example
[00:11:02]
that you're starting to add dynamism into web pages
[00:11:07]
and you have all these utilities
[00:11:10]
to go find an element on the page
[00:11:15]
and these patterns emerge.
[00:11:17]
And you say,
[00:11:19]
this seems to be a generally agreed upon convention
[00:11:23]
of how people are building websites.
[00:11:24]
It seems to be a good idea.
[00:11:26]
It seems to be a good practice
[00:11:28]
that we have some common patterns for now.
[00:11:30]
Let's build that into the platform.
[00:11:32]
So it's always going back and forth.
[00:11:34]
And I think what's happened is that
[00:11:35]
single page apps and JavaScript heavy applications,
[00:11:39]
we were pushing the boundary
[00:11:44]
and so we sort of strayed away
[00:11:46]
from the web platform a little
[00:11:47]
because it couldn't,
[00:11:48]
I mean, I remember the early days
[00:11:51]
when you couldn't do push navigation
[00:11:55]
and you had to use hashes in your URLs
[00:11:59]
because the browser would ignore those.
[00:12:00]
Otherwise, the browser would try
[00:12:02]
to actually do a quote unquote real page load
[00:12:05]
to load a document when you change the URL.
[00:12:08]
That was like a built in assumption
[00:12:13]
that the derivatives had to be built
[00:12:15]
into the platform to support that.
[00:12:17]
So it makes sense.
[00:12:18]
We've been ahead of what the platform could do.
[00:12:22]
But then when the platform catches up
[00:12:24]
and it says, okay, I've solved these problems,
[00:12:26]
I've accounted for these use cases,
[00:12:28]
then we have to say, okay,
[00:12:30]
now we can start using the platform again.
[00:12:32]
And I think that that's sort of where we've found ourselves
[00:12:35]
at this point in time.
[00:12:36]
Yeah, but you still need to support IE8 or 6.
[00:12:41]
The very interesting thing about our time, isn't it?
[00:12:43]
Is that, I mean, I think this year, IE11 will officially
[00:12:49]
drop support permanently once and for all.
[00:12:52]
I thought it was already the case,
[00:12:54]
but yeah, soon or let's check it.
[00:12:57]
Internet Explorer 11 is going end of life
[00:12:59]
on June 15th, 2022,
[00:13:02]
meaning that for most Windows versions
[00:13:04]
using Internet Explorer won't be an option anymore.
[00:13:09]
I feel like there was maybe like a soft end of life date
[00:13:13]
and now that's the hard deadline.
[00:13:15]
I don't know exactly what the nuances of that were,
[00:13:17]
but enough people have been able to make the case.
[00:13:21]
I mean, for sure IE11 is no longer support
[00:13:26]
getting active development,
[00:13:28]
even for I think security issues,
[00:13:30]
they don't get active development, I believe.
[00:13:32]
But either way, it's fully end of life in June this year.
[00:13:37]
That's a big deal as far as using the platform goes
[00:13:40]
because we can assume that we have some of these
[00:13:43]
built in platform features, more of them.
[00:13:45]
Now that's of course a gray area to some extent
[00:13:48]
because you do have different devices
[00:13:51]
that might be running an old version of iOS
[00:13:54]
or an old Chromebook or things like that
[00:13:57]
that can't update to.
[00:13:58]
So it's not as simple as Evergreen,
[00:14:00]
but still it's a big step.
[00:14:05]
I mean, the web, the browser and web standards.
[00:14:09]
Do you know of any other platform?
[00:14:12]
Or is web standards just a weird entity
[00:14:17]
where we have something that we can rely on?
[00:14:20]
For instance, if you develop games in Unity,
[00:14:24]
can you call that a platform?
[00:14:26]
I think you can.
[00:14:27]
I think you can call to the same extent.
[00:14:29]
It's a platform.
[00:14:34]
There's a platform for development.
[00:14:37]
There are certain standards and APIs.
[00:14:40]
I mean, it is interesting because the web platform
[00:14:43]
is this interesting space where you put things out there
[00:14:48]
and many different devices
[00:14:50]
in many different modalities can consume it.
[00:14:53]
And you don't know what version.
[00:14:55]
Like somebody could navigate to a website
[00:14:58]
from an Xbox or a watch or a screen reader
[00:15:03]
or a voice assistant
[00:15:05]
or they could be scraping your page.
[00:15:08]
They could be viewing it through a Twitter
[00:15:13]
social image preview, scraping the markup.
[00:15:18]
There are so many different ways that it could be consumed
[00:15:21]
and not to mention SpiderMonkey versus WebKit, et cetera.
[00:15:25]
And you have to build it in a way
[00:15:27]
where you can support all those
[00:15:32]
things like CSS and that sort of thing
[00:15:34]
because, well, that's...
[00:15:36]
I mean, those were...
[00:15:38]
I think that browser vendors realized
[00:15:41]
that that was a bad direction
[00:15:43]
because people ended up permanently relying on those
[00:15:47]
and building as if they're targeting different platforms.
[00:15:50]
Yeah, which is not what you want.
[00:15:53]
Right. You want to move towards a single platform
[00:15:55]
and try to build a unified experience as much as possible.
[00:16:00]
In that sense, it is unique.
[00:16:02]
Of course, you can build an iOS application
[00:16:05]
for different sizes of device
[00:16:07]
and somebody could run it on an M1 Mac or whatever.
[00:16:10]
But yeah, I mean, the web is probably the largest
[00:16:14]
and most diverse platform.
[00:16:15]
I think that's fair to say.
[00:16:17]
Probably.
[00:16:18]
Especially since I have trouble finding other platforms.
[00:16:21]
Yeah.
[00:16:23]
And especially because, you know,
[00:16:28]
you're using the web platform kind of.
[00:16:30]
So, yeah.
[00:16:32]
So, yeah.
[00:16:33]
So, like, conventions matter.
[00:16:36]
Conventions matter for user experience, you know,
[00:16:39]
from somebody who doesn't use a computer very much,
[00:16:42]
but they sort of have their workflow
[00:16:44]
and they expect the back button to do something
[00:16:47]
or they expect to bookmark something
[00:16:49]
and be able to get to the same place.
[00:16:51]
Conventions matter for those types of users.
[00:16:56]
Conventions matter for users who, you know,
[00:17:00]
have certain constraints in how they use the device,
[00:17:03]
like, you know, if they have restricted motion
[00:17:06]
and they need to use keyboard only navigation
[00:17:10]
or if you're a power user
[00:17:11]
and use keyboard only navigation.
[00:17:12]
These are all places
[00:17:13]
where conventions really matter.
[00:17:15]
And if these focus outlines that you get
[00:17:17]
aren't showing up to show you where your focus is,
[00:17:22]
that breaks their expectations.
[00:17:23]
And that might break the way
[00:17:25]
that they're expecting to use the platform.
[00:17:27]
So, when you go and you pave a new path
[00:17:31]
that doesn't follow the platform,
[00:17:33]
then to me, the bottom line is
[00:17:35]
you take responsibility for making sure
[00:17:39]
that all these different use cases are handled.
[00:17:42]
And that's a big responsibility.
[00:17:43]
If you can avoid it,
[00:17:45]
it's better to just rely on the platform
[00:17:47]
to do those things,
[00:17:52]
and that's what the platform does now.
[00:17:54]
It's what the platform will do in the future, too.
[00:17:56]
If it consumes it in a particular way in the future,
[00:18:02]
you have to keep up with that
[00:18:03]
and make sure that your application supports that.
[00:18:07]
Right.
[00:18:08]
But isn't using the platform
[00:18:10]
premature abstraction or optimization in that case?
[00:18:14]
I don't see it that way.
[00:18:16]
I see it as...
[00:18:21]
using the platform.
[00:18:22]
I think one of the classic examples is,
[00:18:25]
imagine that you didn't have any links on your page.
[00:18:28]
And, okay, so now you have something in your model
[00:18:33]
that says what page you're on.
[00:18:35]
Let's not call it a URL.
[00:18:36]
Let's just call it a page
[00:18:38]
because we're not using the platform,
[00:18:40]
so we don't have a concept of URLs.
[00:18:42]
And we have onclick handlers for these things.
[00:18:47]
Let's maybe underline them
[00:18:50]
or underline them on hover or something like that
[00:18:52]
because that looks like something you could click to,
[00:18:56]
but it's not an anchor tag.
[00:18:57]
Maybe it's a div.
[00:18:59]
And it has an onclick.
[00:19:01]
You click it.
[00:19:03]
It changes the page content you're viewing.
[00:19:06]
Well, in an Elm application, that's a lot harder.
[00:19:09]
That's a lot more work, right?
[00:19:11]
Yeah.
[00:19:16]
If you did a desktop application,
[00:19:18]
you have to redo all of those manually,
[00:19:21]
which is, I'm guessing, part of the reason
[00:19:24]
why frameworks or platforms, I guess,
[00:19:27]
like Electron, had so much uses.
[00:19:32]
Right.
[00:19:33]
Because you get a lot of those things for free.
[00:19:35]
Right.
[00:19:36]
The downside is that it's running
[00:19:39]
a very performance heavy thing under the hood,
[00:19:44]
and you get a lot of those things for free as a developer,
[00:19:46]
and the experience for the user is much nicer.
[00:19:49]
Right.
[00:19:50]
Electron is such an interesting topic
[00:19:53]
for use the platform because in a certain sense,
[00:19:57]
it's saying, hey, we've got this platform.
[00:20:00]
Let's just bundle it up for you.
[00:20:02]
In another sense, it's completely eschewing the platform
[00:20:05]
because it's saying, well, we have progressive web apps,
[00:20:08]
but let's just do a fork of Chrome
[00:20:13]
and install and bundle with every application you build,
[00:20:16]
and it can consume all this memory.
[00:20:18]
There are pros and cons.
[00:20:20]
In one sense, it is embracing the platform.
[00:20:22]
In another sense, it is really not embracing
[00:20:26]
this primitive of progressive web apps.
[00:20:29]
I definitely have mixed feelings about that one.
[00:20:31]
I wish that we just had more device vendors
[00:20:35]
embracing progressive web apps.
[00:20:40]
There are definitely reasons why a native application
[00:20:43]
is the right tool for certain use cases.
[00:20:47]
How would a progressive web app
[00:20:49]
replace a desktop application, just to clarify?
[00:20:53]
Well, if it's an Electron application that doesn't...
[00:20:58]
I mean, there are so many things
[00:21:01]
that the platform of progressive web applications provides.
[00:21:06]
Of course, it's varying support in different platforms,
[00:21:11]
but access to device sensors
[00:21:15]
and being able to sync data when you come online,
[00:21:19]
being able to handle offline support,
[00:21:22]
so having cached resources.
[00:21:25]
You get those with progressive web apps,
[00:21:28]
but not with Electron?
[00:21:30]
Right.
[00:21:30]
When I think about the web platform,
[00:21:35]
one of the things that's really unique about it
[00:21:37]
is you go to a URL and it loads an application.
[00:21:42]
It streams in an application to your device.
[00:21:45]
Whatever device you're on,
[00:21:47]
you can probably stream a web application to it,
[00:21:50]
which is pretty amazing.
[00:21:51]
That's not how Electron works.
[00:21:53]
Yeah, because it also streams
[00:21:56]
in a very lightweight manner.
[00:21:59]
Exactly.
[00:22:04]
Which can be very big still,
[00:22:07]
but a lot less than shipping a native desktop app
[00:22:12]
which you need to install,
[00:22:13]
which you need to go through.
[00:22:15]
Install Wizard, maybe even.
[00:22:17]
Exactly.
[00:22:18]
The application delivery mechanism is amazing.
[00:22:22]
Also, if you want to share...
[00:22:25]
If I'm going to a concert and I say,
[00:22:30]
oh, you're going to this concert,
[00:22:32]
how do I find out more?
[00:22:33]
I can't copy an Electron app and send it to them,
[00:22:36]
but I can copy the URL I'm on,
[00:22:39]
on my browser or on my phone,
[00:22:41]
hit share, send it to them in a message,
[00:22:43]
and now they're looking at the same thing I was looking at
[00:22:45]
on whatever device they happen to be at.
[00:22:47]
That's the web platform, and it's cool.
[00:22:50]
Now, if that's a conference website
[00:22:53]
or a news source or something
[00:22:58]
and you want to read more about it
[00:23:00]
and you want it to still be there,
[00:23:02]
if you load that conference program on your phone
[00:23:06]
and it's a progressive web app,
[00:23:08]
then you're looking at the conference program.
[00:23:11]
It loads the page as soon as it can,
[00:23:13]
but then it starts installing
[00:23:16]
the service worker in the background
[00:23:18]
and it starts caching these assets
[00:23:20]
so it has the program available for you
[00:23:23]
on your device offline, and then you go into airplane mode,
[00:23:28]
and Electron application can't do that.
[00:23:30]
It's a streaming application and document platform,
[00:23:35]
which is really amazing.
[00:23:37]
I think that we should embrace that more
[00:23:40]
because it's a really unique thing about the web.
[00:23:42]
And now it doesn't feel like it's the web
[00:23:44]
because it's for desktop.
[00:23:48]
Right.
[00:23:49]
Because under the hood, it's using a browser.
[00:23:52]
That's why it's working the way it is.
[00:23:57]
Well, that is the interesting thing, isn't it?
[00:24:00]
What does it mean to use the platform?
[00:24:02]
But it is this set of standards and conventions
[00:24:05]
that we can build on top of,
[00:24:07]
and something that's not a browser
[00:24:09]
could hook into those same standards and say,
[00:24:13]
oh, there's a concept of a service worker?
[00:24:15]
I'm going to use that,
[00:24:16]
even though I'm not a web browser.
[00:24:18]
I don't know what...
[00:24:20]
It's a voice assistant,
[00:24:21]
and you go on the airplane
[00:24:26]
and you say, hey, voice assistant,
[00:24:28]
what's in the conference tomorrow?
[00:24:31]
What's the keynote conference tomorrow morning?
[00:24:33]
And it can tell you, maybe.
[00:24:35]
And it could use the service worker to do that,
[00:24:37]
or whatever, even though it's not a browser.
[00:24:39]
So that's the weird thing about the platform
[00:24:42]
is you're kind of building
[00:24:44]
according to these standards and conventions
[00:24:46]
so that different devices and tools
[00:24:49]
can leverage those things
[00:24:54]
and it kind of sounds like write once, run anywhere on Java.
[00:24:59]
Well, in a sense,
[00:25:01]
there are common elements there.
[00:25:03]
And I mean, Java failed to do that, right?
[00:25:06]
Java applets were a thing,
[00:25:08]
and it didn't really take off.
[00:25:10]
I think the web is just a very powerful idea,
[00:25:13]
and of course it's imperfect.
[00:25:15]
It's trying to build this very ambitious
[00:25:19]
and huge in scope thing that's constantly evolving,
[00:25:24]
and the technology is changing very quickly,
[00:25:26]
and it has to remain backwards compatible.
[00:25:28]
I think given all of those constraints,
[00:25:30]
it's actually an amazingly successful platform.
[00:25:33]
Yeah, like all the critiques that we can give
[00:25:36]
to any of the browsers,
[00:25:38]
like even Internet Explorer, the old versions,
[00:25:41]
it's still a very complex piece of software
[00:25:45]
for good and bad.
[00:25:48]
They're all amazing technologies.
[00:25:53]
I think so.
[00:25:55]
I think the more we can embrace it, the better,
[00:25:57]
especially nowadays.
[00:25:58]
You know, there's a really interesting article,
[00:26:00]
I'll link to it, by Alex Russell,
[00:26:03]
who spearheaded a lot of the Progressive Web App stuff
[00:26:07]
and has a lot of really interesting thoughts
[00:26:10]
about the web in really broad terms.
[00:26:14]
He's really worth following,
[00:26:16]
and he has an article where he talks about
[00:26:21]
the idea of platforms providing features
[00:26:25]
and then not being at parity with the performance
[00:26:29]
and feature set of native platforms,
[00:26:33]
but then it tries to, then it catches up.
[00:26:35]
So you've got this constant back and forth
[00:26:38]
where the web platform is never going to be ahead
[00:26:40]
of these native platforms,
[00:26:42]
but you want to catch up over time.
[00:26:45]
So I think,
[00:26:50]
at the end of the day,
[00:26:51]
it's really about conventions.
[00:26:53]
And when I think about...
[00:26:55]
So the reason why it matters is because
[00:26:57]
you get a lot of things for free,
[00:26:59]
and all those things that are for free
[00:27:01]
are things that people expect
[00:27:04]
because they have been there in other websites,
[00:27:07]
and most of the websites, actually, right?
[00:27:10]
Yes.
[00:27:11]
So when I try to break it down,
[00:27:13]
I kind of thought of a few areas
[00:27:18]
that are pretty obvious.
[00:27:19]
One is accessibility.
[00:27:21]
If you try to reinvent the wheel
[00:27:23]
rather than embracing the platform,
[00:27:25]
then accessibility devices, screen readers,
[00:27:29]
or people navigating websites
[00:27:32]
in ways that aren't the same as how you navigate them
[00:27:35]
are not going to be able to do so easily or at all.
[00:27:38]
For example, if you don't use H1, H2s,
[00:27:43]
or if you have forms that aren't actually forms,
[00:27:45]
they're just hanging inputs floating in the ether,
[00:27:49]
or if you don't use actual links,
[00:27:52]
but you use divs with onclick handlers,
[00:27:55]
those have serious accessibility implications.
[00:27:58]
So accessibility is one area.
[00:28:00]
I almost feel like it's a bit weird for accessibility
[00:28:03]
because you have...
[00:28:05]
So semantic HTML that gives you a lot of things for free
[00:28:10]
and for interaction.
[00:28:13]
And at the same time,
[00:28:15]
you also have APIs through ARIA
[00:28:19]
to add the things that you didn't add
[00:28:24]
through non semantic HTML.
[00:28:27]
So you can make a div with an onclick event handler
[00:28:33]
and then say that its role is a button.
[00:28:38]
So you have two ways of doing it.
[00:28:42]
One is a lot more complex than the other, definitely.
[00:28:45]
But I don't know why both things exist.
[00:28:50]
I'm sure there are valid use cases
[00:28:52]
where you can't use ARIA
[00:28:55]
or where ARIA adds more information.
[00:28:59]
Right.
[00:29:00]
And see, that's sort of where I've personally arrived
[00:29:05]
The web is massive.
[00:29:07]
We can't all be experts about every single detail.
[00:29:10]
But there are some basic rules of thumb that we can follow
[00:29:14]
that are going to make our lives easier
[00:29:16]
and the lives of our users easier.
[00:29:18]
And so do I know every single detail
[00:29:23]
of ARIA accessibilities and screen reader experiences
[00:29:27]
and the cases when it makes sense to use ARIA
[00:29:32]
and it doesn't make sense to use ARIA
[00:29:34]
and it doesn't make sense to use ARIA.
[00:29:35]
Does anyone else make sense?
[00:29:37]
No, I'm not an expert.
[00:29:39]
And there's a lot I don't know about that.
[00:29:41]
But I know that if I can use a link, I may as well.
[00:29:45]
And I know that if I can use a form, I may as well.
[00:29:49]
I also know that if I pull up a, you know,
[00:29:54]
if I pull up voiceover, the built in screen reader on Mac,
[00:29:59]
which is something that many users on Mac use,
[00:30:01]
is the rotary, which is something you go
[00:30:04]
and you're in screen reader,
[00:30:06]
you can do control option U and it pulls up this rotary.
[00:30:11]
And you can hit the arrow keys to navigate left to right
[00:30:15]
between these different panes of like the hierarchy
[00:30:19]
of H1, H2, H3s.
[00:30:21]
You can see links, you can see forms,
[00:30:26]
you can see lists, you can see tables.
[00:30:28]
So these things matter to screen reader users.
[00:30:31]
And knowing that gets me a lot of the way there
[00:30:36]
to a baseline of using the platform
[00:30:40]
and building more accessibility friendly experiences.
[00:30:44]
It doesn't get me all the way there,
[00:30:45]
and I have to rely on a lot of Googling
[00:30:48]
and knowledge from other people and things like that
[00:30:53]
but that gets me 90% of the way there,
[00:30:55]
just knowing that if a screen reader user
[00:30:59]
is looking at a site and if they're looking at a table,
[00:31:02]
it will tell them which column they're under
[00:31:05]
and which row they're under.
[00:31:07]
And it knows what the name of the column is.
[00:31:10]
And it can say you're in row three of the country column.
[00:31:15]
Right?
[00:31:16]
And if I'm looking at a link,
[00:31:21]
then if you pull up the rotary
[00:31:23]
and you look at the links on the page,
[00:31:25]
then it will read out link, click here,
[00:31:28]
link, click here, link, click here,
[00:31:31]
as opposed to link, buy your copy of my book title
[00:31:37]
or whatever, right?
[00:31:39]
Those are just like,
[00:31:40]
that's not that much knowledge.
[00:31:42]
And I think that as people building for the web platform,
[00:31:45]
we can get so much mileage
[00:31:50]
and also just saying,
[00:31:52]
you know what,
[00:31:53]
I know that if I'm making it overly complex
[00:31:55]
and relying on building these things myself
[00:31:57]
rather than using the built in semantic HTML
[00:32:01]
and things like that,
[00:32:02]
if you just know,
[00:32:04]
okay, sometimes I need to do that,
[00:32:06]
sometimes it's the right choice to do that,
[00:32:08]
but it should probably be my last resort
[00:32:10]
and I shouldn't make that choice lightly.
[00:32:13]
I should make that choice knowing
[00:32:14]
that that's the harder path
[00:32:19]
to take.
[00:32:22]
So if I'm going to do a link on a web page,
[00:32:24]
I don't have to do much research
[00:32:26]
to know if that's a good idea.
[00:32:28]
But if I don't do a link
[00:32:30]
and I'm navigating to a different page
[00:32:32]
through that interaction,
[00:32:33]
I should probably think
[00:32:35]
through the implications of that.
[00:32:37]
Yeah.
[00:32:38]
So if you redo your link through a div,
[00:32:42]
you probably need to implement the fact
[00:32:47]
that you tab
[00:32:48]
if you do control or command click.
[00:32:50]
Exactly.
[00:32:51]
You have to have the color change
[00:32:54]
when you hover it.
[00:32:55]
You have to make it selectable
[00:32:57]
with the keyboard, tabbable.
[00:32:59]
Exactly.
[00:32:59]
You have to make it keyboard focusable.
[00:33:01]
And plenty of other things.
[00:33:03]
Exactly.
[00:33:04]
Which the deeper you go,
[00:33:07]
the harder it seems to do manually, right?
[00:33:11]
Exactly.
[00:33:16]
You have to click the link,
[00:33:17]
and on space, you have to scroll the page.
[00:33:20]
Whereas with buttons,
[00:33:21]
if you hit space,
[00:33:22]
you click the link.
[00:33:24]
You click the button.
[00:33:25]
And also, if you right click the link,
[00:33:27]
then you should be able to copy
[00:33:29]
whatever URL it is linking to.
[00:33:32]
Exactly.
[00:33:33]
I have no clue how to do myself.
[00:33:38]
I don't even know if that's possible.
[00:33:40]
Exactly.
[00:33:45]
If you go to the left of most browsers,
[00:33:47]
it will show the URL,
[00:33:48]
so you know what you're going to do.
[00:33:49]
Which actually,
[00:33:50]
I use that feature a lot.
[00:33:51]
I just love when it says JavaScript colon void.
[00:33:54]
Exactly.
[00:33:55]
This might seem like a bit of a straw man,
[00:34:00]
like come on, divs instead of links.
[00:34:03]
But actually, it's extremely common.
[00:34:06]
It happens so much on Twitter
[00:34:08]
that I'll try to navigate somewhere.
[00:34:13]
I want to make sure that I don't miss
[00:34:16]
any good context from something I'm reading,
[00:34:19]
and I go back to it.
[00:34:20]
I open a bunch of tabs.
[00:34:22]
I'm sure I'm not the only one out there.
[00:34:24]
And so you notice when you're middle clicking
[00:34:27]
to open a new tab,
[00:34:28]
that's another thing that happens
[00:34:29]
when you click on links.
[00:34:30]
Middle click as well.
[00:34:31]
Middle click a link,
[00:34:33]
does it open a new tab
[00:34:34]
or does it just do nothing?
[00:34:36]
And it's so annoying
[00:34:41]
because it does the...
[00:34:43]
The normal navigation?
[00:34:44]
The normal navigation.
[00:34:45]
Oh, that's the worst.
[00:34:46]
That's even worse.
[00:34:47]
That's even worse than doing nothing.
[00:34:49]
If it does nothing,
[00:34:50]
at least you can mentally prepare
[00:34:52]
for what's about to happen.
[00:34:54]
Yeah.
[00:34:55]
But if it just follows a link,
[00:34:57]
then you're like,
[00:34:58]
no, I lost all my progress.
[00:34:59]
Right.
[00:35:01]
And this is actually extremely common.
[00:35:04]
So this is not a straw man.
[00:35:05]
This is, I mean,
[00:35:10]
this happens to me on Twitter quite frequently.
[00:35:13]
So it matters and it happens.
[00:35:16]
So yeah,
[00:35:17]
so the key areas that I think about
[00:35:19]
for why it matters, accessibility.
[00:35:21]
How many more are they?
[00:35:23]
I came up with four.
[00:35:25]
Okay, let's go to number two.
[00:35:27]
Let me know if you think of any others.
[00:35:29]
Performance, user experience, and simplicity.
[00:35:32]
So performance,
[00:35:37]
the platform can do,
[00:35:38]
if you use CSS,
[00:35:39]
platforms can make assumptions
[00:35:41]
about how you use CSS,
[00:35:43]
and they can optimize for that.
[00:35:45]
If you use image source sets,
[00:35:50]
then the platform can give you
[00:35:52]
performance benefits for that, for example.
[00:35:55]
But it could also give you
[00:35:57]
a better user experience.
[00:35:58]
So there are many reasons
[00:35:59]
to use the platform, right?
[00:36:00]
But performance is one key thing.
[00:36:05]
So if you use the standard behavior,
[00:36:08]
if you try to re implement the link
[00:36:11]
like we just mentioned,
[00:36:13]
there's a lot of code
[00:36:14]
that you're going to send over the wire,
[00:36:17]
which would be exactly
[00:36:19]
one character otherwise.
[00:36:23]
Right, yes.
[00:36:24]
That's a great point.
[00:36:25]
Not to mention that it makes
[00:36:27]
your code simpler, right?
[00:36:29]
And these things all kind of
[00:36:34]
make a better user experience.
[00:36:37]
There are so many ways
[00:36:38]
it can affect user experience, right?
[00:36:39]
Like using,
[00:36:40]
if you have flashes of unstyled content,
[00:36:44]
you can,
[00:36:45]
if you're using the platform,
[00:36:47]
you can try to use media queries
[00:36:49]
to make things responsive.
[00:36:52]
I've ranted about how I don't like
[00:36:55]
managing responsiveness
[00:36:56]
through my model in Elm
[00:36:58]
because number one,
[00:37:03]
it's kind of unresponsive content
[00:37:06]
because, but if it was a media query,
[00:37:08]
then it's not stateful
[00:37:11]
and the platform can optimize for it
[00:37:15]
and it's going to lead
[00:37:16]
to a better user experience, I think.
[00:37:18]
Yeah, I do feel a bit conflictive
[00:37:20]
with the media queries.
[00:37:22]
So, but maybe it's just
[00:37:24]
I have a gap in my understanding.
[00:37:26]
So if you want to do
[00:37:27]
a mobile friendly application website,
[00:37:32]
what I tend to see is
[00:37:33]
people render a lot of HTML
[00:37:36]
and then depending on the media query
[00:37:38]
or depending on the size,
[00:37:40]
they have their media query
[00:37:41]
disable or hide elements.
[00:37:45]
But that means that all the elements
[00:37:48]
are rendered,
[00:37:50]
not rendered,
[00:37:50]
are present in the DOM, right?
[00:37:52]
So you have hundreds of DOM nodes
[00:37:55]
that are not used
[00:38:00]
and affecting the browser's computations.
[00:38:03]
So I feel like performance wise,
[00:38:05]
that is probably not great.
[00:38:08]
If you do it in Elm,
[00:38:09]
then also it goes through
[00:38:10]
the virtual DOM diffing.
[00:38:12]
So I don't know
[00:38:14]
what the performance implication
[00:38:16]
of this is.
[00:38:17]
I'm guessing it's not that bad
[00:38:19]
because people tend to use it,
[00:38:20]
but I'd love your opinion on that.
[00:38:22]
That's an interesting one.
[00:38:23]
Yeah, I mean, if you have
[00:38:28]
a screen based on the responsive view you're in.
[00:38:32]
Well, maybe you have a table
[00:38:34]
that you show by default on desktop sizes
[00:38:38]
and in mobile,
[00:38:40]
you have to click somewhere
[00:38:42]
for that table to show up.
[00:38:45]
I see.
[00:38:48]
That's interesting.
[00:38:49]
Yeah, I would say,
[00:38:52]
I don't know,
[00:38:57]
you're using the desktop experience,
[00:38:58]
but on mobile you have to click
[00:38:59]
something to show it.
[00:39:00]
I don't know,
[00:39:01]
my first inclination would be,
[00:39:02]
well, if the number of HTML nodes
[00:39:06]
is not a problem on desktop,
[00:39:08]
probably not going to be
[00:39:09]
a problem on mobile either,
[00:39:11]
with some of them being hidden
[00:39:12]
and it's probably not going to be
[00:39:13]
the performance bottleneck.
[00:39:15]
So I don't know,
[00:39:17]
I wouldn't think of that as a concern
[00:39:20]
unless I have a specific reason to.
[00:39:25]
If a user is using this on desktop or on mobile,
[00:39:30]
if they have to go to
[00:39:32]
mobile.mysite.com versus mysite.com,
[00:39:36]
am I serving them two completely different,
[00:39:39]
unfamiliar experiences?
[00:39:41]
That would be my bigger concern,
[00:39:43]
and I would feel more confident
[00:39:45]
if I'm using a few media queries
[00:39:47]
to have something be a row versus a column
[00:39:52]
based on the platform and a few things like that.
[00:39:55]
I would be more confident about delivering
[00:39:57]
a similar familiar experience
[00:39:59]
if I was doing that approach
[00:40:00]
than if I was serving up
[00:40:02]
two essentially different sites.
[00:40:04]
Definitely, yeah.
[00:40:06]
Or if I had a lot of logic
[00:40:07]
in my application code for that.
[00:40:10]
Yeah, I don't know if what I mentioned
[00:40:12]
is a performance bottleneck.
[00:40:14]
I'm guessing it isn't.
[00:40:16]
What you do get from using media queries
[00:40:21]
is function calls for updates.
[00:40:24]
You get a lot less cycles
[00:40:26]
if you listen to the size of the window.
[00:40:30]
That's something that will be a lot faster
[00:40:33]
and a lot more responsive.
[00:40:35]
Exactly.
[00:40:37]
That's the thing.
[00:40:40]
I don't particularly feel confident
[00:40:43]
about the performance
[00:40:45]
if I'm having an on hover highlight
[00:40:50]
that comes from Elm.
[00:40:52]
I don't trust myself to build that experience
[00:40:55]
in a reliable way.
[00:40:57]
I feel like it's probably going to be janky
[00:40:59]
in some way or not performant.
[00:41:01]
It's just like if I can do it with CSS,
[00:41:04]
I would prefer that.
[00:41:06]
Something I've been mulling over recently
[00:41:08]
and I haven't come to a conclusion yet,
[00:41:11]
it's sort of a forming or exploring idea
[00:41:14]
in my mind right now,
[00:41:19]
versus CSS.
[00:41:22]
I do wonder,
[00:41:23]
should use the platform push me towards
[00:41:26]
more of a vanilla CSS experience?
[00:41:29]
Of course, there are pros and cons.
[00:41:31]
We love our type safety in Elm.
[00:41:33]
Like Elm Tailwind modules, for example.
[00:41:35]
It's really nice being able to just use breakpoints
[00:41:38]
and things defined with Elm CSS
[00:41:41]
and then add your own custom Elm CSS styles
[00:41:46]
into very nice developer experience.
[00:41:48]
I think it's a pretty good user experience.
[00:41:51]
I haven't really noticed performance issues.
[00:41:54]
Although it does increase your bundle size
[00:41:57]
of your JavaScript, your compiled Elm.
[00:41:59]
And per byte, I think that you're going to have
[00:42:02]
more of a performance burden per byte of JavaScript code
[00:42:06]
compared to per byte of CSS in general.
[00:42:10]
I probably agree with that CSS will be lighter.
[00:42:15]
So doing CSS inline versus using CSS files,
[00:42:20]
both are supported by the browser.
[00:42:22]
So both are using the platform, right?
[00:42:25]
Yes and no.
[00:42:27]
I mean, putting everything into JavaScript
[00:42:29]
in a certain sense is not embracing the platform, right?
[00:42:33]
Because the platform is like,
[00:42:35]
you can have style sheets, you can have...
[00:42:38]
JavaScript is a tool for enhancing experiences,
[00:42:43]
not creating experiences from scratch, right?
[00:42:46]
I think that's the gist of my take on use the platform.
[00:42:51]
But JavaScript is a web standard.
[00:42:54]
Right, right.
[00:42:55]
Therefore, anything I write in JavaScript
[00:42:58]
is using the platform.
[00:42:59]
Yeah, right, exactly.
[00:43:02]
You found the loophole.
[00:43:04]
Yeah, like if I open an HTML tag and I don't close it,
[00:43:09]
the browser support it, I'm using the platform.
[00:43:13]
Right, right.
[00:43:15]
Right?
[00:43:16]
If you...
[00:43:18]
And actually, this does get to an interesting case
[00:43:21]
of use the platform.
[00:43:23]
So there are parts of the platform
[00:43:26]
that are not necessarily going to give you
[00:43:30]
the most customizability
[00:43:32]
or allow you to create rich user experiences.
[00:43:37]
So that's a part of the platform, technically,
[00:43:39]
although they're actually trying to remove it.
[00:43:41]
But...
[00:43:43]
For now, then?
[00:43:44]
Yes.
[00:43:46]
Apparently, it's used by scammers to make it look like
[00:43:49]
you're getting an official system notification
[00:43:51]
when they screen share with people.
[00:43:53]
I think that's the reason they're trying to remove it.
[00:43:56]
It also gives a wonderful user experience.
[00:44:00]
Precisely, right?
[00:44:05]
Pretty rarely, right?
[00:44:06]
So that's one where you probably want to throw it out
[00:44:09]
and say, the platform doesn't really give me
[00:44:11]
a good building block in this case,
[00:44:13]
so I'm going to need to create my own, right?
[00:44:15]
And no, you could imagine a world where that's different,
[00:44:18]
but that's the platform primitive that we're given.
[00:44:21]
So to a certain extent,
[00:44:23]
you can't just blindly use the platform.
[00:44:26]
It does take a little bit of experimentation
[00:44:29]
and experience to figure out
[00:44:34]
how to provide good experiences
[00:44:36]
and are going to be able to give you the user experience
[00:44:39]
you want to try to build.
[00:44:40]
Like, you know, like alerts.
[00:44:41]
Don't alerts block the main thread
[00:44:44]
and strange things like that, too?
[00:44:46]
It probably does, yeah.
[00:44:48]
I think they might.
[00:44:49]
I think about it, yeah.
[00:44:51]
So it's pretty odd.
[00:44:52]
It's just...
[00:44:55]
Somehow, it's just this thing that exists in the platform
[00:44:57]
really as a debugging tool and nothing more.
[00:45:02]
It's users.
[00:45:03]
You could imagine a world
[00:45:04]
where that is the best practice,
[00:45:06]
that we have an alert primitive in the platform
[00:45:09]
that gives us a really nice way to do things.
[00:45:11]
Or you have to enable a flag in your browser
[00:45:16]
to enable the alert feature, like in debugging mode,
[00:45:20]
just like with Elm, you have a debug.to do
[00:45:24]
and debug.log only for development purposes.
[00:45:29]
Actually, mobile phones, or at least Android,
[00:45:33]
has a...
[00:45:34]
You have to do something to get it into, like, developer modes,
[00:45:39]
something quite...
[00:45:40]
that you wouldn't find on your own, I think.
[00:45:43]
Yeah.
[00:45:44]
I think you have to go to settings and go to about
[00:45:47]
and press it like 10 times or something.
[00:45:49]
Oh, okay. Interesting.
[00:45:50]
It was something like that last time.
[00:45:53]
As far as I can remember.
[00:45:58]
By default, I wonder.
[00:45:59]
I don't know. I haven't tried it. It's enough.
[00:46:01]
But that is, like, the web platform is this massive, you know,
[00:46:06]
hodgepodge, and everything is backwards compatible.
[00:46:09]
And so sometimes, you know, early days of the web,
[00:46:12]
when JavaScript was, you know, just emerging,
[00:46:16]
you throw it in there,
[00:46:18]
you don't give much thought to the implications of it,
[00:46:20]
and then you can't really change it
[00:46:22]
because it has to say backwards compatible forever, ish.
[00:46:27]
Except for alerts.
[00:46:29]
Like, we maintain everything backwards compatible
[00:46:33]
except alerts because no one likes them.
[00:46:37]
Exactly.
[00:46:38]
Which, in a way, makes sense.
[00:46:40]
Like, if no one likes something, not even the users,
[00:46:43]
then, yeah, maybe you want to break the website.
[00:46:47]
Yeah, it's a weird line.
[00:46:49]
I think the people who run CodePen and CodeSandbox
[00:46:54]
like it because people use it a lot there
[00:46:56]
when they're learning the code.
[00:46:59]
So they're unhappy about that.
[00:47:00]
How will we test cross site scripting injections?
[00:47:05]
Right.
[00:47:06]
We have to do three alerts.
[00:47:10]
It is actually quite useful to test that.
[00:47:14]
Interesting.
[00:47:15]
Yeah, so you've got to know the rough edges.
[00:47:17]
You have to, you know, I mean,
[00:47:22]
there's a lot of knowledge that you need.
[00:47:24]
But hopefully having certain rules with them makes it easier.
[00:47:28]
And I'm going to go ahead and say that links
[00:47:31]
are a very important part of the web.
[00:47:34]
I'm also going to put a stake in the ground
[00:47:37]
and say that forms are an important part of the web
[00:47:39]
and one that in the frontend space we've forgotten about
[00:47:42]
and in the Elm world I think we've forgotten about.
[00:47:45]
Yes.
[00:47:50]
So let's talk about forms.
[00:47:52]
Form over function.
[00:47:53]
What?
[00:47:56]
Instead of defining a JavaScript function,
[00:47:58]
you should just write a form.
[00:47:59]
It was a bad pun.
[00:48:01]
I had to get one out there.
[00:48:02]
But you didn't say no pun intended.
[00:48:04]
That's true.
[00:48:05]
Well, you would have seen right through it.
[00:48:07]
No, because I didn't get it.
[00:48:13]
Yeah, so I'm one of those people who don't use forms
[00:48:18]
and very likely because I misunderstand them.
[00:48:21]
It's a poor form you're in.
[00:48:22]
That one I got.
[00:48:27]
So the way I learned forms back in the day
[00:48:29]
when I studied computer science
[00:48:32]
and the basics of web applications,
[00:48:36]
you have a form and you have a submit action
[00:48:43]
or an action which is usually submitting something to a web server,
[00:48:48]
making a post request and sending the data from the form.
[00:48:53]
And I find that to be useful for static websites
[00:48:57]
like just plain HTML slash CSS,
[00:49:01]
but I don't see how it applies
[00:49:04]
for when you want more interaction
[00:49:07]
and when you want to do something else
[00:49:09]
and submitting, making a post request to something else.
[00:49:14]
Something somewhere.
[00:49:16]
Yeah, and to a certain extent,
[00:49:19]
I think this is again like we were talking about
[00:49:22]
when you just sort of throw away the platform
[00:49:25]
because it doesn't do what you need it to
[00:49:28]
and then you build it from scratch
[00:49:30]
because you want to build client validation
[00:49:33]
and things like that and it doesn't support it.
[00:49:35]
I think we're getting back to saying,
[00:49:37]
okay, actually maybe we can use forms a little bit more
[00:49:42]
even if let's say that your submit actions
[00:49:46]
and those things just are disabled,
[00:49:49]
they don't work, they don't do anything.
[00:49:51]
Still, if you have a form wrapping your input elements,
[00:49:55]
screen readers care about that.
[00:49:57]
Also, you know what else cares about that?
[00:50:00]
Keyboard.
[00:50:01]
Keyboard.
[00:50:02]
You're in the last field of the form,
[00:50:05]
you hit enter and it's going to do the on submit action.
[00:50:10]
Well, that's when I would do it
[00:50:12]
because I'm done with the form and I'm ready to submit it.
[00:50:15]
Wherever you are in the form.
[00:50:17]
These are relevant things
[00:50:20]
whether or not you're handling the on submit with JavaScript.
[00:50:24]
I think that's the first point.
[00:50:27]
Also, if you embrace some of these things.
[00:50:30]
Now again, we were talking about the rough edges
[00:50:34]
or things that aren't quite usable and use the platform.
[00:50:39]
Let me clarify.
[00:50:40]
You can just use unsubmit,
[00:50:43]
html.events.onsubmit
[00:50:46]
just like you would do with any other form.
[00:50:49]
Exactly.
[00:50:50]
Any other elements.
[00:50:52]
It wouldn't necessarily want to make an action
[00:50:55]
to send something to.
[00:50:57]
Exactly.
[00:50:58]
It's going to prevent default on that
[00:51:00]
when you put an on submit on the form.
[00:51:03]
Basically, what I'm suggesting to somebody who says,
[00:51:08]
I don't want a real form post to happen,
[00:51:10]
but I want to make an accessible user experience
[00:51:14]
and something that's intuitive for keyboard users
[00:51:17]
and things like that.
[00:51:18]
What I'm suggesting is
[00:51:20]
just wrap your input fields in a form always
[00:51:23]
and add an on submit handler
[00:51:25]
instead of a button on click
[00:51:28]
because that button on click
[00:51:30]
isn't going to get triggered if you do on enter.
[00:51:35]
It's going to get triggered on every field.
[00:51:37]
What else are you missing there?
[00:51:41]
It happens so often that I'm filling out forms
[00:51:45]
and I use some auto complete
[00:51:49]
to fill in an address or credit card or something.
[00:51:54]
Then it says, invalid, please enter something.
[00:51:58]
I'm like, really?
[00:51:59]
Really?
[00:52:04]
I'm so surprised that I entered something
[00:52:07]
with an auto fill.
[00:52:08]
There are so many,
[00:52:10]
it's just so widespread that
[00:52:13]
people are trying to outsmart the platform.
[00:52:15]
They're trying to say,
[00:52:16]
you cannot copy paste into this field.
[00:52:18]
It's like, what?
[00:52:20]
You can't copy paste your password into a field.
[00:52:23]
Why?
[00:52:24]
Why can't I do that?
[00:52:25]
What if I'm using a password manager
[00:52:29]
and that's my workflow for whatever reason?
[00:52:32]
You can't.
[00:52:35]
When it says reenter email address to confirm it,
[00:52:38]
you enter it once,
[00:52:39]
you can paste your email address.
[00:52:40]
The second one, you have to type it manually to be safe.
[00:52:44]
Don't tell me how to live my life.
[00:52:46]
Yeah, I feel like I will do a better job by pasting.
[00:52:50]
Exactly.
[00:52:53]
Yeah.
[00:52:54]
There's so many things like this
[00:52:55]
or disabling right click or just don't do that.
[00:53:00]
The passwords is I think my pet peeve.
[00:53:04]
I'm using a Mac at work
[00:53:06]
and it doesn't have an option to display the password that you typed.
[00:53:13]
Whereas in other platform,
[00:53:15]
at least my personal Linux laptop,
[00:53:17]
you usually have a button to show the contents.
[00:53:22]
I found that so annoying
[00:53:24]
because especially on a Mac,
[00:53:29]
it's like how do I do a backslash?
[00:53:32]
Right.
[00:53:33]
I don't know.
[00:53:35]
Now everybody knows your password.
[00:53:37]
I didn't say I didn't change it.
[00:53:43]
The keyboard doesn't show you what to do
[00:53:46]
so you have to play with it.
[00:53:48]
Since you cannot see the character that you just typed,
[00:53:51]
you have to try it out.
[00:53:53]
When you're trying to log in,
[00:53:58]
you can type things in.
[00:54:00]
You're really stuck.
[00:54:02]
Especially with the fact that I usually have a French keyboard.
[00:54:07]
Things are not always as you expect.
[00:54:10]
For instance, if you play some video games,
[00:54:12]
sometimes the keyboard just assumes that you're using QWERTY,
[00:54:16]
which I'm not.
[00:54:17]
I'm using a Nozerti.
[00:54:19]
Sometimes I just even remap the keyboard to be like,
[00:54:22]
this is QWERTY.
[00:54:27]
I'm not moving a character.
[00:54:29]
Keyboards, keys are annoying sometimes.
[00:54:33]
Interesting.
[00:54:35]
This is why conventions matter.
[00:54:37]
Anytime you assume that you have a better way
[00:54:42]
to solve a problem than the standard one,
[00:54:45]
again, the onus is on you
[00:54:47]
to then think through every possible use case.
[00:54:51]
Whereas if you use the standard,
[00:54:56]
you can change the tab.
[00:54:57]
You don't have to think through every single thing
[00:54:59]
a link has to do.
[00:55:00]
You can just write a link and that's fine.
[00:55:02]
And then there's also actively disabling things
[00:55:05]
that you get for free.
[00:55:07]
I think I mentioned it when we talked about accessibility
[00:55:10]
with Tessa,
[00:55:12]
where I was working on an application,
[00:55:15]
and we had a form,
[00:55:17]
and the submit button had the focus ring,
[00:55:20]
which my manager didn't like.
[00:55:25]
And I had to actively remove it.
[00:55:27]
And yeah, in hindsight,
[00:55:30]
I should have just refused because there's good reasons
[00:55:33]
for it to be there.
[00:55:34]
Right.
[00:55:35]
Yeah, that should be raising red flags
[00:55:39]
when we're trying to disable something.
[00:55:42]
We should at least say, why is this there?
[00:55:45]
Yeah, we should at least understand
[00:55:46]
what is the benefit of this,
[00:55:48]
which I think we understood,
[00:55:53]
and we should have caved in.
[00:55:55]
I wouldn't cave in today, Dillon.
[00:55:57]
I wouldn't today.
[00:55:59]
I am a grown man now.
[00:56:04]
Yeah, I think that's quite ubiquitous.
[00:56:06]
So do you see any use cases
[00:56:09]
for not using the platform?
[00:56:12]
Well, yeah.
[00:56:13]
I mean, I think, again,
[00:56:15]
knowing through experience
[00:56:17]
these sort of half baked parts of the platform
[00:56:22]
provide the user experiences we need,
[00:56:24]
there are things like that, right?
[00:56:25]
Like the platform provides this alert primitive.
[00:56:28]
You probably shouldn't use it.
[00:56:30]
The platform gives us input type equals date time.
[00:56:34]
I think that's the right name for it.
[00:56:36]
But it's not quite ready for primetime.
[00:56:38]
It's not great, right?
[00:56:39]
So, I mean, it's okay.
[00:56:42]
It's like a good starting point,
[00:56:45]
but you'll probably outgrow it
[00:56:46]
because you want to create
[00:56:51]
also like drop downs, which are,
[00:56:54]
you have the select,
[00:56:55]
but it doesn't have a filtering,
[00:56:58]
like an input that you can type things in.
[00:57:01]
Right. Well, it has some filtering.
[00:57:03]
Well, not exactly filtering,
[00:57:05]
but it will go to an entry
[00:57:06]
matching what you type.
[00:57:08]
Yes.
[00:57:08]
But it's, yeah, it is not...
[00:57:10]
There's some missing base UI primitives.
[00:57:15]
There absolutely is.
[00:57:20]
You might want to create your own building block.
[00:57:23]
But in those cases,
[00:57:24]
I think my only advice is to not take that lightly
[00:57:29]
and to understand that you're now handing off
[00:57:33]
that responsibility from the platform to yourself.
[00:57:37]
So if you can use some sort of community standard,
[00:57:39]
if there's some package that provides something like that,
[00:57:43]
or a web component,
[00:57:44]
or something that you can install
[00:57:49]
and they can run testing on it,
[00:57:50]
they can open issues,
[00:57:51]
they can put in pull requests,
[00:57:53]
or at least if it's like a company wide thing
[00:57:56]
that multiple teams use or something,
[00:57:58]
that's ideal.
[00:57:59]
But just don't take it lightly.
[00:58:01]
That's my only suggestion there.
[00:58:03]
Yeah, because if you want to have
[00:58:04]
most of the same performance gain,
[00:58:07]
user experience, and accessibility,
[00:58:10]
you will need to do a lot of work.
[00:58:12]
So if someone did it already for you,
[00:58:17]
it's usually slightly not what you want.
[00:58:21]
Right.
[00:58:22]
But if you do use something that is popular,
[00:58:25]
then I guess it's more likely
[00:58:27]
that that would make it into the standard
[00:58:30]
rather than your nonstandard version.
[00:58:33]
Right.
[00:58:34]
Yeah, in Elm, I think we're a little bit,
[00:58:37]
like if you're trying to find
[00:58:39]
a really nice select component in React,
[00:58:44]
it's a million and a half.
[00:58:46]
There will be slightly not be what you want.
[00:58:49]
Probably, but at least you can forget
[00:58:52]
and it's probably going to be thinking
[00:58:55]
through a lot of these considerations,
[00:58:56]
although there are certain ways
[00:58:58]
that React doesn't use the platform
[00:59:00]
that are controversial to like artificial events
[00:59:02]
and things like that.
[00:59:03]
Synthetic?
[00:59:04]
Synthetic events, that's the word exactly.
[00:59:06]
But even so, we have a harder time finding
[00:59:11]
date picker components in Elm.
[00:59:13]
But I mean, I think a web component can be
[00:59:15]
a really good fit for this kind of thing too,
[00:59:17]
especially because you probably want it
[00:59:19]
to have internal state that you don't care about
[00:59:22]
and you don't want to wire in.
[00:59:24]
Yeah, like I was thinking the same,
[00:59:26]
like even if you rewrite it yourself
[00:59:28]
and maybe you want to do it in Elm,
[00:59:30]
then you probably want to wrap it in a web component
[00:59:34]
so that you don't have to have lots of updates cycles,
[00:59:39]
use it as a stateful component.
[00:59:42]
Right.
[00:59:43]
Yeah, and if you use it as a web component,
[00:59:46]
then you can use it just like any other HTML tag
[00:59:49]
with regular event handlers.
[00:59:52]
Exactly, exactly.
[00:59:53]
It's simpler to use it
[00:59:56]
and you can create a robust user experience.
[00:59:59]
So I think one of the biggest use the platform
[01:00:04]
kind of, I guess, things that people miss
[01:00:07]
that I think is pretty low hanging fruit
[01:00:10]
is using URLs.
[01:00:12]
How so?
[01:00:13]
If there's a window,
[01:00:15]
if there's a screen on your application
[01:00:17]
that you can get to that represents
[01:00:19]
like a meaningful resource you can view,
[01:00:23]
but the back button won't take you back and forth to it
[01:00:27]
or you can't share a link to it or bookmark it,
[01:00:32]
that's probably an opportunity to use the platform
[01:00:34]
and embrace URLs there.
[01:00:36]
I think that's pretty common
[01:00:37]
to just have that be
[01:00:38]
internal application state that you,
[01:00:41]
like even if you open a modal, that's fine.
[01:00:44]
Open a modal, you can change the URL
[01:00:46]
and then you hit the back button
[01:00:48]
and you close the modal
[01:00:49]
and like that's okay, right?
[01:00:51]
You can do that.
[01:00:52]
Yeah, I'm not sure about a modal,
[01:00:54]
but for the rest I definitely agree.
[01:00:56]
Well, let's say like it's a modal
[01:01:01]
and why shouldn't that be slash product slash new?
[01:01:04]
Oh yeah, okay, yeah.
[01:01:05]
Why not?
[01:01:06]
And then if somebody in their workflow
[01:01:09]
goes and creates products,
[01:01:10]
every morning they go and create a product,
[01:01:12]
they can create a bookmark.
[01:01:14]
Now they can go create a new product,
[01:01:15]
go straight there, why not?
[01:01:17]
I usually go to create issues in GitHub
[01:01:21]
by typing slash new.
[01:01:23]
Yep, exactly.
[01:01:24]
Right, so that's like the user convention
[01:01:29]
I think you could argue that that is potentially
[01:01:31]
going to make your Elm code cleaner
[01:01:33]
because now your model,
[01:01:35]
it's just a routing concern,
[01:01:37]
not a model concern.
[01:01:39]
We have to kind of manage this internal state,
[01:01:42]
am I viewing the new form or not?
[01:01:45]
And then you can also have
[01:01:46]
the same loading strategies,
[01:01:48]
whether the person directly went to that URL
[01:01:52]
or if they went to the different button click routes.
[01:01:57]
Right, exactly.
[01:01:58]
And if you're testing it,
[01:02:00]
you want to manually run through
[01:02:01]
and make sure it's working fine,
[01:02:03]
it's easier for you to test it.
[01:02:05]
It's just a good idea.
[01:02:07]
There's really not much downside to that.
[01:02:10]
Would you put everything in the URL?
[01:02:12]
If someone expands an accordion,
[01:02:16]
would you move it to the URL?
[01:02:17]
Like the menu,
[01:02:19]
if they toggle the mobile menu?
[01:02:21]
No, I wouldn't put that in there.
[01:02:26]
If you're on Google Flights and you filter
[01:02:30]
and you say starting date and date
[01:02:35]
and destination and all these things,
[01:02:38]
you probably want to be able to copy paste that
[01:02:42]
into a new URL so you can slightly tweak it
[01:02:45]
if you're like me and you're obsessively opening
[01:02:48]
a million tabs or you want to share that link
[01:02:53]
or you want to do the same thing.
[01:02:54]
This is what the web platform gives us.
[01:02:56]
It gives us a way to have shareable resources,
[01:02:59]
which is huge.
[01:03:01]
It's actually really hard to recreate that
[01:03:03]
in different platforms, like native platforms.
[01:03:06]
They try, but the web is very good at that
[01:03:09]
and we should embrace that.
[01:03:11]
You can also use that for like pre filling forms.
[01:03:14]
Yeah, right.
[01:03:15]
Like if you do slash new for a GitHub issue,
[01:03:20]
you can just go to the URL to set the title
[01:03:22]
or the description and a tool could give you
[01:03:27]
like a pre created URL.
[01:03:32]
You just click on it and then it's already
[01:03:34]
the name of the issue and some description.
[01:03:38]
Exactly.
[01:03:39]
Or you have like a custom search in your search bar
[01:03:43]
that goes to use a search because you can tell it
[01:03:48]
and then you can search there from your search bar
[01:03:50]
for example.
[01:03:51]
Actually, we were talking about forms earlier
[01:03:55]
and the default method for forms is get.
[01:03:58]
You can do a get or a post.
[01:04:00]
Often people will think of forms as post,
[01:04:03]
but what if you do a search?
[01:04:06]
If you by default, if you have a form,
[01:04:09]
so let's say you have like a Elm package search
[01:04:12]
that could be a form and probably should be a form
[01:04:17]
for your Elm review.
[01:04:19]
And unfortunately, you're not going to see
[01:04:21]
the Elm review package in there
[01:04:23]
because you're going to see a million Elm review packages,
[01:04:28]
not JFM, Angles, Elm review.
[01:04:31]
But putting that aside.
[01:04:33]
You can scroll.
[01:04:34]
You can scroll down.
[01:04:38]
No, even further.
[01:04:40]
Yes, no, no, even further.
[01:04:45]
You will have search functionality in your browser.
[01:04:48]
But maybe that's not the best example
[01:04:51]
because you don't necessarily want to go to a new page.
[01:04:53]
But if there was a separate search page,
[01:04:56]
not an inline search,
[01:04:58]
then the form will by default, when you hit submit,
[01:05:02]
it will add the form field as a query parameter.
[01:05:06]
Does it add them or does it replace them?
[01:05:09]
Yes, so by default, a form will submit to the current URL
[01:05:14]
and by default, the HTTP method will be get.
[01:05:18]
You can override that by saying method equals post,
[01:05:21]
but by default, it's a get.
[01:05:23]
So let's say we're on the Elm package homepage
[01:05:27]
and we wrap that input for the search in a form.
[01:05:31]
And then we say input and we give it name equals q
[01:05:36]
is a common one for query.
[01:05:41]
And if you have a query and you don't have any
[01:05:43]
on submit handlers or anything,
[01:05:45]
then what it would do is it would load the current page
[01:05:48]
with q equals whatever you had in your form field.
[01:05:52]
So it will add query parameters
[01:05:54]
for every form field that you had
[01:05:56]
and do a get to the current page
[01:05:58]
and do a full page navigation.
[01:06:00]
But does it add them to the existing query parameters
[01:06:03]
or does it replace those?
[01:06:05]
Like if you already have a query parameter for like...
[01:06:10]
That's nice.
[01:06:12]
I guess you could encode the existing parameters already.
[01:06:20]
But I think it's good to be aware of these things
[01:06:23]
and like in the case of like a package search,
[01:06:26]
I actually think that would be one really nice thing
[01:06:28]
on the Elm package search site is if it supported,
[01:06:31]
if it changed a query parameter as you typed,
[01:06:33]
that would not be that difficult for it to manage that
[01:06:38]
and share the search results with someone.
[01:06:40]
And then you could register it as a custom search engine for...
[01:06:44]
And again, using the platform, right?
[01:06:46]
What is the platform? Is it the browser?
[01:06:48]
Well, it could be the browser navigation bar
[01:06:50]
that's adding in that query parameter
[01:06:52]
or it could be Alfred or some sort of app launcher
[01:06:57]
that you do a package search
[01:06:59]
and either query the results that way
[01:07:04]
or you could load the page when you search.
[01:07:06]
But yeah, I think it's really good to be aware
[01:07:09]
of what a form does, like what a vanilla form does.
[01:07:13]
And hopefully soon we'll talk about Elm Pages 3.0
[01:07:17]
which has this sort of full stack Elm story
[01:07:20]
where now this concept of doing a form post
[01:07:25]
actually becomes more meaningful
[01:07:27]
because you can do a real form post and handle it
[01:07:32]
and then respond from the server in Elm code
[01:07:36]
to a form post
[01:07:38]
or to a get request with query parameters.
[01:07:41]
You've entirely spoiled the episode.
[01:07:43]
Or did I tease it? Stay tuned.
[01:07:47]
Yeah, so this philosophy, you know, like Remix.js
[01:07:50]
has been exploring this idea of progressive enhancement
[01:07:54]
in a really exciting way.
[01:07:55]
That's been a big inspiration for me
[01:08:00]
and I think it's really inspiring
[01:08:02]
in the ethos of the web development community these days.
[01:08:05]
And I think it is more,
[01:08:06]
people are starting to look at things more
[01:08:08]
as we're web developers, not front end developers,
[01:08:12]
JavaScript developers, Elm developers.
[01:08:14]
We're not back end developers
[01:08:16]
who can make something appear in a web browser.
[01:08:19]
Right, right.
[01:08:21]
Yeah, we have these web standards
[01:08:23]
that give us all these fun things to build with
[01:08:28]
and I think it's sort of like a whole other can of worms
[01:08:31]
that I'm sure we'll talk about a lot
[01:08:33]
when we get to Elm pages 3.0.
[01:08:35]
But I think there are a lot of benefits.
[01:08:37]
You're using the platform
[01:08:38]
and you can write simpler code.
[01:08:40]
And it's an exciting time to be a web developer, I think.
[01:08:43]
Just like back in 1998.
[01:08:45]
Was JavaScript around then?
[01:08:49]
When was JavaScript invented?
[01:08:52]
95.
[01:08:57]
How did you commit that to memory?
[01:08:59]
Just like Java.
[01:09:00]
Well, did we miss anything?
[01:09:04]
I guess there are a few things
[01:09:05]
that we didn't hit on that are on my list.
[01:09:08]
So I'm sure we'll get into this
[01:09:10]
when we talk about Elm pages 3.0,
[01:09:12]
but HTTP status codes are part of the platform.
[01:09:15]
I think you embrace those.
[01:09:17]
And I think it's always frustrating.
[01:09:20]
If you've ever consumed an API
[01:09:25]
that's running on a 200,
[01:09:27]
possibly returning HTML with some error in it,
[01:09:30]
even though you sent a header
[01:09:31]
that said content type application JSON,
[01:09:34]
and you assume that that's an okay response,
[01:09:37]
but it's obviously an error, right?
[01:09:39]
Did you say GraphQL?
[01:09:41]
Sorry.
[01:09:42]
Well, the...
[01:09:44]
I think you said GraphQL there.
[01:09:46]
I didn't say GraphQL,
[01:09:48]
but that is an interesting case there, for sure.
[01:09:53]
The GraphQL, in a way, does go around
[01:09:56]
certain web standards, you could argue, but...
[01:09:59]
Because also, it is new, in a way.
[01:10:02]
Right.
[01:10:03]
Yeah, I guess whether it will do good
[01:10:08]
will be in how well it will be adopted
[01:10:11]
by browsers later.
[01:10:14]
Yeah, and there are certain standards to it.
[01:10:17]
And if, like, you could have...
[01:10:22]
Yeah, it is an interesting question.
[01:10:24]
Is it okay to have a 200 response with errors?
[01:10:28]
You could argue if your GraphQL schema
[01:10:31]
is describing the possible error states
[01:10:33]
that you could get, and you have to handle those.
[01:10:35]
That's actually a pretty good state of the world.
[01:10:38]
And especially if it's like,
[01:10:40]
this isn't something that fatal error on the server,
[01:10:43]
this is like an expected thing that can happen,
[01:10:45]
and you get back a user, and it's null.
[01:10:50]
And it's a good state, because it's a nullable field,
[01:10:52]
we didn't find the user.
[01:10:53]
That's, I would argue, a pretty good use of web standards,
[01:10:57]
even though it's not returning a 404.
[01:11:00]
In that context, I think that's appropriate.
[01:11:02]
Yeah, you still get a few of those.
[01:11:04]
Like, you still get 400s,
[01:11:07]
or if you have a bad request,
[01:11:09]
or an invalid GraphQL request.
[01:11:12]
But there's some cases where it should return
[01:11:17]
thousands.
[01:11:18]
And to a certain extent,
[01:11:19]
it's like, use the platform well to describe what?
[01:11:23]
So in this case, the platform is telling you,
[01:11:27]
did you make a valid GraphQL request?
[01:11:29]
If you did, it's a 200.
[01:11:31]
It's a valid GraphQL request,
[01:11:33]
and I didn't find a user.
[01:11:35]
Is it a malformed request?
[01:11:37]
In the sense that this is not a valid GraphQL query.
[01:11:41]
So the server will respond and say, malformed request.
[01:11:46]
So you're using web standards just at a different level.
[01:11:49]
And I think that's appropriate.
[01:11:51]
But there are so many things
[01:11:52]
that I think can improve user experiences
[01:11:55]
and make it simpler to manage code.
[01:11:58]
I think people more and more are moving
[01:12:02]
towards using cookies to manage sessions,
[01:12:06]
because managing those types of things in JavaScript
[01:12:09]
can be really messy.
[01:12:14]
And I think that's a little bit more
[01:12:16]
and that these web standards exist.
[01:12:17]
And I think this opens up a whole new avenue
[01:12:19]
of using the platform.
[01:12:21]
Using the platform is not just about
[01:12:23]
what happens in the browser.
[01:12:25]
It's about the whole picture from request to response.
[01:12:29]
So yeah, it's an interesting time.
[01:12:32]
So are there any resources
[01:12:34]
we should leave people with before we go?
[01:12:37]
I've got a couple.
[01:12:42]
I should mention that, yeah.
[01:12:44]
I think...
[01:12:45]
Mozilla Developer Network,
[01:12:48]
great websites for any kind of information
[01:12:51]
about the web standards.
[01:12:53]
Really well done.
[01:12:54]
Yes, it's amazing.
[01:12:57]
And it's really good at providing
[01:12:59]
the relevant information,
[01:13:00]
not just bombarding you with every single detail,
[01:13:04]
but giving you little details
[01:13:09]
that are going to a particular page.
[01:13:11]
So yeah, look at the MDM docs for forms,
[01:13:16]
form submissions, inputs,
[01:13:18]
HTTP status codes, links.
[01:13:21]
Look at these things.
[01:13:23]
It's really interesting.
[01:13:24]
And the more you're looking at that,
[01:13:27]
that's a good sign that you're probably
[01:13:29]
doing a pretty good job using the platform, I think.
[01:13:31]
It's going to make you better at leveraging that.
[01:13:36]
A link should do this
[01:13:38]
when you click it with a middle click,
[01:13:41]
or it should show something when you do this.
[01:13:45]
I don't know if it...
[01:13:46]
That's a good question.
[01:13:48]
I'm not sure.
[01:13:49]
So on a related note,
[01:13:50]
there's a page that I find really amusing.
[01:13:54]
It's actually quite informative.
[01:13:56]
It's html.dev,
[01:13:59]
and it actually does a really good job
[01:14:04]
of showing what should a link do when you click it.
[01:14:08]
It shows examples of divs
[01:14:12]
that should be anchor tags and things like that.
[01:14:15]
And it walks through,
[01:14:17]
why is that a problem for screen reader users,
[01:14:20]
for keyboard users, that sort of thing.
[01:14:22]
It's really neat.
[01:14:24]
So that's worth perusing.
[01:14:26]
I'll also leave a link
[01:14:27]
to some voiceover resource
[01:14:32]
for getting your bearings
[01:14:33]
of what screen reader users see.
[01:14:35]
Yeah, and I also wrote a short post
[01:14:37]
about use the platform.
[01:14:39]
It's in my digital garden.
[01:14:40]
I'll probably keep it updated from time to time
[01:14:43]
with my latest thoughts on the topic.
[01:14:46]
All right.
[01:14:47]
Well, I think we've covered the platform
[01:14:50]
pretty well for now.
[01:14:52]
Yep, I hope that even though
[01:14:54]
this wasn't much Elm,
[01:14:56]
it will improve your Elm code.
[01:15:01]
We're going to get some state
[01:15:03]
out of your Elm code
[01:15:04]
and into the platform.
[01:15:06]
Absolutely.
[01:15:07]
All right, well, Jeroen,
[01:15:09]
until next time.
[01:15:10]
Until next time.
[01:15:15]
.