From fce4c5ddc6e4cda32db44c9e3fcfb5814ebc4941 Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Sun, 22 Jan 2023 20:29:16 -0700 Subject: [PATCH 1/3] first draft of feb --- ...02-01-whats-new-in-svelte-february-2023.md | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md diff --git a/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md b/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md new file mode 100644 index 00000000..9990bbe7 --- /dev/null +++ b/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md @@ -0,0 +1,88 @@ +--- +title: "What's new in Svelte: February 2023" +description: "Minor versions and major satisfaction" +author: Dani Sandoval +authorURL: https://dreamindani.com +--- + +Since last month, we've seen a couple of minor versions across Svelte and SvelteKit, a bunch of educational content to support the 1.0 release, as well as the [State of JS survey](https://stateofjs.com) results... + +Svelte, once again, increased in satisfaction and interest, so thanks to everyone who voted! + +Let's dive into the updates... + +## What's new in SvelteKit +- The submitter's value will now be included automatically when progressively enhancing
(**1.0.3**, [#8273](https://github.com/sveltejs/kit/pull/8273)) +- Added an error in dev mode if global fetch is used with relative URL (**1.0.8**, [#8370](https://github.com/sveltejs/kit/pull/8370)) +- A warning will now indicated that hydration may break if comments are removed from HTML (**1.0.11**, [#8423](https://github.com/sveltejs/kit/pull/8423)) +- A warning will occur when of page options are used in `.svelte` files or a missing `` in layout is detected (**1.1.0**, [#8475](https://github.com/sveltejs/kit/pull/8475)) +- The new `text(...)` helper makes it easy to generate text responses (**1.2.0**, [#8371](https://github.com/sveltejs/kit/pull/8371)) +- The public env can now be accessed within app.html (**1.2.0**, [Docs](https://kit.svelte.dev/docs/project-structure#project-files-src), [#8449](https://github.com/sveltejs/kit/pull/8449)) +- An error will now be thrown if cookie exceeds size limit (**1.2.1**, [#8591](https://github.com/sveltejs/kit/pull/8591)) + + +## What's new in Svelte and Language Tools +- Added support for `html.customData` from VS Code html language service (**extensions-107.0.0**, [#1824](https://github.com/sveltejs/language-tools/pull/1824)) +- Improve detection of promises that are also functions (**Svelte 3.55.1**, [#8162](https://github.com/sveltejs/svelte/pull/8162)) +- Add missing types and properties for the global `part` attribute and `on:submit`, respectively (**Svelte 3.55.1**, [#8181](https://github.com/sveltejs/svelte/issues/8181)) +- Lots of performance and bug fixes (**Svelte 3.55.1***) + +*for all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md). + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** +- [Titowest.com](https://titowest.com/) is a series of photographic films by the writer & photographer, Tito West +- [Verve](https://github.com/ParthJadhav/verve) is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents +- [Round The World](https://rtw.voyage/) is an interactive guide to the travels of Andrew Carnegie +- [Linear Regression](https://mlu-explain.github.io/linear-regression/) is an interactive blog post visual introduction to (almost) everything you should know about linear regression +- [Flotes](https://flotes.app/) is a free note taking app enhanced with flashcard features. +- [nocode.gallery](https://nocode.gallery/) is a collection of stunning websites made with no code +- [Whom to Follow](https://whomtofollow.com/) helps you find accounts you'll love by searching the network of accounts you already follow +- [Pixelicious](https://www.pixelicious.xyz/) converts your images into pixel art +- [Apple Music](https://music.apple.com/us/browse) is now built with Svelte ([proof](https://twitter.com/BrittneyPostma/status/1615381017300271104)) + +**Learning Resources** + +_Featuring Svelte Contributors and Ambassadors_ +- [SvelteKit | Rich Harris | ViteConf 2022](https://www.youtube.com/watch?v=-OMPfr56kXI) +- [Talking Gradio and AI with pngwn 🐧](https://www.svelteradio.com/episodes/gradio-with-pngwn) from Svelte Radio +- [Progressively enhancing the Marvel By Year filter](https://geoffrich.net/posts/marvel-filter-state/) by Geoff Rich +- [EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪](https://bookmarkbeat.substack.com/p/contributing-more-to-open-source) by Dani Sandoval + +_To Watch_ +- [I built a $5 chat app with Pocketbase & Svelte. Will it scale?](https://www.youtube.com/watch?v=gUYBFDPZ5qk) by Fireship +- [The Comprehensive Introduction To SvelteKit](https://www.youtube.com/watch?v=obmiLi3bhkQ), [What Svelte UI Library Should You Use?](https://www.youtube.com/watch?v=O0mNU0maItY) and [Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes)](https://www.youtube.com/watch?v=7hXHbGj6iE0) by Joy of Code +- [Progressive Enhancement in SvelteKit (use:enhance)](https://www.youtube.com/watch?v=jXtzWMhdI2U), [Are Your Routes Actually Protected?](https://www.youtube.com/watch?v=UbhhJWV3bmI) and [10X Your SvelteKit Developer Experience in VSCode](https://www.youtube.com/watch?v=13v50nLh67Q) by Huntabyte +- [The easiest realtime app I’ve ever built](https://www.youtube.com/watch?v=UbOaAtHWidc) by Beyond Fireship +- [Angular developers can learn Svelte so fast...](https://www.youtube.com/watch?v=lKdw_z9qmPU) by Joshua Morony + + +_To Read_ +- [State Modeling in Svelte with XState](https://github.com/annaghi/xstate-svelte-workshop) is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit! +- [🚀 Code your SvelteKit website faster with Stylify CSS](https://stylifycss.com/blog/code-your-sveltekit-website-faster-with-stylify-css/) by Stylify CSS +- [How to make declarative (code-based) router instead of file-based router in SvelteKit](https://dev.to/devpunk/how-to-make-declarativecode-based-router-instead-of-file-based-router-in-sveltekit-2-3dd4) by Dev Punk +- [How to import tailwindcss custom config in JS/TS parts of a SvelteKit app](https://gist.github.com/0gust1/aa8c8b831428cdd7a5535e92cbf02f04) by 0gust1 +- [SvelteKit Internals: Load function](https://www.okupter.com/blog/sveltekit-internals-load-function) by Justin Ahinon +- [Internationalization Formatting with Intl + SSR + SvelteKit](https://www.captaincodeman.com/internationalization-formatting-with-intl-ssr-sveltekit) by Captain Codeman +- [Typesafe i18n with SvelteKit](https://blog.encodeart.dev/typesafe-i18n-with-sveltekit) by Andreas Söderlund +- [Authorization in your SvelteKit app](https://cerbos.dev/blog/authorization-in-your-sveltekit-app) by Adam Barrett +- [Validate your form using Sveltekit, Tailwindcss, Felte and Yup](https://medium.com/@Heesel/validate-your-form-using-sveltekit-tailwindcss-felte-and-yup-ddc11cd04717) by Hessel +- [Smooth Page Transitions with SvelteKit](https://philkruft.dev/blog/smooth-page-transitions-with-sveltekit/) by Phil Kruft +- [Redis Integration in SvelteKit: A Game-Changer for Session Management](https://dev.to/theether0/redis-integration-in-sveltekit-a-game-changer-for-session-management-84i) by Shivam Meena +- [Svelte Stores Tutorial: Share Data Between Multiple Components](https://learnjavascripts.com/development/web-development/frameworks/svelte/svelte-stores-tutorial-share-data-between-multiple-components/) by Vincent Widerberg + + +**Libraries, Tools & Components** +- [Sveltepress](https://sveltepress.site/) is a simple, easy to use, content centered site build tool with the full power of SvelteKit +- [Svelte Form Helper](https://www.npmjs.com/package/svelte-form-helper) is a lightweight helper for form validation with Svelte +- [Dapper UI](https://github.com/Bastian/dapper-ui) is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation +- [Neodrag](https://www.neodrag.dev/) is an SSR-friendly, multi-framework draggable library +- [Svelvet](https://www.svelvet.io/), a UI library for Svelte, is now 5.0 (read more [here](https://medium.com/@efergus1/svelvet-5-0-a-community-driven-update-cfcc93e7b7a7)) +- [Svelte Inview](https://github.com/maciekgrzybek/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element +- [html2svelte](https://github.com/drbh/html2svelte) makes it easy to convert HTML to Svelte components in a snap + + +Thanks for reading! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte) From fbdb3bc6a545d132d55ee056ad06421b907782ea Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Mon, 30 Jan 2023 16:19:13 -0700 Subject: [PATCH 2/3] Add note at the top of SvelteKit Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .../content/blog/2023-02-01-whats-new-in-svelte-february-2023.md | 1 + 1 file changed, 1 insertion(+) diff --git a/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md b/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md index 9990bbe7..196920b4 100644 --- a/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md +++ b/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md @@ -12,6 +12,7 @@ Svelte, once again, increased in satisfaction and interest, so thanks to everyon Let's dive into the updates... ## What's new in SvelteKit +Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes and addressing feedback from the 1.0 launch. One of the more awaited [bug fixes to SvelteKit's base path support](https://github.com/sveltejs/kit/issues/2958) landed, which means that you can now create SvelteKit projects on remote development environments. There have been several [new releases](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) with these fixes as well as a handful of new features such as: - The submitter's value will now be included automatically when progressively enhancing (**1.0.3**, [#8273](https://github.com/sveltejs/kit/pull/8273)) - Added an error in dev mode if global fetch is used with relative URL (**1.0.8**, [#8370](https://github.com/sveltejs/kit/pull/8370)) - A warning will now indicated that hydration may break if comments are removed from HTML (**1.0.11**, [#8423](https://github.com/sveltejs/kit/pull/8423)) From 152fe292c5be62b4d6c18c131764fd9a74cc0da2 Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Mon, 30 Jan 2023 16:43:57 -0700 Subject: [PATCH 3/3] Added more showcase items and a couple of extension features I missed --- ...02-01-whats-new-in-svelte-february-2023.md | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md b/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md index 196920b4..668e896f 100644 --- a/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md +++ b/sites/svelte.dev/content/blog/2023-02-01-whats-new-in-svelte-february-2023.md @@ -20,13 +20,15 @@ Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes - The new `text(...)` helper makes it easy to generate text responses (**1.2.0**, [#8371](https://github.com/sveltejs/kit/pull/8371)) - The public env can now be accessed within app.html (**1.2.0**, [Docs](https://kit.svelte.dev/docs/project-structure#project-files-src), [#8449](https://github.com/sveltejs/kit/pull/8449)) - An error will now be thrown if cookie exceeds size limit (**1.2.1**, [#8591](https://github.com/sveltejs/kit/pull/8591)) +- The generated `tsconfig` can now be modified (**1.3.0**, [#8606](https://github.com/sveltejs/kit/pull/8606)) ## What's new in Svelte and Language Tools -- Added support for `html.customData` from VS Code html language service (**extensions-107.0.0**, [#1824](https://github.com/sveltejs/language-tools/pull/1824)) +- Added support for `html.customData` from the VS Code HTML language service (**extensions-107.0.0**, [#1824](https://github.com/sveltejs/language-tools/pull/1824)) +- Autocompletion for stores that need to be imported ([#1823](https://github.com/sveltejs/language-tools/pull/1823)) and object/class member snippets ([#1817](https://github.com/sveltejs/language-tools/pull/1817)) has been added to the Svelte extension (**extensions-107.0.0**) - Improve detection of promises that are also functions (**Svelte 3.55.1**, [#8162](https://github.com/sveltejs/svelte/pull/8162)) - Add missing types and properties for the global `part` attribute and `on:submit`, respectively (**Svelte 3.55.1**, [#8181](https://github.com/sveltejs/svelte/issues/8181)) -- Lots of performance and bug fixes (**Svelte 3.55.1***) +- Lots of performance and bug fixes (**Svelte 3.55.1*** and **extensions-107.0.x**) *for all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md). @@ -39,9 +41,11 @@ Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes - [Verve](https://github.com/ParthJadhav/verve) is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents - [Round The World](https://rtw.voyage/) is an interactive guide to the travels of Andrew Carnegie - [Linear Regression](https://mlu-explain.github.io/linear-regression/) is an interactive blog post visual introduction to (almost) everything you should know about linear regression -- [Flotes](https://flotes.app/) is a free note taking app enhanced with flashcard features. +- [Flotes](https://flotes.app/) is a free note taking app enhanced with flashcard features +- [nomie](https://github.com/open-nomie/nomie6-oss) is a Daily Journal for short attention spans - [nocode.gallery](https://nocode.gallery/) is a collection of stunning websites made with no code - [Whom to Follow](https://whomtofollow.com/) helps you find accounts you'll love by searching the network of accounts you already follow +- [poker-simulator](https://github.com/hucancode/poker-simulator) is a poker simulation and evaluation tool - [Pixelicious](https://www.pixelicious.xyz/) converts your images into pixel art - [Apple Music](https://music.apple.com/us/browse) is now built with Svelte ([proof](https://twitter.com/BrittneyPostma/status/1615381017300271104)) @@ -50,29 +54,36 @@ Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes _Featuring Svelte Contributors and Ambassadors_ - [SvelteKit | Rich Harris | ViteConf 2022](https://www.youtube.com/watch?v=-OMPfr56kXI) - [Talking Gradio and AI with pngwn 🐧](https://www.svelteradio.com/episodes/gradio-with-pngwn) from Svelte Radio -- [Progressively enhancing the Marvel By Year filter](https://geoffrich.net/posts/marvel-filter-state/) by Geoff Rich +- [Progressively enhancing the Marvel By Year filter](https://geoffrich.net/posts/marvel-filter-state/) and [Advent of SvelteKit 2022: my favorite demos](https://geoffrich.net/posts/advent-of-sveltekit-2022/) by Geoff Rich - [EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪](https://bookmarkbeat.substack.com/p/contributing-more-to-open-source) by Dani Sandoval -_To Watch_ +_To Watch or Hear_ - [I built a $5 chat app with Pocketbase & Svelte. Will it scale?](https://www.youtube.com/watch?v=gUYBFDPZ5qk) by Fireship - [The Comprehensive Introduction To SvelteKit](https://www.youtube.com/watch?v=obmiLi3bhkQ), [What Svelte UI Library Should You Use?](https://www.youtube.com/watch?v=O0mNU0maItY) and [Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes)](https://www.youtube.com/watch?v=7hXHbGj6iE0) by Joy of Code - [Progressive Enhancement in SvelteKit (use:enhance)](https://www.youtube.com/watch?v=jXtzWMhdI2U), [Are Your Routes Actually Protected?](https://www.youtube.com/watch?v=UbhhJWV3bmI) and [10X Your SvelteKit Developer Experience in VSCode](https://www.youtube.com/watch?v=13v50nLh67Q) by Huntabyte - [The easiest realtime app I’ve ever built](https://www.youtube.com/watch?v=UbOaAtHWidc) by Beyond Fireship - [Angular developers can learn Svelte so fast...](https://www.youtube.com/watch?v=lKdw_z9qmPU) by Joshua Morony +- [SvelteKit + PocketBase Integration: User Login and Registration](https://www.youtube.com/watch?v=AxPB3e-3yEM) by Jian Yuan Lee +- [Marvels Of Using Svelte and SvelteKit - JSJ 566](https://topenddevs.com/podcasts/javascript-jabber/episodes/marvels-of-using-svelte-and-sveltekit-jsj-566) with Tracey Lee and Adam L Barrett _To Read_ +- [A practical first look at the Svelte framework](https://mainmatter.com/blog/2023/01/24/sveltekit-super-rentals/) by Daniel Beer - [State Modeling in Svelte with XState](https://github.com/annaghi/xstate-svelte-workshop) is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit! - [🚀 Code your SvelteKit website faster with Stylify CSS](https://stylifycss.com/blog/code-your-sveltekit-website-faster-with-stylify-css/) by Stylify CSS +- [🎮 Five Svelte Games To Learn How To Code](https://tomaszs2.medium.com/five-svelte-games-to-learn-how-to-code-f36ae6e58923) by Tom Smykowski - [How to make declarative (code-based) router instead of file-based router in SvelteKit](https://dev.to/devpunk/how-to-make-declarativecode-based-router-instead-of-file-based-router-in-sveltekit-2-3dd4) by Dev Punk - [How to import tailwindcss custom config in JS/TS parts of a SvelteKit app](https://gist.github.com/0gust1/aa8c8b831428cdd7a5535e92cbf02f04) by 0gust1 -- [SvelteKit Internals: Load function](https://www.okupter.com/blog/sveltekit-internals-load-function) by Justin Ahinon +- [SvelteKit Internals: Load function](https://www.okupter.com/blog/sveltekit-internals-load-function) and [Svelte and CSS](https://www.okupter.com/blog/svelte-and-css) by Justin Ahinon - [Internationalization Formatting with Intl + SSR + SvelteKit](https://www.captaincodeman.com/internationalization-formatting-with-intl-ssr-sveltekit) by Captain Codeman - [Typesafe i18n with SvelteKit](https://blog.encodeart.dev/typesafe-i18n-with-sveltekit) by Andreas Söderlund - [Authorization in your SvelteKit app](https://cerbos.dev/blog/authorization-in-your-sveltekit-app) by Adam Barrett - [Validate your form using Sveltekit, Tailwindcss, Felte and Yup](https://medium.com/@Heesel/validate-your-form-using-sveltekit-tailwindcss-felte-and-yup-ddc11cd04717) by Hessel +- [SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array](http://enehana.nohea.com/general/sveltekit-form-actions-bound-to-typescript-class-validation-yup-w-dynamic-array/) by Hekili Tech - [Smooth Page Transitions with SvelteKit](https://philkruft.dev/blog/smooth-page-transitions-with-sveltekit/) by Phil Kruft - [Redis Integration in SvelteKit: A Game-Changer for Session Management](https://dev.to/theether0/redis-integration-in-sveltekit-a-game-changer-for-session-management-84i) by Shivam Meena +- [SvelteKit and GitHub Pages](https://andrewlester.net/blog/posts/sveltekit-and-github-pages) by Andrew Lester +- [Tailwind + Sveltekit in 2023](https://medium.com/@gentmitch/tailwind-sveltkit-in-2023-44c19d91c8fd) by Mitch Gent - [Svelte Stores Tutorial: Share Data Between Multiple Components](https://learnjavascripts.com/development/web-development/frameworks/svelte/svelte-stores-tutorial-share-data-between-multiple-components/) by Vincent Widerberg @@ -80,6 +91,7 @@ _To Read_ - [Sveltepress](https://sveltepress.site/) is a simple, easy to use, content centered site build tool with the full power of SvelteKit - [Svelte Form Helper](https://www.npmjs.com/package/svelte-form-helper) is a lightweight helper for form validation with Svelte - [Dapper UI](https://github.com/Bastian/dapper-ui) is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation +- [TeilUI](https://sidharth-anand.github.io/teil-ui/) is a better way to build design systems with Svelte - [Neodrag](https://www.neodrag.dev/) is an SSR-friendly, multi-framework draggable library - [Svelvet](https://www.svelvet.io/), a UI library for Svelte, is now 5.0 (read more [here](https://medium.com/@efergus1/svelvet-5-0-a-community-driven-update-cfcc93e7b7a7)) - [Svelte Inview](https://github.com/maciekgrzybek/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element