In between maki and nigiri, he heard a song on the loudspeakers of the restaurant, called “Shima Uta”, by a Japanese group named The Boom. The coup de coeur was immediate.

He asked the waiter for the name of the song, and the next day he somehow found a copy of the CD in Buenos Aires, got obsessed with it, and ended up deciding to record a cover… in Japanese. Because why not.

Needless to say, Alfredo Casero speaks Japanese as well as I speak Klingon. Never mind, Japanese pronounciation is quite easy for Spanish speakers apparently, so he learned the lyrics phonetically, as one does, and recorded the song.

Lo and behold, the song topped the charts in Argentina, and against all odds, even became a hit in Japan.

The official video of the song features a “making of” at the end, and it’s hilarious.

Not only that, but in 2002 the football world cup took place in Japan & South Korea… and I kid you not, The Boom invited Casero to sing the song with them, live, in a stadium in Japan.

There’s something unusually Argentine about this whole story. Naive, bold, stupid, brilliant, funny.

That URL does not exist anymore, and sadly the Internet Archive never archived it. I do have some fragments here and there, in some very old CD-ROMs I burned at the turn of the millenium, but I haven’t been able to find a proper, exhaustive backup of the whole thing. To give you an idea, this is what the home page of sc2a.unige.ch looked like in December of 1996. This was “the web”; a bunch of text formatted with Times New Roman, or whatever the default serif font was in your workstation.

In that message I also asked for help, since I was using a text-based operating system (a VAX system running an old version of VMS) and I did not have a computer with Netscape available to test the page. Imagine that. How did I create that content? At home, using HoTMetaL Pro and an HTML plugin for Microsoft Word 6.0 that could save documents as (horrendous, let’s be honest) HTML. Years later I moved into EditPlus, FrontPage, Dreamweaver… but not yet at that point. This was just me, most probably Notepad, and some late night HTML knowledge on my PC running Windows 3.1.

How did I get this knowledge? Well, through Elizabeth Castro’s awesome HTML Visual Quickstart Guide 1st Edition! The last edition I could find of that book was from 2018.

Some of the older articles in this blog were initially published in that page, like for example my tongue-in-cheek manual for users of the Internet at the sc2a.unige.ch server, or my first JavaScript calculator. I even published a journal of my 1996 trip to Argentina… maybe one day I’ll publish it again here.

That website single-handedly kickstarted my career as a professional web designer, programmer, and now, 30 years later, software architect. It all boils down to that moment in time, when I used FTP to upload those humble HTML files into the VMS account that my university provided their students with.

Since then, web technology evolved in uncanny and extraordinary ways; from the wonder of AJAX, which I first saw in action in 2002, to Flash movies, to XML, to JSON, to CSS, to WebSockets, to the <canvas> tag, to the incredible evolution of JavaScript (both on the client and server sides), to Java applets, to WebAssembly, I’ve used pretty much every single technology that browsers have made available to us.

It all started the moment I decided to click on the “View Source” menu on Netscape, and started to learn how websites were made.

Ghostty is yet another brainchild of Mitchell Hashimoto, of HashiCorp fame.

The installation on Fedora 44 requires a few steps, since it’s not available on Flatpak at the moment, nor it is immediately available on standard Fedora repos:

$ sudo dnf copr enable scottames/ghostty
$ sudo dnf install ghostty

I then opened the configuration file ~/.config/ghostty/config.ghostty using the CTRL+, (comma) sequence, and added these settings for my personal pleasure:

app-notifications = no-clipboard-copy
cursor-style = block
cursor-style-blink = true
font-family = "BlexMono Nerd Font"
font-size = 16
keybind = F11=toggle_fullscreen
link-url = true
maximize = true
shell-integration-features = no-cursor
theme = light:iTerm2 Light Background,dark:iTerm2 Dark Background
window-theme = system
working-directory = window-inherit-working-directory

And conveniently enough, a quick CTRL+SHIFT+, reloads the configuration live after editing the file.

I found Ghostty to be exactly the terminal application I wanted all along; it’s fast, cross-platform, convenient, configurable, and it behaves perfectly well.

Let’s assume your Markdown posts have this structure:

---
title: 'Some Title'
author: 'Jane Smith'
excerpt: 'Blah blah…'
slug: some-title
image: some-title.jpg
---

This is my article…

Then in your Hugo theme templates you can use code like this to read the image, transform it as Base64, and embed the result on the final HTML:

{{- $imgPath := $page.Params.image -}}
{{- $image := $page.Resources.GetMatch $imgPath -}}
{{- if $image -}}
{{- $thumb := $image.Fit "420x420" -}} {{/* Obviously optional */}}
{{- $base64 := $thumb.Content | base64Encode -}}
  <p><a href="{{ $page.Permalink }}"><img class="thumbnail"
    src="data:{{ $image.MediaType.Type }};base64,{{ $base64 }}"></a></p>
{{- else -}}
  <p><a href="{{ $page.Permalink }}">
    {{ partial "gray-image-placeholder" (dict "className" "thumbnail") }}</a>
  </p>
{{- end -}}

The gray-image-placeholder shown in the else clause is just a file located in the layouts/partials/ folder of your theme, to be used in case the image your specified does not exist, called gray-image-placeholder.html and looking like this:

<img class="{{ .className }}" src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAABAAAAAMACAIAAAA12IJaAAAABGdBTUEAALGPC/
xhBQAAAAFzUkdCAdnJLH8AAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgA
ABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAADS1JREFUeNrt10ENAAAIxDBA9cnHBg
mthP3WSQoAAPhhJAAAAAMAAAAYAAAAwAAAAAAGAAAAMAAAAIABAAAADAAAAGAAAAAAAwAA
ABgAAADAAAAAgAEAAAAMAAAAYAAAAAADAAAAGAAAAMAAAAAABg (… snip…)
AAAYAAAAMAAAAAABgAAADAAAACAAQAAAK5bhvYHaF3qNu4AAAAASUVORK5CYII=">

The className inserted will be the one passed in the (dict) used when calling the partial.

In Asciidoctor and Antora I liked to use such highlighted blocks, to showcase some particular information, so I wanted to have them on this website too. Although, as you might imagine, Markdown does not provide this capability per se.

The Markdown code I use looks like this, showing its corresponding output below.

Notes

Great for extra information.

::: note
This is a note.
:::

NOTE: This is a note.

Tips

In green, for suggestions or shortcuts.

::: tip
This is a tip.
:::

TIP: This is a tip.

Important

Emphasis you must not miss.

::: important
This is important.
:::

IMPORTANT: This is important.

Caution

Risk of confusion or bad outcome.

::: caution
This is a cautionary tale.
:::

CAUTION: This is a cautionary tale.

Warning

To highlight hazard or serious consequences.

::: warning
This is a warning.
:::

WARNING: This is a warning.

PDF and EPUB

This also works in the PDF and EPUB outputs, too.

And the answer is yes, of course you can. The first thing I’ve done is to change the approach, and instead of manually typing this command:

$ v4l2-ctl --device=/dev/video4 --set-ctrl focus_automatic_continuous=0

… I took a different approach, using the v4l2ctrl command instead:

$ sudo dnf install v4l2ucp
$ v4l2ctrl -d /dev/video4 -s camera-settings.txt

This saves all settings of the camera in a single text file, and the cool thing is that you can use the -l argument to load them back, and it gives you control over many different parameters of the webcam in one place and you can load them in one shot:

$ v4l2ctrl -d /dev/video4 -l camera-settings.txt

Loading on Startup

Now I need to wrap this command as a systemd service that is executed every time my my machine boots up, saved in a file named fix-webcam.service:

[Unit]
Description=Fix Logitech webcam autofocus

[Service]
Type=oneshot
# Wait 10 seconds for systemd-logind to grant video device permissions
ExecStartPre=/usr/bin/sleep 10
ExecStart=/usr/bin/v4l2ctrl -d /dev/video4 -l /home/user/camera-settings.txt

[Install]
WantedBy=default.target

I installed this service it in my local systemd user folder:

$ mkdir -p ~/.config/systemd/user
$ mv fix-webcam.service ~/.config/systemd/user/fix-webcam.service
$ systemctl --user daemon-reload
$ systemctl --user enable fix-webcam.service

TIP: Yes, you can also use symbolic links and store the services somewhere else.

Et voilà! Now this service is executed every time I start my machine. But what happens if I unplug the webcam? Then the settings would be gone again. Worry not! Turns out, there’s a way to trigger the systemd service above whenever a USB device is plugged.

Loading on Unplug & Replug

First plug your webcam, and find the ID of your USB device:

$ lsusb  | grep 046d
Bus 003 Device 032: ID 046d:c548 Logitech, Inc. Logi Bolt Receiver
Bus 003 Device 034: ID 046d:0843 Logitech, Inc. Webcam C930e

The 046d vendor ID corresponds to Logitech, and in the case of my C930e webcam, 0843 is the product ID. I also have a wireless Logitech MX Master 3S mouse, so the dongle appears there as well.

Then, as a superuser, I created a new file called /etc/udev/rules.d/99-dock-fixes.rules with the following contents:

# Trigger the webcam script when the Logitech camera is plugged in
ACTION=="bind", SUBSYSTEM=="usb", ATTR{idVendor}=="046d", ATTR{idProduct}=="0843", TAG+="systemd", ENV{SYSTEMD_USER_WANTS}+="fix-webcam.service"

Then reload the changes, and trigger the action to test it:

$ sudo udevadm control --reload-rules
$ sudo udevadm trigger --action=bind

TIP: I could verify the changes with another tmux panel showing the output of the following command: watch "v4l2-ctl --list-ctrls --device /dev/video4 | grep focus_automatic"

Et voilà (bis)! Now every time, a few seconds after I re-plug your webcam, my preferred settings apply.

NOTE: In the code above I’m using the bind action instead of add, for a reason; you should know that when you plug in a USB device, ACTION=="add" fires the exact millisecond the metal connects, before Linux has actually loaded the webcam or audio drivers. Sometimes, udev refuses to trigger the systemd service because the underlying device nodes don’t fully exist yet. Instead, bind tells udev to wait until the Linux drivers have actually attached to the hardware before triggering the service.

This story is not entirely true in the sense that when Bíró came to Argentina he had already invented the ballpoint pen (actually, it was invented by somebody else, but that early patent lapsed without commercial distribution). The first large-scale production and commercialization of the ballpoint pen started and spread from there, through the “Bíró & Meyne” company. And yes, in Argentina we still refer to ballpoint pens as “biromes” (derived from the company name), and I’m not kidding, that’s really how we call them, and that’s how I’ll call them in this article.

Then the story goes that a French man called Marcel Bich bought Bíró’s patent, and thus begat the Bic Cristal ballpoint pen that we all know, somewhere between the 1950s and 60s. And this is the gist of this article.

Because for all practical purposes, I consider the birome (specifically, the Bic Cristal) to be the most important invention of the 20th century. Yes: more important even that aeroplanes, computers, antibiotics, cell phones, tamagotchis, space travel, Walkmans, Pink Floyd, paperback books, or whatever else that came up during that time. The Bic Cristal is inexpensive (like, dirt cheap, not even 0.22 CHF per unit from Galaxus, that’s like 0.27 USD or 0.24 EUR), durable, lightweight, trustworthy, ubiquitous, simple, practical, reliable, and I’m running out of positive adjectives as I write this. And no, no other brand of birome can reach the quality of the Bic Cristal, not even remotely. All other biromes just plain suck in one way or another.

The Bic Cristal birome is a triumph of human engineering and ingenuity. It’s so good it hurts. Paraphrasing Steve Jobs, it’s like a bicycle for your hand.

Not many technologies created by humans can claim to be so deceptively useful and trustworthy at the same time. The birome is the most important invention of the 20th century because it democratized, without pretention and without limits, writing for everyone, everywhere, at every time.

No matter how many other kinds of pens I try (and believe me, I love my Pentel EnerGel pens, I truly do) I always come back to the Bic Cristal. It’s the pen I used throughout primary and high school (except for a short while in early primary school, when my teachers insisted we use fountain pens for some pedantic reason).

I simply love the ink quality (it dries in literal milliseconds and never ever fades away from paper) and how lightweight it feels on my hand. Its transparency tells you how much ink remains on it, and the cap fits perfectly on the opposite side while you write, providing a very nice counterweight on your fingers.

The birome feels surprisingly good in your hand. But, of course, writing is out-of-fashion these days, just like reading, or more generally, just like thinking.

As the Joker said in the 1989 “Batman” movie,

The pen is truly mightier than the sword.

And in that category, the Bic Cristal birome is the mightiest of them all.

Install and Run

First of all I downloaded the install CD for i386 of that old release, still available on the Ubuntu website after all these years.

Once that was done, I proceeded to create a QEMU virtual hard disk to install the OS into:

$ qemu-img create -f qcow2 ubuntu.qcow2 30G

Then, just launch a new virtual machine, booting from the virtual CD-ROM drive first, emulating a gigabyte of RAM, which is a reasonable amount for a computer of 2005:

$ qemu-system-i386 \
  -m 1024 \
  -cdrom ubuntu-5.10-install-i386.iso \
  -drive file=ubuntu.qcow2,format=qcow2 \
  -boot d \
  -no-reboot

The VM boots, and you’re immediately taken to the installation process. Select your locale and keyboard, and choose the defaults for the graphics card. Enter your desired hostname, timezone, and create a new user for your installation. The whole process takes a while to finish.

Once this is done, the VM shuts down automatically instead of rebooting (thanks to the -no-reboot option) and then you must start it back again, directly from the hard disk this time:

$ qemu-system-i386 \
  -m 1024 \
  -drive file=ubuntu.qcow2,format=qcow2 \
  -boot c \
  -full-screen

The operating system boots into a configuration phase, and after a few minutes, voilà! Ubuntu “Breezy Badger” 5.10 on your screen, 21 years later:

The default system includes quite a lot of software, including OpenOffice, Firefox, and whatnot. It was quite an impressive offering, all for free, and immediately compatible with pretty much every personal computer available to the public in 2005. No wonder Ubuntu became so popular back in the day.

PPC Shenanigans

Before reaching this point, I tried unsuccessfully to run the PPC version of Ubuntu Badger, which was the one I installed on my “Snow” iBook G3 21 years ago.

I gave a short description of that machine in an old article on this blog:

The main machine where I have Xubuntu installed is a rather old G3 iBook that I bought in 2002, with only 256 MB of RAM and 30 GB of hard disk. The machine runs like a charm, but of course with GNOME and KDE there’s a lot of swapping. As soon as I installed the Xfce desktop, things went really faster. I can only recommend using Xubuntu in old machines: the base system only takes 90 MB of RAM, and applications load faster than in GNOME or KDE.

Let’s all take a minute to consider that a modern operating system, running very decent software, could run in just 256 MB of RAM. Le sigh.

I first used the qemu-system-ppc command, with the -M mac99,via=pmu argument, to help this old Ubuntu recognize my mouse and keyboard. In particular, the via=pmu argument supposedly is meant to route the input devices through something called the “Power Management Unit”, expected by Ubuntu PPC kernels back in the day. I also tried using the -cpu g3 and the -vga std options in various iterations.

After the installation (which was somewhat successful), I had to boot the VM the -prom-env "boot-device=hd:,\yaboot" -prom-env "boot-args=conf=hd:,\yaboot.conf" arguments, because otherwise the VM defaults to looking for an Apple bootloader… which doesn’t exist in this context for obvious reasons. Instead we ask the VM to boot directly from Yaboot.

But the biggest drawback was that the installer failed to correctly setup the X.org server, and thus no desktop would ever appear on screen. This is without mentioning that QEMU had to translate all PPC instructions to the x86_64 architecture of my laptop, which meant that the whole system was reaaaaaaally sluggish.

So, at the end of the day, the i386 version was perfect for the purposes of memorabilia.

At this point in my laptop I have emulators for MS-DOS, Mac OS System 7.5, FreeDOS, Alpine Linux, and now also Ubuntu 5.10 for 32-bit i386.

Now, you’re reading this and you’re probably asking yourself, why? As Simon Sinek once said, start with why: why, why, why does this guy always talk to us without talking to us. Why, why, why.

Well, I’ll tell you why. Because I am talking to you. More precisely, I’m talking to your heart, which is exactly the title of a song by our national hero Charly García, released in “Tango” on March 29th, 1986, that is, a bit over 40 years ago, and I’ll leave it up to you to Google Translate the lyrics, which are sublime.

Oh yeah, it does sound 1980s, huh? Those synths. THOSE SYNTHESIZERS.

Charly, being the superstar he still is (regardless of his substance abuse) has had his own MTV Unplugged album in the 1990s, because it was such a tradition, and within that Unplugged album there’s another song I deeply love, (originally released together in the same album “Tango”), and that other incredible song is called “Pasajera en Trance”, and here it goes again because reasons. It speaks of distance, flow, travel, and so many other things.

“She dances on the sea”, says Charly.

OK, here go the lyrics, because they are out-of-this-world. Enjoy.

She’s about to board,
maybe she’ll snag a seat on the deck.
She’s about to take off,
she’s leaving.
She travels without paying,
the old trick of walking in the shadows.
She dances on the sea,
she’s leaving.
Passenger in a trance,
passenger in perpetual transit.
Passenger in a trance,
passing through the right places.
True love,
is like sleeping and being awake.
True love,
is like living in an airport.

As Charly says at the end, “merci beaucoup”.

Background

The original source code of the Java applet came from the Internet Archive. This original NeXTClock applet was written by Rene K. Mueller and is preserved in original/NeXTClock.java in the GitLab project. That applet used AWT, a background GIF, and a thread that updated the displayed time. I used that Java applet in my “GaMMA” home page around 1999, until 2004.

Interestingly enough, the original Java version was written almost exactly 30 years ago at the time of this article:

// --- NeXTClock, written by Rene K. Mueller <kiwi@the-labs.com>
//     V0.20: Jul 20, 1996

import java.awt.Graphics;
import java.awt.Image;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.util.Date;

public class NeXTClock extends java.applet.Applet
        implements Runnable {
// ...

The translated source code in JavaScript in src/NeXTClock.js keeps the same 64 x 64 layout and the same visual idea: a NeXT-like clock tile with the weekday, day of the month, month, green seven-segment time, and blinking separator pixels. The drawing code scales that original layout to fit larger square canvases while preserving the pixelated look.

Usage

Include NeXTClock.js, add a <CANVAS> object on your page, then create and start a clock:

<script src="NeXTClock.js"></script>
<canvas id="clock" width="128" height="128"></canvas>
<script>
  const canvas = document.getElementById("clock");
  const clock = new NeXTClock(canvas, {
    size: 128,
  });

  clock.start();
</script>

The constructor expects an HTMLCanvasElement. By default, it uses the canvas display size and keeps it square. You can also pass a size option or call setSize() later; requested sizes are rounded and clamped between 64 and 500 pixels.

Available methods on the class:

• start() begins animation using requestAnimationFrame().
• stop() cancels the animation frame loop.
• draw(date) draws one frame for the supplied Date, or the current local time when omitted.
• setSize(size) updates the square canvas size and redraws the clock.

You can pass the following options to the constructor:

• backgroundSrc: optional path to a background image. When omitted, the built-in canvas background is used.
• darkGreen: color used for the seven-segment time display. Defaults to #00c800.
• size: optional square canvas size in pixels, clamped from 64 to 500.

The clock automatically observes canvas resizing when ResizeObserver is available, so CSS-driven size changes are reflected in the next rendered frame.

As usual, you can grab the source code on my GitLab account.