Forem: Sung M. Kim

Notes on the Dip by Seth Godin

Sung M. Kim — Tue, 13 Oct 2020 21:08:22 +0000

Introduction

Second time reading The Dip by Seth Godin.

Without notes/reflection, I forgot all about it.

Only relevant part of the book is here so read the whole book.

Lesson

The Dip is

I've double quoted "best" everywhere. Reason coming later.

What

Quitting always and be the "best"

When

Quitting in Cul-de-Sac ("dead end") or in Cliff
Quitting at the moment of hardship is the worst time while in the Dip

How

Plan ahead before quitting (not at the moment of hardship)
Specify the "quit condition" ahead of time

Why

Quitting has a bad reputation.

Can't become the "best" (contextual, flexible, subject) in the world? Then quit.

The "best" in any reaps much more reward than the rest

Where

Persevere across the market

To be the "Best"

Quit the wong stuff (Cul-de-Sac and the Cliff)

Stick with the right stuff (And getting thru the Dip)

Have the guts to do one or the other
page 4

Curves

The Dip

source: https://seths.blog/2007/05/images_from_the/

Things start easy and fun.

In days or weeks, your experience level tanks.

This is the dip
This is where you should persevere (e.g. bureaucracy and busywork on page 17)
This is what separates a beginner from an expert
This is the "set of artificial screens set up to keep people like you out" (page 18)

IMPORTANT NOTE:

Successful people don't just ride out the Dip.

They push harder, changing the rules as they go.

The Cul-de-Sac ("Dead End")

There is no progress. "It just is."

Quit this RIGHT AWAY!

source: https://seths.blog/2007/05/images_from_the/

The Cliff (Rare but scary)

The graph goes up, but at the end, it drops hard...

e.g.) Smokers get pleasures over time but the end is normally not good

source: https://seths.blog/2007/05/images_from_the/

"Best" is

page 10

I double-quoted "best" everywhere because it is

Contextual - "best" for some people but not for others
- "best" depends
- "best" in the world as in what people have "access" to (to the best of people's knowledge)
Flexible
Subjective - because consumer decides what's "best"

Reasons why the "best" matters

We intentionally narrow our choices to those at the top

The rewards for being first are enormous
Scarcity makes being at the top worth something

The Infinity Problem

Page 12

The more choice there are, the more people panic (and don't buy/decide anything)
People get lazy and go with the market leader
The "best" is even more relevant

Unlearn what you learned in schools

Page 15

Schools taught us to be well rounded to be successful.

It's wrong because, a free market rewards the exceptional.

Schools taught us to take care of easy tasks and skip hard questions, maybe not even take care of it.

But you have to eat frogs first and superstars are rewarded hansomely because they can't skip hard tasks and very good at taking care of tasks they don't know

Eat that Frog! by Brian Tracy

"Strategic quitting"

Page 16

... is the secret of successful organizations

People normally quit at the moment they thought they should quit.

But you need to think ahead before quitting.

The first step toward getting what you want is understanding the different types of situations that lead you to quit - or that should cause you to quit

Page 63

is a conscious decision you make based on the choices that are available to you.

But "Failing" means that your dream is over

It happens

"when you give up"
"when there are no other options"
"when you quit so often that you've used up all your time and resources"

"Coping" is a lousy alternative to quitting and what people do when they try to muddle through

The dip is where success happens

Page 23

The brave thing is to get through the dip and reap rewards
The mature thing to do is not even start something you can't be best at
The stupid thing is to start and give up in the Dip

The real success goes to those who obsess

Page 29

한우물만 파라. 깊게.

You must obsess and persevere across the market. (More on this later)

e.g.) A woodpecker pecking one tree 10k times VS. A woodpecker pecking 10k trees one time

Seven reasons you might fail to become the best in the world

Page 33

You run out of time (and quit)
You run out of money (and quit)
You get scared (and quit)
You're not serious about it (and quit)
You lose interest or enthusiasm or settle for being mediocre (and quit)
You focus on the short term instead of the long (and quit when the short term gets too hard)
You pick the wrong thing at which to be the best in the world (because you don't have the talent)

You can plan ahead to get around those seven reasons of failures.

Most of the time, if you fail to become the best in the world, it's either because you planned wrong or because you gave up before you reached your goal

Eight Dip Curves

Page 36

I will focus on only three.

Conceptual Dip
- The dip is to unlearn what you learned (your "assumptions")
Education Dip
- Dip often hits when it's time to go learn something new, to reinvent or rebuild your skills
- So basically when you gotta do something yourself
Distribution Dip
- The dip is to distribute via scare channels

The Valley of Death

Page 41

Competitotrs strive to create a very deep Dip

to prevent competitors to catch up
by making it harder to get through the Dip

The opposite of quitting isn't "Waiting Around"

Page 51

The opposite is "rededication"

an invigorated new strategy designed to break the problem apart

The Dip is not "static" but "flexible".

The more effort you put into it (for better or worse).

No one quits the Boston marathon at mile 25

Page 54

No one quits when you can see the end.

Once you can "visualize" the end, you can persist to reach the end

Pride is the enemy of the smart quitter

Page 65

You feel good after quitting because "hurting one's pride is not fatal"

Three questions to ask before quitting

Page 66

Question 1: Am i panicking?
- Don't quit at the moment you are in panic.
- "it's the exactly the wrong time to make such a critical decision"
- "Decide in advance" when to quit (You can quit after panic settles)
Question 2: Who am I trying to influence?
- "One person or organizations will behave differently than a market of people"
- "the rules are different"
  - "Influencing one person is like scaling a wall" - Making a progress can get easier or even harder over time
  - "Influencing a market is more of a hill than a wall" - Making a progress get easier over time one step at a time.
Question 3: What sort of measurable progress am I making?
- The measurable progress can be "subtle, but it needs to be more than a mantra"
- "Surviving is succeeding" doesn't work
- All those perseverance stories of nothing quitting "almost always comes from people moving through a market"

How to quit

Page 71

Write down the condition/circumstances under which you are willing to quit
- And then "stick with it"
"Outline your quitting strategy BEFORE the discomfort sets in"
- because it's hard to see when you are in the Dip or Cul-de-Sac, differentiating those is hard

Image by Bernadette Wurzinger from Pixabay

Tailwind CSS - Fluid Width Video

Sung M. Kim — Sat, 10 Oct 2020 00:00:00 +0000

Introduction

Learned how to make YouTube videos from this CSS Tricks article, Fluid Width Video.

The following code snippet is a Tailwind CSS version of <iframe> Video (YouTube, Vimeo, etc.) section._

Fluid Width iFrame Video

Add a wrapper element with following classes

relative
A Tailwind CSS padding extension

  module.exports = {
    purge: [...],
    theme: {
      extend: { padding: { "fluid-video": "56.25%" } },
    },
    variants: {},
    plugins: [],
  }

Remove the wrapper height with h-0.

Position iframe with an absolute positioning on top left (top-0, left-0), with 100% width and height (w-full, h-full).

<div id="responsiveVideoWrapper" className="relative h-0 pb-fluid-video">
  <iframe
    className="absolute top-0 left-0 w-full h-full"
    src="https://www.youtube.com/embed/zihoyz0u_cs"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  ></iframe>
</div>

Image by Rudy and Peter Skitterians from Pixabay

Trying to understand Etag

Sung M. Kim — Fri, 09 Oct 2020 02:17:12 +0000

Intro

I found out about Etag while reading thru Youtube Data API documentation.

One of the properties returned as part of JSON response was etag with description "The Etag of this resource."

Fascinating how I wasn't aware of this nice web feature.

This post is the summary of what I understood from reading the Etag documentation on MDN (Mozilla Developer Network) documentation.

What is an ETag?

It's a response header returned from a server to identify the resource version.

It's a simple string value (or prefixed with W/, more on this later).

e.g.) 
etag: "123dklj"
etag: W/"diekjfk"

Note: Youtube Data API returns it as part of the resource "body" instead of as a response header

Before diving into how it's useful, let's check out two types of etags (weak & strong).

Types of Etags

There are two types of Etags, "Weak" and "Strong".

A Weak Etag

This is a "fuzzy" resource match against what a client has against what the server has.

If a blog post content hasn't changed only the dates shown on the post, then the weak Etag would validate to be true.

You need to prefix the Etag value with W/ (a capital "W") to identify the value as weak.

e.g.)
etag: W/"3121lasjd"

A Strong ETag

This matches etag value for a "byte-to-byte" equivalence of resource on the server.

This is a digital finger print and can be generated using MD5 hash.

There is no prefix required unlike the weak version, just a string value.

e.g.)
etag: "12343hdhjkakiek"

What problems does it solve?

Etag solves two issues.

Mid-air collision detection ("Optimistic concurrency control ")
Unchanged Resource caching

1. Mid-air collision detection

Etag solves the issue of, is the resource I am updating the same or modified by someone else?

Suppose that there are two web clients, "Client #1" and "Client #2" and retrieved the same resource from a server (They both have the same etag).

When the client #1 updates the resource, the server will now generate a new etag as the content has changed.

If the client #2 tries to write to the same resource, the server will reject as it was modified by another client and client #2 needs to get a new resource, and try to write again.

In detail, clients will include If-Match: <EtagValue> request header to make sure to update only "if matching" etag exists (meaning, resource hasn't changed).

In database term, it's called Optimistic concurrency control.

You can see the flow in the drawing below.

2. Unchanged Resource caching

Etag also tries to solve the issue of loading resources from cache when the resource requested hasn't changed on the server.

Youtube Data API has a quota for API calls and you can

Increase a resource load time if it hasn't changed.
Save on a quota cost.

When a resource hasn't changed, the server implementing Etag returns the HTTP Status code, 304 (Not Modified), thus a client can load data from cache.

If it has changed, then the server would return an updated resource.

A client would include a request header, If-None-Match: <EtagValue> when making a request. The server checks if the specified etag value exists. The server would return a new resource "if none matching" etag is found.

Image by BRRT from Pixabay

Ubuntu - IBus not working on Visual Studio Code

Sung M. Kim — Fri, 09 Oct 2020 02:13:30 +0000

TL;DR

Install the official .deb version of VS Code.

Issue

Running Ubuntu 20.04 LTS, I was unable to type in Korea in VS Code as I was trying out react-i18next.

IBus IME doesn't work on Snap version of VS Code, reported on GitHub but not addressed.

What happened?

Ubuntu 20.04 version of "Ubuntu Software" now installs snap version of software.

Refer to Ubuntu Switches to a Snap’d Software Store for 20.04

Resolution

Go and download the official .deb version of VS Code...

Yes. That worked great.

Refer to the "answer #4" in linux - japanese input is not possible on vscode on ubuntu

Image by Philipp Reiner from Pixabay

Namespace separator syntax using gatsby-plugin-react-i18next

Sung M. Kim — Fri, 09 Oct 2020 02:12:07 +0000

Introduction

First time learning i18n (internationalization) using gatsby-plugin-react-i18next

I chose this specific Gatsby plugin as it wraps around react-i18next

The reason is similar to Robin Wieruch's description in his blog, React Internationalization with i18n > REACT INTERNATIONALIZATION: WHICH LIBRARY SHOULD I USE?.

Problem

But I had trouble accessing keys by namespace using ":" syntax.

e.g.) Accessing text under header namespace

i18next.t('header:text')

declared as following file, <project root>/locales/<language>/header.json.

{
    text: "Greetings"
}

The React page was displaying header:text instead of Greetings.

Issue

The issue was to blindly copy the example configuration in the gatsby-plugin-react-i18net > Configure the plugin documentation.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-react-i18next`,
    options: {
      path: `${__dirname}/locales`,
      languages: [`en`, `es`, `de`],
      defaultLanguage: `en`,

      // you can pass any i18next options
      // pass following options to allow message content as a key
      i18nextOptions: {
        interpolation: {
          escapeValue: false // not needed for react as it escapes by default
        },
        keySeparator: false,
        // 👇 issue here
        nsSeparator: false
      },
      pages: [
        {
          matchPath: '/:lang?/blog/:uid',
          getLanguageFromPath: true,
          excludeLanguages: ['es']
        },
        {
          matchPath: '/preview',
          languages: ['en']
        }
      ]
    }
  }
];

I didn't know each of those options without understanding each option.

After few hours of digging around, the culprit turned out to be nsSeparator.

Solution

Either leave the nsSeparator option out for a default : separator or pass a string to it to use the namespace syntax.

e.g.)

nsSeparator: ":"

Check out repository before using GitHub @actions/glob

Sung M. Kim — Fri, 09 Oct 2020 02:10:02 +0000

TL;DR

Check out repository with actions/checkout@v2 before @actions/glob.

Introduction

The goal was to use GitHub JavaScript Action to validate URLs in a repostory.

Problem

The problem was that, @actions/glob library did not return any files even with a global matching pattern, **.

const glob = require("@actions/glob")

const globber = await glob.create("**")
const files = await globber.glob()

// files = []

Fix

To access the file in GitHub action, one needs to check out a repository to access files for.

e.g.)

name: Report broken URLs

on: push

jobs:
  report_job:
    runs-on: ubuntu-latest

    steps:
      # 👇 Check out the repository
      # to be able to access the repository files
      # in "my_action"
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Validate repository URLs and report broken link(s)
        uses: my_action@master

Image by Free-Photos from Pixabay

Prerequisite to understanding TypeScript Omit in React TypeScript Cheatsheet

Sung M. Kim — Fri, 09 Oct 2020 02:08:15 +0000

Introduction

A note to self lest I forget the resources I learned from.

As I was going thru Swyx's React TypeScript Cheatsheet, Props: Omit prop from a type, I had trouble understand the definition of Omit.

// this comes inbuilt with TS 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

Could not wrap my heads around it so Googled and found Marius Schulz's blog posts.

Blog read order

I read these backwards initially but the posts in following order seems to make sense.

keyof and Lookup Types in TypeScript - Learn about keyof used for Omit and Exclude
Conditional Types in TypeScript - To understand Exclude

   type Exclude<T, U> = T extends U ? never : T

The Omit Helper Type in TypeScript - To finally learn how Omit is implemented

References

Advaned utlity type document and sources for

Omit<Type, Keys>

Definition: Constructs a type by picking all properties from Type and then removing Keys.
Documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys
Source: https://github.com/microsoft/TypeScript/blob/master/lib/lib.es5.d.ts#L1504

   /**
    * Construct a type with the properties of T except for those in type K.
    */
   type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>

Pick<Type, Keys>

Definition: Constructs a type by picking the set of properties Keys from Type.
Documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys
Source: https://github.com/microsoft/TypeScript/blob/master/lib/lib.es5.d.ts#L1480

   /**
    * From T, pick a set of properties whose keys are in the union K
    */
   type Pick<T, K extends keyof T> = {
     [P in K]: T[P]
   }

Exclude<Type, ExcludedUnion>

Definition: Constructs a type by excluding from Type all union members that are assignable to ExcludedUnion.
Documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html#excludetype-excludedunion
Source: https://github.com/microsoft/TypeScript/blob/master/lib/lib.es5.d.ts#L1494

   /**
    * Exclude from T those types that are assignable to U
    */
   type Exclude<T, U> = T extends U ? never : T

Misc. Link

Need to watch Marius Schulz's Egghead course, Advanced Static Types in TypeScript.

Image by Edward Lich from Pixabay

cuz, Donut's hole reminds me of Omit 😉

CSS Gradient Text Note

Sung M. Kim — Thu, 01 Oct 2020 00:00:00 +0000

A note to self on how to make HTML text with gradient background.

Introduction

I saw a cool text with animated gradient for text on Digital Ocean's Delploy conference site.

I wanted to know how it was implemented but didn't know how the gradient font was implemented in the first place.

An easy trick on CSS Tricks?

CSS-Tricks has a short article, Gradient Text, on how a gradient font is implemented.

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Source from CSS-Tricks article, Gradient Text.

As the CSS vendor prefix, -webkit shows, it works for browsers like Chrome, Safari, or new Opera browsers (Works on FireFox on testing).

Webkit properties

-webkit-linear-gradient: An easy way to implement a linear gradient (introduced in 2008).
-webkit-background-clip: Works on text clip while background-clip doesn't.
- Even MDN uses -webkit-background-clip for the text clip demo.
```
 .content {
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
 }
```

⚠ Provide a fallback color property incase the text clip doesn't work.
1. -webkit-text-fill-color: This looks replaceable with color property.

Animating the background

I have never used CSS animation and it requires declaring an animation as keyframes (a sequence?) and apply the animation on an HTML element using animation specifying

e.g.) Demo on CodePen

HTML content

<span class="css-gnissy"
  >NOVEMBER 10-11 • A FREE 24-HOUR GLOBAL CONFERENCE</span
>

CSS style

.css-gnissy {
  background: -webkit-linear-gradient(
    right,
    red 20%,
    green 40%,
    blue 60%,
    cyan 80%
  );

  -webkit-background-clip: text;
  /*   
    `color` seems to work too
    -webkit-text-fill-color: transparent; 
  */
  color: transparent;
  background-size: 200% auto;
  animation: shine 2s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

animation: shine 2s linear infinite; breaks down to

Keyframes name or animation-name: shine
animation-duration: 2s
animation-timing-function: linear
animation-iteration-count: infinite

@keyframes seems like a monster of its own so I will just add an MDN link to refer to later.

Tailwind Gradient Text

You can achive the gradient text effect with Tailwind CSS with bg-clip-text utility.

<div class="text-center text-5xl font-extrabold leading-none tracking-tight">
  <span
    class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500"
  >
    Hello world
  </span>
</div>

Image by Lichtmagnet from Pixabay

Snowpack - The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'

Sung M. Kim — Tue, 07 Jul 2020 15:53:02 +0000

Introduction

I started learning Snowpack and have been pleased with the speed and development experience.

As I was learning Recoil, a new React state management library by Facebook (but not by React core team), I was running into following error message.

Uncaught SyntaxError: The requested module '/web_modules/recoil.js' does not provide an export named 'RecoilRoot'

I will talk about how to get around the issue and this won't be about how to use Snowpack or Recoil.

Reproducing the error

I used Create Snowpack App (CSA) with a React template, @snowpack/app-template-react to bootstrap a new React project.

npx create-snowpack-app new-dir --template @snowpack/app-template-react --use-yarn

And then installed Recoil as a dependency.

yarn add recoil

I initially wrapped the root element with RecoilRoot.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// imported 👇 as shown in the Reoil doc
// https://recoiljs.org/docs/introduction/getting-started/#recoilroot
import { RecoilRoot } from 'recoil';

import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
);

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
  import.meta.hot.accept();
}

But then the error mentioned in the "Introduction" occurred.

Resolution

It looks like Snowpack has an issue with CJS (CommonJS) libraries according this issue, https://github.com/pikapkg/snowpack/issues/440.

The resolution in the GitHub issue is not to use named export, but to import the whole module.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Import 👇 the library as a whole
import Recoil from 'recoil';

import './index.css';

ReactDOM.render(
  <React.StrictMode>
    {/* 👇 Explicitly named element */}
    <Recoil.RecoilRoot>
      <App />
    </Recoil.RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
);

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
  import.meta.hot.accept();
}

This means, everywhere you use Recoil, you need to import the whole module.
I found it a bit annoying but haven't been able to find out a better solution.

Please leave a comment if you can share a different way :)

Image by zmortero from Pixabay

Tampermonkey script to show anchor tag links on dev.to articles

Sung M. Kim — Thu, 02 Jul 2020 20:40:20 +0000

Introduction

I started using Tampermonkey browser extension for some forums without "filtering" capabilities using a personal JavaScript code.

As I've been moderating dev.to, I found it necessary to go thru all links to verify they follow dev.to Content Policy.

Tampermonkey made it easy to display all anchor links on a specific domain using a client-side JavaScript YOU write.

I won't go into much details on Tampermonkey installation but will cover just how to create a script to display all anchor links in a post.

If you want to quickly just paste a CSS to achieve a similar effect, check out this CSS by Robin @darksmile92 Kretzschmar :)

#article-body a::after {
  content: " (" attr(href) ") ";
  color: #52d849;
}

Result

What you will see in the end on every dev.to post looks like this.

Reference: Mesure your create react app build.

](/static/945e569c53601208b9948cd1b8c4a7da/6bb2e/result.jpg)

Tampermonkey script

Let's take a full source first (as it's short)

// ==UserScript==
// @name         dev.to
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://dev.to/*
// @grant        none
// ==/UserScript==

;(function() {
  "use strict"

  // Your code here...
  document
    .querySelectorAll("#article-body a")
    .forEach(a =>
      a.insertAdjacentHTML(
        "beforeEnd",
        `➡<strong style="color: red">${a.href}</strong>`
      )
    )
})()

@match is the important bit, where we instruct Tampermonkey which domain we want to execute the JavaScript code.

Note: Refer to Tampermonkey documentation for other UserScript header (such as @name).

Let's see how JavaScript code is implemented.

Selecting article links only

Each DEV article has an element with id='article-body', which is what we are interested in.

document.querySelectorAll("#article-body a")

As there are multiple links, I used querySelectorAll to match only anchor tags under #article-body using the descendant combinator.

Showing raw link next to anchor tags

As document.querySelectorAll("#article-body a") returns multiple anchor elements, we can iterate it with NodeList#forEach (Note that querySelectorAll returns a NodeList, not an array).

We can then get a hold of an anchor element in the callback (I labeld it as a), to which we can insert a custom HTML.

The custom HTML will be an aweful-looking red-colored strong element.

    .forEach(a =>
      a.insertAdjacentHTML(
        "beforeEnd",
        `➡<strong style="color: red">${a.href}</strong>`
      )
    )

Element.insertAdjacentHTML() provides a way to add a custom HTML next to the current element.

You can play around with position (first parameter, beforeEnd) the way you see fit.

Image by Stefan Keller from Pixabay

How to create a custom Material UI theme for Gatsby

Sung M. Kim — Fri, 26 Jun 2020 14:53:34 +0000

*** Note on 2020-06-26 ***

There is a very nice customization video, React Material-UI Themes: Customize Material Components for your Project.

Been searching for easy way to customize Material UI (MUI hereafter) theme and found few online tools to help me get it done quick.

Most of steps here are for configuring Gatsby for Material UI theme but a custom MUI theme set up is easy.

1. Bootstrap a new Gatsby site

npx gatsby new site-name-here

2. Install libraries

Material UI (MUI)

  npm install @material-ui/core
  # or
  yarn add @material-ui/core

gatsby-plugin-material-ui - Gatsby plugin for SSR support

  npm install -D gatsby-plugin-material-ui
  # or
  yarn add -D gatsby-plugin-material-ui

3. Create a custom MUI theme

Go to the Google's Material Design Color Tool site
Select primary & secondary colors and copy the current URL (, which updates on color selection)
Go to https://react-theming.github.io/create-mui-theme/ and paste the URL in Paste URL here input box
Now custom Theme JSON should be generated on the bottom right

4. Configure MUI theme

I will create a local plugin to keep the code organized.

Refer to Creating a Local Plugin for more info

Create a new local Gatsby plugins folder, ./plugins/custom-mui-theme in the project root
Configure Gatsby plugin
1. wrapRootElement.js
  - A helper module to add MUI theme context provider
  - wrapRootElement is a way to wrap the root Gatsby element. We will wrap the root element with MUI theme provider
```
import React from "react"
import { ThemeProvider } from "@material-ui/core/styles"

import theme from "./theme"

export const wrapRootElement = ({ element }) => {
  console.info(`theme`, theme)
  return <ThemeProvider theme={theme}>{element}</ThemeProvider>
}
```
2. gatsby-browser.js
  - To wrap the top-level element with MUI theme provider for the browser
  - We can simply export wrapRootElement in one line
```
export { wrapRootElement } from "./wrapRootElement"
```
3. gatsby-ssr.js
  - To wrap the top-level element with MUI theme provider on the server side
  - The implementation is the same as the browser version
```
export { wrapRootElement } from "./wrapRootElement"
```
4. package.json - Required for the local plugin
  - Add the plugin name in the file
```
{
  "name": "custom-mui-theme"
}
```
Create a new folder ./plugins/custom-mui-theme/theme
Create two files under the theme folder
1. theme.json
  - Copy & paste the theme JSON file in the previous step, Createa custom MUI theme
2. index.js
  - This is to provide the custom theme generated in Createa custom MUI theme section
  - It needs a bit of change as we need to import the JSON theme
```
import { createMuiTheme } from '@material-ui/core/styles';
import themeData from "./theme.json";

const themeName = 'My custom theme name';
export default createMuiTheme({ ...themeData, themeName });
```
Configure gatsby-plugin-material-ui and add the custom-mui-theme (the latter should be below) in the project root's gatsby-config.js

  module.exports = {
    // ...
    plugins: [
      // other plugins ...
      {
        resolve: `gatsby-plugin-material-ui`,
        options: {
          stylesProvider: {
            injectFirst: true,
          },
        },
      },
      `custom-mui-theme`,
    ],
  }

injectFirst lets us override the MUI styles with Tailwind CSS

5. Checking if the custom theme is applied

In ./src/pages/index.js, add the primary button to see if the color matches that of your custom style

import React from "react"

import Button from '@material-ui/core/Button'

const IndexPage = () => (
    <>
      <Button color="primary" variant="contained">A button!</Button>
      <Button color="secondary" variant="contained">A button!</Button>
    </>
)

export default IndexPage

You will see that the primary and secondary colors are applied according to the custom theme.

From here on, simply updating ./plugins/custom-mui-theme/theme/theme.json should update the MUI theme

6. Resources

A Gatsby site source created by following the steps above - https://github.com/dance2die/blog.custom-material-ui-gatsby-theme
Google's Material Design Color Tool: https://material.io/resources/color/
Create MUI Theme site
- Home - https://react-theming.github.io/create-mui-theme/
- Source - https://github.com/react-theming/create-mui-theme (MIT licenced)
Gatsby
- gatsby-plugin-material-ui
  - Source - https://github.com/hupe1980/gatsby-plugin-material-ui
  - Documentation - https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/?=gatsby-plugin-material-ui
- wrapRootElement - https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement
- "Creating a Local Plugin" - https://www.gatsbyjs.org/docs/creating-a-local-plugin/
- Plugins documentation - https://www.gatsbyjs.org/docs/plugins/
Material UI
- Home - https://material-ui.com/
- Official MUI + Gatsby sample - https://github.com/mui-org/material-ui/tree/master/examples/gatsby
- Theming - https://material-ui.com/customization/theming/
- Default Theme (Theme JSON overrides this) - https://material-ui.com/customization/default-theme/

Image by annca from Pixabay

Svelte tutorial note

Sung M. Kim — Sat, 20 Jun 2020 00:00:00 +0000

This is a note as I wrote down as I was going through Svelte tutorial.

Might be of helpful for some but foremost, this is a note for myself :)

1. Introduction

Creating a new Svelte project

https://svelte.dev/blog/svelte-for-new-developers

npx degit sveltejs/template new-project-name

VS Code

Install following extensions

2. Reactivity

a. Assignments

https://svelte.dev/tutorial/reactive-assignments

on:click on looks like a directive and click is the event name.

States are reactive, closure under script tag re-renders whenever the state value changes.

<script>
    let count = 0;

    function handleClick() {
        count++;
    }
</script>

<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

b. Declarations

https://svelte.dev/tutorial/reactive-declarations

Computed/derived states need to be declared using a special syntax, $:.

let count = 0;
$: doubled = count * 2;

Useful when it needs to be access multiple times.

Instead of {count * 2} everywhere, you can use {doubled} instead.

c. Statements

https://svelte.dev/tutorial/reactive-statements

$: isn't limited to expressions (reactive values) but also to statements.

<script>
    let count = 0;

    $: console.log(`the count is {count}`);

    $: if (count >= 10) {
        alert(`count is too high!`)
        count = 9;
    }

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

d. Updating arrays and objects

https://svelte.dev/tutorial/updating-arrays-and-objects

A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment.

Or assign a new reference like you do in React.

// Instead of this
function addNumber() {
  numbers.push(numbers.length + 1);
  numbers = numbers
}

// Do this
function addNumber() {
  numbers = [...numbers, numbers.length + 1]
}

3. Props

a. Declaring props

https://svelte.dev/tutorial/declaring-props

For passing data to another component(s). Same concept as it does in React.

In React, components receive props but in Svelte, you export a variable.

Nested.svelte

<script>
  export let answer;
</script>
<p>The answer is {answer}</p>

App.svelte imports Nested component and passes the answer like following.

<script>
  import Nested from './Nested.svelte'
</script>

<Nested answer={42}>

b. Default values

https://svelte.dev/tutorial/default-values

You can set the default prop value during declaration

Nested.svelte

<script>
  export let answer = 'is unknown!';
</script>
<p>The answer is {answer}</p>

If no props passed to Nested like <Nested>, then the default value is used.

c. Spread props

https://svelte.dev/tutorial/spread-props

As you can do in React, you can pass multiple props with object spread operator.

<Info {...pkg}>

4. Logic

a. If blocks

https://svelte.dev/tutorial/if-blocks

The markup is avaiable in Svelte only, not in HTML.

{#if user.loggedIn}
  <button on:click={toggle}>Log Out</button>
{/if}

{#if !user.loggedIn}
  <button on:click={toggle}>Log In</button>
{/if}

b. Else blocks

https://svelte.dev/tutorial/else-blocks

Mutually exclusive condition can use {:else} block

{#if user.loggedIn}
<button on:click={toggle}>Log Out</button>
{:else}
<button on:click={toggle}>Log In</button>
{/if}

c. Else-if blocks

https://svelte.dev/tutorial/else-if-blocks

Additional condition can be checked with {:else if condition}

{#if x > 10}
  <p>{x} is greater than 10!</p>
{:else if x < 5 }
  <p>{x} is less than 5
{:else}
  <p>{x} is 'teween 5 and 10</p>
{/if}

d. Each blocks

https://svelte.dev/tutorial/each-blocks

You can iterate an iterable object with {#each iterable as alias, index}

<ul>
{#each cats as cat, index}
  <li>{index + 1}th cat is {cat.name}</li>
{/each}
</ul>

The alias can be destructured like

{#each cats as {name, id, age}, index}
  <li>{index + 1}th cat is {name} and is {age} years old</li>
{/each}

e. Keyed each blocks

https://svelte.dev/tutorial/keyed-each-blocks

In React, creating an iterable element requires key per each element.

e.g.)

{things.map(thing => <li key={thing.id}>{thing.color}</li>)}

In Svelte, you specify the key in the markup.

{#each things as thing (thing.id)}
  <li>{thing.color}</li>
{/each}

Or you can destructure thing

{#each things as {id, color} (id)}
    <Thing current={color}/>
{/each}

f. Await blocks

https://svelte.dev/tutorial/await-blocks

Svelte markup has a way to await promises.

Race condition is handled automatically because Svelte only grabs the latest/most recent promise only.

{#await promise}
  <p>Loading...</p>
{:then number}
  <p>The value is {number}<p>
{:catch error}
  <p class="error">{error.message}</p>
{/await}

You can decide not to show the intermediate "loading" message and wait 'til the promise resolves.

{#await promise then number}
  <p>The value is {number}<p>
{/await}

This is much cleaner abstraction than in React, in which one needs to use useEffect to resolve promise in an async method and set the state.

5. Events

a. DOM events

https://svelte.dev/tutorial/dom-events

Use on: directive, followed by DOM event name.

e.g.) mousemove

<script>
    let m = { x: 0, y: 0 };

    function handleMousemove(event) {
        m.x = event.clientX;
        m.y = event.clientY;
    }
</script>

<style>
    div { width: 100%; height: 100%; }
</style>

<div on:mousemove={handleMousemove}>
    The mouse position is {m.x} x {m.y}
</div>

b. Inline handlers

https://svelte.dev/tutorial/inline-handlers

⚠ Inline event handlers does not cause any performance issues unlike in React, as Svelte knows how to optimize.

Instead of,

<div on:mousemove={handleMousemove}>
    The mouse position is {m.x} x {m.y}
</div>

You can inline handleMousemove as shown below.

<div on:mousemove={e => m = {x: e.clientX, y: e.clientY}}>
    The mouse position is {m.x} x {m.y}
</div>

Or, wrap the inline method in quotes for syntax highlighting in some editors

<div on:mousemove="{e => m = {x: e.clientX, y: e.clientY}}">
    The mouse position is {m.x} x {m.y}
</div>

c. Event modifiers

https://svelte.dev/tutorial/event-modifiers

You can "decorate" (my intepretaion) event with modifiers such as

once: run the handler once
prevetnDefault: event.preventDefault() before calling the handler
stopPropagation: event.stopPropagation() to stop the event bubble/capture
passive: for touch/wheel scrolling performance (Google added it as a non-standard but it's supported widely)
capture: DOM events "bubble-up" by default. This reverses it as capture (Refer to MDN Event.eventPhase)
self: event.target === current element.

e.g.) using once to run an event handler only once on a button

<button on:click|once={handleClick}>Click me</button>

Modifiers are chainable. on:click|once|capture|preventDefault

handleClick will be called once once no matter how many times you press the button.

⚠ Space is significant! The code below is not valid as there are spaces between |.

<button on:click | once={handleClick}>Click me</button>

d. Component events

https://svelte.dev/tutorial/component-events

Unlike custom event dispatch in vanilla JS, where you pass custom data as detail property,

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
let event = new CustomEvent("cat", {
  👇
  detail: {
    hazcheeseburger: true
  }
});
obj.dispatchEvent(event);

you dispatch an event with data and it will be available as part of event.detail automatically.

Inner.svelte

<script>
    import {createEventDispatcher} from 'svelte'

    const dispatch = createEventDispatcher()

    function sayHello() {
    // NOT THIS!
    // dispatch('message', {detail: {text: 'hi!'}})
    // But pass the data as it is
        dispatch('message', { text: 'Hello!' });
    }
</script>

<button on:click={sayHello}>
    Click to say hello
</button>

You can then use the component and subscribe to the event, message like following.

App.svelte

<script>
    import Inner from './Inner.svelte';

    function handleMessage(event) {
    // Access "text" via 👇 event.detail 
        alert(event.detail.text);
    }
</script>

<Inner on:message={handleMessage}/>

This pattern is different from React where an inner component receives an "event handler" as a function and calls it, not declare an event.

const App = () => <Inner onMessage={handleMessage}>
const Inner = ({onMessage}) => <button onClick={onMessage}>Click</button>

So it seems that in Svelte, event handlers are declared using vanilla JavaScript's CustomEvent interface.

e. Event forwarding

https://svelte.dev/tutorial/event-forwarding

DOM events are bubbled up while Svelte events aren't. Explicit event forwarding can be done by creating event dispatcher in each level.

Svelte can forward events with a shortcut where you specify the on:eventname directive without a value.

<Inner on:message>

Then all on:message event handlers will be forwarded up and made available to the calling component.

Note: this is tough to grasp. Need to come back later.

f. DOM event forwarding

https://svelte.dev/tutorial/dom-event-forwarding

Svelte requires you explicitly decide whether to expose an event or not.

When there is more than one element in inner component exposing the same event, say two buttons with on:click,

CustomButton.svelte

<button id="b1" on:click>
    Click me
</button>

<button id="b2" on:click>
    Click me2
</button>

Then you can tell which one was fired by examining event.target

App.svelte

<script>
  import CustomButton from './CustomButton.svelte'

  function handleClick(event) {
    console.log(`e =>`, event.target)
  }
</script>

<CustomButton on:click={handleClick}> />

CustomButton click on #b1 and #b2 results in,

e => <button id="b1">Click me</button>
e => <button id="b2">Click me2</button>

6. Bindings

a. Text inputs

https://svelte.dev/tutorial/text-inputs

Sorta like a two-way binding, where changes in an element updates the state and the current state.

<script>
    let name = 'world!'
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>

Updating values in input will update name state as well as the input's value.

b. Numeric inputs

https://svelte.dev/tutorial/numeric-inputs

batteries included

Svelte auto converts input of type number & range to numeric values.

React requires explicit conversion as it's metal.

c. Checkbox inputs

https://svelte.dev/tutorial/checkbox-inputs

Checkbox input type value is bound to bind:checked instead of bind:value.

<script>
    let isChecked = false
</script>
<input type="checkbox" bind:checked={isChecked}>

d. Group inputs

https://svelte.dev/tutorial/group-inputs

In vanilla JS, you use name to group related checkboxes and radio.

MDN Reference: <input type="radio">

<form>
                                            👇
    <input type="radio" name="scoops" value="1">
    <input type="radio" name="scoops" value="2">
    <input type="radio" name="scoops" value="3">
</form>

but in Svelte, you bind a group using bind:group directive.

<form>
                                            👇
    <input type="radio" bind:group="scoops" value="1">
    <input type="radio" bind:group="scoops" value="2">
    <input type="radio" bind:group="scoops" value="3">
</form>

When bound to a radio group, then the bound value is one value, but on checkboxes, the bound value is an array.

<script>
    let scoops = 1;
    let flavours = [];
</script>

<!-- Radio `scopes` bound to a single value -->
<label>
    <input type=radio bind:group={scoops} value={1}>
    One scoop
</label>
<label>
    <input type=radio bind:group={scoops} value={2}>
    Two scoops
</label>
<label>
    <input type=radio bind:group={scoops} value={3}>
    Three scoops
</label>

<!-- Checkbox group value, `favlours` is an array -->
<label>
    <input type=checkbox bind:group={flavours} value="Cookies and cream">
    Cookies and cream
</label>
<label>
    <input type=checkbox bind:group={flavours} value="Mint choc chip">
    Mint choc chip
</label>
<label>
    <input type=checkbox bind:group={flavours} value="Raspberry ripple">
    Raspberry ripple
</label>

e. Textarea inputs

https://svelte.dev/tutorial/textarea-inputs

Same as <input type="text">. You bind value using bind:value={value}. If the value variable name matches value, then you can leave out the assignment, like,

<textarea bind:value></textarea>

f. Select bindings

https://svelte.dev/tutorial/select-bindings

Like Textarea, you can use bind:value={value} and leave out the assignment, bind:value if the variable name is value.

<script>
let value;
let answer = ""
const questions = [
    {id: 1, 'question #1'},
    {id: 2, 'question #2'},
    {id: 3, 'question #3'},
]
</script>

<!-- this works too 👇 -->
<!-- <select bind:value={value} on:change="{() => answer = ""}"> -->
<select bind:value on:change="{() => answer = ""}">
    {#each questions as question}
        <option value={question}>{question.text}</option>
    {/each}
</select>

<input bind:value={answer}>

g. Select multiple

https://svelte.dev/tutorial/multiple-select-bindings

I've already mentioned this in d. Group inputs - https://svelte.dev/tutorial/group-inputs

Binding to a select with multiple directive sets the value to an array.

flavours is an array.

<select multiple bind:value={flavours}>
    {#each menu as flavour}
        <option value={flavour}>
            {flavour}
        </option>
    {/each}
</select>

h. Contenteditable bindings

https://svelte.dev/tutorial/contenteditable-bindings

You can bind to either textContent or innerHTML

<div
    contenteditable="true"
    bind:innerHTML={html}
></div>
<!-- or -->
<div
    contenteditable="true"
    bind:textContent={html}
></div>

Check out the difference between textContent & innerHTML

& why one should consider using textContent over innerHTML.

i. Each block bindings

https://svelte.dev/tutorial/each-block-bindings

Don't use this if you plan to go with immutable data (React style).

Familiar with imperative style? go with this.

j. Medial elements

https://svelte.dev/tutorial/media-elements

Media elements' (video/audio) are updated more frequently using requestAnimationFrame.

k. Dimensions

https://svelte.dev/tutorial/dimensions

Every block-level elements, such as div, section, article, etc have bindings to following props.

l. This

https://svelte.dev/tutorial/bind-this

bind:this={variable} returns a reference to rendered elements.

variable will be undefined until the component has mounted.

Use onMount lifecycle to refer to the variable.

Note: This looks like ref in React.

m. Component bindings

https://svelte.dev/tutorial/component-bindings

As mentioned previously, you can bind:value for custom components to provide a two-way binding.

Changes in child component will be available in the parent element.

Keypad.svelte

<script>
export let value;
</script>
...

Suppose that in App.svelte,

<script>
    import Keypad from './Keypad.svelte'

    let pin;

    const handleSubmit = () => console.log(`pin => ${pin}`)
</script>

<input bind:value={pin} />
<Keypad bind:value={pin} on:submit={handleSubmit}>

You can bind to Keypad with bind:value={pin}. It works as both an input and output to Keypad component.

It can be demo'ed by changing values in <input bind:value={pin} />.

Awesome! Very convinient. But you have to be careful as you can lose track of the state flow.

In React, one would have to pass a callback function to call it whenever child value changes and the parent would update the state via the callback.

App.jsx

function App() {
    const [pin, setPin] = React.useState(null)

    return <Keypad onChange={setPin} />
}

7. Lifecycle

a. onMount

https://svelte.dev/tutorial/onmount

It's comparable to the mix of componentDidMount and useEffect because it's called when a component is mounted, and cleans up with a callback function returned from it (that's how useEffect does a clean up).

And also, componentDidMount can be async and useEffect cannot call an async method.

As it's the recommended way to call fetch in React, onMount is normally where one should make a network request.

<script>
    import { onMount } from 'svelte';

    onMount(async () => {
        const response = await fetch('https://www...');
        photos = await response.json();

        return () => {
            // clean up resources here
        };
    });
</script>

b. onDestroy

https://svelte.dev/tutorial/ondestroy

onDestroy is like React's componentWillUnmount. Use it clean up resources on component's unmount phase.

<script>
    import { onDestroy } from 'svelte'

    let seconds = 1;
    const id = setInterval(() => seconds++, 1000)

    onDestroy(() => void clearInterval(id))
</script>

c. beforeUpdate and afterUpdate

https://svelte.dev/tutorial/update

Flows like,

beforeUpdate -> onMount -> beforeUpdate -> state changes -> afterUpdate -> onDestroy

As beforeUpdate runs BEFORE onMount, one needs to check for existence of elements

d. tick

https://svelte.dev/tutorial/tick

To get around batch processing (state updates, DOM updates, etc)

<script>
    import { tick } from 'svelte'
</script>

8. Stores

a. Writable stores

https://svelte.dev/tutorial/writable-stores

Svelte has batteries included. It comes with a global state management library.

svelte/store has writable method to create a global state.

store.js

import { writable } from 'svelte/store'

export const count = writable(0)

Then one can import count in store.js, either to read, update, or set the value.

Reading via subscription - writable returns a state, which you can subscribe() for the value change - It is a HoF (higher-order function), which returns a function to unsubscribe - It's the same as how Redux store's subscribe returns unsubscribe method - My guess is that you need to call unsubscribe in onDestroy normally to clean up

<script>
    import { onDestroy } from 'svelte'
    import { count } from './store'

    let countValue;
    const unsubscribe = count.subscribe(value => { countValue = value });
    // Clean up after your business!
    onDestroy(unsubscribe);
</script>

Updating the state - writable returns a state, which you can update values for - It requires a callback, which is given the current value to update with

<script>
    import { count } from './store.js'
    const incrementCount = () => count.update(currentValue => currentValue + 1)
</script>

<button on:click={incrementCount}>Increment Count by One/button>

Setting the state (convinience method for update) - set method looks like a convinience method to update - as you can simply set a value without a callback function

<script>
    import { count } from './store.js'
    const reset = () => count.set(0)
</script>

<button on:click={reset}>Reset Count</button>

b. Auto-subscriptions

https://svelte.dev/tutorial/auto-subscriptions

Svelte has yet another convinient way to subscribe to the global state change.

With $ prefixed to a variable, Svelte takes care of both un/subscription out of the box.

Instead of this verbose un/subscribe for count,

<script>
    import { onDestroy } from 'svelte'
    import { count } from './store'

    let countValue;
    const unsubscribe = count.subscribe(value => { countValue = value });
    // Clean up after your business!
    onDestroy(unsubscribe);
</script>

<p>Count value is {countValue}</p>

You can simply prefix count with $ like $count.

<script>
    import { onDestroy } from 'svelte'
    import { count } from './store'
</script>

<p>Count value is {$count}</p>

Make sure to read notes in the linked page.

c. Readable stores

https://svelte.dev/tutorial/readable-stores

Readable store provides, duh, read-only store, for which one can initialize but can't update.

It looks similar to useEffect that the returned function is called when "the last subscriber unsubscribes".

store.js

import { readable } from 'svelte';

const initialValue = new Date();
const valueUpdator = set => {
    const id = setInterval(() => set(new Date()), 1000);

    // called when the last subscriber unsubscribes.
    return () => clearInterval(id);
}

export const time = readable(initialValue, valueUpdator);

And the same as wriable store, you can refer to it with $ prefix, like $time in another file.

d. Derived stores

Tutorial: https://svelte.dev/tutorial/derived-stores
API: https://svelte.dev/docs#derived

The tutorial prefixes time with $ like $time in the callback.

Auto-subscriptions tutorial states that

Any name beginning with $ is assumed to refer to a store value. It's effectively a reserved character — Svelte will prevent you from declaring your own variables with a $ prefix.

But I tried it without $ prefix as shown below but still works.

export const elapsed = derived(
    time,
    t => Math.round((t - start) / 1000)
);

Not sure if $ is required. Left a question on Reddit.

https://www.reddit.com/r/sveltejs/comments/hblmxa/question_derived_callback_in_tutorial_uses_a/

e. Custom stores

https://svelte.dev/tutorial/custom-stores

One can create a custom store by implementing subscribe method.

Tutorial uses wriable's subscribe to expose the interface and doesn't show how to implement one yourself.

f. Store bindings

https://svelte.dev/tutorial/store-bindings

Store value referred to with $ prefix can be bound as if it's a local state.

<script>
import { name } from './store.js';
</script>

<input bind:value={$name}>

Typing in the input will update $name and will trigger update itself and all dependents.

9. Motion

a. Tweened

https://svelte.dev/tutorial/tweened

Svelte has a built-in motion library without having to install a 3rd party library.

In React, you'd use react-spring, or react-motion, etc.

b. Spring

https://svelte.dev/tutorial/spring

Use this instead of tweened for frequently changing values

10. Transitions

a. The transition directive

https://svelte.dev/tutorial/transition

Another batteries-included way to provide transition in JavaScript.

According to Chrome Devtools, <p transition:fade> injects an inline style to fade in/out.

<script>
    import { fade } from 'svelte/transition';
    let visible = true;
</script>

{#if visible}
<p transition:fade>Fade in and out</p>
{/if}

b. Adding parameters

https://svelte.dev/tutorial/adding-parameters-to-transitions

You can also pass in-line parameters to transition functions in the markup.

<script>
    import { fly } from 'svelte/transition';
    let visible = true;
</script>

<input type=checkbox bind:checked={visible}>

{#if visible}
<p transition:fly="{{ y: 200, duration: 2000 }}">Flies in and out</p>
{/if}

Transitions are "reversible".
Toggling visibility doesn't abruptly starts transition from beinging or the end.

It reverses where it left off.

Refer to the linked tutorial page to see it in action! Cool stuff.

c. In and out

https://svelte.dev/tutorial/in-and-out

You can granularly contorl transition with in & out directives instead of transition.

d. Custom CSS transitions

https://svelte.dev/tutorial/custom-css-transitions

Looks simple so long as you undersand CSS transition and motions etc.

I know neither well so it's tough.

To learn first: Using CSS transitions on MDN.

e. Custom JS transitions

https://svelte.dev/tutorial/custom-js-transitions

Use tick callback to implement JS transitions for effects not possible by CSS transitions.

f. Transition events

https://svelte.dev/tutorial/transition-events

Monitor transition directive events with following directives

on:introstart
on:outrostart
on:introend
on:outroend

g. Local transitions

https://svelte.dev/tutorial/local-transitions

local transition makes transitions to occur on individual elements, not for a group of items.

Honestly, I really haven't found a use for this.

h. Deferred transitions

https://svelte.dev/tutorial/deferred-transitions

More advanced transition concept I'd have to learn later.

11. Animations

a. The animate directive

https://svelte.dev/tutorial/animate

Oh boy. come back later...

12. Actions

a. The use directive

https://svelte.dev/tutorial/actions

Use use: directive to specify the action.

<script>
    import { pannable } from './pannable.js';
</script>
<div use:pannable></div>

pannable is a function, which accepts a DOM node.

// Fires following custom events
// 1. panstart
// 2. panmove
// 3. panend
export function pannable(node) {}

When the pannable dispatches a custom event, the parent component can subscribe to it in the markup.

<script>
    import { pannable } from './pannable.js';

    // These functions have access to `event` dispatched from `pannable`
    const handlePanStart = event => {}
    const handlePanMove = event => {}
    const handlePanEnd = event => {}
</script>
<div 
    use:pannable
    on:panstart={handlePanStart}
    on:panmove={handlePanMove}
    on:panend={handlePanEnd}
    style="transform:
        translate({$coords.x}px,{$coords.y}px)
        rotate({$coords.x * 0.2}deg)"
></div>

Clean up of the action can be done by exposing onDestroy.

export function pannable(node) {
    return {
        onDesotry() {
            // clean up the mess
        }
    }
}

b. Adding parameters

https://svelte.dev/tutorial/adding-parameters-to-actions

Just like transitions, actions can accept arguments.

<script>
    import { longpress } from './longpress.js';
</script>
<div use:longpress={duration}></div>

When the duration is changed, longpress.js won't know that the duration has changed.

To subscribe to the duration change, implement update function in the action

longpress.js

export function longpress(node, duration) {
    return {
        update(newDuration) {
            duration = newDuration
        }
    }
}

Multiple arguments can be passed to the action as an object

<script>
    import { longpress } from './longpress.js';
</script>
<div use:longpress={{duration, spiciness}}></div>

and accept the object in the action.

longpress.js

export function longpress(node, { duration, spiciness }) {}

13. Classes

a. The class directive

https://svelte.dev/tutorial/classes

Svelt provides a shortcut for class toggle.

It's just class in Svelte not className as it is in React.

<script>let current = 'foo';</script>
<style>
    .someActiveClass {
        background-color: red;
        color: white
    }
</style>

<button 
    class:someActiveClass="{current='foo'}" 
    on:click="{() => current = 'foo'}">
>foo</button>

<button 
    class:someActiveClass="{current='bar'}" 
    on:click="{() => current = 'bar'}">
>bar</button>

<button 
    class:someActiveClass="{current='baz'}" 
    on:click="{() => current = 'baz'}">
>baz</button>

Whenever the condition matches, the custom class append after class: is added.

b. Shorthand class directive

https://svelte.dev/tutorial/class-shorthand

The shorthand for the shortcut (whew, what a mouthful) is that you can leave out the directive assignment if the class to toggle matches the variable name.

<div class:big={big}></div>

can be shortened to

<div class:big></div>

14. Component composition

a. Slots

https://svelte.dev/tutorial/slots

This is just like React's children to specify where to put child components in the current one.

Svelte component is not a function, but more like a markup w/ scripts and styles.

So to access children, you need to specify <slot></slot> or <slot />.

You can specify multiple <slot />, which will show the children multiple times.

box.svelte

<style>
    .box {}
</style>

<div class="box">
    <slot></slot>
    <!-- or -->
    <slot />
</div>

And pass the children to the box component.

<script>
    import Box from './box.svelte';
</script>

<Box>
    <h1>Here is the child header</h1>
    <p> this is the content <p>
</Box>

Personal note: This is more to how React should have been as React's supposed to be declarative.

Svelte correctly uses the markup declration for the child, while React is imperative with children. (Not to mention children can be anything like a function to implement render props).

b. Slot fallbacks

https://svelte.dev/tutorial/slot-fallbacks

If you weren't specifying any fallback, you could use <slot /> but to provide a fallback (when a user didn't specify a child), then you can use a longer <slot>fallback content</slot>.

box.svelte

<style>
    .box {}
</style>

<div class="box">
    <slot>Fallback content!!!</slot>
</div>

The example of none-child passed to Box is as shown below

<script>
    import Box from './Box.svelte';
</script>

<Box>
    <h2>Hello!</h2>
    <p>This is a box. It can contain anything.</p>
</Box>

<Box></Box>
<Box />

c. Named slot

https://svelte.dev/tutorial/named-slots

In React, one would expose seprate components or static child components like this.

function App() {
    return (
        <ContactCard>
            <ContactCard.Name>Sung Kim</ContactCard.Name>
            <ContactCard.Address />
        </ContactCard>
    )
}
// or
function App() {
    return (
        <ContactCard>
            <ContactCardName>Sung Kim</ContactCardName>
            <ContactCardAddress />
        </ContactCard>
    )
}

It requires to create seprate component for ContactCardName or ContactCardAddress, each of which accepts its own children function.

This is where things get interesting.

You can specify which "slot" you want to insert the child content into!

ContactCard.svelte

<style>
    .missing {}
</style>

<article class="contact-card">
    <h2>
        <slot name="name">
            <span class="missing">Unknown name</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">Unknown address</span>
        </slot>
    </div>

    <div class="email">
        <slot name="email">
            <span class="missing">Unknown email</span>
        </slot>
    </div>
</article>

As shown in the previous section, each named slots contain fallbacks.

The calling component specifies the slot in the child component

App.svelte

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
    <span slot="name">Sung</span>
    <span slot="email">Sung@sung.com</span>
</ContactCard>

c. Slot props

https://svelte.dev/tutorial/slot-props

Passing data from slot to the parent component, one needs to declare the exposed state (via slot) while declaring the component

You don't declare a variable in the parent component but just sorta like "bind" using let.

Hovering.svelte: a component containg a slot.

<script>
    let hovering;

    const enter = () => hovering = true;
    const leave = () => hovering = false;
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
    <slot hovering={hovering}></slot>
    <!-- or use the hsort hand -->
    <!-- <slot hovering></slot> -->
</div>

To access hovering in the parent component, use let as mentioend before.

Parent.svelte

<script>
    import Hoverable from './Hoverable.svelte';
</script>

<Hoverable let:hovering={hovering}>
    <div class:active={hovering}>
        {#if hovering}
            <p>I am being hovered upon.</p>
        {:else}
            <p>Hover over me!</p>
        {/if}
    </div>
</Hoverable>

Note that hovering variable is not declared in the script but could be used inside Hovering.

15. Context API

a. setContext and getContext

https://svelte.dev/tutorial/context-api

Svelte's Context API is similar to that of React;

Only decendant child components can access context data using getContext expoed via setContext in the parent.

store is more like Zustand where state is avaiable anywhere in the component hierachy.

Difference between React & Svelte Context API is that, React's API is declarative using a markup, Svelte imperative, using setContext during component initialization.

React

function App() {
    return (
        <Context.Provider value={value}>
            children can access context value here
        </Context.Provider>
    )
}

16. Special elements

a. svelte:self

https://svelte.dev/tutorial/svelte-self

To recursively refer the current component.

There is a typo in the documentation so filed an issue: https://github.com/sveltejs/svelte/issues/5044

Update: "a file" refers to the current file, not the File component. So the documentation is correct. Clsoed the issue.

b. svelte:component

https://svelte.dev/tutorial/svelte-component

Use <svelte:component this={component}> to load a component dynamically.

To pass props, pass it to <svelte:component>.

<svelte:component text="custom text" this={selected.component}/>

text is then passed to selected.component (not documented in the tutorial just found out by mistake).

Make sure that the dynamic component accepts the prop.

e.g.) RedThing.svelte

<style>
    strong { color: red; }
</style>

<script>
    export let text = "red thing";
</script>

<strong>{text}</strong>

c. svelte:window

https://svelte.dev/tutorial/svelte-window

It's a declarative way to add events to window object.

d. svelte:window bindings

https://svelte.dev/tutorial/svelte-window-bindings

Turns out, you can also bind to some of window's properties, not just events.

e. svelte:body

https://svelte.dev/tutorial/svelte-body

This lets you bind events declaratively in the document.body.

f. svelte:head

https://svelte.dev/tutorial/svelte-head

Injecting content inside <html><head>.

No need for react-helmet like 3rd party library.

g. svelte:options

https://svelte.dev/tutorial/svelte-options

advanced Svelte compiler options.

Most notably, you can specify immutibility to optimize component render in a list.

17. Module context

a. Sharing code

https://svelte.dev/tutorial/sharing-code

This looks like a "static" variable avaiable throughout the all the instances of a component.

Possibly a prototype value.

b. Exports

https://svelte.dev/tutorial/module-exports

Exporting within module level script can be imported from another Svelte component.

18. Debugging

a. The @debug tag

https://svelte.dev/tutorial/debug

The better "console.log" :p

Photo by William Krause on Unsplash