Published

I’ve really been enjoying using sqlmodel for my projects that need a database. One thing that I definitely lacked on for too long was indexing my database. I hit a point with one database where it was taking 7s for pretty simple paginated queries to return 10 records.

For every field that you will be querying on, you can create an index, by setting it equal to Field(index=True)

class Hero(SQLModel, table=True):
    id: int | None = Field(default=None, primary_key=True)
    name: str = Field(index=True)
    secret_name: str
    age: int | None = Field(default=None, index=True)

example courtesy of the docs

 primary keys are indexed by default.

The docs cover this pretty well, and in quite depth - Optimizing Queries

inline-snapshot is a new tool that I am trying out for python testing. It takes snapshots of your outputs and places them inline with the test.

Here is the most basic starter.

import inline_snapshot

def test_one():
    assert 1 == snapshot()

Now when I run pytest my tests will fail because my assert has no value, but if I run pytest --inline-snapshot=create it will fill out my snapshot values and the file will then look like this.

import inline_snapshot

def test_one():
    assert 1 == snapshot(1)

It also works with pydantic models.

class MyModel(BaseModel):
    name: str
    age: int
    nickname: str | None = None


def test_my_model_instance():
    assert MyModel(name="Waylon", age=1) == snapshot(MyModel(name="Waylon", age=1))


def test_my_model_fields():
    me = MyModel(name="Waylon", age=1, nickname='Waylon')
    assert me.name == snapshot("Waylon")
    assert me.age == snapshot(1)
    assert me.nickname == snapshot("Waylon")

Today I learned how to VACUUM a sqlite database and cut its size in about half. It’s a database that I have had running for quite awhile and has some decent traffic on it.

Why is it important to do a VACUUM? In short its becuase the file system gets fragmented with as data is updated. On delete the files are removed from the database and marked as available for reuse in the filesystem, but the space is not reclaimed.

To VACUUM a database, run the following sql command. You can do it right form the sqlite shell by running sqlite3.

You will need about double the current size of the database as free space to do the VACUUM, you need space for a full copy, journaling or write ahead logs, and the existing database.

VACUUM;

The docs are fantastic for vacuum.

I learned that tailwind animations are pretty easy to add only needing a few classes. For some reason though my brain broke, thinking that I could dynamically change the number and you can’t cause there are only so many pre compiled classes without using an arbitrary value with brackets.

Here are the classes that I used to transition my colors very slowly.

<div id="square"
      class="transition-colors ease-in-out duration-700">
</div>

And the entire square element.

<div id="square"
      class="w-16 h-16 bg-rose-500 rounded border border-4 border-rose-800 hover:bg-indigo-600 hover:border-yellow-500 transition-colors ease-in-out duration-700">
</div>

I recently updated ollama, and it now installs a systemd service that I was not expecting. Seems like a great option, but I hadn’t expeted this and I was able to kill it previously. It was using up gpu, and I do other things on my machine with a gpu. I tried pkill, kill, and everything, it was still coming back.

No matter what it comes back

# stop it
systemctl stop ollama.service

# disable it if you want
systemctl disable ollama.service

# confirm its status
systemctl status ollama.service

You can confirm this with the following command.

# checking running processes
ps aux | grep ollama
pgrep ollama

# checking gpu processes
gpustat --show-cmd --show-pid

Next time you want to start you can do it as before with ollama serve.

Typer makes it easy to compose your cli applications, like you might with a web router if you are more familiar with that. This allows you to build smaller applications that compose into a larger application.

You will see similar patterns in the wild, namely the aws cli which always has the aws <command> <subcommand> pattern.

Lets setup the cli app itself first. You can put it in project/cli/cli.py.

import typer

from project.cli.api import api_app
from project.cli.config import config_app
from project.cli.user import user_app
from project.cli.run import run_app

app = typer.Typer()

app.add_typer(api_app, name="api")
app.add_typer(config_app, name="config")
app.add_typer(user_app, name="user")
app.add_typer(run_app, name="run")

Creating an app that will become a command is the same as creating a regular app in Typer. We need to create a callback that will become our command, and a command that will become our subcommand in the parent app.

import typer
from rich.console import Console

from project.config import get_config

config_app = typer.Typer()

@config_app.callback()
def config():
    "model cli"


@config_app.command()
def show(
):
    project_config = get_config(env)
    Console().print(fokais_config)

Setting up the entrypoint in pyproject.toml.

[project.scripts] # <- this project is part of the config DO NOT change it
project = "project.cli.cli:app" # <- This project is the project name, DO change it

Now you can see each cli application as a sub command.

❯ project --help

 Usage: project [OPTIONS] COMMAND [ARGS]...

╭─ Options ─────────────────────────────────────────────────────────────────────────────────────────╮
│ --install-completion  [bash|zsh|fish|powershell|pwsh]  Install completion for the specified shell.│
│                                                        [default: None]                            │
│ --show-completion     [bash|zsh|fish|powershell|pwsh]  Show completion for the specified shell,   │
│                                                        to copy it or customize the installation.  │
│                                                        [default: None]                            │
│ --help                                                 Show this message and exit.                │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─ Commands ────────────────────────────────────────────────────────────────────────────────────────╮
│ api                        model cli                                                              │
│ config                     config cli                                                             │
│ user                       user cli                                                               │
│ run                        run cli                                                                │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯

In the example above we can run the command project config show to see the current configuration of our project.

I learned not to fear the arbitrary size feature of tailwind. While building out reader.waylonwalker.com I kept getting content flowing off the screen, and struggling to keep it on the screen. I really felt that I should be able to do this with vanilla tailwind, but after some encouragement from Twitter I decided to lean on arbitrary values and it worked.

Don’t fear the arbitrary values.

<li class="max-w-[100vw]">
</li>

Learn more about using-arbitrary-values from their docs docs

Each time I go to set up npm I am frustrated by the errors saying that I don’t have permission to npm i -g <package>, and it’s frustrating. And I forget what I need to do to tell npm to install packages in a directory I own, and my shell to look there so that I can use the executables.

mkdir ~/.npm-global
export NPM_CONFIG_PREFIX=~/.npm-global
export PATH=$PATH:~/.npm-global/bin

For the fix to remain persistent you need to put these two lines in your shell profile like ~/.bashrc or ~/.zshrc.

export NPM_CONFIG_PREFIX=~/.npm-global
export PATH=$PATH:~/.npm-global/bin

If you are designing a website in dark mode the scrollbars can be finicky to match the theme. Here is a pretty sane default that looks nice without being obnoxiously contrast to the rest of the site.

    <style>
        ::-webkit-scrollbar {
            height: 1rem;
            width: 1rem;
        }

        ::-webkit-scrollbar-track {
            background-color: rgb(24 24 27);
        }

        body::-webkit-scrollbar-track {
            background-color: rgb(39 39 42);
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgb(82 82 91);
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: rgb(113 113 122);
        }

        body::-webkit-scrollbar-thumb {
            background-color: rgb(82 82 91);
        }

        body::-webkit-scrollbar-thumb:hover {
            background-color: rgb(113 113 122);
        }

        ::-webkit-scrollbar-corner {
            background-color: rgb(39 39 42);
        }
    </style>

Want a rounded scrollbar thumb? add these styles.

::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    border-radius: 9999px;
}

body::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    border-radius: 9999px;
}

This makes a very nice looking default darkmode scrollbar.

Before deploying to cloudflare pages with wrangler you need a cloudflare api token. You can get one at dash.cloudflare.com/profile/api-tokens.

Install Wrangler #

Next install wrangler using npm.

npm i -g wrangler

Create a Project #

Before you deploy to cloudflare pages you need to create a project. You might already have one, or you might want to create one in the webui, but you have the option to create it at the command line with wrangler.

npx wrangler pages deploy markout --project-name reader-waylonwalker-com --branch markout

Deploy #

Now you can deploy your static application using wrangler to cloudflare pages.

In this example I have my application built into the markout directory, and since the production branch is named markout I need to pass that in here as well.

wrangler pages deploy markout --project-name reader-waylonwalker-com --branch markout