Day 5 — it's a three-in-one kind of day! `new MediaQuery(...)` lets you use media queries reactively. prefersReducedMotion is an instance of MediaQuery that makes it easier to respect users' accessibility preferences - docs svelte.dev/docs/svelte/... - demo svelte.dev/playground/8... there's more! - ThreadSky

svelte.dev • 202 days ago

Day 5 — it's a three-in-one kind of day! `new MediaQuery(...)` lets you use media queries reactively. prefersReducedMotion is an instance of MediaQuery that makes it easier to respect users' accessibility preferences

- docs https://svelte.dev/docs/svelte/svelte-motion#prefersReducedMotion
- demo https://svelte.dev/playground/89f6f3bb738149fcb6e708cfce878e0f?version=5.7.0

there's more!

Comments

bletch.social•201 days ago

📌

svelte.dev•202 days ago

Day 5, part two — the MediaQuery stuff is powered by createSubscriber, which is an advanced feature mainly for library authors. It makes it easy for you to build your own reactive classes that set up event listeners when something is read inside an effect.

- docs https://svelte.dev/docs/svelte/svelte-reactivity#createSubscriber

rchaoz.bsky.social•200 days ago

I really like the new createSubscriber API! Although I'm curious, what really is the difference between using this new API and simply having a state field that is set whenever an onchange event of the media query is received?

svelte.dev•201 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

lambdahass.bsky.social•201 days ago

Sliiiiiiiiiiick.

americanyak.bsky.social•201 days ago

svelte.dev•200 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•199 days ago

🙌

andokai.dev•200 days ago

Slight issue in Safari

lolouthefox.bsky.social•198 days ago

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

rchaoz.bsky.social•200 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•199 days ago

7 and 8 there now

samalrasmussen.bsky.social•200 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•199 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•198 days ago

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

paulosantosvieira.bsky.social•198 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•198 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

stevealee.bsky.social•198 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•198 days ago

Should have said the example helps nail it!

chepulis.bsky.social•198 days ago

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

hanson190505.bsky.social•181 days ago

这非常酷

ryanatkn.com•198 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•199 days ago

I have wanted this for years! 🎉

svelte.dev•198 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•197 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

Posting Rules

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

Comments

Posting Rules

Reply