Software Development by mm-dev on mm-dev

Proper Dotted Borders

Mon, 01 Sep 2025 07:46:58 +0100

Issues with CSS dashed and dotted border styles

CSS has dotted and dashed borders. They’re fine but don’t always look the way you might expect or prefer.

border-style: dotted dots are round (on my site I wanted square)
border-style: dashed dashes are nice and sharp but on corners the dashes become L shapes
Both dots and dashes are drawn inconsistently depending on how thick they are.

9-Slice Scaling

Green dotted border image with 9 slices overlaid, slices 2, 4, 6 + 8 would repeat to fill the edges of their image

9-slice scaling is a technique for defining how images scale that’s been around since at least the days of Macromedia Flash. It’s typically used when we want to scale a border and avoid the ugly distortion we’d encounter if we were to just naively stretch an image.

An image is sliced up into 9 pieces, each piece being used to draw a specific edge or corner of a border. The top, bottom, left and right edges stretch (or repeat) to fit the content, but the corners are not scaled so they don’t distort. When it’s all put together we get a nice clean border.

9-slicing was a common way of achieving rounded corners on the web before we had border-radius. In those days it required assembling all of the image slices into a <table> or similar, then using that element as a background for the thing we wanted bordered. Hacky, but it worked and if you wanted rounded corners that didn’t look like hockey sticks before 2015, it’s what you did.

CSS `border-image`

CSS now has border-image which lets us use the 9-slice method properly. It depends on a specific, static image though, meaning if we want borders of different colours we have to create a separate image for each color. Particularly annoying while we’re experimenting with different colours.

SASS can Change the Fill Colour of an SVG

We can get around this by using an SVG image and encoding it as a Data URI (ie url("data:image/svg...")), only instead of the usual fill colour inside the SVG, we use placeholder text eg FILLCOLOR. We can then use SASS to find/replace that string with whichever colour we want.

String replacement

SASS doesn’t directly have a string replacement function but it’s simple to add one. I found one from CSS Tricks (I had to update it a little because SASS string function names have changed since it was written).

As you can see SASS has string.index(), which is just like String.prototype.lastIndexOf() in JavaScript (it gives us the character position/index of the matching string). SASS also has string.length(), so getting from those two functions to a str-replace is straightforward.

@use "sass:string";

/// Replace `$search` with `$replace` in `$string`
/// @author Kitty Giraudel
@function str-replace($string, $search, $replace: "") {
  $index: string.index($string, $search);

  @if $index {
    $string: string.slice($string, 1, $index - 1) +
      $replace +
      str-replace(
        string.slice($string, $index + string.length($search)),
        $search, $replace
      );
  }

  @return $string;
}

Getting the coloured image

We’ll stick to hex colours, because the URI encoding for those is really simple: the # just has to be converted to %23, so eg #ed397d becomes %23ed397d.

The SVG data is stored in a SASS variable $dotted-border-image-enc.

Using the str-replace function from above we can create a border-image-colored function which takes a hex colour, inserts it into $dotted-border-image-enc, and returns a url("data:image/svg...") which can be used as our border-image-source in CSS.

// SVG string, note the `style='fill:FILLCOLOR;`
$dotted-border-image-enc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:FILLCOLOR'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E";

@function border-image-colored($color_hex) {
  // Replace hex colour with url-encoded colour
  $enc-color: str-replace("" + $color_hex, "#", "%23");
  $img-url: str-replace(
    $dotted-border-image-enc,
    "FILLCOLOR",
    $enc-color
  );
  @return url($img-url);
}

Getting our sliced image border

Now we have a coloured image we can slice it up and apply it to borders. We’ll make a SASS @mixin that we can re-use wherever we want a dotted border.

The CSS border-image-* properties interact with each other in ways which can be confusing. I’ve used values here that worked with my image but check the MDN docs for border-image and play around.

A solid border is drawn for a split second while the border image loads. To prevent a flicker, we set border-color to match the background.

@mixin dotted-border($color_hex) {
  border-style: solid;
  border-width: 30px;
  border-image-width: 30px;
  border-image-slice: 30;
  border-image-repeat: round;

  // Prevent flash of foreground colour by setting the initial colour to match the page background
  border-color: white;

  // Call the function to get the SVG Data URI
  border-image-source: border-image-colored(#{$color_hex});
}

Allowing for optional border sides

Sometimes we might want to only show the border on specific sides of its element so we’ll give the mixin a $sides... argument. This means “take all remaining arguments (after $color_hex) and make them members of a list called $sides”. If $sides is not provided we’ll draw the full border.

It might look more complicated but the main difference is instead of setting eg border-style: solid as a whole, we set border-right-style: solid and so on, depending on which sides we want to draw.

@mixin dotted-border($color_hex, $sides...) {
  // biw = border image width
  $biw_top: "initial";
  $biw_left: "initial";
  $biw_right: "initial";
  $biw_bottom: "initial";
  
  $border_width: 30px;
  $border_image_width: 30px;

  // Ensure we're starting clean
  border-style: none;

  @if list.length($sides) > 0 {
    // For each specified border, set its style and width ready to receive the image
    @each $side in $sides {
      @if $side == "left" {
        border-left-style: solid;
        border-left-width: #{$border_width};
        $biw_left: #{$border_image_width};
      } @else if $side == "right" {
        border-right-style: solid;
        border-right-width: #{$border_width};
        $biw_right: #{$border_image_width};
      } @else if $side == "top" {
        border-top-style: solid;
        border-top-width: #{$border_width};
        $biw_top: #{$border_image_width};
      } @else if $side == "bottom" {
        border-bottom-style: solid;
        border-bottom-width: #{$border_width};
        $biw_bottom: #{$border_image_width};
      }
    }
    border-image-width: #{$biw_top} #{$biw_right} #{$biw_bottom} #{$biw_left};
  } @else {
    // No `$sides` specified so default to drawing all sides
    border-style: solid;
    border-width: #{$border_width};
    border-image-width: #{$border_image_width};
  }

  // Prevent flash of foreground colour by setting the initial colour to match the page background
  // (pretending the page is white for this example)
  border-color: white;

  border-image-repeat: round;
  border-image-source: border-image-colored(#{$color_hex});

  // This should match the size of your corner slices but you can experiement with it
  border-image-slice: 30;
}

Call it like this:

p {
  @include dotted-border(#ed397d, top, bottom);
}

Which will convert into:

p {
  border-style: none;
  border-style: solid;
  border-image-width: 30px;
  border-color: white;
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg style='fill:%23ed397d'%3E%3Cpath d='M10 10h10v10H10zM70 10h10v10H70zM40 40h10v10H40zM40 10h10v10H40zM10 70h10v10H10zM40 70h10v10H40zM70 70h10v10H70zM70 40h10v10H70zM10 40h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-slice: 30;
}

and this is what our custom border-image looks like

compared to CSS border-style: dashed...

... or CSS border-style: dotted

Hugo Component Pattern

Thu, 28 Aug 2025 13:42:44 +0100

For this example we’ll make a block to display user testimonials.

The testimonials might be shown in more than one place on the site, so it’s important that the data be stored in a single place (otherwise when testimonials change in future we’ll need to change it everywhere manually, risking missing some instances).

Create data file: `/data/testimonials.toml`

For this project the testimonials require a name, location and a little bit of text. To keep it super simple the name and location will be displayed in a single element, we’ll use just 2 fields, heading and body.

Saving the TOML to a dedicated testimonials.toml file in the /data directory makes it easy to get at from a partial.

# /data/testimonials.toml

[[testimonials]]
heading = "Alan Best, Brighton"
body = "A professional, trustworthy service." 

[[testimonials]]
heading = "Christine Danes, London"
body = "Couldn't ask for more!"

[[testimonials]]
heading = "Elliot Fox, Bristol"
body = "I couldn't be happier!"

TOML syntax is weird with the repeating [[testimonials]]. For comparison, this is the same data as JSON:

"testimonials": [
    {
        "heading": "Alan Best, Brighton",
        "body": "A professional, trustworthy service." 
    }, {
        "heading": "Christine Danes, London",
        "body": "Couldn't ask for more!"
    }, {
        "heading": "Elliot Fox, Bristol",
        "body": "I couldn't be happier!"
    }
]

Create partial: `/layouts/partials/testimonials.html`

The /data/testimonials.toml file we just created automatically becomes accessible in code as .Site.Data.testimonials.

We want to output the data as an HTML unordered list (<ul>). So we loop through the data, creating a list item (<li>) for each testimonial.

<!-- /layouts/partials/testimonials.html -->

<ul>
{{- range .Site.Data.testimonials -}}
  {{- range . -}}
    <li>
        <h3>{{- index . "heading" -}}</h3>
        <p>{{- index . "body" -}}</p>
    </li>
  {{- end }}
{{- end }}
</ul>

To explain the two nested range blocks:

The outer {{- range .Site.Data.testimonials -}} loops through the 3 testimonials, returning each as a map
The inner {{- range . -}} accesses the map itself

Create shortcode: `/layouts/shortcodes/testimonials`

We’ve made the partial, but those only work in .html files. For .md files we need a shortcode, so we make a simple wrapper (all it does is call the partial, passing the same context via the dot).

This may seem redundant, it’s just a pattern I like to follow as I often end up wanting to use the same functionality in both .html and .md files. If I make the shortcode first (as I used to) then when I decide I need a partial I have to convert the shortcode to a partial then make a wrapper like this… it’s happened enough that I just do it this way by habit now.

{{/* /layouts/shortcodes/testimonials */}}

{{- partial "testimonials" . -}}

Usage

To add the testimonials to a page we just add {{< testimonials >}} to the corresponding .md file in our Hugo site.

End Results and Bonus

Thu, 06 Mar 2025 12:26:15 +0000

Good

I love that it’s silent
Apple Silicon is as good as I’d hoped — the bang-per-watt is great for my circumstances with solar power etc
The annoyances with not knowing when it’s turned on are largely alleviated with my scripts, as long as I’m using it on my LAN (which, realistically I always am)

Bad

MacOS, when I do have to use it (sorry Mac fans… I do at least prefer it to Windows)
The battery does not hold power at all well when turned off (if I turn it off — yes off, not asleep — with a full battery, a few days later it’s completely dead and needs to be charged before I can turn it on)

I’m never going to use this as my main machine, and that was never my plan. I’m into minimal Linux with invisible tiling window managers like DWM, and dragging windows around, being forced to watch animations etc won’t cut it for my preferences.

I do know about Asahi Linux but that makes power usage much less special and I’m not sure how it plays with the development stack I need for Flutter. More crucially, at time of writing DP Alt Mode is not working, which means monitors plugged in to the USB-C port won’t work. Having cut the display off, this scuppers me.

For me this was an investment into being able to responsibly build software for the Apple ecosystem and its users who have different preferences than mine. It’s a tool for a specific sub-set of tasks, and under those conditions it does what I need.

Bonus: E-ink Macbook

Remember I mentioned that I had a Boox Max Lumi which could function as a monitor for the Macbook? Here it is in full effect.

Macbook using Boox Max Lumi as an E-ink display

After tweaking some settings in Accessibility/Display, MacOS can be made to look half-decent on e-ink.

All the usual caveats about e-ink apply re refresh rates and ghosting of course, but I could easily see myself working quite happily in Vim on it in some imaginary future dystopia where I’m trapped in Apple’s walled garden, all that exists, protected by a multi-trillion dollar Reality Distortion Field that they managed to power up just before the bombs dropped…

Running Headless: What I've Learned

Thu, 06 Mar 2025 12:26:14 +0000

The lid

Removing the lid turns it on (hall sensors in the base are activated by magnets in the lid)
Replacing the lid leaves the device visible on the network, but it can no longer be SSHed into (some form of ‘sleeping’)
During a user-initiated shutdown process (which takes some time, up to 20-30 seconds], replacing the lid re-wakes the machine — so wait 30 seconds or more before replacing the lid As the lid is no longer attached, ‘opening/closing’ makes no sense so I’ll instead use ‘removing/replacing’

Power button

Holding the power button for 5 seconds will begin the shutdown process, but the machine will still be visible on the network for a few seconds, allow at least 15-20 seconds for shutdown to complete
Holding the power button for 2 seconds will turn the machine on but it takes maybe 20 seconds to show up on the network As mentioned in previous parts of this series, ‘showing on the network’ is taken as a proxy for ‘machine is turned on’

From dead (no/low power)

A couple of times I’ve not used the machine for a week or more and the battery has got very flat — honestly it’s disappointing that it isn’t engineered to handle this situation better.

For a while I struggled to charge it, trying all of the following with no success:

Charging for over 10 mins in first USB-C port
Charging for over 10 mins in second USB-C port
Tried powering up several times during the charge periods above
After each attempt at powering up, waited 2 minutes for sign of life via the Macbook being seen on the LAN Charging units are dedicated USB PD/QC chargers wired directly to DC 12V/20V feeds, very stable/reliable and with ample amperage

What eventually got past this problem:

Unplugged all cables
Plugged one end of a charging cable into the Macbook first (top/corner port)
THEN plugged the other end of the cable into the USB charger
30 seconds later I was in (Macbook showed on router as a client and could be sshed into etc)

This could be a red herring eg the order of plugging in cables was not important but instead the battery had accumulated a charge and the final successful attempts just pushed it above some threshold that would allow it to boot. The fact that the response was so quick (30 secs after plugging in the cables in this order the machine was on) makes me think this is unlikely.

The only other explanation I can think of is that which end of the charging cable is plugged in first makes a difference, possibly due to something related to USB-C handshake/power negotiations that I’m ignorant of. This is a hunch and might make no sense in reality. I leave the info/observation here with very little weight attached to it, it is what it is.

Remote Access

Thu, 06 Mar 2025 12:26:13 +0000

Now I’m past the novelty of plugging in monitors this is how I actually use the machine.

Remote builds over SSH

I’m working on an Android tablet most of the time, using Termux, Proot-distro and Termux/X11 to run Debian Bookworm arm64. This setup has shortcomings but I find it very comfortable and manage to get 90% of my work done on it.

One current problem is that the arm64 version of the Android SDK can’t build arm64 APKs for Android. During main development I just build/run the Linux version of whichever app I’m working on — Flutter is multi-platform and suprisingly consistent between platforms. But of course I need to build APKs for Android devices at some point.

When I just need to quickly build some APKs for a given project, I use something like the following script (this one is for auDAV, my WebDAV audiobook player app):

#!/bin/sh

# Script to be run from Termux/proot-distro
# - Connects to build machine AIR (host defined in `~/.ssh/config`)
# - Logs in to working directory
# - Builds APKs
# - Syncs APKs to local machine


remote_commands=$(cat << 'EOF'
echo "~~~~~~~ Remote: Source local environment ~~~~~~~"
source ~/.zprofile
source ~/.zshrc

echo "~~~~~~~ Remote: Change working directory ~~~~~~~"
cd ~/development/audav

echo "~~~~~~~~~ Remote: Pull latest from git ~~~~~~~~~"
git pull

echo -e "\n~~~~~~~~~~~~~~ Remote: Build APKs ~~~~~~~~~~~~~~"
flutter build apk --split-per-abi
EOF
)

ssh AIR "bash --login -c '${remote_commands}'"

echo "\n~~~~~~~~~~~ Local: Sync APKs to local ~~~~~~~~~~"

rsync -r --mkpath --progress AIR:development/audav/build/app/outputs/flutter-apk $HOME/000-WORK/audav/build/app/outputs/

Fromhttps://codeberg.org/mm-dev/shell-scripts/raw/branch/termux-proot-ubuntu/audav-build-on-mac

Full remote graphical access with NoMachine

Remoting into MacOS with S8 tablet, trackball and split keyboard

To build apps for MacOS, iOS and iPadOS I must endure the torturous window management, tedious animations, and terrible file manager of MacOS (and that’s before we even get to XCode).

To ease my suffering I can at least use MacOS via the OLED screen of a Galaxy Tab S8 Ultra, a DEFT PRO trackball and a Ferris Sweep split mechanical keyboard.

NoMachine works well for remoting into MacOS and over the LAN it performs well with very little lag. There’s client software for Android and arm64 Linux meaning it’s quick and easy for me to just pop in to MacOS from my favoured Linux/DWM environment.

Magnets

Thu, 06 Mar 2025 12:26:12 +0000

Macbook sitting on top of its lid. Don't do it.

I experienced a ridiculous amount of confusion and wasted time due to a silly oversight I made (repeatedly!).

As mentioned earlier, I’d kept the lid for the Macbook, detached from its hinges and with the broken screen removed, to use as a kind of… lid.

When in use, it seemed like the obvious place to put the lid was under the Macbook, where it fitted perfectly.

For the first few hours, days, even weeks, I had intermittent problems with the machine randomly turning off/on (actually sleeping/waking but I didn’t know that at the time).

Remember I was having enough trouble knowing whether the machine was turned on or not in those early days.

It was the magnets in the lid, activating the hall sensors in the base and making it think I was opening/closing the lid. Due to the thickness of the base the magnets weren’t as close as they’d normally be, and the alignment wasn’t perfect. So this wasn’t a simple matter of ‘when the lid is under the laptop it goes to sleep’. This was a sporadic problem that could come and go as things wobbled in the environment. It took me a while to make the mental connection and work out what was happening.

# TODO Remove magnets from lid!

Factory Reset

Thu, 06 Mar 2025 12:26:11 +0000

The display was removed, things were looking clean.

This is a used device. It seemed like the OS was a fresh install, but I like to be sure, so I did a factory reset. The process seemed smooth, until the reboot.

I wasn’t sure how long to wait for boot after a factory reset. I’ve had some devices (eg Android phones after installing custom ROMS) take many minutes on first boot after a reset, but online info suggested this should be pretty quick on an M1 Mac.

Minutes passed and the display wasn’t showing anything. I wasn’t sure what was going on, and I started playing guessing games with the power button. I wished again that there was a power LED. With the broken screen removed I couldn’t even rely on those few lines of pixels lighting up to give me clues.

I’m still not sure if I broke/interrupted something, or if this was a normal part of the reset process. I tried various patterns of tapping, holding, holding for longer, each time waiting for something to happen for 10, 30 or 60 seconds. How long should I wait before I expect to see something on the screen?

Eventually I got something to happen. I was back to the black (but lit/powered on) screen. I guessed I was somewhere mid-boot. I tried the CMD + F1 combo which had made the external monitor primary when I was on the login screen. It didn’t work – the key combo/switching must be a feature of MacOS, which I was not yet booted into. A little reading around online hinted that I might be in recovery mode.

I found a video explaining how recovery mode worked on a machine with an external monitor and no internal display, and how to handle it.

Recovery mode when you only have an external monitor

The situation is this:

Recovery mode recognises your external monitor, but treats it as an extension to the internal display
The window with all of the useful user interface is there, but it’s ‘on the internal display’ (whether that exists or not)
The phantom internal display is drawn off to the right of the external monitor

In my case, the resolution of my external monitor was smaller in height than the internal monitor. This may have made the situation more confusing. I think that the top menu bar extends across both displays, and if my monitor was tall enough I’d have seen the bar, giving a massively more helpful clue than the empty black screen.

MacOS Recovery Phantom Screen

To get stuff done in recovery mode, you have to drag the window from phantom screen, onto the external display. The window is only draggable by its title bar. So you have to shoot your touchpad pointer off the right-hand side of your screen, aim for where you think the title bar might be, and try to tap/drag it back over to your real visible screen on the left .

This took me ages. I think the window on the invisible screen was centred, but because it was a different resolution to my monitor it was hard to visualise and aim for it. But once done, I could access everything in recovery mode.

After finishing the reset I booted. The monitor doesn’t start showing stuff until later in the boot process but that’s ok.

I’m in, on the external monitor, with the Macbook’s internal screen removed.

Is This Thing On?

Thu, 06 Mar 2025 12:26:11 +0000

One of the most difficult problems I’ve had with using this machine headless, is knowing whether it’s turned on or not. Seriously.

If I connect the external monitor (ok, not headless in that case), no image on the screen might mean:

The Macbook is not turned on
The Macbook is asleep
There is a problem with the monitor or connection (eg bad cable)

If I try to connect over NoMachine or VNC and fail, that might mean:

The Macbook is not turned on
The Macbook is asleep
The Macbook is not connected to the network
NoMachine/VNC is not started on the Macbook
I’ve configured something wrongly with NoMachine/VNC

I really dislike the millions of blinking LEDs designers love to stick on electronic devices. They constantly nag or distract, I think they are bad. But I’d kill for one one this Macbook!

Things I’ve tried

USB-C SD card reader with LED indicator

I have a small USB-C SD card reader. It has a red LED which lights up when it is receiving power. For a while I used this, but it’s impractical. Although it’s small, it still sticks out to be breakage risk. A nice bit of leverage on the USB port, just waiting to wrench it off if it catches on something (a bit like the 1st-gen Apple Pencil when it was charging).

Capslock button with LED indicator

At some point I noticed that the caps lock button on the keyboard had an LED which lit when caps was locked. And (remembering I’d usually be using a Bluetooth keyboard and pointing device), the caps lock could be applied to the built-in keyboard without affecting the Bluetooth keyboard. I could just leave caps lock on and the LED would stay lit.

The showstopper problem with both of the above ideas was that they both only worked when the Macbook was fully booted and ready to rock. I guess the ports and caps lock LED are powered off at other times. Most of my periods of confusion as to whether it was powered on or not were happening when it was half-on, during boot, sleep, shutdown etc.

My current-best solution

I noticed that my router, in its list of ‘attached clients’ was providing relatively quick/up-to-date information about whether the Macbook was connected or not. It seemed to connect to Wi-Fi quite early in the boot process, and disconnect soon after I initiated a shutdown.

Following on from that, I started pinging the Macbook in a terminal window, which I could keep nearby while I worked. This was getting close enough for my purposes.

The obvious next step was to script it properly. My aim was to get a brief status line telling me if the Macbook was connected or not, and its battery charge level. The following script did the job:

#!/bin/bash

# Ping a Mac on the LAN
# If it's alive, check its battery level using a seperate script `battery-check` (present on the
# Mac)
# Return the result with coloured text to indicate off/on status, and rough battery level
# Loop repeatedly, overwriting the results text each time onto the same single line

ip_to_check=192.168.8.123
hostname=AIR

wht='\033[1;15m'
red='\033[1;31m'
ylw='\033[1;33m'
ong='\033[38;5;208m'
grn='\033[1;32m'
nc='\033[0m' # No Colour

update_battery () {
  # Log in with SSH and call script to get battery charge info.
  battery_check_output=$(ssh AIR "bash --login -c battery-check")

  # `battery-check` returns a string like `battery: 18%`, we want to extract the number.
  percentage=$(echo "${battery_check_output}" | tr -dc '0-9')

  if [[ $percentage -lt 15 ]]; then
    battcolor=$red
  elif [[ $percentage -lt 30 ]]; then
    battcolor=$ong
  elif [[ $percentage -lt 80 ]]; then
    battcolor=$ylw
  else
    battcolor=$grn
  fi 
}

# Hide cursor
tput civis

# Sometimes (too soon after boot?) the first call fails
# Machete through it
update_battery
sleep 1
update_battery
sleep 1


i=0
while :
do

  # -c 1 ... count 1 (only ping once)
  if ping -c 1 ${ip_to_check} &> /dev/null; then
    # Temporarily go white to indicate battery has just been checked/updated (2 * 5 = 10secs)
    if [[ $i -lt 2 ]]; then
      color=$wht
    else
      color=$battcolor
    fi

    echo -ne "  ${hostname} ${grn}    ON     ${nc}${color}${percentage}%${nc}\r"

    # i ends up incrementing every 5secs or so
    ((i++))
    
    # Increment and every n counts update battery
    # 5sec * 36 = 180secs = 3mins
    if [[ $i -eq 36 ]]; then
      i=0
      update_battery
    fi
  else
    echo -ne "  ${hostname} ${red}   OFF       ${nc}\r"
  fi

  sleep 5
done

Fromhttps://codeberg.org/mm-dev/shell-scripts/raw/branch/termux-proot-ubuntu/mac-get-status

I already had a little script on the Mac to report the battery level (a very simple wrapper around a Mac built-in system_profiler, just to shorten the output).

#!/bin/sh

percent=$(system_profiler SPPowerDataType | grep "State of Charge (%)" | awk '{print $5}')
echo "battery: ${percent}%"

Monitoring script in a tiny floating window with close-up

Then I wanted to be able to float the mac-get-status script in a tiny window.

This next script opens up a terminal in a new window, gives it a specific title macmonitor, and runs mac-get-status:

#!/bin/bash

$TERMINAL --title macmonitor -e "mac-get-status" &

Fromhttps://codeberg.org/mm-dev/shell-scripts/raw/branch/termux-proot-ubuntu/mac-monitor

Then I tell my window manager (DWM) to apply a special rule to windows with that specific title. This is how it’s done in DWM but other window managers may have ways of achieving the same thing.

static const Rule rules[] = {
    // If an Xfce4-terminal window has title 'macmonitor':
    // - Make it float
    // - Make its dimensions 150px x 22px
    {"Xfce4-terminal", NULL, "macmonitor", 0, 1, -1, 0, 0, 150, 22, 1},

    // other rules...
};

Removing the Display

Thu, 06 Mar 2025 12:26:10 +0000

Removing the display was relatively easy, but time-consuming. There were lots of screws and they had pentalobe and torx heads, but these are standard in any electronics screwdriver set — I have one of those.

I checked a couple of disassembly videos on YouTube to make sure I wasn’t going to encounter any plastic tabs which might break off, short tearable ribbon cables etc, and to find where the display connectors were. I’ve taken apart quite a few laptops, this wasn’t one of the worst.

Separating the lid from the base was tricky. Even when all fastenings were removed it was still stuck. I couldn’t tell if it was just tight tolerances on the hinges (hey, get the tolerances tight enough and metal sticks to metal… although I think even with Apple’s admittedly precise engineering this was probably normal stuckness rather than anything more mystical), or if there was a piece of the assembly in the way, something I’d missed.

I found a video suggesting to open the laptop to 90 degrees, then hang it off the edge of a table and give it a sharp whack to separate the lid from the base. They made it look easier than I found it to be, but eventually I got the lid off.

Keeping the lid

After looking into various cases and sleeves (if nothing else I wanted to be able to stop keys from getting pressed when the Macbook was put away and waking it up), I decided that I’d keep the lid. It is thin, light and tough, so why not continue using it to protect the computer? It was designed for the job.

Getting the glass panel out of the lid was a chore. Like most modern displays it was very thin and shatterable (pre-shattered in this case), and gripped tightly to the inside of the metal shell of the lid via some kind of adhesive or thin tape. I had to use heat and a scraper and it made a horrible and probably dangerous mess, thousands of specks of shattered material that looked pretty like toffee-apple but were actually cutty, inhalable glass.

I worked slowly, every minute or so I swept up the latest shards into a container so they wouldn’t get embedded in my hands/cornea/bronchioles. I did this gently so as not to disperse the bits all over the place with the flicking of the brush.

After a while I had the idea of sticking a patch of duct tape over each area of glass before I scraped it away. This worked well, preventing the pieces from scattering and making it easier to scrape the glass away from the metal shell of the lid.

Macbook Air M1 lid, screen removed

With all the glass finally removed, there were a couple of areas which remained sticky and some unfinished sharp metal edges. To prevent it from getting hair stuck to it or from scratching the keyboard/touchpad I covered the entire inside surface of the lid with some clear adhesive plastic sheet.

The final effect is reminiscent of an overprotected sofa, but it’s all I had to-hand and it’ll do for now.

It's from eBay. Does it Even Work?

Thu, 06 Mar 2025 12:26:09 +0000

Being an eBay purchase (albeit from a seller with good feedback) the first thing I needed to do was make sure that this thing was actually functional.

The screen was damaged (as per the listing) and displayed basically nothing, or to be specific a few single-pixel lines of colour which hinted at whether the machine was on or off, on a black smashed background.

Nothing so garish as ‘an LED to tell you when its powered on’ would be allowed on a modern Mac. These thin, single-pixel lines of colour would be my power indicator.

Monitors and cables

This is where I encountered my first difficulties. I have a very small, very cheap USB-C monitor. This is the only actual monitor I have. I usually run stuff headless over VNC, NoMachine etc, using tablets like my Galaxy Tab S8 Ultra as remote OLED displays. I just don’t have much need for monitors. I have a Boox Max Lumi E-ink tablet with a micro HDMI input, so that can act as a monitor but… maybe later.

So I plugged the little monitor in to one of the two available ports on the ~~characterless~~ bravely minimal chassis (the other port would do for power). The monitor didn’t light up.

A vast landscape of confusing possible states opened up before me. Was I in the wrong port? A USB-C port is not a USB-C port etc, especially where displays and power are concerned. Maybe only one specific port would power the Mac, or only one of them would output a display signal.

What about the cable, both cables? Were they even providing power/pixels or did they have the wrong strands in them?

Did the Macbook put out enough power over USB-C for the monitor? Did I need to plug an additional cable for power, or charge the battery some more, or plug extra power into the monitor itself?

Was my monitor just not compatible? It’s a simple AliExpress generic thing, and Apple is not exactly known for its broad compatibility with 3rd-party products. Was it just not-yet-enabled in the OS?

Was I even ‘in the OS’ at this point, or was the Macbook still booting… or stuck in some horrific ‘recovery zone’ where blindly pressing the wrong button might result in destroying the OS, the only solutions to be “plug it into one of the other Apple computers that you don’t have” or “take it to an Apple Store where (if somebody dressed like you is allowed inside) a Genius will go asthmatic at the concept of a headless Macbook and make you buy a new one for a thousand of the pounds that you don’t have”?

After an embarrassing amount of cable-swapping (80% of my USB-C cables either couldn’t deliver enough power, or couldn’t deliver the pixels, and I’ve been through this stuff so many times I should know by now to never assume that my cables are good) I eventually made progress.

The monitor lit up.

Then it went black again. Not dead-black, but that rubbish glowingly-grey attempt at black that TFT panels manage, which told me that the monitor was powered up and trying to display something, but had nothing to display.

Power button

Macbook Air M1 power button

The Macbook does grant me a power button at least, in the form of a special key on the keyboard, up in the corner.

It’s a strange item, sitting slightly lower than the other keys on the keyboard, with a slightly different tactile response compared to the other keys. Maybe this is to mark it out as being ‘other’ for usability reasons (which I like), or maybe it’s a side-effect of the button housing a fingerprint sensor.

With my lack of Apple experience and the lack of working screen, I actually found this button a little confusing. I was never sure if I’d pressed it ‘properly’, ie did it require a tap, or a little hold, or did perhaps a long hold perform a different function?

I tried searching for info about the button but there are so many different models of Macbook, many users with varying ways of communicating their ideas, no official detailed documentation for these things, and of course the reasonable assumption that Macbooks have screens. Yes, I was confused by a power button.

External monitor - No login UI

After several presses of the power button, and waits to see if a reboot was happening, more progress. Trees! The MacOS login screen appeared, only… not quite. There were no buttons, dialogues, or any user interface elements.

A bit of searching taught me that the missing login UI was indicative of a second screen being attached to a Macbook. The login screen was being shown (invisibly to me) on the broken internal display, and my little monitor was just acting as an extension. Fair enough.

More ‘internet research’ revealed that CMD + F1 would swap output to the external monitor. This worked. Great. I now had a dinky 11" MacOS login screen.

It Just (about) Works.

M1 Macbook Air

Thu, 06 Mar 2025 12:26:08 +0000

Despite its laptop-ness, I decided to think harder on the Macbook Air:

It’s thin, light and particularly low-powered
It’s fanless
Although I’ll never prefer it, Apple (/my?) users tend to love the trackpad, so the ability to check out my apps on the M1 Air’s trackpad and make sure everything feels ok might be useful

My issue with the redundant (for me) display being attached?.. this could become an advantage.

People sell these machines cheaply when the displays break (Apple is… not big on right-to-repair). I could buy a Macbook with a broken screen and remove it. I checked whether this was possible (such things are a given with most laptops but with Apple I wasn’t sure what to expect). I found that this was doable, people were out there doing it. Fantastic.

‘BUY IT NOW’

I managed to find a smashed-screen, 8GB M1 Macbook Air in Rose Pink on eBay for £300. Really if I’d waited I could probably have picked one up for less.

But this was a strike while the iron is hot situation… my resistance had been strong for many years, if I waited I might easily end up changing my mind.

8GB RAM? Rose Pink?

I’d ideally want 16GB RAM minimum on a modern laptop, but the price difference between that and 8GB was significant, even on the second-hand market. Everyone seemed to be saying that 8GB on Apple Silicon was like 16GB on AMD64, which sounded distinctly like the reality-distortion-field in effect, but there were architectural realities such as their ‘Unified’ memory architecture to back this up (or at least the idea that you get more bang per GB on Apple Silicon). I’d decided to trust.

I was mainly interested in using this machine for Flutter development, and had found several people saying they were doing that on an M1 with 8GB without issues. [Note from the future: It’s great, no worries and easily snappy enough for me]

This model was Rose Pink, the colour I’d usually be least likely to choose. Considering I was buying it to immediately butcher, this somehow made it all the more perfect.

Which Mac Should I Get?

Thu, 06 Mar 2025 12:26:07 +0000

The strongest factors affecting my decision were:

Cost. I wanted to spend as little as possible.
Power usage. I live in a low-power environment and didn’t want to introduce a new device that was going to dramatically increase my electricity usage.

Clearly Apple Silicon was what I needed in terms of power. I’ve preferred ARM processors for years and use them for as much of my work as possible. Apple’s use of specialised ARM chips and tight control over their hardware/software architecture means they’re in a good position to maximise performance-per-Watt… if I must paddle in Apple’s pool, Apple Silicon is a no-brainer.

To keep it cheap, the obvious choice was to go with the first generation M1 chips. They reportedly still held up well and should get OS updates for a while (even longer with OpenCore Legacy Patcher).

I don’t love laptops (I’d rather choose my own keyboard, pointing device and screen so having redundant copies of these things stuck on my computer is a waste), so I was initially attracted to the M1 Mac Mini. It’s just a computer, without Human Interface Devices that I don’t need.

Two things put me off the M1 Mac Mini though:

It has a fan

People say it’s silent. Even if this is true (there are levels to this), fans are mechanical devices which can wear out (and develop a noise), suck/blow dust around (needing to be cleaned), or fail. They also use power.

Power delivery

The battery bank from which I power my home is 12V (24V or 48V would be better and I’ll upgrade when the time is right). All my electricity comes from this battery bank.

I have a power inverter, meaning I can use appliances with normal/household plugs, but the inverter wastes some power in the conversion process, stepping up from 12V to 220V. To then plug in a power brick, which will again throw away some power in converting 220V back down to whatever voltage a device uses, means double wastage, and a mess of plugs and wires.

I have DC 12V from the battery, and an easily-accessible 20V feed via a step-up converter. Then of course I have 5V over USB, not to mention all the exotic USB-C variants. Between all these methods I can power everything that I use regularly.

Assorted XT-60 adapters

When I buy a new device the first thing I do is chop off its power connector, attach it to one of the XT60 connectors I use for everything , and chuck (hoard, actually) the device’s power brick. I’ve done this with multiple laptops and small form factor PCs without issue. They usually seem to want 19V-21V and be tolerant of 20V although I’ve heard stories of people damaging stuff with similar reckless behaviour to mine so maybe I’ve been lucky.

I searched for info about doing this with the M1 Mac Mini’s power brick and found some people saying they had problems. While writing this I just searched again to try to find those discussions but this time I found stuff suggesting it’s fairly easy. So I’m not sure if I used the wrong search terms before, or maybe I was just too jumpy about modding power delivery for an Apple device. Apple tends to be so unfriendly towards going off-road and they’re known for implementing measures to prevent you doing things in ‘unapproved’ ways. I didn’t want to waste money buying something I couldn’t use.

For better or worse, I decided against the M1 Mac Mini.

Intro

Thu, 06 Mar 2025 12:26:06 +0000

Macbook Air M1 Headless

I don’t tend to enjoy using Apple products. I want to be able to make my software available on their platforms though.

To publish apps for MacOS/iOS/iPadOS, you really need Apple hardware. Also, if I am to provide software for their platforms, and especially if I want to sell my work, I need to be able to experience my apps in the same way my users will experience them.

It’s basic respect for the user.

Virtualisation

I tried Virtual Machines, probably had half a dozen MacOS VMs over the years in VirtualBox and QEMU/KVM. Getting MacOS working in a VM is difficult, inconsistent and (at least on my machines) performance isn’t great. Apple strongly does not want you doing this, you’ll always be swimming upstream.

It’s a joyless experience.

Codemagic

I tried Codemagic, a continuous integration/continuous delivery service which lets you publish to various platforms including the Apple ones. It’s a great service and has a free tier, but it seemed that my usage would end up putting me in a paid tier, and that could get expensive for me quite quickly.

It’s also from-a-distance, and while Codemagic does allow remote login to the MacOS GUI it’s not the same as having a device in front of me, and if I want to thoroughly check the experience of using my apps on Codemagic’s remote machines (rather than just running builds) that’s going to quickly eat up any free minutes.

I can certainly see this being a solution for some situations — not mine.

So…

For the first time in over 20 years of owning dozens of computers, I allowed myself to decide that I needed some kind of Mac.

Set up Vim for Flutter

Thu, 08 Aug 2024 17:47:33 +0100

There are various ways of installing Vim plugins. I use vim-plug in my examples here but I’ll add links to instructions for each plugin so you can do it your own way.

Dart

As Flutter uses the Dart language, install Dart support for Vim. I add the following to my ~/.vimrc:

" Between the 'plug#begin()' and 'plug#end()' lines
Plug 'dart-lang/dart-vim-plugin'

Then I restart Vim and run :PlugInstall.

This adds syntax highlighting and auto-indentation of Dart code.

Language Servers

Language Servers/LSPs (LSP = Language Server Protocol but both terms are often used interchangeably) give your editor information about the structure of a language and enable it to do syntax highlighting and code completion, along with deeper functionality such as allowing you to jump to the definition of a function, do refactoring etc.

LSPs are used in Visual Studio for a lot of its advanced functionality but they can also be used in Vim. There’s more than one way of doing this but I use coc-nvim (despite the name it works in modern versions of Vim, not just Neovim).

Install the `coc.nvim` plugin in Vim

Using vim-plug I add the following to my ~/.vimrc:

" Between the 'plug#begin()' and 'plug#end()' lines
Plug 'neoclide/coc.nvim', {'branch': 'release'}

Again, I restart Vim and run :PlugInstall.

For other ways of installing just follow the instructions .

Install a Flutter LSP

Install the Flutter language server in CoC, coc-flutter. This provides lots of helpful functionality for working with Flutter in Vim as described in the link.

:CocInstall coc-flutter

This LSP needs to know where the Flutter SDK is installed. In Vim, run :CocList FlutterSDKs and make sure it finds at least 1 SDK. If not, add a line to CoC settings (:CocConfig):

"flutter.sdk.path": "$HOME/.local/flutter/bin"

You can find the correct path with which flutter in the terminal.
Originally, I had installed my Flutter SDK at /usr/bin. That caused invisible errors with coc-flutter as it couldn’t access the path properly to find the Flutter SDK. I was having trouble getting this step working. I then moved the Flutter SDK to $HOME/.local/flutter and everything started to work properly

`coc.nvim` settings

To change CoC settings the command :CocConfig can be used in Vim. On my system it opens up the file ~/.vim/coc-settings.json. You can open/edit this file directly but depending on your Vim configuration it may be in a different location.

Here are some of the settings I prefer:

{
  "diagnostic.checkCurrentLine": true,
  "diagnostic.enableMessage": "jump",
  "colors.enable": true,
  "suggest.noselect": true,
  "inlayHint": false
}

`"diagnostic.checkCurrentLine": true,`

By default, Coc will show you a diagnostic error or warning when your cursor is over the word causing the problem. Setting this to true means you only have to be on the same line as the error to see the dialog, not the exact word.

`"diagnostic.enableMessage": "jump",`

This diagnostic popups can be really helpful, but it’s all a bit frenetic for me, I’m a prefers-reduced-motion kind of person. Setting this to jump means they don’t pop up automatically, but can still be shown when I want to see them. I also add this line to ~/.vimrc:

nmap <silent> gh <Plug>(coc-float-hide)
nmap <silent> gl <Plug>(coc-diagnostic-info)

Which allows me to show/hide the diagnostics with gh/gl respectively.

`"colors.enable": true,`

This setting is for another CoC addition called coc-highlight. I installed this in Vim with:

:CocInstall coc-highlight

This adds various types of colour highlighting, but the one I was most interested in is how it will detect any colours (eg RGB or hex) in your code and change the colour of their text to give you a preview of them. This feature is enabled with the colors.enable line as above.

`"suggest.noselect": true,`

When you start typing a word, CoC will default to inserting its first suggested autocompletion word. This is a bit more ‘help’ than I like, so I add this setting to make the process more intentional.

`"inlayHint": false,`

By default CoC inserts inlay hints, for example if you haven’t added a type hint to indicate what kind of widget is being referred to somewhere, it will insert the <Widget> hint for you as a piece of magical ghost text.

These bizarre bits of text appear in the middle of lines of code, except they aren’t really there, you can’t select them or delete them and if you’re moving your cursor around it acts as if they don’t exist. I’m sure some people enjoy them, and for those people I’m glad that they exist. For me, they are disgusting, obnoxious devil-warts.

Thankfully, they can be vanquished by adding this line to the CoC settings.

Install Flutter

Thu, 08 Aug 2024 17:47:32 +0100

Follow instructions from https://docs.flutter.dev/get-started/install/linux/android

Download the flutter_*.tar.xz archive
Unpack the archive into $HOME/.local/bin (creates $HOME/.local/bin/flutter/bin)
At first I tried putting this at /usr/bin, but that caused invisible errors in coc-flutter as it couldn’t access the path properly to find the Flutter SDK
Add the new path as above to $PATH eg in ~/.profile

# ~/.profile
export PATH="$HOME/.local/bin/flutter/bin:$PATH"

For ARM64 architectures the Flutter SDK cannot be found at the above link, nor in the archives. In this case the SDK can be obtained by cloning the main flutter repo, then running a flutter command to trigger a download of dependencies
git clone -b main https://github.com/flutter/flutter.git
./flutter/bin/flutter --version

Agree to more licenses and get Flutter doctor to pass

First, agree to several laughably long licence agreements which Google knows full well that nobody reads.

flutter doctor --android-licenses

Then type Y and Enter for each prompt

Now run flutter doctor. It should pass every test except ‘Android Studio (not installed)’. If so, we’re ready to start building Flutter apps (with Android Studio not installed).

Sample project

You can make a really simple sample project to check that everything’s installed correctly and see how it works.

flutter create sample-project

This will create a sample-project directory with a Flutter app in it, a simple built-in demo of a button which counts up as you tap it.

To run the app:

cd sample_project
flutter run

Install the Android SDK

Thu, 08 Aug 2024 17:47:31 +0100

Getting the Android SDK set up manually can be tricky, I think the expectation is that most people will use Android Studio so not a lot of work has been put in to making manual installation user-friendly.

Pick a directory where you’ll keep the SDK

This is an important directory that will always store all the Android-SDK specific tools, platforms, build tools etc. Various bits and pieces need to know where these things are, so we’ll set some environment variables for them later.

I’m using $HOME/android_sdk/ in these examples.

mkdir $HOME/android_sdk

Install the SDK Manager

This is a set of command line tools used to install different versions of the SDK (for when you want to target different Android devices).

Based on Google’s instructions at https://developer.android.com/tools/sdkmanager.

From the downloads page (I had to scroll down a long way), download the cmdline-tools zip and unzip it to the directory you created above eg $HOME/android_sdk/
Inside the unzipped directory cmdline-tools make a ’latest’ directory and move all of the other contents of ‘cmdline-tools’ inside it (so you end up with cmdline-tools/latest/bin

You should end up with something like the following (I’m using tree to list the directory contents but don’t worry about that, just make sure your directories are in the right places):

$ tree -L 2 cmdline-tools/
cmdline-tools/
└── latest
    ├── NOTICE.txt
    ├── bin
    ├── lib
    └── source.properties

Add some environment variables to `~/.profile`

Make sure these make sense based on what we’ve done so far if you’ve used different directories to me.

# ~/.profile
export ANDROID_SDK_ROOT=$HOME/android_sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

Source the profile with source ~/.profile. Then run sdkmanager and see if it does something. If you get command not found double-check everything and try rebooting.

My sdkmanager binary name clash (this won’t affect you but click to expand if you’re interested)

In my case I already had a binary installed with the name sdkmanager, as that’s the name Garmin use for their ConnectIQ SDK Manager. Apparently neither Garmin nor Google could foresee that anyone other than themselves might call their SDK manager software ‘sdkmanager’.

So I had to do some hacky stuff with bash aliases in ~/.profile to let the two live alongside each other, and remind me of the situation:

alias sdkmanager='echo "Use either *sdkmanager-garmin* or *sdkmanager-android*"'
alias sdkmanager-android=$ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager
alias sdkmanager-garmin=$HOME/.local/bin/sdkmanager

Accept SDK licences

The SDK licences must be accepted for everything to work.

sdkmanager --licenses

Then type Y and press Enter for each prompt

Install the Android toolchain

To pass the ‘Android toolchain’ step of flutter doctor (in a bit) we need 3 things:

Platform tools (generic)
A valid platform
Build tools to match the platform

Various instructions online will tell you to do things like sdkmanager "platform-tools" "platforms;android-33" (ie pass multiple arguments to sdkmanager), but as observed in this StackOverflow answer if using the command line tools, the platform tools need to be installed via separate commands ie:

sdkmanager 'platform-tools'
sdkmanager 'platforms;android-33'
sdkmanager 'build-tools;33.0.2'

If the installation has worked correctly you should end up with something like:

$ tree -L 1 android_sdk/
android_sdk/
├── build-tools
├── cmdline-tools
├── licenses
├── platform-tools
└── platforms

Another weird, me-specific problem I encountered…

At first, my installations weren’t appearing in my android_sdk directory and Flutter tools were complaining about not being able to find the Android SDK.

Forcing the SDK path like this worked: sdkmanager --verbose "platform-tools" --sdk_root=$HOME/android_sdk/

But something smelt wrong, as the original sdkmanager install commands seemed to be completing without error. I investigated this by running the following:

sdkmanager 'platform-tools' --verbose

Which revealed that they were going into:

/data/data/com.termux/files/usr/share/android-sdk/

This is because I was on Android using Termux, in a proot container, and I had previously installed the SDK in the main (non proot) Termux environment. This was not needed any more so I deleted the other installation.

This is an exotic situation and you’re probably not as stupid as I am to get into this situation, but maybe this note will help in some other situation.

Dependencies and Environment

Thu, 08 Aug 2024 17:47:30 +0100

To get started I’m presuming you have a Linux installation of something like Debian/Ubuntu.

General Dependencies

Git

You probably already have this but just in case:

sudo apt install git

Ensure Java JDK is installed and recent enough

sudo apt install openjdk-17-jdk

Stuff Flutter Needs

The latest info about this should be here but at time of writing:

sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

And some other tools Flutter uses:

sudo apt install clang cmake ninja-build

If using Chromium browser instead of Chrome

The Android SDK likes to know where Chrome is on your system. I use Chromium and the SDK can’t find it.

So I export an environment variable to let Flutter know where to find Chromium eg in ~/.profile

export CHROME_EXECUTABLE=/usr/bin/chromium

Parts of the SDK

Thu, 08 Aug 2024 17:47:30 +0100

There are several components making up the SDK. I’ll list them here along with examples of how they can be installed later on when the SDK manager is set up and working.

This is just an overview to help your mental model of what’s what, we’re not installing anything just yet.

We download them as a zip and place them in a specific directory, as detailed later.

Command Line Tools

These commands can do several things like signing and optimising APKs, but the main one we are interested in is sdkmanager. This is the command we use to install the other tools.

Platform Tools

These are tools for interfacing with Android which you may already be familiar with, such as adb and fastboot.

sdkmanager 'platform-tools'

Platforms

A platform represents a specific version of Android. It includes multiple system images, which the device emulator uses to emulate various devices on that platform.

Information used to compile your app for this platform version, and source code to be used for debugging are also included.

Multiple platforms can be installed alongside each other on the same system.

sdkmanager 'platforms;android-33'

Build Tools

These are tools used for building Android apps. I’m not 100% clear on what these are and why they are different from Platform Tools, it seems that they were part of Platform Tools in the past but have been sectioned off into their own thing.

Anyway, we need them. Usually use the latest version, but sometimes if you’re targeting specific platforms eg older ones, errors may indicate that you need an older version.

sdkmanager 'build-tools;33.0.2'

Intro

Thu, 08 Aug 2024 17:47:29 +0100

Given the choice, I’d rather avoid huge complex apps like Android Studio. They use a lot of system resources and are very GUI/point-and-clicky. Those things definitely have their place but I prefer keyboard control where it makes sense, and for me programming in Flutter is one of those situations.

A lot of what Android Studio does behind the scenes is automatically editing text files and running shell commands such as flutter run, flutter build and so on. If you’re comfortable with the terminal these commands are fairly simple to run manually.

As an IDE Android Studio also helps with stuff like syntax highlighting, code completion, refactoring etc. If you’re into Vim it can be set up to give you these pleasantries. I’m sure there is stuff Android Studio can do that Vim can’t, but whatever it is I’m not missing it and I feel good when I use Vim.

I’ve set up a couple of systems with this Flutter dev environment recently and hit some stumbling blocks. They weren’t too hard to resolve but I wanted to write up the process for future reference and to help anybody else in a similar situation.

I'm Not a Perfectionist

Tue, 06 Aug 2024 08:20:26 +0100

A nice compliment I’ve occasionally been paid is “you’re a perfectionist”. I’m calling it a nice compliment because it’s been delivered by kind people who have intended it as a compliment, and it’s gracious to accept it as it was intended rather than throw it back in their faces.

I used to think of perfectionism as a virtue, but I no longer do.

Why My View Has Evolved

I used to obsess over tiny details. I mean I still do, but I’m more aware that I do it now, and experience has taught me about some of the problems doing so can cause.

Now, I try harder to keep a birds-eye view of what I’m doing, assess where my actions can make the most difference, and balance where I spend my time.

Attention/Time are Finite

There are always things that can be done to improve any project. I mean project very broadly: an app, a website, an email, a painting, a loaf of bread. Is it better to spend 10 hours polishing some tiny detail, or to implement another couple of entire features?

The answer is not always obvious, but for me the important thing is to ask the question and assess. Awareness.

What are the Goals?

Are you trying to prove a concept and get it in front of people ASAP? Or to demonstrate your craftsmanship and attention to detail? Different goals requiring different approaches.

My Perfection May Not Be Your Perfection

It’s (almost) hilarious when I work on some small detail for hours, getting it just right. I then show my work to somebody else who immediately spots some glaring error in a completely different part of the work, and doesn’t seem even mildly impressed by my perfect detail.

More than once I’ve experienced the following:

When working on a painting, a friend has visited and seen it mid-way through the process. They love it, they say so and I can feel it. “Just wait until it’s finished then!” I think to myself, certain that they’ll love it twice as much. Then when it’s finished they see it and they don’t love it any more. In their eyes I’ve spoiled it. Only the rare few are secure enough in themselves and myself to be honest with me about that, but others give it away in their polite but unconvincing praise.

Sometime they’re just wrong (JK, you can’t be wrong about art)! But sometimes they might be onto something…

Diminishing Returns

The law of diminishing returns is an economic principle but it can be applied more broadly to lots of things in life.

The closer you get to ‘perfection’ (or at least your idea of it), the more the tiny imperfections stand out. They seem to multiply as they get smaller. Things that were not noticeable before, now stand out obnoxiously against their increasingly-perfect background. But your work isn’t really getting worse, you’re just looking more closely at it. You’ve zoomed in too far. You may be looking at a cathedral through a microscope. You can’t see it.

Paid Work

If somebody is paying me to make something for them, I have to respect their preferences and give them what they want.

In a good ~~working~~ relationship there should be honest debate and both sides should change their minds sometimes. I have experience in what I do and may have valid reasons for a disagreement. On the other hand, the client knows their business much better than I do and has reasons for their goals. Ultimately I have to remember that they are paying me for something and I want them to be happy with our transaction.

If we really, consistently, don’t see eye-to-eye, then we probably aren’t a good match and should not collaborate on future projects. Even then though, I still want them to be as happy as possible so do my best to finish the project and give them what they want.

Fear

I mentioned to a fried that I had several articles for this site that are 90% finished. I have been procrastinating.

“Why not just publish them, what’s the big deal?”, she asked.

Well…

I May Be Misunderstood

What if I haven’t articulated clearly enough and somebody misunderstands my point?
What if there are typos or mistakes in spelling and grammar? People might think I have bad language or communication skills.

We all make mistakes. We are all misunderstood, all the time (more often than some of us realise). The message we send is not the message that is received, interpreted and understood by the recipient, because our inner worlds are complex.

We should try our best. Then we should let go.

If something I said is misunderstood and important enough to somebody, they can ask me to clarify and give me the chance to put it right. Or maybe we just disagree — that’s ok. Or maybe they read some small thing and want to extrapolate it into some caricature of who I am and think badly of me, with no chance of recompense. Buh-bye! Life is too short to deal with these kinds of people. Thanks, imperfections, for filtering those people out.

I May Not Show My Skills in the Best Light

Some of my unfinished draft articles had (have!) placeholder pictures. Bad photos that I took so that I could get something on the page and get the layout right. Fuzzy, badly-lit, inconsistently white-balanced. Embarrassing.

But it’s still an image, which can help explain something or give context, or just keep some people interested. It’s not set in stone, I can replace it with a better photo later on.

I have published those unfinished articles. With the bad photos. Enjoy the spelling mistakes, ill-hewn thoughts, and crappy pics.

So Just Stop Caring?

No. None of this is an argument for not caring or being lazy. Details do matter, as do presentation and consistency. They add up to the perception of quality. I also want to feel good about things I make and put out into the world, and part of that is needing to know that I did my best.

But, aesthetically, overwrought objects are less pleasing. Sometimes, the last 10 hours you spent on fiddling with tiny details aren’t going to be appreciated by most people, and that time could have been spent fixing more important problems, or starting the next project.

Zoom out. Knowing when to let go is also a virtue.

Building Apps and Getting Notified

Tue, 30 Jul 2024 17:11:49 +0100

If you’ve followed along with all of the articles in this series you’ll now have:

A complete F-Droid build environment set up in a container
A Telegram bot raring to go

Now we’ll put it all together, add some bash scripts to make everything easy to work with, and see how to get notified in Telegram when the local F-Droid build process has finished.

We use a couple of shell scripts to facilitate this, they’re available here in my Codeberg repo.

I’ll refer to the Alpine container as the host as all of these instructions are based on that environment, and from that context the F-Droid docker container will be the guest.

Alpine container directory structure

So far in our Alpine container we should have a couple of directories which are our local clones of the F-Droid repos fdroiddata and fdroidserver.

We also need to add a directory where we’ll store our shell scripts:

mkdir shell-scripts

So now we should have the following structure (I named my Alpine container fdroid):

fdroid:~$ ls -1

fdroiddata
fdroidserver
shell-scripts

The scripts

In ~/shell-scripts we’ll have two scripts. Don’t forget to make sure they’re executable with chmod +x.

docker-run-fdroidserver.sh

Run this on the Alpine host to start the container.

This is really just a docker run command, based on the example given in the F-Droid docs, then heavily commented for people like me who aren’t experts in docker and need to be reminded of the basics.

Here is the script:

#!/bin/sh

# Based on F-Droid's guide at https://f-droid.org/en/docs/Submitting_to_F-Droid_Quick_Start_Guide/

# The only amendment to this script from the above URL are:
# - Mount an additional volume, the `shell-scripts` directory (parent directory of this script and `fdroid-prepare-env.sh`)
# - Change the entry point to `fdroid-prepare-env.sh`
# - Pass a couple of environment variables, IDs to be used to interact with Telegram so we can get a message pushed when a process finishes

# Explanation of command:
# `run`		creates a container from the image (image is given as final argument to the command)
# --rm 		when the container is exited, automatically remove it (the container, not the image)
# -i		`--interactive`, meaning you will be put into a `/bin/bash` (from the later command) session in the container
# -t		`--tty` container output gets sent to a virtual tty, meaning it will be formatted nicely and behave in specific expected ways
# -u		`--user` so in this case we are running as user 'vagrant'
# --entrypoint	overrides the default ENTRYPOINT of the image
# -v		mount a volume, the arg:arg format mounts a local (1st arg) volume inside the container at (2nd arg)
# 		:z at the end means Docker labels the content with a shared content label. Shared volume labels allow all containers to read/write content
# 		:Z at the end means Docker to label the content with a private unshared label. Only the current container can use a private volume
# -e		environment variable to be passed
# [final arg]	the image from which the container will be created

# Notes on setting up credentials for Telegram bot
# Based on tips from https://www.techrepublic.com/article/how-to-safely-store-passwords-linux-server/
# sudo apk add pass gnupg gnupg2 pinentry-tty
# gpg2 --full-generate-key
# pass init m@mm-dev.rocks
# pass insert telegrambot/botid
# pass insert telegrambot/chatid
# gpg-connect-agent reloadagent /bye

sudo docker run --rm -itu vagrant --entrypoint /home/vagrant/shell-scripts/fdroid-prepare-env.sh \
  -v ~/fdroiddata:/build:z \
  -v ~/fdroidserver:/home/vagrant/fdroidserver:Z \
  -v ~/shell-scripts:/home/vagrant/shell-scripts:Z \
  -e TELEGRAM_BOTID="$(pass telegrambot/botid)" \
  -e TELEGRAM_CHATID="$(pass telegrambot/chatid)" \
  registry.gitlab.com/fdroid/fdroidserver:buildserver

Fromhttps://codeberg.org/mm-dev/fdroid-shell-scripts/raw/branch/master/docker-run-fdroidserver.sh

In addition to the F-Droid original functionality, this version does a few other important things:

Pass in, as environment variables, some credentials which are required to access a Telegram bot via the Telegram API
- API token for the bot
- An ID for the chat channel that the message will be delivered to
Mount our ~/shell-scripts directory in the container so that the fdroid-prepare-env.sh script is available to it
Set the fdroid-prepare-env.sh script as the entry point for the container so that it automatically runs

As explained earlier in this series of articles, the Telegram credentials are stored on the host via GPG passwords and passed to the container as environment variables.

This means the credentials will be accessible in the clear to the container user so if this isn’t secure enough for your needs you should use another method.

fdroid-prepare-env.sh

This script is run inside the container to finish setting it up.

fdroid-prepare-env.sh is stored on the Alpine host in the ~/shell-scripts directory
But that ~/shell-scripts directory is mounted as a volume inside the container as /home/vagrant/shell-scripts
vagrant is the name of the user inside the container
So the script is accessible from inside the container

As it is passed (by the docker-run-fdroidserver.sh script) to the docker run command as the entry point, it gets run automatically when the container starts.

The full script is below:

#!/bin/bash

# #################################
#
# F-Droid build tools helper script
#
# #################################
#
# Docker image housekeeping, stuff to be done whenever the F-Droid container is creaated.
# Based on F-Droid's guide at https://f-droid.org/en/docs/Submitting_to_F-Droid_Quick_Start_Guide/
#
# - Several commands need to be run inside the container every time it starts, meaning constandly having to refer to the above URL
# - Instead, now this script is passed as the entry point to `docker run`
# - Alongside the F-Droid recommendations, export a function `send_tg_alert`, which allows a Telegram message to be sent when a command has completed execution


# Bring in system-wide settings and add some environment variables
# #################################
. /etc/profile
export PATH="$fdroidserver:$PATH" PYTHONPATH="$fdroidserver"
export JAVA_HOME=$(java -XshowSettings:properties -version 2>&1 > /dev/null | grep 'java.home' | awk -F'=' '{print $2}' | tr -d ' ')


# Create the message text to be sent to Telegram
# #################################
#
# - The message contains the shell command (from history) last entered (ie the command that was run and we are informing the recipient about)
# - Use MarkdownV2 syntax, see notes at https://core.telegram.org/bots/api#markdownv2-style
# - Use heredoc style to create the message and allow sending of newlines to survive the following pipeline:
#     bash | curl (GET, urlencode) | Telegram API
function get_msg_text {
	# Enable history, as it's not usually available from within bash scripts
	set -o history

	cat <<EOF
\`\`\`
# F\\-Droid command finished at:
# $(date)

# Command as entered:
\$ $(history | cut -c 8-)
\`\`\`
EOF
}

# Send a Telegram message via a bot
# #################################
function send_tg_alert {

	# Use heredoc style to create $MSG_TXT and allow sending of newlines to survive:
	# bash | curl (GET, urlencode) | Telegram API
	MSG_TXT=$(get_msg_text)

	echo "$MSG_TXT"

	# $TELEGRAM_CHATID and $TELEGRAM_BOTID should already exist in this container as environment variables,
	# having been passed in via the `docker run` command
	curl \
		--get \
		--data-urlencode "chat_id=${TELEGRAM_CHATID}" \
		--data-urlencode "parse_mode=MarkdownV2" \
		--data-urlencode "text=${MSG_TXT}" \
		https://api.telegram.org/bot${TELEGRAM_BOTID}/sendMessage
}

# Make functions available to the container and shell
# #################################
#
# If functions calls other functions, all functions in the chain need to be exported
export -f send_tg_alert
export -f get_msg_text


# Finish up...
# #################################
#
# Show some helpful reminders
cat << EOF

Example commands:

fdroid readmeta
fdroid rewritemeta com.example
fdroid checkupdates --allow-dirty com.example
fdroid lint com.example
fdroid build com.example


To send a Telegram message after the command has completed, append '; send_tg_alert', eg:

fdroid build com.example ; send_tg_alert

EOF


# Enter the directory which is most likely to be useful when the F-Droid commands are run
cd /build


# By default, the container would exit at the end of this ENTRYPOINT script --- start a shell instead.
/bin/bash "$@"

Fromhttps://codeberg.org/mm-dev/fdroid-shell-scripts/raw/branch/master/fdroid-prepare-env.sh

The effects of running the script in the container are:

Sets up some environment variables as per F-Droid’s instructions
Creates and exports our send_tg_alert function which can be called to send a message to a Telegram bot when a shell command has finished
The notification message sent by the function will include the command which was run/finished

The Telegram messaging is useful because the F-Droid build command can take a long time to complete. The function is just appended as an extra command eg:

# Build the 'com.example.appname'
# then send a Telegram message
fdroid build com.example.appname ; send_tg_alert

The F-Droid command will run, and when it ends a Telegram message will be sent to the specified channel, saying something like:

# F-Droid command finished at:
# Mon Jul 29 17:34:42 UTC 2024

# Command as entered:
$ fdroid build com.example.appname ; send_tg_alert

The F-Droid build commands

Now from inside the docker container (the entry point script should have put us inside the /build directory already) we can run the fdroid commands.

You can run fdroid --help to get a list of subcommands such as:

# Build a package from source
fdroid build

# Read all the metadata files and exit
fdroid readmeta

# Rewrite all the metadata files
fdroid rewritemeta

# Warn about possible errors in the metadata
fdroid lint

For each command you can append --help for more details, eg fdroid build --help, but check the official documentation for full details.

Creating a Telegram Bot

Tue, 30 Jul 2024 17:11:44 +0100

Create the bot

This is done via the Telegram app, so we need to open that up (if you don’t have it installed yet you’ll need to do that first).

Use search (magnifying glass icon) to find the bot called ‘BotFather’. This is an official Telegram bot, used for setting up new bots. Tap it to start a chat with it.
In the chat with ‘BotFather’, use the /newbot command, this is just a matter of typing the command as a message just like you’d send a message to a person
The slash is part of the command so make sure you include it
Enter a name for your bot, this is the name which will be displayed in chats
Enter a username for the bot, this is for Telegram’s use and must end in ‘_bot’ (the prompts will tell you this)

This creates the bot, then you will receive a message with some info about your new bot. The main thing you need here is the new bot’s token for accessing the HTTP API, this will be a long string something like 7901112608:AAD9fDpa9kgw3lZ10o6qANkXnB_D2ZvwuPc

This is your BOT TOKEN, keep a note of it as you need it to do stuff with your bot

Check that everything is working so far…

In a browser, visit a special URL including your bot token (hitting it in a browser like this is one simple way of accessing the API).

The format is https://api.telegram.org/bot<BOT_TOKEN>/getMe
So using the example ID above https://api.telegram.org/bot7901112608:AAD9fDpa9kgw3lZ10o6qANkXnB_D2ZvwuPc/getMe
Make sure the bot part is there just before the token as it’s an essential part of the URL
You should see a page in JSON format with some basic data about your new bot

Create a channel

To interact with the bot (eg to receive messages from it), you need to create a channel.

In Telegram, tap the pencil icon
The ‘New Message’ dialog will appear, tap ‘New Channel’
Give the channel a name (and description if you wish)
Choose whether it should be public or private
Choose subscribers — here you need to add your new bot. If you can’t see it in the list, tap the blank area at the top to search and type part of its name, it should appear.
The list of subscribers can be edited at any time by tapping its icon in Telegram

Now you can use the API again to get the ID for the channel (or ‘chat’ as it is referred to). The URL is similar to the one you used above to get the token ID, but the last part changes from getMe to getUpdates, so https://api.telegram.org/bot<BOT_TOKEN>/getUpdates.

Like before, you will see some JSON data. You are looking for a channel_post.chat.id, something like -1002179830041 the dash is part of the ID.

This is your CHAT ID, keep a note of this too as it will allow your bot to send messages to this chat/channel

Test your bot

Now you have what you need to send automated messages via your bot. It’s as simple as:

# Send a message from a Telegram bot to a specific chat/channel
curl 'https://api.telegram.org/bot<BOT_TOKEN>/sendMessage?chat_id=<CHAT_ID>&text=<YOUR_MESSAGE>'

Storing Secret Credentials

Tue, 30 Jul 2024 17:11:44 +0100

If you’ve already set up a Telegram bot and added it to a channel, you only need 2 things to be able to write code that uses that bot:

The BOT TOKEN - when you create a bot on Telegram you are given this
A CHAT ID - this points to a specific chat/channel on Telegram

These bits of info are used to send messages via the Telegram API. Anybody who has them can use your bot, so you want them to be secret, meaning you won’t want to hard-code them in any scripts.

Storing bot credentials using GPG

GNU Privacy Guard is a set of popular command line tools for working with encrypted secrets. We’ll use this to manage our Telegram IDs/keys.

First, make sure all the dependencies are installed

# Some distros might use gnupg, some have gnupg2
# some have both
sudo apk add pass gnupg gnupg2 pinentry-tty

Set up your user ready for key storage

Run the following commands and choose your options:

The default options are usually fine, but check out man pass to learn more
Use any email address you want, it doesn’t have to be real, it will be used as an ID to work with your keystore
Keep a note of whatever address you used

gpg2 --full-generate-key
pass init <YOUR_EMAIL>

Store your secrets

Use pass insert and give it an argument which you’ll use like a label for your secrets so you can edit/delete/retrieve them. You can organise them by using slashes so you can create something like a path or namespace for related secrets.

You will be prompted to enter the secret you want to store, then again to confirm it.

# I want to store a couple of IDs related to a Telegram bot,
# so start both with the same `telegrambot/` string
pass insert telegrambot/bottoken
pass insert telegrambot/chatid

Retrieve your secrets

pass telegrambot/bottoken 
# Output eg > t3l3GRAMbotIDiJustEnT3red

pass telegrambot/chatid 
# Output eg > teleGR4MchatIDiJustEnT3red

# So eg to set environment variables
# !WARNING ANYONE WHO CAN READ YOUR VARIABLES
# WILL BE ABLE TO READ THE SECRET!
export TELEGRAM_BOT_ID=$(pass telegrambot/bottoken)

To let go of your cached password

After you enter your password GPG hangs on to it for a while, which can make testing difficult while you are getting things set up. If you enter the command below it will be cleaned up and you’ll be prompted to enter your password again.

gpg-connect-agent reloadagent /bye

Setting Up the LXC Container

Tue, 30 Jul 2024 17:11:22 +0100

I’m using LXC containers on Proxmox. If you have a different method of working with containers I’m pretty sure you’ll be able to use the info here and repurpose it to your preferences.

Create an Alpine container

I won’t go into the details of how to do this as it’s specific to Proxmox and no different to setting up any other LXC container in Proxmox.

I’m using Alpine Linux as the container distro as it’s very lightweight and the F-Droid tools don’t need anything fancy.

~~In terms of resources, it doesn’t need much, the following has been more than enough for me so far:~~

~~512MB RAM~~
~~512MB swap~~
~~8GB disk~~

How naive of me, Gradle is much more greedy than I originally thought and I was getting build errors due to low resources. So I set the container up with:

6GB RAM
1GB swap
16GB disk

Set up the container for F-Droid builds

While logged into my Alpine container, first I set up some basics:

# Ensure everything is up to date
apk update
apk upgrade

# Install and configure git
apk add git vim
git config --global user.name "<YOUR_NAME>"
git config --global user.email "<YOUR_EMAIL>"
ssh-keygen
cat .ssh/id_rsa.pub 
# ... then copy key to gitlab SSH keys

F-Droid build instructions depend on docker, so:

apk add docker

# Start docker on boot
rc-update add docker boot

# Start docker now (or reboot so the above command can take effect)
service docker start

Now get the F-Droid stuff installed:

git clone --depth=1 git@gitlab.com:<YOUR_ACCOUNT>/fdroiddata.git ~/fdroiddata
cd ~/fdroiddata
git checkout -b com.example
cp templates/build-gradle.yml metadata/com.example.yml



# If (like me) you already created a fork before it's a little different 
# and you have to do this instead of the above

# git clone --depth=1 git@gitlab.com:<YOUR_ACCOUNT>/fdroiddata.git ~/fdroiddata
# cd fdroiddata/

# Shallow cloning makes other branches inaccessible, fix that
# git remote set-branches origin '*'
# git fetch -v --depth=1

# And now the branch can be checked out
# git checkout com.example

The container is set up now, later on on we’ll get around to how to actually use it…

The F-droid Build Process

Tue, 30 Jul 2024 17:11:22 +0100

There are two main git repositories involved in getting an app listed on F-Droid, fdroiddata and fdroidserver. You’ll need local, shallow clones (see below) of them both.

The `fdroiddata` repo

The fdroiddata repo stores metadata about all of the apps on F-Droid.

On a regular basis, F-Droid servers will run through each of the apps listed in the fdroiddata repo, specifically the /fdroiddata/metadata/ directory.

The metadata of each app will be read and used as instructions to build it on F-Droid’s side. It will then be available in the F-Droid app listings.

Basically, apps exist on F-Droid by having their YAML file available in this repo’s metadata directory:

Irrespective of F-Droid, Android apps have an applicationId in their build.gradle file, usually in the form of a reverse domain name eg com.example.appname
The YAML file must be named with that same app ID, eg /fdroiddata/metadata/com.example.appname.yml

As well as this metadata, your app can/should have extra metadata in its own repo https://f-droid.org/en/docs/Submitting_to_F-Droid_Quick_Start_Guide/. That is something you do inside your app alongside your own code so I haven’t gone into detail about it here as things are complicated enough

Getting your app’s metadata into the `fdroiddata` repo

F-Droid official instructions are here and you’ll need to refer to them for proper details.

Here I just want to give a high-level view to help wrap your head around how this all works. The general process is as follows:

On GitLab (you need a GitLab account if you want to submit an app to F-Droid), make a fork of the mainfdroiddata repo
On your dev machine, make a git shallow clone of your fork eg:
git clone --depth=1 https:<PATH_TO_YOUR_FORK>
A shallow clone retrieves only a small number of recent commits
Create a new branch for your app in your local clone eg:
git checkout -b com.example.appname
Locally, copy a template of the metadata file and rename it to match your app eg:
cp fdroiddata/templates/build-gradle.yml fdroiddata/metadata/com.example.appname.yml
Edit your metadata file to give instructions about how to build your app
Test that the app builds on your local machine (see below)
Once you’re happy that everything in your metadata file is ok, create a merge request on GitLab for the main repo to pull in your branch containing your new com.example.appname.yml file
When that merge request has been accepted, the official fdroiddata repo will contain your new metadata file, meaning next time F-Droid run their build process your app will be included and built

The `fdroidserver` repo

The fdroidserver repo contains the build tools that F-Droid use themselves to build all of the apps that they list.

Before submitting your merge request you want to be sure that you have created your metadata (as above) correctly and that the build process works. So you create a local copy of the fdroidserver repo in order to be able to complete the build process yourself. You only build your own app (luckily — building all of the apps on F-Droid would take days).

Explanation of how to use the build tools comes later in this series of articles.

Intro

Tue, 30 Jul 2024 17:11:20 +0100

Building apps for F-Droid is a fairly complex process, involving:

A couple of git repos (besides any your own project may have)
Using docker
Forking and merge requests on GitLab
F-Droid’s specialised build commands

F-Droid gives instructions on their process here.

I managed to get my first Android app (BendyStraw) published on F-Droid but felt a little out of my depth at times and didn’t have a clear mental model of all the moving parts.

So in this series of articles I’m going to write up the process in my own words. I’ll add a couple of scripts which help reduce some repetitive steps, and as the fdroid build command can take a while I’ve set things up so that I can automatically be sent a message on Telegram when the process is finished.

Proxmox

My main development machine runs Proxmox, a special OS which just hosts virtual machines and containers. Roughly speaking, a virtual machine virtualises the hardware, whereas a container virtualises the operating system.

With Proxmox the main OS is only used for managing these virtual systems. Everyday computer usage such as development work is always done inside a virtual environment, for example if I’m writing Flutter code I’ll be working inside a Debian virtual machine.

I decided to make a small separate container dedicated only to building apps for F-Droid. I’ll be releasing more apps on F-Droid in future so it will be nice to have a clean environment siloed off for the job. Proxmox uses LXC containers and I chose to use an Alpine Linux template to get me started because Alpine is very lean.

Vanilla JS

Fri, 05 Apr 2024 12:18:03 +0100

Toolchain

I enjoy using plain/vanilla JS where possible. For my own projects I try to avoid the sprawl and long build times of NPM.

I do like to split my code up into separate modules though, and to be able to benefit from bundling/minification etc, for which I use esbuild. I also want to be able to use SCSS and JSDoc for type annotations. So I do allow myself some minimal tooling (the cone and Flake).

My setup looks like this…

esbuild - Download a build

JS bundler
Combine separate modules into a single JS file, minifying/compressing if required
Tree shaker
Avoid bloat by making sure only those modules/functions which are used get added

I use esbuild for most JS projects, so I installed a standalone build which can be run from anywhere — but it can also be installed using npm or other methods.

SASS - How to Install SASS

Compiler and bundler
Converts SASS/SCSS files into CSS

JSDoc - Documentation

Automated documentation creation
HTML docs for your methods, classes and variables will be created based on your code comments
Type annotations
Comments in your code can tell JSDoc which data types your code expects

Type annotations you provide (in specially-formatted comments) will be used to automatically create detailed documentation for your project.

Docs are created as HTML files, with lots of clickable cross-references. The files can be styled based on a templating system and CSS styling.

Lots of modern editors/IDEs will also use your type annotations to provide type hints and draw attention to potential problems eg if you try to pass an argument of the wrong type you’ll get a warning.

Example of Project Setup Using Tmux/Vim

I usually write a simple bash script for most projects. I’ll run this script when I want to start a session of working on a specific project.

Below is an example build script (for my ‘Pipe Dream’ game) which does the following:

Enters the project directory
Uses tmux to open a few window panes/splits:
- esbuild watching for changes to JS
- SASS watching for changes to CSS
- JSDoc watching the src directory (in reality I’d often skip this and run it manually on-demand, as it can be slow)
- git status, pane left open for commits etc
- A simple Python server so I can test the app in a browser
Opens a vim session with the relevant source files ready for editing

#!/bin/bash

# Open a JS project using esbuild, SASS and vim

work_dir="$HOME"/pipe-dream/

'tmux' \
    new-window -c "$work_dir" "esbuild src/main.js --outfile=www/js/pipe-dream.js --target=es6 --bundle --minify --sourcemap --global-name=PIPEDREAM --format=iife --watch" \; \
    split-window -c "$work_dir" "sass --watch src/scss/:www/css/" \; \
    split-window -c "$work_dir" "jsdoc src/ -c jsdoc.config" \; \
    split-window -c "$work_dir" "git status; bash -i" \; \
    split-window -c "$work_dir" "python -m http.server --directory www/" \; \
    select-layout even-vertical \; \
    new-window -c "$work_dir" "vim -S vim.Session" \; \

Vim Configuration

I’m one of those Vim people. People say its codebase is bloated but in use it always feels crisp and fast to me. Because of the way you manipulate text objects and leap around the page it somehow feels efficient on low-powered/slow devices, and works particularly well with e-ink devices.

Some people argue that they’re faster while using Vim than they are in other code editors. I’m not sure if I’m faster (I might be), but I’m from the school of thought that if your bottleneck when writing code is your typing speed, that might not be a good thing.

More importantly for me, I like the way Vim makes you think about text, as beautifully described in this classic stackoverflow answer ‘Your problem with Vim is that you don’t grok vi’.

I don’t like my coding environment to be too noisy or intrusive, but there are some powerful IDE features available nowadays and I don’t want to cut off my nose to spite my face.

Below is some info on some Vim plugins I use to help with JS development.

coc-nvim - Code of Conquer project repo

Although the ’nvim’ stands for Neovim (the popular Vim fork), COC also works very well in modern versions of normal Vim. This plugin allows VSCode-type IDE features, being based on the Language Server Protocol standard.

Very simply, a language server is a tool which understands a specific language, and can be used by your editor/IDE to analyse and give feedback on your code as you write it. It can do things like:

Syntax highlighting
Code completion
Draw attention to errors and give warnings about code
Help when refactoring code

COC isn’t a language server itself but it allows you to install and maintain whichever servers you need for the languages you use.

For example the language server I use for JS is coc-tsserver. The ’ts’ stands for TypeScript but it works very well with standard JS too. Along with the benefits mentioned above, this language server allows you to use type-checking, like TypeScript but without the compilation step. It also provides documentation and hints on using standard built-in JS methods.

You annotate your code by providing special comments in JSDoc syntax. When these comments/annotations are present, COC and the language server give you lots of hints while writing code, and warn you if you try to provide arguments of the wrong type.

Here is an example (from the official docs) showing what the JSDoc syntax looks like:

/** Class representing a point. */
class Point {
    /**
     * Create a point.
     * @param {number} x - The x value.
     * @param {number} y - The y value.
     */
    constructor(x, y) {
        // ...
    }

    /**
     * Get the x value.
     * @return {number} The x value.
     */
    getX() {
        // ...
    }

    /**
     * Get the y value.
     * @return {number} The y value.
     */
    getY() {
        // ...
    }

    /**
     * Convert a string containing two comma-separated numbers into a point.
     * @param {string} str - The string containing two comma-separated numbers.
     * @return {Point} A Point object.
     */
    static fromString(str) {
        // ...
    }
}

Sometimes the help is a little noisy though…

I love the functionality, but for me it’s a bit over-eager, eg if I’m half-way through typing a word I don’t need a popup telling me the word doesn’t exist.

coc-nvim does also provide a small symbol at the start of each line where it detects an error or wants to warn about something. So I like to leave the symbol visible, but hide the info popups by default. I add a keyboard shortcut so I can show/hide the explanation of the error/warning when I want to.

To stop the popups:

// In ~/.vim/coc-settings.json

{
  ...
  "diagnostic.enableMessage": "jump",
  ...
}

To add the show/hide keyboard shortcuts to Vim:

" In ~/.vimrc

nmap <silent> gh <Plug>(coc-float-hide)
nmap <silent> gl <Plug>(coc-diagnostic-info)

Prettier

This opinionated code formatter formats your code according to some fairly strict rules and has few configurable options (ie it’s their way or the highway).

I think most people find at least some of the rules disagreeable, but the point of this kind of tool is that it does a ‘decent, not perfect’ job, but provides a standard for formatting and removes the need for discussing, disagreement and wasted time.

I found it a little annoying at first but then got over myself and prefer now to use it whenever possible.

The Bad Parts

Fri, 05 Apr 2024 11:44:43 +0100

The Low Memory Killer Daemon - Official Docs.

This feature of modern Android versions kills tasks (/apps) when it thinks they are causing memory-related performance problems. It can feel pretty heavy-handed, with apps abruptly closing at seemingly random intervals.

In practice this can irritate but I’ve never lost any work because of it. The most noticeable occurrence is when Termux:X11 closes — my Linux desktop suddenly shuts down! Sounds terrible But actually my Vim buffers are constantly auto-saved, my browser tabs are stored… I just have to restart the session, then Tmux, then maybe a couple of other items. I’m back up and running in 1-2 minutes, and this problem might occur once or twice per week at the most.

There are various ways to tweak the daemon though, search for terms like ‘disable android oom killer’, ’tweak low memory killer daemon android’ etc.

Missing Tools for ARM Architecture

As the types of CPU in Android devices (usually ARM) are not the same as those used in laptops/desktops (usually X86), the standard desktop versions of software can’t be installed and compatible versions must be available (unless you want to compile them yourself).

This isn’t as bad as it sounds as the package manager for whichever distro you use will automatically pull in the correct version for your CPU architecture. Some software might be missing though.

A couple of specific gaps in the system affect me:

Garmin Monkey C
Garmin apps are written in their own language ‘Monkey C’, which has to use their own Java-based compiler and device simulator. As far as I can tell this isn’t happening on ARM. It was hard enough to get it working on Linux and Vim as they presume Windows/VSCode in their tutorials, so once I achieved that I didn’t take it any further.
Flutter cross-compilation
The situation with Flutter is strange. Flutter is used to make multi-platform apps, so the same code can output apps for Linux, Android, Windows etc. I can build a Linux (ARM64) binary on my Android Ubuntu… and I can build an Android binary on my (normal, X86 desktop) Linux. But I can’t build an Android binary from Android. Apparently people were able to do this on older versions of Flutter, so it seems like Google (who control Flutter) intentionally stopped supporting it.

Fingers crossed!

Mine is a niche use-case and I understand that I can’t expect organisations to support such a tiny minority as ARM Linux. Apple’s M1/M2/M3 ARM chips are doing very well, which is great if you’re into that but I don’t enjoy their ecosystem.

So for now I need to hang on to my X86 desktop. But I hope ARM continues to gain recognition as more than a mobile phone CPU and can be used for more development tasks in future.

Software

Fri, 05 Apr 2024 11:44:41 +0100

Although this is all in relation to working on Android, the software I use is generally the same as if I was on a Linux desktop. That’s kind of the point, nowadays I can use almost the same environment on Android as I can on my desktop.

Termux

Termux is a brilliant free terminal app and Linux environment for Android. It has most of the Linux commands I need and I can install git, Vim, Tmux, mutt, ImageMagick and the majority of the terminal software I like to use. For certain jobs such as scripting, SSH sessions and writing, this is all I need.

Termux can run non-terminal, graphical apps too, but you won’t be able to see them. That’s what the next app is for.

Termux:X11

This amazingly useful app describes itself as being in early development, but I’ve been daily-driving it for months without significant issues.

Termux:X11 is an X Server for Termux. This allows you to install graphical Linux apps, as long as they are available for your system architecture (ie AArch64 — or ARM64 as it’s known — for most modern Android devices).

This means I can run, directly on my tablet:

Desktop Firefox (so, full developer tools)
Desktop Chromium (this was quite hard to get installed and isn’t the absolute latest version but is still very useful for development)
Krita/Inkscape/GIMP for image processing
Thunar file manager
Audacity (using PulseAudio over the network to pipe the audio up to Android by using the devices own IP address… I’m sure this creates some delay/latency but I’ve not noticed it in practice and for my typical usage of minor adjustments to audio files it works well)

PRoot Distro

This is a ‘container environment manager’ and allows you to easily install, uninstall, backup and restore Linux distributions, alongside/on-top-of Android, sharing the kernel.

It’s really simple to use, eg installing Debian Linux is a matter of opening Termux and entering:

proot-distro install debian

Then for a shell login:

proot-distro login debian

PRoot Distro provides a nice choice of distros including:

Alpine Linux (edge)
Arch Linux ARM
Artix Linux (AArch64 only)
Debian (stable)
Fedora 38 (AArch64 only)
Manjaro (AArch64 only)
OpenSUSE (Tumbleweed)
Pardus (yirmibir)
Ubuntu (23.10)
Void Linux

You can install as many distros as you want and swap between them easily. Each distro just sits in a directory on the Android device. Using the backup tools the entire system can be bundled up as a single archive file and moved over to another Android device.

Window Management

I believe that the best user interface (actually, interface of any kind) is one that I don’t even notice exists. It doesn’t shout at me, it doesn’t wow me with animations and eye-candy. It allows me to get to the tools I need to get the job done and stay immersed in the task. It is at peace with itself enough to take a back seat and not demand attention. It is, conceptually, transparent.

A lot of people like the gestural UI featured in ‘Minority Report’. I like the film, and the scene with Tom Cruise manipulating the UI is well produced and fun to watch. But as a UI it’s terrible! Hugely inefficient with all those big sweeping hand gestures, it’s not quick or practical. I don’t want to have to perform interpretive dance to use my computer (nor watch my computer doing little performances when I’m trying to get stuff done).

I found similar sentiment in this Daring Fireball article about the Apple Vision Pro:

“To me the Macintosh has always felt more like a place than a thing. Not a place I go physically, but a place my mind goes intellectually. When I’m working or playing and in the flow, it has always felt like MacOS is where I am. I’m in the Mac.

“Interruptions — say, the doorbell or my phone ringing — are momentarily disorienting when I’m in the flow on the Mac, because I’m pulled out of that world and into the physical one.”

I am nearly exactly like this too, except I don’t want to feel like I’m “in the Linux” (and definitely not “in the Mac” or “in Windows”!). I don’t want to be aware of that layer of abstraction at all. I don’t mind feeling that I’m “in Vim”, but really I want to be “in the code” that I’m editing. I specifically don’t want to feel the manicured claw of a corporate behemoth like Apple or Microsoft on my shoulder… but that’s just me.

I’d rather forget that my OS(/window manager) exists. It’s a facilitator, not an end in itself.

DWM: Tiling Window Manager

I used to prefer larger screens and multiple monitors. I knew about the concept of workspaces but they sounded annoying and fiddly. It took me a long time to give them a chance and it happened accidentally, as a side-effect of trying a tiling window manager.

Very briefly, a tiling window manager organises your windows into tiles, meaning instead of having oddly-sized overlapping windows floating around making a confusing mess of your screen and using space inefficiently, your screen splits into fractions, each being filled by an app. If you have too many apps on the screen they can go onto other screens, or ‘workspaces’. Personally I tend to run most apps fullscreen most of the time, switching between them with keyboard shortcuts.

I started with i3 Window Manager, which is a really nice piece of software. After a few years of using it though I realised I didn’t use most of its features, so landed on the very minimal Suckless Tools DWM.

With workspaces, each app can have its own screen and can be accessed instantly via a keyboard shortcut. With familiarity this becomes a chord in muscle memory, a hand-shape to mash at keyboard. I have habits for where I keep each app, so eg my terminal is in workspace 1 so [Alt]+[1] puts me in the terminal. [Alt]+[9] puts me in FireFox and so on.

I’ve [Alt]+[Tab]bed through apps in the past. Workspaces are similar except you know the keyboard chord will take you directly to the app you want, you don’t have to play ‘stop the magical app carousel at the right time’… which may be a drawback for some I guess, as carousels can be fun.

We can only focus on one thing at a time, that’s how attention works. I can see some uses for multiple screens eg if you have to monitor lots of things, like real-time charts or meters. In that case your peripheral vision is good at detecting change/motion so you can make use of all the space. But personally I’m completely over large/multiple displays. In my circumstances, they waste power, waste space, and are just not necessary.

Hardware

Fri, 05 Apr 2024 11:44:40 +0100

Hardware

My favourite and most commonly-used device is my Samsung Tab S8 Ultra:

14.6" OLED display
2960x1848 resolution
16:10 aspect ratio
8-core, 4nm processor
8GB RAM

The OLED (my favourite display tech along side e-ink) screen is gorgeous. Black is really black and running everything in dark OLED (black) UI modes gets a little more out of the battery too.

This tablet is roughly on par with average modern laptops in terms of power, but has some advantages for me.

Ergonomics

This is the main reason I generally prefer a tablet over a laptop. With a laptop the screen is attached to the keyboard, meaning:

The display is always too low, so…
you hunch over…
which is bad for your back, and…
…affects your breathing, as…
- your shoulders turn inwards and compress your chest cavity, so…
- your breaths will be shorter and more shallow…
- increasing a tendency towards feeling stressed or anxious

This may seem over-the-top, but we programmers spend a lot of time sitting at our machines. There’s no such thing as a good position to sit in all day, our bodies expect and require movement (I certainly need a lot more) — but some positions are better than others.

Another benefit of using portable/mobile devices for work is that you aren’t chained to a desk, so can move around to different seating positions throughout the day. As a self-contained unit a laptop is good for this too, but you’re still stuck with the screen and keyboard being attached to one another.

I attach the tablet to a monitor arm so I can position it at a good height (ie with the top of the screen being just below eye level). But if I want to spend some time in a different position, I have a simple tablet stand which folds flat (so takes up very little storage space) and can easily be placed on top of books or boxes to elevate my tablet.

Tablet arms
Foldable tablet stand

Choice of Input Devices

In the past I’ve preferred ThinkPads for their great keyboards and little red TrackPoint pointing devices — I have an old but lovely X230 for when I do feel the need for a laptop.

Nowadays though, my favourite combo is a mechanical keyboard and trackball (the ‘fingers on top’ type of trackball suits me better than the ’thumb at the side’ type).

Of course these devices can be attached to laptops too, but then the laptop’s own keyboard and pointing device are just sitting there doing nothing. Laptops are good for travelling but for me sitting at home they’re a waste.

They used to make TVs with DVD players built-in, and common advice was that it wasn’t a wise buy, as if the DVD player stopped working you just had a wasted lump of electronics attached to your TV. I feel like this about laptops.

Ergodox Mechanical Keyboard

I like to use an Ergodox mechanical keyboard which I built myself from a kit and maintain (due to my terrible soldering joints regularly failing). This is a split keyboard, meaning it comes in 2 halves which can be positioned with a gap in the middle, allowing me to keep my arms a comfortable distance apart and avoid the hunching and bad posture. The keyboard is also programmable via the open source firmware QMK (great project btw).

As time goes by I am gradually removing keys from my layout and moving towards a layers/chording method of typing, meaning you have fewer keys and use more key combos. I’m ultimately aiming for a 40% layout (which vaguely means 40% of the number of keys on a normal keyboard). Fewer keys means fewer hand contortions and stretching fingers to fewer awkward positions, plus it makes the hardware smaller. Once I’m comfortable with that smaller number of keys I’ll build myself a Bluetooth LE Ferris keyboard or something similar.

My Ergodox is a wired USB version but I use it over Bluetooth via a BT500 Bluetooth adapter which converts any USB keyboard/mouse into Bluetooth. The BT500 is quite expensive for what it is (about $40) but I doubt they sell huge numbers of them so probably don’t have the economies of scale to make them cheaper. I had to order from the USA and wait a while to get it, but it’s a pretty cool and useful device.

Deft PRO Trackball

My trackball is a DEFT Pro. It works well for my purposes and feels comfortable enough. I try to use the keyboard instead of the pointer as much as possible but sometimes a mouse/trackball is needed, eg when editing images.

Power Management

Android/mobile devices treat this as an important feature whereas laptops don’t always take enough care over it, especially with Linux (where power management isn’t always the best, partly because device manufacturers don’t work as closely with Linux as they do Microsoft). This isn’t true for all laptops though, and things seem to be improving.

Most Android devices use ARM CPUs, which give strong performance for relatively low power usage.

I admit that Windows and MacOS tend to be better-tuned for power efficiency, but if I had to use those OSes I’d be wishing for my battery to die, just so I could stop. So, swings and roundabouts.

Adaptable and Easy to Store

I can be writing code one minute and very quickly change to watching a film or casual web browsing handheld mode the next.

As I’m often relying entirely on solar power for my electricity, being able to minimise the number of devices I need to keep charged up is a real benefit for me.

Also, living in a small space, tablets are flat and thin — so very efficient in terms of storage. Several can be stacked up on top of each other and take up no more space than a large book.

Intro

Fri, 05 Apr 2024 11:44:38 +0100

I get a lot of my development work done on Android devices. That usually means a large tablet, but it’s not impossible to get work done on smaller tablets or even phones (although the smaller you go, the harder it is to maintain ergonomics and practicality).

With Termux/PRoot Distro/Termux:X11 (explained below) I can run all of my most-used Linux apps just like I was sitting at a desktop, silently (ie no fans) and efficiently.

Performance on my S8 Ultra tablet is great — not as fast as the latest most powerful laptops but perfectly comfortable for my usage patterns.

A shortcut to a simple Termux script means I can tap an icon on my Android home screen and boot into the beautiful emptiness of an Ubuntu DWM session in about 5 seconds.

Android Bluetooth Keyboard Mapping

Thu, 08 Feb 2024 12:05:30 +0000

I use Bluetooth keyboards with Android a lot, and often want to remap keys (eg swapping CAPS_LOCK to CTRL_LEFT).

Maybe it’s a failing in my search technique or I’m doing something that nobody else does nowadays, but whenever I search for info about this I find really old articles with out-of-date info, or just links to apps. To be fair Key Mapper is good and I do use it, but sometimes I just want to be able to do it at a system level without requiring extra apps.

To remap keys in Android, you need to edit a particular keylayout *.kl file, specific to the device (eg Bluetooth keyboard) you want to re-map. The files have names like Vendor_04e8.kl. The name is derived from various properties of the device, such as vendor ID, product ID and other things as explained here in the Android docs.

The sticking point for me, for ages, was that I had trouble finding the vendor and product codes and, consequently, the correct file to edit. In Linux I’d use lsusb or bluetoothctl or something like that, but on Android even in the wonderful Termux, these things don’t work properly for reasons I haven’t completely wrapped my head around, related to security and/or the way Android and its underlying Linux kernel inter-relate.

Problem 1: Finding which keylayout file needs to be edited

In Termux or whichever shell/terminal you use, do su to log in as superuser
Do dumpsys and wait for it to finish. It can take a while (couple of minutes on some of my devices)…
If I don’t do this step, on some devices the next step doesn’t work… I hate this kind of situation as I have no idea why this should work and it feels nonsensical, but all I know is it fixed the problem when I encountered it.
Do dumpsys input to narrow the output
Even this input-specific command outputs quite a lot. I tend to just take my time and scroll through it, but you can make it easier by trying something like:
dumpsys input | grep -i -A12 bluetooth
- The -i means case-insensitive
- The -A12 means show the matching line plus the 12 lines After it
- You may want to tweak the number but for me 12 was good
In the output, look for a description for your device (mine is Device 45: Bluetooth 3.0 Keyboard), and soon after that you’ll find a line like KeyLayoutFile: /system/usr/keylayout/Vendor_04e8.kl — that’s the *.kl file you need to edit to remap your keyboard

Problem 2: Editing system files on modern Android

On modern versions of Android, even if you have root, it’s not possible to directly edit files in the /system/ directory (it is mounted as read-only).

The way around this is to make a Magisk module. This is simpler than it might sound. The basic idea is that you create a folder in /data/adb/modules, (eg in my case I use mm, so /data/adb/modules/mm/). Inside that folder, you can create files and folders which Magisk will overlay onto the system at boot time, eg:

/data/adb/modules/mm/system/usr
# becomes
/system/usr

/data/adb/modules/mm/system/usr/keylayout/Vendor_04e8.kl
# becomes
/system/usr/keylayout/Vendor_04e8.kl

Now you can edit the keylayout file to make your changes, eg to change CAPS_LOCK to CTRL_LEFT on my keyboard it’s:

# key 58    CAPS_LOCK
key 58    CTRL_LEFT

Other apps which might be useful

Depending on your Android device and software version, it can be difficult/confusing to find the right key codes. I find that one or another of the apps below usually gets me what I need:

Pipe Dream (Web Game)

Wed, 15 Nov 2023 16:04:45 +0000

Pipe Dream is a game you can play in your browser here.

You don’t need to log in or install anything and of course there are no ads/tracking.

The game is about as simple as it gets. There are loads of blobs floating about — avoid some of them and eat the others.

To control the player move your mouse pointer (or drag your finger) over the control area - a rectangle on the right or bottom of the screen (depending on which way around your display is oriented)
When you hit one of the avoid blobs you lose health.
Each level gives you a different amount of time to complete it
To complete a level, eat all the edible blobs before you run out of time, or health

OLED Devices

Thu, 02 Nov 2023 15:57:18 +0000

Samsung Galaxy Tab S8 Ultra

Tab S8 Ultra

My main device, I use this for most of my coding work and it’s gorgeous for media consumption.

I run Termux X11 with proot-distro allowing me to use a relatively complete Linux (Ubuntu 20.04), including full desktop (aarch64) versions of Firefox and Chromium.

If I need more power, or to access a Windows VM, I use this same device via AVNC to VNC into my small form factor PC.

Samsung Galaxy Tab S4

Tab S4

I daily drove this for a couple of years as my main device. Although the screen is only 10.5" it’s a very capable device and can do pretty much everything the S8 Ultra can, just smaller and a bit slower (I find it to be quite usable).

Samsung Galaxy Note 3

Note 3

This is like the baby version of the above 2 devices, I use it without a SIM as a mini tablet.

Again, it can pretty much do the same things that they can, only smaller and noticeably slower. It’s a 10 year old device at time of writing (was released in September 2013). It was a flagship device and actually holds its own quite well despite its age. It’s still perfectly usable.

I’ve even used it for (small) paid jobs a couple of times when I first started to live off solar and was adjusting to the low power situation. I attached it to an arm to hold it up close to my eyes, and with a Bluetooth keyboard and mouse.

BlackBerry Q10

BlackBerry Q10

I stopped using my Note 3 as a phone and ‘downgraded’ to this, to use as a dumb-ish phone. It has good call quality and reception and a hardware QWERTY keyboard which I wanted for texting. It’s small and well-built.

E-ink Devices

Thu, 02 Nov 2023 15:53:18 +0000

reMarkable

reMarkable 1 (my drawing of John C. Lilly)

I use this for notes and sketching. Also sometimes as an e-reader (with KOReader) as the screen size is really nice and it’s a very light device.

I find that the act of writing with a pen feels good and believe it helps me with thinking. My thoughts seem to work in a different pattern somehow when I’m using a pen vs a keyboard — especially when I’m planning an app or trying to work through a problem that I’m going around in circles with in my head. I find visualising on ‘paper’ often helps me to crack a problem. Different senses, muscles in use, different groups of neurons firing.

None of this is exclusive to reMarkable, paper and pen would work just as well. The reasons I prefer the reMarkable are:

It feels nice. When I use real paper I prefer it to be good paper. But then I feel precious about it, and it makes me reluctant to write or draw (I had a lovely little Moleskine notebook but rarely used it as I didn’t want to ‘waste it’).
It has a few extra features like being able to cut/copy/paste, making it easy to rearrange notes and clean them up.

I also like that it runs Linux and you can SSH into it and get root.

I have the first generation, the rM1, which I specifically prefer over the later version. The rM2 replaced the plastic screen with glass, and the outer casing with metal. It is now more ‘premium’, and I think more people prefer the industrial design of this model. Honestly I find it dull and characterless, yet another metal and glass slab. The newer device is more brittle and likely to shatter, and for me it’s moving towards being more like an iPad (my least-favourite device, and one I keep only for FaceTime, it otherwise sits unused on a shelf). My plastic rM1 is softer, lighter, can flex a little without shattering, and the screen has some give in it which is satisfying to write and draw on. It has less RAM, a slower processor and worse battery life, so I lose out there, but I like the way it feels so much. Ultimately I can write very comfortably on it, and make very complex drawings (as complex as I would ever want to draw at that size anyway), so although I’d prefer the upgraded internals, I wouldn’t swap what I have.

Onyx Boox Nova 3

Boox Nova 3 with Brydge Keyboard

I keep a keyboard attached to this and use it as a small, peaceful writing device.

Each weekend I take 24 hours away from the internet and electronics. Some weeks I’m more strict than others so sometimes I do some writing or check emails, and this is the device I use. With the light off, writing markdown in Vim, it barely feels electronic, more akin to a typewriter.

Keyboards made to fit iPad Mini (or at least old versions like the 4th gen) fit the Nova (7.8" screen) pretty well. They attach with the tablet sliding into a little rubberised grip, which seems a bit kludgey but works fine.

I first bought a cheap Arteck keyboard which was selling for less than £10 on Amazon (those iPad models for which the keyboards are compatible are old, so there is probably not a huge market for accessories). It was OK but didn’t exactly feel high end. It creaked and felt hollow around the palm rest, and the most annoying problem for me was that the screen(/tablet) could only rotate back a little, not far past 90 degrees. This meant it was difficult to get an angle which was good for both typing and seeing the screen. It proved the concept (that the iPad keyboards could work) though.

I’d heard good things about the Brydge ones. They were silly prices in the UK though, well over £100 (about 3x the US cost). But I waited and kept checking eBay, eventually snagging one for less than £20.

The Brydge keyboard is a blatant step up in build quality. It feels really solid, made of lovely materials — the shell is thick aluminium and the rubbers and plastics feel dense and durable. The keys have a great action, although the travel isn’t huge it feels well-defined… when you press a key you know you’ve pressed it.

Some truly bizarre design choices have been made though: tab is hidden behind a modifier, and look at that weirdly massive Q key (in the pic)!

For now there’s not much I can do about the Q key but I can hammer out some of the other weirdnesses with the Key Mapper app on Android.

Like all Boox devices the Nova 3 runs Android, and therefore Termux. I have root. So I can use it for most things I do on my other devices, but its small screen makes it less than ideal. As a writing device though, it is ‘andsome.

Onyx Boox Max Lumi

Boox Max Lumi

This is my favourite device for reading those books which have a lot of important formatting, such as programming textbooks, or illustrations. A lot of documents are only available as PDFs which don’t re-flow very well on smaller screens, so this is great for those too.

It’s the first Max (13.3") device with a light (even though I prefer e-ink in its natural unlit form, an optional light is definitely handy at times). Although it’s a couple of generations old now, it still feels light, fast, and reading large-format books on it is very pleasurable. The e-ink panel is a Mobius, which has been superseded by panels with higher contrast ratios now, but does have a plastic substrate meaning it should be even more forgiving to flexing and bending. Similarly to the reMarkable 1, this device feels warm, soft and friendly, rather than cold and dystopian like so many modern devices.

I find the tone of the bezel around an e-ink screen can really affect my perception of the screen. If you consider that the screens have quite a compressed dynamic range (spanning middle shades of grey rather than true black/white), then surrounding them with a pure black or a pure white bezel changes the overall dynamic range within your field of view — now you have a more extreme tone in view, and the range of greys on the screen becomes comparitively compressed/more narrow.

The Max Lumi comes with a black bezel. I’ve temporarily modded mine with white tape. I definitely prefer the device with a white bezel, although my solution feels tatty (as you can see in the pic). I don’t know of a reasonable way to change the bezel to white permanently, but if I find one I’ll do it.

Kobo Mini

Kobo Mini

This is the device I take with me in my rucksack when I go into the city for grocery shopping, to read while I wait at bus stops. I bought it for next to nothing on eBay as it wasn’t working, but it was a software problem I was able to fix. It’s small and light, so cheap that I don’t mind if it gets damaged, and it doesn’t look shiny or expensive so doesn’t attract attention. It would be my favourite small e-reader if only it had a front light.

Kobo Glo

Kobo Glo

The Kobo Glo is basically the same device as the Kobo Mini, with a slightly larger screen and a front light.

I run KOReader on all of my e-readers as it’s a great bit of software and I can sync books and reading progress without being logged in to a Kobo account.

Intro

Thu, 02 Nov 2023 15:47:18 +0000

In recent years I’ve developed pretty strong preferences for a couple of display technologies. For the time being at least, I’ll probably only buy devices that use these technologies (OLED and E-Ink).

My preferences are bound to environmental factors, so I should point out that:

While using electronic devices I usually work in a relatively dimly-lit environment
For most of the year I live off solar power so try to limit my power usage

I spend a lot of time looking at screens and want to be as comfortable as possible. I like the screen to be dim, without sacrificing too much clarity or colour accuracy. The darker the room, the dimmer the screen can be and still appear bright. I don’t want to live in complete darkness, so the best balance for me ends up being a relatively dim room where I can still see clearly enough to read a book (for example).

Once I got used to my first OLED display, I really stopped enjoying the way LCD looks. Insipid blacks are inherent to LCDs; they use an evenly-lit screen, then block out pixels (sub-pixels, more accurately) when they are supposed to be black. The effect is like covering a torch with a piece of paper. Better quality displays might block out more of the light, but they always let some through, and the blacks end up as some form of grey. LCD viewing angles (even the better ones) mean images look weird once you move off-axis. It all just feels so… digital.

OLED

OLEDs are far more interesting in that each pixel is like its own little light source, which can be turned off independently of the other pixels. Black is truly the absence of light. In a dark room, black parts of an OLED display completely disappear into the darkness.

Truly black pixels (ie rgb(0, 0, 0)), don’t use any power, so dark mode UIs can use a little less power than alternative colours. I don’t know how significant this is, probably not very but I like dark themes anyway so it’s nice to use them by default and have a feeling that I’m at least steering battery life in the right direction.

At full brightness OLEDs are apparently less efficient than some other displays, but as I’ve already said I tend to use mine at pretty low brightness (usually the bottom 25% but even when the room is bright I still rarely go over 50-60% on my devices).

OLED Disadvantages

Some common criticisms of OLED are:

Lack of brightness compared to some other displays
Burn-in (image retention), where if the same image appears on-screen too much of the time, a kind of ghost of it can be ‘burnt in’ to the display

The lack of brightness is not a concern for me. I don’t use my main computing devices outdoors. I don’t go out as often as I should as it is, so when I do I don’t want to spend time looking at screens. I have a Garmin Fenix 5 Plus (with a transflective memory-in-pixel display) watch for the time and GPS tracking/maps if I need it. If I expect to sit waiting for something (like a bus), I take an old Kobo Mini with an e-ink screen. My phone will be in my bag or pocket and probably stay there.

Burn-in has also not affected my use. I still use my Galaxy Note 3 (phone) daily as a mini tablet for podcasts and videos. The Note 3 is just over 10 years old at time of writing. I think technically there is some burn-in, as when I look at a pure black screen, at its dimmest setting, in the dark, I can see some slight scratchy artefacts. But I never noticed them in real usage, ie they have never stood out when I’m watching videos or browsing the web. (I wrote this from memory, but I just turned the lights off and got my camera out to get a pic of this but I can’t even see it, so it can’t be that bad. I’ll update if I see it again!)

I don’t have always-visible taskbars and status bars, so there aren’t really any elements which always appear on my screen and would attract burn-in. I also notice I’ve unintentionally mostly used Samsung AMOLED panels, which have a pretty good reputation. So my experience may not be typical, although from what I hear this does generally seem to be less of an issue than it used to be. Modern OLED devices also use some tricks such as ‘moving the screen around’ by a few pixels periodically, and even detecting static logos and reducing their brightness.

E-Ink

E-paper/e-ink (Wikipedia: Electronic paper) also really appeals to me… a display made of tiny capsules containing an actual ink-like substance, in white and black, with each colour being either repelled or attracted by opposing electrical charges. It’s like electrically moving ink around. The capsules/pixels retain their colour (tone, really) even if there is no power at all (I’ve bought a few old broken e-ink readers from eBay, they often have an ancient image from the last-read book on their screen, even if the battery is removed or the screen is cracked).

Although lots of e-ink devices do have a light for their display, it’s a front light, with a very different quality to backlights, and is optional. For me, e-ink looks its best when viewed under reflective light (ie the ambient light of the room you’re in) although the frontlight is definitely handy for when you’re in a darker environment.

Something about this technology feels really warm and comfortable. I particularly like it on cheaper devices, they feel like some kind of future commodity tech, unlike the common contemporary fragile glass/metal slabs, which need babying, feeling like a responsibility more than a tool. So much modern tech is all about being the brightest and flashiest, shouting for attention.

My OLED and E-ink Devices

Thu, 02 Nov 2023 15:47:18 +0000

Generally, I prefer my computing devices in a tablet format. A display, with all the gubbins inside, which allows me to connect my input devices of choice without redundancy. It means I can position the display at an appropriate height. If I have a keyboard I like, I can use it with all of my devices, rather than it being glued inergonomically to a particular screen. The same applies to pointing devices (I like trackballs).

Almost all of my e-ink and OLED devices have a Wacom layer, so I can use the same stylus for all of them.

In compiling this article I’ve come to realise I’ve built up a little collection. I don’t need all of these but find a certain comfort in using different devices for different purposes, they take up very little space and I get a lot of enjoyment from them. I bought them all second-hand and am a pretty keen shopper so got some great deals, rarely paying more than half the retail price. In some cases I bought broken ones and Frankensteined them into a single working unit. I guess there are worse ways to spend money.

Onyx, Linux and GPLv2

Onyx (the manufacturers of a couple of my e-ink devices detailed below) seem to be wilfully breaking the licensing terms of the Linux kernel, by refusing to release their modified version of this GPLv2-licensed work. It leaves a bad taste in my mouth as I love the concept of open source software. It’s a shame because although I have 2 of their devices, I kind of begrudge it, don’t really want to buy another in future, and it makes me not want to speak highly of them as a company.

I do think it’s a complex issue and may be just as likely to have roots in genuine cultural differences, as much as it might just be about greed. The Wired documentary Shenzhen: The Silicon Valley of Hardware really affected my thinking on this, it’s an entertaining watch if you have any interest in modern technology, and touches on some different viewpoints on intellectual property.

It would be nice if Onyx at least spoke openly about it, at the moment their attitude just feels like a middle finger to OSS.

Staying Pragmatic

Wed, 11 Oct 2023 10:37:55 +0000

I’ll never stop learning new things. A while back I built my first Garmin watch app. This involved using:

A new-to-me language called Monkey C and its special compiler
A device simulator
Garmin’s Connect IQ SDK

Most developers are doing this on Windows, using either Eclipse or VSCode. VSCode is very nice software but I try to avoid Microsoft. If I must use Windows I boot up a virtual machine, hold my nose and get the job done. But I prefer to use Linux.

Arguments about Microsoft and their effect on the world tend to get long and boring, so I’ll just say I don’t like them myself and personally avoid their products insofar as it’s practical. No this doesn’t mean I like other megacorps like Google or Apple instead.

Regardless, pragmatism means I have to use things from some of these companies some of the time. To exclude all megacorp-related products I’d have to avoid everything to do with computing. However, in life we have a finite number conscious moments. It’s not possible for every one of those moments to be spent perfectly, but the more I can move towards spending more of them in places I like, supporting things I believe in, and away from places I don’t like and things I don’t believe in, the better.

Anyway when you’re learning new computer stuff, you’d best be using the same environment as the majority. Otherwise, you’re going to have lots of extra problems outside the normal expected beginner problems in that space. I don’t always mind this, I believe that doing things the hard way is rarely a waste of time as you have to solve problems which is, if nothing else, a useful exercise that keeps you sharp. Sometimes I can’t afford to take the hard way because of real time constraints or because I’m working on somebody else’s time. But not always.

So if you want to learn how to develop for Garmin devices, or Android apps in Flutter, and you want to use Linux, the easiest way is to use the most popular/mainstream distro, Ubuntu. Instructions will usually be aimed at Ubuntu users, and the differences between Ubuntu and other distros aren’t always easy to work out.

My 'Big PC'

Wed, 11 Oct 2023 10:35:55 +0000

Sometimes I need to step up to the next level and use a desktop PC:

Some development tools are not available for my Android system architecture (AArch64), namely Garmin Connect IQ tools and a small part of Flutter (which I use to develop Android apps)
It’s useful to connect other devices via USB to test software on a real device (eg my Garmin watch) during development (while it may be possible to do this on Android in some cases using USB On-The-Go and wireless connections, there are likely to be parts of it that are very difficult or impossible)
While learning completely new things, tutorials and guides will usually presume you’re using desktop software — matching their environment can ease the process

So I also have a small form-factor desktop PC, a Beelink SER4. It’s tiny, silent (after I modded the fan) and draws <10W during my average usage.

Ryzen 7 4800U
32GB RAM
Couple of SSDs
20V power input, meaning it fits in with my wiring setup without any extra adapters

Beelink SER4

I have it stuck underneath a storage cabinet with velcro . It has no display, keyboard or mouse attached, so I continue using my Android tablet as a display, remote controlling the desktop via VNC (using AVNC). That way I carry on using my preferred trackball, keyboard and the OLED tablet display that I enjoy so much.

The SER4 is running Void Linux. Void is great, and it can do anything any other Linux can do, but it is quite niche, and sometimes things need to be done in different ways. So I have an Ubuntu virtual machine too, plus some other VMs like Windows and MacOS for occasional testing.

Update: Now I use Proxmox, info coming soon

Keeping My Equipment Powered

Wed, 11 Oct 2023 10:34:55 +0000

Solar Power

My aim is to live completely off solar power. I’m not quite there yet. With my current system it works out roughly like this:

During the sunniest 6 months of the year I can basically do what I want
During the darker months, depending on how much and what kind of work I have (and therefore how much power my computing devices need), I must supplement my power by plugging into mains electricity

If you’re used to having normal mains electricity, it can be hard to understand how much of a difference small changes to electrical usage can make to my day. People are naturally used to thinking in terms of cost: “that only costs a few pounds a year to run, it’s basically nothing”.

For me it’s not about cost — at least not directly — it’s about “can I watch a film this evening on the large tablet instead of the medium-sized one?” or “can I get through to December instead of November without hooking up to the grid?”. The difference between using a 10" or 15" tablet (a difference in electricity usage which might add up to pennies a month from the grid) is noticeable for me. The step up to my (low power!) desktop is significant.

As a rough guide, I average about 1 unit (kWh) of electricity a day (if you’re in bricks and mortar that’s about 25p’s worth at time of writing). If you don’t know what that means, look at your electricity bill and see how many units you use a month or quarter. According to Ofgem at time of writing, a low-usage average 1-2 bedroom flat will use about 1,800kWh annually, so about 5kWh/day which is around 5x my usage.

I realise a lot of people would hate living like this, but I enjoy it. I find it fun and interesting. What needs to get done, gets done. I work full-time hours (on my own projects if I don’t have a contract). I bake bread, cook most of my food from scratch from basic ingredients. I paint, I solder, I do bad carpentry. I watch films, listen to music. It’s all fine.

Flank it

I’m pragmatic and prioritise work over my lifestyle experiments. If it’s the dead of winter and I need to work on something that requires me to use my desktop, I’ll get plugged in to mains. But outside that, I’m always looking to extend the proportion of the year where I can support myself with solar, with the end goal of course being 100% of the year.

To do this I squeeze the problem from two sides:

Increase the amount of solar power I can grab (eg by upgrading equipment)
Decrease my energy usage, by making sure I’m always using the lowest-power device that I have which can adequately do the job

Also, as a long-term bearing I steer more towards work which suits lower power, eg vanilla JS over long NPM builds, Vim over VSCode and so on.

Applying Progressive Enhancement to Choosing a Device

There’s an idea called ‘mobile first’ or ‘progressive enhancement’ in web development, where we aim first to make a website work properly on mobile devices, then work up through larger devices (tablets, desktops), tweaking visuals and possibly adding features as the devices get larger and more powerful.

I don’t personally like removing features for mobile devices — the fact that I’m using a mobile device should not be taken as a signal that I want to be excluded from accessing functionality of your site.

In terms of visual/interface design though, things do need to work differently depending on whether you’re at a small or large device, whether you have a touchscreen, a physical keyboard, are using a screen-reader due to problems with vision or some other reason…

I apply something similar to this method of progressive enhancement when choosing which computing device to use for work. My preference is to use an Android tablet (where you can get a surprising amount done nowadays), stepping up to a Linux PC when more power is needed or tools aren’t available on Android, then adding virtual machines if eg I need to use Windows.

So I start at the top of this list and work my way down as the jobs get bigger.

Android
Linux PC
Windows/MacOS VMs
Online build tools

Intro

Wed, 11 Oct 2023 10:33:55 +0000

Small Space, Small Footprint

(Cara)-Van Life

A few years ago I decided to leave bricks and mortar behind and move into a caravan. A small, summer touring caravan, German-built in 1983. The construction is more solid than a modern ‘van would be, but it is, ultimately, built for summer.

Painted caravan

The first couple of winters in here were hard, but there was a feeling of excitement and adventure which made it tolerable. Now those feelings have lessened, but I’ve got better at managing the seasonal extremes of temperature, potential for damp/mould, adapted my cooking methods and so on. Now it’s just normal life.

And that incudes work.

Owning Things

Although I enjoy the caravan, my decision to move into it came from a more general desire for a change in lifestyle.

I used to have a lot of possessions. Having to drag them around with me was a limit on my options in life. Any new flat or house had to big enough. Larger homes cost more. Moving vans have to be bigger. Things need looking after, they get dusty or broken. As they say, “your possessions end up owning you”. I wanted to stop owning so many things and to feel more adaptable.

Now that I live in a tiny space I can’t afford to hang on to things “just in case”, anything I decide to keep has to have earned its place. Storage space is precious.

Minimalism has become fashionable and there are some extremists who treat it like a cult, never the less it contains some ideas which I find appealing. I doubt anybody would call my current living space minimalist, but I have applied minimalist thinking to decisions about what to keep and what to sell/give/throw away.

I am a maker though. I paint, cook, repair stuff, tinker with electronics. So I need at least a basic set of tools and equipment. And my space is really small (about 6ft wide, 6ft tall, 13ft long). So my home will never be one of those white empty halls you see in the pictures of minimalist homes. My space still looks cluttered… but everything in here does belong and has purpose.

Most importantly for me, I’ve changed my level of attachment to things. I still appreciate well-made objects which perform their role well. But I know now that when I no longer have those specific objects, I will pick up new versions. Things I need, to do what I want to do, will come and go. My attachment to the specific items is less than it used to be.

Digital Transience

The modern world of software fits nicely with this mentality. I don’t need hard drives full of stuff. Anything important to me is in git repos (I prefer Codeberg), or is backed up on somebody else’s computer (ie the cloud).

If I lose all my possessions tomorrow, the day after tomorrow (presuming some of my brain is still functioning) I’ll be able to start picking up from where I left off, even if all I can afford is an old Android tablet and Bluetooth keyboard.

Work Considerations

Wed, 11 Oct 2023 10:33:55 +0000

I’ve had to adapt my working methods to fit with this current lifestyle, namely to solve problems related to the following key areas:

Tablet arms

Physical Working Space

Small! So I have a couple of tablet arms extending from a pole near the ceiling. They provide me with a nice healthy angle for my tablets while I’m working, then when I’m not working and don’t need them they can be pushed out of the way so I don’t hit my head on them.

I also have a little tray to hold my keyboard and trackball . It can go on my lap or on top of a small beanbag (meditation cushion) for a change in position.

Keyboard tray

Noise

Rain on the roof is loud! And I’m often on farms where animals and machinery make noises. This is easily solved for me by earbuds, and for anybody I might be talking to remotely a mic helps. I use an MPOW Bluetooth Receiver which has a built-in mic and a 3.5mm jack to plug my earbuds into.

Audio adapter

Thermal Comfort

It gets really hot in here in summer. As soon as the sun hits the metal walls I start to bake. For large parts of summer afternoons it’s 35C or above, it gets up to 45C at times if I use the oven in the afternoon! One pro tip is to not use the oven in the afternoon. I try to plan my summer cooking so that any oven usage happens as early in the morning or late in the evening as possible.

Eventually, clothing comes off. A fan also helps, I found some large 12V fans on Ali Express. One thing about solar power: if it’s hot enough to need a fan, there’s probably enough sun to power it.

And the winter she is cold. And damp. My first couple of years I had a badly-situated gas heater, and I hadn’t learned some of the basics, like:

Not to have too many soft absorbent furnishings, or excess clothing hanging around holding on to water and blocking airflow
Blinds, not curtains… curtains soak up condensation from the windows
The importance of ventilation (no matter how cold it might be, even igloos need airflow)
Wool! The sheep worked out a material for cold and damp a long time ago .
Heat, dur. I was too stingy with it in the early days, partly because it didn’t seem to have much effect due to all the fabric and useless clothing laying around. Regular heating of air and objects has to happen in the cold/wet months.

In those early days I often sat in ‘ideal refrigeration temperatures’ (2-5C). Honestly it was quite miserable at times — that feeling of adventure and hot drinks were all that kept me going.

Nowadays I’ve got a lovely wood burning stove, wool everything and better airflow. It’s cosy.

Power

I sustain myself with solar/photo-voltaic for as much of the year as possible, but have to ensure I have access to mains electricity during the darker winter months.

In summer I have ample power, and there’s plenty of potential to extend the portion of the year when I can be electrically self-sufficient with some improvements to my system.

Soon I need to upgrade to better panels. Mine are old so not at their top efficiency, plus there have been technological improvements since they were manufactured.

When it’s time to upgrade my battery I’ll move from lead acid over to LiFePO4. Compaared to lead, these have a much better weight:capacity ratio, deeper discharge (lead acid have to be kept above about 50% charge so you only really get to use half of their rated capacity) and can hold a charge for longer.

Connectivity

Mobile broadband is good and relatively cheap in the UK, I keep 3 different SIMS/networks available via:

A 3G/4G router (a GL.iNet GL-X750 (Spitz) running the open source router firmware OpenWRT)
My mobile phone as a hotspot
A pay-as-you-go SIM which I keep barely alive (by sending an SMS before it gets killed for inactivity) as a backup

Each of these connections is on a different network provider, so between them I have 3 of the big 4 UK network operators covered and there aren’t many places where I can’t get a decent connection.

Router

The Spitz router is my main internet connection, the other 2 SIMs are on relatively low data bundles but can be topped up within minutes if my main connection is struggling and I need internet urgently eg for work.

The router spec is here. It says that the maximum power draw is 6W. There’s an option in the settings to turn down the wifi power. Lower power means the signal doesn’t travel as far, but in this tiny space I can turn it right down to its minimum without noticing any problems. I measure it at about 2-3W.

I also turn off the LEDs. This saves a minimal amount of power but I don’t like them flickering at night when I’m in bed.

Antenna

To maximise signal I’ve tried a few different antennae and ended up with the Poynting XPOL-1 which can be mounted outside on a pole. It’s unidirectional, meaning it doesn’t need to be pointed towards the cell tower.

With the radio bandwidths at which mobile networks operate, cables are really important too. Poynting supplies good thick cables and I’ve trimmed them as longer cables deteriorate the signal. From what I’ve read:

Different cable specs have different signal loss
5ft of LMR100 cable (for example) is about a 2dB loss
3dB loss means the signal is 50% weaker
So a 15ft run of LMR100 cable means the signal goes down 6dB meaning you’re left with only 25% of the original signal

Time and Motion

A lot of modern life is about stability… we want to be at the same temperature all year round (so we can wear t-shirts in winter, for example). Buildings are about making a static environment. Nothing moves on its own. If you put something down somewhere (and live alone!) that thing will still be there in a day, a month, a year. We take this for granted but if you think about it, it’s a situation which wouldn’t often happen in nature. If you put something down in the forest, a creature or some weather will come along and move it soon enough.

My home wobbles when it’s windy. On dark stormy nights, when the paraffin lantern is gently swinging and throwing its light around dramatically, there’s no atmosphere like it. For maximum feeling add a Moby Dick audiobook.

Not to disparage the impressive achievements of technology but I like to feel the temperature extremes and to plan my day differently in summer vs winter. That’s one thing I love about living like this — I feel less insulated from the seasons, they have more meaning for me than they used to.

Solstices and Equinoxes

The length of the days and angle of sun in the sky throughout the year affect how many photons I can harvest for power.

I never expected to pay such close attention to equinoxes and solstices, those key points in the annual solar cycle. I feel a deeper understanding now of why they would have been so important to our ancestors, to the point that they were celebrated.

Not everybody knows what these things are, so just in case:

Around the 21st of December, the winter solstice is the shortest day of the year — after that the days start getting longer
Around the 21st of June, the summer solstice is the longest day, after which the days get shorter
The spring (20th of March) and autumn (22nd September) equinoxes are when the day and night are of equal length

All the above is ‘roughly correct’, the exact days and times vary depending on how far away you are from the equator and the year, and can drift by a calendar day or so.

I also notice the moon more than I used to. I have large windows on every wall, none of them more than a few feet away. I use thermal blackout blinds (they help in summer) but moonlight bleeds around their edges, so there’s always at least a vague awareness of how bright it is. I also have a skylight which is usually open when I’m in here, and in certain positions at certain times the moon shines right down through the opening, onto me as I sleep. I’m often woken in the middle of the night by a moonbeam.

dontdillydally (Web App)

Tue, 10 Oct 2023 13:17:52 +0100

dontdillydally helps you track time and money.

Aimed at the self-employed
Focused on simplicity and ease of use

As this is a web app you don’t need to install it, just go to dontdillydally.app to start using it immediately in your browser.

How to Use

Tap the bird at any time in the app to see the built-in guide

On the left-hand side of the app you will see icons which you can tap to change which section you’re on or perform other functions.

Tap below to expand each section and learn more about it:

Expand all

Worksheet

This is the page you’ll use the most, it’s where you enter your hours worked and any money coming in or going out.

A worksheet is made of entries. An entry is one of the following:

time spent on a specific job
money spent on something (expenses)
money coming in (income)

To add an entry, just tap on the date where you want to add it

Each entry can have a client and/or a job selected. If you do this you’ll then be able to get a report showing you how many hours you worked on that job/client, or how much money you made or spent.

You can also add Notes to an entry.

All data fields in an entry are optional, add as much or as little info as you like.

By default when you add a new entry it will be a time entry, and show a clock icon next to it.
If you tap the clock, the icon changes to a credit card and the entry becomes a money entry.
To enter an expense, set the value of a money entry to something negative eg -100.00 means you spent 100.

Worksheet: Time entry

Reports

Here you can get a clear view of everything entered into an entire worksheet, or narrow down on a specific job or client:

Choose a date range from within your worksheet
Choose a specfic client or job
Look at only money in/out (hide hours)
Look at only hours worked (hide money)

Then you’ll be able to see:

How much time you’ve spent
How much you’ve earned
A list of all worksheet entries matching your selection showing eg time, monetary values, notes

Reports: 'BendyStraw' job selection
Reports: 'BendyStraw' job results

Jobs and Clients

Jobs and Clients can be created and edited here, including:

A name for the job or client
Colours (foreground and background) used to represent the job or client in the app

Settings

The other icons perform actions immediately without changing the page:

Expand all

Minimise/maximise menu

Toggles whether the menu is minimised or maximised.


Minimised	Show only icons
Maximised	Show icons + text labels

WebDAV sync

This is an experimental feature to sync your data to a WebDAV server so you can keep several devices in sync.

It’s a work-in-progress and not really recommended for most users at this point.

Download data as file

Tap this to download all of your data and settings in a file. It will usually end up in your main Downloads folder.

Upload data file

If you have a file you previously downloaded you can bring that data back into the app with this button.

When importing the data you will be given the option to Merge or Overwrite your current data.

Email data to a preconfigured address

You need to set an email address in Settings for this option to work. Your device also needs to know what to do with mailto: links.

Wipe your data

Completely wipe all of your data and start fresh.

Data Storage

Automatically saved continually while you work The bird’s eye spins when changes are being saved, this is intentionally kept subtle but can be disabled in settings
Your data is stored inside your browser and stays on your device, it never travels over the internet (unless you decide to send it via email) and is not stored on any servers
Data uses a simple JSON format, it can be exported/imported as a file to move it between devices

BendyStraw (Android App)

Tue, 10 Oct 2023 13:17:20 +0100

If you don’t already know, NewPipe is a privacy-friendly, ad-free Android app for accessing YouTube. It’s a great piece of software and I use it all the time.

NewPipe works without an account. You can subscribe to channels, save playlists and do other useful things, but everything is saved locally on your device (and I love that it works like this).

I use NewPipe on several Android devices. Over time I’ve ended up with different playlists and subscriptions on each device, and sometimes I can’t be sure which device I need to use to find a certain song or video. To help with this I made BendyStraw.

Multiple databases in colour-coded tabs
Copy streams from one playlist to another
Selecting streams to delete, copy or move
Create new playlists

BendyStraw imports NewPipeData-*.zip files and lets you:

Open multiple zips at the same time, so you can combine data from several devices
Delete Copy Move Rename your custom playlists
Delete Copy Move streams from one playlist to another
Delete Copy Move channel subscriptions between databases
Delete Copy Move remote (bookmarked) playlists
Re-order playlists, sorting the streams by Title, Channel or Length (just tap the column headings in the tables)
Streams (audio/video) can be opened directly from BendyStraw, as the URLs are clickable
- If you set video links (in your Android settings) to open in NewPipe you can make a split-screen view and jump around your playlists
Export playlist as raw text, for example to be used with yt-dlp
Dark/light themes

After editing simply export a new zip file, then import it back into NewPipe.

Installation

F-Droid

Search for ‘bendystraw’ (all one word) in the F-Droid app, or find it at https://f-droid.org/en/packages/rocks.mm_dev.BendyStraw/.

Direct download

The apks are also directly available on the Codeberg releases page.

How to Use

Expand all

1. Export your database from NewPipe

In NewPipe tap Settings Backup and restore Export database
This will create a file on your device with a name like NewPipeData-2023-09-01.zip

2. Import it into BendyStraw

In BendyStraw, tap the button with the add/plus icon, and select the file you just exported

3. Edit with BendyStraw

Custom playlists have icons at the top which you can click to:

Delete the playlist
Copy the playlist to another zip (you need more than one zip added to do this)
Export the playlist as a plain text file, which for example can be used with yt-dlp

Tap on a playlist name to edit it, and tap outside (or press return on the keyboard) to finish.

4. Export from BendyStraw

In BendyStraw tap the export button (the arrow icon on the bottom-right of the screen)
This will create a new file named like the original but with -bendy-straw at the end, so NewPipeData.zip is saved as NewPipeData-bendy-straw.zip

5. Import it back into NewPipe

In NewPipe tap Settings Backup and restore Import database and select the file you just saved
After importing the database, NewPipe will ask if you also want to import settings, if you’re not sure what this means just tap ‘cancel’, your current NewPipe settings will remain unchanged

JSON Playlist Import

BendyStraw can import playlists from a JSON file. This is a new and basic feature which has some requirements and limitations.

Show the JSON Import Button

The button is hidden by default

Go to the preferences screen (hamburger menu in top-right corner)
Tick the ‘Show JSON Import Button’ box
Open at least 1 database
The button only shows when there is a database open, as it imports the JSON into the currently-opened database

Limitations

We assume that all playlist entries are YouTube streams.
Although NewPipe is able to handle streams from other services too, for now this import feature is just for YouTube

The JSON import format has been designed to prefer simplicity over richness of data. This comes with some pros and cons:

Several stream attributes (eg ‘uploader URL’, ‘duration’, ‘upload date’, ‘view count’, ’thumbnail’) are omitted initially
After import into NewPipe, before the playlist has been played, the above details (attributes) will be missing (so eg the thumbnail will just be a grey blank)
The first time each stream is started, NewPipe will grab the missing details for the stream and fill in the database

Requirements

JSON playlists will be imported into whichever database is currently open in BendyStraw.

The general (pseudocode) schema is:

{
  "PLAYLIST_NAME": [ARRAY_OF_STREAMS],
  "PLAYLIST_NAME": [ARRAY_OF_STREAMS],
  etc...
}

`PLAYLIST_NAME`

Is expected to be unique (if it isn’t, identically-named lists will be combined into 1 playlist)
If a playlist with exactly the same name already exists in the target database, entries from the JSON will be appended to that existing database

`ARRAY_OF_STREAMS`

Each stream must be an object with named properties as follows:

I use comments in this explanation but remember comments are not valid JSON — do not include comments in your JSON

{
  // These are required
  "stream_type": "VIDEO_STREAM", // or 'AUDIO_STREAM'
  "title": "Seasonal Affective Disorder",
  "url": "https://www.youtube.com/watch?v=3RJ5GftYT2c",
  "uploader": "Hidden Valley Bushcraft", // Uploader/channel name,

  // These below are optional. NewPipe will update them when the stream is loaded, so they only have meaning on first import before the playlist has been played.
  // It's probably better to omit them but they are allowed if you want to use them.
  "uploader_url": "https://www.youtube.com/channel/UCB7BPYlL4f5j5R1Y7HUgeVg", // Uploader/channel URL 
  "duration": "120", // Length of stream in seconds 
  "view_count": "1273621", // Number of times the stream has been viewed on YouTube --- simple number ie no commas, abbreviations etc 
}

Complete Example JSON

Below is some complete sample JSON. If this was imported into a database in BendyStraw it would do one of the following:

Create 2 new playlists (“Tech Things” and “Good Songs”)
Or (if playlists with those names already existed) then the streams would be appended to those existing playlists

{
  "Tech Things": [
    {
        "stream_type": "VIDEO_STREAM",
        "title": "Free software, free society: Richard Stallman at TEDxGeneva 2014",
        "url": "https://www.youtube.com/watch?v=Ag1AKIl_2GM",
        "uploader": "TEDx Talks",
        "uploader_url": "https://www.youtube.com/channel/UCsT0YIqwnpJCM-mx7-gSA4Q"
    },
    {
      "stream_type": "VIDEO_STREAM",
      "title": "Shenzhen: The Silicon Valley of Hardware (Full Documentary) | Future Cities",
      "url": "https://www.youtube.com/watch?v=SGJ5cZnoodY",
      "uploader": "Wired UK",
      "uploader_url": "https://www.youtube.com/@wireduk"
    }
  ],
  "Good Songs": [
    {
        "stream_type": "VIDEO_STREAM",
        "title": "Aztec Camera - Somewhere In My Heart (Official Music Video)",
        "url": "https://www.youtube.com/watch?v=2w1Q8ZkXZ1Q",
        "uploader": "RHINO",
        "uploader_url": "https://www.youtube.com/channel/UCWEtnEiVwUy7mwFeshyAWLA"
    },
    {
        "stream_type": "VIDEO_STREAM",
        "title": "Imagine Dragons - Thunder",
        "url": "https://www.youtube.com/watch?v=fKopy74weus",
        "uploader": "ImagineDragonsVEVO",
        "uploader_url": "https://www.youtube.com/channel/UCpx_k19S2vUutWUUM9qmXEg"
    },
    {
        "stream_type": "VIDEO_STREAM",
        "title": "𝑰𝒕'𝒔 𝑨 𝑯𝒆𝒂𝒓𝒕𝒂𝒄𝒉𝒆 -Bonnie Tyler (Cover by Yhuan) #gutomversion #hitback #goodvibestambayan #yhuan",
        "url": "https://www.youtube.com/watch?v=AQCm7VWyg-U",
        "uploader": "Yhuan Official",
        "uploader_url": "https://www.youtube.com/channel/UCDxVjSFhfiPGispcK9o0qzw"
    }
  ]
}

FAQ

Expand all

What’s in the `zip` files?

NewPipe exports a zip file, containing 2 files:

newpipe.db: A database which has all the info BendyStraw uses, such as your playlists and channel subscriptions, plus other things like your watch history
newpipe.settings: Your NewPipe settings and preferences

For simplicity BendyStraw sometimes refers to the zip file as the database, because that’s the file NewPipe works with for imports/exports.

Is my data private?

Yes! This is important to me as a developer. BendyStraw only works with the tables in the database which it requires to let you do your editing. It doesn’t look into other things like your settings or watch history and it doesn’t send your data to any servers or share it with anybody. There’s no tracking and no adverts or anything like that.

What happens to my NewPipe settings?

BendyStraw doesn’t look inside them or change them.

If you edit zips from multiple devices, or old/archived zips, be aware that your new zip will have the settings from whichever original file you opened. So be careful not to overwrite settings with an old version.
When you import your new zip into NewPipe the simplest thing to do is just tap ‘cancel’ when it asks if you want to also import settings.

I’ve opened multiple databases but don’t see enough tabs

The tabs can scroll off the edge of the screen, swipe left/right on the tab bar to see any tabs which have overflowed.

You can also swipe left or right on any blank area to switch tabs.

How do I use an exported text playlist?

If you have yt-dlp installed, you can batch download all of the files from the playlist like so:

In BendyStraw locate the playlist and tap the ’export’ button
Check the dialog to see where the text file will be saved
In your terminal run yt-dlp --batch-file [path_to_text_file.txt]

For more info check out the yt-dlp github.

Can I export an M3U playlist?

I originally did build this functionality, only to find that links to eg YouTube streams no longer work in m3u playlists. This is true for the players I tested and to the best of my knowledge.

If I’m wrong about this, you have some other relevant info, or would like to see some other export format, please let me know.*

I’d be happy to revisit this if it’s useful.

hello@mm-dev.rocks

Why do I need to grant ‘all files access’ permission in Android 13?

BendyStraw needs to work with files from a different app (NewPipe). The way permissions have changed in Android 13 makes this complicated, as document files (ie non-media files such as .zip) can only be read from and written to the directory belonging to the app that created them. The only simple way to keep the app easy to use is to ask for these permissions.

BendyStraw has no interest in doing anything unexpected to your filesystem. The code is open source, so any developer can check to make sure that it only does what it says it does.

Holistik: Activity Overview (Garmin Watch App)

Tue, 10 Oct 2023 13:17:08 +0100

Garmin watches (such as the Fenix 5 Plus which I have) gather a lot of info about your exercise activity, but to see it you need to log in to your Connect IQ account in their app or a browser, using a separate device such as a phone or laptop.

One of the things I like most about this watch is that despite the usual ecosystem tie-ins, you can do most things with it offline, even including GPS navigation as it stores its own offline maps and has a GPS device built-in (unlike lots of other devices that depend on beign BlueTooth-linked to your phone for GPS features). The only sore point for me is the lack of a visual overview of activities, without logging in to Connect IQ.

This app is my solution. Get a birds-eye view at different zoom levels (days, weeks or months at a time) - great when your device is offline and you want to check your activity levels at a glance!

Days
Weeks
Months

How to Use

Day Colours

Days (squares) are coloured according to how many activities you recorded that day, plus time spent or distance covered:

Activity level	Warm themes	Cool themes
Some	Yellow	Light Green
Moderate	Red	Mid Green
High	Dark Red	Dark Green

Some other days are coloured to help you see what’s what. Where the year or month is written in text, the same colours will also be used.

Day type	Warm, Dark theme	Cool, Dark theme	Warm, Light theme	Cool, Light theme
No activities recorded	Light Grey	Light Grey	Light Grey	Light Grey
Weekends	Dark Grey	Dark Grey	Dark Grey	Dark Grey
First of the month	Dark Blue	Orange	Navy	Brown
First day of the year	Purple	Yellow	Brown	Dark Red

Watch Button Functions


Start	Change view (Days/Weeks/Months)
Up	Previous day/week/month
Down	Next day/week/month
Menu press + hold Up	Show Settings screen

Views


Days	Details of individual activities for the selected day eg “5:30am Train 32mins”
	View: Days, Theme: Warm View: Days, Theme: Cool


Weeks	Shows combined activity totals for the selected week eg “Train 3hrs”, “Walk 7hrs 21 miles”
	View: Weeks, Theme: Warm View: Weeks, Theme: Cool


Months	Shows combined totals just like the weeks view Depending on device performance and number of recorded activities, it can take a second or so to jump from month to month. Buttons remain active during this time (eg if you’re on December and you press UP 6 times you’ll still land on June, it might just take a moment to catch up).
	View: Months, Theme: Warm View: Months, Theme: Cool

Hints and Tips

Expand all

To maximise usage of space on round screens, days flow in a ‘snaking’ pattern

Past > Future Days

…like an airport queue.

Earlier days are to the left, later to the right.

The day you select in Days View affects how the weeks/months are centred in the other views

In Days View if you select a Wednesday, then Weeks View will be centred around Wednesdays
In Days View if you select the 17th, then Months View will be centred around the 17th of each month

Holistik only uses activities which have been recorded/stored on your watch

— so not heart rate, steps etc.

Holistik runs entirely offline

…using activity data which is already stored on your watch.

It does not store or send your information anywhere.

Settings

Press and hold Menu while the app is running to change settings:


Theme	Light, Warm	Dark, Warm	Light, Cool	Dark, Cool
Font	Small	Medium	Large
Date Format	dd/mm	mm/dd
Difficulty [1]	Basic	Intermediate	Advanced
Duration Display [2]	Basic	Intermediate	Advanced
Duration Display	Hours and Fractions	Minutes
Initial View [3]	Basic	Intermediate	Advanced
Duration Display	Months	Weeks	Days
Text Display [4]	Basic	Intermediate	Advanced
Duration Display	Show Dates	Show Activity Details


[1] Difficulty	Change according to your fitness level and the calculations will adjust so the coloured days make sense for you
[2] Duration Display	Activity durations can be shown in minutes (‘73mins’) or to the nearest fraction of an hour (‘1 1/4hrs’)
[3] Initial View	View to display when first opening the app
[4] Text Display	If ‘Show Dates’ is disabled dates will still be shown temporarily while you move backwards and forwards, then disappear after a second or two

App Permissions


User Profile	Allows the app to read the activity data before displaying it
Persisted Content	Allows the app to store/read your settings detailed above

Mon, 01 Jan 0001 00:00:00 +0000

Download .

Mon, 01 Jan 0001 00:00:00 +0000

Download .

Mon, 01 Jan 0001 00:00:00 +0000

Download .

auDav Audiobook Player

Mon, 01 Jan 0001 00:00:00 +0000

auDav is an audiobook player app. It’s for use with libraries of audiobooks stored on NextCloud (or other WebDAV storage), and runs on Android, iOS/iPadOS, Windows, Linux and macOS.

Key features:

Visual listening progress each chapter of a book is represented as a block, painted in different colours to indicate played/unplayed segments
Full-featured custom bookmarks you can add notes to a bookmark and notes can be searched
No server install the app is installed on whichever device/devices you want to listen on, you enter details for your NextCloud server (login info and path to the folder where your books are stored) and the app does the rest
Clean footprint auDav only does what it needs to do, data such as listening progress is tied to your NextCloud user, to create different accounts you do that on NextCloud
Loads of themes multiple colours in light, dark and OLED black varieties

Entering a bookmark and note
Library page with theme chooser open
Playing book with visual chapter progress

This app is 95% finished but temporarily on hold while I attend to some other priorities… COMING SOON!

High Peak Dog Walks Website

Mon, 01 Jan 0001 00:00:00 +0000

A nice, simple brochure site for a dog-walking business. It’s built with Hugo (the static site generator) and is relatively straightforward but I did develop a few useful working patterns for the future during its development.

Hugo tips COMING SOON!

Home page
Services and pricing
Contact

Jumble Art Portfolio

Mon, 01 Jan 0001 00:00:00 +0000

Jumble is all of my art, all piled up on the metaphorical scrapheap where the modern world seems to have put art :)

Just messing, this was actually a fun project where I got to learn a lot of 3D stuff that was new to me, and build some familiarity with Three.js (which is really nice). I also dipped my toe in to WASM modules for the first time and worked with Rapier physics engine.

Full write-up COMING SOON!

Paintings falling into pile
Zoomed-out pile
Pile close-up

Let's build something!

Mon, 01 Jan 0001 00:00:00 +0000

Showreel Videos

Mon, 01 Jan 0001 00:00:00 +0000

Showreels featuring a mix of client work and my own open source projects. Some old, some new.

Each video is less than 2 minutes long and they were all made with DaVinci Resolve.

Download Apps showreel 1m59s. Apps showreel 1m59s (video)
Download Games showreel 1m59s. Games showreel 1m59s (video)
Download Brain training apps (Client: Zing) 1m06s. Brain training apps (Client: Zing) 1m06s (video)

Software Development by mm-dev on mm-dev

Proper Dotted Borders

9-Slice Scaling

CSS border-image

SASS can Change the Fill Colour of an SVG

String replacement

Getting the coloured image

Getting our sliced image border

Allowing for optional border sides

Hugo Component Pattern

Create data file: /data/testimonials.toml

Create partial: /layouts/partials/testimonials.html

Create shortcode: /layouts/shortcodes/testimonials

Usage

End Results and Bonus

Good

Bad

Bonus: E-ink Macbook

Running Headless: What I've Learned

The lid

Power button

From dead (no/low power)

Remote Access

Remote builds over SSH

Full remote graphical access with NoMachine

Magnets

Factory Reset

Recovery mode when you only have an external monitor

Is This Thing On?

Things I’ve tried

My current-best solution

Removing the Display

Keeping the lid

It's from eBay. Does it Even Work?

Monitors and cables

Power button

M1 Macbook Air

‘BUY IT NOW’

8GB RAM? Rose Pink?

Which Mac Should I Get?

It has a fan

Power delivery

Intro

Virtualisation

Codemagic

So…

Set up Vim for Flutter

Dart

Language Servers

Install the coc.nvim plugin in Vim

Install a Flutter LSP

coc.nvim settings

"diagnostic.checkCurrentLine": true,

"diagnostic.enableMessage": "jump",

"colors.enable": true,

"suggest.noselect": true,

"inlayHint": false,

Install Flutter

Follow instructions from https://docs.flutter.dev/get-started/install/linux/android

Agree to more licenses and get Flutter doctor to pass

Sample project

Install the Android SDK

Pick a directory where you’ll keep the SDK

Install the SDK Manager

Add some environment variables to ~/.profile

Accept SDK licences

Install the Android toolchain

Dependencies and Environment

General Dependencies

Git

Ensure Java JDK is installed and recent enough

Stuff Flutter Needs

If using Chromium browser instead of Chrome

Parts of the SDK

Command Line Tools

Platform Tools

Platforms

Build Tools

Intro

I'm Not a Perfectionist

CSS `border-image`

Create data file: `/data/testimonials.toml`

Create partial: `/layouts/partials/testimonials.html`

Create shortcode: `/layouts/shortcodes/testimonials`

Install the `coc.nvim` plugin in Vim

`coc.nvim` settings

`"diagnostic.checkCurrentLine": true,`

`"diagnostic.enableMessage": "jump",`

`"colors.enable": true,`

`"suggest.noselect": true,`

`"inlayHint": false,`

Add some environment variables to `~/.profile`

The `fdroiddata` repo

Getting your app’s metadata into the `fdroiddata` repo

The `fdroidserver` repo