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.
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.
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.
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.
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.
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';.
And on the list item, 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.
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 the svg.
On the bottom, 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 Svelte 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.
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 removed 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 the,