Craft By Zen by Jeremy Wong

What is Feature Management?

A feature flag is a decision point in your code that can change the behavior of your application.

Temporary flags are often used to safely deploy changes to your application or to test new behaviors against old ones. After a new behavior is being used by 100% of your users, the flag is intended to be removed.

Permanent flags give you a way to control the behavior of your application at any time. You might use a permanent flag to create a kill-switch or to reveal functionality only to specific users.

Feature Flags Are Context Sensitive

The code path token can change based on the context provided; for example, the user’s identity, the plan they’ve paid for, or any other data.

Feature Flags Are Deployment Agnostic

Feature flags can be used to control which users can see each change. This decouples the act of deploying from the act of releasing.

Use Cases for Flags

• Release - A temporary flag that initially serves false to all targets, then progressively rolls out true to targets until it reaches 100%
• Kill Switch - A permanent safety mechanism used to shut off non-core functionality or third-party tools in an emergency
• Experiment - A flag to test a hypothesis and provide continuous optimization using beta users and A/B tests
• Migration - A temporary flag used to migrate data or systems while keeping your application available and disruption free

These are the ones advertised by LaunchDarkly. There are many more use cases, and they allow for customization.

What is LaunchDarkly?

• LaunchDarkly is a company that provides feature flags as a service.
• At work, flags are served and managed by LaunchDarkly’s services.
• LaunchDarkly is integrated through streaming via web sockets, meaning each web app user session receives messages only when necessary. Changes can be pushed out to clients in real time.

How I use flags in practice

In our codebase, we have a custom React hook wrapped around the SDK that returns the flag value that we can use programmatically.

const [specificFlag] = useFeatureFlags([
  {
    flag: "specificFlagKey",
    defaultValue: false,
  },
]);

From here, we usually add conditional logic to toggle the flag logic to the target code. We can also use the same method to do the same on the server-side as well.

Adding User Context

LaunchDarkly uses context to target which flags should be on or off. The user’s context, known in LaunchDarkly as identity, must be used when initializing the application.

Anonymous Users

On initialization, a user session will be identified as an anonymous user. This is because in the initialization, the user’s session token (access token) has not been verified yet. Because we want to use flags for public users as well, i.e. those not logged into the app, we initialize the Provider before the token check.

An anonymous user has two attributes:

• key - a unique identifier for the anonymous user and a field on the ldUser type.
• anonymous - a field on the ldUser type that notes if a user is anonymous or not. Stored as a Boolean.

Authenticated Users

Once the user authenticates, and the application has retrieved the user context, we identifies the user using the ldClient.identify function. In this identify function, we pass along the following information about our user:

• key: Our user’s unique identifier (as a uuid)
• anonymous: false
• email: the user’s email address

In addition, we pass along some custom fields that we can use to narrow down the user’s targeting. This includes their role and their organization, since our app is a multi-tenant.

If this user has already been added to LaunchDarkly, their flag profile will be returned.

If this user is new, LaunchDarkly will automatically create this user, create their flag profile, and be returned.

Logout

On logout, the application re-identifies the user using the ldClient.identify function. Since the application has a logout hook, we add a handler to identify the user to be an anonymous user again. This resets all flags to switch over for anonymous users.

When do we change our flags?

• Per Release - For each release, our release team has a list of flags to modify, including toggling targeting and changing rules and segments per rules.
• On Market Support - There may be a request to make a non-release changes. These include new customer onboarding and turning on a feature for an existing customer.

Deployments

There are different types of deployments:

• Canary Releases - User groups who would like to opt in
• Ring Deployments - Different user segments at a time - e.g. beta or power users
• Percentage-based Deployments - Start with low percentage, then move to higher. For operational changes

Each of these can be implemented using feature flags.

Feature flags and blue/green deploys are complementary techniques. Although there are areas of overlap, each approach has distinct benefits, and the best strategy is to use both.

Testing

It isn’t necessary (or even possible) to test every combination of feature flags. Testing each variation of a flag in isolation (using default values for the other flags) is usually enough, unless there’s some known interaction between certain flags.

Here’s an example using jest and LaunchDarkly’s mock testing library.

import { mockFlags } from 'jest-launchdarkly-mock';

it('tests with the flag on' , () => {
  mockFlags({
    [FLAG_IN_QUESTION]: true,
  });
  // Write your test here
});

it('tests with the flag off' , () => {
  mockFlags({
    [FLAG_IN_QUESTION]: false,
  });
  // Write your test here
});

Flag Maintenance

Cleaning up flags aggressively is the key to preventing technical debt from building up. There’s no royal road to flag cleanup, but there are some processes that make it manageable.

A stale flag is a temporary flag that is no longer in use and has not been cleaned up. Too many stale flags are a form of technical debt and an antipattern that you should avoid.

At work, we follow a practice to do it prior to any major release. This is about every 3 to 4 months.

Questions you should be able to answer now

• What is feature management?

  A decision point in your code that can change the behavior of your application.

• What is the difference between a temporary vs. a permanent flag?

  A temporary flag will ultimately be removed from the application. A permanent won’t and will stay as a kill switch.

• How do flags configured in LaunchDarkly get delivered to our applications?

  LaunchDarkly uses streaming via web sockets.

• How can flag management be resilient to failures?

  LaunchDarkly has multiple fallbacks. If their CDN goes down, it goes to their service. If their service goes down, you can route it to an external service like their relay proxy. If all of those go down, then there will be cached results from the last sucessful response. And if this is a first time request, then a fallback default value is used.

Learn More

• LaunchDarkly’s The Definitive Guide to Feature Management
• LaunchDarkly’s architecture
• Guide to Effective Feature Management

I keep a list of projects I want to work on called “Someday Builds”. Many of these are bespoke apps that I know could help me, like an automation. However, automations take time to build, and typically I’ll be able to finish that task far faster than I can build the automation to reduce that overhead.

Case in point, I wanted to build a chrome extension that by running the extension, the clipboard takes the head title and the full, cleaned link, and copies it in markdown format. The reason I want this is to add quick links to my daily notes without having to find the title of the article, put it in the markdown format, grab a clean link, then add that to the parentheses in the markdown format. Also, Obsidian loves to grab headings, so I will get a # symbol for the description of the link. It’s a few extra keystrokes, and really not worth the efforts (about an extra few seconds of my day, plus some extra effort).

Of course, the time to build is reduced to an hour of work with the help of ChatGPT.

Prompt

I want you to act as a programmer. You have a deep knowledge of writing chrome extensions and understand the best practices. I will provide the purpose of the application and a feature set. If there are any ambiguities in the features, please pause in the next step and clarify questions using a numerical list format. Next, you will come up with the basic outline for the code as pseudocode before writing the program. The next message you will ask me is what the feature set is.

Want to build a chrome extension that by running the extension, the clipboard takes the head title and the full, cleaned link, and copies it in markdown format. The chrome extension takes the webpage metadata and extracts the title. Then, it takes the URL. The output should be a string that is copied to the clipboard in markdown format as follows [Title](Link). I want the link to be clean, so no url queries like utm should be added. We can also register a shortcut that can trigger the extension. There should be a settings menu to modify this shortcut. Also, the settings menu should have a modifier for the output format. The name of this extension should be called “Copy Link to Markdown”.

Installing the Chrome Extension Locally

It’s been awhile since I’ve done this, so I Google searched an article to help me. I used the Chrome dev team’s hello world extension as a guide.

Developing the Extension

The first generated codebase did not work. Of course, my prompt above says to pseudocode it first, which was a struggle because there were actual code snippets with a bunch of comments where the code should be. So I had to continue prompting it to give me the final code.

After about 15 minutes, I got the code working. That was after passing it back and forth a few errors and working through those one at a time. Then I saw opportunities everywhere of what I wanted it to do next, as well as places I knew where the codebase needs to be refactored.

I made it generate an image for the extension icon.

For whatever reason, the extension shortcut key needed to be set differently, so I had to use a different menu for that.

Final Thoughts

I placed the extension on Github where you can play with it today. There’s a lot more work I need to do to make this extension publishable. But for a v1, it’s good enough.

The total development time was a little over an hour, and I’m happy about that because I’m already using it. And I can tell it makes a huge difference because I save links all of the time in my daily notes.

For my GitHub repo, I wanted to rename the remote master branch to main.

These instructions helped the process.

Go to Settings, then Branches, then edit the master branch. Rename them to main.

You will have to do it locally as well. The command for local machine is as follows.

git branch -m master main

Afterward, you may need to reattach main to origin/main. Follow the instructions on the terminal as necessary.

Why change to main?

This ZDNet article covers GitHub to replace “master” with alternative term to avoid slavery references. It took them awhile, so many of my old repos haven’t been updated accordingly.

I needed a regular expression for checking if a number has 1 decimal point. Here’s the regular expression ChatGPT came up with: /^\d+(\.\d{1})?$/

Of course, it wasn’t actually the correct requirement. It needed to check if it’s an integer (no decimal points). And if it is a decimal point, it can be at most one.

I screwed up and tried to pair two quantifiers together. So if you have ? and you want to use {0,1}, you can’t do {0.1}?.

And I didn’ need the group, although in retrospect, using the quantifier on the group works, but removing the group makes the ? obsolete.

Here’s what I ultimately came up with.

function validateToOneOrNoDecimalPoint(number) {
    // Regular expression to match numbers with either 0 or 1 decimal point (optional)
    const regex = /^\d+\.?\d{0,1}$/;
    return regex.test(number);
}

// Example usage:
console.log(validateToOneOrNoDecimalPoint(3.5));   // true
console.log(validateToOneOrNoDecimalPoint(10));    // true
console.log(validateToOneOrNoDecimalPoint(2.34));  // false (more than one decimal point)
console.log(validateToOneOrNoDecimalPoint(5.));    // true (no decimal point)
console.log(validateToOneOrNoDecimalPoint(5));     // true (no decimal point)

And I added even more test cases, and used regex.match over regex.test. Subtle difference.

I have a bunch of files I want to rename using the rename utility.

If you’ve installed the rename utility on your Mac, you can use it to mass rename files in the terminal. The rename utility typically follows a specific syntax, and it’s quite powerful for renaming multiple files according to certain patterns or rules.

Here’s a basic example of how you can use the rename utility:

rename 's/old_pattern/new_pattern/' files_to_rename

For my markdown files, I have the following

rename 's/-clearlabs//' *-clearlabs.md

When dealing with filenames that contain spaces, you’ll need to escape those spaces in your command. Here’s how you can do it using the rename command:

rename 's/ Clear Labs//' *.md

This command will remove the substring ” Clear Labs” (including the space) from all .md files in the current directory.

Svelte is a component-based JavaScript framework that compiles your code at build time rather than at runtime. This means that instead of shipping a bulky framework to the client, Svelte generates highly optimized vanilla JavaScript code that updates the DOM. This approach results in faster load times and better performance. Additionally, Svelte has a small API surface area, making it easy to learn and use.

• Svelte Website
• Svelte FAQ
• Svelte Official Tutorial

Core Concepts using an example

The following example is a simple counter application that teaches the basics of Svelte.

<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<main>
  <h1>The count is {count}</h1>
  <button on:click={decrement}>-</button>
  <button on:click={increment}>+</button>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
  }
  button {
    margin: 0 1em;
    padding: 0.5em 1em;
  }
</style>

1. Reactive Variables: let count = 0; This variable is reactive. Any changes to count will automatically update the DOM wherever count is referenced.
2. Event Handling: The on:click directive is used to attach click event listeners to both buttons, calling the increment and decrement functions accordingly.
3. Inline Handlers: If you prefer, you could inline these functions directly in the on:click handler for something even simpler, like on:click={() => count += 1}.
4. Conditional Rendering: Suppose you want to display a message when the count is above a certain threshold. You can use an {#if} block directly in your HTML:

{#if count > 10}
  <p>You have reached a count greater than 10!</p>
{/if}

Svelte Components

Expanding our simple counter application by breaking it down into smaller components, which is a common practice for improving the organization and reusability of your code in larger applications. We’ll create two components: CounterDisplay for showing the current count and CounterButton for the increment and decrement buttons.

Create a new file named CounterDisplay.svelte in the src directory. This component will be responsible for displaying the count.

<script>
  // This component accepts a prop named `count`
  export let count;
</script>

<h1>The count is {count}</h1>

Create another file named CounterButton.svelte in the src directory. This component will represent a button that can increment or decrement the counter.

<script>
  // The component accepts two props: the button text and the click action
  export let text;
  export let handleClick;
</script>

<button on:click={handleClick}>{text}</button>

Now, update the App.svelte file to use these new components.

<script>
  import CounterDisplay from './CounterDisplay.svelte';
  import CounterButton from './CounterButton.svelte';

  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<main>
  <CounterDisplay {count} />
  <CounterButton text="-" handleClick={decrement} />
  <CounterButton text="+" handleClick={increment} />
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
  }
</style>

1. Props: Components in Svelte can accept “props”, which are custom attributes passed into components. In our case, CounterDisplay accepts a count prop, and CounterButton accepts text and handleClick props. This allows the components to be reusable and dynamic. Props are reactive, where any prop changes will trigger changes in the component.
2. Component Interaction: The App.svelte component manages the state (count) and functions (increment and decrement) and passes them down to the child components. This demonstrates a fundamental pattern of component-based architecture: lifting state up and passing data and behavior down through props.
3. Event Handling in Child Components: The CounterButton component receives a function (handleClick) as a prop and attaches it to the button’s click event. This is a common pattern for handling events in child components and allowing parent components to define the behavior.

Slots in Svelte

Slots in Svelte allow you to create components that can accept content dynamically from their parents. This is similar to transclusion or content projection in other frameworks. In other libraries like React, this is handled with children. Slots make components more flexible by letting you inject content into predefined places within a component’s template.

Basic Slot Example

Imagine you’re building a Card component that you want to reuse across your application, but with different content each time.

Card.svelte:

<div class="card">
  <slot></slot> <!-- This is where the parent's content will be injected -->
</div>

<style>
  .card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
  }
</style>

You can use this Card component in a parent component and pass in different content like so:

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

<Card>
  <h2>Title</h2>
  <p>This is some card content.</p>
</Card>

<Card>
  <p>Another card with different content.</p>
</Card>

Named Slots

Svelte also supports named slots, which allow you to define multiple slots within a single component.

Card.svelte updated with named slots:

<div class="card">
  <header>
    <slot name="header"></slot> <!-- Named slot for header content -->
  </header>
  <slot></slot> <!-- Default slot for main content -->
  <footer>
    <slot name="footer"></slot> <!-- Named slot for footer content -->
  </footer>
</div>

And you can use it like this:

<Card>
  <h2 slot="header">Card Title</h2>
  <p>Main content goes here.</p>
  <p slot="footer">Footer content.</p>
</Card>

Basic Usage of Module Scripts

Module scripts in Svelte introduce a powerful feature for managing reusable code and behaviors in your components. A module script runs once when a component is first imported, rather than each time a component instance is created. This makes it ideal for defining shared logic, helpers, and stores that can be used across all instances of a component.

To define a module script in a Svelte component, you use the <script context="module"> tag. Anything declared inside this tag is scoped to the module, not to individual instances of the component. This is particularly useful for situations where you want to maintain a shared state or perform actions that only need to happen once, regardless of how many times a component is instantiated.

Here’s a simple example:

Counter.svelte:

<script context="module">
  // This count is shared across all instances of Counter.svelte
  let count = 0;

  export function increment() {
    count += 1;
    console.log(count);
  }
</script>

<script>
  // This script block is for instance-specific logic and state
  import { onMount } from 'svelte';

  onMount(() => {
    // Call the shared increment function when the component mounts
    increment();
  });
</script>

<p>This component has been instantiated.</p>

In this example, the increment function and the count variable are defined in a module script and shared across all instances of Counter.svelte. Every time a new instance is created, it logs the incremented count, demonstrating that count is shared and persists across instances.

Use Cases for Module Scripts

• Defining shared utility functions: For components that require common functionality, you can define utility functions in a module script to avoid duplicating code.
• Creating singleton stores: If you need a store that’s shared across all instances of a component, defining it in a module script ensures that you have a single, shared store.
• Optimizing performance: Since code in a module script is executed only once, it’s an excellent place for performing expensive operations like setting up subscriptions or fetching data that should be done once per component type, rather than once per instance.

Advanced Component Composition

Module scripts complement Svelte’s component composition model by allowing you to abstract and share logic effectively. For instance, you can combine module scripts with slots, props, and context to create highly reusable and customizable components.

Imagine a scenario where you’re building a library of UI components. Using module scripts, you can provide a consistent API for configuring these components globally (like themes or internationalization settings) while using instance scripts for configuration that is specific to a component’s use case.

Considerations

• Scoping: Remember that variables and functions declared in module scripts are not directly accessible in the instance script or the component’s markup. To use them in the component, they need to be exported from the module script and then imported or used in the instance script.
• Singleton behavior: Since the module scope is shared across instances, be mindful of side effects that might occur when modifying shared state. This is similar to how static variables would behave in class-based languages.

Stores for State Management

Svelte Stores takes a reactive approach to state management, which is different than Redux. At the core of it, see the following.

1. Creating a Store: The simplest form of a store in Svelte is a writable store. For example, creating a store to hold a number could look like this:

   import { writable } from "svelte/store";
   const count = writable(0);

2. Subscribing to a Store: To access the value of a store outside of a Svelte component, you subscribe to it. This might be where syntax can get tricky. Use the $: syntax intuitive for reactive statements. Alternatively, you can directly subscribe using .subscribe method.

3. Updating Store Values: Svelte provides a few patterns for updating the store’s value, such as set, update, and using the auto-subscription feature within components with the $ prefix.

4. Reactivity: One of the powerful features of Svelte is its built-in reactivity. Reactive variables automatically propagate through your application.

Derived Stores

Derived stores let you create a store based on other store(s), automatically updating when the underlying stores change. This is useful for calculating derived values or aggregating data from multiple sources.

Example:

Suppose you have a store for a list of items and another derived store that calculates the total number of items.

<script>
  import { writable, derived } from 'svelte/store';

  const items = writable([]);

  const itemCount = derived(items, $items => $items.length);
</script>

In my Jeopardy app, I used the derived function to determine if all of the questions have been answered.

import { writable, derived } from "svelte/store";

function gameRoundStatus() {
  const { subscribe, set, update } = writable([]);

  return {
    subscribe,
    initialize: (categories) => set(categories),
    setAnswered: ({ categoryIndex, clueIndex }) =>
      update((categories) => {
        categories[categoryIndex].clues[clueIndex].answered = true;
        return categories;
      }),
    reset: () => set([]),
  };
}

// This becomes a reactive variable
export const gameRound = gameRoundStatus();

// I need to know if the game board is done playing using this derived status
export const allAnswered = derived(
  gameRoundStatus,
  ($gameRoundStatus) =>
    $gameRoundStatus.length > 0 &&
    $gameRoundStatus.every((category) =>
      category.clues.every((clue) => clue.answered)
    )
);

Store Bindings

Svelte allows you to bind component controls directly to store values, simplifying state management further.

Example:

<script>
  import { writable } from 'svelte/store';

  const count = writable(0);
</script>

<input type="number" bind:value={$count}>

Complex Store Structures

For applications with complex state, consider structuring your store as a JavaScript object or even using a custom store. Custom stores can encapsulate more complex behavior, such as asynchronous operations or integration with external data sources.

Creating a Custom Store:

function createCustomStore() {
  const { subscribe, set, update } = writable(initialValue);

  return {
    subscribe,
    // Custom methods to interact with the store
    increment: () => update((n) => n + 1),
    decrement: () => update((n) => n - 1),
    reset: () => set(initialValue),
    // More complex operations...
  };
}

Slots and advanced state management techniques in Svelte offer a combination of simplicity and power, enabling you to build complex and dynamic applications with less code and more declarative, readable structures.

Actions

Svelte actions are a powerful and somewhat under-appreciated feature that provide a neat way to interact with DOM elements directly. Actions allow you to attach reusable behavior to DOM elements, which can be especially useful for integrating third-party libraries or creating custom directives that enhance your application’s functionality without cluttering your components with imperative code.

An action is simply a function that is called when a DOM element is created, and it returns an object that can contain lifecycle methods like update and destroy. Here’s a basic outline of how actions work:

1. Creating an Action: To create an action, you define a function that takes at least one argument, the element it’s attached to. This function can return an object with optional update and destroy methods. The update method is called whenever the parameters of the action change, and destroy is called when the element is removed from the DOM.

2. Using an Action: You apply an action to a DOM element in your Svelte component using the use directive.

Here’s a simple example to illustrate:

Defining a Simple Action

Let’s say you want to create an action that automatically focuses an input element when the component mounts:

// focus.js
export function autofocus(node) {
  // Directly focus the DOM node
  node.focus();

  // No need for update or destroy in this case, but they could be added if necessary
}

Applying the Action in a Component

You can then use this action in any component like so:

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

<input use:autofocus />

This example is quite basic, but actions can be much more complex and powerful. For instance, you could create an action to:

• Implement drag-and-drop functionality by attaching mouse event listeners to the element.
• Integrate with third-party libraries, such as initializing a date picker on an input element.
• Add custom animations or transitions that are not easily achieved through Svelte’s native capabilities.

Svelte makes adding animations and transitions to your web applications straightforward and intuitive, enhancing user experience with visual feedback and smooth transitions. Let’s explore how to add a simple fade transition to elements in a Svelte application, and then we’ll look at a more interactive example.

Transitions and Animations

Svelte’s transition functions, such as fade, are part of the svelte/transition module. To use a fade transition on an element, first import fade from this module.

Example:

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

<button on:click={() => (isVisible = !isVisible)}>
  Toggle
</button>

{#if isVisible}
  <div transition:fade={{ duration: 300 }}>
    Fade me in and out
  </div>
{/if}

In this example, clicking the “Toggle” button shows or hides the div element with a fade effect over 300 milliseconds.

Interactive Animation Example

For a more interactive example, let’s create a list where items can be added and removed, each with an animation. We’ll use the slide transition to make items slide in and out.

First, add slide to your imports:

<script>
  import { slide } from 'svelte/transition';
  let items = ['Item 1', 'Item 2', 'Item 3'];
</script>

Now, create a function to add a new item and another to remove an item:

function addItem() {
  items = [...items, `Item ${items.length + 1}`];
}

function removeItem(index) {
  items = items.filter((_, i) => i !== index);
}

Finally, render the list with transitions on each item:

<button on:click={addItem}>Add Item</button>

<ul>
  {#each items as item, index (item)}
    <li transition:slide={{ duration: 200 }}>
      {item}
      <button on:click={() => removeItem(index)}>Remove</button>
    </li>
  {/each}
</ul>

In the #each block, we use the slide transition to animate the addition and removal of list items. The (item) key ensures that Svelte can uniquely identify each item for correct animation, especially during removals.

Customizing Transitions

Svelte’s transitions can be customized extensively via parameters. For both fade and slide, you can adjust properties like duration, delay, and easing (to control the animation’s timing function). Svelte also supports custom CSS transitions and animations, giving you complete control over your animations’ look and feel.

Using the Basic Svelte Template

If you’re looking for something simpler or specifically want to work with just the Svelte library without the additional features offered by SvelteKit, you can start with the basic Svelte template.

1. Scaffold a New Svelte Project:

   npx degit sveltejs/template svelte-app
   cd svelte-app

   This creates a new Svelte project in a directory called svelte-app.

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm run dev

Let’s go full-stack

The developers behind Svelte created SvelteKit for building full-stack applications. I’ll expand on it in the future.

Conclusion

I love Svelte. Especially for my own personal website. I will continue to use it to build more complex apps as my go-to library.

I’ll leave you with the Svelte documentary.

I started taking notes on Morgan Housel’s book, The Psychology of Money, and I wanted to have an automatic note created in my Obsidian vault.

I have Nick Milo’s Ideaverse installed and wanted to take advantage of the QuickAdd plugin. The example they give for the BookFinder script was easy to follow and extend.

I created a gist for it. The original script did not have much error handling. Something to expand on in the future is to have that error handling within Obsidian, which I would like to see.

Also, I used the suggester API to give the user options on which returned item they care about using the Google Books API.

And here’s my personal template using Obsidian properties.

---
by: "{{VALUE:authors}}"
title: "{{VALUE:title}}"
tags:
  - "#highlights/waiting"
in:
  - "[[Books]]"
year: {{VALUE:year}}
published: "{{VALUE:publishedDate}}"
related: 
category: "{{VALUE:categories}}"
pages: "{{VALUE:pageCount}}"
publisher: "{{VALUE:publisher}}"
isbn10: "{{VALUE:isbn10}}"
isbn13: "{{VALUE:isbn13}}"
created: "{{date:YYYY-MM-DD}}"
---

# {{VALUE:title}}

![poster]({{VALUE:Poster}})  

- Subtitle: {{VALUE:subtitle}}

### My Notes  


  
### Details  

{{VALUE:description}}

If you have any questions about the script, please let me know. I may create a personal repo of different Macros that fetch data from other APIs.

I was listening to the latest Latent Space podcast with Steve Ruiz of tldraw. (You can watch the full video below). What I was taken back by is the “Make Real” demo that included different approaches to using GPT4-Vision. Of course, my first instinct was to play test it and see what I could make and where the limitations are.

As a part-time designer, I was curious to see a working demo of a wireframe I had in mind.

Demo

“Make Real” outputs in HTML, CSS, and JS (with tailwind), and I was able to cobble together this little demo of telling you the timezones based off of the selected input. One thing to note is the component below is actually a Svelte component, which I created using ChatGPT to convert the HTML to Svelte.

And of course, I’ve made slight modifications so there are more timezones than the ones given to me.

Design aesthetic aside, this is a fully functional prototype that I could reuse and prettify. With a little bit of coding knowledge, I can be off racing towards putting this in a production-ready app. Of course, the way to make these modifications are easier if you have some implementation knowledge of what you’re doing.

Thoughts on Make Real

It’s not an career killer for front-end engineers. We are far from that. Instead, these should be seen as tools to augment our work and allow us to spend more energy playing over mulling over small implementation details that might get changed later.

With each iteration, I was able to get “Make Real” to output different variations of the same idea, to really see what the realm of possibilities are. There’s a balance though of giving annotations and adding or subtracting more to the drawings. For example, when I asked it to give me 50 timezone selections from the most populated areas on the earth, it only gave me 10 items. And even then, ChatGPT came up with TZs not in use.

In a different iteration, I wanted an explorable map. When I asked it to give me a map of where this selected timezone was, it gave me a placeholder. Not so helpful.

The following is the video with Steve Ruiz, and I highly recommend watching it to see more.

Where do I think we can go from here

I haven’t tried state machine drawings yet, and I think that can help extend what we can do with drawings. I also would love to explore what other people have done as helpful aids for the drawings to get GPT4-Vision to come up with something better.

Try it out today by giving it your OpenAI API Key.

What is the 7 GUIs benchmark?

The 7 GUIs is a benchmark for comparing different GUI frameworks, proposed by Eugen Kiss. See his explanation below.

There are countless GUI toolkits in different languages and with diverse approaches to GUI development. Yet, diligent comparisons between them are rare. Whereas in a traditional benchmark competing implementations are compared in terms of their resource consumption, here implementations are compared in terms of their notation. To that end, 7GUIs defines seven tasks that represent typical challenges in GUI programming. In addition, 7GUIs provides a recommended set of evaluation dimensions.
— Eugen Kiss

I’m going to walkthrough each GUI using Svelte, and annotate the code.

Counter

The task is to build a frame containing a label or read-only textfield T and a button B. Initially, the value in T is “0” and each click of B increases the value in T by one.

Link

Let’s walkthrough the code.

<script>
  // Initialize the counter with "0" (as it says in the spec)
  let count = 0;
</script>

<!-- Display the count, as a number input -->
<input
  type="number"
  bind:value={count}
/>
<!-- Add a button that will increment the counter by 1 with each click. -->
<button
  on:click={() => (count += 1)}>count</button
>

Temperature

The task is to build a frame containing two textfields T_C and T_F representing the temperature in Celsius and Fahrenheit, respectively. Initially, both T_C and T_F are empty. When the user enters a numerical value into T_C the corresponding value in T_F is automatically updated and vice versa. When the user enters a non-numerical string into T_C the value in T_F is not updated and vice versa. The formula for converting a temperature C in Celsius into a temperature F in Fahrenheit is C = (F - 32) * (5/9) and the dual direction is F = C * (9/5) + 32.

Link

Code walkthrough.

<script lang="ts">
  // Initialize the values of celsius and fahrenheit
  let c = 20;
  let f = 68;

  // Given the value from Celsius, update Fahrenheit
  function setBothFromC(value: number): void {
    // The + is to convert the string to a number
    c = +value;
    // Use the formula from the spec to update fahrenheit
    f = +(32 + (9 / 5) * c).toFixed(1);
  }

  // Given the value from Fahrenheit, update Celsius
  function setBothFromF(value: number): void {
    f = +value;
    // Use the formula from the spec to update celsius
    c = +((5 / 9) * (f - 32)).toFixed(1);
  }
</script>

<!--
Add two different inputs. Since the inputs are two-way bound by the values,
`c` and `f`, we can add an event listener to run the function to convert the
other value.
-->
<input
  value={c}
  on:input={(e) => setBothFromC(e.target.value)}
  type="number"
/>
°C =
<input
  value={f}
  on:input={(e) => setBothFromF(e.target.value)}
  type="number"
/>
°F

Flight Booker

The task is to build a frame containing a form with three textfields The task is to build a frame containing a combobox C with the two options “one-way flight” and “return flight”, two textfields T₁ and T₂ representing the start and return date, respectively, and a button B for submitting the selected flight. T₂ is enabled iff C’s value is “return flight”. When C has the value “return flight” and T₂’s date is strictly before T₁’s then B is disabled. When a non-disabled textfield T has an ill-formatted date then T is colored red and B is disabled. When clicking B a message is displayed informing the user of his selection (e.g. “You have booked a one-way flight on 04.04.2014.”). Initially, C has the value “one-way flight” and T₁ as well as T₂ have the same (arbitrary) date (it is implied that T₂ is disabled).

Link

<script>
  const DAY_IN_MS = 86400000
  const tomorrow = new Date(Date.now() + DAY_IN_MS);

  // Create an array of year, month, day, in this format: YYYY-MM-DD
  let start = [
    tomorrow.getFullYear(),
    pad(tomorrow.getMonth() + 1, 2),
    pad(tomorrow.getDate(), 2),
  ].join("-");

  // our reactive variables
  let end = start;
  let isReturn = false;

  // Running statements reactively, updating the variables when they are changed
  $: startDate = convertToDate(start);
  $: endDate = convertToDate(end);

  // Click handler for the button
  function bookFlight() {
    // Determine type of return
    const type = isReturn ? "return" : "one-way";

    let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
    if (type === "return") {
      message += ` and returning ${endDate.toDateString()}`;
    }

    alert(message);
  }

  // Convert a string in the format YYYY-MM-DD to a Date object
  function convertToDate(str) {
    const split = str.split("-");
    return new Date(+split[0], +split[1] - 1, +split[2]);
  }

  // Pad a number with leading zeros
  function pad(x, len) {
    x = String(x);
    while (x.length < len) x = `0${x}`;
    return x;
  }
</script>

<!-- Create your select input for one-way or return flight option -->
<select bind:value={isReturn}>
  <option value={false}>one-way flight</option>
  <option value={true}>return flight</option>
</select>

<!-- Bind the inputs -->
<input type="date" bind:value={start} />
<input type="date" bind:value={end} disabled={!isReturn} />

<!-- Attempt to book flight -->
<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}
  >book</button
>

Timer

The task is to build a frame containing a gauge G for the elapsed time e, a label which shows the elapsed time as a numerical value, a slider S by which the duration d of the timer can be adjusted while the timer is running and a reset button R. Adjusting S must immediately reflect on d and not only when S is released. It follows that while moving S the filled amount of G will (usually) change immediately. When e ≥ d is true then the timer stops (and G will be full). If, thereafter, d is increased such that d > e will be true then the timer restarts to tick until e ≥ d is true again. Clicking R will reset e to zero.

Link

<script>
  // It turns out, you can't run this in Astro without saying this component is client only
  import { onDestroy } from "svelte";

  // Start elapsed at 0 milliseconds
  let elapsed = 0;
  // Set the range input to be 5 seconds / 5000 milliseconds
  let duration = 5000;

  let last_time = window.performance.now();
  let frame;

  // IIFE for animation loop
  (function update() {
    // pass in the function for the animation frame (infinite looping)
    frame = requestAnimationFrame(update);

    // performance.now() is like Date.now(), but more accurate to tenths of a milliseconds
    const time = window.performance.now();

    // Take the minimum of the time elapsed and add it to the new elapsed time
    elapsed += Math.min(time - last_time, duration - elapsed);

    last_time = time;
  })();

  // When the component is destroyed, cancel the animation frame
  onDestroy(() => {
    cancelAnimationFrame(frame);
  });
</script>

<!-- Create the label and use the progress tag to show the time elapsed vs duration -->
<label>
  elapsed time:
  <progress value={elapsed / duration} />
</label>

<div>{(elapsed / 1000).toFixed(1)}s</div>

<label>
  duration:
  <!-- Bind the input to the duration. Max 20 seconds -->
  <input type="range" bind:value={duration} min="1" max="20000" />
</label>


<!-- Allow the user to reset the timer -->
<button on:click={() => (elapsed = 0)}>reset</button>

CRUD

The task is to build a frame containing the following elements: a textfield T_prefix, a pair of textfields T_name and T_surname, a listbox L, buttons B_C, B_U and B_D and the three labels as seen in the screenshot. L presents a view of the data in the database that consists of a list of names. At most one entry can be selected in L at a time. By entering a string into T_prefix the user can filter the names whose surname start with the entered prefix—this should happen immediately without having to submit the prefix with enter. Clicking B_C will append the resulting name from concatenating the strings in T_name and T_surname to L. B_U and B_D are enabled if an entry in L is selected. In contrast to B_C, B_U will not append the resulting name but instead replace the selected entry with the new name. B_D will remove the selected entry. The layout is to be done like suggested in the screenshot. In particular, L must occupy all the remaining space.

<script>
  // Have some people to start with
  let people = [
    { first: "Hans", last: "Emil" },
    { first: "Max", last: "Mustermann" },
    { first: "Roman", last: "Tisch" },
  ];

  // Initialize the bound variables
  let prefix = "";
  let first = "";
  let last = "";
  // Initialize the selected item index
  let i = 0;

  // Reactive statements when the changes
  $: filteredPeople = prefix
    ? people.filter((person) => {
        const name = `${person.last}, ${person.first}`;

        // Filter based off first or last name
        return name.toLowerCase().startsWith(prefix.toLowerCase());
      })
    : people;

  // Reactively change the selected when filtered people
  $: selected = filteredPeople[i];

  // Reset all inputs when new selection made
  $: reset_inputs(selected);

  // Create a new person
  function create() {
    people = people.concat({ first, last });
    i = people.length - 1;
    first = last = "";
  }

  // Update the selected person
  function update() {
    selected.first = first;
    selected.last = last;
    people = people;
  }

  // Remove the selected person
  function remove() {
    // Remove selected person from the source array (people), not the filtered array
    const index = people.indexOf(selected);
    people = [...people.slice(0, index), ...people.slice(index + 1)];

    first = last = "";
    i = Math.min(i, filteredPeople.length - 2);
  }

  // Reset the input for first and last names
  function reset_inputs(person) {
    first = person ? person.first : "";
    last = person ? person.last : "";
  }
</script>

<input
  placeholder="filter prefix"
  bind:value={prefix}
/>

<select bind:value={i} size={5}>
  <!-- Loop through the filtered people -->
  {#each filteredPeople as person, i}
    <option value={i}>{person.last}, {person.first}</option>
  {/each}
</select>

<!-- Create inputs for first and last names -->
<label
  ><input
    bind:value={first}
    placeholder="first"
  /></label
>
<label
  ><input
    bind:value={last}
    placeholder="last"
  /></label
>

<!-- CRUD operators -->
<div class="buttons">
  <button on:click={create} disabled={!first || !last}>create</button>
  <button on:click={update} disabled={!first || !last || !selected}
    >update</button
  >
  <button on:click={remove} disabled={!selected}>delete</button>
</div>

Circle Drawer

The task is to build a frame containing an undo and redo button as well as a canvas area underneath. Left-clicking inside an empty area inside the canvas will create an unfilled circle with a fixed diameter whose center is the left-clicked point. The circle nearest to the mouse pointer such that the distance from its center to the pointer is less than its radius, if it exists, is filled with the color gray. The gray circle is the selected circle C. Right-clicking C will make a popup menu appear with one entry “Adjust diameter…”. Clicking on this entry will open another frame with a slider inside that adjusts the diameter of C. Changes are applied immediately. Closing this frame will mark the last diameter as significant for the undo/redo history. Clicking undo will undo the last significant change (i.e. circle creation or diameter adjustment). Clicking redo will reapply the last undoed change unless new changes were made by the user in the meantime.

Link

<script>
  // Initialize the bound variables
  let i = 0;
  let undoStack = [[]];
  let circles = [];
  let selected;
  let adjusting = false;
  let adjusted = false;

  // On handling click, create circle with default radius 50 px
  function handleClick(event) {
    if (adjusting) {
      adjusting = false;

      // if circle was adjusted,
      // push to the stack
      if (adjusted) push();
      return;
    }

    const circle = {
      cx: event.clientX,
      cy: event.clientY,
      r: 50,
    };

    // Add circles to list of circles. The selected circle is the current circle
    circles = circles.concat(circle);
    selected = circle;

    push();
  }

  function adjust(event) {
    selected.r = +event.target.value;
    circles = circles;
    adjusted = true;
  }

  function select(circle, event) {
    if (!adjusting) {
      event.stopPropagation();
      selected = circle;
    }
  }

  // Use a stack for keeping track of the circles
  function push() {
    const newUndoStack = undoStack.slice(0, ++i);
    newUndoStack.push(clone(circles));
    undoStack = newUndoStack;
  }

  function travel(d) {
    circles = clone(undoStack[(i += d)]);
    adjusting = false;
  }

  function clone(circles) {
    return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
  }
</script>

<!-- Put in the buttons for controls -->
<div class="controls">
  <button on:click={() => travel(-1)} disabled={i === 0}>undo</button>
  <button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}
    >redo</button
  >
</div>

<!-- Draw with an SVG. Bind the click handler -->
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<svg on:click={handleClick}>
  <!-- Draw all of the circles -->
  {#each circles as circle}
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <circle
      cx={circle.cx}
      cy={circle.cy}
      r={circle.r}
      on:click={(event) => select(circle, event)}
      on:contextmenu|stopPropagation|preventDefault={() => {
        // When right-clicking, open the adjuster
        adjusting = !adjusting;
        if (adjusting) selected = circle;
      }}
      fill={circle === selected ? "#ccc" : "white"}
    />
  {/each}
</svg>

<!-- Show the adjuster if adjusting a circle's size -->
{#if adjusting}
  <div class="adjuster">
    <p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
    <input type="range" value={selected.r} on:input={adjust} />
  </div>
{/if}

Cells

The task is to create a simple but usable spreadsheet application. The spreadsheet should be scrollable. The rows should be numbered from 0 to 99 and the columns from A to Z. Double-clicking a cell C lets the user change C’s formula. After having finished editing the formula is parsed and evaluated and its updated value is shown in C. In addition, all cells which depend on C must be reevaluated. This process repeats until there are no more changes in the values of any cell (change propagation). Note that one should not just recompute the value of every cell but only of those cells that depend on another cell’s changed value. If there is an already provided spreadsheet widget it should not be used. Instead, another similar widget (like JTable in Swing) should be customized to become a reusable spreadsheet widget.

Link

This one isn’t in the Svelte documentation, so I found a different implementation that went through it perfectly. Link

Cells is split up into two Svelte components: Cell and Cells.

<!-- Cell.svelte -->
<script>
  // Initialized props
  export let j;
  export let i;
  export let focused;
  export let data;
  export let p;
  export let handleFocus;
  export let handleBlur;
  export let handleKeydown;
  export let handleInput;

  // Keep track of the current key
  let key = j + i;

  // Keep track if a cell is focused
  let hasFocus = false;
  $: if (focused === key && !hasFocus) {
    hasFocus = true;
  } else if (focused !== key && hasFocus) {
    hasFocus = false;
  }
</script>

<!-- When focused, change the cell into an input -->
<!-- Otherwise parse the formula -->
{#if hasFocus}
  <input
    id={"input-" + key}
    value={$data[key] || ""}
    autofocus
    on:focus={() => handleFocus(key)}
    on:blur={() => handleBlur(key)}
    on:keydown={(e) => handleKeydown(e, j, i)}
    on:input={(e) => handleInput(e, key)}
  />
{:else}
  <div>{p.parse($data[key]) || ""}</div>
{/if}

<!-- Cells.svelte -->
<script>
  import Cell from "./Cell.svelte";
  import { data } from "./store.js";
  import { sampleData } from "./sampleData.js";
  import { Parser } from "./parse.js";

  // Initialize with the sample data set
  data.set(sampleData);

  // Create 26 columns w/ the letters of the alphabet
  const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  // Max 100 x 100 cells
  export let shape = [100, 100];
  const rows = range(shape[1]);
  const columns = letterRange(shape[0]);
  const p = new Parser(data, columns, rows);
  let focused;
  let tBody;

  // Create range array
  function range(n) {
    return [...Array(n).keys()];
  }

  // Create letter range
  function letterRange(n) {
    return range(n).map(getNumberAsLetters);
  }

  // Loop through letters
  function getBase26(n) {
    let result = [];
    while (n > 25) {
      let remainder = n % 26;
      result.push(remainder);
      n = Math.floor(n / 26) - 1;
    }
    result.push(n);
    return result.reverse();
  }

  // Get the letter range and join them
  function getNumberAsLetters(n) {
    let arr = getBase26(n);
    return arr.map((num) => LETTERS[num]).join("");
  }

  function handleFocus(key) {
    if (focused !== key) {
      $data[key] = $data[key] || "";
      focused = key;
      setTimeout(() => {
        let target = tBody.querySelector("#input-" + key);
        if (target) {
          target.focus();
          target.setSelectionRange(0, 9999);
        }
      }, 10);
    }
  }

  function handleBlur(key) {
    if (focused === key) focused = undefined;
  }

  function handleInput(e, key) {
    $data[key] = e.target.value;
  }

  function handleKeydown(e, column, row) {
    // Navigate across the spreadsheet with arrow keys (and alt/option key)
    let selector;
    if (e.key === "ArrowUp") {
      let newRow = findAdjacent(rows, row, "before");
      selector = newRow !== null ? column + newRow : null;
    }
    if (e.key === "ArrowDown" || e.key === "Enter") {
      let newRow = findAdjacent(rows, row, "after");
      selector = newRow !== null ? column + newRow : null;
    }
    if (e.key === "ArrowLeft" && e.altKey) {
      let newColumn = findAdjacent(columns, column, "before");
      selector = newColumn !== null ? newColumn + row : null;
    }
    if (e.key === "ArrowRight" && e.altKey) {
      let newColumn = findAdjacent(columns, column, "after");
      selector = newColumn !== null ? newColumn + row : null;
    }

    if (selector) {
      e.preventDefault();
      handleFocus(selector);
    }
  }

  function findAdjacent(arr, value, direction) {
    let index = arr.indexOf(value);
    if (index === -1) return null;
    if (direction === "before")
      return arr[index - 1] === undefined ? null : arr[index - 1];
    if (direction === "after") return arr[index + 1] || null;
    return null;
  }

  function clear() {
    data.set({});
  }
</script>

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <td class="row-key" />
        {#each columns as column}
          <td class="column-key">{column}</td>
        {/each}
      </tr>
    </thead>
    <tbody bind:this={tBody}>
      {#each rows as i}
        <tr id={"row-" + i}>
          <td class="row-key">{i}</td>
          {#each columns as j}
            <td id={j + i} on:click={() => handleFocus(j + i)}>
              <Cell
                {j}
                {i}
                {focused}
                {data}
                {p}
                {handleFocus}
                {handleBlur}
                {handleKeydown}
                {handleInput}
              />
            </td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>
<button on:click={clear}>Clear</button>

There are two utility functions to help out the operations: parse and store (the latter being the Svelte store to save in local state).

// parse.js
export class Parser {
  constructor(store, columns, rows) {
    this.cells = {}
    this.store = store
    this.columns = columns
    this.rows = rows
    this.operations = {
      sum: (a, b) => a + b,
      sub: (a, b) => a - b,
      mul: (a, b) => a * b,
      div: (a, b) => a / b,
      mod: (a, b) => a % b,
      exp: (a, b) => a ** b
    }

    // subscribe to store
    this.store.subscribe(value => {
      this.cells = value
    })
  }

  cartesianProduct(letters, numbers) {
    var result = []
    letters.forEach(letter => {
      numbers.forEach(number => {
        result.push(letter + number)
      })
    })
    return result
  }

  findArrRange(arr, start, end) {
    let startI = arr.indexOf(start)
    let endI = arr.indexOf(end)
    if (startI == -1 || endI == -1 || startI > endI) return []
    return arr.slice(startI, endI + 1)
  }

  getRange(rangeStart, rangeEnd) {
    rangeStart = this.splitOperand(rangeStart)
    rangeEnd = this.splitOperand(rangeEnd)
    let letters = this.findArrRange(this.columns, rangeStart[0], rangeEnd[0])
    let numbers = this.findArrRange(this.rows, rangeStart[1], rangeEnd[1])
    return this.cartesianProduct(letters, numbers)
  }

  splitOperand(operand) {
    return [operand.match(/[a-zA-Z]+/)[0], Number(operand.match(/\d+/)[0])]
  }

  rangeOperation(op, rangeStart, rangeEnd) {
    if (!(this.isWellFormed(rangeStart) && this.isWellFormed(rangeEnd)))
      return this.originalString

    let range = this.getRange(rangeStart, rangeEnd)

    return range
      .map(address => Number(this.parse(this.cells[address])))
      .reduce(this.operations[op])
  }

  singleOperation(op, operand1, operand2) {
    let first = this.parseOperand(operand1)
    let second = this.parseOperand(operand2)

    if (first === null || second === null) return this.originalString

    return this.operations[op](first, second).toString()
  }

  isWellFormed(operand) {
    return /[a-zA-Z]+\d+/.test(operand)
  }

  parseOperand(operand) {
    if (!isNaN(Number(operand))) return Number(operand)
    if (operand in this.cells) return Number(this.parse(this.cells[operand]))
    if (this.isWellFormed(operand)) return 0

    return null
  }

  parseOperation(op, formula) {
    if (!(formula.startsWith('(') && formula.endsWith(')')))
      return this.originalString

    formula = formula.slice(1, formula.length - 1)

    let operationType
    let formulaArr
    if (formula.includes(',')) {
      operationType = 'single'
      formulaArr = formula.split(',')
    } else if (formula.includes(':')) {
      operationType = 'range'
      formulaArr = formula.split(':')
    }

    if (formulaArr.length !== 2) return this.originalString

    if (operationType === 'single')
      return this.singleOperation(op, formulaArr[0], formulaArr[1])

    if (operationType === 'range')
      return this.rangeOperation(op, formulaArr[0], formulaArr[1])

    return this.originalString
  }

  parse(str) {
    this.originalString = str
    if (typeof str !== 'string') return ''
    if (!str.startsWith('=')) return str

    let formula = str.slice(1)
    if (formula.slice(0, 3).toLowerCase() in this.operations) {
      return this.parseOperation(
        formula.slice(0, 3).toLowerCase(),
        formula.slice(3).toUpperCase()
      )
    } else {
      return this.cells[formula] || str
    }
  }
}

// store.js
import { writable } from "svelte/store";

export const data = writable({});

The last file is to load prefilled data, but we don’t need to go over that.

// An example of the sampleData file
export let sampleData = {
  A0: "Data",
  A1: "20",
  A2: "15"
};

SolidJS is a Javascript framework for building fast, declarative UIs on the web. It shares many ideas with React, but does not use the virtual DOM to deliver a more performant and pragmatic developer experience.

• SolidJS Website
• New Docs
• Old Docs (API Reference)

Try SolidJS

• Playground link
  • In the playground, you can view the compiled output.
  • Also, you can change the compile mode, between “Client side rendering”, “Server side rendering”, and “Client side rendering with hydration”
  • Any code that you write in the playground can be exported to a coding sandbox, like Codesandbox. So helpful!

Philosophy - Think Solid

1. Declarative Data
2. Vanishing Components

• Solid updates are completely independent of the components. Component functions are called once and then cease to exist.

3. Read/Write segregation

• We don’t need true immutability to enforce unidirectional flow, just the ability to make the conscious decision which consumers may write and which may not.

4. Simple is better than easy

Compilation

Solid’s JSX compiler doesn’t just compile JSX to JavaScript; it also extracts reactive values (which we’ll get to later in the tutorial) and makes things more efficient along the way.

This is more involved than React’s JSX compiler, but much less involved than something like Svelte’s compiler. Solid’s compiler doesn’t touch your JavaScript, only your JSX.

• A Look at Compilation in JavaScript Frameworks

Differences to React

Props Destructuring

Destructuring props is usually a bad idea in Solid. Under the hood, Solid uses proxies to hook into props objects to know when a prop is accessed. When we destructure our props object in the function signature, we immediately access the object’s properties and lose reactivity.

So in general, avoid the following:

function Bookshelf({ name }) {
  return (
    <div>
      <h1>{name}'s Bookshelf</h1>
      <Books />
      <AddBook />
    </div>
  );
}

And replace with props instead.

Dependency Arrays

In React, you’d declare the dependencies explicitly using the dependency array. If you didn’t, the effect would rerun whenever any state in the component changes. In Solid, dependencies are tracked automatically, and you don’t have to worry about extra reruns.

Looping with array.map

If we used array.map in Solid, every element inside the book would have to rerender whenever the books signal changes. The For component checks the array when it changes, and only updates the necessary element. It’s the same kind of checking that React’s VDOM rendering system does for us when we use .map.

Conditional if statements on re-rendering

In the Building UI with Components section of this tutorial, we noted that component functions run only once in Solid. This means the JSX returned from that initial function return is the only JSX that will ever be returned from the function.

In Solid, if we want to conditionally display JSX in a component, we need that condition to reside within the returned JSX. While this takes some adjustment when coming from React, we have found that the fine-grained control afforded by Solid’s reactive system is worth the trade-off.

Reactivity and proxy objects

In Solid, props and stores are proxy objects that rely on property access for tracking and reactive updates. Watch out for destructuring or early property access, which can cause these properties to lose reactivity or trigger at the wrong time.

onChange vs. onInput

In React, onChange fires whenever an input field is modified, but this isn’t how onChange works natively. In Solid, use onInput to subscribe to each value change.

No VDOM or VDOM APIs

Finally, there is no VDOM so imperative VDOM APIs like React.Children and React.cloneElement have no equivalent in Solid. Instead of creating or modifying DOM elements directly, express your intentions declaratively.

Solid Primitives

• Signals - The basic way to manage state in the application
  • I go much deeper into Signals in Intro to Reactivity with SolidJS
  • Similar to useState in React, but as a reactive value
  • Derived state - you can track a computed state from a signal, which is also reactive
  • You can pass the signal as a prop like this: <BookList books={books()} />. It’s not a typo to use the function as it’s passing an accessor, which is important for reactivity.
• Effects - ability to react to signal changes

A driving philosophy of Solid is that, by treating everything as a signal or an effect, we can better reason about our application.

Looping

Solid has a component called <For /> with an each prop. You can pass in a signal that will make this reactive.

<For each={books()}>
  {(book) => {
    return (
      <li>
        {book.title} {book.author}
      </li>
    );
  }}
</For>

Note that since each element doesn’t re-render, there is no need for a key prop, like they do in React.

Inputs

In the following example, we are adding a book to a bookshelf. The props.setBooks is a signal from the parent to set the bookshelf’s books.

import { createSignal } from "solid-js";

const emptyBook = { title: "", author: "" };

export function AddBook(props) {
  const [newBook, setNewBook] = createSignal(emptyBook);

  const addBook = (event) => {
    event.preventDefault();
    props.setBooks((books) => [...books, newBook()]);
    setNewBook(emptyBook);
  };

  return (
    <form>
      <div>
        <label for="title">Book name</label>
        <input
          id="title"
          value={newBook().title}
          onInput={(e) => {
            setNewBook({ ...newBook(), title: e.currentTarget.value });
          }}
        />
      </div>
      <div>
        <label for="author">Author</label>
        <input
          id="author"
          value={newBook().author}
          onInput={(e) => {
            setNewBook({ ...newBook(), author: e.currentTarget.value });
          }}
        />
      </div>
      <button type="submit" onClick={addBook}>
        Add book
      </button>
    </form>
  );
}

As you can see, onInput is the event handler that takes in the event. In this case, we are setting the new book for each input (the title and author).

The onClick handler for the button uses the addBook function where it can prevent the form from submitting, set the books using a new array, then resetting the new book. It should be noted that setBooks is using a callback function where you access the current state. Also, it should be noted not to mutate state by creating that new array (much like in Redux practice).

Here’s another example of that callback.

setCount((currentCount) => {
  return currentCount + 1;
});

Control Flow

SolidJS gives us a component called Show. This has two props: when for conditions and fallback when the condition fails.

The reason you only get this component is because the component only renders once, not like React where there is logic for re-renders.

import { createSignal, Show } from "solid-js";
import { BookList } from "./BookList";
import { AddBook } from "./AddBook";

const initialBooks = [
  { title: "Code Complete", author: "Steve McConnell" },
  { title: "The Hobbit", author: "J.R.R. Tolkien" },
  { title: "Living a Feminist Life", author: "Sarah Ahmed" },
];

function Bookshelf(props) {
  const [books, setBooks] = createSignal(initialBooks);
  const [showForm, setShowForm] = createSignal(false);
  const toggleForm = () => setShowForm(!showForm());

  return (
    <div>
      <h1>{props.name}'s Bookshelf</h1>
      <BookList books={books()} />
      <Show
        when={showForm()}
        fallback={<button onClick={toggleForm}>Add a book</button>}
      >
        <AddBook setBooks={setBooks} />
        <button onClick={toggleForm}>Finished adding books</button>
      </Show>
    </div>
  );
}

function App() {
  return <Bookshelf name="Solid" />;
}

export default App;

Fetching Data

The primitive for any external data source is createResource. The function returns a deconstructed array with the data. It takes two arguments: the signal and the data fetching function.

const [data] = createResource(signal, dataFetchingFunction);

If we break down a data fetching function, it should look like the following.

export async function searchBooks(query) {
  if (query.trim() === "") return [];

  const response = await fetch(
    `https://openlibrary.org/search.json?q=${encodeURI(query)}`
  );

  const results = await response.json();

  return results.docs.slice(0, 10).map(({ title, author_name }) => ({
    title,
    author: author_name?.join(", "),
  }));
}

Putting it all together, query is the signal. searchBooks is the data fetching function. Once the data is returned, we can loop over it, and for each item, we can set the books if selected.

import { createSignal, JSX, createResource, For, Show } from "solid-js";
import { searchBooks } from "./searchBooks";

export function AddBook(props) {
  const [input, setInput] = createSignal("");
  const [query, setQuery] = createSignal("");
  const [data] = createResource(query, searchBooks);

  return (
    <>
      <form>
        <div>
          <label for="title">Search books</label>
          <input
            id="title"
            value={input()}
            onInput={(e) => {
              setInput(e.currentTarget.value);
            }}
          />
        </div>
        <button
          type="submit"
          onClick={(e) => {
            e.preventDefault();
            setQuery(input());
          }}
        >
          Search
        </button>
      </form>
      <Show when={!data.loading} fallback={<>Searching...</>}>
        <ul>
          <For each={data()}>
            {(book) => (
              <li>
                {book.title} by {book.author}{" "}
                <button
                  aria-label={`Add ${book.title} by ${book.author} to the bookshelf`}
                  onClick={(e) => {
                    e.preventDefault();
                    props.setBooks((books) => [...books, book]);
                  }}
                >
                  Add
                </button>
              </li>
            )}
          </For>
        </ul>
      </Show>
    </>
  );
}

Intro to Reactivity w/ SolidJS

The following is a code example introducing how Reactivity or Reactive Programming works.

import { createSignal, createEffect } from "solid-js";

const [count, setCount] = createSignal(2);
const [multipler, setMultiplier] = createSignal(2);

const product = () => count() * multipler();

// Change the count every second
setInterval(() => {
  setCount(count() + 1);
}, 1000);

// Change the multiplier every 2.5 seconds
setInterval(() => {
  setCount(multipler() + 1);
}, 2500);

// Effect automatically detects when a signal has changed
// So you don't have to add a dependency array.
// This is defined as "reactivity"
createEffect(() => {
  console.log(`${count()} * ${multiplier()} = ${product()}`);
});

• createSignal works by creating a data structure that can read and write. To each of these functions, subscribers are added and updated
• CreateEffect works by executing on a context queue (JS array). It takes its queue, executes it, then pops it (at least in pseudocode)

SolidJS uses “granular updates” so only the variables that change only update the DOM, and not entire components.

import { createSignal } from "solid-js";
import { render } from "solid-js/web";

function App() {
  const [count, setCount] = createSignal(2);
  const [multipler, setMultipler] = createSignal(2);

  const product = () => count() * multipler();
  return (
    <div>
      <h1>
        {count()} * {multipler()} = {product()}
      </h1>
      <button onClick={() => setCount(count() + 1)}>Counter</button>
      <button onClick={() => setMultipler(count() + 1)}>Multiplier</button>
    </div>
  );
}

Of course, you can move all of the code into its own component, and call components from other components.

import { createSignal } from "solid-js";
import { render } from "solid-js/web";

const [count, setCount] = createSignal(2);

function Multipler(props) {
  return (
    <div>
      <h1>
        {count()} * {props.by} = {count() * props.by}
      </h1>
      <button onClick={() => setCount(count() + 1)}>Counter</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Multipler by={2} />
      <Multipler by={3} />
      <Multipler by={11} />
    </div>
  );
}

In this example, we extracted Multipler into its own component, added props, like React, and called it multiple times in App. As you will also notice, signals do not have to be in the function scope! This is counter to what you do in React. Of course, if you don’t want to share the signal across other components, you can keep it in the functional lexical scope.

Introduction

I started this journey into Typescript by taking a ton of notes with Github Copilot X, “Typescript in 50 Lessons”, and the official documentation. I was able to tailor my experience in understanding how to create types through this method. Without further ado, here’s some notes that I generated (and modified).

What is Typescript?

TypeScript is a superset of JavaScript that adds optional static typing and other features to the language. It is designed to make it easier to write and maintain large-scale JavaScript applications. TypeScript code is compiled into JavaScript code that can run in any browser or JavaScript runtime.

TypeScript provides features such as classes, interfaces, enums, and modules that are not available in standard JavaScript. It also includes support for modern JavaScript features such as async/await and decorators.

TypeScript is developed and maintained by Microsoft, and it is open source and free to use. It is widely used in web development, and many popular frameworks and libraries such as Angular, React, and Vue have TypeScript support.

Static Typing

Static typing in TypeScript allows you to specify the types of variables, function parameters, and return values. This means that you can catch type-related errors at compile-time rather than at runtime.

For example, you can specify that a variable is of type string, and TypeScript will give you an error if you try to assign a number to that variable. Similarly, you can specify that a function takes a parameter of type number, and TypeScript will give you an error if you try to call that function with a string.

Here’s an example of a function that takes two numbers and returns their sum, with static typing:

function addNumbers(x: number, y: number): number {
  return x + y;
}

In this example, the x and y parameters are of type number, and the function returns a value of type number. If you try to call this function with non-numeric arguments, TypeScript will give you an error.

In addition, you can declare types for functions separately to the function implementation. This allows you to define a function type once and reuse it in multiple places.

type SearchFn = (
  query: string,
  tags?: string[] | undefined
) => Promise<Result[]>;

The void type is used to indicate that a function does not return a value. You can use void as the return type of a function to explicitly indicate that the function does not return anything.

Here’s an example of a function that returns void:

function logMessage(message: string): void {
  console.log(message);
}

In this example, the logMessage function takes a parameter of type string and logs it to the console. The function returns void, which means it does not return a value.

Type Assertions

A type assertion is a way to tell the compiler that you know more about the type of a value than it does. Type assertions are sometimes necessary when working with values that have a more general type than you need.

You can use a type assertion by adding the type you want to assert to the end of an expression, preceded by the as keyword. Here’s an example:

let myValue: any = "hello world";
let myLength: number = (myValue as string).length;

In this example, the myValue variable is declared as type any, which means it can hold any value. We then use a type assertion to tell the compiler that we know myValue is actually a string, so we can access its length property.

You can also use angle bracket syntax (< >) to perform a type assertion:

let myValue: any = "hello world";
let myLength: number = (<string>myValue).length;

In this example, the type assertion is performed using angle bracket syntax instead of the as keyword.

It’s important to note that type assertions do not change the runtime behavior of your code. They only affect the type checking performed by the TypeScript compiler.

You can use rest parameters to represent an indefinite number of arguments as an array. Rest parameters are denoted by an ellipsis (…) followed by the parameter name.

Here’s an example of a function that uses rest parameters:

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

Primitive Types

There are several primitive types that represent the most basic types of values. These primitive types include:

• number: represents numeric values, including integers and floating-point numbers.
• string: represents textual values, such as words and sentences.
• boolean: represents logical values, either true or false.
• null: represents the intentional absence of any object value.
• undefined: represents the unintentional absence of any object value.
• symbol: represents a unique identifier that can be used as an object property.

let age: number = 30;
let name: string = "John";
let isStudent: boolean = true;
let favoriteColor: string | null = null;
let phoneNumber: string | undefined = undefined;
let id: symbol = Symbol("id");