What's new in Svelte: September 1, 2020

Accessibility features, better bindings, a new static site generator and some awesome decentralized apps!

New features

1. The A11y linter will now warn you if you have a label tag that does not wrap an input element OR doesn’t have an htmlFor attribute to associate it with an input (3.24.1, More Info)

2. The A11y linter will now warn you if media (e.g. audio or video) does not have captions associated with it (3.24.1, More Info)

Want to help with Svelte Accessibility? Check out this good first issue to get started!

Impactful bug fixes

1. A fix to duplicate invalidation between some two-way component bindings resolves the cause of some infinite loops and unexpected behavior (3.24.1, Example)

2. Transitions are now triggered as expected for contents of {#each}{:else} blocks (3.23.1, Before | After)

Coming up

• Bugfixes and new typings seems to be coming down the pipe. If you’re interested in helping, check out feature:typescript or triage:good first issue, if you’re new to Svelte development.

See the Roadmap for more details. And the CHANGELOG for a full list of features and bugfixes.

---

Svelte showcase

• A new tutorial on the MDN web docs explains the ins and outs of the Svelte framework. Sitting next to React, Ember and Vue, this tutorial looks to be a great way to introduce Svelte to a new audience. Since MDN is a wiki, contributions are welcome!

• Elder.js is an opinionated (and fast!) static site generator and web framework built with SEO in mind. It supports SSR, Static Site Generation and custom plugins!

• QCard lets you share your contact information with a simple QR code. Give someone your phone number, email and a link to your website that they can scan and even download on their own device… all without sharing your data with any third parties.

• Hymn Sheet is a hymn sheet / lyrics controller that lets an unlimited number of people sing together in a group - seeing the same verse at the same time. It uses Svelte, QR Codes and IPFS. This video explains it better than I can.

• Renderless Svelte is a bring-your-own styling component library whose goal is to encapsulate common behavior so you don’t have to implement your own Carousel, Modal, Notifications, Tabs or Tooltips.

• svelte-tags-input is an easy to customize input component for the common UX treatment of tags (or, as Material calls them, “chips”).

For more amazing Svelte projects, check out the Svelte Community showcase, Reddit and Discord… and be sure to post your own!

See you next month!

That’s all for this month’s excursion into the latest in Svelte… If there’s someone who you think might like this newsletter, feel free to forward this to them - with a note on what you enjoyed most 🎉

Is there something you’d like to see that I didn’t cover? Want to add your own site to the Showcase? Send me a message!

Until next time,
Dani