Daniel Doblado

Fixing a Yamaha DGX-620 grand piano screen

Daniel Doblado — Sun, 01 Jan 2023 00:00:00 GMT

import YoutubeVideo from "#astro/components/YoutubeVideo.astro";

Introduction about the piano

I bought a second hand Yamaha DGX-620 Grand Piano also known as the <i>YPG-625</i>, the <abbr title="Yamaha Portable Grand">YPG</abbr> stands for Yamaha Portable Grand, sure portable..., after carying it for 10 minutes by myself my back hurt for 3 days.

Opinions and problems

Overall I'm very happy with it, while I still don't know much about playing paino, it does look and sounds great, but it came with problem that bothered me a lot, that the seller did not mention it until I went to buy it.

The screen was broken, it's a common known manufacturing problem for these models that looking online affects a lot of people, fortunately due to this reason I got a huge discount, only 70€ to buy the full piano, there's people selling it with a broken screen for around 200 € minimum, the cost new was of ~700€ so a 90% discount.

The problem is very simple, the ribbon connector for he display loses connection overtime, due to a very thin solder that's in tension.

Possible first solution

This video shows a very simple solution which seems to work for most who tried, simply add foldback clips to increase the preassure of the connection.

This solution sounds great, low repair cost (only 2 foldback clips), without much risk besides open it, so I tried.

After removing around 100 screws (that was painful), the case can be removed and the board can be accesed.

Now that's open the process it's easy, after remvoving the ribbons and the 4 screws around the board, the main board will go out and the display can be accessed. The display has two ribbons that each control half of the screen, I had to fix both in my case, so this requires to remove 2 additional screws to acces the second ribbon.

I isolated the clips with masking tape, to make sure the circuits will not short with the metalic clips.

After this I checked the screen and unfortunately it only fixed half of it, I tried adding more pressure, but nothing worked, so I gave up after a while.

Second option

At this poin I thought my only solution was to replace the screen, this was problematic for two reasons, number one, a new screen cost a minimum of 60€ on aliexprss sometimes as much as I paid for the whole piano, reson two is that it requires an iron solder.

I did want an excuse to buy a PINECIL, an amazing tool, but this will add to the cost, and I decided it was not worth it, besides the piano works great, and the MIDI input can be used without a screen.

Here it's when I thought of a differnet solution that so far I didn't see online, if the solder had desolder why not try to melt it, I do not have a heat gun but I do have a hair dryer so I gave it a try.

The process is almost the same but instead of adding pins for preassure, I just heated both screen connectors for around 5 minutes using the hair dryer's max temperature, somtimes adding preassure with the plasticl nozzle.

After mounting it again I got a gorgeous working screen.

Why newsletters are not ideal

Daniel Doblado — Tue, 10 May 2022 00:00:00 GMT

Problems

You enter a site, and the first thing you see is a popup asking for your email, that's plain rude, or even worse, you start reading the article, and it pops up asking and interrupting your reading.

Please add the banner at the end of the article; if your article is good, I might give it a try.

Let's say that I agree and write my email; now I have to trust that the site won't be hacked, or directly sell my email to a third party.

I might get your new information in a neat and nice email, but again, it's your choice to send spam, and let's say you do, this could happen with RSS, but there's a main difference, that's unsubscribing, and here is where the problem begins.

There are so many sites that have broken unsubscribe pages, it's a link that devs don't usually visit and rarely gets any maintenance, so if it does not work now, I have to contact the company directly, and if I'm lucky, it will be sorted out, if not, I have to completely block your email address, which might be a problem if I want other updates.

Why RSS is better

RSS completely avoids all those problems.

It does not ask you to send your email; you gather the data whenever you want, and your email is kept private, there's no need to trust the site with privacy.

Unsubscribe is always on your side; just remove the URL from your client and you're done, no need to contact anyone, no need to trust the site to do it for you.

RSS can be tailored; some sites separate their feeds by category, so you can choose what you want to read, yes there are some newsletters with preferences that require an account again more work for both, but with RSS, you just choose a URL and be done with it.

Advantages of newsletters

Being fair, probably all people on the internet have an email, which makes it easier to reach, and most people don't know what RSS is, so it's easier to explain to someone to subscribe to a newsletter than to an RSS feed.

There are more email providers giving completely free service than RSS readers, the moment you want to sync between devices, you have to pay for a service, or self-host, while email is mostly free.

Conclusion

RSS declined with social platforms removing support, especially when Google Reader decided to close, and when browsers removed integrated support for it (yes Firefox I'm looking at you).

If you care about privacy, RSS is the way to go, and it's sad that the tech that respects users the most is dying.

I'm extending this section now with other articles that promote RSS: - I've been advocating for RSS support, and you should too - I Ditched the Algorithm for RSS—and You Should Too

Writing browser extensions without compiling

Daniel Doblado — Thu, 24 Jun 2021 00:00:00 GMT

Complexity is the enemy

Recently one of my most popular extensions received a full refactor, previously it was made with just pure JavaScript; this was fine since at the beginning it was a proof of concept, it means no complex bundles, frameworks, compilers, ...

But with complexity comes necessity, managing the state of the connection between the extension and Anki and editing the sentences got complicated using imperative logic; It's amazing how used I became to declarative logic with React and this is something that I was missing for this extension.

I could use React, the problem is that if the extension needs to be compiled, the review in the extensions stores will be more exhaustive, taking more time and making it longer to fix simple stuff like bugs.

So in order to build trust and avoid wasting reviewer's time, all the code needed to stay just as it was written.

Tools like snowpack made me realize that with the advance of JavaScript modules, we might not need to compile what it's an interpreted language, seriously how did we reach this point.

Coming with simpler solutions

Let's look at the requirements, I wanted to use components, separate my logic from styles, use declarative logic, not set up any bundler (webpack, parcel, etc...) for this React would not make the cut since JSX needs some tooling and care.

So the decision went to Skruv, this framework is amazing, not only is tiny, modular and simple to learn, the docs are amazing well organized and clear, covering all functionality without extras.

You can tell how nice the framework is by looking at this framework's goals:

No build time or runtime dependencies, no parsers
Pretty small:
- ~350 LOC vDOM
- ~100 LOC State management
- ~300 LOC HTML/SVG helpers
Useable without bundling/compilation/transpilation
Fast enough for most normal use cases: benchmark
Supports async components like import() and async generators
CSS scoping via shadow DOM
Hopefully grokable/understandable code

The best part is that to use it I just have to import the files, that's it.

import { div } from "./skruv/html.js";
import { renderNode } from "./skruv/vDOM.js";

let root = document.querySelector("#root");

root = renderNode(div({}, "Hello world!"), root);

On top of those advantages, I love the nested syntax, far shorter than JSX, now that I think about it feels weird that we moved to write HTML in JS.

You might be also wondering, "what if I need typescript, do you have to transpile?" the answer is no, you can use JSDocs with Typescript without having to create a single ts file.

How it ended

I feel this change was a success, new code can be iterated easily without having to worry much about state or building, since the extension runs on modern browsers I don't have to care about babel, etc

Right now the only concern I have about the extension is manifest v3 which is not supported in Firefox yet, but this is a story for another post.

I have to say that I'm glad about the feedback people gave, this refactor was motivated because changes on Youtube made it fail and people reported issues with a lot of support, not only that, but I've seen articles written in Vietnamese, Japanese and German in how to use the extension and how they find it useful, it really makes me want to keep contributing free, anti-tracking open-source code.

How to configure a 4k screen in Linux

Daniel Doblado — Sat, 18 Apr 2020 00:00:00 GMT

You just got a new cool 4K monitor, you opened it, connected it to your Linux device and the first thing you face is that you can't select the maximum resolution for the screen.

My disappointment is immeasurable and my day is ruined. --Reviewbrah

Why is this problem happening?

Apparently some screens might not give the correct EDID information, in my case a SAMSUNG LU28E85KRS, this makes it impossible to select all supported modes for our screen, showing some default ones, without including resolutions greater than 1920x1080.

How to get the correct EDID and set it using xrandr

Getting the correct EDID

Thanks to this wonderful answer How to get EDID for a single monitor? by Malat, obtaining the correct information is easy.

sudo apt install read-edid
sudo get-edid | parse-edid

Cool, we get all supported modes.

Modeline    "Mode 1" 148.500 1920 2008 2052 2200 1080 1084 1089 1125 +hsync +vsync
Modeline    "Mode 0" 297.00 3840 4016 4104 4400 2160 2168 2178 2250 +hsync +vsync
Modeline    "Mode 2" 74.250 1280 1390 1420 1650 720 725 730 750 +hsync +vsync
Modeline    "Mode 3" 148.500 1920 2448 2492 2640 1080 1084 1089 1125 +hsync +vsync
Modeline    "Mode 4" 74.250 1280 1720 1760 1980 720 725 730 750 +hsync +vsync
Modeline    "Mode 5" 27.027 720 736 798 858 480 489 495 525 -hsync -vsync
Modeline    "Mode 6" 27.000 720 732 796 864 576 581 586 625 -hsync -vsync
Modeline    "Mode 7" 74.250 1920 2558 2602 2750 1080 1084 1089 1125 +hsync +vsync
Modeline    "Mode 8" 74.250 1920 2008 2052 2200 1080 1084 1089 1125 +hsync +vsync
Modeline    "Mode 9" 148.50 1920 2008 2052 2200 1080 1084 1089 1125 +hsync +vsync
Modeline    "Mode 10" 148.50 1920 2448 2492 2640 1080 1084 1089 1125 +hsync +vsync
Modeline    "Mode 11" 74.25 1280 1390 1430 1650 720 725 730 750 +hsync +vsync
Modeline    "Mode 12" 241.50 2560 2608 2640 2720 1440 1443 1448 1481 +hsync -vsync

Adding the new modes with xrandr

The first value after the mode number tell us the horizontal resolution, in my case I'm interested in Mode 0.

Modeline    "Mode 0" 297.00 3840 4016 4104 4400 2160 2168 2178 2250 +hsync +vsync

Let's create a new mode, we can name it anything we want, but I prefer to name it after the output resolution.

xrandr --newmode "3840x2160" 297.00 3840 4016 4104 4400 2160 2168 2178 2250 +hsync +

Now we add the mode to the output, if you are not sure which one is the output, run xrandr and it will show something like HDMI-2 connected.

We use the name of the output.

xrandr --addmode HDMI-2 3840x2160

Now the new resolution should be available in the Display settings.

Don't forget to set font DPI and screen scale to your taste.

Useful information

Crawling data from dynamically generated sites

Daniel Doblado — Fri, 14 Feb 2020 00:00:00 GMT

Let's start with the need, why I had the necessity to do this, Recently I created this Corona Virus Map, I wanted to be the fastest getting the data from the source site in Chinese, most of the other sites get the data periodical using a cron task and dumping their data locally.

In my case I wanted to get their data every time the map is loaded, ensuring more accurate results and completely avoiding any manual update of data.

Parsing the site

So my first try was to curl the page and sadly the results for this site will not load unless you use Javascript since the tables are dynamically generated.

This leave us with not many options but to use a browser, so in my case I decided to use Puppeteer, a headless Chrome browser to get the data.

So after a while playing with it I got the code to do it, it will download and log the data in the format that I need.

const fs = require("fs");
const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://ncov.dxy.cn/ncovh5/view/pneumonia");
  const data = await page.evaluate((body) => {
    [...document.querySelectorAll(".close___2yTiY:not(.open___3it7L)")].forEach(
      (e) => e.click(),
    );
    return [
      ...document
        .querySelectorAll(".areaBox___3jZkr")[1]
        .querySelectorAll(".areaBlock2___27vn7"),
    ].map((row) => {
      const [area, , confirmed, dead, cured] = [...row.querySelectorAll("p")];
      return {
        area: area.innerText,
        confirmed: +confirmed.innerText || 0,
        dead: +dead.innerText || 0,
        cured: +cured.innerText || 0,
      };
    });
  });
  console.log(data);
  fs.writeFileSync(
    `2020-02-16T21:21:26.466Z.json`,
    JSON.stringify(data, null, 2),
  );
  await browser.close();
})();

After launching this script with node crawler.js I get a file that I can use as the source data of my visualization.

All fine but now I have another need, how to get this data every time I load the map?

For this I definitely need a server running but for this case I wanted to see what can I do with free services.

Using Glitch

My first approach was to use Glitch, after setting a express server and a few tries later I got my data every time I curl this url: https://coronacrawler.glitch.me

const express = require("express");
const app = express();
const puppeteer = require("puppeteer");

app.use(express.static("public"));

app.get("/", async function (request, response) {
  try {
    const browser = await puppeteer.launch({
      args: ["--no-sandbox"],
    });

    // Same code to get the data before

    res.json(data);
  } catch (error) {
    console.log(error);
  }
});

const listener = app.listen(process.env.PORT, function () {
  console.log("Your app is listening on port " + listener.address().port);
});

Cool, but this creates another problem.

Cross-origin

The map running in ObservableHQ needs to crawl this data and unfortunately if you curl a different domain from a website it needs to have Cross-origin headers enabled or for security reasons it will not load, after adding this to our express server it works.

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept",
  );
  next();
});

Alternative to Cross-origin

Another solution if adding the headers is impossible (For example in a server we can't control), we can use a service like cors-anywhere, just changing the URL to be:

https://cors-anywhere.herokuapp.com/https://coronacrawler.glitch.me

Problems with Glitch

Nice, now I have a server running and I can query the data, what else can I ask for? Well while this works there are two main problems, Glitch is more of a place for playing with code and experimenting so it will not be fast.

Glitch servers go to sleep, it's perfectly understandable, it makes no sense for Glitch to give computing power for free running all the time, after some period of inactivity the machine will go to sleep and it needs to be awaken the next time, this makes the map unresponsive if there are not many queries and it gives the sensation of being more slow than it is.

At this point I moved to zeit.co

Using Zeit.co

Why use zeit.co when Glitch is working?

This service offers quite a nice free "Hobby" service allowing to use serverless functions.

Creating a serverless function

We need to modify the previous script a little since we have other constrains.

First we need a start point for the api query in this case we need a file in /api/index.js

const getData = require("./getData");

module.exports = async (req, res) => {
  const data = await getData();
  res.json(data);
};

The first problem I encountered is that using puppeteer is a little bit different, luckily this guide Serverless Chrome via Puppeteer with Now 2.0 explains how to do it well.

const chrome = require("chrome-aws-lambda");
const puppeteer = require("puppeteer-core");

const getData = async () => {
  const browser = await puppeteer.launch({
    args: chrome.args,
    executablePath: await chrome.executablePath,
    headless: chrome.headless,
  });

  const page = await browser.newPage();
  await page.goto("https://ncov.dxy.cn/ncovh5/view/pneumonia");

  // Same code to get the data before

  return data;
};

module.exports = getData;

Supporting Cross-origin

To enable cors we need a file /api/200.js

module.exports = async (req, res) => {
  res.status(200).send({ message: "cors ok" });
};

Also our now.js file should look like this.

{
  "version": 2,
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/api/index.js",
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "OPTIONS",
        "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
      }
    }
  ]
}

After this using the command now should upload the project to zeit.co and the data is available on the project url https://cvirus.dobladov.now.sh/

Notes

As an alternative to Glitch and Zeit we can use Netlify, but for this project it was not necessary.

I'm not affiliated to Glitch of Zeit.co in any way, I just think both are really nice services to run my apps.

Automatically deploy to GitHub Pages using Actions

Daniel Doblado — Fri, 07 Feb 2020 00:00:00 GMT

This has become the main way to deploy most of my projects and it has greatly reduced the time invested doing it by hand, also avoiding headaches that you might be familiar with like, "ohhh! I forgot to checkout the proper branch", "I used the wrong script.", "I accidentally deleted the database and all the backups while updating a CSS color".

After setting up this workflow your code will be automatically deployed after each commit to master without human interaction and without having to use other service than GitHub.

“There should be two tasks for a human being to perform to deploy software into a development, test, or production environment: to pick the version and environment and to press the “deploy” button.” ― David Farley, Continuous Delivery: Reliable Software Releases through Build, Test, and Deployment Automation

Advantages

If just mentioning the world "Automatically" does not catch your attention, these are some of the main reasons why is worth to write some tiny workflows.

Single source of truth

Your code and and scrips for deployment are on same repository ensuring that all the information to create a build is on the repository and no manual process or tool is missing.

Documentation of deployments

The .yml workflow shows how to do a proper deployment, other developers should know how it can be replicated locally; Even if there are no comments it might be easy to reverse engineer this files.

Automated testing

Before each build tests can be enforce to avoid putting code on production that might contain errors or not follow the code style guide.

No more manual tasks

This is clear, automating a process is always faster and in general less error prone than putting your code manually in production on a Friday before vacations.

Multi-platform

Multiple platforms can be tested while doing the deployment without the need of the developers of installing virtual machines.

Cost

Manual deployment will cost you at the very least time, GitHub actions are for free both in price and your time, why not use them?

Creating a new Action

Choose a repository, go to Actions and add new one.

We need to create a new file, in this case is called deploy.yml, here we will define the process for the deployment, make sure to never put any secrets in here since it will be committed to the repository.

The structure goes this way, we need a name, on which circumstances we need to run this action, and which jobs the action will execute.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Build
        uses: actions/setup-node@v4
        with:
          node-version: "22.x"
      - run: |
          npm install
          npm test
          npm run build
          touch dist/.nojekyll
          echo "snoo.odyssey.codes" > dist/CNAME
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: dist

After saving this new workflow we should have a file called deploy.yml inside .github/workflows.

Immediately a new action will be triggered executing the workflow, making a new build and pushing it to the gh-pages branch.

After is finish our app should be available at the repository public URL, the URL is show in Setting -> GitHub Pages, here you can also set a custom one.

Functionality of each block

Let's go trough each part of the code.

Here we are indicating push code to master should trigger this Action.

on:
  push:
    branches:
      - master

Inside of jobs we have to define the machine that will run the code, in this case Ubuntu.

build-and-deploy:
	runs-on: ubuntu-latest

Steps of the job

The Action is now divided in different steps that will be executed sequentially.

This step will checkout your repository to make the code available.

- name: Checkout
  uses: actions/checkout@v4

Now we set node.js and we use version 13 to run the code, I would recommend to read the docs to do some other interesting stuff like running multiple node versions.

This step will be similar for other code like go or rust

- name: Build
  uses: actions/setup-node@v4
  with:
    node-version: "22.x"

The interesting part, here we have to define the process of actually building the site in this case something similar to what we would execute on our local machine to do it.

In this case I install the missing node packages, test the code and compile the site.

After this I added some special stuff for this repository, for example I make sure to create a file indicating that is not a Jekyll repository but this is actually not required in most cases.

After that I define the CNAME since I want this code to run on a custom domain instead of user.github.io/repository

- run: |
  npm install
  npm test
  npm run build
  touch dist/.nojekyll
  echo "snoo.odyssey.codes" > dist/CNAME

With this last step we push the code to the gh-pages branch of the repository

- name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: dist

If any of this steps fails the process will stop ensuring no "bad build" will be out on production.

More about it

Committing the build to a different repository

I had the use case of having to push the build to a different repository from the one where the sources are.

In this case I wanted to have the code of my blog on a repository and deploy this build to a GitHubs's special repository named name.github.io, to serve my personal page from here since 'gh-pages' does not work for this repository and my blog does not use Jekyll meaning the source code has to be on a separated repository and the build on master.

To create this token go to Settings -> Developer settings -> Personal access tokens and create a new one.

With this configuration, we can use a personal token that needs to be set on Settings -> Secrets, since the secrets.GITHUB_TOKEN only allows you to commit to your current repository.

- name: Deploy
      uses: peaceiris/actions-gh-pages@v4
      with:
        personal_token: ${{ secrets.PERSONAL_TOKEN }}
        external_repository: dobladov/dobladov.github.io
        publish_branch: master
        publish_dir: ./dist

Testing multiple platforms

Different platforms might use different commands.

For example let's say there's a rm in the scripts of the package.js while this build should work on MacOS and Linux, unfortunately it will fail on Windows since the rm command is not available, with a multiple platform test we will realize that using a solution like rimraf instead of rm will solve the problem for Windows.

strategy:
      matrix:
        platform: [ubuntu-latest, macos-latest, windows-latest]
    runs-on: ${{ matrix.platform }}

Writing a CNAME for custom domains

If your deployments needs a custom domain don't forget to write this file on each build.

echo "snoo.odyssey.codes" > dist/CNAME

Running actions on other events

Actions are not limited to push to master, is possible to also execute test or do other task on pull request or any kind of supported action, also to schedule this tasks using cron.

on:
  schedule:
    - cron: "0 * * * *"

Not only for deployments

Actions can be used for creating new release packages, also notifications, emails can be send on each event, the limit is your imagination.

Disadvantages

One of the main disadvantages, is that like any other service if is down you will not be able of deploying using these workflows, It does not limit you to still do manual deployments for your application.

If you wonder why your perfectly working action does not work don't forget to check: https://status.github.com/

Actions are not a 100% reliable if the infrastructure of GitHub fails, I had a problem where GitHub did not trigger one of my builds when I merged new code, a way to force a new commit without changes is to execute git commit --allow-empty, this will cause the action to be executed.

Documentation

Documentation worth reading:

Some examples of my GitHub Actions:

Become your company's JavaScript janitor

Daniel Doblado — Wed, 16 Aug 2023 00:00:00 GMT

Introduction

How many times do you work on a project and many dependencies are outdated, and neither you nor your colleagues want to take care of them because it's a huge tech debt task, especially with major versions?

This might not happen if you take care of your dependencies regularly; even better, it can be an opportunity to improve your codebase and learn new things that new versions bring.

Basic solutions with npm

The simplest way to see if there are new versions of your dependencies is to run npm outdated, this command will show you the current version of your dependencies and the latest version available, pretty useful to get an overview.

From here we can do npm update, it will update all the dependencies to the latest version, but this is not always the best option because it can break your codebase, so you need to be careful, it's much better to update packages one by one and check if everything is working as expected by running your tests, especially with major versions.

Another task to do is to check how many vulnerabilities you have in your dependencies, easy to do by running npm audit, this will show you the vulnerabilities and the severity of outdated packages.

And while this tools are good npm-check does a better job combining and improving them.

A better way

There are some tools that can help you with this task, one of them is npm-check.

The command npx npm-check -u -E will show an interactive list indicating the scope (patch, minor, major) of a newer version and a link to the changelog, so you can see what has changed and if it's worth updating it.

It makes incredibly easy to install each dependency once at a time to avoid breaking changes. My advice here is to always run the tests after installing any major version.

Workflow

For maintenance tasks, I like to reserve some time on Fridays to do this kind of work, so I can end the week with a clean slate, and I can also use this time to learn new things.

I usually go through all the new dependencies and read the changelog, if I see something interesting, I update it, or make notes for future improvements based on the new features.

Problems with alternatives

In my opinion, Dependabot feels more like spam than a useful tool; it create's a lot of PRs that are most often ignored, creating a lot of noise in your repository while not helping you understand what's going on with the new versions.

Conclusion

Both your colleagues and future self will be thankful for your work on this task and the new knowledge you'll gain.

Take the time to appreciate and maintain the foundation that your projects are built upon.

Choosing a game engine

Daniel Doblado — Mon, 18 Sep 2023 00:00:00 GMT

Introduction

With the recent controversy about Unity, I see more and more posts about gamedev, which is a very interesting topic that I don't usually work as much as I want; I only made small games with Phaser.js long ago and recently some experiments directly in canvas.

Cocoa Moss a team of two people that makes really cozy games, motivated me to give gamedev another try. I have been playing their games with my girlfriend for the past week almost every night, and they always make us happy.

Problems with canvas and not using a framework

My last game required hundreds of elements on the screen moving and colliding with each other. canvas is very limited in this sense, and while it works, the performance is not the best. I also have to handle quirks like different density screens and other visual glitches.

I need to port the game to something faster, like WebGL. The problem is that WebGL by itself is a very low-level API, and I don't want to write a game engine from scratch (neither I'm smart enough to do so)

Most people will opt to use a framework to handle the complexity of WebGL, the first option is usually three.js. In my case, the games are not 3D, so three.js feels overkill.

My second option was pixi.js while I'm getting somewhere, I don't like so much how the API is structured. I find myself often searching for solutions online to do basic stuff, most of the time finding code for old versions that is not compatible with the current one. This is the same reason I stopped using Phaser, all examples have a mix of old and new APIs, which makes it very frustrating to attempt any changes.

So far, Pixi.js is my best option, but I'm still not happy with it.

Using game engines

The main reason for using a game engine is that it will handle all the complexity across many platforms, not limiting me to just the web, although that's my main target. But hey, more performance is always good, and if I do free games, I want people to be able to download them and keep them forever, or for at least longer than the time I host them.

I never paid much attention to Unity, and after all the controversy with the fees, many developers are moving on to other alternatives, the main ones seem to be Godot or Unreal Engine. Unreal is probably overkill for what I want to do and not suitable for 2D, so my first choice was Godot.

Godot

This means that Godot is on the table. I avoided it at first because I'm the most comfortable writing JavaScript, and last time I checked, the developers were in the process of releasing version 4 with a huge rewrite of the engine, so I decided to wait.

There are two options for writing the code: GDScript and C#. After watching many videos about the advantages of one over the other, it seems that GDScript will emerge as the winner, so I will go with that.

Writing GDScript seems simple enough; it has basically the same syntax as Python, and it brings deep integration with the IDE.

While Godot seems to be great for making games, the situation of making web games is problematic at the moment because it does not support macOS web export. This is a problem when I'm planning on mainly making web games.

Defold

When searching for new engines, I stumbled into Defold.

I had never heard of it before, but; I'm very surprised. The engine is open source, free, and the export is very straightforward supporting almost every platform, including macOS, Windows, Linux, Android, iOS, HTML5, consoles, etc.

It uses Lua which I never wrote before, but I kinda love it now, it's simpler than Python, it's clear, and the compilation time is incredible fast, if you don't believe me watch Lua in 100 Seconds

The IDE is very well organized, I was able to create most of the logic I need for my game after watching a couple of tutorials.

So far, I feel more tempted to start writing my game in Defold until Godot gets their web export fixed.

While they promote themselves as a 2D engine, underneath it's a 3D engine, and it's getting better and better.

There are fewer tutorials for Defold on the wild, the official tutorials are high quality, teaching step by step, with clear goals and good results.

Alternatives

I was tempted by other approaches like raylib specially using node-raylib, and Bevy, but I guess it's better to bet on a bigger community and a more complete engine.

Conclusion

There are many ways to make games, and betting on open source should be the way to go, especially when game developers tend to be very talented people who are willing to collaborate on making a better engine.

Using a game engine brings many advantages. For me, having a community of people creating learning content is the greatest advantage, I can focus on making the game and not the engine, and I can export to many platforms.

GeoMask: geolocation spoofing extension

Daniel Doblado — Mon, 15 Dec 2025 00:00:00 GMT

Introduction

Earlier this year I switched back to Firefox, I want to move away from Google services as much as possible, and one feature that I used sometimes was the ability to spoof my geolocation, not even for nefarious purposes or privacy, mostly for development.

This is something really easy to do on Chrome, without even having to resort to extensions, simply open the developer tools, go to the "Sensors" tab and change your location to whatever place you want, I wish Firefox had something similar built-in, but it doesn't.

My first attempt was to use an existing extension, I couldn't find any that worked well, most of them were either outdated, not working at all, or had the most unintuitive user interface imaginable.

When there are no good options, the best option is to make your own, so I created GeoMask following the development mindset that I'm going to call "Better Execution, Same Task" (BEST), the idea is to look at existing solutions, see what they do well and what they don't, and then make something that does it slightly better in each aspect, nothing groundbreaking.

Goals

Let's start by understanding the main feature, changing the location directly in the extension popup, this might sound crazy but most of the extensions I tried, required an options page buried in settings or navigating to a hosted webpage where JS is injected to add UI where the location can be set, and most of those sites are offline and not maintained anymore.

I believe these extensions have weird designs because of how limited and hard to work with the WebExtension APIs are, even more after manifest v3 changes, most of the code has to run isolated from the extension UI, requiring to add weird communication between layers, inject scripts which are very limited, etc, I don't want to rant much about it, but clearly Google does not like extensions and it's forcing Mozilla to follow their enshittification practices.

My extension needs to do the minimum as Google's devtool, a popup with two text fields for latitude and longitude, and a button to apply the changes, and what can be better than that?, if the popup also shows a map with a pin that can be dragged to change the location visually, and search box to find places quickly.

Development

With that in mind, I created a simple map with Leaflet, my initial thought was to use d3-geo with a self contained geojson map of the world, but leaflet gives a lot of features out of the box, zoom, panning, and more rich map information, in my opinion is a worthy dependency.

Now that I have a map, I can set coordinates, change the position easily, I need to do the most annoying part of this project, overriding the browsers's geolocation API, with the selected coordinates.

For that the popup needs to be able to store the coordinates using browserAPI.storage.local.set, then a content script listens to storage changes with browserAPI.storage.onChanged.addListener in order store the coordinates on the page context, but unfortunately a content script cannot override the geolocation API directly, so it needs to inject a web_accessible_resources that overrides the navigator.geolocation.getCurrentPosition and navigator.geolocation.watchPosition methods to return the spoofed coordinates, where this data can be read from the root.dataset.

At this point I had a functional extension that could change the location, to polish it a bit more, I added a search box using Nominatim to find places quickly, a way to reset the location to the real one, dark and light mode, some error handling for invalid coordinates, and a randomize button with distance options.

For the extension itself I decided to use vanilla JS with JSDOC types validated by typescript to avoid any build step and no UI frameworks, given that there's not much UI, keeping the extension lightweight and simple, 92.1 KB for 1.0.0

Available now for both Firefox and Chrome

Git tricks

Daniel Doblado — Tue, 22 Aug 2023 00:00:00 GMT

Introduction

Git is one of my most used work tools, sharpening our tools helps us be more productive and save a lot of time. These are some of my tweaks to speed up my workflow when interacting with git.

ZSH git aliases

One of the first things I do after setting up my laptop is to install ZSH and Oh My ZSH.

Their aliases have become completely natural to me, and I can't work without them.

While the list looks a bit overwhelming, it's actually very easy to remember them; most of the time it's the initial letter or how you would pronounce them, for example git checkout becomes gco.

After a few uses, they become natural, and you will find yourself using them without thinking about it.

These are my most used shortcuts:

git fetch -> gf
git add -> ga
git commit -m -> gcmsg
git checkout -> gco
git checkout -b -> gcb
git merge -> gm
git pull origin "$(git_current_branch) -> ggpull
git push origin "$(git_current_branch)" -> ggpush

Commands that include variables like git_current_branch save a huge amount of time and mental attention.

Custom aliases

Switching between my latest edited branches is common, and this command helps me quickly visualize my modified branches in order.

alias branchOrder='git branch --sort=-committerdate'

Similar to the last command, it helps to switch branches in a quick way using fuzzy finder.

alias gcoi='git checkout $(git branch -a | fzf | xargs)'

For one of my projects, we include the PR number on the Changelog, this command gives me the value without having to open the browser.

alias lastPR='gh pr list -s all --json number --jq ".|=sort_by(.number)|last|.n>

Global git ignore

I like to keep a global gitignore file, this is useful for ignoring files that are not specific to a project, for example, IDE configuration files.

Adding devNotes* is especially useful as it helps me to write notes about a project while being sure they won't be pushed by accident to the repository.

nano .gitignore_global
git config --global core.excludesfile ~/.gitignore_global

.DS_Store
.vscode
devNotes*
dev-notes*

ZSH theme

ZSH themes are very customizable, I like to keep it simple, my current one is basically the default one with a few tweaks, a simpler way to display the branch name on the left side and the SHA commit on the right, content on the RPROMPT will be automatically hidden if the content goes over it.

That information helps me understand what I'm working at a glance, avoiding the need to run git status or git branch to get that information.

PROMPT="%(?:%{$fg_bold[green]%}➜ :%{$fg_bold[red]%}➜ )"
PROMPT+=' %{$fg[cyan]%}%c%{$reset_color%} $(git_prompt_info)'
RPROMPT='%F{cyan}$(git_prompt_short_sha)%F{reset}'
ZSH_THEME_GIT_PROMPT_PREFIX="%{$fg_bold[blue]%}(%{$fg[red]%}"
ZSH_THEME_GIT_PROMPT_SUFFIX="%{$reset_color%} "
ZSH_THEME_GIT_PROMPT_DIRTY="%{$fg[blue]%}) %{$fg[yellow]%}✗"
ZSH_THEME_GIT_PROMPT_CLEAN="%{$fg[blue]%})"

Gh command

This section is more suited to GitHub than git but since my workflow combines both, I think it's worth mentioning.

I use GitHub CLI mostly for scripting, there are two very simple commands that save me a lot of time, gh repo view -w and gh pr view -w, they open the current repository or pull request in the browser.

Another command that I like to execute is gh run watch to know when a workflow is finished, for example, when I'm running tests on a PR, it can be pipped to the command say [message] to get a notification when the workflow is finished.

There's more to this command, but these three options are really useful.

How I journal using Foam

Daniel Doblado — Tue, 15 Aug 2023 00:00:00 GMT

Introduction

Note-taking helps us focus, remember and organize our thoughts, it's an incredible tool to improve your work and yourself.

I've been taking notes for a long time, but I never had a good system to keep them organized and more importantly go back and read/refine old notes.

Why choosing Foam over alternatives

I stared to use Foam to annotate everything, I had many attempts with other tools, none seemed to stick, my last attempt was Notion.

While I find Notion incredibly useful it feels sluggish and the layout does not make me want to come back or write more, I do have a big amount of topics in there, but even when I can connect the pages, it's really hard to make mental connections to each one of the other topics.

There are other issues with Notion, like privacy concerns, but to me the most important is ownership, it's possible to export simple notes to Markdown, but takes a lot of time and is not a good experience, I didn't check their API, in any case I'm sure it's not as easy as cloning a git repository.

This is why I love Foam, it works the same way as as Obsidian or other Zettelkasten apps, but inside of VSCode, this is great because I always have VSCode opened, meaning that I don't have to switch context, all my shortcuts and plugins work, I can use the same editor for everything.

The view of the graph is the main selling point to use Obsidian, no more need to remember visiting old post, all is connected and can be accessed with a click, this is a game changer for me, I can see the connections between topics and ideas, I can see the evolution of my thoughts and how they are connected.

A graph view is something that I always wanted to have and what makes the difference in my total number of edits, and the view in Foam works great, it can be positioned like any other tab which I always keep as a pinned tab with cmd + k shift + enter.

There's some sense of satisfaction after looking at all the connections on the graph that making me want to write even more.

Journaling

I make daily notes to keep track of what I did in a short resume format, it's easy to create a new document using the shortcuts like /today, /yesterday or /+1w all of my notes can be connected using tags to other notes, this makes easy to visualize what I was doing on a particular day with the graph view without having to search or even open the note.

Plugins system

The integrations work great, multiple plugins doing one thing and doing it well.

I can integrate dynamic Excalidraw documents, before I used to have a single Excalidraw page opened in my browser with a bunch of cramped ideas, now I can simply create a new idea.excalidraw.png and immediately work on separated contexts, I can't overstate how useful it has become.

On top of it, I can directly link the excalidraw.png file inside Markdown and preview it while still being editable.

There are many other integrations, to paste images, create todos, preview images like shown in the last screenshot or simply have a better markdown experience.

Best part is that all of these plugins are just VSCode plugins that have functionality outside of Foam, enriching your whole development experience.

Backups

The output of Foam is just plain text making trivial to put the content into a repository.

Git once understood it's such a powerful tool that changes your way to think, for me the ability to have diffs and restore what I'm working on it's invaluable.

For my normal workflow, I write my notes during the day and next day review the changes using git, make corrections and push them to the repository, this helps to refresh my memory and improve the quality of the notes.

And again all of this without leaving VSCode and completely open source, I can't thank enough all the contributors.

Leaving the loop of repetition

Daniel Doblado — Wed, 30 Aug 2023 00:00:00 GMT

Introduction

I never had to deal with drugs, or what's seen as a "serious" addiction. But I believe I've been addicted to other things, like video games, endless scrolling, and other more mundane entertainment.

There have been periods of time when I was aware of wasting my life in ways that made me feel bad about myself, and I don't mean feeling bad for not being a workaholic, but for really enjoying my time of reading or simply sitting in the grass looking at trees.

The Loop

The loop is a cycle of repetition. It's a habit that you can't seem to break. It's a pattern that you can't seem to escape. It's a routine that you can't change.

The first step is to become aware of the loop. You have to be able to see it, and realize how it's negatively affecting your life.

At some point, I came to the realization that breaking the loop can only be done one way: by replacing the addiction with something positive.

Once you know what you have to get rid of, it's important to find a replacement. At this point, you have to understand that there's no stop of the bad habit by willpower alone; the only way to get rid of it is by being busy enough with something else to the point that you don't have time to think about it.

Breaking the loop

I used to spend time on places like Reddit doing nothing but scrolling, rarely participating in the conversation.

At some point, I knew I was getting nothing from it, no fun, no growth, not even real entertainment, what I was watching was gone the moment the next piece of content came, creating nothing of value.

I took many approaches, some very effective, like blocking the content in tedious ways to use it, like blocking the domain in the hosts file, and while it reduced the consumption, it was still a problem, causing me to go back to the same pattern.

The only thing that worked was to completely replace it by reading. If I really want to go to Reddit, I always have better content prepared.

I store hundreds of articles in Pocket to read later, I started to read on my phone. This way, I have content that really fulfills me, and I can do it anywhere, anytime, with the same convenience of scrolling Reddit.

That was the key factor: make it as convenient as possible and make it something that I really enjoy, and that's the only way to break the loop.

There are other habits that I've changed, like exercising. While I was always in shape, or at least thin, I always wanted to do more.

I was able to have enough determination to run often, but it never felt good for me, it made me lose more weight than I needed, and I didn't enjoy it. I was doing it because I thought it was the only way to exercise.

So it became another loop to break. I replaced it with calisthenics, I started to do it at home, and I really enjoy it.

I can do it anywhere, anytime, and for as long as I want. I can do it in a way that I enjoy and in a way that I can see progress, and that's the key factor: make it as convenient as possible and make it something enjoyable.

Find your loop and replace it.

Making the Orb

Daniel Doblado — Sat, 19 Aug 2023 00:00:00 GMT

import orbMeme from "./orb-meme.jpg"; import YoutubeVideo from "#astro/components/YoutubeVideo.astro"; import orb from "./orb.webm"; import noJsOrb from "./orb-no-js.webm";

Introduction

Inspired by sites like Oimo I wanted to have one interactive element, ideally something that doesn't get in the way and makes the main page standout while not being too resource intense.

I played with some other ideas like noise backgrounds, generating a map that constantly changes, Rorschach patterns, floating particles, but none of them looked good enough (I'm not a designer) or felt more special than a background.

<br />

Implementation

Then I saw this wonderful video from Barney Codes and I loved how the flow field looked; He did a wonderful explanation and re-creating it was a breeze, a channel totally worth subscribing.

Tweaks

p5 can be a bit of a heavy library and it's global nature makes it not ideal for a final implementation, I ported the code to be mostly vanilla <abbr title="JavaScript">js</abbr> with the exception of the perlin noise, the author of the library has a good article of how it works, "Creating perlin noise in JS".

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="dyQBGMG" data-preview="true" data-user="dobladov" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"

<span> See the Pen <a href="https://codepen.io/dobladov/pen/dyQBGMG"> Flow Field with chromatic aberration </a> by DobladoV (<a href="https://codepen.io/dobladov">@dobladov</a>) on <a href="https://codepen.io">CodePen</a>. </span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

One of the ideas I had in mind for the site theme was using chromatic aberration for some elements, adding it to the flow field really makes it pop just by displacing the particles in red, green and blue; At this point it looked good, but it had some problems, making it such a huge background element requires many particles, this can be an intensive task so if I could make it smaller.

Inspiration

The idea of making it an orb was inspired by this meme and his wonderful game Wiz.Zone, I thought using the orb and including the flow field inside would look interesting, while reducing the number of particles needed, I'm definitely pleased with the result.

I also decided to use a photo of my hand and use a dither filter using https://doodad.dev/dither-me-this, personally it would look better with more contrast, but for an initial version it looks good enough, the hand it's also divided in two different layers to make give the impression to be between the fingers.

Final touches

I added some other changes like turning the direction of the flow according to the mouse position, and some minor change that probably nobody will ever notice, to do the same using the device orientation on phones.

window.addEventListener(
  "deviceorientation",
  (event) => {
    leftToRight = event.gamma;
  },
  true
);

There are some other minor changes like stacked shadows to make it look more like glass and a shine in the background.

As an Easter egg, I also made it show some basic animation if JavaScript it's disabled.

Old media feels new

Daniel Doblado — Sun, 02 Feb 2025 00:00:00 GMT

import YoutubeVideo from "#astro/components/YoutubeVideo.astro";

Once a coworker jokingly said “Why watch movies if all of them are some variation of Shakespeare's plays?", there’s some truth to that, most movies and shows follow the same arc, and you know what’s coming all along; Even when there are still many ways to say the same in beautiful and slightly different ways, repetition is something you can feel.

Which made me think “If the content is already made, maybe I can find it in other ways”, and maybe closer to the source. Most of the time the original is better than the reboot, and with this thought, I started to look for older content on archiving platforms.

I stumbled upon The Dick Van Dyke Show thanks to this article, and gave a try to the first episode.

I have to say I was completely entertained during the whole episode. Besides the “oddity” of being in black and white, the way it flows felt different; The actors complete their sentences, and other actors react within the same scene without any cuts! There’s some higher quality in their acting compared to contemporary shows, probably due to the cost of film and the difficulty of editing at the time, where they had to put more effort into doing their bits in one take than now where every pixel and sound can be edited.

Somehow a show from the 60s felt modern and connected me more to people that are far away from my generation. I used to think Seinfeld was a more innovative show when it came, creating this kind of sitcom, but turns out it’s not so different from The Dick Van Dyke show. Both have a protagonist with 2 friends that struggle with social situations and are comedians, while having similar locations. Both shows are good, but the similarities really surprised me.

The same happens with books that have been written even thousands of years ago. Meditations by Marcus Aurelius has the same issues we face nowadays. If written with modern language you could not see how ancient this book is. His problems are the same as our problems, we struggle the same way and not much has changed.

What I want to say is that there’s not so much disconnect between current and older generations, and their content is not so different from what we might find in the present.

Could be that my feeling of boredom with new content is simply Juvenoia, a term I learned in this great VSauce video, but in this case, I think my worry with content is justified. As it’s easier to produce content we are more likely to produce garbage, or simply to put less effort, which is basically why I’m not looking forward to consuming any AI-generated content.

Juvenoia: The fear or hostility directed by an older generation toward a younger one, or toward youth culture in general.

Right now I can find old media on Archive.org, directly on YouTube or even downloading it (I won’t feel bad for downloading a movie where most of the cast is already dead).

For reading, Standard Ebooks provides me with many good books. You can even bulk download their library, which should basically supply a lifetime of books.

With this feeling, I stopped my Netflix subscription. I'm finding enough good free content to fill out my entertainment. The first issue I thought I would encounter is that there’s rarely people who consume the same content around me, and it’s definitely harder to talk with coworkers about shows, but due to fragmentation in streaming this was rarely happening.

Even popular shows that I enjoy and have become quite popular, Severance in this case is mostly unknown to my coworkers because it's only available on Apple TV. I still enjoy new shows, but there’s a lot of old content already made that I can extract value.

Somehow taking this route feels more relaxing than going to the next popular thing, and humbles my thoughts about my generation being smarter simply because we have the internet now.

This Arthur C. Clarke video really says a lot about the imagination of past generations vs ours now.

That is why the future is so endlessly fascinating because try as we can, we'll never outguess it.

Reading books on my phone

Daniel Doblado — Thu, 17 Aug 2023 00:00:00 GMT

What started as a test has become a habit, my mentality used to be "reading physical books is better than digital", because we like to follow the motto:

reject modernity, 𝖊𝖒𝖇𝖗𝖆𝖈𝖊 𝖙𝖗𝖆𝖉𝖎𝖙𝖎𝖔𝖓

Kindle experience

But after buying my first Kindle (7st gen), modernity had some good points, I preferred physical books, but a lot of the convenience of the Kindle made me continue digital.

Firstly, the progress bar, the psychological effect that it has on me telling me "<tt>there are only 10 pages left in the chapter</tt>" is motivation enough to keep me reading until the end of a chapter.

Immediately starting to read the book with the click of a button or leaving it without having to worry about losing the page, means I can read in short bursts, like when I'm waiting for the bus.

But still, the Kindle wasn't as good as a book, the screen was small, the refresh rate was too slow, and reading at night still required a light (I had a model without a backlight).

Transferring books was annoying, I kept the Kindle almost always on airplane mode to save battery, so I had to connect it to my computer to transfer books with Calibre or connect it to Wi-Fi to transfer books with email or the Amazon store, and while it was not a big deal, it was still annoying.

Although the battery life was amazing, it was still another device to charge and carry around, with its own inconveniences.

Phone experience

I tried to use my phone as my main reading device after accidentally stepping on my Kindle, which unfortunately didn't survive. Sometimes misfortune brings new opportunities.

Turns out I always carry my phone with me; just the mental barrier of having to carry my kindle was enough to make me read less.

Now I have the reading app very prominent on my phone screen, reminding me to read, meaning I have many short bursts of time to read before a meeting, while commuting, or while shopping, with the advantage that it's time that otherwise would be wasted with some social media app.

The screen is way better; yes, it's not e-ink, yet the backlight makes it easier to read in the dark, and the refresh rate and resolution are miles ahead of any e-ink device. I don't get much strain from reading on screens like my phone or laptops, so this was not a problem for me, but I understand others might find it inconvenient.

My current phone might not be lighter than my Kindle device, but it's definitely smaller; even the smallest Kindle device looks goofy in a pocket.

One of the best parts was using Google Play Books I'm not sure how, but they just let you upload any files you want and sync them over the internet for free. Just by navigating to Play Books upload and dragging the book, it automatically sends the book to all your devices and keeps them in sync, one of those services that just works.

And the app it's good, integrating dictionary, notes, good UI, and a must have feature, using the volume buttons to turn pages.

Physical book experience

While I still buy physical books, most of the time I get the same book digitally just to read at night while my partner sleeps.

The transport of a huge book, the need for light to see properly, and how annoying is to turn the pages at the start and end of a thick book are problems that I want to let go of.

I will miss the smell, the sense of physical progress, the uncontested battery life, and the feeling of having a bookshelf, but I think I can live without them.

Conclusion

I try to be pragmatic, and while nostalgia is a huge component here, what made me read more during these past 4 years was my phone and the convenience that brings, so I'll keep doing it.

Who knows, maybe in the future we can have screens in our retinas, and I will write this post again.

Rust with a taste of React

Daniel Doblado — Fri, 12 Sep 2025 00:00:00 GMT

Learning Rust

For the past months I have been more and more interested in Rust, some of my preferred sources for learning are the following:

Rustbook: The most in-depth resource, a must for everyone who aims to learn the language, more dense than the rest of the other resources I will mention, probably the most cared and complete resource made by the community.
MIT’s introduction to Rust: I loved reading it, the lessons go straight to the point and it rarely feels boring, it made the learning process far easier than the official Rust book.
Rust Cookbook: following the philosophy of teaching by example, wonderful to understand real cases with short snippets.
Learn X in Y minutes: a short overview of the language, a good site for any programming language.
Exercism: I completed some of the exercises here, and while I didn’t use it in depth, I still consider it a good resource.

The value of Rust

One of the best improvements in my work life has been TypeScript. The introduction of type safety has improved my confidence when refactoring code so much that I can't imagine writing plain JavaScript anymore, at least not without JSDoc and TS checking it. So what if I could take that safety even further and catch many issues before the code even compiles?

Most of the concepts that Rust introduces make a lot of sense, immutable by default, influenced by functional programming, good pattern matching, and the most important or what makes it different, borrow checking entirely avoiding garbage collection.

Writing UIs with Rust

Now that I’m at a point where all Rust concepts and patterns finally clicked and make sense, I wanted to see what can I do with it and Rust has these wonderful pages Are we Rust yet? to showcase what’s the current state of the language on different fields, and as a frontend dev, the page that caught my attention first was Are we GUI yet?.

First I tried EGui:

An easy-to-use immediate mode GUI that runs on both web and native.

Their demo is incredible, super fast, well-made, with tons of examples, but with a huge problem, using right click reveals that all the UI is drawn to canvas, which is not ideal for accessibility, so I kept looking until I found the topic of this post, Dioxus.

The Dioxus framework

Elegant React-like library for building user interfaces for desktop, web, mobile, SSR, liveview, and more.

Everything about this framework looks amazing, it targets all the platforms that I work on,with all the nices things about Rust, sub-second hot reloads, not rendering to a canvas, and the most important thing it feels like writing React, the framework I have been using for many years professionally.

I bet most React developers who never touched Rust can read this component code without much issue.

use dioxus::prelude::*;

pub fn App() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    }
}

Yes, use_signal is not named useState and the syntax is slightly off from JS with let mut and pub fn and of course is not jsx but rsx, anyway, the structure and overall feel of a React component is there.

And for me this is wonderful, not only it brings those advantages, but simplifies all the development experience to just Rust, something that an alternative like react-native does not, in general react-native apps are very complex and weirdly put together.

So far I only used Dioxus for test projects, it's just so simple to set and run with dx new [project-name], their get started “Hot Dog” app covers a good chunk of what's needed for a web app including data fetching, state management, UI, and their hooks like use_resource feel well thought and useful, with request invalidation integrated.

There are also some negatives, as a new framework in constant development I could find some annoying bugs, some programs like widgets are not possible to develop with it yet, the ecosystem is clearly lacking compared with react-native, the initial compile time is slower too, there’s less information online and its future is not as sure, if they continue improving it I can see Dioxus as a good competitor to React Native and becoming a great tool for multi-platform development, while being more consistent and unified under Rust.

This is the current state, in the near future I hope to make more use of Dioxus and ideally find it as useful as React-Native has been, while giving me even more safety and performance.

Supporting old browsers

Daniel Doblado — Tue, 07 Jan 2025 00:00:00 GMT

The problem

I reached a point at work where I have to support old iOS versions, and by old I mean iOS 13, which at the moment of writing this post is 5 years old. If you have to ask me, this is a waste of resources for a very small amount of users and while I made this point clear, this is my job, and it has to be done.

So now on, each release and each upgrade of packages will require testing on devices that even the manufacturers themselves don’t care about anymore. Even worse, we have to keep devices that could be upgraded to another major version locked in old versions.

The device I’m using right now is an iPhone 8 running iOS 13.5.1 which is upgradable at least to version 16, a device released in 2017 and not supported anymore by Apple.

Identifying the parse error

After upgrading to react-redux@9.2.0 this old phone is incapable of parsing the bundle, with a very unhelpful message, even with source maps.

We know that some token can’t be read causing the whole app to crash, meaning that one character in the bundle is code that was not supported in this version of iOS. How do we find the precise code?

In this case, I was able to narrow it to the packages updated. If this was not possible, let’s say an existing codebase would need to be adapted to work on old devices, some other debug can be added like including comments with the name of the modules imported to see where it breaks.

Getting closer but how do we know the precise line of code? Bundling in this case removed all the information. Once I knew that ./node_modules/react-redux/dist/react-redux.mjs was the real issue, the next step was to recreate it on a smaller setup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    Debugging react-redux on iOS 13
    <script type="module">
        import './react-redux.mjs'
    </script>
</body>
</html>

Once serving this file and accessing it from the device, the error was much more clear, I could see the line causing the issue.

  const contextMap = gT[ContextKey] ??= /* @__PURE__ */ new Map();

In this case, the operator ??= Nullish coalescing assignment was not supported at this version of iOS: Can I use Search Nullish coalescing assignment ?

Fixing the code

Manual Patching

There are various routes to get the problem solved, a simple one would be to patch the library in node_modules. Initially, I did it manually to make sure that was the solution for running react-redux on the device simply changing the line of code for:

//const contextMap = gT[ContextKey] ??= /* @__PURE__ */ new Map();
const contextMap = gT[ContextKey] = gT[ContextKey] === undefined || gT[ContextKey] === null 
  ? /* @__PURE__ */ new Map() 
  : gT[ContextKey];

The patch can be more permanent using npx patch-package: Stack overflow - Patch a "node_modules" (Node.js) module

This could be a good hotfix, but we want it fixed for future cases.

Creating a pull request

Second solution, to create a PR in the react-redux project and use less modern JavaScript, this solution is far from ideal. I don’t like to write older code, we should look at the future and while it does make the library more compatible I would have to justify and convince them to merge it, so I decided not to do it.

Line of code to change

Babel plugins

Third solution, transpile the library using Babel to more widely supported JavaScript automatically using plugins, and here is where the issue got more confusing. The project already used Babel to do exactly this, in fact @babel/preset-env includes the two plugins that are required to make the failing file work @babel/plugin-transform-nullish-coalescing-operator and @babel/plugin-transform-logical-assignment-operators, but somehow after a build the file ended intact and still containing ??=.

So what was happening? We had to transpile react-redux in the past to support other issues, as I could see in the webpack file resolve(__dirname, 'node_modules/react-redux') was in the include for babel-loader.

Well, the newer version of the package uses JS modules, and now the extension of the file was .mjs instead of .js meaning that the regex to match the files was completely ignoring the file /\.(js|jsx)$/. After simply adding /\.(js|jsx|mjs)$/ the file was correctly parsed and worked on iOS 13.

Conclusion

It’s important to understand how other people’s code end up in your build. In this case, I learned how to better debug third-party code with Safari which is not fun, how to adapt code to work in devices that were not supposed to work with it, and how to make sure that the code is transpiled correctly.

I hope this post helps someone in the future, at the very least was useful for a small subset of users that still use old devices.

Simplifying browser extensions with Tampermonkey

Daniel Doblado — Mon, 28 Aug 2023 00:00:00 GMT

Introduction

Not long ago, a coworker sent me the code of an extension he made, he did a wonderful work, and I loved how he came up with a better and simpler solution to the problem that I was overengineering. Unfortunately, the extension was only compatible with Firefox and I use Chrome.

Initially, I thought it was going to be a matter of adapting the manifest a bit to make it work on Chrome, but it was not that simple; even when using the same manifest version, the way background scripts are loaded is different for each browser.

Also, some parts of the code were incompatible with Chrome, for example, how the messages could be awaited in Firefox.

I did end up porting the code, but it was not a simple task and left me wondering why it was so cumbersome to make an extension compatible with both browsers.

After all, the changes to the extension APIs are meant to close the gap between browsers, but it seems to be a way to remove some of the more powerful APIs that get in the way of blocking advertisements.

Overall, I'm very disappointed with the developer experience of web extensions. Porting Youtube2Anki to manifest v3 was a lot of work with no benefits to the users, and with the drawback that I have to keep two different versions for Firefox (still v2) and Chrome, all these problems got me thinking about what I can do as an alternative.

Why Tampermonkey

Tampermonkey allows you to execute scripts and styles on any site, exactly what a custom extension does, but it has some advantages:

The development is much easier; it requires less boilerplate, and it's effortless to debug due to not having multiple contexts handling many of the tedious permissions for you.

On top of it, it reloads after saving the changes of a Tampermonkey script; there's no need to reload the extension; just refresh the page and the changes are applied. This means faster iterations and less time wasted.

In my case, I had three requirements.

I needed to be able to inject a script at a specific URL.
Send notifications to the user.
Open a URL in a new tab.

Tampermonkey allows me to do all of this.

The permissions only require adding some grants.

// @grant        GM_notification
// @grant        GM_openInTab`

And executing only in the URL is as simple as // @match [your URl]

After porting the logic, what used to be basically an app with multiple files, setup, packaging, etc, became a single file with a few lines of code that just focused on doing what it needed to do.

Not only that, but there was no need for boilerplate to send data back and forth between the background script and the content script, and notifications could be simplified by not requiring a tabId.

And the best part is that there are no differences between Firefox and Chrome; they both run the same script and execute the same functionality.

Other usages

I have incorporated Tampermonkey into my work to the point that some other of my coworkers use it now, mostly dev code that we don't want to deliver to production.

For example, as a quick way to set special cookies or log users without a form, since most of the scripts only require a file, we can easily share them as a gist, and they can be easily installed by anyone.

Conclusion

I would only consider Tampermonkey a tool for developers; there are many cases where a full extension is needed, but for quick hacks or to avoid the hassle of maintaining multiple versions of the same extension, it's a great tool.

SSR with Bun and React

Daniel Doblado — Tue, 28 Jan 2025 00:00:00 GMT

The goal is to have a server able to stream React Components directly from the server using the client for navigation, removing the need to request data from the server after the first load, some call it "Universal Data Fetching" or "Isomorphic Data Fetching".

This pattern ensures that the data required to render a page is fetched on the server during the initial request and then re-fetched or reused on the client side for subsequent interactions.

The full repository with the code can be seen in dobladov/bun-ssr-react, I’ll be omitting all imports to keep the snippets shorter.

⚠️ Disclaimer: I'm not implementing React Server Components, but good old React hydrated on the client.

I want to mention another repo that is doing similar logic, but all responses come from the server: alexkates/ssr-bun-react, a good approach if you want to have a more traditional SSR.

Why did I choose Bun?

It’s a batteries-included tool, if you had to make SSR work with webpack and node, you might know how much of a pain it is to deal with JSX in both the server and client, then add other issues like babel plugins, common JS modules vs ESM and you realize most of the setup exists to fix issues related to JavaScript instead of focusing on writing code.

Bun solves all of those directly for you, including the server, although you might want to use Elysia or Express for more complex apps.

I have to be honest, so far I’m not using Bun at work or in any projects that are critical, only side projects and occasional scripts, but I love it so far, and the only thing that worries me is the company behind it cutting funding or trying to lock you in their ecosystem or the main developers leaving the project, because wow, what an incredible job they are making with such a small team.

In any case, it’s a project that’s forcing Node and Deno to improve themselves and this competition so far brings many new functionalities that make my work easier.

Build process

We start by creating a new bun project and adding the dependencies

mkdir example-bun-ssr
cd example-bun-ssr
bun init
# package name (example-bun-ssr):
# entry point (index.ts): src/index.tsx
bun add react react-dom react-router

Let’s add a script to package.json to run in dev mode and also watch for changes. If you wonder why .tsx is because I want to have JSX directly in this file.

  "scripts": {
    "dev": "bun run --watch src/index.tsx"
  },

We need an entry point for the client build and to generate it to our public folder, we can start by adding this to src/index.tsx.

Bun.build({
    entrypoints: ['./src/client.tsx'],
    outdir: 'src/public/'
})

Client logic

src/client.tsx has two goals, to hydrate React once the file is loaded so we can interact with the DOM on the client, and to generate the routing for client navigation.

<details> <summary>Rant about react-router</summary> I’m very disappointed with the approach of react-router for their docs, they definitely care about the project and add cool functionality, but I find the docs completely lacking and confusing, I can’t link any of the next functions that I’m mentioning, there are barely any examples of how to do SSR, and the framework vs library approach is confusing to even people experienced in using it, there are also many methods that I can’t even find in the API reference even when they are not deprecated, the only way I found to understand how to implement this was to do searches in the repo.

For next projects I will look at alternatives like TanStack Router. </details>

We need <RouterProvider> to create a router that can use loaders otherwise a simple <BrowserRouter> would be enough.

createBrowserRouter is equivalent to <BrowserRouter>, but we need to call it this way for our purpose and I like to use createRoutesFromElements because I find JSX more intuitive for nested routes.

const root = document.getElementById('root');

if (root) {
    hydrateRoot(root, (
        <RouterProvider router={
            createBrowserRouter(
                createRoutesFromElements(
                    Routing()
                )
            )
        } />
    ));
}

Routes

Our routes can be very simple, in src/routing.tsx we have the following, note that we will re-use this file for server and client which gives us a very clean way to handle our app with minimal config.

An errorElement to act as an error boundary.

<Route> for each of the routes and inside the only more unusual prop is loader, used to get the data before the route is loaded.

export const Routing = () => {
  return (
    <Route errorElement={<ErrorPage />}>
        <Route
          path="/"
          element={<Home />}
          loader={getData}
        />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Route>
  )
}

The components are really simple:

// https://github.com/dobladov/bun-ssr-react/blob/main/src/ErrorPage.tsx
export const ErrorPage = () => {
    const error = useRouteError();

    return (
        <div>
            <div>Something went wrong</div>
            <pre>{JSON.stringify(error, null, 2)}</pre>
            <Link to="/">Go back to home</Link>
        </div>
    )
}

useLoaderData will give us the data requested in the loader prop

// https://github.com/dobladov/bun-ssr-react/blob/main/src/Home.tsx
export const Home = () => {
    const data = useLoaderData<InitialData>();

    useEffect(() => {
        console.log('Home loaded');
    }, []);

    return (
        <div>
            <h1>Home</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
            <Link to="/about">About</Link>
        </div>
    )
};

// https://github.com/dobladov/bun-ssr-react/blob/main/src/About.tsx
export const About = () => {
    
    useEffect(() => {
        console.log('About loaded')
    }, [])

    return (
        <div>
            <h1>About</h1>
            <Link to="/">Home</Link>
        </div>
    )}

// https://github.com/dobladov/bun-ssr-react/blob/main/src/NotFound.tsx
export const NotFound = () => (
  <div>
    <h1>404 - Page Not Found</h1>
    <p>Sorry, the page you are looking for does not exist.</p>
    <Link to="/">Go to Home</Link>
  </div>
);

To get the data, we need src/utils.ts with a simple async function that calls an API we will create later on the server.

export const getData = async () => {
    const response = await fetch('http://localhost:5000/api/example')
    const json = (await response.json()) as InitialData;
    return json
}

Congrats we wrote most of our app, at least the client, we could easily use Bun’s newest HTML static import and have a client side rendered react app, but we are here to aim for the stars and to do SSR, so let’s do that now and create the server.

Server logic

We are again back to src/index.tsx, take a moment to appreciate how simple the code is.

We need to create a server that listens on a port, and we have some basic path name matching the incoming URL, that's it.

const server = Bun.serve({
    port: 5000,
    async fetch(req) {
      const {pathname} = new URL(req.url);
      console.info(`Requesting: ${pathname}`);

      // 1. Static assets
      if (pathname.startsWith("/public/")) {
        const file = Bun.file(__dirname + pathname);
        return new Response(file);
      }

      // 2. Example API
      if (pathname === '/api/example') {
        return Response.json({ message: 'Hello, World!' });
      }

      const routes = createRoutesFromElements(Routing());
      
      let { query, dataRoutes } = createStaticHandler(routes);
      let context = await query(req) as StaticHandlerContext;
      let router = createStaticRouter(dataRoutes, context);

      // 3. Server-side rendering
      const stream = await renderToReadableStream(
          <App>
            <StaticRouterProvider
              router={router}
              context={context}
            />
          </App>,           
        );
        return new Response(stream, {
          headers: { "Content-Type": "text/html" },
        });
    },
  });

console.info(`Listening on http://localhost:${server.port}`);

Let’s analyze each match:

Allows to serve our static assets in the public folder including the client build generated at the beginning with Bun.build, our CSS, favicon, images can be served this way.
Just an example of a JSON API, that both client and server can request.
Here comes the magic that makes SSR possible, we re-use the client routes with createRoutesFromElements, and we need createStaticHandler and createStaticRouter again here because we use a loader prop in our Routes.

Once we have created the routing, we can stream the App with renderToReadableStream.

We miss only one last component, src/App.tsx, which is an HTML wrapper where we render the server components and load our client.

export const App = (props: Props) => {
    return (
        <html lang="en">
            <head>
                <meta charSet="UTF-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            </head>
            <body>
                <div id="root">{props.children}</div>
                <script type="module" src="/public/client.js"></script>
            </body>
        </html>
    )
}

And we are ready, bun run dev should launch the server and provide the URL http://localhost:5000 where we can check our app.

Retrospective

As mentioned I like how simple everything is, at least compared to another production project at work with the same goal using node, express and webpack, this is far more maintainable, the build is faster and overall improves in all areas, with less dependencies.

I will definitely use Bun more and more if they continue providing so much value out of the box, at the moment I'm working on a side project that relies on their SQLite implementation and I'm very happy with it.

Upgrade Your Actions

Daniel Doblado — Fri, 23 Jan 2026 00:00:00 GMT

Discovering outdated Actions

Some care about updating their dependencies, many neglect the dependencies in their workflows, that's why I decided to vibe/make this tool.

It provides a simple way to know what needs to be upgraded in your GitHub actions, when executed, it shows a list of all the third party actions that can be upgraded and to review the changes.

The vibing took a while to get right, Claude did produce a working tool on the first try, but the first solution was too naive, using 2 requests per action to get the releases and tags, which causes it to reach the API limit very soon blocking any new requests.

I had to refactor the code to use GraphQL, which unfortunately requires using a GH_TOKEN, but now all information is requested much faster with a single request.

Some other cleanups were required to make the tool simpler, like removing unnecessary filters, optimize grouping and sorting, and improving the output format.

Checkout the tool on Gist: check-actions.js

Getting rid of unnecessary actions

Even better than having to update your actions is to get rid of them with tools that are already there, I like to use the gh-cli to replace some unnecessary actions, this brings many advantages:

It’s always up-to-date with the changes on GitHub
Standardized API, simplifying many of the common tasks
Reduces third party libraries (more secure)
Faster, no need to set the action with uses (already pre-installed in all public runners)
Can be executed in the local terminal, easier to test
Has many of the common functionality that requires using the rest API

I had to do clean-up in a big monorepo, and here are some of the actions I replaced:

peter-evans/create-pull-request → gh pr create ….
actions-ecosystem/action-add-labels → gh pr edit --add-label <name>
actions/github-script (used to create comments) → gh pr comment ...
actions-ecosystem/action-add-assignees → gh pr edit --add-assignee <name>
Some scripts using fetch to merge a PR → gh pr merge --squash

After the changes, all the logic was reduced, required less maintenance, and it was unified.

As a reminder whenever possible become your company janitor, everyone appreciates the cleanup and improvements.

Wardriving in 2025

Daniel Doblado — Tue, 06 Jan 2026 00:00:00 GMT

It’s 2025 and routers are somehow secure now, are they really? Well if you have a half decent router it’s most likely safe enough, still there are some settings that can give you some peace of mind.

I wanted to revise my own security and see if most of the old password cracking methods still work or new ones were found. I learned how to crack WEP passwords back when I didn’t have internet, how did I learn it without having internet? I was lucky enough that a guy gave me a ton of PDFs about Linux, programming, and hacking zines, which believe it or not I used to read on my PSP, this probably shaped a lot of my life and career decisions.

Wired Equivalent Privacy (WEP)

Back then WEP was quite easy to crack, it only requires you to listen to the AP when clients are connected, and capture enough traffic to infer the password, this was a long time ago, and you’ll basically don’t see any routers now with a WEP password anymore.

Wi-Fi Protected Access (WPA)

Then we moved to WPA and here is where we are now, you might ask yourself, can you crack a WPA password like WEP? The short answer is no, but there are other methods that might work, because here is the important thing, router manufacturers are lazy, and will do the bare minimum until the problems hits them.

The first problem with WPA is that an attacker can capture the handshake, this can be easily done with airodump-ng, a dictionary attack can be used against the handshake to guess the correct password, there are many tools to speed this process like hashcat which uses the GPU, being realistic if the password is secure enough, you won’t ever get it this way, but as I mentioned manufacturers are lazy and sometimes they generate these passwords in a deterministic way.

For example the AP mac address might indicate the manufacturer and version of the router, and if you are lucky someone else might have generated a dictionary with all the default values, or it can be even simpler, I remember finding the mac of my router was similar to another I wanted to check, and I knew my default password was 8 numbers, which made it trivial to generate a dictionary.

As a general rule handshake cracking is not a viable path anymore, you need to be lucky with a simple password, and manufacturers, at least the half decent ones got notice and started to create safer default passwords.

If we can only set WEP and WPA passwords, what’s left? WPS, probably one of the dumbest implementations ever made, at least initially.

Wi‑Fi Protected Setup (WPS)

I believe not used by any normal consumer ever, initially was a way to use an 8 digits PIN instead of the password, there are many issues with it mostly that routers enable it by default, some won’t allow you to change the PIN meaning that if it’s compromised an attacker will always be able to get your password no matter if you change them, but there are even more problems.

8 digits is not such a huge number of options to try, but due to a bad implementation decision, it’s possible to guess and validate the first 4 digits independently of the other last 4 digits, meaning that an attacker can check all possible options really quickly, although manufacturers finally realized this and added rate limits eventually.

Not only the guessing was easy at that point, but with the Pixie Dust attack it’s even easier and faster, again because manufacturers are lazy, and they lack randomization.

Some manufacturers implemented WPS so bad, that sending a null pin returned the real pin.

And this is the attack that even today I can find some exploitable routers, to give some real perspective, at my current location, within my WIFI reach I can see that only me and another neighbor use WPA 3, the rest have mostly the default security of their router and there are 2 routers vulnerable to WPS attacks so obsolete that they use WPS 1.0.

Wardriving with a phone*

From here I got curious, and I asked myself if it was possible to do this WPS attack directly from my phone, and in theory it is, in practice Android has so many fences that I kinda gave up, the main issue is that for capturing packages your phone needs to be rooted, which is not easy depending on the model, I don’t want to root my current phone and my old phone sadly died while installing GrapheneOS.

The compromise is to use a phone connected thorough SSH to a Raspberry Pi powered by a power-bank, with it, I have a mobile setup capable of doing anything I need.

We need 2 Wi-Fi cards on the Raspberry Pi, one to connect to the phone and a second one in monitor mode to do the actual packet capturing.

At this point I got a bunch of complication because I don’t have a proper setup, my main RPI had the only good micro SD I had left a home, I was planning to simply flash Kali Linux to it which includes all the necessary tools, but it won’t fit on the 2gb card I had left.

I opted to use Alpine Linux, a much more slim distribution, that fits on the SD card, with the advantage that boots way faster.

I didn't have any USB keyboard a simple way to overcome this is to pre-configure the WIFI during flashing, there are different ways, like creating a file, I recommend using Raspberry Pi Imager which has a nice UI to add settings and also has Alpine as an option.

One flashed, we can create an access-point on the phone, that the Raspberry Pi will connect after booting.

But how do we connect to the RPI? We don’t know the IP assigned to the device, and Android does not show the IP for the AP or the clients connected, using Termux, we can check the AP address with ifconfig.

Now we can install nmap to discover all the clients connected.

pkg install nmap
nmap 10.43.163.0-255

With the newly discover device, we can finally connect with SSH

ssh root@10.43.163.249

Alpine can be configured and permanently installed with setup-alpine, and some of the necessary tools added with the package manager, pixiewps and aircrack-ng.

To make it easy to list and attack the available SSIDs, wifite can be downloaded.

git clone https://github.com/derv82/wifite2.git
cd wifite

sudo airmon-ng start wlan1 # enables monitor mode on the interface 
sudo airodump-ng -wps -i wlan1 # to find wps 1.0 targets
sudo ./wifite --wps --wps-only # to attack those access points

And after a very short try we get the password, this was a very old router that I got for free, as it was configured.

I’m quite pleased with this setup, it’s discrete (on a backpack) and portable, full Linux and boots fast.

As a takeaway, change the default password for a secure one, update your router whenever possible and always disable WPS.

More information

Why there are no posts this year

Daniel Doblado — Sat, 28 Dec 2024 00:00:00 GMT

Blogging about blogging

I realized most of the drafts I wrote in 2024 were about blogging, while some meta might be interesting including this post, I don't want to be the kind of person that only writes about blogging, the purpose of blogging should be for sharing knowledge and experiences, not for explaining how to blog, probably Aristotle would have wrote this in his blog, but I'm not Aristotle.

“The Purpose of ~~Knowledge~~Blogging is Action, not ~~Knowledge~~Blogging” Aristotle

This led me to delete those drafts, and I don't have any regrets, in fact nothing of value was lost.

Negativity

Some of the other drafts talked about the dead internet, and how I'm less and less interested in the internet, and this is true, during 2024 I both gave another try to social networks and gave up, I deleted my Twitter account due to the amount of negativity there, rarely finding anything new and interesting, the only thing I miss is the creativity of gamedev and programmers, but more and more of the content was simply commercial, rarely there's people who simply are proud of their work and want to share it, instead everyone was selling something including me even if I made no money out of it.

Then I tried Mastodon and BlueSky, in Mastodon, the content felt completely unappealing to me, maybe because I chose mastodon.social for my instance, politics, cat pics and rights are the more common topics and I like that others have a place to discuss them but I'm not interested, definitely a more tech-focused instance would have been better for me, but fragmentation and content made me give up on it.

BlueSky felt somehow better, I liked the idea behind their protocol, I think they do moderation in a good way, and it feels like a good alternative to Twitter, but again I'm not sure if I chose the wrong people to follow, but most of the content was meta about the protocol, cats, and politics.

I even invested some time to understand how their AT protocol works, I love how they use domains as handles and other ideas of owning your data, but given that they still need to implement important parts of the protocol like scopes developing something on it didn't feel right at the moment.

Which led me to think "What am I doing with my time"? I consume all this content that I don't even enjoy, and then deleted the accounts.

Ironically Instagram is the only social network of any value for myself now, only following people I know and avoiding reels and other never-ending content, I simply have it on my phone (web app) with a timer to limit how much I use it; this keeps me connected to my friends and family which is real value, I do hate that it is owned by Meta, but both posting and commenting to people I care increases my connection to them.

In general my only social interactions beside the mentioned are some occasional comments on Hacker News and searches on Reddit but they are so sporadic that they barely count.

Focusing on what matters

Given that I don't like the web so much, the best thing I could do in 2024 was to get away from it and focus on other things, I started to take Calisthenics more seriously which had the best outcome possible, this year to my surprise, I can do some Calisthenics tricks, like handstands, muscle-up, L-sit, and my physique is great, the amount of benefits to my body have been amazing and training has become a highlight of the day where I feel great instead of being a hurdle, in fact I'm training so much that I have to take periods of healing, which is a good problem to have and I'm reducing with more knowledge about the topic.

Because of the content I found on the Internet is not interesting I moved more to reading books, and more importantly, now I allowed myself to abandon books that I don't find interesting which was killing my will to read, this boosted my other hobbies with amazing books like Overcoming Gravity, never have I read a more well-written book about sports, a topic I never thought it could be interested in reading, I'm reading more of what amuses me without feeling guilty about learning something new, focusing on Sci-Fi instead of non-fiction.

For 2025 I hope to write more about my hobbies and less about the web, focus on what's positive and what I enjoy, and hopefully you enjoy it too.