Merge pull request #233 from ddivad195/content/what-is-svelte

content: add svelte tech spotlight

src/content/archives/what-is-svelte.md

@@ -0,0 +1,133 @@
+**What is Svelte?**  
+Svelte is a front-end technology similar in use to React, Vue, Angular, and the like. However, instead of loading a framework on the client-side, Svelte wires everything up during the build step, meaning it doesn't have to interpret any additional information at runtime. However, it's still in its relative infancy.
+
+**When should you use Svelte?**
+
+- If you want to try out a framework that builds into an app, rather one that uses a framework at runtime.
+- If you feel like React, Vue, Angular, etc. might be too "heavy".
+- If you like trying new things.
+
+**When should you not use Svelte?**
+
+- If you need an extremely battle-tested, extremely community supported framework.
+- If you don't need interactivity/data binding.
+
+**Examples**  
+Styling a component:
+
+```html
+<style>
+  p {
+    color: purple;
+    font-family: "Comic Sans MS", cursive;
+    font-size: 2em;
+  }
+</style>
+
+<p>Styled!</p>
+```
+
+https://svelte.dev/examples#styling
+
+Bound Text Input:
+
+```js
+<script>
+    let name = '';
+</script>
+
+<input bind:value={name} placeholder="enter your name">
+<p>Hello {name || 'stranger'}!</p>
+```
+
+https://svelte.dev/examples#text-inputs
+
+Reactive statement on a button:
+
+```js
+<script>
+    let count = 0;
+
+    $: if (count >= 10) {
+        alert(`count is dangerously high!`);
+        count = 9;
+    }
+
+    function handleClick() {
+        count += 1;
+    }
+</script>
+
+<button on:click={handleClick}>
+    Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
+```
+
+https://svelte.dev/examples#reactive-statements
+
+CSS class bindings:
+
+```html
+<script>
+  let current = "foo";
+</script>
+
+<style>
+  button {
+    display: block;
+  }
+
+  .active {
+    background-color: #ff3e00;
+    color: white;
+  }
+</style>
+
+<button class:active="{current === 'foo'}" on:click="{() => current = 'foo'}">
+  foo
+</button>
+
+<button class:active="{current === 'bar'}" on:click="{() => current = 'bar'}">
+  bar
+</button>
+
+<button class:active="{current === 'baz'}" on:click="{() => current = 'baz'}">
+  baz
+</button>
+```
+
+https://svelte.dev/examples#classes
+
+Built-in animation transitions:
+
+```html
+<script>
+  import { fade, fly } from "svelte/transition";
+  let visible = true;
+</script>
+
+<label>
+  <input type="checkbox" bind:checked="{visible}" />
+  visible
+</label>
+
+{#if visible}
+<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
+  Flies in, fades out
+</p>
+{/if}
+```
+
+https://svelte.dev/examples#in-and-out
+
+**Other resources**
+
+- https://svelte.dev/
+- https://svelte.dev/tutorial/basics
+- https://egghead.io/playlists/getting-started-with-svelte-3-05a8541a
+- https://github.com/sveltejs/svelte
+- https://github.com/sveltejs/svelte/wiki/FAQ
+- https://snipcart.com/blog/svelte-js-framework-tutorial
+- https://blog.logrocket.com/how-to-build-a-simple-svelte-js-app/
+- https://alligator.io/svelte/getting-started-with-svelte/
+- https://codeburst.io/svelte-comparison-with-other-frameworks-e895c45567de