* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
10 KiB
title | description | author | authorURL |
---|---|---|---|
What's new in Svelte: May 2023 | New Ambassadors, a new ESLint plugin and a whole bunch of SvelteHack submissions | Dani Sandoval | https://dreamindani.com |
Before we dive into the updates, there's a few announcements worth mentioning at the top:
New Svelte Ambassadors
Regular features of this newsletter and all-around great content creators for Svelte JoyOfCode and HuntaByte have been appointed as Svelte Ambassadors. Ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement!
SvelteHack winners will be announced May 6th
In a just a few days, we'll find out who won SvelteHack - the Svelte Hackathon that took place between February 17th and April 17th. Tune in to Svelte Summit on May 6th to see if your favorite project was chosen 👀
Lots of submissions to the hackathon are featured in this month's showcase... but first, let's see what's new!
What's new in Svelte
style
blocks now support CSS@container
queries (3.58.0)bind:innerText
is now available forcontenteditable
elements (3.58.0)- A new accessability warning,
a11y-interactive-supports-focus
will now warn when interactive elements are not focusable (3.58.0)
For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.
What's new in SvelteKit
- When hot module reloading (HMR) is enabled, the page will reload after an error is fixed (1.14.0, #9497)
- Two apps loaded into the same html page can now be loaded simultaneously in "embedded" mode (1.15.7, #9610)
- Vite's compilation will now log warnings for packages that use the
svelte
field to resolve Svelte files differently than standard Vite resolve (vite-plugin-svelte@2.1.0, kit@1.15.8)
What's new in Language Tools
- Support for
<svelte:document>
(#1958) and intellisense report for new bindings (#1957) (107.3.0) - The new fix-all menu option for the "Quick fix..." makes it easy to "Add all missing imports" and other detected errors (107.3.0, #1939)
- We have a new and better official ESLint plugin! Previous support for Svelte in ESLint did not handle the template AST well, resulting in false positive/negatives and a high barrier to custom ESLint rules. This new official version is based on ota-meshi's svelte-eslint-parser and is ready for prime time. Try it out and share your feedback!
Community Showcase
Apps & Sites built with Svelte
- Sound of War is a storytelling data visualization project to help understand the scale of destruction in Ukraine
- Syntax FM's swag shop is now built with SvelteKit, PlanetScale and Prisma
- Appreciation Jar is your own private space where you can send encouraging and appreciative messages to your partner
- Japanese Jouzu is a Japanese sound and symbol learning app
- MarkMyImages is a tool to bulk watermark, image resize, rename, effects, and more - all on-device for speed and privacy
- Immich is a self-hosted photo and video backup solution directly from your mobile phone
- Earbetter is an ear training game and tools for playing and programming music and audio
- Tune Twisters is a guessing game for songs... in reverse
- ResponseHunt is a mystery game based on browser requests - use your programming skills to get to the “golden” response
- Wolfensvelte 3D is a Svelte "port" of Wolfenstein 3D
- Code Solving teaches how to solve problems with code
- Make Bookmarklets is a quick way to create JavaScript bookmarklets with linting, intellisense and auto-minification
- GeniePM is an AI tool to help Product Managers write user stories and requirements
- Bitesized News is an AI that delivers news digests and responds to questions via chat
- Open Tunings is a place to explore alternative guitar tunings without having to retune your guitar
- BlinkSMS is a text alert tool for Stockholm Student Housing to help with booking laundry times
- Dev Links helps dev showcase multiple links in a single place - similar to Linktree and Kofi
- Audiogest is a tool to convert speech to text & summarize any audio
- MineSweep is a rendition of Minesweeper built with Svelte and JavaScript
- Biolytics lets you import your lab tests to see all your lab tests in one place
- Zero share is a secure P2P file sharing using WebRTC
- Svelte lab is a sandbox for creating and sharing SvelteKit projects
Learning Resources
Featuring Svelte Contributors and Ambassadors
- Dev Vlog: April 2023 - TypeScript vs JSDoc, Transitions API, Dominic Gannaway joins Svelte team
- Rich Harris on frameworks, the web, and the edge. from Vercel's Svelte Meetup in NYC
- Svelte & SvelteKit taught by Rich Harris on Frontend Masters
- This Week in Svelte:
- 2023 March 31 - SvelteKit, Svelte; static sites and headless CMS demos
- 2023 April 22 - SvelteKit 1.15.7, skip links, error handling, static assets
- 2023 April 14 - SvelteKit 1.15.5, accessible buttons, advanced toggle state 🧪🔥
- 2023 April 21 - SvelteKit 1.15.7, skip links, error handling, static assets
- Svelte Radio
To Watch
- The Complete SvelteKit Course For Building Modern Web Apps and Simple SvelteKit Page Transitions by Joy of Code
- Svelte For React Developers | Your Next JavaScript Framework? by Cretezy
- Svelte & SvelteKit: The Complete Guide by Ali Alaa on Udemy
- ChatGPT-4 with SvelteKit 🤖 Generative AI on the EDGE 🌍 by Johnny Magrippis
To Read
- Headless WordPress with GraphQL and SvelteKit and How to fix the duplicate meta tags issue in SvelteKit by Justin Ahinon
- How to setup tRPC in a SvelteKit project by Raqueebuddin Aziz
- Better Data Visualizations with Svelte by newline
- Offline App with SvelteKit + SQLite Part 1: Setup WebAssembly SQLite by hartenfellerdev
Libraries, Tools & Components
- Sveltris lets you intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing
- SwiftMarket is an E-Commerce solution built with SvelteKit, Pocketbase as a database and Stripe for payments
- Svelegante is a Classy writable store for Svelte
- Table Generator lets you create, design and customize your own tables tables online using a graphical editor
- Svelte Animated Headline is an animated headline component that can grab attention in an informative way
- SvelteKit Music App Example demonstrates how to connect and process data as well as some practical examples of how to develop frontend components with TailwindCSS
- Socio is a WebSocket Real-Time Communication (RTC) API framework to connect your front-end logic to a back-end database reactively
- Flowbite Svelte is an official Flowbite component library for Svelte
- Wundergraph, a backend for frontend framework, just released their Svelte Query client
- Lucia just reached 1.0 for their simple and flexible auth library for SvelteKit
- svelte-stepper is a simple library for building animated stepper flows with Svelte
As always, feel free to let us know if we missed anything on Reddit or Discord.
See ya next time!