Switching Node.js versions manually is as simple as running:

nvm install

However, it would be more convenient if this happened automatically when changing directories or opening a terminal in a specific project folder. This behavior can be achieved using ZSH hooks.

Add the following snippet to your .zshrc file:

# Auto-switch Node.js versions when .nvmrc is present
autoload -U add-zsh-hook

load_nvm_version() {
  if [[ -f .nvmrc ]]; then
    nvm use || nvm install
  fi
}

add-zsh-hook chpwd load_nvm_version
load_nvm_version

With this setup, your Node.js environment will always match the expected version without manual intervention. Bonus: this should work in the built-in terminal of your editor of choice as well.

Update 12/02/2025

Someone pointed out in the comments the existence of fnm. It's a drop-in replacement for nvm, written in rust. It's faster and changes nvm versions out of the box when going into a folder that contains an .nvmrc file. I caved and uninstalled nvm, and removed the custom ZSH hook... 😅

Installing fnm on macOS is easy, run brew install fnm and add the following to your .zshrc:

eval "$(fnm env --use-on-cd --shell zsh)"

Bonus: add an alias to prevent annoying typos alias nvm='fnm'

The Musk of today, though, is a sad story. What was once bold leadership, although argued questionable by many, has morphed into provocation for its own sake. He cozies up to extremists, spreads conspiracy theories, tries to influence foreign politics and elections, and bullies and silences critics while claiming to champion free speech. His companies still build great products, but the man himself is walking controversy – to say the least.

It's a strange legacy: to have revolutionized entire industries, only to ruin it all in real time. For many, admiration has turned to unease. Owning a Tesla, using X, supporting anything he touches – it all carries a weight that didn’t exist before. And the more he spirals, the harder it gets to separate the product from the person, which is unironically a daily reality.

In a parallel universe Musk inspired entire generations about science, space exploration, EVs and using tech to help save the climate. It's just so very sad, it is not the one we live in.

Over the years, I've blogged on and off, sometimes about technical topics, sometimes more personal. I've deleted a bunch of posts along the way and never really stuck to a regular schedule. This time around, I plan to change that. I'm also setting up a dedicated photography page – while I enjoy sharing pictures, I don't always feel the need to write about them.

The internet is shifting again. More people are reclaiming their own space online, moving away from algorithmic feeds and walled gardens. That's something I've always believed in, and having a domain that feels right is part of that.

I've always liked knowing the ins and outs of hosting my own website. Over the years, I've run it on a Raspberry Pi, then moved to DigitalOcean for a while, but I never found all-in-one cloud solutions appealing. I prefer having full control rather than relying on platforms that abstract everything away. I also just enjoy the process of developing it and getting to know how it's done.

Now the site is back home, on my own mini server. An Asus NUC 14 Pro with a 2TB SSD, 64GB of RAM, and a 22-core 4GHz Intel CPU running Linux Debian 12. Overkill for a simple blog? You bet! But I also host a bunch other websites & side projects on it too, so it definitely earns its keep.

So here's to a new chapter – let's see where this goes!

After some troubleshooting, I narrowed the problem down to the storage drive. The NUC was running with a Crucial 2TB P3 Plus NVMe PCIe 4.0 M.2 SSD, which seemed to prevent proper reboots. Swapping it for a Samsung 990 PRO 2TB PCIe 4.0 M.2 SSD instantly resolved the issue – reboots now work without any problems.

If you're facing similar reboot failures with an ASUS NUC 14 Pro, best check your NVMe SSD. Some models, like the Crucial P3 Plus, might have compatibility issues. A drive swap could save you a lot of headaches (and money).

Looks straightforward to me, npm install shiki, import codeToHtml, done!

We now have this basic Code component that looks something like this:

import { useEffect, useState } from 'react';
import { BundledLanguage, codeToHtml } from 'shiki';

export interface CodeProps {
  children?: string;
  lang: BundledLanguage;
}

export const Code = (props: CodeProps) => {
  const { children: code, lang } = props;

  const [highlightedCode, setHighlightedCode] = useState<string>();
  useEffect(() => {
    if (!code) {
      return;
    }

    codeToHtml(code, { lang, theme: 'dracula' }).then(setHighlightedCode);
  }, [code, lang]);

  if (!code) {
    return null;
  }

  return (
    <pre className="bg-slate-800 text-slate-400 p-4 rounded overflow-x-auto">
      {highlightedCode ? (
        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
      ) : (
        <code>{code}</code>
      )}
    </pre>
  );
};

And can be used as follows <Code lang="javascript">console.log('Hello world')</Code>.

It will first render the code as raw text, and once the client side bundles are loaded & executing it will replace it with the highlighted html code. Great, works perfectly fine (so I thought). And I can see in the inspector it's only loading what it needs, that's just an additional 288 KB over the wire!

Cloudflare deploy successful, but nothing to see?

The CI showed successful deployment logs, but the page kept on showing "Nothing is here yet". The function logs in the Cloudflare console also didn't reveal much more besides An unknown error occured. (Code: 8000068). That's weird huh!?

After some time I came across this PR that would introduce better feedback in the wrangler CLI tool, that's also what I use to deploy. So I tried building locally and deploying with the updated version (3.57) and - surprise surprise - it did show an error!

🌍  Uploading... (87/286)
✨ Success! Uploaded 87 files (199 already uploaded) (2.06 sec)
✨ Uploading _headers
✨ Uploading _redirects
✨ Uploading Functions bundle

🌎 Deploying...
✘ [ERROR] Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)

❌ Deployment failed!

I never really gave the worker bundle size a lot of thought, and focused mostly on keeping the client light. The worker bundle is the function & essentially our server side application. While the client only loads what it needs when it's used, all those files need to be bundled in the function in order to maybe serve them when they are requested.

The build folder size also substantially increased from ~1 MB to ~10 MB . Important to note though; this is full Vite build output containing all client & server files, not necessarily the worker bundle.

# without shiki implementation
➜ du -sh build
1.2M	build

# with shiki implementation
➜ du -sh build
9.7M	build

A more fine-grained bundle

Going back to the docs I noticed a section about bundles sizes, more fine-grained bundles and even specifically Cloudflare Workers. Although that last section was more focused on generated highlighted html code server side, which is not exactly what we want to do here.

I changed the implementation to use the slimmed down core highlighter and explicitly define which themes and languages we want to support. Not ideal if you work with a CMS and and just want to be able to reference whatever you like without changing your code. But I figured I'll just include some sensibles that I assume I will be using mostly.

The Code component is now a bit more explicit and bit less flexible and looks like this:

import { useEffect, useState } from 'react';
import { BundledLanguage } from 'shiki';

export interface CodeProps {
  children?: string;
  lang: BundledLanguage;
}

export const Code = (props: CodeProps) => {
  const { children: code, lang } = props;

  const [highlightedCode, setHighlightedCode] = useState<string>();
  useEffect(() => {
    if (!code) {
      return;
    }

    // https://shiki.style/guide/install#fine-grained-bundle
    import('shiki/core').then(async ({ getHighlighterCore }) => {
      const highlighter = await getHighlighterCore({
        themes: [
          import('shiki/themes/dracula.mjs'),
        ],
        langs: [
          import('shiki/langs/javascript.mjs'),
          import('shiki/langs/typescript.mjs'),
          import('shiki/langs/json.mjs'),
          import('shiki/langs/shell'),
          import('shiki/langs/console.mjs'),
        ],
        loadWasm: await import('shiki/wasm'),
      });

      setHighlightedCode(highlighter.codeToHtml(code, { lang, theme: 'dracula' }));
    });
  }, [code, lang]);

  if (!code) {
    return null;
  }

  return (
    <pre className="bg-slate-800 text-slate-400 p-4 rounded overflow-x-auto">
      {highlightedCode ? (
        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
      ) : (
        <code>{code}</code>
      )}
    </pre>
  );
};

Awesome, still works! Let's deploy it and see how it looks on Cloudflare.

...

OK, let's try to build & deploy locally again.

✘ [ERROR] Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)

# with fine-grained shiki implementation
➜ du -sh build
2.3M	build

The final build folder output decreased to ~2 MB but the resulting worker bundle apparently was still too large. I tried removing all languages but 1, but the issue persisted. Probably if I would strip enough code from the app and remove some other dependencies I could maybe get it below the 1 MB limit? Not really an option.

Using esm.sh CDN

The docs also mentioned using Shiki from CDN such as esm.sh. But what is esm.sh?

It's designed to provide an easy way to use ECMAScript modules (ESM) from npm in web browsers. It acts as a CDN (Content Delivery Network) that allows developers to import JavaScript modules directly into their browser applications without needing to install them locally or bundle them using a tool like Webpack.

Key features and benefits of esm.sh include:

ESM Compatibility: esm.sh ensures that npm packages are transformed into ES modules that can be natively imported by modern browsers.

Versioning: Developers can specify which version of a package they want to use, similar to how npm works.

CDN Performance: As a CDN, esm.sh provides fast, cached access to modules, improving load times and reducing server load.

Automatic Transpilation: It handles the transpilation of CommonJS and other module formats to ESM, making it easier to use packages that aren't originally authored as ES modules.

Not as in loading 1 big bloated file and accessing through window, but really by embedding it as a module and relying on ESM imports using <script type="module">...</script>. That doesn't (really) work with React, even though you can render a script module within your component, you'll end up with a lot of unpredictable behaviour and the code not executing when you expect it to.

The framework I'm using however, Remix (any modern web framework really) also loads its client bundles through modules. So I'm guessing I can make use of similar code within my React component itself without trying to render a separate script module within it?

Attempt 3 & a refactor later our Code component now is again super flexible supporting any theme and any language, while it has (virtually) 0 impact on our client & server bundle, it now looks like this:

import { useEffect, useState } from 'react';
import { BundledLanguage } from 'shiki';

export interface CodeProps {
  children?: string;
  lang: BundledLanguage;
}

export const Code = (props: CodeProps) => {
  const { children: code, lang } = props;

  const [highlightedCode, setHighlightedCode] = useState<string>();
  useEffect(() => {
    if (!code) {
      return;
    }

    // @ts-expect-error: import from esm.sh to avoid large worker bundle
    import('https://esm.sh/shiki@1.5.2').then(async ({ codeToHtml }) => {
      setHighlightedCode(await codeToHtml(code, { lang, theme: 'dracula' }));
    });
  }, [code, lang]);

  if (!code) {
    return null;
  }

  return (
    <pre className="bg-slate-800 text-slate-400 p-4 rounded overflow-x-auto">
      {highlightedCode ? (
        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
      ) : (
        <code>{code}</code>
      )}
    </pre>
  );
};

It works, and this time it also deploys to Cloudflare! Our own server & client bundle remains unaffected and Shiki is loaded from a blazingly fast CDN, resulting in even a smaller size than when it was bundled as ESM module originally, with only 279 KB extra over the wire.

The only downside is that you don't have types out of the box when using TypeScript with esm.sh.

Conclusion

For this type of package & use-case I think it makes perfect sense to load it from CDN. Noting that this would not have been an issue if you deploy your web app as a Node container or use some other more classic way of hosting Node.js web apps.

But personally I like the idea of "not having a server" & deploying my website to a distributed cloud function with fast response times across the globe regardless of users their geographical location. It's fast, free, lightweight, you have preview deploys and it requires 0 maintenance or follow up.

Demo: https://3feb5f78.wouterds.pages.dev/example-code-block

If wrangler would have failed fast to begin things would have been clearer earlier on. Luckily that PR is merged now and as of v3.57 it will fail fast.

This was a different route that the one we took when flying to Japan. As time elapsed and we got more sun I could increasingly see better the seemingly infinite arctic surface.

Found it really impressive to see, even from 35.000 feet in the air.

Fujifilm X-S10, Fujinon XF18-55mm F2.8
Edit: Adobe Lightroom

Around Hiroshima, there are some more things to see that we didn't have time for in the end, such as the Itsukushima Shrine, which is located on the shores of Miyajima, not too far from Hiroshima. As well as some smaller islands & hikes/nature around the area.

One of the only buildings that was left standing after the Atomic Bomb dropped on Hiroshima on August 6th, 1945, was what is now called "the Atomic Bomb Dome." While most structures at the time were wooden, this building was made of stone, mortar, steel, and copper. Back then, it was famous for being so unique and prestigious.

The Atomic Bomb Dome was built in 1915 as a facility to exhibit and sell products from Hiroshima prefecture. It also held Hiroshima prefectural art exhibitions. At the beginning of its establishment, it was called “Hiroshima Prefectural Products Display Hall,” but later it was renamed “Hiroshima Prefectural Product Display Center” and “Hiroshima Prefectural Industrial Promotion Hall.”

The first atomic bomb in human history exploded at an altitude of about 160 meters southeast of the Hiroshima Prefectural Industrial Promotion Hall and about 600 meters from it. The pressure of the blast was 35 tons per square meter and the wind speed was 440 meters per second. The building was wrecked by the blast and heat rays and burned down by the ensuing fire. Since the blast worked almost vertically, the central part of the main building miraculously escaped collapse, but everyone who was in the building died instantly. After the war, the remnants of the former Industrial Promotion Hall came to be called the Atomic Bomb Dome by citizens due to the shape of the top canal and steel frame.

Near the Hiroshima Castle, which was largely destroyed by the bombing, there is a tree left standing that survived the bombing - a "Hibaku Jumoku" (survivor tree). This weeping willow is the closest tree to the hypocenter (370m) that survived the blast.

Today in Hiroshima, there is nothing besides the peace memorials that would indicate the city was once wiped away by an atomic bomb, just 80 years ago. Overall, I found it very impressive and humbling to see and walk around the city now.

PS: while you're in Hiroshima I would definitely recommend the traditional okonomiyaki, but don't go to that 1 building with 20 okonomiyaki restaurants in it, there are literally only tourists inside. Instead go to this place across the road called "Shintenchi Mitchan", it's authentic & super delicious! We spent about 2000¥ a person (iirc).

Fujifilm X-S10, XF 23mm f2
Edit: Adobe Lightroom

Fujifilm X-S10, XF 23mm f2
Edit: Adobe Lightroom

Fujifilm X-S10, XF 23mm f2
Edit: Adobe Lightroom
Location: 51.00279, 3.58592

Built in 1921 in Charleroi, Belgium, the IM cooling tower was part of one of the country's largest coal-fired power plants, aiding industrial growth in the interwar period. Owned by Electrabel, it supplied electricity and heat to six million people and was the primary energy source for greater Charleroi by 1977.

Utilizing wind to cool water during production peaks, the tower could handle up to 480,000 gallons per minute. In the 1970s, the plant transitioned from coal to gas, expanding to six units with a total capacity of 1 GW by 1990, earning the unofficial title "Gigawatt Power Plant."

However, a 2006 Greenpeace report revealed the plant contributed to 10% of Belgium's CO2 emissions and harbored pathogenic bacteria, prompting its recognition as dangerous and non-convertible. In 2007, the plant ceased operations and was closed.

Now a couple of years later there are many more people into the hobby and way more info & knowledge. There are also simulators to learn & test and a wider & more accessible range of products to get into it. This little drone for example was only a $100 on Banggood. I think it's perfect for a beginner to get into the hobby as you can fly it indoors and because of its little bumpers you're less likely to have bad crashes.

I find it insanely cool to be able to fly "first-person view" and I can't wait to try outside (it also comes with a stronger battery that gives more power for outdoor flying)!

Now, let's talk about the elephant in the Korean room – smog. I landed right smack in the middle of a smog alert. Picture handing out masks at the airport, minimal visibility, and an overall dystopian vibe. The first two days felt like I was breathing in a gray filter, but hey, things got better. I upgraded my mask game from KF80 to KF94 – not just for the cool factor, but because the government was sending out alerts that made me briefly think North Korea was launching missiles. Cue panic mode. And trust me, when you're on a bus, it's a symphony of alarms.

Public transport in Seoul? Absolutely fantastic. Cheap, efficient, and a unified payment system for buses, metro, and trains. I practically spent loose change on transport over five days. Sadly, my grand plan to visit the North Korean border got derailed last minute due to "wild boar" – or was it North Korea flexing its muscles with a missile test? Who knows. Despite the disappointment, Seoul was a blast, and I'm already plotting a longer trip to Japan, with a pit stop in Seoul if the world ever recovers from this corona chaos. And oh, you're probably wondering about my trip pics by now, I sifted through over 600 – smog be damned – to give you the cream of the crop!

Now this is nice isn't it? It's common to have some linters run as a pre-commit hook as they'll prevent you from committing 💩 code. Except there's one little issue with those git hooks though. They are not shared by default. Each team member would need to configure the git hooks manually. Usually this happens by following setup instructions in a README. And this creates another problem: it's not enforced. People might simply forget, read over it, re-clone there repo and skip setup...

And because it's not enforced...

We might end up in the scenario where you're reviewing a PR but CI has failed because somebody "didn't follow the rules". And then you don't want to be that guy that rejects it, but you'll have to! The other dev then needs to incorporate the feedback, you need to review again. That's just a waste of time & effort, and is polluting your git history. If we could only prevent this 😰...

Husky to the rescue 🚑

Luckily, for (Node)JS projects there's this package Husky. It allows you to configure scripts as git hooks in your package.json and it can enforce this because it installs the commit hooks on postinstall. So all you really need to do is add Husky to your dev dependencies: yarn add --dev husky. And add something like the following configuration to your package.json.

"husky": {
  "hooks": {
    "pre-push": "yarn lint"
  }
}

Now I went with pre-push because linting takes a few seconds and I don't like to wait a few seconds every commit I do. But I also don't mind rebasing those commits before I push them to clean them up if there would be issues. The important thing here is: it doesn't let me push 💩 code.

Now get to it and add Husky 🐶 to your project!

So, if you're also starting to feel a bit nostalgic... It's super easy to run your own Quake III Arena server! No installing of packages and trial & error compiling for hours. Thanks to Docker you'll be up and running in just a couple of minutes! (I am assuming you have docker installed though)

Installation

There's actually not really any installation at all, you just need to copy a few files. For your convenience I've made a script that does that for you, run the following command and you're good to go! If you still want to customize some server settings, edit the ./quake3/server.cfg file after the script finished.

curl -sSL https://github.com/wouterds/rpi-quake3-server/raw/master/install.sh | sh

Running

cd ./quake3
docker-compose up -d

Demo

Resources

It runs without any issues and uses about 30MB memory and +-20% CPU on average (on model 3B+).

Client

I'm using the ioquake3 client for macOS and on Windows the Steam version. But ioquake3 is available for any platform, you just need the pak0.pk3 file. That's it, kick some ass 🎮!

A few years ago I made this mini indoor weather station and I thought I'd be cool to convert my breadboard project into a freeform circuit. Admittedly, it was more difficult than I expected and I had a to start over more than once before I was really pleased with the outcome.

I also opensourced the code of the circuit on GitHub for those interested.

YES, there is docker stats.. but it's not always as easy to read. I just like this little cli tool way better!

You can install it with brew (brew install ctop) on macOS or just download the binary and move it manually to your bin folder. It comes with releases for Linux, macOS and Windows. And they even have an arm compatible version for platforms like Raspberry Pi 😍!

You could also just run it as a container, but that's only supported on x86 arch.

docker run --rm -ti \
  --name=ctop \
  -v /var/run/docker.sock:/var/run/docker.sock \
  quay.io/vektorlab/ctop:latest

But yesterday they played here at the Ancienne Belgique in Brussels, and I couldn't resist. I'm glad I went to go see them, they played a lot of their older songs and it was real throwback party 🎸🤩!

Goal

The goal is simple: a basic http endpoint that returns some json back with sensor readings, like below.

{
  "illuminance": {
    "visible": 905.0,
    "full": 1255.0,
    "ir": 347.0
  },
  "temperature": 24.51,
  "humidity": 37.49,
  "pressure": 1027.82
}

Hardware

First things first, getting the hardware needed! I've gotten everything of eBay for only a couple of bucks. I assume you have a breadboard and some jump wires but I'll link them too, just to be sure.

• ESP8266 NodeMCU dev kit - $3.77

• TMP102 sensor - $2.25

• TSL2561 sensor - $1.48

• BME280 sensor - $3.78

• 400 points solderless breadboard - $1.85

• 40 jump wires - $1.50

Wiring everything up

I don't have a schematic or anything, but the wiring is quite simple. Connect the 3.3V of the ESP8266 NodeMCU with the VCC, GND with GND, D1 with SCL and D2 with SDA pins of the sensors.

+---------------------------------------------+
| ESP8266 NodeMCU | TSL2561 | BME280 | TMP102 |
|-----------------|---------|--------|--------|
| 3.3V            | VCC     | VCC    | VCC    |
| GND             | GND     | GND    | GND    |
| D1              | SCL     | SCL    | SCL    |
| D2              | SDA     | SDA    | SDA    |
+---------------------------------------------+

Software

I'm not going to go step by step through the code as it is quite straightforward but basically the only thing you really need to do is download the required libraries and extract them here ~/Documents/Arduino/libraries (or wherever it might be on Windows 🤷‍♂️).

Libraries

• adafruit-sensor

• adafruit-tsl2561

• adafruit-bme280

• sparkfun-tmp102

Program

This is the program, should work pretty much out of the box if everything is wired correctly. Just don't forget to substitute your WiFi credentials in WIFI_SSID and WIFI_PASS. Also my BME280 its address is 0x76, but sometimes it lives on 0x77 as well. You can double-check this using the I2C scanner.

#include <Wire.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <Adafruit_Sensor.h>
#include <TSL2561.h>
#include <Adafruit_BME280.h>
#include <SparkFunTMP102.h>

// Configuration
#define WIFI_SSID ""
#define WIFI_PASS ""
#define WEB_SERVER_PORT 80
#define I2C_ADDR_TSL2561 0x39
#define I2C_ADDR_BME280 0x76
#define I2C_ADDR_TMP102 0x48

// Web server
ESP8266WebServer webServer(WEB_SERVER_PORT);

// Sensors
TSL2561 tsl2561(I2C_ADDR_TSL2561);
Adafruit_BME280 bme280;
TMP102 tmp102(I2C_ADDR_TMP102);

void setup()
{
  // Setup I2C
  Wire.begin(D2, D1);

  // Setup Serial
  Serial.begin(9600);
  Serial.println();

  setupWiFi();
  setupWebServer();
  setupSensors();
}

void loop()
{
  webServer.handleClient();
}

void handleRoot()
{
  Serial.println("[WebServer] Request: /");

  // Read illuminance (lx)
  float visible = tsl2561.getLuminosity(TSL2561_VISIBLE);
  float full = tsl2561.getLuminosity(TSL2561_FULLSPECTRUM);
  float ir = tsl2561.getLuminosity(TSL2561_INFRARED);

  // Read temperature (°C)
  float temperature = readTemperature();

  // Read humidity (%)
  float humidity = bme280.readHumidity();

  // Read pressure (hPa)
  float pressure = bme280.readPressure() / 100;

  // Build response
  String response = "";
  response += "{";
  response += "\"illuminance\":{";
  response += "\"visible\":";
  response += visible;
  response += ",\"full\":";
  response += full;
  response += ",\"ir\":";
  response += ir;
  response += "}";
  response += ",\"temperature\":";
  response += temperature;
  response += ",\"humidity\":";
  response += humidity;
  response += ",\"pressure\":";
  response += pressure;
  response += "}";

  // Send response
  webServer.send(200, "application/json", response);
}

float readTemperature() {
  float bme280Temperature = bme280.readTemperature();
  float tmp102Temperature = tmp102.readTempC();

  return (tmp102Temperature + tmp102Temperature + bme280Temperature) / 3;
}

void setupWiFi()
{
  Serial.println("[WiFi] Setup");
  Serial.print("[WiFi] Connecting to: ");
  Serial.println(WIFI_SSID);

  WiFi.begin(WIFI_SSID, WIFI_PASS);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(200);
    Serial.print(".");
  }
  Serial.println();

  Serial.println("[WiFi] Connected!");
  Serial.print("[WiFi] IP: ");
  Serial.println(WiFi.localIP());
}

void setupWebServer()
{
  Serial.println("[WebServer] Setup");
  webServer.on("/", handleRoot);

  Serial.println("[WebServer] Starting..");
  webServer.begin();
  Serial.println("[WebServer] Running!");
}

void setupSensors()
{
  setupSensorTSL2561();
  setupSensorBME280();
  setupSensorTMP102();
}

void setupSensorTSL2561()
{
  Serial.println("[TSL2561] Setup");
  Serial.print("[TSL2561] Connecting..");

  while (!tsl2561.begin())
  {
    delay(200);
    Serial.print(".");
  }
  Serial.println();

  Serial.println("[TSL2561] Connected!");
}

void setupSensorBME280()
{
  Serial.println("[BME280] Setup");
  Serial.print("[BME280] Connecting..");

  while (!bme280.begin(I2C_ADDR_BME280))
  {
    delay(200);
    Serial.print(".");
  }
  Serial.println();

  Serial.println("[BME280] Connected!");
}

void setupSensorTMP102()
{
  Serial.println("[TMP102] Setup");
  Serial.println("[TMP102] Connecting..");

  tmp102.begin();

  Serial.println("[TMP102] Assuming connected!");
}

Normally if you now compile & upload the above code to your ESP8266 module it should print out the IP address somewhere on the serial console.

[WiFi] Setup
[WiFi] Connecting to: Wouter's Place
..................................................................
[WiFi] Connected!
[WiFi] IP: 10.10.10.77
[WebServer] Setup
[WebServer] Starting..
[WebServer] Running!
[TSL2561] Setup
[TSL2561] Connecting..
[TSL2561] Connected!
[BME280] Setup
[BME280] Connecting..
[BME280] Connected!
[TMP102] Setup
[TMP102] Connecting..
[TMP102] Assuming connected!

And when making an http request to this ip you should get the sensor readings as json back 😄!

TLDR

You can find the entire project on Github.

Now the reason why there's so many issues about this is because there's just no easy fix and it can be triggered by a wide range of possible problems. But really, it just hides the underlying issue. Usually it happens though after those goddamned React Native upgrades 🙄...

Out of my own experience a few things that helped and resolved the issue for for me in the past. I don't guarantee that it will work but they're all quite harmless so it doesn't hurt to try them one by one. And I'll keep this list updated whenever I come across it again and find a new way to fix it!

What you can try

1. Re-install node_modules

rm -rf ./node_modules
npm install

Something additional you could do is also remove your node caches before re-installing dependencies.

rm -rf ./node_modules
npm cache clean --force
npm install

2. Delete react native caches

watchman watch-del-all
rm -rf $TMPDIR/react-*
rm -rf $TMPDIR/metro-*
rm -rf $TMPDIR/haste-*

3. Remove generated build data

rm -rf ios android
react-native eject
git checkout ios android

4. Force build the React modules manually

• Open XCode

• Clean (cmd + shift + k)

• Select React as the scheme in Xcode and build it (cmd + b)

• Build the library that is failing (e.g. RCTLinking)

• Build your app again

5. Have you tried turning it off and on again?

Kind of a joke, but also not really. I really had it working sometimes after a random reboot 🤷‍♂️.

A few minutes later it hit me, the font was thinner than it used to be! Apparently Apple has changed the font rendering in macOS Mojave. The change is minorly visible in native apps like the Terminal.

But in Electron based apps like VSCode it's much more noticeable if you're used to a thicker font.

Since I basically look all day long at this editor I was a bit annoyed by the change. Luckily it's easy to change it back to how it used to be. Just run the following command in the terminal, reboot your machine, and all should be fine again.

defaults write -g CGFontRenderingFontSmoothingDisabled -bool FALSE

Hope this was helpful!

But what is it really? A short explanation from the GitHub blog;

When you’re building software with people from around the world, sometimes it’s important to validate that commits and tags are coming from an identified source. Many open source projects and companies want to be sure that a commit is from a verified source. GPG signature verification on commits and tags makes it easy to see when a commit or tag is signed by a verified key that GitHub knows about.

Setting it up

So now we know what it is, how do you get it? Whether or not you need it is something else and for you to decide. But basically it will require you to entire your password whenever you sign a commit.

Generating a GPG key

If you're on mac, you probably want to install latest GPG binaries using homebrew.

brew install gpg

Once you have the latest gpg tools installed you can generate a key using the following command.

gpg --full-generate-key

Follow the instructions and accept the defaults, for the max key length Github recommends not going above 4096. When asked for your email address, make sure you enter your verified Github email.

Exporting public GPG key & adding to GitHub

After the process completed you can check if everything went well by running the following command. This will output a list of GPG keys, copy the GPG key id, in this case E0FDB38622C5CF52.

gpg --list-secret-keys --keyid-format LONG

Now run the following command with your GPG key id you copied earlier to export the public key. Copy the output (your public key) and add it to your GitHub account.

gpg --armor --export E0FDB38622C5CF52

Configuring git

Last step is to configure git locally on your machine so it knows about your signing key. Run the following command, again substitute the key id with the one you copied earlier.

git config --global user.signingkey E0FDB38622C5CF52

You also want to add the following to your ~/.bash_profile, ~/.profile or ~/.zshrc file - depending on what you using. I use ZSH so I added it to my ~/.zshrc file at the end.

export GPG_TTY=$(tty)

Usage

To sign a specific commit, e.g. for a release, just add the -S flag in your command (you can use the same flag for signing tags). You will be prompted to enter the password used when generating the GPG key. Git won't ask everytime for the password though, I (think) once you entered your password it keeps a session open for ~15 minutes. If you commit again signed it will prolong this session.

git commit -S -m ":memo: Updated readme"

If you push now your signed commit you will see it pops up on GitHub with a verified badge next to it.

Bonus

Enable autosigning of commit globally can be done using the following command. Note that this will sign all commits for all your different projects, and thus will require you to enter your password often.

git config --global commit.gpgSign true

Or if you want just all your tags/releases signed run the following command.

git config --global tag.gpgSign true

That's it!

Other interesting links

• https://help.github.com/articles/verifying-your-email-address/

• https://help.github.com/articles/generating-a-new-gpg-key/

• https://help.github.com/articles/associating-an-email-with-your-gpg-key/

• https://help.github.com/articles/telling-git-about-your-signing-key/

• https://help.github.com/articles/signing-commits/

• https://help.github.com/articles/adding-a-new-gpg-key-to-your-github-account/

I've already been a few times to Kompass but never had to queue as long as today. I think we arrived at 00:45 and were only inside by 01:30. Not sure if everyone was just arriving at the same time or the security checks were more thoroughly, but that could have been definitely a bit smoother and faster.

I briefly checked out Reinier Zonneveld, which was also good, but spent most of my time at Boris Brejcha. I didn't make it till the end of the set however 😔, went home around 05:30, because dead ☠️.

Definitely go check him out if he's around. I liked it much better than when he plays at a (big) festivals!

Here is the result 😄!

It is maybe a bit slow 🐌, but those miro metal gearmotors come in a wide range of variations with different RPM speeds and torque. I think I used 30 RPM, but they sell them up to 1000 RPM if I recall correct.

Something to consider is though that faster motors will probably have a higher peak current ⚡️, which might affect the Pi (unexpected reboots etc) quicker when running low on batteries. Another thing to consider is that they will have less torque (and will be less powerful) when clashing with your opponent, when going uphill or when you're on rough ground etc.

Just order a few variations and experiment a bit with it 🤪!

Parts & cost

When you have all the parts laying around, it's a fun afternoon project to do. If you still need to get the parts it should cost no more or around $50. I didn't include the PS3 controller in the price since I assume you have it laying around. But you can also use knockoff PS3 controllers from eBay if you like. I also didn't include the Pritt Tack glue pads as you don't really need them and might as well use some glue or even tape.

I get most of my stuff from Pimoroni, they have an awesome shop with a lot of high quality parts and fast worldwide shipping for a reasonable price. But sometimes you can find some basic electronics cheaper on eBay, the trade-off is that you will probably have to wait a few weeks for it to arrive.

• Pololu Zummo Chassis - $26

• Pololu Sumo Blade - $4

• Raspberry Pi Zero W - $12

• Dual H-Bridge Motor Driver - $1

• 5V DC-DC step up boost converter - $1

• 2x Micro Metal Gearmotor - $5

• Pritt Tack Adhesive Glue Pads

• Old PS3 controller

Code & schematics

For now I just dumped the code on Github, might add some explanation later on. But if you follow my previous linked tutorial about interfacing a PS3 controller using NodeJS everything should be clear. Wiring the electronics should also be pretty straightforward if you have some basic knowledge, but will add some additional info and schematics if there would be demand for that.

👉 https://github.com/wouterds/raspberry-pi-ps3-battlebot

To give you a more visual example of what we'll be making, see the GIF below.

Hardware requirements

• A PS3 controller

• A Raspberry Pi Zero W

• A breadboard

• Some LEDs

• Some jump wires

Prerequisites

I assume you have already installed Raspbian on your Raspberry Pi. I also assume you already have NodeJS installed on your Raspberry Pi (use a version lower than 10, I used 9.9.0). And lastly I also assume you have your PS3 controller already paired. If you haven't please follow those guides first.

Project setup

Native dependencies

Before we can get started we'll need to install the joystick lib. This will expose the PS3 controller on /dev/input/js0. Run the following commands to install joystick.

sudo apt-get update
sudo apt-get install -y joystick

Normally if you run now ls /dev/input/js* you should see /dev/input/js0 popping up in the output. Test the joystick by running jstest /dev/input/js0 and press some buttons to see if it works.

Now that is out of the way let's create the required files, we will need only 2 files, index.js which will contain our app and package.json for our dependencies. Create both files and paste the following contents in package.json.

{
  "dependencies": {}
}

Reading out the PS3 controller

Install and save the following node dependency by running npm i --save joystick. Open up index.js and import the lib and add two listeners for the button event and axis event. Log the output to the console so we can see if that's working and what's actually inside these events.

// Libs
const joystick = require('joystick');

// Init PS3 controller, 0 = /dev/input/js0
const ps3Controller = new joystick(0);

// On button press
ps3Controller.on('button', button => {
  console.log({ button });
});

// On axis movement
ps3Controller.on('axis', axis => {
  console.log({ axis });
});

Buttons

First try, let's see if we can get some output, run the code by executing npm run .. When you press some buttons you should get something like the following output.

{ button: { time: 4294954706, value: 1, number: 0, type: 'button', id: 0 } }
{ button: { time: 4294954956, value: 0, number: 0, type: 'button', id: 0 } }
{ button: { time: 4294961896, value: 1, number: 1, type: 'button', id: 0 } }
{ button: { time: 4294962076, value: 0, number: 1, type: 'button', id: 0 } }
{ button: { time: 4294963226, value: 1, number: 2, type: 'button', id: 0 } }
{ button: { time: 4294963416, value: 0, number: 2, type: 'button', id: 0 } }
{ button: { time: 4294964146, value: 1, number: 3, type: 'button', id: 0 } }
{ button: { time: 4294964386, value: 0, number: 3, type: 'button', id: 0 } }

I pressed cross, circle, triangle, square (anyone else GTA cheats throwback 😂?). It looks like we can identify the button by mapping the number prop. It also seems like we get 2 events for one button interaction; one on key down and one on key up, respectively with value 1 and value 0.

Joysticks

When you move the joysticks you should see output similar to this.

{ axis: { time: 524240, value: -2703, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 524300, value: -1352, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 524300, value: -11486, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 524300, value: -13513, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 524360, value: -5068, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 524360, value: -24999, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 524370, value: -28039, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 524430, value: -5743, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 524430, value: -32767, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 524480, value: -6081, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 524610, value: -5406, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 524660, value: 0, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 524660, value: 0, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525270, value: 6756, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525280, value: 9458, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525340, value: 19931, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525400, value: 30403, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525400, value: 32767, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525460, value: 2026, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 525520, value: 3040, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 525760, value: 3715, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 525820, value: 7431, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 525820, value: 22971, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525830, value: 5405, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 525830, value: 19931, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 525880, value: 0, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 525880, value: 0, number: 4, type: 'axis', id: 0 } }
{ axis: { time: 526850, value: 7094, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 526850, value: 9120, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 526900, value: 16215, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 526910, value: 18579, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 526970, value: 29389, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 527030, value: 32767, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 527400, value: 29727, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 527410, value: 21620, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 527460, value: 0, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528070, value: -4392, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528130, value: -20945, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528140, value: -23985, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528190, value: -32767, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528680, value: -22972, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528740, value: -10473, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528740, value: -3379, number: 3, type: 'axis', id: 0 } }
{ axis: { time: 528800, value: 0, number: 3, type: 'axis', id: 0 } }

I did the following with the right joystick: up, down, right, left. In the default, center position, the value is always 0. The range seems to go from -32767 till 32767. And number 4 seems to be the right y-axis and number 3 the right x-axis.

Parsing the events

I wrote some logic to parse our events into useable blocks, our code looks as the following now.

// Libs
const joystick = require('joystick');

// Init PS3 controller, 0 = /dev/input/js0
const ps3Controller = new joystick(0);

// On button press (triggers when pressed and when released)
ps3Controller.on('button', button => {
  switch (button.number) {
    case 0: // cross
      console.log('cross', button.value);
      break;
    case 1: // circle
      console.log('circle', button.value);
      break;
    case 2: // triangle
      console.log('triangle', button.value);
      break;
    case 3: // square
      console.log('square', button.value);
      break;
  }
});

// On axis movement
ps3Controller.on('axis', axis => {
  switch (axis.number) {
    case 1: // left y-axis
      console.log('left y-axis', axis.value);
      break;
    case 4: // right y-axis
      console.log('right y-axis', axis.value);
      break;
  }
});

When you run the script now you will get some more readable output. Give it another try and see if everything matches with what we wrote. Something else you might have noticed by now is that it sends an event on start as well with the default state. This can be handy to immediately act upon (set some things in their default state) before we actually interact with the controller.

Wiring the LEDs with the Raspberry Pi

Before we continue with the code, lets hook up some LEDs to our Raspberry Pi. I wired them like this (I'm using physical pin numbers to be clear).

White (1): 26
Blue: 21
Green: 23
Yellow: 22
Red: 24
White (2): 19

Linking the LEDs with the PS3 controller

It would be fun if we could make the LEDs represent some of our button states, no..? YES OF COURSE THAT'D BE SO MUCH FUN 🥳! Let's start off by installing some more node dependencies so we can communicate with the GPIO; npm i --save raspi raspi-gpio. Then load the libraries and initialize the board as follows.

const raspi = require('raspi');
const gpio = require('raspi-gpio');

raspi.init(() => {

  ..

});

Now initialize some digital outputs and write each button value to a different led.

..

const ledBlue = new gpio.DigitalOutput('P1-21');

..

  case 0: // cross
    ledBlue.write(button.value);
    break;

..

Your entire file should now look like something like this.

// Libs
const joystick = require('joystick');
const raspi = require('raspi');
const gpio = require('raspi-gpio');

// Init PS3 controller, 0 = /dev/input/js0
const ps3Controller = new joystick(0);

// Init Raspi board
raspi.init(() => {
  // Define digital outputs
  const ledYellow = new gpio.DigitalOutput('P1-22');
  const ledRed = new gpio.DigitalOutput('P1-24');
  const ledBlue = new gpio.DigitalOutput('P1-21');
  const ledGreen = new gpio.DigitalOutput('P1-23');

  // On button press (triggers when pressed and when released)
  ps3Controller.on('button', button => {
    switch (button.number) {
      case 0: // cross
        ledBlue.write(button.value);
        break;
      case 1: // circle
        ledYellow.write(button.value);
        break;
      case 2: // triangle
        ledGreen.write(button.value);
        break;
      case 3: // square
        ledRed.write(button.value);
        break;
    }
  });


  // On axis movement
  ps3Controller.on('axis', axis => {
    switch (axis.number) {
      case 1: // left y-axis
        console.log('left y-axis', axis.value);
        break;
      case 4: // right y-axis
        console.log('right y-axis', axis.value);
        break;
    }
  });
});

And when you run it now using sudo node . you should be able to see the LEDs light up on button press and turn off again on button release 😮!

Why sudo 🤔

We need to use sudo because to be able to interact with the GPIO we need admin privileges. There's ways around this, but out of scope for this guide. For now I hope everything is still working till this point, and if so, great success!

PWM outputs

There are still 2 LEDs left unused and we also haven't used our joysticks yet? Let's change that, to do this we'll make use of PWM (Pulse Width Modulation). There is real PWM and soft PWM, the latter emulates it (software PWM) while the real one is done by the Raspberry Pi. I'm not going to go into detail but we'll use soft PWM as it will be sufficient for this guide and most applications.

Using PWM we can output a signal between 0 and 1 instead of a purely digital signal which is just 1 or 0. So we could map our joystick value to a scale between 0 and 1 and link that to the LED.

First initialize the 2 software PWM outputs as the following.

const pwmOutput1 = new pwm.SoftPWM('P1-19');
const pwmOutput2 = new pwm.SoftPWM('P1-26');

Next up is mapping our joystick signal to a value between 0 and 1, and default to 0.5 (not really, but again, out of scope, this is the easiest to explain it without going into detail). I did that like this.

const max = 32767;

const value = (axis.value * -1) / max / 2 + 0.5;

And finally we just need to write those values to our PWM outputs like this.

pwmOutput1.write(value);
pwmOutput2.write(value);

Normally if you now run the script again you should be able to gradually increase and decrease the brightness of the other 2 LEDs using the joysticks.

Recap

Just for reference, this is the full script you should have now.

// Libs
const joystick = require('joystick');
const raspi = require('raspi');
const gpio = require('raspi-gpio');
const pwm = require('raspi-soft-pwm');

// Init PS3 controller, 0 = /dev/input/js0
const ps3Controller = new joystick(0);

// Init Raspi board
raspi.init(() => {
  // Define digital outputs
  const ledYellow = new gpio.DigitalOutput('P1-22');
  const ledRed = new gpio.DigitalOutput('P1-24');
  const ledBlue = new gpio.DigitalOutput('P1-21');
  const ledGreen = new gpio.DigitalOutput('P1-23');

  // Define our software pwm outputs
  const pwmOutput1 = new pwm.SoftPWM('P1-19');
  const pwmOutput2 = new pwm.SoftPWM('P1-26');

  // On button press (triggers when pressed and when released)
  ps3Controller.on('button', button => {
    switch (button.number) {
      case 0: // cross
        ledBlue.write(button.value);
        break;
      case 1: // circle
        ledYellow.write(button.value);
        break;
      case 2: // triangle
        ledGreen.write(button.value);
        break;
      case 3: // square
        ledRed.write(button.value);
        break;
    }
  });

  // On axis movement
  ps3Controller.on('axis', axis => {
    // Max value in both directions
    const max = 32767;

    // Value between 0 and 1, default: 0.5
    const value = (axis.value * -1) / max / 2 + 0.5;

    switch (axis.number) {
      case 1: // left y-axis
        pwmOutput1.write(value);
        break;
      case 4: // right y-axis
        pwmOutput2.write(value);
        break;
    }
  });
});

End result

If you followed everything as described you should end up with something like below. Hope you learned a few things and already have some ideas for your next project using a PS3 controller, I certainly do 🎮!

Prerequisites (macOS)

Have homebrew installed, if you don't have yet; follow the instructions at https://brew.sh/.

Install required libs & packages

Install libusb and libusb-compat using homebrew (or other package manager for other platforms).

brew install wget libusb libusb-compat

Compiling sixpair binary

Next is compiling our sixpair executable, first download sixpair.c using following command.

wget -O sixpair.c https://gist.github.com/wouterds/4ab5715966812009d634e3d034abc7fc/raw

Now we can compile sixpair.c to an executable using the following command.

gcc -o sixpair sixpair.c -lusb

If everything went well you should now have a sixpair executable.

Configuring Bluetooth on the Raspberry Pi

Now ssh into you Raspberry Pi (I'm using a Raspberry Pi W V1.2). Let's start by opening the bluetooth controller by running sudo bluetoothctl. This should have produced something like following output [NEW] Controller B8:27:EB:31:97:DA raspberrypi [default], my bluetooth MAC address is B8:27:EB:31:97:DA. Copy yours as we'll need it later.

Now you're in the bluetooth controller, run the following commands;

agent on
default-agent
discoverable on

For now, just leave this window open as we'll need to connect and trust the PS3 controller in a bit.

Configuring bluetooth master address for the PS3 controller

Let's connect the PS3 controller to your Mac. Now we can pair the PS3 controller with the sixpair binary we compiled earlier and the bluetooth MAC address we retrieved in the previous step. To do this, run  ./sixpair B8:27:EB:31:97:DA (substitute the MAC address with the one your Raspberry Pi outputted). This command will procude something similar as below.

Current Bluetooth master: 3c:15:c2:e3:d8:47
Setting master bd_addr to b8:27:eb:31:97:da

Connecting the PS3 controller to the Raspberry Pi

Disconnect the PS3 controller from your Mac and head back to the Raspberry Pi terminal. Power on the PS3 controller and you will see that it tries to connect to the Raspberry Pi in the terminal.

[NEW] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49
[CHG] Device 00:1B:FB:2F:59:49 Connected: no
[DEL] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49
[NEW] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49
[CHG] Device 00:1B:FB:2F:59:49 Connected: no
[DEL] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49
[NEW] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49
[CHG] Device 00:1B:FB:2F:59:49 Connected: no
[DEL] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49
[NEW] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49
[CHG] Device 00:1B:FB:2F:59:49 Connected: no
[DEL] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49

Copy the MAC address of the PS3 controller, in this case 00:1B:FB:2F:59:49. After the PS3 controller turned off prepare the following command in the terminal (as you will need to be quick) connect 00:1B:FB:2F:59:49. Next power on the PS3 controller again and once you see the line [NEW] Device 00:1B:FB:2F:59:49 00-1B-FB-2F-59-49 appearing in the terminal immediately execute the command. If all went well you should see something like the following.

Attempting to connect to 00:1B:FB:2F:59:49
[CHG] Device 00:1B:FB:2F:59:49 Modalias: usb:v054Cp0268d0100
[CHG] Device 00:1B:FB:2F:59:49 UUIDs: 00001124-0000-1000-8000-00805f9b34fb
[CHG] Device 00:1B:FB:2F:59:49 UUIDs: 00001200-0000-1000-8000-00805f9b34fb
[CHG] Device 00:1B:FB:2F:59:49 ServicesResolved: yes

Now we need to trust the MAC address by running trust 00:1B:FB:2F:59:49. Normally you should see the following output, and the PS3 controller will be connected to your Raspberry Pi.

[CHG] Device 00:1B:FB:2F:59:49 Trusted: yes
Changing 00:1B:FB:2F:59:49 trust succeeded
[CHG] Device 00:1B:FB:2F:59:49 Connected: no
[CHG] Device 00:1B:FB:2F:59:49 Connected: yes

You can now exit the bluetooth controller by running quit. To turn off the PS3 controller, hold the menu button for 10 seconds. Now when you turn on again the PS3 controller it will automatically connect to your Raspberry Pi.

And that's about it! 😎🚀

And man, I was surprised, those guys have a lot of energy! At some point the lead guitar player jumped into the crowd in his underwear ?! And guess what, they all have day jobs and this guy is working as a dentist in London 😂... I really enjoyed their half hour show, check them out when you can!

After listening to his music on Spotify something started bothering me, he closed his set with this amazing track, but I couldn't find it on Spotify! After doing some digging I found that Awakenings had uploaded his set with Kölsch from the day before were he played the same track.

So with that I started asking around on Reddit and other social media, eventually I found someone that claimed he talked with Voorn; he said it's an unreleased track called "Antigone". So don't shoot me if it's wrong, it's the rumoured title! I stripped out this track from his set with Kölsch and uploaded it to Youtube. Can't wait for this to be released 💖!

PS: He's coming somewhere in October to Kompass in Ghent, better get those tickets now 🎟🗓!

This release includes:

• a new sexy dark mode

• a renewed watchlist screen with a markets tab

• more market data on detail screens

• new & cleaned up graphs

• many UI tweaks and fixes

• and a lot bugfixes & performance improvements under the hood

Why don't you check it out and download it now?

• Download from iOS App Store

• Download from Google Play Store

In this blogpost I'll describe what materials you need, how to stick them together and how to install the software. I opensourced it on Github, so the software part is only a matter of copying it and installing.

What you need?

Let's get started by going over what you need. The picture below sums it up basically.

• A Raspberry Pi Zero W with Raspbian (Lite) installed on it

• A cheap USB webcam, you can get it on eBay for a few bucks

• A micro servo motor, also, get it on eBay for a dollar

• A micro USB male -> USB female converter

• Some jump wires (male -> female)

• Pritt Multi Tack (the white gummy-like things, it's to stick things together)

• Optional: Some elastics

Sticking it all together

Breaking the webcam (or don't)

Now the first thing I did was breaking the handy retractable clip. There's a bolt behind the sticker, I removed it because I don't like it and have the full cable rather unfolded. If you have another webcam or don't really mind the retractable clip, just skip to the next step.

Mounting the servo head

Next up; find the most semetrical head in the little bag that comes with the servo and place it on the servo wheel. This is where we'll be mounting the webcam on. Now it's possible the servo is not perfectly in the middle, you will notice this once we have everything connected and run the app. If it would not be aligned nicely in the middle, just take it off and put it back on it.

Mounting the webcam on the servo

Put some of the Pritt Multi Tack glue on the servo head and gently push the webcam on it as you can see below. And just to be sure, I added an elastic around it as well.

Connecting the servo the Pi

Connect the red servo wire to the +5V, the brown wire to GND and the orange one to GPIO13 on the Pi. I used pin 4 and and pin 6 for +5V & GND, pin 33 is GPIO13. If you're not sure where those pins are, make sure to check out pinout.xyz, very handy!

Sticking the servo on top of the Pi

Now that everything is connected we can dump the servo on the Pi housing, I used the remainder of the Pritt Multi Tack glue to mount the servo on the Pi housing.

Clean things up

Lastly, I don't really like a lot of messy cables, so I put some elastics around those to clean that up.

Installing the software

Now before we dive into installing the dependencies and the actual app I've created for this, there are a few assumptions. I assume you have worked with the command line before and know how to install software on a headless Raspberry Pi through the command line. I also assume you already have Raspbian (Lite, I always use Lite, but not required) installed on the Raspberry Pi and that it is connected to your local network (have it connected with a network cable or at least Wi-Fi setup).

If you haven't installed Raspbian yet, head over here and follow the instructions.

Dependencies

MJPG Streamer

To run the camera stream from a USB webcam we'll make use of the package mjpg-streamer. Before we can install this we'll need to install a few dependencies first.

sudo apt-get update
sudo apt-get install libjpeg8-dev imagemagick libv4l-dev uvcdynctrl git cmake -y

After installing the dependencies, run the following commands to install mjpg-streamer.

git clone https://github.com/jacksonliam/mjpg-streamer.git
cd mjpg-streamer/mjpg-streamer-experimental
make USE_LIBV4L2=true clean all
sudo make install
sudo usermod -aG video pi
sudo modprobe bcm2835-v4l2
cd ../../
rm -rf mjpg-streamer

Start the camera livestream by running the following command.

mjpg_streamer -i 'input_uvc.so --device /dev/video0 --fps 30 --resolution VGA --quality 65' -o 'output_http.so'

If you followed all above instructions and everything went ok, you should now be able to see the stream when browsing to http://your-raspberry-pi.local:8080?action=stream. After you verified the stream is working, cancel by running ctrl+c and move on to the next section.

NodeJS

Our second dependency is nodejs, run the following commands to install.

wget https://nodejs.org/dist/v9.7.1/node-v9.7.1-linux-armv6l.tar.gz
tar xf node-v9.7.1-linux-armv6l.tar.gz
rm -f node-v9.7.1-linux-armv6l/*
pushd node-v9.7.1-linux-armv6l/
sudo cp -R * /usr/local/
popd
rm -rf node-v9.7.1-linux-armv6l
rm node-v9.7.1-linux-armv6l.tar.gz

Verify node and npm are installed successfully by running the following commands.

node --version
npm --version

This should give a similar output to this.

pi@pizero:~ $ node --version
v9.7.1
pi@pizero:~ $ npm --version
5.6.0

PiGPIO

This is a library that's internally used by the NodeJS app to communicate with the hardware. Run the following commands to install pigpio.

sudo apt-get update
sudo apt-get install pigpio -y

That should be it for the dependencies, congrats for reaching this point already 👏!

Installing the app

Start by cloning the repository to your Raspberry Pi by running the following command.

git clone https://github.com/wouterds/rpi-camera.git

Next cd into the directory and install the dependencies, note that this will probably take a while (it took about 20 minutes for me). If you don't want to wait you can try to download a compiled zip from the installation on my Pi Zero, however, I am not 100% sure if this will work everywhere.

cd rpi-camera
npm set progress=false
npm install
npm set progress=true

Now build the frontend app by running the following command, this only needs to happen once.

npm run build

Starting the app

Run the following scripts to start the webcam in the background and the app in the backgroundd, note that this might take a few seconds. The servo will run a test check and rotate a few times. After it finished it should be looking straight, if not take the servo head off and place it back on it so it is pointing straight. You should now be able to browse to your Raspberry Pi Zero and control it using the web interface.

./scripts/camera-stream-start.sh
./scripts/server-start.sh

Don't want to run the app in the background and see the console output? Just run sudo npm start.

Autostart on boot

Add the following to /etc/rc.local before exit 0.

cd /home/pi/rpi-camera
./scripts/camera-stream-start.sh
./scripts/server-start.sh

And that should be it, enjoy! 🎉

PS: I know it's not the most beautiful written piece of code ever, but it's readable and does the job, I just quickly hacked it together to get something working 😌!

PS PS: When I first tried out a USB webcam on a Raspberry Pi a few years ago there was little documentation on how to do this. I just quickly Googled around before publishing this blogpost and noticed there's already a gazillion guides like it by now. In any case, I already put quite some effort into this and don't want to quit now, so here's another one 🤷‍♂️..

Being a hobbyist and creating small robots myself I'm always super excited by new technology, robots and electronics in general. But the creations by Boston Dynamics always seemed somewhat weird.

Last month I binge-watched Black Mirror season 4 together with my girlfriend, and one of the more scary episodes to me was the one called Metalhead. Not going to spoil too much, but basically: it contains murderous robot dogs. Below a short scene of this particular episode.

Do you see the similarities? I was honestly stressed out after watching the Boston Dynamics video. THIS IS THE END PEOPLE!? 🔪

No, not really. But still, excited & little bit scared for the future 😄!

The payload of the rocket will consist ouf of Elon Musk's old Tesla Roadster. That's a bit of silly payload, but the only goal here is to get the rocket into space and back to the ground without blowing it up. This is quite a task because the rockets will have to separate again in space and all 3 land individually. If all goes well, Elon's Tesla should be on its way to Mars tomorrow around this time.

Very excited to see how it will go!

Update: they launched it successfully!

Yesterday evening during bouldering exercises we watched live the rocker launch of the Falcon Heavy! Was super exciting to see and I think the simultaneously rocket landing of the side boosters was probably one of the most impressive things I've ever seen! Too bad the third booster landed next to the drone ship, never the less, great success!

Download & burn image to card

First things first, download the latest version of Raspbian (Lite) and burn it on your your Micro SD Card, a tool I often use for this is Etcher. Once that is done, remove the card from your computer and plug it back in afterwards so we can configure it.

Enable SSH

Since a few months (actually already over a year) Raspbian checks if there's an ssh file present on the /boot volume, if it is, it will configure Raspbian to boot with the SSH deamon on and remove the file.

So the only thing you really need to do is create an empty file called ssh on the boot volume. The easiest way this can be done is using terminal, changing to the correct location and the following command touch ssh. But of course you can use any file explorer for this as well.

Configure WiFi

The same thing exists for the WiFi configuration file. I only found out about this months after I discovered how to enable ssh. In any case, you can just create a file in the same location on the boot volume called wpa_supplicant.conf and add your WiFi networks in there. Raspbian will copy this to /etc/wpa_supplicant/wpa_supplicant.conf on first boot and delete it afterwards. Note that the Raspberry Pi Zero W only supports 2.4 Ghz WiFi networks.

country=BE
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
    ssid="Wouter's Place"
    psk="azerty123"
}

And that should be it! 🍻

To install PHP 7 we must tap into the testing branch of Raspbian. Start with opening /etc/apt/source.listwith your favorite editor.

sudo nano /etc/apt/sources.list

And add this line at the end of the file.

deb http://mirrordirector.raspbian.org/raspbian/ stretch main contrib non-free rpi

Now what we don't want is that every package is updated or installed from the stretch (testing) branch. To do this we can set some preferences that we want all packages to be selected from Jessie by default. Open up the following file /etc/apt/preferences.

sudo nano /etc/apt/preferences

And add the following contents to it.

Package: *
Pin: release n=jessie
Pin-Priority: 600

Save the file and run an update.

sudo apt-get update

Now if you want to install something from the testing branch, you can do this using the following format.
For example, installing the PHP 7 cli package can be done like this.

sudo apt-get install -t stretch php7.0-cli

And that's pretty much it, enjoy! Since this most likely my last post of 2016, happy new year! 🎆

There's also a TL;DR with just a download link if you don't care how it works but just want to get started ☺️!

What is Docker 🐳?

I'm not going to explain it myself, but I'll just pick a quote straight from the Docker website. It's pretty clear and describes everything that Docker does.

Docker containers wrap up a piece of software in a complete filesystem that contains everything it needs to run: code, runtime, system tools, system libraries – anything you can install on a server. This guarantees that it will always run the same, regardless of the environment it is running in.

Why use Docker over Vagrant, or even a local dev environment?

Local dev environments are just always a mess. People always have throuble configuring it, lots of issues with permissions, updates break it etc etc.

Than we have Vagrant which I have been using mostly for the past few years and runs on a virtual machine. That's a great thing and makes it easily possible to do compartmentalization and share entire stacks using this config file or even the whole image.

And than there is Docker. Which offers us a great deal of benefits over classic virtualization. Docker containers are substantially smaller than its equivalent VM. Speed is also an important consideration, using VMs there is a certain loss, while containers arguably have none -- excluding the small overhead for the Docker service. And it's very easy to configure using repositories from the community and with Docker Compose.

Of course there's also downsides and VMs do have some benefits over Docker containers, but I'm not going to go any deeper on that in this topic.

Requirements, what do we need?

Docker Engine

First of all, we need to install Docker itself by installing Docker Engine. You can download Docker Engine for macOS from here or for Windows here.

Docker Compose

After installing Docker Engine, we'll install Docker Compose. We will use this to define multiple services on multiple containers for our application. This makes it easy to start and stop the whole application with a single command.

Run the following command to install Docker Compose with curl (more in dept installation).

curl -L "https://github.com/docker/compose/releases/download/1.9.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

And now make it executable using this command.

chmod +x /usr/local/bin/docker-compose

That's it, we're ready to configure the application!

Configuration

docker-compose.yml

This is the main configuration file where we specify all the services we want to use and some configuration values for them such as the MySQL user & password and the location of your projects folder. In this case I'm using ~/Projects folder (this folder is located on your machine) as the location for the application. MySQL is configured with docker as value for the username, password as well as the database name.

An important thing to notice is that the first level within services is the also the name of the service to access it within the Docker application itself. Meaning if you want to access the database for example, you'll need to use mysql as hostname. You can make each service depending on another one and link services with each other if you need to access them or they're depending on them.

The ports for both MySQL and NGINX are exposed to our localhost, meaning we can access them via 127.0.0.1 or localhost. So you should be able to go to http://localhost/ in the browser and access the database using Sequel Pro or something simlar from 127.0.0.1:3306.

In the configuration below we're using MySQL 5.7, NGINX 1.10 (both from image) and PHP-FPM we're building ourselves using ./php/Dockerfile which we will get to in a minute.

version: '2'

services:
    mysql:
        image: mysql:5.7
        ports:
            - 3306:3306
        volumes:
            - /var/lib/mysql
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: root
            MYSQL_USER: docker
            MYSQL_PASSWORD: docker
            MYSQL_DATABASE: docker

    nginx:
        image: nginx:1.10.2
        ports:
            - 80:80
        restart: always
        volumes:
            - ./nginx/conf:/etc/nginx/conf.d
            - ~/Projects:/code
        links:
            - php
        depends_on:
            - php

    php:
        build: php
        expose:
            - 9000
        restart: always
        volumes:
            - ./php/conf/php.ini:/usr/local/etc/php/conf.d/custom.ini
            - ~/Projects:/code
        links:
            - mysql

php/Dockerfile

This file we'll use build PHP manually instead of downloading a pre-defined image. Using this file we can customize our needs better and install a few extensions such as Curl, GD & Intl.

FROM php:7.1-fpm

RUN apt-get update

# Some basic extensions
RUN docker-php-ext-install -j$(nproc) json mbstring opcache pdo pdo_mysql mysqli

# Curl
RUN apt-get install -y libcurl4-openssl-dev
RUN docker-php-ext-install -j$(nproc) curl

# GD
RUN apt-get install -y libpng-dev libjpeg-dev
RUN docker-php-ext-install -j$(nproc) gd

# Intl
RUN apt-get install -y libicu-dev
RUN docker-php-ext-install -j$(nproc) intl

php/conf/php.ini

Don't think this needs any explanation, just basic configuration of php.

display_errors = On
display_startup_errors = On
default_charset = "UTF-8"
html_errors = On

nginx/conf/default.conf

And lastly our nginx default config. Just contains some basic stuff like autoindex, support for php and the hostname.

server {
    listen       80 default_server;
    server_name  localhost _;
    index        index.php index.html index.htm;
    root         /code;

    location / {
        try_files   $uri $uri/ /index.php?$query_string;
        autoindex on;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

Testing application

If you have followed this guide completely you should now have a similar directory structure. If not, you can also download it from my repo on Github.

.                            # Docker directory
├─ nginx                     # NGINX directory
├─── conf                    # NGINX config directory
├───── default.conf          # Basic NGINX configuration
├─ php                       # PHP directory
├─── conf                    # PHP config directory
├───── php.ini               # Basic php configuration
├─── Dockerfile              # PHP Dockerfile
├─ docker-compose.yml        # Docker Compose file

You can start up your Docker application using the command docker-compose up. And normally, if everything went well, you should be able to go to http://localhost/, use PHP and connect to MySQL on port 3306.

TL;DR

For the people that didn't bother to read or just don't care how it works or configure it and just want to get started, don't worry! I've made it very easy for you. You can clone or download my repo and start it using docker-compose up.

Cheers! 🍻

But it shouldn't be a big drama, and frankly, we shouldn't make JS polyfills to fix this. Because it isn't broken. As we can see from the release notes of the first beta of iOS 10, Apple did indeed disable this intentionally.

Content Blockers may stop working after upgrading to iOS 10 beta 1. Workaround: Go to Settings > Safari > Content Blockers and toggle the content blocker switch. Fixed a bug where no progress was shown while downloading large files. You can now close all tabs in Safari at once by long tapping on the Tab View button. To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

And they're right. By default a user on iOS can pinch to zoom on mobile websites, if they can't read something, want to zoom in on an image, you name it. It's the default user behaviour, and it makes sense. Some developers or designers like to prevent people from scaling so their website always looks pretty and like it was designed. Instead, just set an initial viewport scale and be done with it. Don't worry!

<meta name="viewport" content="width=device-width, initial-scale=1">

Luckily, this behaviour is only applying on Safari Mobile. So that means that web apps or apps with embedded web views will still respect user-scalable=no. For now.

It's all good guys, keep calm and have a beer 🍺!

Let's say you want to loop over every day between 2 specific dates, we can achieve this result with this code:

$startDate = new DateTime('2016-03-15');
$endDate = new DateTime('2016-05-01');

// These are the steps in which we will be iterating
$interval = DateInterval::createFromDateString('1 day');

// Create the period between the start/end  date and the interval
$period = new DatePeriod($startDate, $interval, $endDate);

// Loop over the period
foreach ($period as $dateTime) {
    // A certain day in this period
    $date = $dateTime->format('Y-m-d');
}

We can also do this with relative times by changing the start date and end date. For example, the last 30 days:

$startDate = new DateTime('now - 30 days');
$endDate = new DateTime('now');

Obviously there's many ways to get around this, this is one way to quickly achieve this using PHP only.

Cheers 🍻!

One of the absolute highlights for me personally was seeing the northern lights and stars so bright I could never imagine, it's just not comparable at all to Belgium. I think I will definitely do something like this again in the future. I could talk for hours about this trip, but since writing isn't really my strongsuit I'll just let the pics speak for themselves!

Turns out you can enable it for macOS as well with little effort!

Some examples, to convince you, if you haven't been already

Default macOS nano:

With the updated nano:

Enough showing off, how do I get it?

Assuming you know what homebrew is and have it installed & set up correctly; it's really just a matter of running the following 2 commands, not much else to it!

brew install nano
echo "include /usr/local/share/nano/*.nanorc" > ~/.nanorc

Enjoy 🍻

In the 1900s many Belgian villages were still lit using petroleum lamps, as electricity hadn’t been made available. By 1913, many of these had been updated to Kerosene lamps.

In 1903, the company that owned the tram system that serviced the canals founded a regional electricity company the "Société Centrale d’Electricité du Brabant" (CEB). The Oisquercq power plant in Western Brabant, which was the first major power plant in the country, became part of CEB.

In 1905 , the "Reunions Societes d’Energie du Bassin de l’Escaut" emerged in Antwerp (this is later to be known as Electrabel).

In 1911 Baron Floris Van Loo, with the help of the Bank of Outremer, built the the first power plant in Langerbrugge. Langerbrugge is situated in the Ghent canal area, it is joined with Kerkbrugge, to make the residential area Kerkbrugge-Langerbrugge which is part of the municipality of Evergem. Langerbrugge is located on the western side of the canal Ghent-Terneuzen and this plant was to make the industrial development of the entire canal possible.

Take your time to watch this beautiful timelapse video of the milky way galaxy and the nature around this mountain, it's absolutely breathtaking!

What is it?

Inspired by the "cryptex device" from the Da Vinci code, Crypteks designed a cryptex like USB drive to protect sensitve or private data. It consists of an aluminum-bodied cylinder with five rings, each containing the letters of the alphabet. Twisting these to the correct combination lets the USB stick within slide free.

With not only a physical cryptex lock, which allows 14.348.907 unique passwords combinations, but also a 256-bit AES hardware encryption your data is stored on probably one of the most secure USB drives around at the moment (if you didn't used the same password for the hardware encryption and physical lock at least)!

Price

The company is currently fundraising on Kickstarter and had a goal of 12.000 USD, but has already gained over 130.000 USD with still 8 days to go! If you donate 130 USD, you will get a 8GB version of the USB drive, if you donate 160 USD you will get a 16GB version of the USB drive. So my guess is that you will have to pay a 110 USD for the 4GB version, a 130 USD for the 8GB version and a 160 USD for the 16GB version once it becomes for sale in a shop. This is a bit pricy for a USB drive, but privacy is priceless right?

Yes indeed, this is my first post on my new blog, be ready to expect more soon!
Of course I am very proud on my fully custom written website, including the blog, scripts library, portfolio etc. Please take care of it, and don't pollute it with useless spam comments.

Although I'm not entirely sure about what I'm going to write here.. Probably about my passion for online media, especially webdesign & webdevelopment. But also about my personal life, and other things which are interesting other than online media & webdevelopment. Maybe also a little bit about cooking and my cat.

Don't expect long boring blog posts because I'm not that kind of writer! :)

Talk soon