Day 6 — we now have modern state-based Spring and Tween classes for adding motion to your UI, replacing the `spring`/`tweened` stores of old. Smooth! 🎁 tutorial svelte.dev/tutorial/sve... 🎁 docs svelte.dev/docs/svelte/... 🎁 demo svelte.dev/playground/8... - ThreadSky

svelte.dev • 195 days ago

Day 6 — we now have modern state-based Spring and Tween classes for adding motion to your UI, replacing the `spring`/`tweened` stores of old. Smooth!

🎁 tutorial https://svelte.dev/tutorial/svelte/tweens
🎁 docs https://svelte.dev/docs/svelte/svelte-motion
🎁 demo https://svelte.dev/playground/8a021b2ec2064230bde4a10b08464876?version=5.8.0

Comments

lambdahass.bsky.social•195 days ago

Sliiiiiiiiiiick.

americanyak.bsky.social•195 days ago

svelte.dev•194 days ago

Day 7 — the first of a few planned improvements to the site. A lot of you (rightly!) disliked the tutorial dropdown navigation, so we fixed it. You can even navigate the tutorial with JS disabled, if you're so inclined

🎁 https://svelte.dev/tutorial

deerco.de•193 days ago

🙌

andokai.dev•194 days ago

Slight issue in Safari

lolouthefox.bsky.social•193 days ago

Why is safari always the one that doesn't render like the others 🥲

rchaoz.bsky.social•194 days ago

Not sure if intended, but you didn't update the blog page with day 7 - https://svelte.dev/blog/advent-of-svelte

stevealee.bsky.social•193 days ago

7 and 8 there now

samalrasmussen.bsky.social•194 days ago

Oh I'm relieved. I was worried you guys thought that native selector with a huge list was a good solution.

svelte.dev•193 days ago

Day 8 — we're calling this 'function bindings'. You know how you can do `bind:value={value}`? You can now do this...

bind:value={getValue, setValue}

...which lets you transform and validate data

🎁 docs https://svelte.dev/docs/svelte/bind#Function-bindings
🎁 demo https://svelte.dev/playground/1ddd82f573b94201b3c8fcab33bf0a46?version=5.9.0

ray-thurn-void.bsky.social•193 days ago

This and error boundaries are huge improvements to svelte, thanks!

paulosantosvieira.bsky.social•192 days ago

1/2 Huge new feature! But this definitely need more examples and clarification. For instance, it's not clear where the transformation/validation should be (it seems it can be in either "set" or "get", no?). It reminds of getters and setters in POJO, but the semantics seem to be different.

paulosantosvieira.bsky.social•192 days ago

2/2 I set up a simpler example in the playground with a text input, if anyone wants to play with it. And I'm still a bit confused... https://svelte.dev/playground/d6cbf0e915874c6c99c01b79c55dfc5e?version=5.9.0

paolo.ricciuti.me•192 days ago

Put very simply: svelte will call your get function when needs to read the value for that binding and will call your set function when needs to set the value of that binding. Does this help clarify it?

paulosantosvieira.bsky.social•192 days ago

1/2 That helps, thanks. It also helped to see the source of `$.bind_value`. What should be clarified are the use cases, in particular for "get".

Should "get" be used only for validation? Or is it ok to change its return value?

Should any mutation/coercion be done only in "set"?

stevealee.bsky.social•193 days ago

This is great but was not clear which "side" the get and set are with respect to; the attribute/property or the variable. Only the readonly example with no getter made it known.

stevealee.bsky.social•192 days ago

Should have said the example helps nail it!

chepulis.bsky.social•193 days ago

The example is white-on-white when in dark mode (Safari).

hanson190505.bsky.social•176 days ago

这非常酷

ryanatkn.com•193 days ago

lovely feature, and a great example of the design restraint that serves Svelte so well, in addressing this issue with extra power and elegant syntax - https://github.com/sveltejs/svelte/issues/3937

get/set continues to chalk up wins

samalrasmussen.bsky.social•193 days ago

I have wanted this for years! 🎉

svelte.dev•192 days ago

Day 9 — warnings and errors emitted by the compiler, or while your app is running, are now accompanied by links to the docs. Over time, we'll flesh out these docs with more details about what caused the error in question

🎁 demo https://svelte.dev/playground/8095884c1f5040ea846669b904083e25?version=5.10.0

svelte.dev•191 days ago

Day 10 — a lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an `init` function from `hooks.server.js` and `hooks.client.js` that will be awaited before any other stuff happens

🎁 docs https://svelte.dev/docs/kit/hooks#Shared-hooks-init

aubergene.com•191 days ago

ooh love this, thought I couldn't find it before, checks src, merged 2 hours ago!

jyc.dev•191 days ago

Hoooo, I know where I would use this ☺️

heygwangjin.com•191 days ago

Where we can use this?!

svelte.dev•190 days ago

Day 11 — a whole new module, for getting reactive views of window properties like innerWidth, innerHeight, scrollX, scrollY and so on. Like the bindings on but with less boilerplate

🎁 docs https://svelte.dev/docs/svelte/svelte-reactivity-window
🎁 demo https://svelte.dev/playground/8ac86e10fdce485a99c29c95e0092df4?version=5.11.0

dyviknilsen.no•179 days ago

Does Svelte have a way of getting innerHeight, *ignoring* whether the address bar is visible or not in mobile browsers?

Yknow, the way svh and lvh should work. Except they don't in Firefox and many built-in browsers. Mayday!

(Context: https://github.com/mozilla-mobile/firefox-ios/issues/11574#issuecomment-2146095621)

@svelte.dev @rich-harris.dev

svelte.dev•189 days ago

Day 12 — send custom types across the network boundary in SvelteKit, whether it's a class containing reactive state, a class used by your database ORM library, or whatever. Just export a `transport` object from your `hooks.js`

🎁 docs https://svelte.dev/docs/kit/hooks#Universal-hooks-transport
🎁 demo https://stackblitz.com/edit/sveltejs-kit-template-default-b5zbxomg?file=src%2Fhooks.js

richperez.dev•190 days ago

👏🏽 This is awesome 👏🏽

tilo.one•191 days ago

Now we need a `+loading.svelte` file to show a loading spinner 😬.

The same would be nice for `+page.js` and `+layout.ts` load functions.

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply