diff --git a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md new file mode 100644 index 0000000000..1d1f5a7a97 --- /dev/null +++ b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md @@ -0,0 +1,57 @@ +--- +title: What's new in Svelte: October 1, 2020 +description: New object methods, in-depth learning resources and tons of integration examples! +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +## New features +1. `use:obj.method` allows functions defined within objects to be used within actions ([Example](https://svelte.dev/repl/c305722adb4a4545b27b198ea8ff9bde?version=3.26.0), **3.26.0**) +2. `_` is now supported as a "numerical seperator", similar to a `.` or `,` ([Example](https://svelte.dev/repl/6612cec5c50b44cbab7f4a64ff930153?version=3.26.0), **3.26.0**) +3. `import.meta` now works in template expressions ([Example](https://svelte.dev/repl/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**) + +These last two updates come from an update to Svelte’s upstream dependency, [acorn](https://github.com/acornjs/acorn). Acorn generates Svelte’s Abstract Syntax Tree (AST) and is explained in detail [here](https://github.com/sveltejs/svelte/issues/1011#issuecomment-351262252)! + + +## Impactful bug fixes +1. CSS compilation will no longer remove rules for the `open` attribute on `
` elements ([Example](https://svelte.dev/repl/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**) + + +## Coming up +- Anything coming down the pipe??? + + +--- + +## Svelte Showcase +- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu +- [Github Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history +- [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives +- [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte! + +#### In-depth learning: +- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/ref=cm_sw_r_tw_dp_x_OQMtFb3GPQCB2) is a new book about building production-ready static web apps with Svelte 3 +- [Sapper Tutorial (Crash Course)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ) walks through the ins-and-outs of Sapper, the Svelte-powered applicaiton framework + +#### Plug-and-play components: +- [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) brings "nearly native" pan-and-zoom to images on desktop and mobile +- [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) is a Material component library for Svelte with over 50 components +- [svelte-undoable](https://github.com/macfja/svelte-undoable) makes it easy to introduce undo and redo functionality using `bind:` +- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse + +#### Lots of examples of how use JS tech came out this month: + - [Snowpack + Svelte + SSR](https://github.com/Rich-Harris/snowpack-svelte-ssr) + - [Sapper with PostCSS and Tailwind](https://codechips.me/sapper-with-postcss-and-tailwind/) + - [PrismJS (Code block syntax highlighting)](https://github.com/phptuts/Svelte-PrismJS) + - [Filepond (Drag-and-drop file upload)](https://github.com/pqina/svelte-filepond) + - [Ionic (UI Components)](https://github.com/Tommertom/svelte-ionic-app) + - [Pell (WYSIWYG Editor)](https://github.com/Demonicious/svelte-pell/) + - [Leaflet (Mapping)](https://github.com/anoram/leaflet-svelte) + +**Reminder**: There's a [Svelte integrations repo](https://github.com/sveltejs/integrations) that demonstrates ways to incorporate Svelte into your stack (and vice versa). If you've got questions on how to use a particular piece of tech with Svelte, you may find your answer there... and if you've gotten something to work with Svelte, consider contributing! + +For more amazing Svelte projects, check out the [Svelte Community showcase](https://svelte-community.netlify.app/showcase/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)… and be sure to post your own! + +## See you next month! + +By the way, Svelte now has an [OpenCollective](https://opencollective.com/svelte)! All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where is that money going, submit expenses, get reimbursed and more!