From 606014224ce34955560bb7d1cce65c030222afc7 Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Sun, 24 Jan 2021 20:07:13 -0800 Subject: [PATCH] added intro and showcase --- ...02-01-whats-new-in-svelte-february-2021.md | 40 ++++++++++++++----- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md index 353264592f..7c4f0927bb 100644 --- a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md +++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md @@ -1,11 +1,11 @@ --- -title: What's new in Svelte: February 2022 +title: What's new in Svelte: February 2021 description: A Svelte-packed showcase to kick-off the new year! author: Daniel Sandoval authorURL: https://desandoval.net --- -Happy new year from Svelte! In the last month we made progress on Sapper's upcoming release, fine-tuned our `SvelteComponent` typings, and have seen some amazing apps, sites, and libraries coming out in the showcase. +With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from new aria roles in the compiler to semantic highlighting hooks in the langugage-tools. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks. ## New compiler features - Aria roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0/#role_definitions) are now recognized as valid aria roles in Svelte components (**3.31.1**) @@ -31,21 +31,43 @@ A great way to try the language tools is to download the [Svelte Extension for V **Apps & Sites** -- +- [The official German vaccination dashboard](https://impfdashboard.de/) tracks the current COVID vaccine rollout and features some well-done dataviz. +- [La neuva era de la educatión conectada](https://elfuturoesapasionante.vodafone.es/especiales/educacion-conectada/) is a Vodaphone site that highlights the ways that technology and COVID-19 has changed the education landscape +- [sho.rest](https://github.com/Melonai/shorest) is a self-hostable url shortener +- [night.fm](https://night.fm/) is a cyberpunk-themed radio station + **Demos, Libraries & Components** -- +- [Svelte Reactive Debugger](https://addons.mozilla.org/en-US/firefox/addon/svelte-reactive-debugger/) is a way to monitor svelte reactive statements in Firefox devtools +- [svelte-actions](https://github.com/sw-yx/svelte-actions) is a set of prototype svelte actions for inclusion into official actions in future. [See RFC](https://github.com/sveltejs/rfcs/pull/24) and [Discuss High Level Policy](https://github.com/sw-yx/svelte-actions/issues/7). +- [This css grid gallery](https://svelte.dev/repl/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) made by @joja (in the Svelte Discord) features grid transitions based on a user's mouse position +- [Patchcab](https://github.com/spectrome/patchcab) is a modular Eurorack style synthesizer made with Web Audio. +- [svelte-knob](https://github.com/MelihAltintas/svelte-knob) is a knob control to help with speedometer-style visualization +- [descent-ripple](https://github.com/micha-lmxt/descent-ripple) is a highly customizable javascript ripple animation for buttons +- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component ([Demo](https://svelte.dev/repl/de5223beb45540a5a11c9bd7b318304f?version=3.31.2)) +- [svelte-video-player](https://github.com/meigo/svelte-video-player) is a customizable `VideoPlayer` component +- [svelte-readonly](https://github.com/Crisfole/svelte-readonly) is a very small store that only exposes a readable iterface. + + +**New Integrations & Starters** +- [svelte-derver-starter](https://github.com/AlexxNB/svelte-derver-starter) is a starter for baking fullstack application with client based on Svelte framework and server side powered by Derver. +- [eleventy-plugin-embed-svelte](https://github.com/shalomscott/eleventy-plugin-embed-svelte) makes it easy to embed Svelte components into an 11ty site. +- [svelte-tailwind-extension-boilerplate](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate) is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system. +- [snowpack-ui](https://github.com/rajasegar/snowpack-ui) lets you run & manage Snowpack projects from the browser instead of the terminal +- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative called Appwrite ([Github Repo](https://github.com/appwrite/sdk-for-svelte)) +- [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app +- [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project +- [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a svelte preprocessor to compile tailwindcss at build time based on windicss compiler +- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for Typescript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules. **Want to share your Svelte Component with the world?** Head over to the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). **Learning Resources** -- - -**Related Projects** - -- +- [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) teachings how Actions work and how they can help solve common problems when developing Svelte applications +- [One-click Portfolio/Personal blog generator from dev.to API ](https://dev.to/shriji/one-click-portfolio-personal-blog-generator-from-dev-to-api-3apb) walks through creating a Sapper site that also fetches your articles from DEV.to using the API +- [How to Code a VSCode Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) features Svelte as a way to render a custom UI within VSCode ## See you next month!