That’s where Grafana Live comes in, which allows you to stream data in (soft) real-time. For example, let’s say we have the data in a Python script:

import random
import time

alt = random.uniform(0, 1000)
speed = random.uniform(0, 100)

for _ in range(500):
    alt += random.uniform(-5, 5)
    speed += random.uniform(-1, 1)
    time.sleep(0.1)

How do we get it into Grafana?

The official documentation suggests creating a full-blown TypeScript + Go plugin or setup Telegraf. None of that is necessary, you can just use the new API endpoint /api/live/push/:streamId directly:

import os
import random
import requests
import time

url = "http://localhost:3000/api/live/push/test_stream"
headers = {"Authorization": "Bearer " + os.environ["AUTH"]}

alt = random.uniform(0, 1000)
speed = random.uniform(0, 100)

for _ in range(500):
    alt += random.uniform(-5, 5)
    speed += random.uniform(-1, 1)
    response = requests.post(url, headers=headers, data=f"balloon speed={speed},alt={alt}")
    if response.status_code != 200:
        print(f"Error: {response.status_code} - {response.text}")

    time.sleep(0.1)

Authentication is done with an API token.

Thanks to Grafana89e9 and Smaragda Benetou for pointing this out with code examples.

A lot of people seem to think that performance is about doing the same thing, just doing it faster. And that’s not true. That’s not what performance is all about. If you can do something really fast, really well, people start using it differently. Linus Torvalds

Hot reloading

The first thing Victor demonstrates is already cool: hot reloading. Any code change is immediately visible on the canvas. 13 years later, it’s pretty much everywhere, from frontend frameworks (Flutter, React, Vite, Webpack) to game engines (Unity, Unreal Engine).

What does the code do?

Now, let’s step up the game. Take a look at this:

The connection between code and result is immediately visible. It also works the other way round; you can select any pixel to highlight the code responsible for painting it. Element picking is present for many GUI toolkits; going from code to result, however, is exceedingly rare.

Visualizing time

Visualizing a program’s behavior over time is immensely powerful, not just for games. The rr debugger, for example, applies this concept, and the list of testimonials proves this is wanted. Of course, Victor takes this to the next level, also allowing changes and visualizing the new timeline.

Debug programming

How do we debug programs?
With interactive tools showing us the state of the program for specific arguments, so we can confirm our assumptions.

Why is it a separate step from programming? Why do we only use this once bugs have already caused issues?

Well, Victor does it better. By including the debugger in the programming environment, we can immediately see the state of the program for any input we want.

2025-02-28: There has been an attempt to create such an IDE.

2025-04-02: Obviously Jupyter Notebooks, and their extensions are a step in this direction.

Conclusion

Inventing on Principle is a really great talk with incredibly good ideas. If I get the time, I’ll implement some of these.

1. Enable Bluetooth sharing in Settings > General > Sharing
   See Apple’s guide for a longer explanation
2. Now, this is the same as in Apple’s guide

   Open the Bluetooth File Exchange (located in the Utilities folder in the Applications folder)

3. The guide’s step 2 is impossible here, File > Send File is greyed out. You’ll get a popup that lets you browse other devices. We don’t want that, so click Cancel, and then, while the same app is still selected, you can finally
4. use File > Send File.
5. Select the file and device you want and click Send.

First, border supports gradients, so maybe we can use this property?

Taken from this excellent blog post, it’s almost what I want. Unfortunately, though, it doesn’t support rounded edges. Also, it uses a custom property, and despite the post being three years old, custom properties are still not a thing in all browsers. There’s a workaround included, essentially generating the expected animation for the browser, but it’s a lot of boilerplate, and I don’t like bloating my file just for this.

Another option is using a pseudo-element behind the button and setting its background. I played around with this, and it seemed like the best option. Unfortunately, I only found an example with a linear gradient while I wanted a conic one. Changing the gradient type is easy, but then the animation was broken. Moving the background-position works only for the scaled up linear gradient. If I apply a rotate animation directly, we get this:

We need to clip away anything not part of the border. I searched for clipping but only ended up with clip-path, svgs and the likes, which could maybe work, but would be a hassle. masks also didn’t look too promising.

Finally, overflow saved me. I hadn’t seen the overflow: clip property, and low and behold, it also comes with overflow-clip-margin, giving us the space for a beautiful border. This is perfect! Now, I just had to center the pseudo-element, one of the most infamous tasks in CSS. Luckily inset: 0 combined with margin: auto gets us almost there, but for some reason, we also need to override left with the explicit indentation to offset the oversize width. This is the final result, and although it feels a bit cursed, it works™:

pg_dump: error: query failed: ERROR: permission denied for view pg_roles

I don’t know why pg_dump needs to access the pg_roles view, but it does and fails if it can’t. Maybe we can find a way to skip this roles access? I don’t want any roles, I just want the data.
There are multiple promising options in the help menu that I tried:

-O, --no-owner               skip restoration of object ownership in plain-text format
-a, --data-only              dump only the data, not the schema
-t, --table=PATTERN          dump the specified table(s) only

Unfortunately, none of them solved the problem, the error persisted.

So I searched for a different way to export the data and I found a way. It’s not as elegant as pg_dump, but it works and that’s what counts. We can use the COPY command to move data between a table and a file.

Here’s StackOverflow’s way to export a table from any SQL database into a CSV file:

echo "\COPY (select * from table ) TO 'table.csv' (format CSV);" > my_query.sql
psql <database> -af my_query.sql

We use the backslash to make it a client command, so psql will look in the current directory for the file. If you use COPY without the backslash, the server will look for the file.

An even shorter answer without a helper file is found in the comments.

psql <database> -c 'select * from table limit 5' -tAF , > table.csv

For importing the data back into a database, you can then use the \COPY command again:

psql <database> -a -c "\COPY table FROM 'table.csv' CSV"

A simple Python script is enough to read the file and count the occurrences of each digit. We can use a dictionary to store the counts, which is initialised with 0 for each digit.

with open("1-1000000.txt") as f:
    pi = f.read()
    count = dict((str(i), 0) for i in range(10))
    for digit in pi:
        count[digit] += 1
    print(count)

Et voilà, the result:

{'0': 99959, '1': 99758, '2': 100026, '3': 100229, '4': 100230, '5': 100359, '6': 99548, '7': 99800, '8': 99985, '9': 100106}

This is only counting digits after the decimal point, to include the first 3 increase the count for 3 and take away the 1 at the millionth place.

If you want to see it as a nice graph, add the following code:

import matplotlib.pyplot as plt

plt.bar(count.keys(), count.values())
plt.show()

The distribution is pretty even, so you might consider using Pi as a (pseudo) random number generator. It would be pretty good on its own (study 1, study 2, 10 million digits), but randomness is usually meant as unguessable numbers (at least without significant effort). As soon as someone recognizes the sequence, the surprise is gone and for example getting “random” rewards in a game becomes predictable and boring. On the other hand, most people only know the first few digits of Pi, so if you start with a large enough offset, you should be fine.

I like neat and tidy things, so I’m wary of when and what I commit. Work in progress rarely makes it into Git history because I am sure I will work on it tomorrow and so I can save myself the hassle of a non-compiling, ugly commit. Obviously, this doesn’t always work out, and there’s a single big commit after quite some time, if ever. Sometimes, though, it’s the other way around; I add feature after feature so quickly that I don’t stop to commit in between and end up with a massive changelog. Neither is great, I too think commits should be

logical units of change GitHub’s Git Guides

Force-pushing is an option to literally rewrite history, but it causes other problems. Every single repository clone needs to adapt, making this option unfeasible for projects developed together with others. Even if it’s a hobby project and I’m the only contributor, there are still often two clones, one on my laptop and another on my PC. This then requires “force pulling”, git fetch --all && git reset --hard origin/main, which I not only have to look up how to do (had, thanks to this post) but also leaves me uncertain what potentially significant changes and local files I will lose. Resetting Git is not an operation one should do every day.

Some might solve this problem by creating feature branches and subsequentially squashing, leaving a single, self-contained, and well-tested commit. Maybe I should try this sometime, but despite this obviously not fit for more than one developer approach, I like the simplicity of having a single branch: no merge conflicts (at least in theory) and not having to specify branch names for Git commands. You might have guessed what I’m hinting at, yes, I do push (sometimes even force-push 😲) directly to the main branch.

Committing often helps me restore examples or give seemingly failed options another try. It also makes changes from templates or generated code visible, which is a good indicator for the intended outcome and thus helps in updating. Paying the small price of a less-than-perfect history is the price I can hopefully convince myself to pay. Software isn’t perfect either, so why should its development be? No one’s going to count commits; some might even interpret higher numbers as better.

Coming to the only logical conclusion after all of this, I just committed this post. Have a great day and a cat: