DEV Community: DavidCks

Sync your Gatsby Sanity Website on Content Change automatically with any hosting provider using GitHub Actions

DavidCks — Fri, 17 Feb 2023 18:31:22 +0000

Skip to the "How to" section for the step by step guide.

Preface

If you're like me and want a free way to quickly get started developing a website with a content management system (cms) in place with the best possible seo and performance and not be limited by the gatsby cloud free tier while also having the website automatically update when the content changes, this one is for you.

I spent a solid 9 hours on figuring this out so you hopefully can get started within, like, one.

Why so long though

Most of the helpful threads online are outdated so this will serve as the most recent guide (Feburary 2023) for now.

How to

The starting point for my journey was Gatsbys Sanity Starter Template so the specific commands might differ.

In this tutorial I'm going off of having the site hosted on GitHub Pages. What would need to be adjusted will be explained when it gets to that point.

Step 1: GitHub Actions

first you'll have to set up your GitHub Actions in the repository of your gatsby website.

for this you'll need to set up the following folder structure:

<root>/.github/workflows/ (root is where the src folder is located)

in here you can use any file name ending in .yml

let's say...

deploy.yml

In here you'll want to add

name: GitHub Pages

on:
  push:
    branches:
      - master  # Set a branch name to trigger deployment
  pull_request:
  repository_dispatch:
    types: deploy

jobs:
  deploy:
    runs-on: ubuntu-22.04
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

      - name: Set Node.js 18.x
        uses: actions/setup-node@v3
        with:
          node-version: 18.x   # whatever version your gatsby uses (you can find that in package.json under 'engine')

      - name: Run install
        uses: borales/actions-yarn@v4
        with:
          cmd: install # will run `yarn install` command
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # if needed

      - name: yarn
        env: # this stuff doesn't work but its a starting point
          SANITY_READ_TOKEN: ${{ env.SANITY_READ_TOKEN }}
          SANITY_PROJECT_ID: ${{ env.SANITY_PROJECT_ID }}
          SANITY_PROJECT_DATASET: ${{ env.SANITY_PROJECT_DATASET }}
          SANITY_LIVE_PREVIEW: ${{ env.SANITY_LIVE_PREVIEW }}
        run: yarn & yarn setup

      - name: Build
        run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        # If you're changing the branch from main,
        # also change the `main` in `refs/heads/main`
        # below accordingly. bump
        if: ${{ github.ref == 'refs/heads/master' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

This bad boy basically goes:

Install node - Install yarn - Install all the dependencies with yarn - run the custom yarn setup command - run gatsby build through a custom command - publish website from the generated public folder to the gh-pages branch

The yarn setup command is specific to the gatsby sanity starter template and the gh-pages stuff is specific to publishing with GitHub Pages, so you may need to adjust that.

The more interesting part is the stuff at the top.

By specifying

    repository_dispatch:
        types: deploy

We tell GitHub actions that a specific request containing the "deploy" keyword (or any other keyword you choose) triggers that action.

Step 2: GitHub Authentication Token

For any request you send you'll need an authentication token. To acquire that token go to your profile icon and go to:

Settings -> Developer Settings (last link on the left) -> Personal Access Tokens -> Fine Grained Tokens (trust me, the other token type won't work) and tap Generate new token

select your repository and enable read/write permissions for Actions and Contents.
Generate the token and save it somewhere safe.

Step 3: Sanity Webhooks

Open your sanity dashboard

(not sanity studio, your account dashboard)

-> select your project -> click on API -> Click on create webhook

In here we enter the following data:

URL: https://api.github.com/repos/<GitHub Acoount Name>/<GitHub Repository Name>/dispatches
Projection: {"event_type":"deploy","client_payload":{"unit":false,"integration":true}} event_type matches whatever you put into repository_dispatch: types: (This is the body part of the request)
HTTP Method: POST In HTTP headers add the following fields with the following values
Accept: application/vnd.github+json
Authorization: Bearer <Your generated GitHub Token from step 2>
X-GitHub-Api-Version: 2022-11-28

Done!

Snippets/Summaries for the impatient

Step 1: GitHub Actions

<root>/.github/workflows/deploy.yml

name: GitHub Pages

on:
  push:
    branches:
      - master  # Set a branch name to trigger deployment
  pull_request:
  repository_dispatch:
    types: deploy

jobs:
  deploy:
    runs-on: ubuntu-22.04
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

      - name: Set Node.js 18.x
        uses: actions/setup-node@v3
        with:
          node-version: 18.x   # whatever version your gatsby uses (you can find that in package.json under 'engine')

      - name: Run install
        uses: borales/actions-yarn@v4
        with:
          cmd: install # will run `yarn install` command
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # if needed

      - name: yarn
        env: # this stuff doesn't work but its a starting point
          SANITY_READ_TOKEN: ${{ env.SANITY_READ_TOKEN }}
          SANITY_PROJECT_ID: ${{ env.SANITY_PROJECT_ID }}
          SANITY_PROJECT_DATASET: ${{ env.SANITY_PROJECT_DATASET }}
          SANITY_LIVE_PREVIEW: ${{ env.SANITY_LIVE_PREVIEW }}
        run: yarn & yarn setup

      - name: Build
        run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        # If you're changing the branch from main,
        # also change the `main` in `refs/heads/main`
        # below accordingly. bump
        if: ${{ github.ref == 'refs/heads/master' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Step 2: GitHub Auth Token

Generate the granular controll token for your repo, the other expires when testing on non-ssl secured connections (and for other unknown reasons)

Step 3: Sanity Webhooks

match the sanity config with this curl

curl --request POST \
  --url https://api.github.com/repos/<gh username>/<gh repo name>/dispatches \
  --header 'Accept: application/vnd.github+json' \
  --header 'Authorization: Bearer <gh access token>' \
  --header 'X-GitHub-Api-Version: 2022-11-28' \
  --data '{"event_type":"deploy","client_payload":{"unit":false,"integration":true}}'

Done!

Now whenever the content changes your website will rebuild and reflect those changes within about two minutes. And completely free at that. If you find a hosting provider where i can host a development server for gatsby for free to reflect live changes instantly in a cloud setting send me a message!

Check out my github if you want to see what I'm up to: DavidCks GitHub
Everything I develop for myself is free and open-source forever, for everyone.

rusty-css: a css in rust solution

DavidCks — Thu, 12 Jan 2023 09:09:10 +0000

My solution to writing css in rust that is highly accessible and mangable from your rust code.
If you're writing a UI in rust and have to change styling frequently, this might be for you.

(Note: I'm fairly new to rust so there's going to be a lot of beginner mistakes in the actual codebase. Contributions are very welcome. GitHub, crates.io

rusty-css offers a solution to create and export css styles in a familiar way, but without leaving the rust syntax.
You can access and manipulate every value you define on an individual basis.

The identifiers are taken as-is and converted into strings, with the exception of the underscore token (_), which is converted into the minus token (-) when the struct is to be converted into its corresponding css values.

Example:

struct A {
    css_property: "css value" 
}

will be converted into

"css-property: css value"

regardless of the property names' or values' validity. If you have an error in your css, it will still compile!

Roadmap (version 0.1.3)

[x] rendering rust structs to inline css code
- [x] support for deep nesting
[x] setting the values of a struct from inline css
[ ] more reliable extraction of numeric values inside of a String
[x] support for classes
- [ ] support for queries
[ ] validating the written css code at compile time
- [ ] automated implementation of a default style struct according to the css spec
[ ] second layer implementation of a system with strict typing (such as enums for all possible units for a given property)
[ ] more abstraction for less boilderplate

How to use

As of now this crate uses the bevy_reflect crate to convert the structs into css "property: value" strings, so all structs that you wish to convert must derive Reflect

use bevy_reflect::{Reflect};

#[derive(Reflect)]
struct ExampleStruct {
    width: String,
    height: String,
    background: String,
    transform: String,
}

to convert this struct into an inline css string we have to first implement the struct and its initial state. For this we implement the Style Trait from this crate.

use rusty_css::*;

impl Style for ExampleStruct {
    fn create() -> Self {
        // return an instance of Self, so in this case an instance of ExampleStruct
        Self { 
            width: "4em".to_string(),
            height: "2rem".to_string(),
            background: "rgb(69,13,37)".to_string(),
            transform: "skewX(20deg) skewY(30deg)".to_string(),
        }
    }
}

now we can create an instance of ExampleStruct and convert it into a css inline string.


let example_struct = ExampleStruct::create();
let inline_css: String = example_struct.inline();
// "width: 4em; height: 2rem; background: rgb(69,13,37); transform: skewX(20deg) skewY(30deg);"

Developer experience improvements

since it can be hard to access values of a property that can take multiple values such as transform, we can instead implement a nested struct into our original struct.
By doing so, the fields of the struct in the second layer will no longer be treated as if they're css properties but rather css functions that take an argument.

#[allow(non_snake_case)] // so the skewX field doesn't throw a warning for being in snake case, which css uses
#[derive(Reflect)]
struct NestedTransformStruct {
    skewX: String,
    skewY: String,
}

#[derive(Reflect)]
struct ExampleStruct {
    width: String,
    height: String,
    background: String,
    transform: NestedTransformStruct,
}

impl Style for ExampleStruct {
    fn create() -> Self {
        // return an instance of Self, so in this case an instance of ExampleStruct
        Self { 
            width: "4em".to_string(),
            height: "2rem".to_string(),
            background: "rgb(69,13,37)".to_string(),
            transform: NestedTransformStruct {
                skewX: "20deg".to_string(),
                skewY: "30deg".to_string(),
            },
        }
    }
}

let example_struct = ExampleStruct::create();
let inline_css: String = example_struct.inline();
let skewX: String = example_struct.transform.skewX; // can access this field, wuhu!
// "width: 4em; height: 2rem; background: rgb(69,13,37); transform: skewX(20deg) skewY(30deg);"

The output is equivalent but we can access the elements skewX and skewY fields individually now.
Following that logic, you should be able to write the background fields value similarly, so lets try it:

#[derive(Reflect)]
struct Background {
    rgb: String,
}

#[derive(Reflect)]
struct ExampleStruct {
    width: String,
    height: String,
    background: Background,
}

impl Style for ExampleStruct {
    fn create() -> Self {
        // return an instance of Self, so in this case an instance of ExampleStruct
        Self { 
            width: "4em".to_string(),
            height: "2rem".to_string(),
            background: Background {
                rgb: "69,13,37".to_string(),
            }
        }
    }
}

let example_struct = ExampleStruct::create();
let inline_css: String = example_struct.inline();
// "width: 4em; height: 2rem; background: rgb(69,13,37);"

Works just fine!

You might have noticed that we're appending a lot of .to_string() calls. At scale this can become quite cumbersome, so i created the append_to_string crate, which helps with that.

Complete Example

with all that out of the way, here's what your code might look like:

use rusty_css::*;
use append_to_string::*;
use bevy_reflect::{Reflect};

// define all the structs we want to be css-ified 

#[allow(non_snake_case)]
#[derive(Reflect)]
struct NestedTransformStruct {
    skewX: String,
    skewY: String,
}

#[derive(Reflect)]
struct ExampleStruct {
    width: String,
    height: String,
    background: String,
    transform: NestedTransformStruct,
}

impl Style for ExampleStruct {
    fn create() -> Self {
        // return an instance of Self, so in this case an instance of ExampleStruct
        append_to_string!( 
            Self { 
                width: "4em",
                height: "2rem",
                background: "rgb(69,13,37)",
                transform: NestedTransformStruct {
                    skewX: "20deg",
                    skewY: "30deg",
                },
            }
        )
    }
}

let example_struct = ExampleStruct::create();
let inline_css: String = example_struct.inline();
// "width: 4em; height: 2rem; background: rgb(69,13,37); transform: skewX(20deg) skewY(30deg);"

Implementing Styles as Classes

Use the .as_class() function on your struct to export its style into the <style> tag of your app. For now you'll have to pass it a reference to the web_sys::Document you want to export the style into like so:

let style_struct = ExampleStruct::create();

// grab the current document
let window = web_sys::window().expect("No global `window` found");
let document = window.document().expect("couldn't get `document");

// export the style to the <style> tag
let style_struct = ExampleStruct::create();
let class_name = style_struct.as_class(&document).unwrap();

assert_eq!("ExampleStruct", class_name); //true

in a yew component it might look like this:

fn view(&self, ctx: &Context<Self>) -> Html {
    let window = window().expect("No global `window` found");
    let document = window.document().expect("couldn't get `document");

    let class_name = self.style.as_class(&document).unwrap();

    html! {
        <div class={class_name}
        </div>
    }
}

Supported types

these structs will be used as an example for nested structs

#[derive(Reflect, FromReflect)]
struct EvenFurtherNestedStruct {
    further_vec_field: Vec<String>,
}

#[derive(Reflect, FromReflect)]
struct NestedStruct {
    nested_vec_field: Vec<String>,
    nested_string_field: String,
    nested_struct_field: EvenFurtherNestedStruct,
}

Note that if you want to use a vec of structs the structs have to derive FromReflect in addition to just Reflect

#[derive(Reflect)]
struct Struct {
    string_field: String, 
    //string-field: String;

    struct_field: NestedStruct, 
    //struct-field: 
    //    nested-string-field(String)
    //    nested-vec-field(
    //        String1,
    //        String2,
    //        String3,
    //        String...
    //    )
    //    nested-struct-field(
    //        further-vec-field(
    //            String1,
    //            String2,
    //            String...
    //        )
    //    )
    //; 

    vec_field_string: Vec<String>, 
    //vec-field-string: String1, String2, String...;

    vec_field_struct: Vec<NestedStruct>, //
}   //vec_field_struct: 
    //    nested-string-field(String)
    //    nested-vec-field(...)
    //    nested-struct-field(...)
    //    ,
    //     nested-string-field(String)
    //    nested-vec-field(...)
    //    nested-struct-field(...)
    //    ,
    //    ...
    //;

The nesting can be helpful when you want to implement something like a gradient background:

background-image: radial-gradient(rgb(0,46,255), rgb(0,255,64), rgb(255,255,0));

Implementing something like this manually in a way where you have immediate access to the values in rust could look like this:

#[derive(Reflect, FromReflect)]
struct RGB {
    rgb: Vec<String>
}


#[derive(Reflect)]
struct RG {
    radial_gradient: Vec<RGB>
}


#[derive(Reflect)]
struct BG {
    background_image: RG,
}

impl Style for BG {
    fn create() -> Self {
        Self {
            background_image: RG {
                radial_gradient: vec![
                    RGB { 
                        rgb: vec![
                            "0".to_string(), 
                            "46".to_string(), 
                            "255".to_string()
                        ]
                    }, 
                    RGB { 
                        rgb: vec![
                            "0".to_string(), 
                            "255".to_string(), 
                            "64".to_string()
                        ]
                    }, 
                    RGB { 
                        rgb: vec![
                            "255".to_string(), 
                            "255".to_string(), 
                            "0".to_string()
                        ]
                    }, 
                ]
            }
        }
    }
}

If you were to do it like this you could access individual values like so:

fn main() {
    let bg = BG::create(); // create struct
    let rgbs = bg.background_image.radial_gradient; // get vec of rgbs
    let first_color = rgbs[0] // get the first color of the gradient
    first_color[0] = 255 // change the value of the red channel of the first color of the gradient
}

Fetching values directly from css

You can also set the values of any of the structs above from a string of css prop1: value1; prop2: value2; ... pairs using the set_from_inline_string() method. You'll have to be careful to match the css string to your structs structure however. For examples you can go take a look at the tests/from_string.rs file.

Crate implements:

trait ExtractNums {
    // tries to extract the numbers from whatever string is given.
    fn try_extract_nums(&self) -> Option<String>;

    // tries to cast any given string to an f64
    fn try_to_f64(&self) -> Result<f64, ParseFloatError>;
}

trait Style {
    // returns the inline css representation of a struct
    fn inline(&self) -> String 

    // Sets a structs' fields' values equivalent to the given inline css string
    // Struct { struct_field: "value" }.set_from_inline_string("struct-field: different value");
    // will result in:
    // Struct { struct_field: "different value"}
    // (also works for nested structs)
    fn set_from_inline_string(&self, style: String) -> &Self

    // - returns the class name to put into the class attribute
    // - inserts the style as a class into the style sheet
    fn as_class(&mut self, document: &Document) -> Result<String, &'static str> ;

    // retruns the struct as a css class String like so: .StructIdent { property: value }
    fn as_class_string(&mut self, mut class_name: String) -> Result<String, &'static str>;

    // returns the struct name
    fn get_struct_name(&self) -> Result<String, &'static str>;

    // logs the Reflects of the given objects fields to the browser console with wasm_logger 
    fn debug(self) -> Self;

    //----------internal funcs----------//

    // retruns the String Representation of a fields value
    fn create_value_string(reflect: &dyn Reflect) -> String;

    // sets the value of a String field to the value side of a property in a css string (e.g. prop: >value<)
    fn set_string_reflect(string_reflect: &mut dyn Reflect, value: &str);

    // sets the value of a Struct field to the value side of a property in a css string (e.g. prop: >field(value)<)
    fn set_struct_reflect(struct_reflect: &mut dyn Struct, value: &str);

    // sets the value of a Vec (bevy_reflect Lists in general) field to the value side of a property in a css string (e.g. prop: >1,2,3,4<)
    fn set_list_reflect(list_reflect: &mut dyn List, value: &str)
}

Reserved field names:

append: "this will be appended to the class name" // for classes that are supposed to be exported with a pseudo-class (i.e. :before, :active, etc.)

Open-source and MIT licensed.

If you want to help out a chronically broke uni student writing free software, maybe consider tipping me some of your eth or matic:
etherscan
polygonexplorer
or tip me via paypal:
PayPal

how to send a message to a child component in yew

DavidCks — Fri, 04 Nov 2022 09:25:56 +0000

Since I took 12 hours to figure this out i decided to write up this article so you won't have to.

The Problem

Sometimes we want to control a child component from within a parent component. One of those instances might be an event handler that acts on the parent but triggers something in the child. Imagine you want to change the #properties of a child based on cursor position for example.

A concrete example would be to snap an component to the pointer, but within the confines of a parent component. You can't place the event listener on the child component, because you're not interacting with the child, so you have to put the listener on the parent, pass the event to the child and then execute some logic for that child.

Now this might sound quite trivial and if you'd be willing to leave the confines of yew (or rust effectiely for that matter) and just use the web_sys and js_sys bindings, you could. It's still kind of hard to do and feels quite hacky. It's the kind of hacky solution you'd be absolutely convinced that theres a better way to solve the problem, if not a native one.

Well, good news is it exists. Bad news is that it's overcomplicated and kind of annoying to set up. Once it's set up however, it is quite nice to interact with.

so, how do we solve this problem?

The Approach

We know that we have to send a message to a child component. However there is no native way to receive the context of said child object. Likely because it was instantiated after the parent component. You can access children if you go the children prop route, but you're limited to whatever the VChild type implements, which is not alot and useless for our case.
So... that won't work.

Now, communication with children might be difficult, but communication with the parent is not... supposed to be. It still is but at least it's possible.

In other words:

in order to communicate with a child from a parent we need to get the child component.
the child component can communicate with the parent.

Why don't we link the child component to the parent from within the child.

Prerequisites

In order to link the child we need to have a field in our parent struct that represents that childs link. The context.link() method returns a Scope of whatever component it contains, which means we set up our parent like so:

struct Parent {
    selected_child: Scope<Child>,
}

Now immediately theres a problem because when it comes to instantiating the struct we'll need a Scope of type Child, which, if we had that, we wouldn't have to create a workaround in the first place. Luckily we can turn that bad boy into an Option, which means that the value of selected_child is either a Scope or None.

struct Parent {
    selected_child: Option<Scope<Child>>,
}

fn create -> Self {
    Self {
        selected_child: None,
    }
}

We also know that we can get the context of a parent with the .get_parent() method of the context.link(), which means we can also send a message to that parent. So we might aswell just handle the setup with that.

enum Msg {
    SetSelectedChild(Scope<EditableCssBoxShape>),
    // won't need to wrap that as an option yet, 
    // since we have the element when we send the message
}

struct Parent {
    selected_child: Option<Scope<Child>>,
}


impl Component for Parent {
    type Message: Msg;

    fn create -> Self {
        Self {
            selected_child: None,
        }
    }

    fn update -> bool {
        match msg {
            Msg::SetSelectedChild(child_scope) => {
                self.selected_child = Some( child_scope );

                // no need to rerender
                false
            }
        }
    }
}

and that's basically all the setup the parent component needs. Annoyed yet? It gets worse :)

Now for the setup for the child component.

In the childs component we now have to send that message to the parent in order to set up a link for the parent component to use. We could use the rendered method of the component, but that only makes sense if we only have one child component. Instead we use an event listener and the update method.

enum Msg {
    StartMovingWithCursor(web_sys::DragEvent)
}

fn update -> bool {
    match msg {
        Msg::StartMovingWithCursor(e) => {
            e.prevent_default();
        }    
    }
}

Now we just want to send a message to the parent. Sounds easy enough. Warning: this code doesn't work.

enum Msg {
    StartMovingWithCursor(web_sys::DragEvent)
}

fn update -> bool {
    match msg {
        Msg::StartMovingWithCursor(e) => {
            e.prevent_default();

            let parent = ctx.link().get_parent();
            parent.send_message(parent.Message::SetSelectedChild( ctx.link() ));
        }    
    }
}

...is how you'd expect it to work. Maybe throw in some references here and there so we don't copy the values out of scope, but other than that seems good enough, right? Wrong! Instead of the simple intuitiveness of that code we have to do something like:

enum Msg {
    StartMovingWithCursor(web_sys::DragEvent)
}

fn update -> bool {
    match msg {
        Msg::StartMovingWithCursor(e) => {
            e.prevent_default();

            let child_link = ctx.link().clone();
            let parent_link = ctx.link().get_parent().expect("No Parent found").clone();
            parent_link.downcast::<super::super::Parent>().send_message( super::super::Msg::SetSelectedChild( child_link ));
        }    
    }
}

Now this does work. A few of the subsequent function calls try to move the values it turns out. some consume the struct entirely. Some of it makes sense, some of it is just weird.

Anyway here are the reasons for what we have to do:

clone the context link so we dont move the context out of the scope (fair)
clone the unwraped parent link because downcast consumes the parent_link (weird, just give me a reference)
it can't infer the type of the parent component so we have to manually grab that from wherever that component sits (what, why?)
the same goes for the Message we have to send (i mean, at least it's consistent on that part)

But, at long last, we did it. we can finally communicate with a child component, given the child and the parent component sit in the same crate.
All that so we can do stuff like this:

if let Some(link) = self.selected_child.as_ref() {
    link.send_message(Child::Msg::SendMessageToAChild);
}

All because we can't just go

ctx.props()
   .children
   .iter()
   .for_each( |child| child.link().send_nessage())

or whatever.

Summary

You'll need this mess in your Child

enum Msg {
    StartMovingWithCursor(web_sys::DragEvent)
}

fn update -> bool {
    match msg {
        Msg::StartMovingWithCursor(e) => {
            e.prevent_default();

            let child_link = ctx.link().clone();
            let parent_link = ctx.link().get_parent().expect("No Parent found").clone();
            parent_link.downcast::<super::super::Parent>().send_message( super::super::Msg::SetSelectedChild( child_link ));
        }    
    }
}

And this mess in your Parent

enum Msg {
    SetSelectedChild(Scope<EditableCssBoxShape>),
}

struct Parent {
    selected_child: Option<Scope<Child>>,
}


impl Component for Parent {
    type Message: Msg;

    fn create -> Self {
        Self {
            selected_child: None,
        }
    }

    fn update -> bool {
        match msg {
            Msg::SetSelectedChild(child_scope) => {
                self.selected_child = Some( child_scope );

                // no need to rerender
                false
            }
        }
    }
}

I get why most of it works that way (i think). It's just a bad developer experience.

Afterword

In all seriousness I do love rust and I think yew is pretty awesome. There is just something about the explicity that feels like you're done when you've done something. Unlike having to handle edge-cases it feels like you only handle the cases you need to handle because anything outside of that will either throw an actually helpful error or not occur in the first place. I'm exagerating quite a bit and I've run into a few runtime errors myself but it's no where near as bad as working with javascript on the frontend.

Thanks for the great work to the yew / web_sys / rust / wasm guys and gals and non-binary pals out there.