jbsulli

Restart-Proof External Processes in Electron (Detached Process + PID File + Log Tailing)

This is a write-up of how one Electron app runs long external CLI jobs (multi-hour encodes and disc copies) that survive the app restarting. When the app comes back, it either re-attaches to the running job or works out from its log whether the job finished while nobody was watching.

The code below is a sanitized reconstruction meant for reuse, not a copy of the original. The last sections are an honest review of what has held up and what I'd change.

---

1. The problem

jbsulli

A Typed, Proxy-Based IPC Pattern for Electron + React

This is a write-up of how one Electron app handles communication between the main process ("backend") and the renderer ("frontend"). It covers request/response calls, per-request progress and log streaming, backend-initiated state pushes, and error handling. Every channel is typed end to end with no codegen: the types come from typeof on plain handler maps.

The code below is a sanitized reconstruction meant for reuse in other apps, not a copy of the original. The last sections are an honest review of what has held up and what I'd change.

---

1. The mental model

jbsulli

Setup nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source ~/.bashrc

Setup node

jbsulli

{
  "data": {
    "name": "Joshua"
  },
  "event": "my-event",
  "recipient": "josh",
  "override": {
    "firebase-fcm": {
      "body": {
        "data": {

jbsulli

{
  "configurations": [
    {
      "name": "Win32",
      "includePath": [
        "C:\\Users\\jb_su\\AppData\\Local\\Arduino15\\packages\\esp32\\hardware\\esp32\\1.0.4\\**",
        "C:\\Users\\jb_su\\AppData\\Local\\Arduino15\\packages\\esp32\\tools\\**"
      ],
      "forcedInclude": [
        "C:\\Users\\jb_su\\AppData\\Local\\Arduino15\\packages\\esp32\\hardware\\esp32\\1.0.4\\cores\\esp32\\Arduino.h"

jbsulli

The Problem:

Given the folloowing code:

class Jedi {
  @observable firstName = "";
  @observable lastName = "";

  constructor(options) {

jbsulli

Demo:

Spoiler warning

Spoiler text. Note that it's important to have a space after the summary tag. You should be able to write any markdown you want inside the <details> tag... just make sure you close <details> afterward.

console.log("I'm a code block!");

jbsulli

Query

• document.querySelector(): returns first matching element
• document.querySelectorAll(): returns all matching elements
• document.getElementById(id)

DOM Node

• addEventListener(event, cb)
• appendChild(node)
• childNodes
• classList

jbsulli

What I learned - Image Resize on Cache Miss

The task:

I really wanted a way to create resized images on the fly just by specifying the size of the image in the request URL. So, if I had the image kitty.jpg but wanted to resize it to be 100px by 100px, would simply request kitty-100x100.jpg, the server would realize it doesn't exists and create it, and the resized image would be returned to me.

The solution:

I was following this guide written by John Pignata. It is an interesting solution and fit my needs but I did run into some caveats. Below are some of the gotchas I encountered.

1) There are two S3 domains you can point your CloudFront distribution at:

jbsulli

Primatives

• string
  • .chars.count: block receives each char and method will return the number of truthy results
  • .split
  • .each_char: block called for each char with the current char as the argument
  • .with_index: when used with .each_char, will add a second argument, index, passed to the block
• number
  • .even?/.odd?
  • .abs
  • .floor, .ceil, .round