Christian Fei's Blog - cri.dev

How to fix hanging tests in Node.js

2025-08-20T00:00:00Z

Some context: you might want to test your node.js application in an integration test and your code might have a setInterval call to repeatedly perform an action.

In this case I found that my tests would hang and timeout after some time.

The solution in my case was to include the following line in my test suite (note: I’m using node:test built-in testing library):

import { test, describe, mock } from 'node:test'

mock.timers.enable({ apis: ['setInterval'] })

This will ensure that your setInterval calls are properly mocked during the test, preventing them from interfering with your tests.

You could alternatively, as described in the docs, just use mock.timers.enable() without any arguments.

How to use an iPad Pro as an external display

2025-08-15T00:00:00Z

TLDR;

Get an USB-C HDMI capture card
Install Orion on your iPad Pro and open it
Connect the HDMI cable from the capture card to the HDMI port on your device
If you’re using a Mac, start mirroring to use iPad’s native resolution

Introduction

A few years ago, I bought an iPad Pro M1 and started using it as my “PC”. It suited me well over the years, but I felt the need of a real PC experience…

So I recently got hold of a Mac Mini M4 and since I use it sometimes while traveling, I needed a way to connect my iPad Pro as an external display.

As most of the times, Apple likes to make things complicated, and you need to find half-assed workarounds to get something working.

Using your iPad as your Mac Mini main display is one of them.

What you’ll need

Just a cheap USB-C HDMI capture card. Any will do the job.

Download “Orion” on your iPad and start it up.

Now connect the HDMI cable from the capture card to your Mac Mini or other device.

You should see your Mac’s screen on your iPad, although with black bands on the top and bottom of the screen.

So annoying.

Mirroring to the rescue

To fix the black bands issue and use your iPad’s native resolution, I found a trick.

Just start mirroring the screen from your Mac to your iPad.

Go to System Preferences > Display.

You’ll need to select the menu option “Mirror or extend to” and choose your iPad.

The under your iPad screen, you should see the option “Use as” and select “Mirror for iPad”.

Now you can use the full screen real estate of your iPad.

You still need to have the HDMI capture card connected, though.

As always, Apple makes things complicated, but once you figure out the workarounds, it’s a piece of cake (until the next breaking update)

Update: UX

Trigger via keyboard shortcut

After some time it gets old to enter the settings and adjust the screen each time you want to mirror.

An alternative, found through various YouTube videos, is to create a dedicated keyboard shortcut to essentially run the AppleScript "Move to [name of iPad]".

Go to System settings.

Scroll down and at the bottom you’ll find the Keyboard settings.

Click on Keyboard Shortcuts....

At the bottom of the list you’ll find App Shortcuts.

There create your keyboard shortcut with custom keybinding, by clicking on the + icon.

There set the Menu title to Move to [name of ipad], make sure to change “name of ipad” to yours. And the keyboard shortcut to trigger it.

Now after connecting the HDMI capture card to your iPad and Mac Mini, you can press your custom keybinding (to me it works best if I open a new Finder window) to trigger the screen mirroring.

Trick to get screen mirroring after sleep

If your Mac Mini goes to sleep, if you unlock your iPad, you’ll likely get back to the screen resolution with black bands at the top and bottom of your iPad’s screen.

There a trick I found is to simply unlock your iPad first, then resume your Mac Mini from sleep, and you’ll get screen mirroring at full screen without triggering the shortcut.

Implementing HTTP range requests in Node.js

2025-06-18T00:00:00Z

Ever paused a download, to later resume it? Or played back a video from a specific point, without downloading the whole video?

You already used HTTP range requests without even realizing it.

Recently had the chance to use them in a personal project, my-yt, and I learned a ton, so here we go.

In a nutshell

In simple terms: HTTP range requests allow clients to ask for only a portion of the resource, given a start and end byte marker.

How? Using the HTTP Range header.

E.g. Range: bytes=0-2048 means “give me bytes from 0 to 2048”. You can also request multiple ranges and a resource given only a starting range.

The server then send back the requested resource portion. It does that using the Content-Range HTTP header to inform the client.

There is also the Accept-Ranges used by the server to tell the client that range requests are supported.

And have you ever heard about the HTTP status code 206? It’s the one used when a server sends back a portion of the resource, like in this case.

(BTW, there is waaaaay more stuff to get into when talking about this, so here I am only scratching the surface)

Show me some code

A basic example (to see the full code, check out my-yt)

The client (e.g. a video player in your HTML) requests the first X bytes of a video file.

The server then send back the requested resource portion. As mentioned above, some HTTP headers actions comes into play here.

E.g.

The HTTP function handler responsible for replying with the correct chunk of the video:

function watchVideoHandler (req, res) {
  const location = `./your/video.mp4`
  const contentType = 'video/mp4'
  if (!fs.existsSync(location)) {
    res.writeHead(404, { 'Content-Type': 'text/plain' })
    res.end('Video not found')
    return
  }
  res.setHeader('content-type', contentType)

Parse the requested HTTP range

  const options = {}

  let start
  let end

  const range = req.headers.range
  if (range) {
    const bytesPrefix = 'bytes='
    if (range.startsWith(bytesPrefix)) {
      const bytesRange = range.substring(bytesPrefix.length)
      const parts = bytesRange.split('-')
      if (parts.length === 2) {
        const rangeStart = parts[0] && parts[0].trim()
        if (rangeStart && rangeStart.length > 0) {
          options.start = start = parseInt(rangeStart)
        }
        const rangeEnd = parts[1] && parts[1].trim()
        if (rangeEnd && rangeEnd.length > 0) {
          options.end = end = parseInt(rangeEnd)
        }
      }
    }
  }

Determine the file size and return it if its a HEAD request

  const stat = fs.statSync(location)

  const contentLength = stat.size

  if (req.method === 'HEAD') {
    res.statusCode = 200
    res.setHeader('accept-ranges', 'bytes')
    res.setHeader('content-length', contentLength)
    return res.end()
  }

Calculate the bytes that are being sent back to the client

  let retrievedLength = contentLength
  if (start !== undefined && end !== undefined) {
    retrievedLength = end - start + 1
  } else if (start !== undefined) {
    retrievedLength = contentLength - start
  }

  res.statusCode = (start !== undefined || end !== undefined) ? 206 : 200

  res.setHeader('content-length', retrievedLength)

  if (range !== undefined) {
    res.setHeader('accept-ranges', 'bytes')
    res.setHeader('content-range', `bytes ${start || 0}-${end || (contentLength - 1)}/${contentLength}`)
  }

Pipe the file stream to the response

  const fileStream = fs.createReadStream(location, options)
  fileStream.on('error', error => {
    console.error(`Error reading file ${location}.`, error)

    res.writeHead(500)
    res.end()
  })

  fileStream.pipe(res)
}

Crazy CSS experiments

2024-12-19T00:00:00Z

The following Codepen’s are quite old (mostly done in 2012/2013 when I was super into CSS and getting started with programming), but are super cool.

They showcase some of my early experiments with CSS3 animations, transformations, and visualizations.

See the Pen CSS Gyroscope by Christian Fei (@christian-fei) on CodePen.

See the Pen animation-timing-function visualized with an oscilloscope by Christian Fei (@christian-fei) on CodePen.

See the Pen CSS cube by Christian Fei (@christian-fei) on CodePen.

See the Pen Minimal loader by Christian Fei (@christian-fei) on CodePen.

See the Pen I have no idea what to call this by Christian Fei (@christian-fei) on CodePen.

See the Pen Transform-rotation-multi-something by Christian Fei (@christian-fei) on CodePen.

See the Pen Jiggly cube HAML + SCSS by Christian Fei (@christian-fei) on CodePen.

See the Pen Flag by Christian Fei (@christian-fei) on CodePen.

See the Pen Perspective by Christian Fei (@christian-fei) on CodePen.

Exclude specific tags in Eleventy using a custom filter

2024-09-21T00:00:00Z

Let’s say you have an eleventy blog, and want to show the tags related to a given blog post.

E.g. this post is tagged with eleventy as you can see above.

But, it has also other tags attached, e.g. post and featured for example, that are mainly used for creating the posts and featured collections.

The HTML/nunjucks code for showing the taglist on this very site is the following:


<div class="taglist">
  Tagged with 
  {% for tag in tags | exclude("post") | exclude("featured") | limit(3) %}
    <a aria-hidden href="/tags/{{ tag }}/" data-track="click-post-tag">{{ tag }}<sup>{{collections.tagList | findTagCount(tag)}}</sup></a>
  {% endfor %}
</div>

There are a few things going on here:

the post exposes its tags property, that’s straightforward
the filter exclude comes up twice, it’s chainable
the filter limit does exactly what you think
the link to the specific tag is /tags/, so there is a dedicated page for each tag
the collection tagList comes into play, together with the filter findTagCount

Let’s break it down and go into each step and needed code

The `exclude` filter

You can simply add the next few filters and collections to your eleventy config file.

The exclude filter takes an array (namely the tags array as a list of tags/string) and excludes the first parameter passed to the filter

eleventyConfig.addFilter("exclude", (arr, exclude) => arr.filter(el => el !== exclude))

The `limit` filter

Nothing fancy, limits a given array to a specified number of items:

eleventyConfig.addFilter("limit", (arr, limit) => arr.slice(0, limit))

The `tagList` collection and `findTagCount` filter

The tagList collection goes over all blog posts, reduces them to an array of objects in the form {tag, count}:

eleventyConfig.addCollection("tagList", collections => {
  const tags = collections
    .getAll()
    .reduce((tags, item) => tags.concat(item.data.tags), [])
    .filter(tag => !!tag && !["post", "featured", "popular", "opinion", "all"].includes(tag))
    .sort()
  return Array.from(new Set(tags)).map(tag => ({
    tag,
    count: collections.getFilteredByTag(tag).length,
  }))
})

The findTagCount filter takes the above tagList and finds the number of occurrencies across all blog posts:

eleventyConfig.addFilter("findTagCount", (tagList, findTag) => tagList.find(({tag}) => tag === findTag)?.count)

Start Kindle script on system boot with init.d

2024-09-15T00:00:00Z

To manage your custom Kindle scripts I found the following trick super useful.

Let’s say you have a script that shows the time on your Kindle e-ink display, under /bin/custom-clock

Place your script configuration under /etc/init/<your-script>.conf (e.g. /etc/init/custom-clock.conf) with the following content:

start on started lab126_gui
stop on stopping lab126_gui

pre-start script
  # important test to verify your script exists, else it could impact the boot of the kindle
  test -x /bin/custom-clock || { stop; exit 1; }
end script

exec /bin/custom-clock

After a reboot, you’ll be able to manage your service (if needed) using the following commands:

stop custom-clock
start custom-clock

Converting my Kindle to a digital photo frame

2024-09-15T00:00:00Z

Recently I converted my old Kindle Paperwhite 3 (jailbroken) to a Tapo surveillance cam viewer.

It was fun, but I recently had the idea to make a better use for it.

Namely making an image carousel showing nice pics I took over the years.

–

Project overview

The idea is quite simple:

create an init.d conf to start the script at boot
prepare the images for the Kindle I want to show
finally write the script that cycles through the images indefinitely and prints them on the Kindle e-ink screen using eips

`init.d` conf and carousel script

Create a file under /etc/init/image-carousel.conf with the following content:

start on started lab126_gui
stop on stopping lab126_gui
pre-start script
  test -x /mnt/us/image-carousel.sh || { stop; exit 1; }
end script
exec /mnt/us/image-carousel.sh

Next, you’ll need to create an executable script under /mnt/us/image-carousel.sh

#!/bin/sh

# prevent the screen from going to sleep and showing the screensaver
lipc-set-prop -i com.lab126.powerd preventScreenSaver 1

while true; do
  for image in /mnt/us/images/prepared/*.png; do
    echo "$image"
    if [[ -f "$image" ]]; then
      eips -c -f -g "$image"
    fi
    sleep 30
  done
done

Make it executable with chmod +x /mnt/us/image-carousel.sh

Prepare the images

If you want, you can prepare the images on your PC using ImageMagick, but I’m going to do that on the Kindle using ffmpeg

Create two folders

/mnt/us/images
/mnt/us/images/prepared

Here is a little helper script to convert the images on the Kindle, place it under /mnt/us/images/prepare.sh and make it executable

#!/bin/sh

for image in /mnt/us/images/*.png; do
  echo "preparing $image"
  if [[ -f "$image" ]]; then
    echo " -> /mnt/us/images/prepared/$(basename $image)"
    ffmpeg -y -i "$image" -f image2 \
    -pix_fmt gray \
    -vf "scale=1448:1072,transpose=1" \
    -vframes 1 \
    "/mnt/us/images/prepared/$(basename $image)"
  fi
done

This will place the prepared images in /mnt/us/images/prepared/ (the folder the image-carousel script uses)

–

Now, reboot your Kindle and when the boot process finished your images will cycle and change every 30s.

Display jailbroken Kindle info using lipc-get-prop

2024-09-14T00:00:00Z

On my jailbroken Kindle I wanted to display information about it (e.g. its IP address, battery level etc.)

There is a command on the Kindle, namely lipc-get-prop that you can use to gather information about your device, e.g.:

lipc-get-prop -i com.lab126.powerd battLevel

Additionally, to find the information you’re looking for, you can leverage lipc-probe like so

lipc-probe -a | grep -C 20 -e batt

This way you can discover what keys seem interesting for your use case.

Furthermore, you can use the built-in command to interact with the e-ink display named eips

More information about lipc

How to install Epic Games store on iPad with iOS 18

2024-10-12T00:00:00Z

If you navigate to store.epicgames.com on an iPad with iOS 18 beta you’ll have the ability to scan a QR code on your iPhone to download Epic’s app store.

But you don’t want that! You want to install it on your iPad to play Fortnite, Fall Guys and Rocket League!

There is an easy way around it.

–

update 2024-10-12

The procedure to install the store on iPad should work out of the box now

–

Go to store.epicgames.com on your iPad.

Select the options menu in the location bar.

Click on the three dots menu.

Select “Request Mobile Website”.

Done. Now you can install it using Apple’s convoluted procedure to install an alternative App Store and download its apps as if you were on your iPhone.

Displaying RTSP stream on a jailbroken Kindle Paperwhite

2024-09-13T00:00:00Z

As crazy/stupid as it sounds, I did it.

Managed to show the local RTSP stream from a Tapo surveillance camera on a rooted / jailbroken Kindle Paperwhite, without servers, just ffmpeg and eips

–

The idea

eips is a custom e-ink support program for kindles

Find more info here

Fortunately on a Kindle (rooted) there is also a build of the ffmpeg lib, which will come in very handy.

The idea of the script that is running on the Kindle (no servers! “serverless” in the real sense) is the following:

I want to use the RTSP stream of my Tapo camera and grab a snapshot (1 frame of the stream)

Since I don’t have ImageMagick installed (and can’t compile it from source) on my Kindle, I’ll need to do everything with one ffmpeg command.

eips will come into play to render the image every few seconds.

This is going to be great-scale (alright, sorry for the pun)

–

Proof of Kindle

The script

#/bin/sh

while true; do
  ffmpeg -y -rtsp_transport tcp \
    -i "rtsp://<username>:<password>@<tapocamip>:554/stream1" \
    -f image2 \
    -pix_fmt gray \
    -vf "scale=1920:-1,transpose=1" \
    -vframes 1 \
    output.png
  eips -cfg output.png
  sleep 5
done

FFmpeg

To break down the ffmpeg command:

-y to overwrite the output.png file at every run
-rtsp_transport tcp because I was getting dropped chunks during the transport with UDP on my spotty network
-i "rtsp://..." well that’s the source where I am getting the rstp stream duh
-f image2 tells ffmpeg to store a sequence of individual image frames as separate files (in conjuction with -vframes 1)
-pix_fmt gray because Kindles work best with 8-bit grayscale PNGs
-vf "scale=1920:-1,transpose=1" to scale the image maintaining the aspect ratio and rotate it 90deg clockwise, so it fills the whole screen of the Kindle

eips

The eips -cfg does the following:

-c clears the screen before updating it
-f perform a full screen update
-g to tell it it’s a PNG file

Prevent Kindle going to sleep

Borrowed from this repo

Prepend this to the script:

lipc-set-prop -i com.lab126.powerd preventScreenSaver 1
stop powerd

More info about lipc-set-prop

or use the KUAL Helper extension to prevent the screensaver manually.

Installation

You could spin this up in a cron, or through init.d

Or by using a generic cron that runs every minute an make a different script without the while loop, e.g.

* * * * * /mnt/us/cam-once.sh

To do that, first make your filesystem writable

mntroot rw

Then edit the crontab

vi /etc/crontab/root

No ImageMagick? No problem, use FFmpeg!

2024-09-13T00:00:00Z

Ok this is clickbait, but hear me out.

The alternative to imagemagick for simple scaling, rotation and image conversion actually works.

And I’ll explain why I didn’t/couldn’t go with ImageMagick (on my Kindle), which would be my go-to tool.

–

I rooted my Kindle.

The shell is very limited.

The Kindle runs on

Linux kindle 3.0.35-lab126 #8 PREEMPT Fri Sep 13 12:49:59 UTC 2024 armv7l GNU/Linux

I don’t have a package manager, I could install Alpine on it and get apk but couldn’t get it to work after enough fiddling, and I actually didn’t need it turns out.

I wanted to display an image from my Tapo camera, but it doesn’t have a snapshot endpoint, only an RTSP stream.

So here comes FFmpeg to the rescue.

Here is the command I needed to get the image from the stream, and more importantly resize it, convert to gray-scale 8-bit PNG and rotate it:

ffmpeg -i "rtsp://<username>:<password>@<ip>:554/stream1"
-f image2 # stores sequence of individual image frames as separate files
-pix_fmt gray # convert to grayscale, 8bit PNG
-vf "scale=1920:-1,transpose=1" # scale it, maintain aspect ratio, and rotate by 90degrees clockwise
-vframes 1 # I just need 1 frame
output.png

I hear you shouting at the screen “BUT I DON’T HAVE A STREAM, I JUST HAVE AN IMAGE!”

Simply replace the stream url with your local image.

Here is a link to the FFmpeg docs about its filters

Display IP address on a jailbroken Kindle using eips

2024-09-11T00:00:00Z

Wanna get started fiddling around with your freshly jailbroken Kindle?

Below I’ll show you a script to display the IP address using eips on your Kindle e-ink screen.

–

The idea is simple:

run a cron every minute
get the Kindle’s current IP address
display it on the top-left corner using eips

Make the filesystem writable

This will give you the ability to write files on the Kindle (you just need this once)

mntroot rw

The script

Place the script under /bin/print-ip-info (or where you want actually)

#!/bin/sh

IP=$(ifconfig wlan0 | grep "inet addr:" | cut -d: -f2 | awk '{ print $1 }')
eips -h "$IP $(date)"

This will parse through ifconfig and grep/cut/awk through all the fluff of the output.

Yes, I’m sure there is a better way, but who cares?

Install the cron

Edit /etc/crontab/root and insert the following

* * * * * /bin/print-ip-info

Rooted / Jailbroke my Kindle Paperwhite

2024-08-28T00:00:00Z

Found a way to make good use of my older Kindle Paperwhite 3 thanks to the Jailbreak “LanguageBreak”

You need to be at version 5.16.2.1.1 or else you’re effed.

Here is the official guide

Wanted to make this post because I tried several days to jailbreak it without success.

One day, I noticed the collapsable section at the end of the original post that said, “Can’t get it to work?”

Downloaded the original file corresponding to my Kindle type and version and it just worked after that!

It was definitely a rollercoaster, had lots of fun learning about and reading through the Mobileread community.

It was cool to find out about “Demo mode” that is used by retail to show the Kindle functionality and screen resolution using a carousel of stock images.

What a mess that forum is, holy kindle

How to add a TP-link Tapo camera to homeassistant

2024-08-03T00:00:00Z

After struggling to add my tp-link tapo devices (specifically cameras) to my homeassistant instance, found a way to get everything working properly.

Everyone gets a static IP

First of all, I suggest you assign your cameras a static IP.

If you struggle to find your camera’s IP in your router settings, check out the MAC address of your camera (you’ll find it on the bottom side) and assign that a static IP.

This will save you several headaches and your future self will thank you.

create camera credentials in tp-link app

At this link you can find all the info to set up a camera account that you’ll use to access your cameras outside of the tp-link app

https://www.tp-link.com/en/support/faq/2790/

ffmpeg dry-run

Once you have your camera’s IP and access credentials, you can try things out in the terminal.

You’ll need ffmpeg installed.

ffmpeg -i "rtsp://<USERNAME>:<PASSWORD>@<IP>:554/stream1" -f image2 -vframes 1 -pix_fmt yuvj420p output.jpg

If the image is created, things are looking good.

Homeassistant setup

In the “Integrations” page, just add a new integration named “Generic Camera”.

When adding a new camera, these are the settings I used:

“Stream source URL”: rtsp://YOUR_IP:554/stream1

“RTSP transport protocol”: UDP

“Authentication”: Basic, and provide username and password in the dedicated fields.

Disable “Verify SSL certificate”

PETG I love you, but you're bringing me down

2024-07-11T00:00:00Z

I really do like 3d-printing stuff, but lately I had some trouble with PETG.

My main problems were stringing on the first layer and the damned PETG blobs that impacted print quality and ultimate the end result.

After a few days of trying to get PETG to print like it should, these are my findings for a better overall printing experience.

If you’re experiencing stringing, first of all my heartfelt condolences.

Lower the nozzle temperature (e.g. from 240°C to 230°C) and experiment with lowering the print speed.

This should help layer adhesion and reduce stringing.

If you feel so inclined you can try to apply some gluestick and thoroughly clean your bed.

Using a brim as layer adhesion helps a lot for me.

PETG leaves a mess on my nozzle, due to all the small filament strings getting caught in it and fusing together to a single blob on the nozzle. Cleaning the nozzle because of this is a must.

Additionally, if you can, try to baby-sit your print on the first layer.

I found that decreasing the retraction speed and z-hop helps.

Another thing is to maintain a greater distance between the nozzle and the bed, since PETG tends to ooze and harden slower.

Google domains / Squarespace transfer (using Porkbun and Cloudflare)

2024-07-07T00:00:00Z

Squarespace acquired Google Domains this year…

This is yet another reminder that Google services are ephemeral.

If you want to move away from Squarespace, and you’re using Cloudflare’s nameservers, this is the guide for you.

–

Consider this process might take a few days, so first of all: calm down, and most importantly prepare your wallet.
Because it’s going to cost you the renewal fee of your domain to transfer it away from Squarespace…

There’s actually only a few steps needed to get everything working properly.

First, login to Squarespace and select the domain you want to transfer.

Unlock it, by disabling the switch under “Domain lock”.

Click “Request a transfer code”, wait up to 24h to receive the transfer authorization code.

Once you received your authorization code, you can login to porkbun and open the “Transfer” domain page.

There you’ll see a form with the domain name you want to transfer and authorization code, enter both and submit.

Transfers can take about five days to complete, so go do your thing meanwhile.

I started the process on July 2nd and received a confirmation email from both squarespace and porkbun on July 7th.

The nice thing about having a third party DNS provider is that your nameserver settings are automatically migrated to porkbun, and you can continue managing your DNS with Cloudflare, without any changes (and downtime) on porkbun or squarespace.

Once you receive the confirmation emails from both registrars, you’ll see that the domain will be marked as “Third-party” on the Squarespace dashboard.

Google Sheets got fixed on iPad

2024-06-27T00:00:00Z

update: just found out why it was slow

Yess!

I don’t know which update on which side got things finally working.

Whether it was on Apple’s or Google’s side.

Google Sheets is finally usable on the web on an iPad!

What a glorious day.

PS: In november of last year I complained about how the experience of using Sheets on the web on an iPad was terrible.

Today is my Lucky Backup Day

2024-01-26T00:00:00Z

Today is my lucky backup day.

TLDR; restored ~ 1 year of analytics data for Plausible analytics.

I really do care about my data, but apparently not enough to have a proper backup strategy.

That’s at least what this lesson taught me.

So let me elaborate/rant a bit.

I am using a simple Ansible playbook to provision my server with all the stuff that it needs, e.g. hardening, self-hosted services mostly with docker, nginx reverse proxy, vpn, etc.

You can already see there’s the something missing about “backup/restore” in the playbook… But I’m getting ahead of myself.

For Plausible, I am using the official docker-compose setup from the hosting repository. The docs are the best in town and are simple to follow.

On January 25th, that tragic day that cost me a whole lot of nerves, I was doing some maintenance on my server.

Checking out the Ansible playbook, browsing around files and setting to see if I could update or improve something.

Then after some cleanup, I run my usual ansible-playbook playbook.yml command and boom.

Something went wrong. Some nginx directive was wrong (totally unrelated to Plausible).

Fix it, run it again, everything ok.

Except all my Plausible data was “gone”, apparently.

It was showing “0 visitors” for the last 24 hours.

“Oh oh, weird”, I thought.

Checking the monthly chart, also 0 visitors.

Oh shit.

I want to dedicate this section to all data lost and the poor souls that suffered from it.

Then after sleeping on it, I found out there were other people in the same boat.

After following this discussion about upgrading to 2.0.0, I successfully restored all my data.

Even though I wasn’t even upgrading to 2.0.0

It was simple a minor update.

The following did the trick for me:

$ docker compose stop plausible plausible_events_db
$ docker compose rm plausible_events_db
$ docker compose up -d

$ docker compose stop plausible
$ docker compose rm plausible
$ docker compose up -d

$ docker compose exec plausible bin/plausible rpc Plausible.DataMigration.NumericIDs.run

Here you can find the official upgrade guide for postgres

So today, January 26th, marks the date for my personal Happy Lucky Backup Day 😅

(Alongside the World Backup Day on March 31st)

Google Sheets on iPad? More like 'Google Shiits' 💩

2024-06-27T00:00:00Z

update: just found out why it was slow

If you ever needed to access your spreadsheets via web on an iPad, I feel you.

It’s quite a strategy game you have to play: you need to understand/feel how Google Sheets will lag in the next few seconds, so that you can optimize your next move, in foresight of the next lag while scrolling or changing cell - it’s also fun sometimes, for 10 seconds, then you would like to throw your iPad to the wall.

Just use the Google Sheets native application, right? It seriously sucks, lacks of functionality and it’s UX is weird to me. I simply don’t like it.

And besides, why shouldn’t I want to use the web version?

Also on my PC I always preferred the web version of things, I spend a lot of my time on the PC surfing the web anyway…

But I’m trying to justify myself here…

I’m hopeful that, like for some other things, we’ll be able to find a workaround/solution for sheets on the web too.

htmx and Alpine.js are actually pretty awesome

2023-10-19T00:00:00Z

I’ve been using htmx and Alpine.js in the past few weeks, and I have to say, they’re pretty awesome.

Made a stupid ChatGPT UI clone with both of them and they brought a breeze of fresh air to my frontend development.

How will I use them in the future? I don’t know, but I’ll definitely try to use them more often.

Especially for small projects, dashboards/frontends for internal APIs etc.

The learning curve is a bit steep in my opinion, but once you get the hang of it, you can get stuff done very quickly.

ZenGPT: a simple ChapGPT alternative frontend

2023-10-22T00:00:00Z

I’ve been playing around with a home-made, super simple ChatGPT UI clone, mainly with the excuse to try out htmx and Alpine.js

It’s a fun little project that I’ve been working on for a few days.

I’ve been programming it on an iPad Pro (as my main device), and it’s been a fun experience.

In this post I want to get deeper into the technical details of the project, and share some of the things I’ve learned while working on it.

–

node.js server and bare functions as views

The other day I wrote about functions as views, and how I’ve been using them in this project.

Namely, I’m using the native http node.js module, a simple home made router with if statements and a few functions that return HTML strings.

The functions are called with optional additional data and they return a string that is sent back to the client.

E.g.

if (req.url === '/') {
  res.setHeader('Content-Type', 'text/html')
  return res.end(mainView(messages, listing()))
}

Integrating with OpenAI’s API

The Completions API is pretty straightforward too:

You can use the chat.completions.create method to send the conversation to the API, and get back a text completion (llm response/message).

const completion = await ai.chat.completions.create({
  model: 'gpt-3.5-turbo',
  messages: messages
              .concat([{ role: 'user', content: newUserMessage }]),
})

let llmText = completion.choices[0].message.content.trim()

htmx

As mentioned before, the main reason I started this project was to try out htmx (and Alpine.js)

The coolest thing I refreshed during this excursus was the concept of rethinking what we consider RESTful APIs (spoiler: they are actually HTTP JSON RPC APIs), HATEOAS, hypertext, and much more honestly. The htmx website is a goldmine of resources.

In short: our websites and “RESTful” APIs should be way more discoverable (for humans, not machines) and self-contained.

By making use of existing powerful technology like HTML and HTTP, with sprinkles of JavaScript, to make the web more accessible, lightweight, more reliable and easier to use.

But let’s got back to htmx.

build modern user interfaces with the simplicity and power of hypertext

The emphasis here is leveraging the power of HTML.

E.g. in this small project, the client is loaded with a simple HTML page, preloaded with messages from the server.

The rest (sorry for the poor choice of words) is done by the client, that makes requests to load small snippets of HTML, and updates the DOM with the response.

This is an oversimplification, but it’s the gist of it.

By using a declarative approach on the HTML, you can get a quite robust and powerful UI, with very little code.

The main focus of ZenGPT is the UI, this is the input and conversation part:

<div id="messages" hx-swap="scroll:bottom">
  ${renderMessages(messages)}
</div>
<input
  name="message"
  hx-post="/chat"
  hx-trigger="keyup[keyCode==13]"
  hx-target="#messages"
  hx-swap="beforeend scroll:bottom"
  hx-indicator="#loading-message"
  hx-on:htmx:before-request="this.disabled=true"
  hx-on:htmx:after-request="this.disabled=false;setTimeout(() => this.focus(), 20)"
  x-bind:disabled="messageDisabled"
  x-ref="message"
  x-model="message"
  x-on:keyup.enter="setTimeout(() => {message = '';pristineChat = false}, 10)"
  class="my-message" autofocus type="text" placeholder="your message">
<div style="position:fixed;bottom:3em;right:2em;" class="htmx-indicator" id="loading-message">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64" viewBox="0 0 24 24">
    <path fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" d="M12 2 L12 6 M12 18 L12 22 M4.93 4.93 L7.76 7.76 M16.24 16.24 L19.07 19.07 M2 12 L6 12 M18 12 L22 12"></path>
</div>

This is so-called “no-javascript”, where the JS is simply hidden (remember you need to include a <script src="//unpkg.com/htmx.org">). I think it’s a refreshing approach.

Alpine.js

In ZenGPT, Alpine.js is used to manage the state of the UI, and to make client-side only UI changes and updates.

It is used to add interactivity to the UI.

E.g. it handles the display state of the action buttons in the header

<div style="display:flex">
  <div style="flex:1";><h1>zengpt</h1></div>
  <div x-show="!pristineChat" style="flex:1;";>
    <button style="display:block;padding:1rem;font-size:1.5rem;" hx-delete="/chat" hx-target="#messages" x-on:click="$refs.message.focus();messageDisabled=false;pristineChat=true">
      new chat
    </button>
  </div>
  <div x-show="!pristineChat" style="flex:1;";>
    <button style="display:block;padding:1rem;font-size:1.5rem;" hx-post="/chats" hx-target="#messages" x-on:click="$refs.message.value = '';messageDisabled=false;pristineChat=true">
      save chat
    </button>
  </div>
  <div x-show="viewingPreviousChat" style="flex:1;";>
    <button style="display:block;padding:1rem;font-size:1.5rem;" hx-get="/chat" hx-target="#messages" x-on:click="$refs.message.value = '';messageDisabled=false;">
      go back
    </button>
  </div>
</div>

open source

You can find the project on github.com/christian-fei/zengpt

Server-sent events (SSE)

Update 2023-10-22: I’ve added support for Server-sent events (SSE) to the project!

This was super a interesting endeavour, and I’ve learned a lot about htmx extensions and SSE.

Using pure functions as views (with htmx and alpine.js)

2023-10-16T00:00:00Z

In the past days I got my hands dirty with htmx and alpine.js

It was super refreshing and an smooth learning curve.

A lil steep and kind of depressing at the beginning, but once you get the hang of it, it was a breeze of fresh air in my development toolkit.

Here I want to get a bit into the details of how I used htmx and alpine.js to create a simple app, by focusing on the backend part.

Namely into how I used pure functions as views.

–

The idea is simple: instead of using a template engine (like nunjucks, jsx ssr, etc.), I just use a pure function that returns a string.

const view = (data) => {
  return `
    <div>
      <h1>${data.title}</h1>
      <p>${data.content}</p>
    </div>
  `
}

this can be used in your routes/controllers simply by calling the function, passing in data if needed, and return it as a response.

example with htmx and alpine

A view part of a web app I’m currently working on:

<div id="chats">
  <details>
    <summary>chats</summary>
    ${chats
      .map(chat => `
      <a 
        x-on:click="messageDisabled=true;pristineChat=true;viewingPreviousChat=true" 
        hx-get="/chats/${chat}" 
        hx-target="#messages" 
        href="/chats/${chat}">
          ${chat.replace('.json', '')}
      </a>
      `).join('<br>')}
  </details>
</div>

In this case, I’m returning parts of the html that will be used by htmx to update the DOM and by alpine to update the state and the UI.

Another example I like is the following:

<div id="messages" hx-swap="scroll:bottom">
  ${messagesView(messages)}
</div>
<input
  name="message"
  hx-post="/chat"
  hx-trigger="keyup[keyCode==13]"
  hx-target="#messages"
  hx-swap="beforeend scroll:bottom"
  hx-indicator="#loading-message"
  hx-on:htmx:before-request="this.disabled=true"
  hx-on:htmx:after-request="this.disabled=false;setTimeout(() => this.focus(), 20)"
  x-bind:disabled="messageDisabled"
  x-ref="message"
  x-model="message"
  x-on:keyup.enter="setTimeout(() => {message = '';pristineChat = false}, 10)"
  class="my-message" autofocus type="text" placeholder="your message">
<div style="position:fixed;bottom:3em;right:2em;" class="htmx-indicator" id="loading-message">
  <svg ...></svg>
</div>

htmx is used to send the message to the server, and update the DOM with the new messages.

it also disables the input and attaches a loading indicator to the input, so that the user knows that the message is being sent.

another cool part i find are the hx-trigger and hx-swap part.

hx-trigger is used to trigger the request when the user presses the enter key.

hx-swap in conjunction with beforeend scroll:bottom is used to append the new messages to the list of messages, and scroll to the bottom.

The POST /chat endpoint receives the user entered input and returns the LLM message in return.

`views/messages.mjs`

Here an mjs script that I use to render the messages:

export default function messagesView(messages = []) {
  return messages.map(message => {
    return `
    <div hx-transition class="${message.role}-message">
    ${message.content}
    </div>
    `;
  }).join('');
}

This is a simple function that takes an array of messages and returns a string of html.

And on the router.mjs file:

...
  if (req.url === '/chat' && req.method === 'GET') {
    res.statusCode = 200
    return res.end(messagesView(messages))
  }
...

iPad can now control the audio when connected to an external monitor

2023-10-16T00:00:00Z

Today I noticed I can finally listen audio on my iPad when connected to an external display!

I am currently on iPadOS 17.1 (with Developer Beta active).

This changes a lot for me, as I can now use my iPad as a second screen and still listen to music or podcasts on it.

I know, this sounds obvious, but it wasn’t possible a few weeks ago.

This solves one of the issues I mentioned in a previous post.

There were too many people looking for a workaround, and the only ones I found were:

connect an aux cable to the monitor and an external speaker, but without the ability to control the volume from the iPad!
connect to an external bluetooth speaker, with the ability to control the volume

Improving my tags using OpenAI's Chat completions API

2023-10-08T00:00:00Z

Here I want to share how I slightly improved the tags on each of my blog posts.

The idea is super simple, a script should do the following:

read each blog posts content
parse the front matter containing the tags (the header part at the beginning of markdown files)
create the prompt containing an excerpt of the blog post
call OpenAI’s API and parse the suggested tags
update the frontmatter with the tags
save the file back

Find the code and more details below.

–

The prompt

This is the prompt I crafted that returns acceptable tags:

Given a blog post, suggest appropriate tags for it.
The blog is about software programming.
Extract the 5 most important tags from the blog post.
The tags need to satisfy the following:
- short
- simple
- super generic
- one word (avoid putting words together)
- lowercase, no camelcase
- no duplicate concepts in the tags, e.g. githubcodespaces and github should become github and codespaces
- no numbers as tags
- when a tag gets too long, split it in two or generalize it
- avoid very specific tags
- do not use generic tags like "blog", "post", "programming", "software" etc. (if they're useful to categorize the post it's ok)
- the output should not contain any other extra text

Return just 5 tags in comma separated list form, avoid adding any other text before or after the tags.

Blog Post:
${blogPost.substring(0,2000)}...

It’s surely not perfect, but it works for now.

Processing the files

A handy find and xargs magic does the trick just fine.

E.g. finding all blog posts from 2023

find posts -name "*.md" | grep "2023-" | xargs -I {} ./scripts/improve-tags-gpt.mjs {}

The script

I am using gray-matter to easily parse the posts frontmatter.

Also openai’s npm package for ease of use.

You’ll just need to set the env variable OPENAI_API_KEY and you’re good to go.

The main part looks like this:

#!/usr/bin/env node

import fs from 'fs/promises'
import OpenAI from 'openai'
import matter from 'gray-matter'

const ai = new OpenAI()
const filepath = process.argv[2]
processMarkdownFile(filepath)

Processing the markdown

As simple as reading the file, parsing the frontmatter, skipping drafts and finally finding tags for the given blog post:

async function processMarkdownFile(filePath) {
  try {
    const fileContent = await fs.readFile(filePath, 'utf-8')

    const { content, data } = matter(fileContent)
    if (data.tags?.includes('draft')) return

    const suggestedTags = await findTagsForBlogPost(content)

    data.tags = ['post'].concat(suggestedTags)

    const updatedContent = matter.stringify(content, data)

    await fs.writeFile(filePath, updatedContent, 'utf-8')

    console.log(`Updated tags for ${filePath}`)
  } catch (error) {
    console.error(`Error processing ${filePath}:`, error)
  }
}

Prompting the model

You’ll just need to call ai.chat.completions.create, specify the message and model to use.

Then, given the response, you can cleanup and parse the returned tags.

async function findTagsForBlogPost(blogPost) {
  const prompt = `
    Given a blog post, suggest appropriate tags for it.
    The blog is about software programming.
    Extract the 5 most important tags from the blog post.
    The tags need to satisfy the following:
    - short
    - simple
    - super generic
    - one word (avoid putting words together)
    - lowercase, no camelcase
    - no duplicate concepts in the tags, e.g. githubcodespaces and github should become github and codespaces
    - no numbers as tags
    - when a tag gets too long, split it in two or generalize it
    - avoid very specific tags
    - do not use generic tags like "blog", "post", "programming", "software" etc. (if they're useful to categorize the post it's ok)
    - the output should not contain any other extra text
    
    Return just 5 tags in comma separated list form, avoid adding any other text before or after the tags.
    
    Blog Post:
    ${blogPost.substring(0,2000)}...
    `

  const completion = await ai.chat.completions.create({
    messages: [{ role: 'user', content: prompt }],
    model: 'gpt-3.5-turbo',
  })

  const suggestedTags = completion.choices[0].message.content.trim().replace(/Tags\:/gi,'')
  const tags = suggestedTags.split(',').reduce((acc, tag) => acc.concat(tag.trim().split(' ')),[]).filter((_,i) => i < 10)
  console.log(tags)
  return tags
}

Dogfooding

I obviously ran the script on this very blog post and the suggested tags were the following:

- post
- software
- programming
- blog
- script
- openai

Works for me.

Conclusion

A more sensible approach would be to somehow feed (e.g. in the prompt) the most used tags among the other posts.

I am not 100% fond of the categorization the model returns, but it’s a little better than what I did manually over the years.

It would probably work better with a classic NLP solution, but for fun and convenience this is done with the model API.

PS: It cost about 0.5$ to process ~300 blog posts (a few times).

ChatGPT for learning Jamaican Patois

2023-10-07T00:00:00Z

Wah gwaan, man?

Lately I have been trying to get a basic knowledge of Jamaican Patois.

And it’s known that it can be helpful for language learning.

But never would I have thought that I could use it as an additional tool for learning Jamaican or other Creole languages.

Recent di time, mi a try fi get a basic knowledge a di Jamaican Patois.
An yuh done know seh it can come in handy fi di language learning.
Mi never woulda even tink seh mi could use it as an extra tool fi learn Jamaican or any oddah Creole languages.

–

A stupid web component

2023-10-06T00:00:00Z

Below you can find a stupid simple web component, that’s it.

–

On this page I defined the following template:

<template>
  <style>
    #cig-component-container button {
      font-size: 1.5rem;
    }
    #cig-component-container h1 {
      background: black;
      color: white;
      font-weight: bold;
      font-size: 2rem;
      padding: 0.75rem 1.5rem;
    }
  </style>
  <div id="cig-component-container">
    <button>next</button>
    <br>
    <h1></h1>
  </div>
</template>

This gets then used by the cig.mjs file, which defines the webcomponent itself:

class CigComponent extends HTMLElement {
  constructor() {
    super()
  }
  
  connectedCallback() {
    this.render()
    this.attachEvents()
  }
  
  disconnectedCallback() {
    this.removeEventListener('click', this.handleButtonClick)
  }
  
  render() {
    const template = document.querySelector('template')
    const clone = template.content.cloneNode(true)
    const title = clone.querySelector('#cig-component-container h1')
    title.innerText = randomSentence()
    this.appendChild(clone)
  }
  
  attachEvents() {
    const button = this.querySelector('#cig-component-container button')
    button.addEventListener('click', this.handleButtonClick.bind(this))
  }
  handleButtonClick () {
    const title = this.querySelector('#cig-component-container h1')
    title.innerText = randomSentence()
  }
}

function randomSentence() {
  const sentences = [
    "Programming can harm you and others around you",
    "Programming harms you, and smoking harms others.",
    "Prioritize well-being, avoid excessive coding and smoking.",
    "Coding and smoking carry risks for you and those nearby.",
    "Healthy habits: code wisely, quit smoking.",
    "Protect yourself and the environment by avoiding smoking while coding.",
  ]
  return sentences[Math.floor(Math.random() * sentences.length)]
}
  
customElements.define('cig-component', CigComponent)

Here I am using the <cig-component>, you can play with it here 👇

3d printed stuff over the years

2023-10-13T00:00:00Z

Cable reel

It took 5+ hours to print all three parts for the bigger version, and perhaps 2 for the small one.

I suggest to print it in high quality since it has a screw mechanism.

👉 https://www.thingiverse.com/thing:2856991

Raspberry Pi 4 case

This one is a level-up to the one I purchased, because it has way better ventilation, plus I printed it in yellow so it looks cool.

On printables

Cable organizer

A must-print as soon as you get a 3d printer.

Get it on thingiverse

ESP32 cases

I have a few of these lying around in case I need one right up

On thingiverse

AirTag holder

On thingiverse

Apple Watch desk stand

On thingiverse

Rubber duck

On thingiverse

Apple watch personal use cases

2023-10-04T00:00:00Z

Here I want to write down my personal use cases for the Apple watch.

–

View time as you please, together with other widgets, analogue, or plain vanilla digits.

To me the Apple watch is like an iPhone remote.

Quickly lookup information with Siri, start timers while cooking, etc.

You can check notifications, also respond to messages directly from the watch, play next/pause the currently playing media, etc.

Call and respond to calls is also pretty useful.

For what’s worth, it keeps me motivated to get out and close my daily activity rings.

Sleep tracking works pretty well. In conjunction with Focus mode, or better Sleep mode, during the night the watch shouldn’t cause any interupption or your sleep.

Keep track of stocks at a glance.

Pay on the go using your watch, also quickly access transportation tickets and such.

Use the Apple watch as a bedside/office clock.

Record important thoughts/conversations on the go.

My iPad/iOS 17 wish list for 2024

2023-10-16T00:00:00Z

I’ve been using an iPad Pro since the beginning of 2023 and it’s been a great experience so far.

This digital “toy” is a real power-station and suits most of my needs.

Although I don’t expect certain features to ever be available, I’m still hopeful that Apple will come up with some great implementations.

btw, check out my /uses page

–

1. Better Apple watch integration

I don’t know, perhaps the ability to use the Fitness app like on the phone?

Or unlocking the iPad with the watch would be cool too.

Remote media playback controls between the watch and the iPad.

2. Audio source control like on MacOS

When using an external monitor to the iPad, you rely on the audio capabilities of the monitor.

That’s a pity when the monitor doesn’t have audio.

What solutions do you have? Disconnect the iPad, or connect your headphones or bluetooth speaker.

I would like to be able to use the iPad speakers even though I’m connected to an external monitor.

Update 2023-10-16: Apple finally added iPad audio control when connected to an external monitor!

3. Let me have a shell, damn it!

I’m currently kind of escaping the lack of a terminal experience by using Blink shell.

Do you imagine being able to run docker images on this machine?!

Yeah I know, dream on 🤣

4. Native VSCode app

That would be dope.

Even a simplified version could be fine, I don’t want to ask too much.

I’m currently using vscode/github.dev or Blink shell with VSCode integration.

Finally

I got pretty much sold to the iPad Pro once Stage Manager was released.

Also vscode.dev/github.dev were a game changer, meaning Visual Studio Code integration on the web.

Additionally, the release of VSCode tunnels and VSCode server by using my Raspberry Pi 4, made the whole experiment of having the iPad Pro as my main device very compelling.

There are definitely some rough edges, but I can find workarounds for most of them.

Although very annoying, you can get a lot of developer work done on this machine

Update 2023-10-15

Apple finally added iPad audio control when connected to an external monitor!

Protonmail iOS team seems super reactive to user feedback

2023-09-19T00:00:00Z

Have been using Protonmail since 2020 I think, and it’s been a positive experience.

Recently I gave them some feedback and the team prompty implemented or solved the issue. Awesome!

This post is not sponsored or whatever.

–

iPad second display issue

There was a strange quirk when opening the Protonmail app on the iPad main display.

Another window of Protonmail would pop-up, not scaled properly and without the ability to interact with it.

It was super strange, especially since opening the app from the main dipslay worked fine!

I had the need to quickly archive email once read, as part of my email workflow.

In the iOS app I needed to read the email, open a menu and the archive it.

Now you can quickly access the archive button from the toolbar via a button.

–

Awesome work, Protonmail iOS team!

Southworking

2023-09-14T00:00:00Z

Per fare soldi?
Full remote per azienda estera e trasferimento a Catanzaro

Mi ha fatto sorridere questo commento su un post sul subreddit di ItaliaPersonalFinance, ma poi ho scoperto il concetto di “SouthWorking”

Lavorare dove desideri fa bene a te e ai territori

Commento su Reddit ItaliaPersonalFinance

Wanna learn something? Recreate it

2024-11-16T00:00:00Z

In the past few years I embraced the mantra “Wanna learn something? Recreate it”.

What do I mean by it?

Here some examples:

I wanted to better understand how a static site generator (SSG) worked, so I created devblog, and even converted this very site to be compatible with it
Are you easily stunned by charts, real-time updates, and perhaps crypto (oops, I said it)? Recreated (in part) the Coinbase Trading UI and that’s how I got into Elixir and landed my first job where I daily used Elixir. That’s fucking awesome, I think
When in my team we were frequently using Trello, I had quite some fun creating libs around Trello that suited my personal needs
At some point in my career I had to deal with scraping product reviews from popular shops, and do it reliably. After evaluating various techniques and tools, for some part of the scraping we were using mega-scraper and bull-dashboard

I learned the most by diving deep into a certain topic, almost like a maniac, and produced something as an output. If it’s public and dirty, no need to be ashamed.

Found out about an awesome repo with countless examples of building recreating stuff from scratch:

build-your-own-x

Learning about Web Components

2023-08-25T00:00:00Z

For now this is just a collection of useful links while organizing my thoughts on web components.

learning

https://www.webcomponents.org/

https://javascript.info/shadow-dom

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots

https://open-wc.org/codelabs/basics/web-components

https://www.bitovi.com/academy/learn-web-components.html

code

https://github.com/mdn/web-components-examples

https://github.com/GoogleChromeLabs/file-drop/tree/master

https://genericcomponents.netlify.app/

documentation

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scoping

https://javascript.info/template-element

blog posts

https://kinsta.com/blog/web-components/

https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/

https://daverupert.com/2023/07/why-not-webcomponents/

Unblock single domain in AdGuard Home

2023-07-24T00:00:00Z

Needed to unblock t.co because it was getting annoying over time.

Finding the menu item was simple and intuitive, but the suggestions on that page to unblock a certain domain were not working.

I resorted to the following to get t.co links to work:

@@||t.co^$important

Airtag battery still low after replacing with new CR 2032 batteries

2023-07-08T00:00:00Z

Upon receiving the notification of low battery on your Airtag, you purchase fresh CR 2032 batteries, unpack them, and proceed to replace the Airtag battery.

You open the “Find My” app to check the battery status, only to find that it is still low.

After conducting a quick Google search and referring to some Apple documentation (found here), you discover that CR 2032 batteries with a bitterant coating may not work properly with Airtags.

It then dawns on you that you unintentionally bought batteries with the bitterant coating, as indicated by the image of a kid with a disgusted expression on the packaging.

Resolving the Bitterant Issue

How did I resolve this problem?

I gently scraped off the top coating from the negative pole with the bitterant and optionally cleaned it with isopropyl alcohol.

Please note: Don’t Do This At Home 🤫

Opinions on working fully remotely

2023-07-03T00:00:00Z

The COVID-19 pandemic changed the way we work, forcing many organizations to adopt remote work as the new norm.
Some years have passed and many want to continue this trend, while others wish to go back to the office.
Let’s take a look at what people are saying on HackerNews:

Advocates

Quite a few people see the advantages of working fully remotely, like:

freedom and flexibility
eliminates the dreaded commute
increased focus at home
fewer distractions
setting their own hours
stay connected with family
prioritize their well-being
healthier work-life balance

But there are also a few cons: some dread the forced team-building exercises that often accompany remote working.

Some have fully embraced the advantages of remote work. They have been working remotely for many years and can’t imagine going back.

Opponents

On the other hand, some people have fond memories of in-person collaboration.
They remember the camaraderie and close teamwork that happened when everyone was together in a physical office. They believe that if the team is not fully present, there is little value in commuting for a partially remote setup.

The hybrid approach

However, there are also those who prefer the hybrid approach.
They recognize the benefits of both remote and in-person work and believe that a balance needs to be found.
They suggest a mix of 2 to 3 days in the office per week to maintain flexibility and collaboration.

Conclusion

In conclusion, the perspectives on fully remote work are diverse. Some praise the autonomy and flexibility it offers, while others emphasize the value of in-person collaboration and team cohesion. Ultimately, the ideal work arrangement depends on personal preferences, the nature of the job, and the dynamics of the team. Striking a balance between remote and in-person work may be the key to ensuring employee satisfaction and productivity as we move forward

In my opinion

I think that a hybrid approach would be awesome, but the implementation most of the times is terrible. Someone is going to be cut off from decisions and discussions. So I personally don’t like the hybrid approach.

If I would have the strong need to be able to work fully remotely (e.g. living in the countryside, far away from central hubs), all or nothing for me. Either fully remote or nothing.

Favorite music while programming

2023-06-27T00:00:00Z

Below you can find my favorite channels I use to listen to music while programming

You can even rap about Node.js and JavaScript on these beats if you feel like it 😅

Anabolic Beatz

My all-time favorite producer.

Lofi Girl

That famous girl that studies 24/7.

Alternatively via lofi.cafe or Spotify

Fat Cat Beats

Amazing old school / boom bap beats

Bupa Beats

Super engaging trap/rap instrumentals, repetitive, perfect for getting in the flow

Darkside

“Darkside, light this ***** up”

WebAuthn and Secure Payments Confirmation (SPC)

2023-06-15T00:00:00Z

The World Wide Web Consortium (W3C) has introduced a RC version of the web standard called Secure Payment Confirmation (SPC) to streamline user authentication and improve security when making payments on the web.

It uses Web Authentication (WebAuthn) to register and authenticate users, enabling them to make purchases using Touch ID or Windows Hello.

Links

On SPC

https://www.applemust.com/w3c-announces-new-web-standard-for-online-payments/

https://www.w3.org/2023/06/pressrelease-spc-cr.html.en

https://developer.chrome.com/articles/secure-payment-confirmation/

https://www.w3.org/TR/secure-payment-confirmation/

On Payment Services Directive (PSD2)

https://www.ecb.europa.eu/paym/intro/mip-online/2018/html/1803_revisedpsd.en.html

Ti ricordi di Jumpy?

2023-06-13T00:00:00Z

Voglio portarti un pò indietro nel tempo in questo esercizio di ricordi sparsi e parziali dei miei primi passi su internet.

Un paio di settimane fa mi è venuto in mente “Jumpy”, l’ISP che utilizzavo nei primi anni 2000.

Costava un occhio della testa ai miei e si ~~navigava~~barcollava a 56 Kbit/s.

Quali sono le principali differenze tra il nuovo servizio Jumpy e un accesso ad Internet tradizionale? La principale differenza è che con Jumpy non è necessario pagare alcun costo di abbonamento, canone o costo di attivazione. La tariffa è semplice e chiara: la spesa per l’uso di Internet viene inclusa nella normale bolletta telefonica. In più Jumpy ti regala un indirizzo di email personalizzato

Dal sito archiviato, ancora semi accessibile

Era avanti anni luce in poche parole.

Avevo 7-8 anni quando ho iniziato a fare i miei primi passi su internet, con Windows ME, “Millenium Edition”.

Grazie Zii per quel tower con un Intel Pentium ®️ qualcosa.

Se non mi ricordo male nel 2001.

Ma che figata di nome e tempistica era scusa?

seeklogo.com

About 1:1s

2023-06-09T00:00:00Z

Let’s talk about weekly 1:1s. Some people swear by them, and others think they’re a waste of time. But what makes them effective?

Context: Discussion on HackerNews about “What’s your opinion on weekly 1:1s?”

One thing that many people agree on is the importance of consistency.
When everyone shows up for these meetings week after week, it builds trust and reliability.
Workers feel they can discuss ideas, concerns, and issues without fear because these meetings happen regularly.

Trust is also a key factor.
When you have a good working relationship with your colleague, weekly 1:1s become a valuable tool for open communication and problem-solving.
The atmosphere of trust can facilitate healthy conversations and transparency.

When done right, these meetings can also benefit career development.
For example, they offer a platform to discuss professional opportunities, ask for feedback on performance, and identify areas for growth.
It can demonstrate a commitment to an employee’s personal development, making them feel invested in their career.

On the other hand, some may feel like these meetings don’t add value or are merely an unnecessary distraction.
They can be distracting to the workflow when having too many people involved or scheduling several meetings without an adequate structure.
It’s essential to assess the individual, team dynamics, and frequency of the meetings and adjust as needed.

Another potential pitfall is when the conversation doesn’t flow naturally.
Some people may feel *uncomfortable+ discussing certain topics during a one-on-one discussion, making it challenging to cultivate transparency.
It’s the manager’s responsibility to create a safe space and guidelines to support constructive conversations, transparent communication, and professional development.

In conclusion, whether weekly 1:1s are helpful or not depends on the individuals involved and their communication style.

It is not a one-size-fits-all approach. What works for one group may not work for another, and it is up to the management to create an environment that can encourage the type of communication and feedback needed for each team’s success.

Weekly 1:1s can be incredibly valuable when there’s consistency, trust, and clear structure, creating a supportive space for open communication, problem-solving, and career development.

Modern frontend apps with ES modules and import maps

2023-05-03T00:00:00Z

With import maps you can map external module names to their relative URLs, on a CDN for example, which makes it super easy to use external modules, natively in 2023.

By defining a <script type="importmap"> tag you can map the various modules you like to include in your web application, leveraging ES modules.

Put the mapping the in the <head> tag of the document and can import modules using the import tag inside a <script type=“module”> tag.

Additionally, if you want to gracefully degrade the application somehow, or progressively enhance if you prefer, you can use HTMLScriptElement.supports('importmap') to detect if the browser supports import maps.

Example

Define a <script type=“importmap”> in the <head> section with the following content:

{
  "imports": {
    "app": "/modules/app.js",
…
  }
}

Now inside a <script type=“module”> tag you can import the app module, e.g.:

import {mount, render, …} from “app”

For more info check out web.dev with their great article on the subject.

PS: I use unpkg as a CDN in my hobby projects and I’m super happy with it

MiCA pizza e fichi

2023-07-26T00:00:00Z

Alcuni lo chiamano MiCA, altri MiCAR.

Markets in Crypto Assets (Regulation): una prima regolamentazione per garantire l’accessibilità dei servizi bancari alle imprese che hanno a che fare con criptovalute.

MiCA si applica a persone o entità coinvolte nell’emissione, offerta al pubblico e negoziazione di cripto-attività o che offrono servizi correlati in Europa.

Le cripto-attività sono rappresentazioni digitali di valore o diritti trasferibili e conservabili elettronicamente su tecnologie come i registri distribuiti.

Esistono tre categorie di cripto-attività:

i token di moneta elettronica (EMT), che utilizzano una singola valuta per stabilizzare il loro valore
i token legati ad asset (ART), che ancorano il loro valore a qualcos’altro o a un paniere di valute e asset, come il progetto Diem (precedentemente Libra)
gli altri tipi di cripto-attività non rientranti nelle prime due categorie.

Il MiCA essenzialmente comprende (link al testo):

Un quadro normativo uniforme per i mercati delle cripto-attività all’interno dell’Unione Europea
tracciabilità delle operazioni effettuate con cripto-attività, alla pari dei tradizionali trasferimenti di denaro
misure volte a migliorare la protezione dei consumatori, la prevenzione della manipolazione del mercato e del crimine finanziario

Tuttavia, rimangono ancora incertezze riguardanti le regole che riguardano gli NFT e i servizi DeFi.

Inoltre, è ancora poco chiaro come la nuova normativa si applicherà alle aziende che operano in Europa ma hanno sede negli Stati Uniti.

Comunque sia, il regolamento rappresenta un’opportunità per migliorare la trasparenza e la sicurezza nell’ambito delle criptovalute.

Fonti

Crypto-assets: green light to new rules for tracing transfers in the EU

EU’s MiCA Framework Could Help Crypto Firms Get Banked

The European Parliament Has Voted for the EU’s Landmark MiCA Regulation and Anti-Money Laundering Transfer of Funds Rules

Cripto-attività, ecco il regolamento Mica: le nuove regole da conoscere

What is MiCA? The European Union’s Landmark Crypto Regulation Explained

My impractical RSS reader in Google Sheets

2023-04-20T00:00:00Z

While exploring how to build an RSS reader, I stumbled across the idea of using Google Sheets to display RSS feed content.

Just for fun, I decided to give it a shot and see how far I could get.

I am using Miniflux daily, but I am also having some fun coding up a stupid RSS reader on my own.

I found the idea of creating an ‘impractical’ RSS reader in Google Sheets intriguing, so I decided to give it a shot.

You know, using “No-code” aka Spreadsheets.

Keep reading to find out how I did it, and what I learnt along the way.

Creating Your Impractical RSS Reader

Create a new Google Sheet.

In the A1 cell enter the following:

=QUERY({QUERY(IMPORTFEED("https://cri.dev/rss.xml"), "select Col1, Col3, Col4")}, "select *")

You’ll be presented with the latest blog posts from my RSS feed, with the title, the URL and content of the post.

I think it’s super cool.

PS: To add multiple feeds and combine them, you can use the following:

=QUERY({QUERY(IMPORTFEED("https://cri.dev/rss.xml"), "select Col1, Col3, Col4"); QUERY(IMPORTFEED("https://hnrss.org/frontpage"), "select Col1, Col3, Col5")}, "select *")

Challenges and Solutions

Learnt along the way, you can combine multiple “data ranges” using the {} union operator.

That’s essentially the trick to combine multiple ranges of data.

Tried to mess around with filters, but they don’t seem to play weel alongside a QUERY function.

Don’t know exactly how to work that issue out.

Also I tried to implement the concept of “article read” using checkboxes.

But of course, once the feed updates and new content updates/overwrites the view, the data is all out of order.

So I guess that’s a no-go.

Another idea was to calculate the reading time, and then sort the feed entries by that column.

If you find out how to do it, please do let me know, even though of course I won’t be using this method to read my RSS feeds 😅.

Provisioning a Raspberry Pi with Ansible (and an iPad)

2023-04-20T00:00:00Z

The repository accompaining this blog post can be found on GitHub

It contains the whole code to get your Raspberry Pi up and running with Docker and Docker Compose, set it up for network access through USB-C and configure a few other things.

There is an excellent post about configuring your Pi to connect to your iPad via USB-C.

I automated the process with Ansible and added a few other things.

Personal setup

I have an iPad Pro M1 and a Raspberry Pi 4B 8GB.

Sometimes I connect them via USB-C.

But most of the times the Pi is connected via WiFi to my home network.

When doing 3D printing stuff, I connect through VNC to the Pi.

On the iPad I use Blink shell (no affiliation) to connect to the Pi over SSH via WiFi.

On the Pi, I provision the Pi itself, by running ansible-playbook playbook.yml

Again on the Pi, that’s where I provision my server(s) with Ansible too.

Conclusions (iPad + Pi)

The experience with Blink Shell is surprisingly sleak and quite usable to be honest.

I can even run VSCode inside Blink Shell and edit files on the Pi, use GitHub Codespaces and generally do most of the things I do on my laptop.

Managing Docker containers on the Pi can be done with ease from the iPad.

Various services run on Docker in my home network and can be accessed from e.g. my iPad or phone.

To be clear: currently nothing beats a computer with a keyboard and a mouse, but this is my setup for now and I make it work for me.

Node.js 20 is here

2023-04-19T00:00:00Z

Node.js 20 has been released, and it brings several new features and improvements for developers.

Let’s take a closer look at some of them.

Stable test runner

Node.js 20 introduces a stable test runner module!

You can use describe, it/test, and hooks to structure test files, as well as watch mode, running multiple test files in parallel, and mocking.

import { test, mock } from 'node:test';
import assert from 'node:assert';
import fs from 'node:fs';

mock.method(fs, 'readFile', async () => "Hello World");

test('reads file content', async (t) => {
  assert.strictEqual(await fs.readFile('a.txt'), "Hello World");
});

Note that some features of the test runner are not yet stable.

Permission Model

The experimental Permission Model allows developers to restrict access to specific resources during execution.

For example, you can manage file system access, child_process, worker_threads, and native addons.

Use the --experimental-permission flag.

You can also use the --allow-* flags to grant specific permissions.

Use specific paths for file system access by passing comma-separated values to the flags.

For example, this command allows write access to the /tmp/ folder:

$ node --experimental-permission --allow-fs-write=/tmp/ --allow-fs-read=/home/index.js index.js

Use process.permission.has() method to check if a certain permission has been granted at runtime. For example:

if (process.permission.has('fs.write')) {
  // ...
}

if (process.permission.has('fs.write', '/etc/hosts')) {
  // ...
}

It’s still experimental and may change in future releases of Node.js.

Performance improvements

E.g., the cost of initializing EventTarget has been cut by half, while V8 Fast API calls have been leveraged to improve performance in APIs like URL.canParse() and timers.

EOL for Node.js 14

Node.js version 14 is set to reach End-of-Life in April 2023. Therefore, upgrading to either Node.js 18 (LTS) or Node.js 20 (soon to be LTS) is recommended to ensure that applications remain secure and up to date.

View the full changelog for more details:

https://nodejs.org/en/blog/announcements/v20-release-announce

ChatGPT practical use cases and examples

2023-03-25T00:00:00Z

Found this discussion on HackerNews about “How are you using GPT to be productive?” and thought it was interesting.

I’ve been using ChatGPT for a while now and have found it to be a great tool for getting things done.

ChatGPT has become an indispensable tool for many professionals in various fields. Its ability to understand natural language and provide accurate responses has made it a go-to resource for many tasks.

Below are some ways in which people are using ChatGPT to be productive.

Coding

ChatGPT is being used as a substitute for Stack Overflow in some cases. It can understand the context of the question and provide helpful responses. For example, someone can ask a question about a problem with Pandas, and ChatGPT can recognize the topic and provide relevant answers. It can also help with creative tasks such as coming up with ideas for lesson plans or overcoming writer’s block. ChatGPT has lowered the emotional-resistance barrier for doing creative tasks and improved the quality of output by providing creative ideas.

Reviewing Legal Documents

ChatGPT has also been used to review contracts and explain hard to parse legalese. It can quickly provide an overview of a given topic and guide people on where to delve deeper.

Accounting and Tax Advice

For billing international clients, ChatGPT has been helpful in providing accounting and tax advice. It has also been used to assist with visa applications.

Rapid Prototyping

ChatGPT has been used as a rapid prototyping tool for building prototypes for public APIs. Someone can ask for endpoints, find the endpoint they want, and then ask ChatGPT to code a request to the endpoint in a specific language. This saves time and reduces the setup required.

Thesaurus

ChatGPT has been used as a thesaurus, providing options for words that mean a certain thing. It has also been used to brainstorm ideas, generate OpenAPI schemas, and explain code that is not understood.

Proofreading

ChatGPT can also be used to proofread emails and make suggestions based on the stated goal. It can also settle language/choice of words discussions by asking ChatGPT to reverse pitch understanding and then choosing the one that’s most aligned with the point being made.

Linux Commands

For Linux-y commands and explanations, ChatGPT has been helpful in finding the best way to remap keys in i3 or finding a file with specific content faster than using the ‘find’ command.

Overall, ChatGPT has become a second brain for many people, providing quick and accurate responses to a wide range of tasks. Its ability to understand natural language has made it a valuable tool for professionals in various fields, from coding and legal documents to accounting and tax advice. ChatGPT has drastically reduced the time and effort required to complete many tasks and has improved the quality of output. Its benefits are undeniable, and it is likely that more people will continue to adopt it as an essential tool in their work.

How to add Node.js & npm to jekyll in GitHub Codespaces

2023-03-25T00:00:00Z

You can use GitHub CodeSpaces to develop your Jekyll site. But you need to install Node.js and npm to use e.g. TailwindCSS.

So, if you haven’t already, create a file called devcontainer/devcontainer.json in your repository, with the following content:

{
  "name": "Jekyll",
  "image": "mcr.microsoft.com/devcontainers/jekyll:0-bullseye",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "latest"
    }
  }
}

This will start from the image “mcr.microsoft.com/devcontainers/jekyll:0-bullseye” and also add Node.js and npm.

Now, when you open your repository in GitHub Codespaces, you can use Node.js and npm.

For more information about the “features” property, see devcontainer.json reference.

Self-hosting miniflux with docker and provisioning with Ansible

2023-03-25T00:00:00Z

I have been using miniflux for a while now, and I really like it. It’s a great RSS reader.

Here I want to share my experience with self-hosting it with docker and nginx.

The provisioning is done with Ansible.

Pretty simple, and I think it’s a good starting point for anyone who wants to self-host miniflux.

TLDR;

Provisioning with Ansible
Running miniflux with docker
Reverse proxy with nginx

Provisioning with Ansible

The basic idea is to spin up the docker container with miniflux, providing all the necessary env variables to configure it correctly.

Then you can configure nginx to reverse proxy the miniflux container.

E.g. you could host it on https://rss.example.com and then let nginx route the traffic to the container running miniflux.

Running miniflux with docker

You’ll need to install the community.docker ansible galaxy plugin:

ansible-galaxy collection install community.docker

The docker compose file (translated in an Ansible task) looks like this, and is located in roles/miniflux/tasks/main.yml:


- community.docker.docker_compose:
    project_name: miniflux
    definition:
      version: '2'
      services:
        db:
          image: postgres
          restart: unless-stopped
          environment:
            POSTGRES_PASSWORD: "{{ miniflux_password }}"
            POSTGRES_USER: "{{ miniflux_username }}"
          volumes:
            - miniflux-db:/var/lib/postgresql/data
        miniflux:
          image: miniflux/miniflux
          restart: unless-stopped
          environment:
            DATABASE_URL: "postgres://{{ miniflux_username }}:{{ miniflux_password }}@db/miniflux?sslmode=disable"
            RUN_MIGRATIONS: 1
            CREATE_ADMIN: 1
            ADMIN_USERNAME: "{{ miniflux_admin_username }}"
            ADMIN_PASSWORD: "{{ miniflux_admin_password }}"
            POLLING_FREQUENCY: 10
            BASE_URL: "https://{{ miniflux_domain }}"
            HTTPS: on"
          ports:
            - "127.0.0.1:3000:8080"
          depends_on:
            - db
      volumes:
        miniflux-db:
          driver: local
  register: output

- ansible.builtin.assert:
    that:
      - "output.services.miniflux.miniflux_miniflux_1.state.running"
      - "output.services.db.miniflux_db_1.state.running"

As you can see, we’re running a postres container alongside miniflux, exposing the miniflux container port 8080 to the host port 3000. This will later be used by nginx to reverse proxy the traffic.

We’re also setting various environment variables to configure miniflux, and then asserting the services are running.

This means you’ll also need to configure a file containing the variables / secrets.

You could do this in a group_vars file, or in a secrets file.

I’ll use ansible-vault to decrypt when editing and then encrypt the secrets file, like this

#create a new secrets file
touch secrets
#encrypt and decrypt it providing a vault password
ansible-vault encrypt secrets
ansible-vault decrypt secrets

The secrets file looks like this:

miniflux_username: miniflux
miniflux_password: <your password>
miniflux_admin_username: <your username>
miniflux_admin_password: <your password>
miniflux_domain: <your domain>

Reverse proxy with nginx

The nginx configuration looks like this, put it in roles/miniflux/templates/miniflux.conf.j2:


upstream miniflux {
    server 127.0.0.1:3000 max_fails=5 fail_timeout=60s;
}

server {
    server_name    {{ miniflux_domain }};

    listen         80;
    listen         [::]:80;

    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/activity+json application/atom+xml;

    client_max_body_size 16m;
    ignore_invalid_headers off;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://miniflux;
    }
}

In the playbook, we copy the template to the nginx sites-available directory, and then symlink it to the sites-enabled directory.

- name: install nginx
  become: true
  apt:
    name: nginx
    state: present

- name: rm /etc/nginx/sites-enabled/default
  file:
    path: /etc/nginx/sites-enabled/default
    state: absent

- name: setup nginx vhost
  template:
    src=miniflux.conf.j2
    dest=/etc/nginx/sites-available/miniflux.conf

- name: symlink nginx vhost
  file:
    src=/etc/nginx/sites-available/miniflux.conf
    dest=/etc/nginx/sites-enabled/miniflux.conf
    state=link

- name: reload nginx
  service:
    name=nginx
    state=reloaded

PS: you could use handlers here, instead of reloading the service directly, I took it out for simplicity.

The Ansible project

Before running the playbook you need to configure the hosts file.

Create a new file called hosts and add the following:

<your server name> ansible_host=<your ip> ansible_user=<user> ansible_connection=ssh ansible_ssh_private_key_file=<ssh key> ansible_ssh_port=22

Also, add a requirements.yml file to install some dependencies with ansible-galaxy install -r requirements.yml:

---
roles:
  - name: geerlingguy.pip
  - name: geerlingguy.docker

Your project structure should look like this:

.
├── hosts
├── playbook.yml
├── requirements.yml
├── roles
│   ├── app-miniflux
│   │   ├── tasks
│   │   │   └── main.yml
│   │   └── templates
│   │       └── miniflux.conf.j2
└── secrets

Running the playbook

Now you can run the playbook:

ansible-playbook -i hosts miniflux.yml --ask-vault-pass

You’ll be prompted for the vault password you set when encrypting the secrets file.

Programming on an iPad

2024-02-18T00:00:00Z

In this blog post I wanted to share my experience of programming on an iPad Pro (no PC at the moment).

With the right software tools (and optional hardware accessories), an iPad can serve as a powerful mobile development environment.

I’ll get into using

Visual Studio Code on the web
mosh, ssh and bashy stuff with Blink Shell
GitHub Codespaces for casual pull-requests and development
a Raspberry Pi
- ansible provisioning of servers
- self-hosting apps on local network
- vscode server/tunnels for local development
and much more! (even 3d-printing)

What do you need?

Occasional programming on the go, or a full-fledged development environment?

For occasional commits

Go with Github Codespaces, it’s free and you can use it on the go.

Visit vscode.dev and sign in with your GitHub account.

Create a new Codespace starting with one of your repositories on GitHub, you can customize the environment by defining a devcontainer.json (more info here) file in the root of your repository.

Eventually set a spending limit, and you are good to go.

For ease of use you can bookmark the URL of your Codespace, so you can access it quickly, also from your homescreen.

update: haha not so fast, this isn’t a thing anymore apparently, since Apple didn’t like DMA so much

Full-fledged development environment

You could also try out Codesandbox, but I haven’t tried it yet.

You’ll need a Raspberry Pi, or a VPS somewhere.

You can configure a VSCode server instance and connect to it from your iPad, using Remote Tunnels.

Here you can find the official guide to get started.

It takes 5 minutes.

Once you have a VSCode server instance running, you can connect to it from your iPad using Blink Shell or directly from vscode.dev on the web.

From the Blink Shell app, just type code and you’ll be presented with a VSCode instance.

Find the Remote Explorer extension in the sidebar, and select the Remote option.

Connect to your workstation, you also have SSH access to the underlying system directly from the terminal in VSCode!

What about the Raspberry Pi?

A really nice thing about the Raspberry Pi is that it’s a very versatile ARM computer, compact and with a lot of potential.

So how do I use it?

Some examples

Old printer on AirPrint using CUPS

I recently used it to hook up a really old printer on the Raspberry Pi, using CUPS and a USB-to-Serial adapter.

Then I could send documents to print using AirPrint from my iPad.

Arduino and ESP32

By connecting to the Pi via VNC, I can program my Arduino and ESP devices from the iPad, by viewing and interacting with the Pi desktop environment.

3D printing

I design the parts on the iPad, and then I can slice my models using Ultimaker Cura and 3D print them using OctoPrint running on the Pi.

Ansible Hetzner server provisioning

Provisioning of my Hetzner server using Ansible, using VSCode tunnels to my Pi.

Self-hosting apps on local network

Self-hosting apps on my local network, like a Nextcloud, Syncthing or a GitLab instance.

VSCode server/tunnels for local development

I can also use the Pi to run a VSCode server instance, and connect to it from my iPad using Remote Tunnels.

Minimal Ansible Playbook to provision a server

2023-03-21T00:00:00Z

In this blog post, we’ll create a minimal Ansible playbook that will allow you to quickly and easily provision a new server.

With just a few simple steps, you’ll be able to set up a server with all the necessary software and configurations in no time.

Install Ansible

You can do this by following the instructions on the Ansible installation page.

But generally a quick python3 -m pip install --user ansible should do the trick.

Create an inventory file

This is a simple text file that contains the IP addresses of the servers that you want to provision, plus some connection settings.

To create a new inventory file, create a new file called production and add the IP address of your server to it:

server1 ansible_host=<ENTER_YOUR_SERVER_IP_ADDRESS> ansible_user=root ansible_connection=ssh ansible_ssh_private_key_file=<PATH_TO_YOUR_SSH_PRIVATE_KEY> ansible_ssh_port=22

In this file we defined a server creatively named server1 and set some connection settings for it, like the user, ssh private key path etc.

Create a new Ansible playbook

Next, we’ll create a new Ansible playbook. This is a simple YAML file that contains all the instructions for provisioning the server.

To create a new playbook, create a new file called playbook.yml and add the following content:

---
- hosts: all
  become: yes
  tasks:
    - name: install nginx
      apt:
        name: nginx
        state: present

Run the playbook

Now that we have our playbook, we can run it to provision our server.

To run the playbook, run the following command:

ansible-playbook -i production playbook.yml

And that’s it! You now know how to create a minimal Ansible playbook to provision a server.

Christian Fei's Blog - cri.dev

How to fix hanging tests in Node.js

How to use an iPad Pro as an external display

TLDR;

Introduction

What you’ll need

Mirroring to the rescue

Update: UX

Trigger via keyboard shortcut

Trick to get screen mirroring after sleep

Implementing HTTP range requests in Node.js

In a nutshell

Show me some code

Crazy CSS experiments

Exclude specific tags in Eleventy using a custom filter

The exclude filter

The limit filter

The tagList collection and findTagCount filter

Start Kindle script on system boot with init.d

Converting my Kindle to a digital photo frame

Project overview

init.d conf and carousel script

Prepare the images

Display jailbroken Kindle info using lipc-get-prop

How to install Epic Games store on iPad with iOS 18

update 2024-10-12

Displaying RTSP stream on a jailbroken Kindle Paperwhite

The idea

Proof of Kindle

The script

FFmpeg

eips

Prevent Kindle going to sleep

Installation

No ImageMagick? No problem, use FFmpeg!

Display IP address on a jailbroken Kindle using eips

Make the filesystem writable

The script

Install the cron

Rooted / Jailbroke my Kindle Paperwhite

How to add a TP-link Tapo camera to homeassistant

Everyone gets a static IP

create camera credentials in tp-link app

ffmpeg dry-run

Homeassistant setup

PETG I love you, but you're bringing me down

Google domains / Squarespace transfer (using Porkbun and Cloudflare)

Google Sheets got fixed on iPad

Today is my Lucky Backup Day

Google Sheets on iPad? More like 'Google Shiits' 💩

htmx and Alpine.js are actually pretty awesome

ZenGPT: a simple ChapGPT alternative frontend

node.js server and bare functions as views

Integrating with OpenAI’s API

htmx

Alpine.js

open source

Server-sent events (SSE)

Using pure functions as views (with htmx and alpine.js)

example with htmx and alpine

views/messages.mjs

iPad can now control the audio when connected to an external monitor

Improving my tags using OpenAI's Chat completions API

The prompt

Processing the files

The script

Processing the markdown

Prompting the model

Dogfooding

Conclusion

ChatGPT for learning Jamaican Patois

A stupid web component

3d printed stuff over the years

Cable reel

Raspberry Pi 4 case

Cable organizer

ESP32 cases

AirTag holder

Apple Watch desk stand

Rubber duck

The `exclude` filter

The `limit` filter

The `tagList` collection and `findTagCount` filter

`init.d` conf and carousel script

`views/messages.mjs`