Progressive Enhancement

[00:00:00]
>> Now, as we saw because we're using the form element, this app continues to work even if the user doesn't have JavaScript for some reason. And a page that I often link people to is this one, which describes all the ways in which JavaScript can fail when someone is trying to use your web app.

[00:00:17]
It's quite a long list. I live in New York City, I take the subway a lot. We do not have signal on the subway, and so very often I'll start loading something while I'm at the subway station, I'll disappear into the tunnel, and then the rest of the content fails to load.

[00:00:32]
And so JavaScript fails to kick in, and I'm left with a broken application. And it doesn't need to be this way, we can build things in such a way that they are resilient to those sorts of conditions. Of course, most of the time users do have JavaScript, and when JavaScript is available, we can use it to provide a better user experience than is possible without JavaScript.

[00:00:51]
This is called progressive enhancement, and in SvelteKit we can progressively enhance forms using an element action which we learned about in the Svelte workshop. First thing we're gonna do is import { enhance } from '$app/forms';. And then down on the form itself, we're just gonna add the use:enhance directive.

[00:01:26]
Add it there. And then the same thing on the other form that deletes the todo. Other than that, everything is gonna behave the same. So now if we add a todo, get some lunch. It's gonna look exactly the same because this is a local development server, so the server round trip was already fast before, but now we're rendering this without reloading the page at all.

[00:02:00]
But now that we're doing that, we can start to get a little bit fancy. We can start to use things like transitions to make the UI a little bit nicer, and in our case to make what's happening a bit more visible. And we begin by importing {fly, slide} from 'svelte/transition';.

[00:02:24]
And on the list item, where we're rendering each todo. We're gonna add a fly transition when the list item comes in. Give it a y value of 20, so that it flies in for 20 pixels when you create it. And when it vanishes, we'll slide it out. So now, if I add a new todo, You can see that it transitions in nicely.

[00:02:57]
If I delete one of these todos, you'll see that it slides out. And that's obviously something that you can't do if you don't have JavaScript on the page and you're relying on the full page reload.
>> How was the delete icon displayed? Are you importing an svg?
>> Yeah, so the delete icon that you can see on the right-hand side of these todos, that's just an svg that's in the same directory, remove.svg.

[00:03:25]
On the button, we have some CSS which is being added all the way down here, just has a background which is referencing that svg. And the fact that we're able to do url(./remove.svg) and it renders is because Vite is resolving that against the current module. When the application is built, it will take that file, hash it, put it in an assets directory, and give it an immutable file name so that it can be cached forever and it gets optimized and everything, and you don't have to worry about it.

[00:04:08]
All you need to do is import the svg from the local directory, so this is a nice way to do this kind of design. And you could also put the remove.svg in your lib folder and reference it like that, that would also work. Yeah, that's the kind of nice thing that we get by building on top of Vite.