Today I Learned

I’m trying to replace my usage of google inline search apps with real apps, today I used a stopwatch to time some things out at work by opening stopwatch. This was something I just wanted running in a tab on another screen, it was not timing running code or anything, I was using it as a reminder to check browser caches every 5 minutes or so for some testing.

So tonight I whipped up a stopwatch, clock and timer, all of which are using the wakelock API to keep the screen on while the app is running.

    // Wake Lock support
    let wakeLock = null;
    async function requestWakeLock() {
      try {
        if ('wakeLock' in navigator) {
          wakeLock = await navigator.wakeLock.request('screen');
          console.log("Wake lock acquired");
        }
      } catch (err) {
        console.error("Wake lock error:", err);
      }
    }

    document.addEventListener("visibilitychange", () => {
      if (wakeLock !== null && document.visibilityState === "visible") {
        requestWakeLock();
      }
    });

    requestWakeLock();

I’ve been working on ninesui, inspired by k9s see thoughts-633. I want a good flow for making video for the readme and I am using charm.sh’s vhs for this. Its running in an archBTW distrobox and looks gawdaweful.

The over saturated colors give it a really retro look, seems fine, but not my cup of tea. I tried to change the textual theme to tokyo-night and it might have made it a bit better, but still over-saturated.

After #

What I found is that vhs has themes, setting it to dracula made everything much better.

# sort.tape
Output assets/sort.mp4
Output assets/sort.gif

Require echo

Set Shell "bash"
Set FontSize 32
Set Width 1920
Set Height 1080
+ Set Theme 'Dracula'

NinesUI #

I’m using these in my ninesui project, right now they are in the readme, but maybe some docs will grow eventually. Right now its hardcore explore phase.

I’m trying to learn proper logs, monitoring, otel, and grafana. Today I imported a bunch of pre-made k8s dashboards and made a few of my own for specific apps, and it made me want to know how I can turn my own custom dashboards into infrastructure as code. Turns out grafana makes it pretty easy to do this, if you have the grafana dashboard sidecar running. It will pick up any ConfigMap with the grafana_dashboard label and import it.

Go to Dashboards -> Pick a Dashboard -> Export -> JSON.

apiVersion: v1
kind: ConfigMap
metadata:
  name: my-dashboard
  namespace: meta
  labels:
    grafana_dashboard: "1"
data:
  my-dashboard.json: |
    {
      "annotations": {
        "list": [
      ...
      "uid": "fel2uhjhepg5ce",
      "version": 3
    }

I’ve been using ruff to lint my python code for quite awhile now, I was pretty early to jump on it after release. Some of my projects have had a nice force-single-line setting and some have not. I dug into the docs and it was not clear what I needed to make it work.

[tool.ruff]
select = ['I'] # you probably want others as well

[tool.ruff.isort]
force-single-line = true

Turns out I was missing Isort in the select list.

I was looking back at my analytics page today and wondered what were my posts about back at the beginning. My blog is managed by markata so I looked at a few ways you could pull those posts up. Turns out it’s pretty simple to do, use the markata map with a filter.

from markata import Markata

m.map('title, slug, date', filter='date.year==2016', sort='date')

the filter is python eval that should evaluate to a boolean, all of the

Result #

[
    ('⭐ jupyterlab jupyterlab', 'jupyterlab-jupyterlab', datetime.date(2016, 12, 13)),
    ('⭐ nickhould tidy-data-python', 'nickhould-tidy-data-python', datetime.date(2016, 12, 9)),
    (
        '⭐ mikeckennedy write-pythonic-code-demos',
        'mikeckennedy-write-pythonic-code-demos',
        datetime.date(2016, 11, 22)
    ),
    (
        '⭐ mikeckennedy write-pythonic-code-for-better-data-science-webcast',
        'mikeckennedy-write-pythonic-code-for-better-data-science-webcast',
        datetime.date(2016, 11, 22)
    ),
    ('⭐ rajshah4 dlgroup', 'rajshah4-dlgroup', datetime.date(2016, 11, 18)),
    ('⭐ pandas-dev pandas', 'pandas-dev-pandas', datetime.date(2016, 10, 5))
]

You could use the list command as well right within your shell and the same map and filters work.

⬢ [devtainer-0.1.3] ❯ markata list --map title --filter='date.year==2016'
[22:35:06] 2088/2145 posts skipped                                                                       skip.py:36
           57/2145 posts not skipped                                                                     skip.py:37

⭐ pandas-dev pandas
⭐ rajshah4 dlgroup
⭐ mikeckennedy write-pythonic-code-for-better-data-science-webcast
⭐ mikeckennedy write-pythonic-code-demos
⭐ nickhould tidy-data-python
⭐ jupyterlab jupyterlab

You could also do it with jin right inside of a markdown post using the jinja_md plugin.

{% raw %}
{% for title, slug, date in markata.map('title, slug, date', filter='date.year==2016', sort='date') %}
* [{{title}}]({{slug}}) - {{date}}
{% endfor %}
{% endraw %}

You do have to `jinja: true` in the frontmatter of the post.

Result #

{% for title, slug, date in markata.map(’title, slug, date’, filter=‘date.year==2016’, sort=‘date’) %}

• {{title}} - {{date}} {% endfor %}

Using pbpaste for command substitution keeps sensitive or long URLs out of your shell history. Instead of typing git clone https://github.com/user/repo-with-long-name.git, copy the URL to clipboard and run git clone "$(pbpaste)". This prevents the URL from appearing in ~/.bash_history or ~/.zsh_history.

To get pbpaste working on both Xorg and Wayland, add this to your shell config:

if [[ $(command -v wl-copy) ]]; then
    alias pbcopy='wl-copy'
    pbpaste() { wl-paste; }
elif [[ $(command -v xclip) ]]; then
    alias pbcopy='xclip -selection clipboard'
    pbpaste() { xclip -selection clipboard -o; }
fi

The function approach (instead of alias) enables command substitution, while the quotes around $(pbpaste) handle spaces and special characters safely.

Now you can use it.

git clone "$(pbpaste)"

More importantly secrets can stay out of your history.

export GITHUB_TOKEN="$(pbpaste)"
export AWS_ACCESS_KEY_ID="$(pbpaste)"
export AWS_SECRET_ACCESS_KEY="$(pbpaste)"
export DATABASE_URL="$(pbpaste)"

I run tailwind for my personal blog, whenever I update it, pre-commit goes in and fixes end of file. I’m sick of these things fighting each other, since it is a generated app it is going to et ignored from pre-commit from now on.

exclude: ^static/app.*\.css$
repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v2.4.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
      - id: check-yaml
      - id: check-added-large-files

I’m building in a [[ fragmentions ]] implementation into my blog, I wanted to add some text before the fragment to indidate that it was the highlighted fragment that someone may have intended to share with you.

To get a newline in a :before I need to use \A and white-space: pre-line.

body :target::before,
body [fragmention]::before {
    content: "Highlighted Fragment:\A";
    white-space: pre-line;
    @apply font-bold text-yellow-600;
}

Here is what it looks like on my not yet live implementation of fragmentions.

Testing fresh nvim installs can be a pain, and hard to di without borking your known good install. I’ve been using NVIM_APPNAME to run a test nvim in a sandbox that wont bork my main install. This usually runs for me in under a minute, can be down under 15s if I remove some of the TreeSitter installs at the end. This beats a full docker build of my full devtainer to test out nvim packaging woes.

rm ~/.cache/wwtest -rf
rm ~/.local/share/wwtest -rf
rm ~/.config/wwtest -rf
cp -r nvim/.config/nvim/ ~/.config/wwtest
NVIM_APPNAME=wwtest nvim --headless "+Lazy sync" +qa
NVIM_APPNAME=wwtest nvim --headless "+TSUpdateSync" "+sleep 5000m" +qa
NVIM_APPNAME=wwtest nvim --headless "+MasonUpdate" +qa
NVIM_APPNAME=wwtest nvim --headless "+TSInstallSync! c cpp go lua python rust tsx javascript typescript vimdoc vim bash yaml toml vue just" +qa
NVIM_APPNAME=wwtest nvim --headless "+MasonInstall lua-language-server rustywind ruff ruff-lsp html-lsp typescript-language-server beautysh fixjson isort markdownlint stylua yamlfmt python-lsp-server" +qa
NVIM_APPNAME=wwtest nvim

I’ve started to use this as a just recipe to run before deploying a new version of my dotfiles. So far its pairing nicely with nvim-manager

When I want to put a date in a document like a blog post from vim I use !!date from insert mode. Note that entering !! from normal mode puts you in command mode with :.! filled out. This runs a shell command, i.e. date for this example.

It outputs the following

Fri Jan 31 08:46:11 PM CST 2025

You can also pass in a date such as tommorrow by pasdding in the -d date -d tomorrow.

It outputs the following

Sat Feb 1 08:53:20 PM CST 2025

codeium just taught me this one with autocomplete

:put =strftime('%Y-%m-%d')

This outputs the following

2025-01-31

What I like about the :put =strftime( method is that you can add a format, but that is a lot more for me to remember than !!date

A few weeks later #

I’m going through a bunch of blog posts and dont want my date formats to change to the Wed Feb format so I broke down and made these keybindings. I think I’m still going to be using .!date a lot, but these keybindings will be nice for editing blog post frontmatter.

set("n", "<leader>dd", "<cmd>put =strftime('%Y-%m-%d')<cr>", { noremap = true, silent = true })
set("n", "<leader>dt", "<cmd>put =strftime('%Y-%m-%d %H:%M:%S')<cr>", { noremap = true, silent = true })

• dd 2025-02-12
• dt 2025-02-12 12:53:47
• :.!date Wed Feb 12 12:53:47 PM CST 2025

Today I ran into an interesting question, why am I being asked to configure tzdata while installing npm. Turns out that the aptitude cli has a why command that very handily nails down why you have something installed on a debian based system.

Install aptitude #

apt install aptitude

Why tzdata #

Now we can query why we need tzdata and see the full chain with the root package being npm.

root@47685221fb82:/# aptitude why tzdata
i   npm        Depends  node-gyp
i A node-gyp   Depends  gyp (>= 0.1+20200513gitcaa6002)
i A gyp        Depends  python3:any
i A python3    Provides python3:any
i A python3    Depends  python3.12 (>= 3.12.3-0~)
i A python3.12 Depends  tzdata

Today I ran into this interactive prompt on ubuntu while installing node and npm, and I do not want to manually configure this interactively every time I run an install, moreso in docker I do not have the interactive terminal to do so.

Configuring tzdata
------------------

Please select the geographic area in which you live. Subsequent configuration questions will narrow this down by presenting a list of cities, representing the time zones in which they are located.

  1. Africa  2. America  3. Antarctica  4. Arctic  5. Asia  6. Atlantic  7. Australia  8. Europe  9. Indian  10. Pacific  11. Etc  12. Legacy
Geographic area:

Why tzdata #

Checking aptitude why tzdata it shows that the chain goes back through npm.

root@47685221fb82:/# aptitude why tzdata
i   npm        Depends  node-gyp
i A node-gyp   Depends  gyp (>= 0.1+20200513gitcaa6002)
i A gyp        Depends  python3:any
i A python3    Provides python3:any
i A python3    Depends  python3.12 (>= 3.12.3-0~)
i A python3.12 Depends  tzdata

The solution, configure tzdata #

export TZ="America/Chicago"
export DEBIAN_FRONTEND=noninteractive
apt update
apt install tzdata -y
ln -fs /usr/share/zoneinfo/$TZ /etc/localtime
dpkg-reconfigure -f noninteractive tzdata

This is required, because apt installing tzdata will trigger the

https://www.youtube.com/watch?v=03KsS09YS4E&t=610s

Today I learned about the basic calculator, bc. At the very end of this video prime uses it to add numbers in vim.

REPL #

You can start a calculator repl at the command line, by running bc.

Vim #

Since bc supports standard unix pipes you can easily pipe data from vim into bc and back out using !!bc. All you need is a string of math on the line you want to calculate, go to normal mode and run !!bc to get the answer.

Traditionally I will open my system calculator or ipython to do something like this.

To keep the equation and the result in the same line you can send the equation to stderr and the result to stdout using tee.

:.!tee >(cat >&2) | bc

I’ve been back to putting some images on my blog lately and thinking about making them a bit thinner through the use of aspect ratio for simplicity. I’m leaning pretty heavy on tailwindcss these days due to some weird quirks of markdown-it-attrs I cannot have slashes in classes from markdown so I made a .cinematic class to achieve this.

.cinematic {
  @apply aspect-[2.39/1];
}

Example

Attrs does not like ‘/’ characters in its classes, so to use some tailwind classes with custom values we must make new classes in our tailwind input css.

.cinematic {
  @apply aspect-[2.39/1];
}

Given the following markdown with attrs added to the image and to the paragraph block.

![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.aspect-[2.39/1]}

![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.cinematic}

{.cinematic}
![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png)

We get the following output with only the middle one working correctly.

{.aspect-[2.39/1]}

The inline version of `.cinematic` works, but `.aspect-[2.39/1]` does not,

I built out a tool for myself to manage my nvim configuration, and I wanted to quickly see which one I am running in my starship prompt. Here’s the config I ended up with. It warns if the NVIM_APPNAME environment variable is not set, and it shows which nvim I am using if it is set.

[custom.nvim-manager-system]
when = '[[ ! -n "${NVIM_APPNAME}" ]]'
style = "bold yellow"
symbol = '[ ](fg:#15AABF)'
format = '$symbol[USING SYSTEM NVIM]($style)'

[env_var.NVIM_APPNAME]
style = "green"
symbol = '[ ](fg:#15AABF)'
format = '[$symbol${env_value}]($style)'
variable = "NVIM_APPNAME"

I recently noticed that my og images were missing emoji. They were taken using headless chrome in a container. I fixed it by adding an emoji font in the containerfile / dockerfile.

RUN apt-get update && apt-get install -y \
    # Add fonts with emoji support
    fonts-noto-color-emoji \
    && rm -rf /var/lib/apt/lists/*

Before #

Here’s what they were looking like with broken emoji fonts.

After #

And now with the fixed emoji font.

Today I learned that the docs in postiz are a bit behind, (fantastic docs btw, they are to the point, and cover almost all of what you need). The docs state that you need to include an R2 bucket to handle uploads.

This issue shows that more work has been done, one of which is local storage. The compose file they use in the quick start has the required env variables to set this up.

      STORAGE_PROVIDER: "local"
      UPLOAD_DIRECTORY: "/uploads"
      NEXT_PUBLIC_UPLOAD_DIRECTORY: "/uploads"

looking into my running instance I can see my images there.

⬢ [devtainer] ❯ podman exec postiz ls /uploads/2025/01/09
811747b3f703f5d9a7f10aff5103412ff0.jpeg
a221db10a76f0c414171ab417379b09ec.jpeg

Today i got hit by this accessibility issue on my site. Low contrast links are not distiniquishable. I had not seen this error title before it was new to me, maybe I have bad memory or maybe it’s new to me.

I ended up dropping the background color of the site down a notch as I didn’t really care for the semi-dark brown anyways. I’m liking the near black bg-zinc-950 much better now.

Now I got that 100 A11y score in lighthouse.

Today I discovered the Urllink function in bash from the ujust tool from ublue.it. Seems like a cool trick, but might not work everywhere.

########
### Special text formating
########
## Function to generate a clickable link, you can call this using
# url=$(Urllink "https://ublue.it" "Visit the ublue website")
# echo "${url}"
function Urllink (){
    URL=$1
    TEXT=$2

    # Generate a clickable hyperlink
    printf "\e]8;;%s\e\\%s\e]8;;\e\\" "$URL" "$TEXT${n}"
}
```j