My gaming profiles across different platforms.

The Net Ninja (Shaun Pelling)

• Svelte Tutorial for Beginners #1 - Introduction.
• Svelte Tutorial for Beginners #2 - Setting up a Svelte App.
• Svelte Tutorial for Beginners #3 - Svelte Basics.
• Svelte Tutorial for Beginners #4 - User Input & Data Binding.
• Svelte Tutorial for Beginners #5 - Reactive Values.
• Svelte Tutorial for Beginners #6 - Loops.
• Svelte Tutorial for Beginners #7 - Inline Event Handlers.
• Svelte Tutorial for Beginners #8 - Conditionals.
• Svelte Tutorial for Beginners #9 - Components.
• Svelte Tutorial for Beginners #10 - CSS & Conditional Styles.
• Svelte Tutorial for Beginners #11 - Props.
• Svelte Tutorial for Beginners #12 - Event Forwarding.
• Svelte Tutorial for Beginners #13 - Event Modifiers.
• Svelte Tutorial for Beginners #14 - Slots.
• Svelte Tutorial for Beginners #15 - Forms (part 1).
• Svelte Tutorial for Beginners #16 - forms (part 2).
• Svelte Tutorial for Beginners #17 - Dispatching Custom Events.
• Svelte Tutorial for Beginners #18 - Starting the Polls Project.
• Svelte Tutorial for Beginners #19 - Header & Footer Components.

Svelte

• Svelte = compiler (not a framework) + reactivity + components.
• Svelte compiles the code for production at build time into a (single) JavaScript bundle. So, no extra scripts/libraries are shipped to production. The Svelte library is not deployed as in React and Vue.
• App.svelte: root component.
• Handler functions can take the event object.
• Data binding:
  • The bind:property directive is a two-way data binding under the hood. So, <input type="text" bind:value={colorVariable}> is similar to <input type="text" on:input={handleInputFunction} value={colorVariable}>. In practice, the input element changes the variable and the changes will be reflected on the page. If the variable is changed elsewhere (via a button, for example), the value will also be updated in the input element.
• $: console.log(colorVariable); is an example of a reactive statement. Use $: {...} for a code block.
• {#each array as arrayElement (arrayElement.key)}...{/each} (key is important if you need to manipulate the data). This block can also have an {:else} clause, which is rendered if array is empty.
• <button on:click={() => handleClick(object.id)}>Delete</button> or <button on:click={(event) => handleClick(event, object.id)}>Delete</button> (inline event handler). This is useful for deleting an element from an array by its identifier within an each block (assuming there is a button for each element), for example. In other words, this is useful if the handler function needs to take arguments in addition to event.
• Event forwarding:
  • If the on: directive (e.g., on:click) is used without a value, the component will forward the event. In this way, a consumer (parent component) of the component (child component) can listen for it. In other words, you can define a handler function in App.svelte, assuming the component is used here, as there is another element, such as a button, that is used to show/hide this component. Example:
    • App.svelte file: <Modal ... on:click={toggleModal} /> and <button on:click={toggleModal}>...</button>.
    • Modal.svelte file: <div ... on:click>...</div>.
  • The self event modifier (e.g., on:click|self) is useful for a modal since the handler is only triggered if event.target is the element itself. In practice, this allows the modal to be closed only if there is a click outside the message container (a child <div>), on the part that is faded, for example.
• In Svelte, when we bind to a number input (e.g., <input type="number" bind:value={numVariable}>), the input value is coerced. In this way, the associated variable is a number, not a string.
• let arrayVariable = []; + bind:group={arrayVariable} for radio and checkbox inputs (example).
• Dispatching custom events:
  • Event forwarding is for events, not data (use createEventDispatcher instead).
  • Events dispatched (custom event + data) from child components can be listened to in their parent (e.g., <ChildComponent on:name={handlerFunction} />). The data is available on the detail property of the event object.

CSS

• crimson instead of red (color keywords).
• main { max-width: 960px; margin: 40px auto; }.

Misc

• Craft:
  • Document/Markdown editor.
  • How to set (and delete) custom icon on Mac.