DEV Community: Stefan Buhrmester

Dolt as a backing database for blockchains

Stefan Buhrmester — Mon, 24 Mar 2025 18:45:58 +0000

When developing any blockchain system, sooner or later one has to deal with the problem of forks and eventual chain reorganizations.

Before Dolt appeared on my radar, I thought this problem was non-trivial, and very difficult to solve in code: Whenever a fork occurs, or blocks arrive at your node that conflict with your current chain, you have to validate these new blocks against a snapshot of your data at a specific point in time. This point in time is determined by the parent block hash of the incoming blocks. This requirement for "time-travel" has always deterred me from attempting my own blockchain implementation, simply because it seemed too complicated for me to implement. I know that there are blockchains out there that have (maybe?) solved this, but I'm not as good as a programmer as those guys. If you're anything like me, maybe you can relate.

Enter Dolt. Dolt is a versioned MySQL-compatible database that returns a commit hash after every "commit" you perform on your data. To quote the Dolt team: "What git is doing with files, Dolt is doing with tables".

That means: In our blockchain system, whenever we create a new block and apply the transactions to our data, Dolt gives us a new commit hash. And now for my theory: If we set block_hash = dolt_commit_hash, we can trivialize this aforementioned "time-travel". Whenever a new block arrives that we have to validate, we can very easily use the parent block hash to check out the parent state, and validate and run our transactions on top of the parent state.

I'm not sure if the Dolt developers know this, but as far as my theory goes, they have (maybe accidentally) trivialized a huge chunk of blockchain development.

Now somebody just has to make DoltCoin a real thing.

Setting up a new Rails 7 app with Vite, Inertia, and Svelte

Stefan Buhrmester — Wed, 22 Dec 2021 11:45:08 +0000

Rails 7 has been released and Webpacker is being phased out.

And if you're anything like me and prefer to use HMR and component frameworks over Hotwire and importmaps, you might want to look for a Webpacker alternative now. I found Vite Ruby to be a capable replacement, which also (supposedly) makes your development flow more faster™.

So let's take a look at how to set up a new Rails 7 app using my favorite frameworks out there (Inertia and Svelte) and bundle it all up with Vite.

Let's go

Start off by initializing a new Rails 7 app without Javascript and asset pipeline:

rails new app --skip-javascript --skip-asset-pipeline

Once this is done, add the inertia_rails and vite_rails gems:

bundle add inertia_rails
bundle add vite_rails

The vite_rails gem adds an installer to your project. Run it with

bundle exec vite install

This generates default vite config files, a frontend directory, and also updates your layout file to include the vite bundle. It will also setup our initial package.json. We'll need more packages. Add them:

npm install -D axios svelte @sveltejs/vite-plugin-svelte @inertiajs/svelte

IMPORTANT UPDATE:
Since vite-plugin-svelte version 2.0, it is required that your package.json contains "type": "module". You will have to add this manually if it doesn't already.

Then find application.js in our new app/frontend/entrypoints directory and replace its contents with:

import axios from 'axios'

import { createInertiaApp } from '@inertiajs/svelte'


const pages = import.meta.glob('../pages/**/*.svelte')

const csrfToken = document.querySelector('meta[name=csrf-token]').content
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken



createInertiaApp({ 
  resolve: name => pages[`../pages/${name}.svelte`](),
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

Next, open up your vite.config.ts file and change it like so:

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  resolve: {
    dedupe: ['axios']
  },
  plugins: [
    RubyPlugin(),
    svelte()
  ]
})

This config file ensures that axios is only included once in your bundle, and Inertia and your own imports will actually resolve to the same axios.

Now you can place your Inertia page components into app/frontend/pages, start your rails server with rails s, the dev server with ./bin/vite dev, and it should all work as usual.

Bonus: Persistent Layouts

In the example above you might have noticed the lack of a persistent layout - a parent component that won't change upon navigation. To add a persistent layout, update your application.js like this:

import axios from 'axios'

import Layout from '../pages/_layout.svelte'

import { createInertiaApp } from '@inertiajs/svelte'

const pages = import.meta.glob('../pages/**/*.svelte')

const csrfToken = document.querySelector('meta[name=csrf-token]').content
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken

createInertiaApp({ 
  resolve: async name => {
    const page = await pages[`../pages/${name}.svelte`]()
    return Object.assign({layout: Layout}, page)
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

Now you can use persistent layouts with Inertia and Vite.

Happy coding 😊

Fluid page transitions with Svelte & Sapper

Stefan Buhrmester — Wed, 03 Jul 2019 07:29:41 +0000

UPDATE: This post is now over 2 years old, but it's still kinda relevant. This technique should work exactly the same with SvelteKit.

Ever come across websites with cool animations whenever navigating from one page to another? For example this website by Sarah Drasner. Usually, you'd use client-side libraries and clever CSS tricks to achieve these sort of things. Probably nothing wrong with that, but it adds to your website's overall download size, and your CSS will become hard to maintain as your site grows in complexity. However, thanks to Svelte, we can now do these cool things without any client-side library or CSS trickery:

(Try it out)

So now we can have cool PWAs, that are server-side rendered, have smooth page transitions, and are compiled down to really tiny amounts of javascript. With no need for client-side libraries, virtual DOMs, or shuffling CSS classes around. Oouwee!

And with that, our lives are now complete. Because what else could we possibly want? We should now all go and praise Rich Harris the JavaScript God. Or do we need more JavaScript frameworks? Don't we have enough? I can't take it anymore. Make it stop. Aaaaaahhh this is the end.

How?

These animations all use Svelte's crossfade transition. If you haven't used it before, I suggest checking out the tutorial. It will teach you how to crossfade two elements within the same component. But we are interested in crossfading an element from one component into another (in Sapper, each page is a component). The trick to making the crossfade transition work across different pages (or components) defined in separate files, is to create the crossfade transition in its own module/file, and import it into the different components. Check it out:

Here we create the crossfade transition in its own file and export the send and receive functions so that we can reuse them in different files.

// crossfade.js
import { quintOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({
    duration: d => Math.sqrt(d * 300),
    fallback(node, params) {
        const style = getComputedStyle(node);
        const transform = style.transform === 'none' ? '' : style.transform;

        return {
            duration: 600,
            easing: quintOut,
            css: t => `
                transform: ${transform} scale(${t});
                opacity: ${t}
            `
        };
    }
});

export {send, receive};

And then we use the send and receive function.

// page1.svelte
<script>
  import {send, receive} from './crossfade.js';
</script>

<main>
  <h1 out:send="{{key: 'h1'}}" in:receive="{{key: 'h1'}}">Look, I'm above the image</h1>
  <img out:send="{{key: 'borat'}}" in:receive="{{key: 'borat'}}" alt='Borat' src='great-success.png'>
</main>

And then use the same send and receive function again, making the crossfade work across components.

// page2.svelte
<script>
  import {send, receive} from './crossfade.js';
</script>

<main>
  <img out:send="{{key: 'borat'}}" in:receive="{{key: 'borat'}}" alt='Borat' src='great-success.png'>
  <h1 out:send="{{key: 'h1'}}" in:receive="{{key: 'h1'}}">Now I am below the image</h1>
</main>

The container needs to be absolutely positioned, otherwise it won't work.

// global.css
main {
  position: absolute;
  width: 100%;
}

There you go. Thanks for reading.

Visit https://buhrmi.dev if you'd like professional support.