Angelos Orfanakos

Restore last working directory in Bash

Sun, 15 Jun 2025 00:00:00 GMT

After switching from Zsh to Bash, I missed the ability to restore the last working directory when opening a new terminal. So I came up with my own, simple implementation.

The contents of restore_last_dir.sh:

save_last_dir() {
  echo "BASH_LAST_DIR=\"$PWD\"" >~/.bash_lastdir
}

trap save_last_dir EXIT

function cd() {
  builtin cd "$@" >/dev/null
  save_last_dir
}

[[ -f ~/.bash_lastdir ]] &&
  source ~/.bash_lastdir &&
  [[ -d "$BASH_LAST_DIR" ]] &&
  cd "$BASH_LAST_DIR"

To use it, you simply have to insert the following line in your ~/.bashrc:

source ~/path/to/restore_last_dir.sh

EsriTileLayer component for React Leaflet

Fri, 30 May 2025 00:00:00 GMT

React Leaflet is a React library that exposes Leaflet classes as React components, making it very easy to add interactive maps to React web apps.

This is the fifth in a series of posts on how I use the library. My intention is to share back some of the things I’ve learned and implemented in the hope of them being useful to others.

In this post, I present the EsriTileLayer component which exposes Esri tile layers by wrapping esri-leaflet as a React component.

First, the component:

import { createLayerComponent } from '@react-leaflet/core';
import * as L from 'leaflet';
import * as esri from 'esri-leaflet';
import PropTypes from 'prop-types';

const createEsriTileLayer = (props = {}, context) => {
  const imagery = esri.tiledMapLayer({    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    ...props
  });
  const labels = esri.tiledMapLayer({    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer',
    ...props
  });
  const group = L.layerGroup([imagery, labels]);
  return { instance: group, context };
};

const EsriTileLayer = createLayerComponent(createEsriTileLayer, () => null);

export default EsriTileLayer;

Things to note:

Line 7: Satellite imagery tile layer
Line 11: Place labels overlay tile layer
Line 15: Both layers are combined into a single one
Line 6, 9, 13: Any props passed to the component (e.g. token) are forwarded to each tile layer

And here’s how you’d use it in a map:

import React from 'react';

import EsriTileLayer from './EsriTileLayer';
// import EsriTileLayer from './EsriTileLayerWrapper';

const GREECE_BOUNDS = [
  [31.08, 14.26],
  [44.91, 34.69],
];

function MyMap() {
  return (
    <MapContainer
      bounds={GREECE_BOUNDS}
      style={{ width: '100%', height: '100vh' }}
    >
      <EsriTileLayer />
    MapContainer>
  );
}

export default MyMap;

Since esri-leaflet is supposed to be used in the browser and breaks with frameworks that perform SSG like Gatsby, I had to wrap it in the following component to make it work with gatsby build:

import React, { useState, useEffect } from 'react';

const EsriTileLayerWrapper = (props) => {
  const [Component, setComponent] = useState(null);

  useEffect(() => {
    import('./EsriTileLayer').then(mod => {
      setComponent(() => mod.default);
    });
  }, []);

  return Component ? <Component {...props} /> : null;
}

export default EsriTileLayerWrapper;

To use this component, you simply replace EsriTileLayer with EsriTileLayerWrapper.

Σεισμολογικά δεδομένα Πανεπιστημίου Αθηνών στο Home Assistant

Fri, 21 Feb 2025 00:00:00 GMT

Το παρόν άρθρο περιέχει οδηγίες για το πώς μπορούμε να έχουμε διαθέσιμα δεδομένα για τον πιο πρόσφατο σεισμό μιας περιοχής από το Εργαστήριο Σεισμολογίας του Πανεπιστημίου Αθηνών στο Home Assistant. Ως παράδειγμα τοποθεσίας χρησιμοποιείται η Σαντορίνη με ακτίνα 35 km.

Χρησιμοποιώντας το File editor Add-on, δημιουργούμε νέο φάκελο (directory) με όνομα packages (αν δεν υπάρχει ήδη) και μέσα του δημιουργούμε νέο αρχείο με όνομα earthquake_santorini.yaml και περιεχόμενο:

earthquake_santorini:
  rest:
    - resource_template: 'http://www.geophysics.geol.uoa.gr/stations/gmapv3_db/index.php'
      method: 'POST'
      payload: 'lang=en&outflag=csv&selmode=circle&CATDB=SC3DB&circlat=36.4102&circlon=25.3894&circrad=35&fromdepth=0&todepth=200&frommagn=3&tomagn=8&search=.csv'      headers:
        Content-Type: 'application/x-www-form-urlencoded'
      scan_interval: 3600
      sensor:
        - name: 'Santorini earthquake datetime'
          unique_id: earthquake_santorini_datetime
          device_class: 'timestamp'
          value_template: '{{ ((value.split("\n")[-2].split(",")[0].split(".")[0].strip() + "Z") | regex_replace(find="\s+", replace="T") | replace("/", "-") | as_datetime).isoformat() }}'
          
        - name: 'Santorini earthquake latitude'
          unique_id: earthquake_santorini_latitude
          unit_of_measurement: '°'
          value_template: '{{ value.split("\n")[-2].split(",")[1] | float }}'

        - name: 'Santorini earthquake longitude'
          unique_id: earthquake_santorini_longitude
          unit_of_measurement: '°'
          value_template: '{{ value.split("\n")[-2].split(",")[2] | float }}'
          
        - name: 'Santorini earthquake depth'
          unique_id: earthquake_santorini_depth
          device_class: 'distance'
          unit_of_measurement: 'km'
          value_template: '{{ value.split("\n")[-2].split(",")[3] | float }}'
          
        - name: 'Santorini earthquake magnitude'
          unique_id: earthquake_santorini_magnitude
          unit_of_measurement: 'richter'
          value_template: '{{ value.split("\n")[-2].split(",")[4] | float }}'
          
        - name: 'Santorini earthquake location'
          unique_id: earthquake_santorini_location
          value_template: '{{ value.split("\n")[-2].split(",")[5] }}'
          
        - name: 'Santorini earthquake distance'
          unique_id: earthquake_santorini_distance
          device_class: 'distance'
          unit_of_measurement: 'km'
          value_template: '{{ value.split("\n")[-2].split(",")[6] }}'

  template:
    sensor:
    - name: 'Santorini earthquake location coordinates'
      unique_id: earthquake_santorini_location_coordinates
      state: '{{ states("sensor.earthquake_santorini_magnitude") }}'
      attributes:
        latitude: '{{ states("sensor.earthquake_santorini_latitude") | float }}'
        longitude: '{{ states("sensor.earthquake_santorini_longitude") | float }}'

Η τιμή του payload στην πέμπτη γραμμή περιέχει τις παραμέτρους που ορίζουν τα δεδομένα που επιθυμούμε:

lang=en&outflag=csv&selmode=circle&CATDB=SC3DB&circlat=36.4102&circlon=25.3894&circrad=35&fromdepth=0&todepth=200&frommagn=4&tomagn=8&search=.csv

Πιο συγκεκριμένα:

lang — Γλώσσα κειμένου για τον σένσορα earthquake_santorini_location (en για αγγλικά, el για ελληνικά)
outflag — Μορφή δεδομένων (csv για CSV)
selmode — Ορισμός σχήματος περιοχής γύρω από την τοποθεσία ενδιαφέροντος (circle για κύκλο)
CATDB — Η βάση δεδομένων που χρησιμοποιείται (SC3DB για NKUA analysis)
circlat, circlon — Γεωγραφικό πλάτος και μήκος του στίγματος της τοποθεσίας ενδιαφέροντος
circrad — Η ακτίνα του κύκλου ενδιαφέροντος (σε km)
fromdepth — Ελάχιστο εστιακό βάθος σεισμού (σε km)
todepth — Μέγιστο εστιακό βάθος σεισμού (σε km)
frommag — Ελάχιστο μέγεθος σεισμού (σε Richter)
tomagn — Μέγιστο μέγεθος σεισμού (σε Richter)

Για να βρούμε τις κατάλληλες τιμές των παραμέτρων circlat και circlon μπορούμε να πάμε στο vouna.gr και να σημειώσουμε τις συντεταγμένες του στίγματος οι οποίες εμφανίζονται κάτω-αριστερά στον χάρτη καθώς κουνάμε το ποντίκι.

Τέλος, πάλι στο File editor Add-on, πηγαίνουμε ένα επίπεδο πίσω και ανοίγουμε το αρχείο configuration.yaml προσθέτοντας:

homeassistant:
  packages: !include_dir_merge_named packages

Κάνουμε επανεκκίνηση στο Home Assistant.

Αυτό θα έχει ως αποτέλεσμα να δημιουργηθούν οι ακόλουθοι σένσορες:

earthquake_santorini_datetime — Ημερομηνία και ώρα σεισμού (timestamp)
earthquake_santorini_latitude — Γεωγραφικό πλάτος επίκεντρου σεισμού σε μοίρες (float)
earthquake_santorini_longitude — Γεωγραφικό μήκος επίκεντρου σεισμού σε μοίρες (float)
earthquake_santorini_depth — Εστιακό βάθος σεισμού σε km (distance)
earthquake_santorini_magnitude — Μέγεθος σεισμού σε Richter (float)
earthquake_santorini_location — Περιγραφή τοποθεσίας σεισμού (string)
earthquake_santorini_distance — Απόσταση επίκεντρου σεισμού από το στίγμα τοποθεσίας σε km (distance)
earthquake_santorini_location_coordinates — Στίγμα επίκεντρου σεισμού για εμφάνιση σε χάρτη

Ακολουθεί παράδειγμα κάρτας σε dashboard:

type: vertical-stack
title: Santorini last earthquake
cards:
  - type: map
    entities:
      - entity: sensor.earthquake_santorini_location_coordinates
        label_mode: state
    theme_mode: auto
  - type: entities
    entities:
      - entity: sensor.earthquake_santorini_datetime
        name: When
      - entity: sensor.earthquake_santorini_distance
        name: Distance
      - entity: sensor.earthquake_santorini_depth
        name: Depth
        icon: mdi:arrow-up-down
      - entity: sensor.earthquake_santorini_location
        name: Location
    show_header_toggle: false

Και ένα ενδεικτικό αποτέλεσμα:

Μετεωρολογικός σταθμός Αστεροσκοπείου στο Home Assistant

Fri, 21 Feb 2025 00:00:00 GMT

Το παρόν άρθρο περιέχει οδηγίες για το πώς μπορούμε να προσθέσουμε τα στοιχεία ενός μετεωρολογικού σταθμού του Αστεροσκοπείου Αθηνών στο Home Assistant π.χ. για να τα εμφανίσουμε σε κάρτα στο dashboard. Ως παράδειγμα τοποθεσίας χρησιμοποιείται ο μετεωρολογικός σταθμός του Βύρωνα.

Χρησιμοποιώντας το File editor Add-on, δημιουργούμε νέο φάκελο (directory) με όνομα packages (αν δεν υπάρχει ήδη) και μέσα του δημιουργούμε νέο αρχείο με όνομα meteo_vironas.yaml και περιεχόμενο:

meteo_vironas:
  scrape:
  - resource: 'https://penteli.meteo.gr/stations/vyronas/'
    headers:
      User-Agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.3'
    scan_interval: 3600
    sensor:
      - name: Meteo Vironas last updated
        unique_id: meteo_vironas_last_updated
        select: .headline.gradient span
        index: 1
        value_template: '{{ (strptime(value, "%d/%m/%Y %H:%M") | as_local).isoformat() }}'
        device_class: timestamp
      - name: Meteo Vironas temperature
        unique_id: meteo_vironas_temperature
        select: .realtime .lright span
        value_template: '{{ value.split(" ")[0] | float }}'
        unit_of_measurement: '°C'
        device_class: temperature
      - name: Meteo Vironas humidity
        unique_id: meteo_vironas_humidity
        select: .realtime .lright span
        index: 1
        value_template: '{{ value.split(" ")[0] | float }}'
        unit_of_measurement: '%'
        device_class: humidity
      - name: Meteo Vironas wind speed
        unique_id: meteo_vironas_wind_speed
        select: .realtime .lright span
        index: 3
        value_template: '{{ value.split(" ")[0] | float }}'
        unit_of_measurement: 'km/h'
        device_class: wind_speed
      - name: Meteo Vironas barometric pressure
        unique_id: meteo_vironas_barometric_pressure
        select: .realtime .lright span
        index: 4
        value_template: '{{ value.split(" ")[0] | float }}'
        unit_of_measurement: hPa
        device_class: pressure
      - name: Meteo Vironas rain today
        unique_id: meteo_vironas_rain_today
        select: .realtime .lright span
        index: 5
        value_template: '{{ value.split(" ")[0] | float }}'
        unit_of_measurement: mm
        device_class: precipitation

Στη συνέχεια, πάλι στο File editor Add-on, πηγαίνουμε ένα επίπεδο πίσω και ανοίγουμε το αρχείο configuration.yaml προσθέτοντας:

homeassistant:
  packages: !include_dir_merge_named packages

Κάνουμε επανεκκίνηση στο Home Assistant.

Αυτό θα έχει ως αποτέλεσμα να δημιουργηθούν οι ακόλουθοι σένσορες:

meteo_vironas_last_updated — Ημερομηνία και ώρα τελευταίας ενημέρωσης (timestamp)
meteo_vironas_temperature — Θερμοκρασία σε °C (temperature)
meteo_vironas_humidity — Υγρασία σε % (humidity)
meteo_vironas_wind_speed — Ταχύτητα ανέμου σε km/h (wind_speed)
meteo_vironas_barometric_pressure — Βαρομετρική πίεση σε hPa (pressure)
meteo_vironas_rain_today — Ύψος σημερινής βροχής σε mm (precipitation)

Ακολουθεί παράδειγμα κάρτας σε dashboard:

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - graph: line
            type: sensor
            entity: sensor.meteo_vironas_temperature
            detail: 2
            unit: ⁰C
            name: Θερμοκρασία
          - graph: line
            type: sensor
            entity: sensor.meteo_vironas_humidity
            unit: "%"
            detail: 2
            name: Υγρασία
      - type: horizontal-stack
        cards:
          - graph: line
            type: sensor
            entity: sensor.meteo_vironas_wind_speed
            detail: 2
            name: Άνεμος
          - graph: line
            type: sensor
            entity: sensor.meteo_vironas_rain_today
            detail: 2
            name: Βροχή
          - graph: line
            type: sensor
            entity: sensor.meteo_vironas_barometric_pressure
            detail: 2
            name: Πίεση
  - type: entities
    entities:
      - entity: sensor.meteo_vironas_last_updated
        name: Τελευταία ενημέρωση
    show_header_toggle: false
title: Meteo.gr Βύρωνας

Και το αποτέλεσμα:

Ajax Systems alarm system in Home Assistant

Fri, 14 Feb 2025 00:00:00 GMT

This post details how to integrate an Ajax Systems alarm system into Home Assistant so that it’s possible to both read and “write” (set) its state (armed, disarmed, night mode, triggered) This enables cool automations such as:

“Disarm in the morning when I’m at home” — Also possible with the mobile app using schedules
“Arm when I leave the vicinity of the home” — Somewhat possible with the mobile app using a geofence (you get a push notification when you leave the zone)
“Turn on external lights when the alarm triggers”

Reading the state

This is possible with the SIA Alarm Systems Home Assistant integration. The documentation provides an easy-to-follow example on how to set it up for an Ajax Systems alarm, so it’s not covered here.

Note: Make sure you enter AAA as an Account ID and 45321 as a Port in order for the YAML samples (included later) to work.

After the setup is complete, we need to create an input_select to keep the alarm state between SIA and Home Assistant in-sync:

Open your Home assistant installation
Go to Settings → Devices & services → Helpers
Click Create Helper
Select Dropdown
Enter Alarm for Name
Enter mdi:shield-home for Icon
Add the following options, one for each possible alarm state: armed_away, armed_night, disarmed, triggered
Click Create

Now it’s time to create the necessary automations for the syncing. First the one from SIA to Home Assistant:

Go to Settings → Automations & scenes
Click Create Automation
Select Create new automation
Click on the three dots on the top-right of the screen
Select Edit in YAML
Replace the contents with the following YAML
Click Save

- alias: Alarm sync from SIA
  triggers:
  - trigger: state
    entity_id:
    - alarm_control_panel.45321_aaa_zone_1_alarm
  conditions:
  - condition: template
    value_template: "{{ states('alarm_control_panel.45321_aaa_zone_1_alarm') != states('input_select.alarm') }}"
  actions:
  - action: input_select.select_option
    target:
      entity_id: input_select.alarm
    data_template:
      option: "{{ states('alarm_control_panel.45321_aaa_zone_1_alarm') }}"

Then the one from Home Assistant to SIA:

Click Create Automation
Select Create new automation
Click on the three dots on the top-right of the screen
Select Edit in YAML
Replace the contents with the following YAML
Click Save

- alias: Alarm sync to SpaceControl
  triggers:
  - trigger: state
    entity_id:
    - input_select.alarm
  conditions:
  - condition: template
    value_template: "{{ states('alarm_control_panel.45321_aaa_zone_1_alarm') != states('input_select.alarm') }}"
  actions:
  - data_template:
      entity_id: |
        {% if is_state('input_select.alarm', 'disarmed') %}
          switch.ajax_spacecontrol_disarm
        {% elif is_state('input_select.alarm', 'armed_night') %}
          switch.ajax_spacecontrol_night
        {% elif is_state('input_select.alarm', 'armed_away') %}
          switch.ajax_spacecontrol_arm
        {% elif is_state('input_select.alarm', 'triggered') %}
          switch.ajax_spacecontrol_panic
        {% else %}
        {% endif %}
    action: switch.turn_on

Setting the state

Ajax Systems does not provide a consumer-level API (only an enterprise one), so we have to do some hardware hacking to get it to work.

Necessary hardware

Ajax SpaceControl key fob
Wemos D1 Mini (I bought it from AliExpress)
Thin (~0.5 mm) soldering wire with flux core (preferably lead-free, otherwise it’s toxic when inhaled)
Spool of 22 (or similar) AWG tinned, flexible copper wire

Necessary tools

Soldering iron, ideally with temperature adjustment
Two (2) helping hands for soldering
Wire cutter and stripper (for 22 AWG or similar)

Preparation steps

Connect the key fob to your alarm system Make sure pressing Arm, Disarm, Night Mode and Panic works.
Open the key fob and remove the integrated circuit board (ICB) Store its plastic enclosure somewhere safe in case you ever need it.
Remove the battery from the key fob ICB as the whole thing is going to be powered by the D1 Mini. If you don’t need the battery, recycle it.
Cut six (6) 10 cm long wires and strip their ends (no more than 5 mm) If you have many colors, make four (4) white for the buttons, one (1) red for positive and one (1) black for negative.
Secure the key fob ICB onto the first helping hands
Secure the D1 Mini onto the second helping hands
Plug your soldering iron into a wall outlet and get ready for some soldering!

Soldering on the key fob ICB

Solder four (4) wires, one to each button position as pictured here where top-left is night mode, top-right is arm, bottom-left is panic mode and bottom-right is disarm. Take care to solder only the metal contacts and not the rest of the board!
Solder one (1) wire to the positive battery terminal as pictured here (red wire)
Solder one (1) wire to ground as pictured here (black wire)

Soldering on the D1 Mini

Solder the disarm wire to the GPIO4 pin
Solder the panic mode wire to the GPIO5 pin
Solder the arm wire to the GPIO12 pin
Solder the night mode wire to the GPIO13 pin
Solder the positive battery terminal wire to the 3V3 (VCC) pin as pictured here
Solder the negative battery terminal wire to the GND pin as pictured here

Home Assistant setup

Remove the key fob ICB and the D1 Mini from the helping hands
Connect the D1 Mini to your Home Assistant machine with a USB cable
Go to the add-on store of your Home Assistant installation and install the ESPHome Device Builder add-on
Once the add-on is installed, click Start and then Open Web UI
Click New Device, enter Ajax SpaceControl as a Name and follow the prompts to add the D1 Mini
Once the device is listed, click Edit to open the configuration editor
Append the following YAML
Click Save and Install to install the firmware to the D1 Mini

text_sensor:
  - platform: wifi_info
    ip_address:
      name: WiFi IP address
    ssid:
      name: WiFi SSID

  - platform: version
    name: Firmware version

sensor:
  - platform: wifi_signal
    name: WiFi Signal
    update_interval: 60s
    device_class: signal_strength

switch:
  - platform: gpio
    pin: GPIO4
    inverted: true
    id: relay_disarm
    name: Disarm
    icon: "mdi:shield-off"
    on_turn_on:
      - delay: 500ms
      - switch.turn_off: relay_disarm

  - platform: gpio
    pin: GPIO5
    inverted: true
    id: relay_panic
    name: Panic
    icon: "mdi:shield-alert"
    on_turn_on:
      - delay: 500ms
      - switch.turn_off: relay_panic

  - platform: gpio
    pin: GPIO12
    inverted: true
    id: relay_arm
    name: Arm
    icon: "mdi:shield-lock"
    on_turn_on:
      - delay: 500ms
      - switch.turn_off: relay_arm

  - platform: gpio
    pin: GPIO13
    inverted: true
    id: relay_night
    name: Night
    icon: "mdi:shield-moon"
    on_turn_on:
      - delay: 500ms
      - switch.turn_off: relay_night

Finishing up

Here’s the YAML of a dashboard card to test things out:

type: vertical-stack
title: Alarm
cards:
  - type: glance
    entities:
      - entity: alarm_control_panel.45321_aaa_zone_1_alarm
        name: SIA
      - entity: input_select.alarm
        name: Alarm
  - type: grid
    columns: 2
    square: true
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: armed_away
            entity_id: input_select.alarm
        entity: input_select.alarm
        name: Arm
        show_state: false
        icon: mdi:shield-lock
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: disarmed
            entity_id: input_select.alarm
        entity: input_select.alarm
        name: Disarm
        show_state: false
        icon: mdi:shield-off
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: armed_night
            entity_id: input_select.alarm
        entity: input_select.alarm
        name: Night Mode
        icon: mdi:shield-moon
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: none
        name: Panic
        icon: mdi:shield-alert
        hold_action:
          action: perform-action
          perform_action: input_select.select_option
          target:
            entity_id: input_select.alarm

Here’s how it looks:

Try restarting (not reloading) Home Assistant in case it doesn’t work.

Bresser weather station in Home Assistant

Tue, 12 Nov 2024 00:00:00 GMT

This is a guide on how to display data from a Bresser 5-in-1 (or similar) weather station in Home Assistant.

Assumptions

You already have Home Assistant up and running in a system (e.g. Raspberry Pi) with enough power to drive external USB devices.

Necessary hardware

A USB dongle that can capture FM radio, as this is how the weather station transmits data. I can recommend the RTL-SDR BLOG V3 which is considered best-in-class.
An antenna with an SMA male connector (threads inside, with pin) to connect to the dongle. I wasn’t able to capture any data without the antenna.

Test FM dongle

Screw the antenna to the dongle and plug it in your workstation (regular computer)

Install rtl_433. In Debian:

sudo apt install rtl-433

Verify you can receive data by running the following command for a few minutes:

sudo rtl_433 -f 868.3M -R 172

If protocol 172 does not seem to work, issue rtl_433 -R help for a list of supported protocols.

The output should look something like this:

   time      : 
   model     : Bresser-6in1 id        : 
   channel   : 0            Battery   : 1             Temperature: 14.5 C
   Humidity  : 61           Sensor type: 1            Wind Gust : 0.0 m/s
   Wind Speed: 0.0 m/s      Direction : 90            UV        : 0.0
   Flags     : 0            Integrity : CRC

Note that if you later place the dongle someplace else, it may not be able to receive data, even with the antenna on (e.g. due to signal interference and/or walls) I realized this, the hard way, after placing it in a closet and trying to debug, for hours, why it’s not receiving anything. So this test should ideally happen (using a laptop) near the physical space the dongle will later be placed at.

Install add-ons

Install the following add-ons in Home Assistant:

File editor to edit configuration files (official add-on)
Mosquitto broker to store weather station data (official add-on)
rtl_433 to receive weather station data with the dongle and forward it to MQTT (community add-on)

Create user

Create a user in Home Assistant, the login details (username, password) of which will be used by rtl_433 in the next step to connect to Mosquitto broker via MQTT.

Configure rtl_433

Edit /homeassistant/rtl_433/rtl_433.conf with the File editor add-on and replace its contents with:

report_meta stats
report_meta time:iso:usec:tz
report_meta protocol

gain 0

convert si

frequency 868.3M

pulse_detect autolevel

verbose 5

output mqtt://core-mosquitto:1883,user=,pass=,retain=1,devices=rtl_433/bresser51output kv

protocol 172 # Bresser Weather Center 6-in-1, 7-in-1 indoor, soil, new 5-in-1, 3-in-1 wind gauge, Froggit WH6000, Ventus C8488A

Make sure you replace and with the details of the user you created in the previous step.

Verify rtl_433 works

Go to the add-on page of Mosquitto broker and rtl_433 and start them (in this order) Make sure the “Start on boot” and “Watchdog” options are enabled.

Switch to the Log tab of rtl_433. You should see an output similar to:

Starting rtl_433 with rtl_433.conf located in /config/rtl_433
rtl_433 version 24.10-3-g4fa37568 branch master at 202411051225 inputs file rtl_tcp RTL-SDR
New defaults active, use "-Y classic -s 250k" if you need the old defaults
MQTT: Publishing MQTT data to core-mosquitto port 1883
MQTT: Publishing device info to MQTT topic "rtl_433/bresser51".
Protocols: Registered 2 out of 266 device decoding protocols [ 172 172 ]
Input: The internals of input handling changed, read about and report problems on PR #1978
SDR: Found 1 device(s)
SDR: trying device 0: Realtek, RTL2838UHIDIR, SN: 00000001
Detached kernel driver
Found Rafael Micro R820T tuner
SDR: Using device 0: Realtek, RTL2838UHIDIR, SN: 00000001, "Generic RTL2832U OEM"
Exact sample rate is: 250000.000414 Hz
[R82XX] PLL not locked!
SDR: Sample rate set to 250000 S/s.
Input: Bit detection level set to 0.0 (Auto).
SDR: Tuner gain set to Auto.
Input: Reading samples in async mode...
SDR: Tuned to 868.300MHz.
MQTT: MQTT Connected...
MQTT: MQTT Connection established.
Baseband: low pass filter for 250000 Hz at cutoff 50000 Hz, 20.0 us

Things to note:

Lines 4, 5: Configured to forward any data it receives to MQTT broker
Lines 20, 21: Connection to MQTT broker established
Line 6: Configured protocol 172 enabled
Lines 8, 9, 11, 12: USB dongle detected
Line 19: Listening to configured frequency 868.3 MHz

You should also see an output similar to the previous one during the test:

   time      : 
   model     : Bresser-6in1 id        : 
   channel   : 0            Battery   : 1             Temperature: 14.5 C
   Humidity  : 61           Sensor type: 1            Wind Gust : 0.0 m/s
   Wind Speed: 0.0 m/s      Direction : 90            UV        : 0.0
   Flags     : 0            Integrity : CRC

Which means the dongle is receiving data from the weather station.

Configure sensors in Home Assistant

Edit /homeassistant/configuration.yml with the File editor add-on and append:

mqtt:
  sensor:
    - name: Bresser51 Temperature
      state_topic: rtl_433/bresser51/temperature_C
      unique_id: bresser51_temperature_C
      value_template: '{{ value | float }}'
      unit_of_measurement: '°C'
      device_class: temperature

    - name: Bresser51 Humidity
      state_topic: rtl_433/bresser51/humidity
      unique_id: bresser51_humidity
      value_template: '{{ value | int }}'
      unit_of_measurement: '%'
      device_class: humidity

    - name: Bresser51 Wind Gust
      state_topic: rtl_433/bresser51/wind_max_m_s
      unique_id: bresser51_wind_max_m_s
      value_template: '{{ value | float }}'
      unit_of_measurement: m/s
      icon: mdi:weather-windy

    - name: Bresser51 Wind Speed
      state_topic: rtl_433/bresser51/wind_avg_m_s
      unique_id: bresser51_wind_avg_m_s
      value_template: '{{ value | float }}'
      unit_of_measurement: m/s
      icon: mdi:weather-windy

    - name: Bresser51 Wind Direction
      state_topic: rtl_433/bresser51/wind_dir_deg
      unique_id: bresser51_wind_dir_deg
      value_template: '{{ value | int }}'
      unit_of_measurement: '°'
      icon: mdi:compass-rose

    - name: Bresser51 Rain
      state_topic: rtl_433/bresser51/rain_mm
      unique_id: bresser51_rain_mm
      value_template: '{{ value | float }}'
      unit_of_measurement: mm
      icon: mdi:weather-rainy

    - name: Bresser51 Time
      state_topic: rtl_433/bresser51/time
      unique_id: bresser51_time
      icon: mdi:clock-outline

    - name: Bresser51 UV
      state_topic: rtl_433/bresser51/uv
      unique_id: bresser51_uv
      value_template: '{{ value | int }}'
      icon: mdi:white-balance-sunny

    - name: Bresser51 Light
      state_topic: rtl_433/bresser51/light_lux
      unique_id: bresser51_light_lux
      value_template: '{{ value | int }}'
      unit_of_measurement: lux
      icon: mdi:lightbulb-outline

  binary_sensor:
    - name: Bresser51 Battery
      state_topic: rtl_433/bresser51/battery_ok
      unique_id: bresser51_battery_ok
      payload_on: 0
      payload_off: 1
      device_class: battery

sql:
  - name: Bresser51 Rain 1 Minute Cumulative
    query: >-
      SELECT state
      FROM states
      INNER JOIN states_meta ON states.metadata_id = states_meta.metadata_id
      WHERE states_meta.entity_id = 'sensor.bresser51_rain'
      AND last_updated_ts <= strftime('%s', 'now', '-1 minute')
      ORDER BY last_updated_ts DESC
      LIMIT 1
    column: state
    unit_of_measurement: mm
    icon: mdi:weather-rainy

  - name: Bresser51 Rain 5 Minutes Cumulative
    query: >-
      SELECT state
      FROM states
      INNER JOIN states_meta ON states.metadata_id = states_meta.metadata_id
      WHERE states_meta.entity_id = 'sensor.bresser51_rain'
      AND last_updated_ts <= strftime('%s', 'now', '-5 minutes')
      ORDER BY last_updated_ts DESC
      LIMIT 1
    column: state
    unit_of_measurement: mm
    icon: mdi:weather-rainy

  - name: Bresser51 Rain 1 Hour Cumulative
    query: >-
      SELECT state
      FROM states
      INNER JOIN states_meta ON states.metadata_id = states_meta.metadata_id
      WHERE states_meta.entity_id = 'sensor.bresser51_rain'
      AND last_updated_ts <= strftime('%s', 'now', '-1 hour')
      ORDER BY last_updated_ts DESC
      LIMIT 1
    column: state
    unit_of_measurement: mm
    icon: mdi:weather-rainy

  - name: Bresser51 Rain 24 Hours Cumulative
    query: >-
      SELECT state
      FROM states
      INNER JOIN states_meta ON states.metadata_id = states_meta.metadata_id
      WHERE states_meta.entity_id = 'sensor.bresser51_rain'
      AND last_updated_ts <= strftime('%s', 'now', '-24 hours')
      ORDER BY last_updated_ts DESC
      LIMIT 1
    column: state
    unit_of_measurement: mm
    icon: mdi:weather-rainy

  - name: Bresser51 Rain 48 Hours Cumulative
    query: >-
      SELECT state
      FROM states
      INNER JOIN states_meta ON states.metadata_id = states_meta.metadata_id
      WHERE states_meta.entity_id = 'sensor.bresser51_rain'
      AND last_updated_ts <= strftime('%s', 'now', '-48 hours')
      ORDER BY last_updated_ts DESC
      LIMIT 1
    column: state
    unit_of_measurement: mm
    icon: mdi:weather-rainy

  - name: Bresser51 Rain 7 Days Cumulative
    query: >-
      SELECT state
      FROM states
      INNER JOIN states_meta ON states.metadata_id = states_meta.metadata_id
      WHERE states_meta.entity_id = 'sensor.bresser51_rain'
      AND last_updated_ts <= strftime('%s', 'now', '-7 days')
      ORDER BY last_updated_ts DESC
      LIMIT 1
    column: state
    unit_of_measurement: mm
    icon: mdi:weather-rainy

template:
  sensor:
    - name: Bresser51 Wind Speed km/h
      unique_id: bresser51_wind_speed_kmh
      unit_of_measurement: km/h
      icon: mdi:windsock
      state: |
        {{ (states('sensor.bresser51_wind_speed') | float) * 3.6 }}

    - name: Bresser51 Wind Speed Beaufort
      unique_id: bresser51_wind_speed_bft
      unit_of_measurement: bft
      icon: mdi:windsock
      state: |
        {{ (((states('sensor.bresser51_wind_speed') | float) / 0.836) ** (2/3)) | round(0, 'ceil') }}

    - name: Bresser51 Wind Gust km/h
      unique_id: bresser51_wind_gust_kmh
      unit_of_measurement: km/h
      icon: mdi:windsock
      state: |
        {{ (states('sensor.bresser51_wind_gust') | float) * 3.6 }}

    - name: Bresser51 Wind Gust Beaufort
      unique_id: bresser51_wind_gust_bft
      unit_of_measurement: bft
      icon: mdi:windsock
      state: |
        {{ (((states('sensor.bresser51_wind_gust') | float) / 0.836) ** (2/3)) | round(0, 'ceil') }}

    - name: Bresser51 Wind Direction Name
      unique_id: bresser51_wind_direction_name
      icon: mdi:compass-rose
      state: |
        {% set direction = "N NNE NE ENE E ESE SE SSE S SSW SW WSW W WNW NW NNW N".split() %}
        {% set sector = ((states('sensor.bresser51_wind_direction') | int) / 22) | int % 16 %}
        {{ direction[sector] }}

    - name: Bresser51 Rain 1 Minute
      unique_id: bresser51_rain_1_minute
      unit_of_measurement: mm
      icon: mdi:weather-rainy
      state: |
        {{ ((states('sensor.bresser51_rain') | float) - (states('sensor.bresser51_rain_1_minute_cumulative') | float)) | round(1) }}

    - name: Bresser51 Rain 5 Minutes
      unique_id: bresser51_rain_5_minutes
      unit_of_measurement: mm
      icon: mdi:weather-rainy
      state: |
        {{ ((states('sensor.bresser51_rain') | float) - (states('sensor.bresser51_rain_5_minutes_cumulative') | float)) | round(1) }}

    - name: Bresser51 Rain 1 Hour
      unique_id: bresser51_rain_1_hour
      unit_of_measurement: mm
      icon: mdi:weather-rainy
      state: |
        {{ ((states('sensor.bresser51_rain') | float) - (states('sensor.bresser51_rain_1_hour_cumulative') | float)) | round(1) }}

    - name: Bresser51 Rain 24 Hours
      unique_id: bresser51_rain_24_hours
      unit_of_measurement: mm
      icon: mdi:weather-rainy
      state: |
        {{ ((states('sensor.bresser51_rain') | float) - (states('sensor.bresser51_rain_24_hours_cumulative') | float)) | round(1) }}

    - name: Bresser51 Rain 48 Hours
      unique_id: bresser51_rain_48_hours
      unit_of_measurement: mm
      icon: mdi:weather-rainy
      state: |
        {{ ((states('sensor.bresser51_rain') | float) - (states('sensor.bresser51_rain_48_hours_cumulative') | float)) | round(1) }}

    - name: Bresser51 Rain 7 Days
      unique_id: bresser51_rain_7_days
      unit_of_measurement: mm
      icon: mdi:weather-rainy
      state: |
        {{ ((states('sensor.bresser51_rain') | float) - (states('sensor.bresser51_rain_7_days_cumulative') | float)) | round(1) }}

Adjusted for the Northern hemisphere and latest Home Assistant versions (Core 2024.11.0, Supervisor 2024.11.2, Operating System 13.2, Frontend 20241106.0), based on the great article by Johan Vromans

This will eventually end up creating the following, self-explanatory sensors:

sensor.bresser51_temperature (°C)
sensor.bresser51_humidity (%)
sensor.bresser51_wind_speed (m/s)
sensor.bresser51_wind_speed_kmh (km/h)
sensor.bresser51_wind_speed_beaufort (bft)
sensor.bresser51_wind_gust (m/s)
sensor.bresser51_wind_gust_kmh (km/h)
sensor.bresser51_wind_gust_beaufort (bft)
sensor.bresser51_wind_direction_name (N, S, W, E, etc)
sensor.bresser51_rain (mm)
sensor.bresser51_rain_1_minute (mm)
sensor.bresser51_rain_5_minutes (mm)
sensor.bresser51_rain_1_hour (mm)
sensor.bresser51_rain_24_hours (mm)
sensor.bresser51_rain_48_hours (mm)
sensor.bresser51_rain_7_days (mm)
sensor.bresser51_time
sensor.bresser51_uv
sensor.bresser51_light (lux)
binary_sensor.bresser51_battery ("on" if the battery is low)

Note that the amount of rainfall sent by the weather station (sensor.bresser51_rain) is cumulative. All other rainfall sensors are differential (i.e. amount of rain in the last 5 minutes, hour, day, etc)

Create sensors

Restart Home Assistant to reload the configuration.

Install the MQTT integration which will create the sensors.

Display in dashboard

Here’s the vertical-stack card YAML I use in my dashboard to display weather data:

type: vertical-stack
title: Weather station
cards:
  - graph: line
    type: sensor
    entity: sensor.bresser51_temperature
    detail: 2
    unit: ⁰C
    hours_to_show: 48
    name: Temperature
  - type: gauge
    name: Humidity
    unit: '%'
    entity: sensor.bresser51_humidity
    max: 100
    min: 0
    needle: true
  - type: glance
    entities:
      - entity: sensor.bresser51_wind_direction_name
        name: Direction
      - entity: sensor.bresser51_wind_beaufort
        name: Speed
      - entity: sensor.bresser51_wind_gust_beaufort
        name: Gust
  - type: glance
    entities:
      - entity: sensor.bresser51_rain_1_minute
        name: 1 Minute
      - entity: sensor.bresser51_rain_5_minutes
        name: 5 Minutes
      - entity: sensor.bresser51_rain_1_hour
        name: 1 Hour
      - entity: sensor.bresser51_rain_24_hours
        name: 24 Hours
      - entity: sensor.bresser51_rain_48_hours
        name: 48 Hours
      - entity: sensor.bresser51_rain_7_days
        name: 7 Days

Have fun!

Troubleshooting

In case something does not work:

Check add-on logs for any error messages
Verify Mosquitto broker receives data from rtl_433 with MQTT Explorer (community add-on)
Try restarting (not only reloading) Home Assistant

Switch terminal theme based on location day/night

Sun, 03 Nov 2024 00:00:00 GMT

I recently switched from VS Code, Solarized, Hack and rxvt-unicode to LazyVim, TokyoNight, FiraCode and kitty.

My previous setup would auto-switch between the light and dark theme on the terminal and the editor based on the time of day for my location and whether it was day or night. I’ve found this is easier on my eyes.

I wanted to replicate this functionality with the new setup, so I came up with the following Ruby script that queries (and caches the response of) an API for the sunrise and sunset time of a specified location and symlinks the right theme file based on whether it is currently day or night.

Note: I intentionally chose not to use a Gem to calculate the sunrise/sunset time to keep the script dependency-free.

require 'fileutils'
require 'json'
require 'net/http'
require 'uri'

if ARGV.empty?
  warn "Usage: LAT= LON= #{$0}   "
  exit 1
end

API_URL_FMT = 'https://api.sunrisesunset.io/json?lat=%f&lng=%f&time_format=24'.freeze
CACHE_PATH_FMT = '/tmp/sunrise-sunset-cache-%s-%s.json'.freeze

LATITUDE = ENV.fetch('LAT').freeze # Latitude of area in degrees North
LONGITUDE = ENV.fetch('LON').freeze # Longitude of area in degrees East
DAY_PATH = ARGV.fetch(0) # Path to day theme file
NIGHT_PATH = ARGV.fetch(1) # Path to night theme file
DEST_PATH = ARGV.fetch(2) # Path to end-result theme file (symbolic link)

cache_path = format(CACHE_PATH_FMT, LATITUDE, LONGITUDE)

# Remove if outdated
if File.exist?(cache_path) && File.mtime(cache_path).to_date != Date.today
  FileUtils.rm_f(cache_path)
end

data =
  begin
    JSON.load(File.open(json_cache_path))
  rescue Errno::ENOENT
    url = format(API_URL_FMT, LATITUDE, LONGITUDE)
    uri = URI.parse(url)
    response = Net::HTTP.get_response(uri)
    File.open(json_cache_path, 'w') { |f| f.write(response.body) }

    JSON.parse(response.body)
  end

sunrise, sunset = data.fetch('results').values_at('dawn', 'dusk')
now = Time.now
sunrise_time = Time.new(now.year, now.month, now.day, *sunrise.split(':').map(&:to_i))
sunset_time = Time.new(now.year, now.month, now.day, *sunset.split(':').map(&:to_i))

theme_path =
  if now > sunrise_time && now < sunset_time
    DAY_PATH
  else
    NIGHT_PATH
  end

FileUtils.ln_s(theme_path, DEST_PATH, force: true)

I then proceeded to rewrite it in a more object-oriented approach, with object composition and separated concerns among classes and methods (drawing inspiration from the POODR book):

require 'date'
require 'fileutils'
require 'json'
require 'net/http'
require 'uri'

module DayNight
  class FileCacher
    attr_reader :cache_path

    def initialize(cache_path)
      @cache_path = cache_path
    end

    private def outdated_cache?
      File.exist?(cache_path) && File.mtime(cache_path).to_date != Date.today
    end

    private def bust_cache
      FileUtils.rm_f(cache_path)
    end

    private def write_cache(data)
      File.open(cache_path, 'w') do |f|
        f.write(data)
      end
    end

    def call
      bust_cache if outdated_cache?

      File.read(cache_path)
    rescue Errno::ENOENT
      yield.tap do |data|
        write_cache(data)
      end
    end
  end

  class DataFetcher
    CACHE_PATH_FMT = '/tmp/sunrise-sunset-cache-%s-%s.json'.freeze
    API_URL_FMT = 'https://api.sunrisesunset.io/json?lat=%f&lng=%f&time_format=24'.freeze

    attr_reader :latitude, :longitude

    def initialize(latitude, longitude)
      @latitude = latitude
      @longitude = longitude
    end

    private def cache_path
      format(CACHE_PATH_FMT, latitude, longitude)
    end

    private def url
      format(API_URL_FMT, latitude, longitude)
    end

    private def response
      uri = URI.parse(url)
      Net::HTTP.get_response(uri)
    end

    private def data
      FileCacher.new(cache_path).call do
        response.body
      end
    end

    def call
      JSON.parse(data)
    end
  end

  class Calculator
    attr_reader :data, :now

    def initialize(data)
      @data = data
      @now = Time.now
    end

    private def to_time(time_str)
      Time.new(now.year, now.month, now.day, *time_str.split(':').map(&:to_i))
    end

    private def sunrise_time
      to_time(data.fetch('results').fetch('dawn'))
    end

    private def sunset_time
      to_time(data.fetch('results').fetch('dusk'))
    end

    def day?
      sunrise_time < now && now < sunset_time
    end
  end

  class Symlinker
    attr_reader :day_path, :night_path, :dest_path

    def initialize(day_path:, night_path:, dest_path:, is_day:)
      @day_path = day_path
      @night_path = night_path
      @dest_path = dest_path
      @is_day = is_day
    end

    def day?
      @is_day
    end

    private def source_path
      if day?
        day_path
      else
        night_path
      end
    end

    def call
      FileUtils.ln_s(source_path, dest_path, force: true)
    end
  end

  def self.symlink(latitude:, longitude:, day_path:, night_path:, dest_path:)
    data = DataFetcher.new(latitude, longitude).call

    Symlinker.new(
      day_path: day_path,
      night_path: night_path,
      dest_path: dest_path,
      is_day: Calculator.new(data).day?
    ).call
  end
end

if ARGV.empty?
  warn "Usage: LAT= LON= #{$0}   "
  exit 1
end

DayNight.symlink(
  latitude: ENV.fetch('LAT'), # Latitude of area in degrees North
  longitude: ENV.fetch('LON'), # Longitude of area in degrees East
  day_path: ARGV.fetch(0), # Path to day file
  night_path: ARGV.fetch(1), # Path to night file
  dest_path: ARGV.fetch(2) # Path to destination file (symbolic link)
)

I run it with cron every 5 minutes (output of crontab -l):

*/5 * * * * LAT=37.9838 LON=23.7275 ruby ~/work/scripts/symlink-day-night.rb ~/src/tokyonight.nvim/extras/kitty/tokyonight_day.conf ~/src/tokyonight.nvim/extras/kitty/tokyonight_night.conf ~/.config/kitty/theme.conf

And in my kitty config I simply reference the symlinked theme:

font_family FiraCode
font_size 14
update_check_interval 0
include theme.conf

Abort Capistrano deploy with unpushed Git commits

Sat, 04 Jun 2022 00:00:00 GMT

To have Capistrano abort the deploy when there are unpushed commits in Git, add the following block in config/deploy.rb:

before :deploy, :abort_with_unpushed_changes do
  run_locally do
    if !test('git merge-base --is-ancestor @ @{u}')
      error 'Push changes first'
      raise 'Unpushed changes'
    end
  end
end

GoToCoordinates component for React Leaflet

Sat, 02 Oct 2021 00:00:00 GMT

React Leaflet is a React library that exposes Leaflet classes as React components, making it very easy to add interactive maps to React web apps.

This is the fourth in a series of posts on how I use the library. My intention is to share back some of the things I’ve learned and implemented in the hope of them being useful to others.

In this post, I present the GoToCoordinates component which accepts a pair of latitude and longitude coordinates and centers the map, drawing a marker on the exact point. You can see it in action on vouna.gr.

First, the component:

import React from 'react';
import PropTypes from 'prop-types';
import { useMap } from 'react-leaflet';

const MAP_BOUNDS = [[31.08, 14.26], [44.91, 34.69]]; // Greece
const MIN_ZOOM = 13;
const PLACEHOLDER = '37.984167, 23.728056'; // Athens, center
const COORDINATES_REGEX =
  /^\s*-?(90|[1-8]?[0-9])(\.\d+)?\s*°?(\s*,\s*|\s+)-?(180|1[0-7][0-9]|[1-9]?[0-9])(\.\d+)?\s*°?\s*$/;

function coordinatesWithinBounds(latitude, longitude) {
  const [[minLat, minLon], [maxLat, maxLon]] = MAP_BOUNDS;

  return (
    latitude >= minLat &&
    latitude <= maxLat &&
    longitude >= minLon &&
    longitude <= maxLon
  );
}

function GoToCoordinates(props) {
  const { setPointCoordinates, clearPointCoordinates } = props;

  const [coordinates, setCoordinates] = React.useState('');

  const map = useMap();

  function handleCoordinatesChange(event) {
    const {
      target: { value },
    } = event;

    setCoordinates(value);

    if (value.length === 0 || !COORDINATES_REGEX.test(value)) {      clearPointCoordinates();      return;    }
    const [latitudeStr, longitudeStr] = value.split(/\s*,\s*/);
    const latitude = parseFloat(latitudeStr, 10);
    const longitude = parseFloat(longitudeStr, 10);

    if (!coordinatesWithinBounds(latitude, longitude)) {      clearPointCoordinates();      return;    }
    setPointCoordinates([latitude, longitude]);

    const zoom = Math.max(MIN_ZOOM, map.getZoom());
    map.setView([latitude, longitude], zoom);
  }

  function handleClearChange() {
    setCoordinates('');
    clearPointCoordinates();
  }

  return (
    <div className="leaflet-control">
      <input
        type="text"
        size="15"
        title="Go to coordinates"
        placeholder={PLACEHOLDER}
        value={coordinates}
        onChange={handleCoordinatesChange}
      />
      {coordinates.length > 0 && (        <button onClick={handleClearChange} title="Καθαρισμός">          ×        button>      )}    div>
  );
}

GoToCoordinates.propTypes = {
  setPointCoordinates: PropTypes.func.isRequired,
  clearPointCoordinates: PropTypes.func.isRequired,
};

export default GoToCoordinates;

Things to note:

Lines 36-39: If text is empty or not a valid coordinate pair, the marker is removed
Lines 45-48: If text is a valid coordinate pair but not within the desired bounds (in this example, Greece), the marker is removed
Lines 71-75: If text is present, a clear “x” button is shown that empties the text field and removes the marker when clicked

Then, the necessary styles for the clear “x” button:

.leaflet-control.go-to-coordinates button {
  border: none;
  background: transparent;
  display: inline-block;
  margin-left: -30px;
  width: 30px;
  text-align: center;
  font-size: 1.5em;
  cursor: pointer;
  opacity: 50%;
}

And finally, here’s how you’d use it in a map:

import React from 'react';
import { Marker } from 'react-leaflet';

import GoToCoordinates from './GoToCoordinates';

const MAP_BOUNDS = [[31.08, 14.26], [44.91, 34.69]]; // Greece

function round(number, precision = 0) {
  return (
    Math.round(number * Math.pow(10, precision) + Number.EPSILON) /
    Math.pow(10, precision)
  );
}

function formatLatitude(latitude) {
  const direction = latitude > 0 ? 'N' : 'S';
  return `${round(Math.abs(latitude), 6)}° ${direction}`;
}

function formatLongitude(longitude) {
  const direction = longitude > 0 ? 'E' : 'W';
  return `${round(Math.abs(longitude), 6)}° ${direction}`;
}

function MyMap() {
  const [goToPoint, setGoToPoint] = React.useState(null);

  function clearPointCoordinates() {
    setGoToPoint(null);
  }

  return (
    <MapContainer
      bounds={MAP_BOUNDS}
      style={{ width: '100%', height: '100vh' }}
    >
      <TileLayer
        url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        attribution='© OpenStreetMap contributors'
      />
      {goToPoint !== null && (        <Marker position={goToPoint}>          <Tooltip>            {formatLatitude(goToPoint[0])}, {formatLongitude(goToPoint[1])}          Tooltip>        Marker>      )}      <div className="leaflet-bottom leaflet-left">
        <GoToCoordinates          setPointCoordinates={setGoToPoint}          clearPointCoordinates={clearPointCoordinates}        />      div>
    MapContainer>
  );
}

export default MyMap;

Things to note:

Lines 41-47: The marker is shown only if its coordinates are present. When shown, its tooltip displays its formatted coordinates.
Lines 49-52: The component in action

MouseCoordinates component for React Leaflet

Thu, 15 Jul 2021 00:00:00 GMT

React Leaflet is a React library that exposes Leaflet classes as React components, making it very easy to add interactive maps to React web apps.

This is the third in a series of posts on how I use the library. My intention is to share back some of the things I’ve learned and implemented in the hope of them being useful to others.

In this post, I present the MouseCoordinates component which renders the latitude and longitude that the mouse pointer hovers on and allows the user to copy them by pressing Ctrl-C. You can see it in action on vouna.gr.

First, the component:

import React from 'react';
import { useMapEvents } from 'react-leaflet';

function round(number, precision = 0) {
  return (
    Math.round(number * Math.pow(10, precision) + Number.EPSILON) /
    Math.pow(10, precision)
  );
}

function formatLatitude(latitude) {
  const direction = latitude > 0 ? 'N' : 'S';
  return `${round(Math.abs(latitude), 6)}° ${direction}`;
}

function formatLongitude(longitude) {
  const direction = longitude > 0 ? 'E' : 'W';
  return `${round(Math.abs(longitude), 6)}° ${direction}`;
}

function MouseCoordinates() {
  const [mousePoint, setMousePoint] = React.useState(null);

  const formattedCoordinates =
    mousePoint === null
      ? ''
      : `${formatLatitude(mousePoint.lat)}, ${formatLongitude(mousePoint.lng)}`;
  React.useEffect(
    function copyToClipboard() {
      function handleCtrlCKeydown(event) {
        if (
          event.key === 'c' &&          event.ctrlKey &&          formattedCoordinates.length > 0 &&
          navigator.clipboard
        ) {
          navigator.clipboard.writeText(formattedCoordinates);
        }
      }

      document.addEventListener('keydown', handleCtrlCKeydown);

      return function cleanup() {
        document.removeEventListener('keydown', handleCtrlCKeydown);
      };
    },
    [formattedCoordinates]
  );

  useMapEvents({
    mousemove(event) {
      setMousePoint(event.latlng);
    },
    mouseout() {      setMousePoint(null);    },  });

  if (formattedCoordinates.length === 0) return null;
  return (
    <div className="leaflet-control-attribution leaflet-control">       {formattedCoordinates}
    div>
  );
}

export default MouseCoordinates;

Things to note:

Line 27: formatLatitude and formatLongitude are used to format the coordinates
Lines 33-34: It is possible to copy the coordinates by pressing Ctrl-C
Lines 55-57, 60: When the mouse pointer leaves the map, no coordinates are shown
Line 63: The component is agnostic regarding its corner/position in the map. Instead, it is expected that you wrap it with a
that has the desired position classes.

And here’s how you’d use it in a map:

import React from 'react';

import MouseCoordinates from './MouseCoordinates';

const GREECE_BOUNDS = [
  [31.08, 14.26],
  [44.91, 34.69],
];

function MyMap() {
  return (
    <MapContainer
      bounds={GREECE_BOUNDS}
      style={{ width: '100%', height: '100vh' }}
    >
      <TileLayer
        url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        attribution='© OpenStreetMap contributors'
      />
      <div className="leaflet-bottom leaflet-left">         <MouseCoordinates />
      div>
    MapContainer>
  );
}

export default MyMap;

Things to note:

Line 20: In this example, the coordinates are shown on the bottom-left corner of the map

BingTileLayer component for React Leaflet

Wed, 14 Jul 2021 00:00:00 GMT

Update: I’ve since switched to EsriTileLayer since Bing Maps is being discontinued in favor of Azure Maps.

React Leaflet is a React library that exposes Leaflet classes as React components, making it very easy to add interactive maps to React web apps.

This is the second in a series of posts on how I use the library. My intention is to share back some of the things I’ve learned and implemented in the hope of them being useful to others.

In this post, I present the BingTileLayer component which exposes Bing Maps tile layers by wrapping leaflet-bing-layer as a React component.

First, the component:

import { createLayerComponent } from '@react-leaflet/core';
import bingTileLayer from 'leaflet-bing-layer';
import PropTypes from 'prop-types';

const IMAGERY_SETS = [  'Aerial',
  'AerialWithLabels',
  'AerialWithLabelsOnDemand',
  'CanvasDark',
  'CanvasLight',
  'CanvasGray',
  'Road',
  'RoadOnDemand',
  'OrdnanceSurvey',
];

const CULTURES = [  'af', 'am', 'ar-sa', 'as', 'az-Latn', 'be', 'bg', 'bn-BD',
  'bn-IN', 'bs', 'ca', 'ca-ES-valencia', 'cs', 'cy', 'da', 'de',
  'de-de', 'el', 'en-GB', 'en-US', 'es', 'es-ES', 'es-US', 'es-MX',
  'et', 'eu', 'fa', 'fi', 'fil-Latn', 'fr', 'fr-FR', 'fr-CA', 'ga',
  'gd-Latn', 'gl', 'gu', 'ha-Latn', 'he', 'hi', 'hr', 'hu', 'hy',
  'id', 'ig-Latn', 'is', 'it', 'it-it', 'ja', 'ka', 'kk', 'km',
  'kn', 'ko', 'kok', 'ku-Arab', 'ky-Cyrl', 'lb', 'lt', 'lv',
  'mi-Latn', 'mk', 'ml', 'mn-Cyrl', 'mr', 'ms', 'mt', 'nb', 'ne',
  'nl', 'nl-BE', 'nn', 'nso', 'or', 'pa', 'pa-Arab', 'pl',
  'prs-Arab', 'pt-BR', 'pt-PT', 'qut-Latn', 'quz', 'ro', 'ru',
  'rw', 'sd-Arab', 'si', 'sk', 'sl', 'sq', 'sr-Cyrl-BA',
  'sr-Cyrl-RS', 'sr-Latn-RS', 'sv', 'sw', 'ta', 'te', 'tg-Cyrl',
  'th', 'ti', 'tk-Latn', 'tn', 'tr', 'tt-Cyrl', 'ug-Arab', 'uk',
  'ur', 'uz-Latn', 'vi', 'wo', 'xh', 'yo-Latn', 'zh-Hans',
  'zh-Hant', 'zu',
];

const createBingTileLayer = (props, context) => {
  const instance = new bingTileLayer(props);

  // Fix attribution not showing initially.
  // TODO: Remove once
  // https://github.com/digidem/leaflet-bing-layer/pull/30
  // is merged.
  instance._onAdd = instance.onAdd;  instance.onAdd = function (map) {    this._onAdd(map);    this._updateAttribution();  };
  return { instance, context };
};

const BingTileLayer =
  createLayerComponent(createBingTileLayer, () => null);

BingTileLayer.propTypes = {
  bingMapsKey: PropTypes.string.isRequired,
  imagerySet: PropTypes.oneOf(IMAGERY_SETS),
  culture: PropTypes.oneOf(CULTURES),
  style: PropTypes.string,
};

BingTileLayer.defaultProps = {
  imagerySet: IMAGERY_SETS[0],  culture: CULTURES[19],  style: null,
};

export default BingTileLayer;

Things to note:

Line 5, 62: Possible values for imagerySet prop (default: 'Aerial')
Line 17, 63: Possible values for culture prop (default: 'en-US')
Line 42-46: A temporary hack to fix a bug in leaflet-bing-layer that prevents the attribution text from showing. I’ve created a pull request for this but the project seems dead.

And here’s how you’d use it in a map:

import React from 'react';

import BingTileLayer from './BingTileLayer';

const GREECE_BOUNDS = [
  [31.08, 14.26],
  [44.91, 34.69],
];

const BING_MAPS_KEY = 'mykey';
function MyMap() {
  return (
    <MapContainer
      bounds={GREECE_BOUNDS}
      style={{ width: '100%', height: '100vh' }}
    >
              bingMapsKey={BING_MAPS_KEY}         imagerySet="AerialWithLabels"         culture="el"       />     MapContainer>
  );
}

export default MyMap;

Things to note:

Line 10: Replace mykey with your Bing Maps key that you can obtain for free
Line 18-22: Example of using the component

ZoomControlWithReset component for React Leaflet

Sat, 10 Jul 2021 00:00:00 GMT

React Leaflet is a React library that exposes Leaflet classes as React components, making it very easy to add interactive maps to React web apps.

This is the first in a series of posts on how I use the library. My intention is to share back some of the things I’ve learned and implemented in the hope of them being useful to others.

In this post, I present the ZoomControlWithReset component which provides the classic zoom +/- control with one extra button which resets the map view to fit some bounds (usually calculated for map points).

First, the component:

import React from 'react';
import PropTypes from 'prop-types';import { useMap } from 'react-leaflet';

function ZoomControlWithReset(props) {
  const { zoomInTitle = 'Zoom in', zoomResetTitle = 'Reset zoom', zoomOutTitle = 'Zoom out', bounds } = props;
  const map = useMap();

  return (
    <div className="leaflet-control leaflet-control-zoom leaflet-bar">
      <a
        className="leaflet-control-zoom-in"
        href="#"
        title={zoomInTitle}
        role="button"
        aria-label="Zoom in"
        onClick={(e) => {
          map.zoomIn();
          e.preventDefault();
        }}
      >
        +
      a>
      <a
        className="leaflet-control-zoom-out"
        href="#"
        title={zoomOutTitle}
        role="button"
        aria-label="Zoom out"
        onClick={(e) => {
          map.zoomOut();
          e.preventDefault();
        }}
      >
        -
      a>
      <a
        className="leaflet-control-zoom-out"        href="#"
        title={zoomResetTitle}
        role="button"
        aria-label="Reset zoom"
        onClick={(e) => {
          map.fitBounds(bounds);          e.preventDefault();
        }}
      >
        ↺      a>
    div>
  );
}

ZoomControlWithReset.propTypes = {
  zoomInTitle: PropTypes.string,
  zoomOutTitle: PropTypes.string,
  zoomResetTitle: PropTypes.string,
  bounds: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
};

export default ZoomControlWithReset;

Things to note:

Line 2: The component uses the prop-types npm package for validating props in development
Line 6: It’s possible to override the title attribute of the buttons with the zoomInTitle, zoomOutTitle and zoomResetTitle props
Line 39: Reuse the leaflet-control-zoom-out class to style the reset button
Line 45: Reset the view
Line 49: Anti-clockwise open circle arrow

And here’s how you’d use it in a map:

import React from 'react';
import { TileLayer } from 'react-leaflet';

import ZoomControlWithReset from './ZoomControlWithReset';

const GREECE_BOUNDS = [  [31.08, 14.26],  [44.91, 34.69],];
function MyMap() {
  return (
    <MapContainer
      bounds={GREECE_BOUNDS}
      style={{ width: '100%', height: '100vh' }}
    >
      <TileLayer
        url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        attribution='© OpenStreetMap contributors'
      />
      <div className="leaflet-top leaflet-left">
        <ZoomControlWithReset bounds={bounds} />
      div>
    MapContainer>
  );
}

export default MyMap;

Things to note:

Lines 6-9: In Leaflet, bounds can be specified with two coordinate pairs, in which the first element is the top-left corner and the second element is the bottom-right. In your case, the bounds will probably be those of the rectangle that contains all of your map’s points.

Here’s a function I’ve written to calculate the bounds of an array of points:

function boundsForPoints(points) {
    if (points.length === 0) return [];

    const [latitude, longitude] = points[0];
    const bounds = [
      [latitude, longitude],
      [latitude, longitude],
    ];

    points.forEach(([latitude, longitude]) => {
      bounds[0][0] = Math.min(bounds[0][0], latitude);
      bounds[0][1] = Math.min(bounds[0][1], longitude);
      bounds[1][0] = Math.max(bounds[1][0], latitude);
      bounds[1][1] = Math.max(bounds[1][1], longitude);
    });

    return bounds;
}

Strip Exif metadata from images in Rails

Sat, 06 Mar 2021 00:00:00 GMT

I recently wanted to strip the Exif metadata from user-uploaded, ActiveStorage-backed images in Rails. The reason is that images taken with mobile phones are usually geotagged and contain the user’s location, which is sensitive personal data.

Initially, I thought of implementing it in the model by calling the relevant code with a before_save callback, having it process the attached image.

Sadly, I wasn’t able to find a publicly-documented, usable API in ActiveStorage that allows this kind of manipulation. After some digging, I did manage to make it work, but the implementation was based on an internal, undocumented API, so I quickly abandoned it.

Given this limitation, I quickly realized that the most viable solution would be to take care of things before the image file ever reaches ActiveStorage. This way, I wouldn’t have to mess with its quirky API.

The solution

Install ImageMagick:

sudo apt install imagemagick # Debian/Ubuntu

Install the mini_magick Gem:

bundle add mini_magick

Add the following code in your controller (or a separate library file):

private def strip_exif_from_attachment_params(record, record_params)
  record.attachment_reflections.each_key do |attachment_attribute|
    Array(record_params[attachment_attribute]).each do |file_param|
      next if file_param.content_type != 'image/jpeg'

      uploaded_file = file_param.tempfile
      image = MiniMagick::Image.read(uploaded_file)
      image.auto_orient # Before stripping
      image.strip # Strip Exif
      uploaded_file.rewind
      image.write(uploaded_file)
    end
  end
end

Things to note:

Line 1: Accept the record as a parameter
Line 2: Use reflection on the record to figure out its ActiveStorage attachments (so it operates on all of them)
Line 4: Skip attachments that are not JPEG images
Line 6: Operate on the uploaded file’s Tempfile
Line 8: Use Exif metadata, before stripping, to orient the image (e.g. fix it if it’s rotated)
Line 9: Strip Exif metadata
Line 11: Persist changes to the file

Assuming you have a user model with an attached avatar:

class User < ApplicationRecord
  has_one_attached :avatar
end

Here’s an example on how you’d use it:

class UsersController < ApplicationController
  before_action :set_user, only: %i[update]

  def update
    strip_exif_from_attachment_params(@user, update_params)
    if !@user.update(update_params)
      flash.now[:alert] = 'Failed to update user'
      render :edit
      return
    end

    redirect_to user_path(@user), notice: 'User updated'
  end

  private def set_user
    @user = User.find(params.require(:id))
  end

  private def update_params
    params.require(:user).permit(:avatar)
  end
end

Have fun!

Convert Greek to Greeklish in Ruby with greeklish_iso843

Thu, 04 Mar 2021 00:00:00 GMT

Update: Now available as an online service.

A common need for many Greek Rails projects I work on is converting Greek text to Greeklish, a process known as transliteration. I use it mainly to generate URL-safe slugs.

There are many ways to go about this, but the ISO 843 standard (based on the “ΕΛΟΤ 743” Greek standard) is the one used by the Greek State.

A while back, I put in the effort and ported an official implementation from JavaScript to Ruby, vastly improving it in the process. I’ve been using it ever since, copying it from project to project.

Today I decided to open-source it and the result is a Gem called greeklish_iso843.

Web server from scratch in Go

Sat, 09 May 2020 00:00:00 GMT

I recently started learning Go for the 3rd or 4th time. My previous attempts did not succeed because, without any projects to use it for, I quickly forgot it and lost motivation.

To make this time work, I’ve decided to write code while reading documentation, books, and watching courses.

The first project I decided to implement is a GET-only web/HTTP server. Coming from Ruby, I based my implementation on Marc-André Cournoyer’s Rebuilding a Web Server in Ruby class.

Here is server/server.go:

package server

import (
	"bufio"
	"bytes"
	"fmt"
	"io"
	"net"
	"net/http"
	"strings"
)

type Env map[string]string

// Part of Rack web server interface
type Response struct {
	Status  int
	Headers map[string]string
	Body    io.Reader
}

// Part of Rack web server interface
// Applications are functions that accept Env and return Response
type App func(Env) *Response

type Server struct {
	Port int
	App
}

func NewServer(port int, app App) *Server {
	return &Server{Port: port, App: app}
}

func (s *Server) Start() error {
	ln, err := net.Listen("tcp", fmt.Sprintf(":%d", s.Port))
	if err != nil {
		return err
	}

	for {
		conn, err := ln.Accept()
		if err != nil {
			return err
		}

		c := newConnection(conn, s.App)

		// Process request concurrently
		go c.process()
	}
}

type connection struct {
	net.Conn
	App
}

func newConnection(conn net.Conn, app App) *connection {
	return &connection{Conn: conn, App: app}
}

func (c *connection) process() {
	reader := bufio.NewReader(*c)
	lines := bytes.NewBuffer(nil)

	for {
		data, err := reader.ReadBytes('\n')
		if err != nil {
			panic(err)
		}

		_, err = lines.Write(data)
		if err != nil {
			panic(err)
		}

		// Headers-Body separator
		if string(data) == "\r\n" {
			break
		}
	}

	// Parse HTTP request (part of Go's stdlib)
	req, err := http.ReadRequest(bufio.NewReader(lines))
	if err != nil {
		panic(err)
	}

	// Part of Rack web server interface
	env := make(Env)
	for name, value := range req.Header {
		envName := name
		envName = strings.ToUpper(envName)
		envName = strings.Replace(envName, "-", "_", -1)
		envName = "HTTP_" + envName
		env[envName] = value[0]
	}
	env["PATH_INFO"] = req.URL.Path
	env["REQUEST_METHOD"] = req.Method

	c.respond(env)
	c.close()
}

func (c *connection) respond(env Env) {
	resp := c.App(env) // Run app and store Response
	reason := reasonFromStatus(resp.Status)

	c.Conn.Write([]byte(fmt.Sprintf("HTTP/1.1 %d %s\r\n", resp.Status, reason)))

	for name, value := range resp.Headers {
		c.Conn.Write([]byte(fmt.Sprintf("%s: %s\r\n", name, value)))
	}

	// Headers-Body separator
	c.Conn.Write([]byte("\r\n"))

	scanner := bufio.NewScanner(resp.Body)

	for scanner.Scan() {
		c.Conn.Write([]byte(scanner.Text() + "\n"))
	}
}

func reasonFromStatus(status int) string {
	// A couple of codes for demonstration
	return map[int]string{
		200: "OK",
		404: "Not Found",
	}[status]
}

func (c *connection) close() {
	c.Conn.Close()
}

And main.go that uses it:

package main

import (
	"fmt"
	"strconv"
	"strings"
	"time"

	"github.com/agorf/fs-webserver/server"
)

const port = 3000

func app(env server.Env) *server.Response {
	if env["PATH_INFO"] == "/sleep" {
		time.Sleep(5 * time.Second)
	}

	message := fmt.Sprintf(
		"Your user agent is %s and you asked for path %s\n",
		env["HTTP_USER_AGENT"],
		env["PATH_INFO"],
	)

	return &server.Response{
		Status: 200,
		Headers: map[string]string{
			"Content-Type":   "text/plain",
			"Content-Length": strconv.Itoa(len(message)),
		},
		Body: strings.NewReader(message),
	}
}

func main() {
	fmt.Printf("Listening on port %d...\n", port)

	s := server.NewServer(port, app)

	err := s.Start()
	if err != nil {
		panic(err)
	}
}

The app we’re serving is very simple, responding with the user agent header and the requested path.

The cool thing about this is that it serves requests concurrently. To verify that, we can run the server in a terminal window:

$ go run main.go
Listening on port 3000...

Open a new terminal window and make a long-lived (5 seconds) request:

$ curl http://localhost:3000/sleep

Open another terminal window and make many short-lived requests, verifying they’re immediately processed while the long-lived request is blocked:

$ curl http://localhost:3000
Your user agent is curl/7.64.0 and you asked for path /
$ curl http://localhost:3000
Your user agent is curl/7.64.0 and you asked for path /
$ curl http://localhost:3000
Your user agent is curl/7.64.0 and you asked for path /

Since I’m a Go newbie, I’d love to have your feedback if you’re more experienced.

DIY Pomodoro with cron

Wed, 22 Apr 2020 00:00:00 GMT

I recently wanted to employ the Pomodoro Technique to remember to take regular breaks from the computer.

Being a fan of DIY for simple things, I decided to implement it with cron, desktop notifications and a subtle chime sound.

Execute crontab -e from a terminal and write:

0,30 * * * * DISPLAY=:0.0 notify-send -t 10000 Pomodoro 'Back to work!'; XDG_RUNTIME_DIR=/run/user/1000 paplay /usr/share/sounds/freedesktop/stereo/complete.oga
25,55 * * * * DISPLAY=:0.0 notify-send -t 10000 -u critical Pomodoro 'Time for a 5-minute break!'; XDG_RUNTIME_DIR=/run/user/1000 paplay /usr/share/sounds/freedesktop/stereo/complete.oga

Things to note:

At 0 and 30 minutes past you get a Back to work! notification and sound
At 25 and 55 minutes past you get a Time for a 5-minute break! notification and sound
Notifications are automatically dismissed after 10 seconds
1000 is your user id. You can get it with echo $UID from a terminal.
paplay plays sounds with PulseAudio
/usr/share/sounds/freedesktop/stereo/complete.oga is the path to the audio file and is part of the sound-theme-freedesktop package in Debian (may be missing from your system)

If you prefer 50 minutes of work followed by a 10-minute break:

0 * * * * DISPLAY=:0.0 notify-send -t 10000 Pomodoro 'Back to work!'; XDG_RUNTIME_DIR=/run/user/1000 paplay /usr/share/sounds/freedesktop/stereo/complete.oga
50 * * * * DISPLAY=:0.0 notify-send -t 10000 -u critical Pomodoro 'Time for a 10-minute break!'; XDG_RUNTIME_DIR=/run/user/1000 paplay /usr/share/sounds/freedesktop/stereo/complete.oga

Thanks to zorbash for the idea to use desktop notifications.

Painless PostgreSQL backups to Amazon S3

Mon, 20 Apr 2020 00:00:00 GMT

I recently wanted to have backups of a PostgreSQL database running on a server that backs a Rails app.

Requirements & solutions

Stored off-site

Otherwise it wouldn’t really be a backup.

For this, I use Amazon S3.

Low transfer and storage cost

Again, Amazon S3 transfer and storage costs are reasonable in this context.

Inacessible from the server

So that even if someone broke into the server, they wouldn’t be able to access the off-site location and mess with the backups.

For this, I created a write-only Amazon S3 bucket (how to do is beyond the scope of this article)

Encrypted on the server

This prevents Amazon or whoever might break into the bucket to read the data.

For this, I use GnuPG with symmetric encryption (i.e. a passphrase for both encryption and decryption, instead of a public-private keypair)

Simple, with as few dependencies as possible

I wrote a custom shell script that uses s4cmd to handle the upload.

Secure

I hardcoded all credentials in the script file (readable only by my user), used environment variables as little as possible and avoided passing passwords as command-line arguments.

Automatic

I run the script daily with cron.

Script

Important security points:

Before writing your credentials to this file, make sure it is not readable by anyone else by setting its permissions: chmod go-rwx database-backup.sh
Make sure the editor you use does not keep temporary files of things you type (e.g. for undo history)
Either write this file in the server directly or in your workstation and transfer it securely with SSH.

#!/usr/bin/env bash

# ---- BEGIN configuration ----
database_host=localhost
database_port=5432
database_username=app
database_password=
database_name=app_production
database_backup_passphrase=
database_backup_s3_access_key=
database_backup_s3_secret_key=
database_backup_s3_bucket_name=
# ---- END configuration -----

dump_file="${database_name}-$(date --utc +%FT%TZ).dump"
dump_file_gpg=$dump_file.gpg

trap "{ rm -f $dump_file; rm -f $dump_file_gpg; }" EXIT

PGPASSWORD=$database_password \
  pg_dump \
  -Fc --no-acl \
  -h $database_host \
  -p $database_port \
  -U $database_username \
  -f $dump_file $database_name

echo $database_backup_passphrase | \
  gpg -c --cipher-algo AES256 --no-symkey-cache --batch --passphrase-fd 0 \
  -o $dump_file_gpg $dump_file

S3_ACCESS_KEY=$database_backup_s3_access_key S3_SECRET_KEY=$database_backup_s3_secret_key \
  s4cmd \
  --sync-check --retry 3 --retry-delay 120 \
  put $dump_file_gpg s3://$database_backup_s3_bucket_name/

Crontab

Issue crontab -e and write:

0 3 * * * bash /usr/local/bin/database-backup.sh

This will run the backup once per day at 3 AM.

Does it work?

One should regularly test the recovery of any backup system.

Ensure backup files appear in your S3 bucket shortly after cron runs.

Also, try decrypting a backup file:

gpg -d app_production-2020-04-20T20:31:34Z.dump.gpg >app_production-2020-04-20T20:31:34Z.dump

And restoring the resulting database dump file to a local, empty, development database:

pg_restore -h $database_host -d $database_name -U $database_user app_production-2020-04-20T20:31:34Z.dump

Run your app and make sure the data looks correct.

Next steps

I feel like the only thing missing is some kind of notification if something goes wrong and backups fail. AWS has a notification service but I haven’t got around to making it work yet (ironically, it’s called “Simple Notification Service”).

DIY email validation in Rails

Sun, 19 Apr 2020 00:00:00 GMT

I recently needed email validation in a Rails app and decided to roll my own for the following reasons:

I have a strong aversion to introducing external dependencies (i.e. Gems) for simple things
What I wanted was pretty specific
Writing custom validators in Rails is easy

The implementation consists of 3 steps:

Perform basic format validation
Block non-email domains
Block domains from disposable email services

Perform basic format validation

It’s notoriously hard to validate an email address with a regular expression. The reason is that both the local part (before the @) and the domain (after the @) can accept a wide variety of characters and symbols, so you may end up rejecting a perfectly valid email address you haven’t covered for.

To keep things simple, I used a simple regular expression to check for basic things, accepting the risk it might accept emails it shouldn’t.

Block non-email domains

In order to accept emails, a domain name must have the necessary MX nameserver records.

Block domains from disposable email services

Disposable email services like Mailinator are useful for users and a headache for website authors.

Thankfully, there are projects that maintain a list of such domains we can check against.

The solution

First, we need to get the list of disposable email domains into our Rails app:

cd railsapp/
git submodule add https://github.com/martenson/disposable-email-domains vendor/disposable-email-domains
git add vendor/disposable-email-domains
git commit -m 'Add disposable-email-domains as Git submodule'

Whenever there’s an update in the repo, we can retrieve the new blacklisted domains as follows:

cd railsapp/
git submodule update vendor/disposable-email-domains
git add vendor/disposable-email-domains
git commit -m 'Update disposable-email-domains Git submodule'

Now it’s time for the validator code which I place under app/lib/email_validator.rb so that it gets autoloaded:

require 'resolv'

class EmailValidator < ActiveModel::EachValidator
  EMAIL_REGEX = /[a-z0-9._-]{1,64}@[a-z0-9._-]{1,255}/.freeze
  private_constant :EMAIL_REGEX

  DISPOSABLE_EMAIL_DOMAINS = File.readlines(    Rails.root.join(
      'vendor',
      'disposable-email-domains',
      'disposable_email_blocklist.conf'
    ),
    chomp: true
  ).each_with_object({}) { |domain, hash| hash[domain] = true }.freeze
  private_constant :DISPOSABLE_EMAIL_DOMAINS

  def validate_each(record, attribute, value)
    return if value.nil? && options.fetch(:allow_nil, false)
    return if value.blank? && options.fetch(:allow_blank, false)

    if options.fetch(:format, true) &&
        (value.nil? || !valid_format?(value))
      record.errors.add(attribute, :invalid)
      return    end

    if options.fetch(:non_disposable_domain, true) &&
        !value.nil? &&
        disposable_domain?(value)
      record.errors.add(attribute, :disposable_domain)
    end

    if options.fetch(:mail_domain, true)
        (value.nil? || !mail_domain?(value))
      record.errors.add(attribute, :no_mail_domain)
    end
  end

  private def valid_format?(value)
    value.match?(/\A#{EMAIL_REGEX}\z/)
  end

  private def email_domain(value)
    value.split('@', 2).last
  end

  private def disposable_domain?(value)
    DISPOSABLE_EMAIL_DOMAINS.key?(email_domain(value))
  end

  private def mail_domain?(value)
    Resolv::DNS.open do |dns|
      dns.getresources(
        email_domain(value),
        Resolv::DNS::Resource::IN::MX
      ).any?
    end
  end
end

Some things to note:

Line 1: The resolv built-in Ruby library is used to check for MX nameserver records
Line 4: The email regular expression
Lines 7-14: The list of blacklisted emails is kept in a constant as a Hash to speed up lookups (versus iterating over an Array)
Lines 18 and 19: The allow_nil and allow_blank options are supported, much like the validates_format_of Rails validation. If set to true with a presence validation and the email is missing, the only error will be that from the presence validation.
Lines 21-25: Format validation
Line 24: If the email fails the format validation, we early-return since the later checks are more expensive and we already know the email is invalid.
Lines 27-31: Disposable email domain validation
Lines 33-37: Mail domain validation

To use it in a hypothetical model:

class User < ApplicationRecord
  validates(
    :email,
    presence: true,
    uniqueness: { case_sensitive: false, allow_blank: true },
    email: { allow_blank: true }
  )

  # ...
end

To skip checking disposable email domains:

email: { allow_blank: true, non_disposable_domain: false }

To skip checking non-email domains:

email: { allow_blank: true, mail_domain: false }

Update: An earlier version of this post used git pull instead of git submodule update to update the submodule. Thanks to Fotis Alexandrou for pointing it out.

DIY method memoization in Ruby

Sat, 18 Apr 2020 00:00:00 GMT

I recently needed to have methods memoized in a Ruby class. The standard way to do this is to use an instance variable and the ||= operator:

class Foo
  def bar
    @bar ||= some_expensive_call
  end
end

But I didn’t want to pollute my class like this, so I ended up rolling my own module with some metaprogramming to provide a nice DSL instead:

module Memoizable
  def memoize(method_name)
    original_method_name = "__original_#{method_name}"

    alias_method(original_method_name, method_name)

    instance_variable_name = "@#{method_name}"

    define_method method_name do
      if !instance_variable_defined?(instance_variable_name)
        instance_variable_set(
          instance_variable_name,
          send(original_method_name)
        )
      end

      instance_variable_get(instance_variable_name)
    end
  end
end

What the method does:

Line 5: Back up the original method before overwriting it with the memoized version
Line 9: Overwrite method with the memoized version
Line 10: If it’s never been called before
Lines 11-14: Call it and memoize the result
Line 17: Return the memoized result

Using it is very easy:

class Foo
  extend Memoizable

  def bar
    some_expensive_call
  end
  memoize :bar
end

And since def bar returns :bar, you can even do this:

class Foo
  extend Memoizable

  memoize def bar
    some_expensive_call
  end
end

That’s it!

/username URLs in Rails

Mon, 06 Apr 2020 00:00:00 GMT

I recently wanted to have /:username URLs in a Rails app. This post describes how I did it.

In your User model:

class User < ApplicationRecord

Add a format validation for the allowed characters in a username:

USERNAME_REGEX = /\w+/.freeze
validates(
  :username,
  presence: true,
  format: { with: USERNAME_REGEX, allow_blank: true })

Add an exclusion validation to automatically reserve usernames that match existing routes (e.g. to prevent a posts username when a /posts route exists):

RESERVED_USERNAMES = Rails.application.routes.routes.map { |route|  route.path.spec.to_s[%r{(?<=\A/)\w+}]}.compact.uniq.freeze
validates(
  :username,
  presence: true,
  format: { with: USERNAME_REGEX, allow_blank: true },
  exclusion: { in: RESERVED_USERNAMES })

Define to_param so that the username (instead of id) is used for route path and URL helpers:

def to_param
  username
end

Finally, place the necessary route at the end of your routes file at config/routes.rb so that it matches last:

get(
  ':username',  to: 'users#show',
  as: 'user',
  constraints: { username: User::USERNAME_REGEX }
)

You can link to a user with:

<%= link_to @user.username, user_path(@user) %>

That’s it!

Beautiful system fonts in Debian

Wed, 25 Mar 2020 00:00:00 GMT

Debian comes with DejaVu as the default system font which looks terrible (especially in Greek and bold).

Ubuntu looks much nicer and ships with all Ubuntu installations, so it’s somewhat considered a standard Linux font. Microsoft’s standard fonts (Arial, Verdana, Georgia, Times New Roman, etc) are also available in Debian.

This post provides instructions for setting Ubuntu as your default system font and adding support for Microsoft’s fonts (many websites use them).

Note: All commands are to be issued in a terminal.

Edit your system’s APT sources file as root (or with sudo) located at /etc/apt/sources.list and make sure it lists non-free (for the Ubuntu font) and contrib (for Microsoft’s fonts). For Debian Buster (current stable), you need something that looks like this:

deb http://ftp.debian.org/debian/ buster main contrib non-free
deb-src http://ftp.debian.org/debian/ buster main contrib non-free

Update the apt repository index:

sudo apt update

Install the font packages:

sudo apt install fonts-ubuntu fonts-liberation2 ttf-mscorefonts-installer

Create the directory to host the config file:

mkdir -p ~/.config/fontconfig/

Place the following configuration under ~/.config/fontconfig/fonts.conf:


DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>seriffamily>
    <prefer>
      <family>Liberation Seriffamily>
    prefer>
  alias>
  <alias>
    <family>sans-seriffamily>
    <prefer>
      <family>Ubuntufamily>
    prefer>
  alias>
  <alias>
    <family>monospacefamily>
    <prefer>
      <family>Ubuntu Monofamily>
    prefer>
  alias>
fontconfig>

Go to your web browser settings and under font customization pick:

sans-serif (or sans) as default font
sans-serif (or sans) as sans-serif font
serif as serif font

To check everything works as expected issue:

for family in serif sans-serif monospace Arial Helvetica Verdana "Times New Roman" "Courier New"; do
  echo -n "$family: "
  fc-match "$family"
done

The output should look something like:

serif: LiberationSerif-Regular.ttf: "Liberation Serif" "Regular"
sans-serif: Ubuntu-R.ttf: "Ubuntu" "Regular"
monospace: UbuntuMono-R.ttf: "Ubuntu Mono" "Regular"
Arial: Arial.ttf: "Arial" "Regular"
Helvetica: Arial.ttf: "Arial" "Regular"
Verdana: Verdana.ttf: "Verdana" "Regular"
Times New Roman: Times_New_Roman.ttf: "Times New Roman" "Regular"
Courier New: Courier_New.ttf: "Courier New" "Regular"

Note:

Helvetica is not a free font and you need to buy it online and install it.

Microsoft’s Arial is a good approximation of Helvetica and Debian comes with configuration to use it instead.

You may need to logout and login again and/or restart programs for the

changes to take effect.

A simple access log middleware for Koa.js

Tue, 19 Nov 2019 00:00:00 GMT

I recently needed a simple access log middleware for Koa.js to log incoming requests, similar to what all web servers have:

127.0.0.1 - - [19/Nov/2019:23:28:20 +0200] "GET /place/autocomplete HTTP/1.1" 200 1055

I found koa-accesslog but was disappointed to find out it’s unmaintained and written for Koa.js 1.x, using its soon-to-be-deprecated generator syntax and throwing warnings about it in 2.x. It’s also hard-coding the HTTP version and uses Moment.js for formatting the date, which is not ideal.

So I decided to rewrite it to address all of the above issues. Here’s the result:

const util = require('util');
const format = require('date-fns/format');
// ip, date, method, path, http version, status and length
const LOG_FORMAT = '%s - - [%s] "%s %s HTTP/%s" %d %s\n';
const DATE_FORMAT = 'd/MMM/yyyy:HH:mm:ss xx';

module.exports = function(stream) {  stream = stream || process.stdout;

  return async function accesslog(ctx, next) {    await next();
    stream.write(
      util.format(
        LOG_FORMAT,
        ctx.ip,
        format(new Date(), DATE_FORMAT),        ctx.method,
        ctx.path,
        ctx.req.httpVersion,        ctx.status,
        ctx.length ? ctx.length.toString() : '-'
      )
    );
  };
};

Things to note:

It’s using date-fns to format the date and time of the request (lines 2, 18). So you will need to run yarn add date-fns or npm install date-fns in your project.
It accepts an optional stream argument to log each request to (defaults to process.stdout)
It’s using the new 2.x async/await middleware syntax of Koa.js 2.x (lines 11, 12)
It logs the HTTP version of the request (line 21)

Here’s how to use it:

const Koa = require('koa');
const accesslog = require('./accesslog'); // local middleware file

const app = new Koa();

app.use(accesslog());
// ...
app.listen(3000);

Since I’m currently still experimenting with Koa.js and trying to decide between it and Express.js, I haven’t released this as a library yet. If you’d be interested, please let me know.

Pass data between middleware in Koa.js

Sun, 17 Nov 2019 00:00:00 GMT

I recently started playing with Koa.js, a minimal Node.js framework by the team behind Express.js.

From the official documentation:

Philosophically, Koa aims to “fix and replace node”, whereas Express “augments node”. Koa uses promises and async functions to rid apps of callback hell and simplify error handling. It exposes its own ctx.request and ctx.response objects instead of node’s req and res objects.

Express, on the other hand, augments node’s req and res objects with additional properties and methods and includes many other “framework” features, such as routing and templating, which Koa does not.

Thus, Koa can be viewed as an abstraction of node.js’s http modules, where as Express is an application framework for node.js.

One thing I initially struggled with is how data is passed between middleware. Once I figured it out, I came up with the following example to demonstrate it:

const Koa = require('koa');

const app = new Koa();

// First middleware (1)
app.use(async (ctx, next) => {
  console.log(1, ctx.state); // 1
  ctx.state.name = 'John'; // 2  console.log(1, ctx.state); // 3

  const age = await next(); // 4 (await), 9 (assignment)
  console.log(1, ctx.state); // 10
  ctx.body = `${ctx.state.name} ${ctx.state.surname} is ${age} years old`; // 11
});

// Second middleware (2)
app.use(async (ctx) => {
  console.log(2, ctx.state); // 5
  ctx.state.surname = 'Doe'; // 6  console.log(2, ctx.state); // 7

  return 33; // 8});

app.listen(3000);

Things to note:

Numbers in comments indicate execution order
Middleware execution happens in a “stack order”
ctx.state can be used to share state between middleware
If a middleware returns a value, that value is returned to the parent middleware that awaited it

Visit http://localhost:3000 and you should see:

John Doe is 33 years old

With the following logs:

1 {}
1 { name: 'John' }
2 { name: 'John' }
2 { name: 'John', surname: 'Doe' }
1 { name: 'John', surname: 'Doe' }

Enjoy!

A better way to fetch and render records with "load more"

Tue, 01 Oct 2019 00:00:00 GMT

I recently changed the index page of this blog to list only the 5 latest blog posts and show a link to all posts if there are more.

How would you do it?

The most straightforward approach is to make a query to fetch 5 records and then make another count query to check whether there are more.

A better way is to fetch 6 (N+1) records, render 5 (N), and check whether you got that extra 6th (Nth) record to determine whether to show the “load more” action. This saves you the count query.

An apparently very simple trick that never occurred to me before reading it somewhere!

Add support for modification times in Gatsby

Sat, 28 Sep 2019 00:00:00 GMT

Note: This assumes you’ve already added support for Markdown pages.

What if you want to display the date and time a page or a post was last modified?

Gatsby exposes the date and time a file was last modified, as recorded in the filesystem, through its GraphQL API:

{
  markdownRemark {
    parent {
      ... on File {
        modifiedTime      }
    }
  }
}

However, Git does not retain file timestamp information. So if you ever git clone the repo (usually happens on deployment in services such as Netlify), the timestamp will be set to the current date and time. Obviously, this is not what we want.

The solution lies in the fact that Git records the date, time and modified files of each commit. So we can pull the necessary information from the last commit each file was modified in.

Open gatsby-node.js and create a gitAuthorTime node field:

const { execSync } = require('child_process');
exports.onCreateNode = ({ node, actions }) => {
  // ...

  if (node.internal.type === 'MarkdownRemark') {    const gitAuthorTime = execSync(      `git log -1 --pretty=format:%aI ${node.fileAbsolutePath}`    ).toString();    actions.createNodeField({      node,      name: 'gitAuthorTime',      value: gitAuthorTime    });  }
  // ...
};

Modify the page query of your template (e.g. src/templates/post.jsx) to fetch the gitAuthorTime node field:

query($slug: String!) {
  markdownRemark(fields: { slug: { eq: $slug } }) {
    # ...
    fields {      gitAuthorTime    }    # ...
  }
}

Finally, in the same template file, you can access gitAuthorTime through props:

import React from 'react';

const Post = props => {
  const { gitAuthorTime } = props.data.markdownRemark.fields;
  render (
    <p>Modified at: ${gitAuthorTime}</p>  );
}

export default Post;

Add support for drafts in Gatsby

Fri, 27 Sep 2019 00:00:00 GMT

Gatsby does not ship with support for drafts in Markdown posts, but it’s pretty easy to implement it.

Note: This assumes you’ve already added support for Markdown pages.

Add the following to gatsby-node.js:

const { env } = require('process'); // eslint-disable-line no-undef

exports.onCreateNode = ({ node, actions }) => {
  // ...

  if (node.internal.type === 'MarkdownRemark') {    const listed =      node.frontmatter.draft !== true || env.NODE_ENV === 'development';    actions.createNodeField({      node,      name: 'listed',      value: listed    });  }
  // ...
};

Modify the page query of your index page in src/pages/index.js to include draft posts in development and exclude them in production:

query {
  allMarkdownRemark(
    filter: {      fields: { listed: { eq: true } }    }    sort: { frontmatter: { date: DESC } }
  ) {
    edges {
      node {
        # ...
      }
    }
  }
}

Repeat the process in gatsby-config.js if you’ve added an RSS feed.

Finally, add draft: true to the frontmatter of your draft posts and change it to false (or remove it altogether) when you want to publish them.

Render React components from Rails views

Sat, 21 Sep 2019 00:00:00 GMT

I recently needed a way to render React components from Rails controller views, without caring about SSR.

After searching a bit, I found webpacker-react but it seemed a bit unmaintained. I was also reluctanct to add a dependency for something that (in my mind) could be solved easily. In the end, I decided to go with a minimal, custom implementation.

A good practice when you want to implement something is to first think about the ideal API and work backwards. In my case this was the following helper call inside a Rails controller view:

<%= react_component('User', name: 'Angelos') %>

Let’s define the helper in app/helpers/application_helper.rb:

def react_component(component, props = {})
  content_tag(
    'div',
    nil,
    'data-react-component' => component,
    'data-react-props' => props.to_json
  )
end

The idea is simple: take a String component name and an optional props Hash and return a

element with the component name in a data-react-component attribute and its serialized props in a data-react-props attribute. Then let UJS handle the rest.

So the helper’s output for our ideal API example mentioned above would be:

<div
  data-react-component="User"
  data-react-props="{ "name": "Angelos" }"
>div>

Things to note:

" inside HTML attributes are escaped as "
We want to mount the rendered component to this
(its contents between
and
)

And that’s it for the Rails part.

We now need some JavaScript code that finds all elements with a data-react-component attribute (a technique called UJS), renders the component of each with its props, and mounts it to the target element.

Here it is in app/javascript/support/react_ujs.js:

export default ({
  components,  renderComponent,  onBeforeMount = () => null,  loadEventName = 'DOMContentLoaded'}) => {
  const mountComponentNode = (node) => {
    const componentAttr = node.dataset.reactComponent;
    const component = components[componentAttr];

    if (!component) {
      console.warn(`${componentAttr}: not registered`);
      return;
    }

    const propsAttr = node.dataset.reactProps;

    if (!propsAttr) {
      console.warn(`${componentAttr}: missing props`);
    };

    const props = propsAttr ? JSON.parse(propsAttr) : {};

    renderComponent(component, props, node);
  };

  const mountComponentNodes = (nodes) => {
    nodes.forEach(mountComponentNode);
  };

  const mountComponents = () => {
    const componentNodes = document.querySelectorAll('[data-react-component]');
    mountComponentNodes(componentNodes);
  };

  document.addEventListener(loadEventName, () => {
    onBeforeMount();
    mountComponents();
  });
};

A function is exported that takes an Object argument with the following options:

components: an Object mapping String component names to their respective imported component objects
renderComponent: a function that takes an imported component object, its props and the target element to mount it to
onBeforeMount: an optional callback to call after the DOM has loaded and before doing (mounting) anything
loadEventName: the document event name to listen to for mounting the components (defaults to 'DOMContentLoaded')

Finally, the remaining “glue” logic in app/javascript/packs/application.js:

import React from 'react';
import ReactDOM from 'react-dom';

import reactUJS from '../support/react_ujs';
import User from '../components/User';

const components = {
  User // equivalent to `User: User` in ES6
};

const renderComponent = (component, props, target) => {
  const element = React.createElement(component, props);
  ReactDOM.render(element, target);
};

reactUJS({
  components,
  renderComponent,
});

Things to note:

Lines 1, 2, 4: Import React, ReactDOM and react_ujs.js
Lines 5, 7-9: Import and assign components
Lines 11-14: Define a renderComponent function that renders a component to the DOM
Lines 16-19: Call reactUJS

A possible use of onBeforeMount is to set up some context before the component is rendered.

For example, to set up urql for performing GraphQL queries:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, createClient} from 'urql';

import reactUJS from '../support/react_ujs';
import User from '../components/User';

let client;
const components = {
  User
};

const renderComponent = (component, props, target) => {
  const element = React.createElement(component, props);

  ReactDOM.render(
    <Provider value={client}>
      {element}
    Provider>,
    target
  );
};

const onBeforeMount = () => {
  const csrfToken =
    document.querySelector('meta[name="csrf-token"]').getAttribute('content');

  client = createClient({
    url: 'http://localhost:3000/graphql',    fetchOptions: {
      headers: {
        'X-CSRF-Token': csrfToken
      }
    }
  });
};

reactUJS({
  components,
  renderComponent,
  onBeforeMount
});

Things to note:

client is accessible as a closure both by renderComponent and onBeforeMount
You’ll want to change the client’s url in production

Finally, if you have Turbolinks enabled, you’ll want to mount the components each time Turbolinks loads instead of on DOMContentLoaded. So the final call to reactUJS becomes:

reactUJS({
  components,
  renderComponent,
  loadEventName: 'turbolinks:load'
});

More fun with custom React Hooks

Fri, 10 May 2019 00:00:00 GMT

Inspired by this FAQ on React Hooks, I came up with a custom hook that lets you provide separate callbacks for when the component is mounted, unmounted, updated, as well as a clean callback for the update:

function useGranularEffect({ onMount, onUnmount, onUpdate, onUpdateClean }) {
  const updateRef = React.useRef(false);

  React.useEffect(() => {
    if (updateRef.current && onUpdate) onUpdate();
    updateRef.current = true;
    return onUpdateClean;
  });

  React.useEffect(() => {
    if (onMount) onMount();
    return onUnmount;
  }, []) // eslint-disable-line react-hooks/exhaustive-deps
}

For the demo, I also wrote a custom useForceUpdate hook to force the example component to update:

function useForceUpdate() {
  const setUpdate = React.useState(true)[1];

  return function() {
    setUpdate(update => !update); // Toggle to trigger update
  };
}

And a custom hook to mount/unmount a node:

function useToggleNode(node, initialState = true) {
  const [toggledNode, setToggledNode] = React.useState(
    initialState ? node : null
  );

  function toggleNode() {
    setToggledNode(toggledNode => (toggledNode ? null : node));
  }

  return [toggledNode, toggleNode];
}

Finally, the rest of the demo code:

import React from 'react';
import ReactDOM from 'react-dom';

// function useGranularEffect(...

// function useForceUpdate(...

// function useToggleNode(...

function Example() {
  const forceUpdate = useForceUpdate();

  useGranularEffect({
    onMount: () => console.log('mount!'),
    onUnmount: () => console.log('unmount!'),
    onUpdate: () => console.log('update!'),
    onUpdateClean: () => console.log('clean!')
  });

  return <button onClick={forceUpdate}>renderbutton>;
}

function App() {
  const [toggledNode, toggleNode] = useToggleNode(<Example />, true);

  return (
    <>
      {toggledNode}{' '}
      <button onClick={toggleNode}>{toggledNode ? 'unmount' : 'mount'}button>
    >
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Wrapping my head around React's useRef

Wed, 08 May 2019 00:00:00 GMT

While learning about React Hooks, I had a hard time understanding the case for useRef. Then I ran into a tweet by Dan Abramov (no longer available) that helped me realize useRef(initialValue) is essentially useState({ current: initialValue })[0]. useState returns an array where the first element is the state and the second is its setter. [0] means the setter is discarded.

This is useful in cases where we want to persist state between renders and modify it without triggering a render (contrary to useState). It works because the state (an object) is modified directly (i.e. myRef.current = 42) and not through its setter (which triggers the render).

That’s also why the returned state is { current: initialValue } (an object) and not just initialValue (a primitive value). Without a setter, it’s not possible to modify it:

// State is a primitive value
let name = useState('Angelos')[0]; // Discard setter method
// name === 'Angelos'
name = 'John'; // This just modifies the local variable "name"

// State is a reference to an object
const nameRef = useState({ current: 'Angelos' })[0]; // Discard setter method
// nameRef.current === 'Angelos'
nameRef.current = 'John'; // This modifies the object's "current" property

Custom React hook to prevent window unload

Tue, 07 May 2019 00:00:00 GMT

I recently needed a way to prevent the window/tab from closing if there were unsaved changes in an application and came up with the following simple, custom React hook:

function usePreventWindowUnload(preventDefault) {
  React.useEffect(() => {
    if (!preventDefault) return;
    const handleBeforeUnload = event => event.preventDefault();
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
  }, [preventDefault]);
}

If preventDefault is true, the window will not close. If it’s false, it will.

I use it in my App component, passing it a savedChanges prop:

function App({ savedChanges }) {
  usePreventWindowUnload(!savedChanges);
  // ...
}

I hope it helps you!

Install the latest Firefox securely in Debian

Thu, 02 May 2019 00:00:00 GMT

Update: There’s an official APT repository

Since Debian does not provide an easy way to install the latest version of Firefox, I’ve written a script to install the latest official binary from Mozilla.

To make the process as secure as possible, the relevant binary is downloaded and its checksum is verified against the published checksum by Mozilla. The digital signature of the checksum file is also verified using Mozilla’s GPG key.

#!/usr/bin/env bash

trap exit INT

if [[ -n $(pgrep firefox) ]]; then
  echo 'error: Firefox is running'
  exit 1
fi

target_version=$(
  wget -qS --spider https://www.mozilla.org/en-US/firefox/notes/ 2>&1 | \
    grep -i location: | \
    cut -d / -f 4
)

if [[ -z "$target_version" ]]; then
  echo 'error: Failed to parse latest Firefox release version'
  exit 2
fi

mozilla_key=BBBEBDBB24C6F355
platform=linux-x86_64locale=en-USbase_name=firefox-$target_version.tar.bz2
file_name=$platform/$locale/$base_name
base_url=https://releases.mozilla.org/pub/firefox/releases/$target_version
tmp_dir=/tmp/firefox-update-$target_version

rm -rf $tmp_dir
mkdir $tmp_dir
pushd $tmp_dir

wget $base_url/SHA512SUMS $base_url/SHA512SUMS.asc

gpg --recv-keys $mozilla_key && gpg --verify SHA512SUMS.asc SHA512SUMS

if [[ $? -ne 0 ]]; then
  echo 'error: Failed to verify signature for SHA512SUMS'
  exit 3
fi

wget $base_url/$file_name

expected_sum=$(grep $file_name SHA512SUMS | cut -d ' ' -f 1 | sed "s/^b'\|'$//g")
echo "$expected_sum  $base_name" | sha512sum -c -

if [[ $? -ne 0 ]]; then
  echo "error: Invalid checksum for $base_name"
  exit 4
fi

sudo rm -rf /opt/firefox

pushd /optsudo tar -xvjf $tmp_dir/$base_name
popd

popd
rm -rf $tmp_dir

Things to note:

Platform is x86_64 (configurable)
Locale is en-US (configurable)
Installation path is /opt/firefox/

Γράφοντας ελληνικά αποδοτικά στον Vim

Fri, 16 Sep 2016 00:00:00 GMT

Ένα συχνό παράπονο στον Vim είναι ότι το να γράφει κανείς ελληνικά είναι πολύ κουραστικό γιατί πρέπει συνεχώς να βγαίνει σε normal mode και να αλλάζει σε αγγλικά για να εκτελέσει οποιαδήποτε εντολή (και μετά να ακολουθήσει την αντίστροφη διαδικασία για να συνεχίσει να γράφει ελληνικά).

Προσθέτοντας τις ακόλουθες γραμμές στο ~/.vimrc:

set keymap=greek_utf-8
set iminsert=0
set imsearch=-1

… μπορεί κανείς να γράφει ελληνικά σε insert mode και να γυρνάει σε normal mode για να εκτελέσει μια εντολή χωρίς να χρειάζεται να αλλάξει σε αγγλικά.

Αυτό γίνεται ως εξής:

Βρισκόμαστε σε normal mode και πατάμε i για να αλλάξουμε σε insert mode
Πατάμε Ctrl+6 και η γλώσσα στον Vim (και όχι του συστήματος) γυρνάει σε ελληνικά
Γράφουμε ελληνικά
Αν κάποια στιγμή θέλουμε να αλλάξουμε σε normal mode για να εκτελέσουμε μια εντολή απλά πατάμε Esc, εκτελούμε την εντολή και μετά ξανά i για να επιστρέψουμε σε insert mode
Αν κάποια στιγμή, ενώ γράφουμε ελληνικά, θέλουμε να γράψουμε κάτι στα αγγλικά, απλά ξαναπατάμε Ctrl+6 και η γλώσσα αλλάζει σε αγγλικά

That’s it! Ουσιαστικά αντί να πατάμε το κλασικό Alt+Shift για να αλλάζουμε τη γλώσσα του συστήματος, πατάμε Ctrl+6 και αλλάζουμε γλώσσα μόνο μέσα στον Vim.

Low battery notification in i3wm

Wed, 29 Jun 2016 00:00:00 GMT

I have been a happy i3wm user since 2012.

A problem I faced early on was that I would often forget to connect my laptop’s charger so it would eventually shut down. Even though i3status can display the current battery level, I have found that it is very easy to miss.

After many unexpected reboots, I decided to write a simple Bash script that displays a notification when the battery level percentage reaches or drops below a configured threshold:

#!/usr/bin/env bash

THRESHOLD=10
lock_path='/tmp/batmon.lock'

lockfile-create -r 0 -l $lock_path || exit
acpi_path=$(find /sys/class/power_supply/ -name 'BAT*' | head -1)
charge_status=$(cat "$acpi_path/status")
charge_percent=$(acpi | cut -d ' ' -f 4 | sed 's/[^0-9]//g')

if [[ $charge_status == 'Discharging' ]] && [[ $charge_percent -le $THRESHOLD ]]; then
  message="Battery running critically low at $charge_percent%!"
  DISPLAY=:0.0 /usr/bin/notify-send -u critical 'Low battery' "$message"fi

rm -f $lock_path

lockfile-create and notify-send are two dependencies. In Debian, you can install them with:

sudo apt install lockfile-progs libnotify-bin

Some things to note:

The threshold percentage is configurable
The script will exit if it’s already running to avoid multiple notifications e.g. when run by Cron
A notification is shown using notify-send (ships with libnotify-bin on Debian)

I run the script every 5 minutes with Cron by writing the following after running crontab -e:

*/5 * * * * eval "export $(egrep -z DBUS_SESSION_BUS_ADDRESS /proc/$(pgrep -ou agorf dbus-daemon)/environ)"; bash ~/work/scripts/batmon.sh