.css file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application!
Note that you can mix-and-match — you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.
-
diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md
index daa22b9206..d6c8b77193 100644
--- a/site/content/blog/2019-04-20-write-less-code.md
+++ b/site/content/blog/2019-04-20-write-less-code.md
@@ -42,7 +42,7 @@ Reducing the amount of code you have to write is an explicit goal of Svelte. To
Some content between header and footer
- +Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. I think you'll be surprised at some of your phrasing.
+{a} + {b} = {a + b}
\ No newline at end of file diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json new file mode 100644 index 0000000000..eaa2a1da63 --- /dev/null +++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json @@ -0,0 +1,3 @@ +{ + "title": "-" +} diff --git a/site/content/examples/99-embeds/meta.json b/site/content/examples/99-embeds/meta.json new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/site/content/examples/99-embeds/meta.json @@ -0,0 +1 @@ +{} diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md index 4bae964c4c..0745a5924d 100644 --- a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md +++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md @@ -31,7 +31,7 @@ The `t` value is `0` at the beginning of an intro or the end of an outro, and `1 Most of the time you should return the `css` property and *not* the `tick` property, as CSS animations run off the main thread to prevent jank where possible. Svelte 'simulates' the transition and constructs a CSS animation, then lets it run. -For example the `fade` transition generates a CSS animation somewhat like this: +For example, the `fade` transition generates a CSS animation somewhat like this: ```css 0% { opacity: 0 } @@ -69,4 +69,4 @@ We can get a lot more creative though. Let's make something truly gratuitous: ``` -Remember: with great power comes great responsibility. \ No newline at end of file +Remember: with great power comes great responsibility. diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte index 321deb8773..12d3a78c41 100644 --- a/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte +++ b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte @@ -1,6 +1,4 @@ diff --git a/site/content/tutorial/17-module-context/01-sharing-code/text.md b/site/content/tutorial/17-module-context/01-sharing-code/text.md index 9081b18dce..3529544fed 100644 --- a/site/content/tutorial/17-module-context/01-sharing-code/text.md +++ b/site/content/tutorial/17-module-context/01-sharing-code/text.md @@ -10,21 +10,15 @@ We can do that by declaring a ` ``` It's now possible for the components to 'talk' to each other without any state management: ```js -onMount(() => { - elements.add(audio); - return () => elements.delete(audio); -}); - function stopOthers() { - elements.forEach(element => { - if (element !== audio) element.pause(); - }); + if (current && current !== audio) current.pause(); + current = audio; } -``` \ No newline at end of file +``` diff --git a/site/content/tutorial/18-debugging/01-debug/text.md b/site/content/tutorial/18-debugging/01-debug/text.md index 8c9f59d082..76fa77805e 100644 --- a/site/content/tutorial/18-debugging/01-debug/text.md +++ b/site/content/tutorial/18-debugging/01-debug/text.md @@ -2,7 +2,7 @@ title: The @debug tag --- -Occasionally it's useful to inspect a piece of data as it flows through your app. +Occasionally, it's useful to inspect a piece of data as it flows through your app. One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect: @@ -12,4 +12,4 @@ One approach is to use `console.log(...)` inside your markup. If you want to pau