Discover and read the best of Twitter Threads about #await
Most recents (6)
If you have a promise waiting for your data, {#await} block makes it easy to express your content in the loading π, resolved β
and rejected β state
So, let's talk about the {#await} block in @sveltejs
ππ§΅[THREAD]
So, let's talk about the {#await} block in @sveltejs
ππ§΅[THREAD]
Here's the general structure for the {#await} block
π {#await}
β {:then}
β {:catch}
π {/await}
[1/4]
π {#await}
β {:then}
β {:catch}
π {/await}
[1/4]
All the states are optional, so you could have
π no loading state
π no resolved state
π no rejected state
[2/4]
π no loading state
π no resolved state
π no rejected state
[2/4]
HTML doesn't have a way of expressing logic, like conditionals and loops. @sveltejs does.
Let's take a look at the 1st logic block in @sveltejs, π {#if} π
π𧡠[THREAD]
Let's take a look at the 1st logic block in @sveltejs, π {#if} π
π𧡠[THREAD]
If you prefer watching video, the following thread is a summary from my @YouTube video
I have a couple of new gotchas for people doing Svelte:
1. fade:out, or almost any "out" transition effect is death. Avoid at all costs.
2. {#await} on a promise is great, but if you update the promise it reloads the *entire* DOM at that point. Put it into a component.
1. fade:out, or almost any "out" transition effect is death. Avoid at all costs.
2. {#await} on a promise is great, but if you update the promise it reloads the *entire* DOM at that point. Put it into a component.
For #1, the demo involves this fade:out on the Spinner I use to show the video is loading. Seems harmless *until* you want to transition to an entire new page/component, say with svelte-spa-router.
You can see it happen here. I click the link for a related video, and you can see the current video has to "fade out", preventing that page from leaving the DOM, so it looks like both pages load at the same time. I'm at a point now where I don't use *any* out transitions.
Fetch a random Star Wars character data using @sveltejs demo
Features:
- Fits in a tweet
- Handles loading state using the #await block
- Renders a _beautifully_ formatted JSON
Code in the next tweet π
Features:
- Fits in a tweet
- Handles loading state using the #await block
- Renders a _beautifully_ formatted JSON
Code in the next tweet π
<script>
async function sw() {
let r = await fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 9) + 1}/`
);
return await r.json();
}
let p = sw();
</script>
{#await p}<p>Loading...</p>{:then char}<pre>{JSON.stringify(char, null, 2)}</pre>{/await}
async function sw() {
let r = await fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 9) + 1}/`
);
return await r.json();
}
let p = sw();
</script>
{#await p}<p>Loading...</p>{:then char}<pre>{JSON.stringify(char, null, 2)}</pre>{/await}
Always wanted to check out @sveltejs (aka. "the next big thing in web dev") but never got time for it? β°
π₯ I've got a 10-tweet crash course for you! π
(Spoiler alert: Svelte is so intuitive and easy to use that you may feel like you already know it! π₯³)
#javascript #svelte
π₯ I've got a 10-tweet crash course for you! π
(Spoiler alert: Svelte is so intuitive and easy to use that you may feel like you already know it! π₯³)
#javascript #svelte
1/10
How Svelte works:
- Compiler: Doesn't ship a Svelte "library" to users, but build-time optimized plain JS
- Components: App is made up of composable UI elements
- Reactive: Event/User interaction triggers chain of state changes, autoupdating components throughout entire app
How Svelte works:
- Compiler: Doesn't ship a Svelte "library" to users, but build-time optimized plain JS
- Components: App is made up of composable UI elements
- Reactive: Event/User interaction triggers chain of state changes, autoupdating components throughout entire app
2/10
UI is a component tree. A component defines how your app should interpret some abstract "state" values, so that it can turn them into DOM elements in your browser, and ultimately pixels on your screen.
UI is a component tree. A component defines how your app should interpret some abstract "state" values, so that it can turn them into DOM elements in your browser, and ultimately pixels on your screen.
Get a Star Wars character with @sveltejs
<script>
function sw() {
return fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 10) + 1}`
).then(r => r.json());
}
</script>
{#await sw()}
<p>wait</p>
{:then c}
<p>{c.name}</p>
{/await}
<script>
function sw() {
return fetch(
`swapi.co/api/people/${Math.ceil(Math.random() * 10) + 1}`
).then(r => r.json());
}
</script>
{#await sw()}
<p>wait</p>
{:then c}
<p>{c.name}</p>
{/await}
If you'd like to learn how this works, I've just published an @eggheadio lesson which is FREE for the next couple of days! π
It's only 80 seconds and you can add "await block in @sveltejs" to your LinkedIn π₯³
egghead.io/lessons/svelteβ¦
It's only 80 seconds and you can add "await block in @sveltejs" to your LinkedIn π₯³
egghead.io/lessons/svelteβ¦
