DEV Community: Anna Villarreal

🦄 Sharing DEV Followers Count on Github Profile 🦄

Anna Villarreal — Wed, 23 Sep 2026 22:42:13 +0000

TLDR - I finished a small project that I am sharing for my friends on DEV, that allows you to put your followers count on your Github!

I had started this nonsense last year, and like many silly side projects, let it go to the wayside. But there was one consistent tiny reminder in my email everyday: "Run failed for Github Actions..." 😂

I said well, I could just delete it all. But that bothered me. I should be able to get it to work, right? Feeling determined today, I said enough is enough with the annoying emails and I am going to fix this. A little tweak to the api calling and a little deletion of unused code that I had commented out and things began to get much more clear.

I'm going to share the full code of my working github actions file that is working for me, so someone else on here that wants it doesn't have to silently succumb to a year of annoying emails like I did. Evidence of that can be seen with successful run #343 - the first successful run.

Here's the good part you have been looking for.

YAML File:

name: Update DEV.to Followers Count

on:
  schedule:
    # Runs at midnight UTC daily
    - cron: '0 0 * * *'
  workflow_dispatch:

permissions:
  contents: write

jobs:
  update-count:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'

      - name: Run the update script
        env:
          DEVTO_API_KEY: ${{ secrets.DEVTO_API_KEY }}
          DEVTO_USERNAME: annavi11arrea1
        run: node update_script.js

      - name: Commit updated README
        run: |
          if git diff --quiet -- README.md; then
            echo "Follower count has not changed."
            exit 0
          fi
          git config user.name "github-actions[bot]"
          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git add README.md
          git commit -m "Update DEV.to follower count"
          git push

Notes:

Please remember to use environment variables in your code for API keys, don't hard code them into this! We want to keep our privilege to use DEV API for free. 🦋
You will need to specify where in your README.md to place the output. You will need appropriate tags. I did it like this:

Scroll so you see the whole thing, there is a start and end tag.

<!-- DEVTO-FOLLOWERS-COUNT:START -->**34996** DEV.to followers<!-- DEVTO-FOLLOWERS-COUNT:END -->

I'm so psyched I got this working. I'm not here to brag about my followers, but we might all want to brag silently on our own profiles elsewhere. Haha.

Important changes made: make sure that I gave it write permissions, and also that the write is auto-pushed when the job runs. Key factors for a real update. Hmm, I wonder how else I might use Github actions for auto-updates?

Shout out to @fm for calling me out. Here is my update_script.js 😂

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

const DEVTO_API_KEY = process.env.DEVTO_API_KEY;
const DEVTO_USERNAME = process.env.DEVTO_USERNAME || "annavi11arrea1";
const README_FILE = "README.md";
const START_MARKER = "<!-- DEVTO-FOLLOWERS-COUNT:START -->";
const END_MARKER = "<!-- DEVTO-FOLLOWERS-COUNT:END -->";
const USER_AGENT = "AnnaVi11arrea1-GitHub-Actions";

if (!DEVTO_API_KEY) {
  throw new Error("Missing required DEVTO_API_KEY environment variable.");
}

const parseResponsePreview = (data) => {
  const trimmed = data.trim();
  return trimmed ? trimmed.slice(0, 500) : "<empty>";
};

const fetchJson = (path) => {
  const options = {
    hostname: "dev.to",
    port: 443,
    path,
    method: "GET",
    headers: {
      "api-key": DEVTO_API_KEY,
      Accept: "application/vnd.forem.api-v1+json",
      "User-Agent": USER_AGENT,
    },
    timeout: 15000,
  };

  return new Promise((resolve, reject) => {
    const req = https.request(options, (res) => {
      let data = "";

      res.on("data", (chunk) => {
        data += chunk;
      });

      res.on("end", () => {
        if (res.statusCode !== 200) {
          const preview = parseResponsePreview(data);
          reject(
            new Error(
              `DEV.to API request failed (${res.statusCode} ${res.statusMessage || "Unknown"}). Response preview: ${preview}`
            )
          );
          return;
        }

        try {
          resolve(JSON.parse(data));
        } catch (error) {
          reject(new Error(`Failed to parse API response. Response data: ${data}`));
        }
      });
    });

    req.on("timeout", () => req.destroy(new Error("DEV.to API request timed out.")));
    req.on("error", reject);
    req.end();
  });
};

const getFollowersCount = async () => {
  const perPage = 1000;
  let page = 1;
  let totalCount = 0;

  while (true) {
    const followers = await fetchJson(
      `/api/followers/users?page=${page}&per_page=${perPage}`
    );

    if (!Array.isArray(followers)) {
      throw new Error("DEV.to followers endpoint returned an invalid response.");
    }

    totalCount += followers.length;

    if (followers.length < perPage) {
      return totalCount;
    }

    page += 1;
  }
};

const updateReadme = async () => {
  const count = await getFollowersCount();
  let readmeContent = fs.readFileSync(README_FILE, "utf8");
  const newContent = `${START_MARKER}**${count}** DEV.to followers${END_MARKER}`;

  const regex = new RegExp(`${START_MARKER}[\\s\\S]*?${END_MARKER}`, "g");
  readmeContent = readmeContent.replace(regex, newContent);

  fs.writeFileSync(README_FILE, readmeContent);
  console.log("README updated with new follower count:", count);
};

updateReadme().catch((error) => {
  console.error(error);
  process.exit(1);
});

Examining the "Boolean-Switch" in Java \_(ツ)_/

Anna Villarreal — Tue, 15 Sep 2026 23:22:51 +0000

While reading through some ai-generated code today, I was caught off guard when I saw a switch statement inside of a boolean. What on earth has ai done now, I wondered. Here is the suspect:

    public boolean canChangeTo(OrderStatus newStatus) {
        switch (this) {
            case PLACED:
                return newStatus == PROCESSING || newStatus == CANCELLED;
            case PROCESSING:
                return newStatus == SHIPPED || newStatus == CANCELLED;
            case SHIPPED:
                return newStatus == DELIVERED;
            default:
                return false;
        }
    }

Shortly after marveling at "ooo, this is a thing?" I started to question it. Why does this feel different?

Basically in every other case besides enum, this is bad. Enum, to my knowledge, is the only case where this is acceptable. Why? Because in a flow where there can be one and only one direction, like order processing, this checks out. Each one will hit in the order it is intended to hit. Each case will be found true at the right time in the process, and will update the status accordingly.

We can define our fixed, or set values (enums, short for enumeration) to use later in our switch.

That might look like:

public enum OrderStatus {
    PLACED("Placed"),
    PROCESSING("Processing"),
    SHIPPED("Shipped"),
    DELIVERED("Delivered"),
    CANCELLED("Cancelled");
}

We use enums when we have a distinct list of choices that do not change. This could also work for days of the week or the current states of your most recent job applications. Because we are using enum, we avoid typos. Also, using your choices as enum values makes them classes in Java - a whole 'nother level of excitement.

But back to my boolean-switch...

Upon doing further digger I discovered that what claude had spat out (no hate on claude, I love claude!) was actually not optimized. There is a better way to write the boolean-switch. Since Java 14, we can use arrows to slim down our writing.

public boolean canChangeTo(OrderStatus newStatus) {
    return switch (this) {
        case PLACED -> newStatus == PROCESSING || newStatus == CANCELLED;
        case PROCESSING -> newStatus == SHIPPED || newStatus == CANCELLED;
        case SHIPPED -> newStatus == DELIVERED;
        default -> false;
    };
}

...slimmer and concise! My brain likes this better.

A peculiar boolean-switch has made me realize that using enums is incredibly more powerful and efficient than writing a string in an if-else statement. By using the this keyword on the switch statement itself, it evaluates the enum value and not the boolean value. If you want to "switch" on the boolean, then just use an if else statement, because there is only two values anyways...

I used to lean into if-else statements, but the switch is starting to grow on me.

Web Traffic Inspector Dash

Anna Villarreal — Mon, 14 Sep 2026 02:41:36 +0000

Mischievous Behavior Detected 🔎

It all started when I discovered an anonymous user was uploading a file with a strange extension and then trying to execute it.

Disclaimer: It's called experimental microserver for a reason. I am learning. My firewall was clearly lacking. Honestly I'm glad this happened. Let me explain why.

On my new mission to tighten up security, I wanted a dashboard to learn about my server traffic. I got that setup and working nicely, building a child spawned from Go Access data. During this time, I discovered this 'malicious' photo uploading activity. I was not expecting this. I went down a semi-lengthy dashboard building process. I learned so much about what "suspicious activity" or "red flags" might be. It was very eye-opening and I learned a lot about general web traffic.

High Level Understanding - What IPs Should be Blocked?

I found ways to sort the activity, giving me starting criteria for considering blocking. Loosely put, its sort of some combination of:

IP addresses that try visiting routes that don't exist. 404 flag.
IP addresses snooping for places to upload things or search for .env files. Snooper flag.
IP addresses that make any attempt to access or change anything on your server that they should not. These are offenders. They get the "Tamper" flag.

The flags are assigned automatically in the dashboard to help me understand who is doing what at a very far distance.

The ban hole:

Don't Accidentally Ban Yourself

Important: You may need to tweak your filtering so that you don't block IP addresses that look 'bad' on a high level, but are actually very important. 😂 Don't ban yourself from yourself. I almost did that!

At the top of my dashboard I've added a block button, and for rage-mode, multi-block. I have now made blocking IP addresses a fun game I suppose.

I also created an incident report area to track the worst just for fun.

I learned about the types of rules one might want to create for their firewall based on how the "bad" IP addresses are trying to interact with your system. I've created certain auto-ban rules after examining the traffic. That's cool. It's nice to know why you are doing something, why it's important.

Experience is the best teacher. There is web development, and then there is security. When you have a server, you must do both. You don't built a castle and leave all the doors unlocked. Nobody would.

Recommendations from Learning

I recommend checking out https://www.abuseipdb.com/ for a free API key! You can easily set that up on your own. I found them to be an excellent starting resource for answers.

🟣 Ever Fluorescent: Live Again!

Anna Villarreal — Tue, 08 Sep 2026 00:43:39 +0000

⭐Excitement!

I've had had stores on Shopify, and a successful Etsy store. But after years of ups and downs and general nonsense, I'm done living by someone else's standards. I wanted to build my own fully functional shop. It had been thrown on the backburner for a long time. Today -- I present a working Ecommerce site built by yours truley!

Integrations:

Stripe
Cloudflare
Gorgeously simple admin dashboard that is clear and makes sense
A small art gallery to represent myself as an artist (only a few pictures for now)
Product uploads from varying places (like excel 2003, smh)

I've ran it through basic SEO tests to make sure I'm not totally failing.

It's live. It will accept payments!

-- proud developer moment --

I'm going to share some picks but here is the link:

Everfluorescent.com

Eeeeeeeeeeee!!!!!

Main Page:

Custom Admin Dashboard:

Let me know if you find a bug! <3

Edit 9/18/2026

I'm adding a video for those of you that would like to meet the artist side of me!

Remembering Why We Code: Dropping AI for Fundamental Learning

Anna Villarreal — Sun, 06 Sep 2026 19:18:44 +0000

Excitement

I wanted to share my excitement of forcing myself to build without using AI.

I would say I've been learning to code semi-consistently for roughly 3 years. Most recently, I started a class called Java 2. It builds on foundational concepts learned in the previous class. I feel I might be spread a bit thin, dabbling over here in Ruby, dabbling over there in Python, and then poking around at Java on Sunday afternoon. Good thing they share the overarching concepts or it would be utter confusion. ¯(°_o)/¯

As many of us have been leaning heavily into AI to build amazing things at lightspeed, I made the conscious decision to not open a single AI tool as I power through the first assignment of the class. I said to myself "No, I'm going to struggle because I want to understand." And I can tell you, after using AI constantly, this was a wakeup call to the real rewards that exist when you stop relying on AI.

I did google a few things, but that is allowed if you ask me. This is the internet, after all.

Getting Things to Click Again

At some point in my assignment things started clicking again. That was an amazing moment. A class can have methods, we can call those in the main function, I can nest switch statements for nested menus, and I can debug in real life with minimal resources! Twice I got stuck, and twice I came out the other sided with that excited "**** yes, it's working!" moment - a feeling I have been missing for some time. The feeling that you struggled and powered through it and figured out what was seemingly impossible by yourself.

Here is the sub-menu I built today with a nested switch statement.

import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

// Runs a console program that lets the user add and analyze texts,
// then stores and prints the texts entered during the session.
public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<String> texts = new ArrayList<>();
        boolean running = true;

        System.out.println(" --------------------------------");
        System.out.println("|      Paragraph Parser         |");
        System.out.println(" --------------------------------");
        System.out.println();


        while (running) {
            System.out.println("1. General Text Analysis");
            System.out.println("2. Do a specific text analysis");
            System.out.println("3. Display Texts");
            System.out.println("4. Exit");

            int choice = readInt(scanner, "Choose an option: ");

            switch (choice) {
                case 1:
                    Text analysisResult = displayText(scanner, "Add text to analyze:\n");
                    System.out.println(analysisResult);
                    break;
                case 2:
                    // nested switch for sub-menu text analysis tools
                    Scanner scannerNestedScanner = new Scanner(System.in);
                    boolean extraTestRunning = true;

                    while (extraTestRunning) {
                        System.out.println("1. Word frequency finder");
                        System.out.println("2. Find frequency of specific character");
                        System.out.println("3. Find the number of unique words");
                        System.out.println("4. Return to main menu");

                        int extraChoice = readInt(scannerNestedScanner, "Choose text analysis tool (Enter number): ");
                    switch (extraChoice) {
                        case 1:
                            WordFrequency wordFrequency = new WordFrequency(displayText(scannerNestedScanner, "Enter the text to search through:\n").content.toLowerCase());
                            String wordToFind = displayText(scannerNestedScanner, "Enter the word to find its frequency:\n").content;
                            wordToFind = wordToFind.replaceAll("\\p{Punct}+", "");
                            //strip punctuation so it doesn't affect the word frequency count
                            System.out.println("Word frequency analysis for: " +wordToFind+ " -> " + wordFrequency.findWordFrequency(wordToFind));
                            break;
                        case 2:
                            CharacterFrequency charFrequency = new CharacterFrequency(displayText(scannerNestedScanner, "Enter the text to analyze:\n").content);
                            System.out.println("Character frequency analysis for: " + charFrequency.getCharacterFrequencyCount(displayText(scannerNestedScanner, "Which character are we looking for? Enter a character:\n").content.charAt(0)));
                            // Add your extra test logic here
                            break;
                        case 3:
                            UniqueWords uniqueWords = new UniqueWords(displayText(scannerNestedScanner, "Add text to count unique words:\n").content);
                            System.out.println("Number of unique words: " + uniqueWords.getUniqueWordCount());
                            break;
                        case 4:
                            extraTestRunning = false;
                            break;
                        default:
                            System.out.println("Invalid option for extra test.");
                        }
                    }
                    break; // Add this break to prevent fall-through from case 2 to case 3 in the main switch.

                case 3:
                    System.out.println();
                    displayTexts(texts);
                    break;
                case 4:
                    running = false;
                    break;
                    // Fall through to default case if needed.
                default:
                    System.out.println("Invalid option. Please try again.");
            }
        }

        System.out.println("\nFinal text list:");
        displayTexts(texts);
        scanner.close();
    }

I discovered that having nested switch statements is both doable and useful. I heard somewhere that this is often used in games and it's nice to have an understanding of how one might incorporate that.

Guys I seriously encourage you, put down the AI just for a few hours and fight with something. Your old self, those feelings you have been missing, they will return! Instant youth, almost guaranteed. XD

Tell me, what have you recently challenged yourself to build without using AI?

Engineering: Dreams, or Self-Actualization?

Anna Villarreal — Tue, 18 Aug 2026 23:55:01 +0000

At what point did you start to think you were an engineer?

An engineer. What a lofty, prestigious-sounding title!

I am not lofty or prestigious.

But I do question things.

Like why do people follow archaic procedures and thinking patterns, if there is a clearly better path? When you work in a school everything is sort of need-to-know only. So I don’t know why things are done the way they are done, until I plow through 20 brick walls.

Persistence answers yesterday's reasoning.

Today builds tomorrow.

I cannot stand it when people do not care. How could you not care about improving? You wanna sit there, following the same pointless protocol you have been doing for 15 years, just because that is what is being done? Please - someone needs to give a sh*t. I am surrounded by nincompoops. At previous employeers, I have always had questions, and the only people that could potentially answer are out of reach, typically. I have found meaning in helping the people that I interact with on a daily basis. The tiny sliver of help I can give them brings meaning to my life.

The person in the room next to me runs the laminator for everyone. This person was not present for months. I took it upon myself to learn how to use an industrial size laminator with no instructions, and no idea. It is not in my job description, and I hurt my hands doing it. The end result was many thankful people, curbing the sudden popularity of the single laminator at the beginning of the year.

I’ve had a weird itch that is unshakable, this weird thought: “Am I an engineer? What makes one an engineer? What are the defining characteristics of an engineer, and do I have this mindset?”

Today, while googling the truths about my own existence I came to realize the act of asking questions, and digging for answers backed by sound reasoning, is actually a very engineer thing to do. I laughed at myself when I realized this. But then I wondered, no, I’m not an engineer, I am a philosopher. Well, technically, anyone can have a philosophy. I’m going to end it there.

This thought pattern of thinking “Am I an engineer?” was sparked while working at a previous employer. I went poking around one day and discovered that my name was listed under “Engineering Team”. I did not point it out to anyone that I saw it, and no one told me about it, ever. I think my heart stopped beating for a moment. That simple moment of seeing my name on anything related to engineer felt staggering. Someone thought so much of me as to put me into such a category? What an honor. In case it was a mistake, I did not want to find out, and was not going to say anything because I liked it, and wanted it to stay.

My actual title was something like “Network Installation and Computer Technician Apprentice” or some such nonsense. Terminating cables outside in the freezing cold of winter with my bare hands, I definitely earned whatever my title was at the time. That is one of my last memories at that job by the way. Making less than $20,000 that year, I knew I took that job as my foot in the door to tech, IT, and one day, if I am lucky, maybe software engineering, if AI doesn't ruin my tiny plans.

I would certainly never claim to be an engineer, coming from an art and nutrition background, I am out of place. In Canada, they have strict requirements. In the USA, you can slap “software engineer” on a skeleton and people make memes about it. Does the title have meaning, actually? Further contemplation.

I have always been one to analyze myself, in the worst of times and the best of times. I learn the hard way, but the lessons I have learned in life in general, have given me the ability to be an unshakable tank, or dive 110% into something. This is a skill I have always had, but for much of my life, I was distracted, I was always chasing things that were weightless.

I started going to school again for many reasons, but mostly because I was bored with life. Frustrated at the lack of interesting things happening around me. This cannot be it, I am still certain there is more. I am forever a student. I have easily 8 years of college under my belt. Not to mention assorted other learnings.

I feel like I still know absolutely nothing.

I am only just beginning.

Im not sure what I am, besides present.

Jay Shetty states in his book How to Think Like a Monk that the only thing that is truly with you your entire life is your breath.

…If thats the case, then everything is a variable, and anything is possible. Perhaps one day, a woman with questions can be a lofty engineer.

Exploring Sentry: Reducing Load Time 🐢

Anna Villarreal — Sun, 09 Aug 2026 14:44:41 +0000

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.

🟣 It took a little bit getting used to understanding Sentry, learning how to navigate and what can be done. In my spare time over the last few weeks, I was able to do some poking around. I connected my page at annavillarreal.com since it has a fair amount of content coming in, to make it more interesting to analyze.

Investigation

I explored the dashboard, trying to figure out how to get readings from my traffic, which didn't take to long to figure out. I found traces particularly interesting. Why? Because this is where I discovered an actual performance issue.

A trace shows a 4,229ms pageload. Here's what's driving the slowness:

The critical path is sequential and bottlenecked at the server:

Span	Duration
browser.DNS	107ms
browser.connect	553ms
browser.TLS/SSL	281ms
browser.request (TTFB)	2,068ms
browser.response	1,052ms

Findings

browser.request at 2,068ms. This means that server took over 2 seconds just to start sending a response. That alone is ~49% of the total trace time.
Notably, browser.response at 1,052ms (slow download) consumes an additional ~3.1 seconds just in the request/response cycle.

The average for this pageload is ~194ms, so the server response time being 2 seconds is the primary reason for the spike. I really don't want a new user waiting 4 or more seconds when visiting my page, that's a long time, relatively speaking.

Understanding the Data

Using Seer, Sentry's built-in AI, I was able to quickly understand the information presented before me. It explained to me that:

The GET https://dev.to/api/articles call averages 361ms and hits 1.37 seconds at p95 — so it's consistently adding latency to your pageload, and on bad days it's the biggest bottleneck.

Googlefonts was also eating up some pageload time:

Ways to Improve

Instead of the browser fetching dev.to articles on every pageload, the backend can fetch and cache them. By serving the cached result to the browser, load time is reduced. Articles don't change every second, so a background cache refresh leaves users largely unaffected.
Keep the client-side fetch, but make sure it doesn't block the initial render. Load the dev.to content lazily after the page is interactive and use a loading skeleton so users see content quickly while articles load in the background. Note: This does not make the call faster but removes it from the critical path. Makes a pleasant experience for visitors viewing non-critical data.

Particularly Interesting Performance Feature

The p95 problem specifically is handled by proxy_cache_background_update + proxy_cache_use_stale: when the 15-minute TTL expires, the next visitor gets the existing copy right away while nginx refreshes behind them. Nobody waits on dev.to after the first fill, and if dev.to is down or rate-limiting, the blog section keeps rendering off the last good copy for up to a day rather than showing "could not load posts."

Changing the cache has a real impact, the data over the last week proves it. Looking at the javascript-microserver project's performance over the past week I see:

Overall pageload (p50) trend for annavillarreal.com/

Date	p50	p95
Jul 31	708ms	708ms
Aug 1	655ms	1.6s
Aug 2	2.1s	2.6s
Aug 3	2.6s	3.5s
Aug 4	3.3s	4.2s
Aug 5	1.3s	2.5s

That's a ~60% p50 improvement on Aug 5 vs Aug 4. Fantastic.

Why the Cache Matters

The page fetches articles via GET /api/devto, which internally calls https://dev.to/api/articles. Without caching, that server-side call to dev.to was taking anywhere from 74ms to 832ms depending on the day. In this current trace, GET /api/devto completed in just 90ms, which is well below even the best prior direct-to-dev.to call. It is now being served from cache rather than hitting the external API.
In this case, the cache particularly valuable because it insulates the page from upstream latency entirely, streamlining performance for visitors to the page.

Takeaway

I really enjoyed the challenge of exploring this tool and trying to make sense of it. I can definitely see how it could lead to massive performance optimizations for end users, as I experienced it myself. I am happy I found a performance issue before many users might have the bad experience of a slow page load. Gross!

🛻CSS Art: Smoothie Food Truck

Anna Villarreal — Sun, 09 Aug 2026 13:23:55 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

💠I was not sure I was going to enter this challenge at first, because I was not feeling inspired. I do not like to force things. Then I started to think a little outside of the normal. I remembered Space Fruit, a food vendor that is a favorite of mine to find at music festivals. Nothing beats an ice cold smoothie topped with frozen fruit bits on a sweltering, hot day. When you see Space fruit, you stop, and make a direct cut to their truck. You do not hesitate. So, after some nostalgia, I was feeling motivated remembering the days when I used to vend, selling my art and being an active member of the festival community.

Demo

Change preview zoom to .5

Here is a screenshot of it working on codepen, it might not be great on some devices:

I start each idea generally by blocking out the approximate size and shape of the object I want to add.
I use gradients, box shadows, and layering to add depth and dimension.
A smattering of javascript was used to randomly place stars and have them twinkle.
Found a way to imitate an LED strip with some fancy background gradient patterns.
Pushed myself to create a wrinkling effect on the tablecloth to imitate fabric.

Journey

⭐ I made a timelapse for you guys, so I'll leave that as my journey! It's sometimes hard to imagine how much work someone puts into something without evidence. A video will communicate this pretty quickly, plus it is also satisfying to see progress happen so quickly. The biggest challenge was getting the window cut out in the back of the food truck, so you could see the stars on the other side, just like in real life.

Code

Github Repo: cssart

Catbot Development Series

Anna Villarreal — Sat, 01 Aug 2026 16:13:32 +0000

Sequence of Articles Related to Catbot's Developement

Updated on an ongoing basis

DEV Weekend Challenge: Passion Edition Submission

Anna Villarreal

Jul 13

🐈Catbot: The Custom AI Harness That Lives on Desktop ᓚᘏᗢ

#devchallenge #weekendchallenge #ai #webdev

3 min read

The evolution from sketch to robo-leg

Anna Villarreal

Jul 25

🐈‍⬛Check Out Catbot's New Leg!

#ai #programming #learning #pet

3 min read

Summer Bug Smash: Smash Stories 🐛🛹

Anna Villarreal

Aug 1

Catbot: Custom Grammar Problem Fixed

#devchallenge #bugsmash #catbot #ai

10 min read

Catbot: Custom Grammar Problem Fixed

Anna Villarreal — Sat, 01 Aug 2026 16:03:02 +0000

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.

Overview

Sometimes we discover our limitations through a series of failures. We don’t understand why something is not working, despite having tried multiple improvements and optimizations. My desktop pet, Catbot, is no exception. I had issues with Catbot cutting me off or not letting me finish before it started talking. It would constantly tell me that I was calling it cat bought and not Catbot. This was an actual pain in the rear. Catbot would spend a lot of time explaining this to me.

I was able to tweak the listening window, so that Catbot would stop listening after a 1.5 second pause. This gives me enough time to finish my sentence, given my natural pauses and end of sentences. Controlling the pause gap helped tremendously. Going from .5 seconds to 1.5 seconds made all the difference in the world.

After adding a better layer of control to Catbot’s listening skills, I still had difficulties using Catbot’s name. It thought I was saying “Catfight”, “Cat bought”, and even “Lawrence” one time. This will seem brief to the reader but it was only after multiple sessions of frustration that I came to the realization that perhaps my webcam mic was not a great listening tool for Catbot - as it picks up all sounds in the room. After some quick googling, I was very convinced that a better mic would help. I popped on my fancy cat ear headset and not to my surprise, Catbot could understand what I was saying much better. We need to make sure we are using the best hardware for the job. My headset mic is a close range omni directional mic that does a good job leaving out all the background noise.

However, Catbot refused to respond to its name and would even argue with me! It would tell me that it wants to be called by it's actual name, Catbot. (Cat bot) So everytime I said its name, there was a debate and some long side tangent dialogue to follow. This was an awful experience.

THE BUG: Catbot not listening correctly.

DEMO

This is an interesting type of bug, not the typical software battle, but rather a conceptual bug. The type of situation where massive learning happens.

Much Ado About Graphs

I discovered that runtime graphs are not supported by vosk-model-en-us-0.22, which was the preferred, larger model. The training graphs were being ignored. Which means training Catbot on how I say “catbot” is ignored. This is an outrage. The decoding graph is pre-composed into one frozen file, and there is nowhere to swap a grammar into.

Transversely, a model that does support custom grammar is vosk-model-en-us-0.22-lgraph. However, It is important that we are not really adding custom commands, but controlling the output choices available. These feel like custom commands but they are better stated as custom directions, or disallow lists.

Catbot uses kaldi, which decodes against a single finite state transducer, HCLG, built by composing 4 layers: H, C, L, G. I will discuss the G layer.

G is the grammar / language model, which maps words to words. It assigns a cost to every possible word sequence. The decoder then picks a winner. A score is a negative log probability, and every arc in the graph carries weight, which add along the path. Negative log probabilities mean that a lower number is better, and adding costs is multiplying probabilities. Here is the english version:

Total cost =

Acoustic cost	Language cost
“How well do these phones match the audio frames?”	“How likely is anyone to say this sentence in the first place?”

Facts about the situation

Neither of these alone is useful!
The Acoustics can not differentiate “ice cream” from “I scream”. They are the same sounds.
The language model does not hear. The decoder searches for the sequence minimizing the sum, which is why an LM’s job is best described as scoring sequences.

But wait... why does this situation feel like Helen Keller? Because it's a similar situation.

In the real life story of Helen Keller and Anne Sullivan, there was a communication problem. An intermediary interface must bridge two completely different sensory and data modalities. In computer science, this is called multimodal alignment. This method is just like the tactile “finger-spelling” method that connected Hellen Keller to the world.

It was not until realizing I needed two different models to handle specific use cases that I realized this fundamental problem of having AI process real analogue data, which has now placed itself at the forefront of my curiosity and this project.

A simple table will help you wrap your head around this idea without needing to explain too much:

Element	Helen Keller	Anne Sullivan (The Teacher)	The Outside World
AI Role	Acoustics Model (Vosk)	The Alignment Interface (Your Code Pipeline)	Language Model (LLM)
Data Type	Raw sensory inputs (audio waves/frequencies).	The translator bridging two completely different modalities.	Symbolic language (written words/tokens).
Function	Perceives physical sounds but completely lacks semantic context or logic.	Maps raw physical acoustic patterns directly into structured text blocks.	Processes structured text tokens logically but cannot directly "hear" physical waves.

Let’s take a look at how words are “chosen”:

A state in G represents history, the last n-1 words, and each outgoing arc is a next possible word, weighted by -log P(word | history):

“The cat” –sat (cost 4.1)-->
–ate (cost 5.3)-->
–sad (cost 9.8)-->

…So basically words are chosen via likeliness. Catbot is not a real word, so catbot was never going to understand it as such, thus interpreting “Catbot engage” as “kappa engage” and other oddity phrases that would make sense to the model as it is trained.

I had Claude synthesize some phrases for me, and it proves the issue I am having plain as day.

SPOKEN: Catbot, engage.
1. conf 114.1 kappa engage
2. conf 112.1 cappa engage

Kappa engage (a.k.a. “Catbot, engage.”) is a vocabulary trap. There is no path through G that emits Catbot, so the decoder does the only thing it can, it finds the closest match to the sound of the word. This is why saying “Catbot” failed EVERY. SINGLE. TIME. This speech recognition bug lies in the grammar available. The word “Catbot” is not really an actual word. I made that up. This is an infinite impossibility.

Shortly before this deep dive, I told Catbot to respond to “CB”. This is English alphabet, real letters that have to exist. Catbot is now configured to respond to CB. When I say CB, it knows I am talking about it. Unmistakable. Functional. As a quick fix!

As stated previously, we can disallow the decoder to consider certain words, such as “kappa” as noted above.

If I say “Catbot, engage” without restrictions, the model hears “Kappa engage”. If we restrict the model, disallowing “kappa”, Catbot will hear “cat bot engage”. Since both “cat” and “bot” are commonly used words, they are available to the model.

As you can see, training an interactive voice model is a long journey full of mysteries. From bad hardware to understanding model boundaries, sometimes we can actually gain more, with less! (Less meaning removing words from vocabulary, in this case.)

And this can only be done by using the vosk-model-en-us-0.22-lgraph alongside vosk-model-en-us-0.22. This gives Catbot the tools it needs to respond in ways that make sense to custom words.

Code Samples

So then, I Implemented a dual recognizer into Catbot:

Catbot_voice.py


 44  KOKORO_VOICES = ROOT / "models" / "voices-v1.0.bin"
 45  VOSK_BIG = ROOT / "models" / "vosk-model-en-us-0.22-lgraph"
 46  VOSK_SMALL = ROOT / "models" / "vosk-model-small-en-us-0.15"
 47 +# Dynamic-graph model — the only kind that accepts a runtime grammar. A model
 48 +# that ships a pre-composed graph/HCLG.fst has no seam to insert one into;
 49 +# Vosk logs "Runtime graphs are not supported by this model" and decodes
 50 +# freely, which is worse than having no grammar recognizer at all. Detected by
 51 +# the presence of graph/Gr.fst (the language model kept as a separate file).
 52 +VOSK_DYNAMIC = ROOT / "models" / "vosk-model-en-us-0.22-lgraph"
 53
 54  SAMPLE_RATE = 16000
 55  BASE = f"https://localhost:{os.getenv('CATBOT_PORT', '8800')}"

and…

 102          return None
 103  RE_LEARNED_WAKE = _load_learned_wake()
 104
 105 +# ---- grammar-constrained wake/command recognizer ------------------------
 106 +# A SECOND recognizer decodes the same audio against nothing but the phrases
 107 +# below. It can't hear anything else, so "catbot engage" can't come out as
 108 +# "kappa engage" — that word doesn't exist in its graph. Anything Anna says
 109 +# that isn't a listed phrase decodes as "[unk]", which is exactly why this
 110 +# only ever SUPPLEMENTS the free recognizer (which still handles all
 111 +# conversation) instead of replacing it.
 112 +#
 113 +# Every word must be in the model's vocabulary or Vosk silently drops it:
 114 +# "catbot" is not an English word, but "cat bot" is two of them. That's the
 115 +# whole reason his name is spelled out here — _build_grammar checks each word
 116 +# against the model and logs anything it had to drop.
 117 +WAKE_NAME_FORMS = ["cat bot", "cat pot", "cat bought", "cat bottom", "cat but",
 118 +                   "catfight", "combat", "cabot", "kat bot", "cap pot"]
 119 +# what can follow his name (empty = just the name, which wakes him too)
 120 +GRAMMAR_TAILS = ["", "engage", "engaged", "wake up", "wake",
 121 +                 "are you listening", "are you there", "you there",
 122 +                 "go to sleep", "sleep", "stop", "stop listening",
 123 +                 "be quiet", "quiet", "shut up", "hush",
 124 +                 "open terminal", "close terminal", "approve", "skip"]
 125 +# phrases that stand alone, with or without his name
 126 +GRAMMAR_BARE = ["open terminal", "close terminal"]
 127 +
 128 +
 129 +def _build_grammar(model) -> str | None:
 130 +    """JSON phrase list for the constrained recognizer, filtered to words the
 131 +    model actually knows. Returns None if nothing usable survived."""
 132 +    names = list(WAKE_NAME_FORMS)
 133 +    # whatever wake_training.py learned from Anna's own mic counts too
 134 +    try:
 135 +        learned = json.loads((ROOT / "catbot_wake_variants.json").read_text())
 136 +        names += [w.strip().lower() for w in learned
 137 +                  if w.strip() and w.strip().lower() not in names]
 138 +    except Exception:
 139 +        pass
 140 +
 141 +    phrases = {f"{lead}{name} {tail}".strip()
 142 +               for lead in ("", "hey ")
 143 +               for name in names
 144 +               for tail in GRAMMAR_TAILS}
 145 +    phrases.update(GRAMMAR_BARE)
 146 +
 147 +    known: dict[str, bool] = {}
 148 +    def in_vocab(word: str) -> bool:
 149 +        if word not in known:
 150 +            try:
 151 +                known[word] = model.vosk_model_find_word(word) >= 0
 152 +            except Exception:
 153 +                known[word] = True      # can't check — assume fine
 154 +        return known[word]
 155 +
 156 +    kept, dropped = [], set()
 157 +    for phrase in sorted(phrases):
 158 +        missing = [w for w in phrase.split() if not in_vocab(w)]
 159 +        if missing:
 160 +            dropped.update(missing)
 161 +            continue
 162 +        kept.append(phrase)
 163 +    if dropped:
 164 +        logger.info("grammar: dropped phrases using words the model doesn't "
 165 +                    f"know: {sorted(dropped)}")
 166 +    if not kept:
 167 +        return None
 168 +    # "[unk]" is the escape hatch: it lets the decoder say "that wasn't any of
 169 +    # these" instead of forcing Anna's conversation into the nearest command
 170 +    return json.dumps(kept + ["[unk]"])
 171 +
 172 +
 173  # in-conversation commands
 174  PROVIDER_WORDS = {
 175      "claude": "anthropic", "anthropic": "anthropic",

As well as…


 470          # Lower CATBOT_END_SILENCE = faster to answer but more likely to cut you
 471          # off mid-sentence; higher = more patient. 0.65s is a good balance.
 472          self.end_silence = float(os.getenv("CATBOT_END_SILENCE", "0.65"))
 473 +
 474 +        # Second recognizer, constrained to the wake/command grammar above.
 475 +        # Runs on its own dynamic-graph model so the big model keeps handling
 476 +        # conversation with its full rescoring stack. Cost, measured: ~200 MB
 477 +        # of RAM and roughly DOUBLE the decode CPU (4.3 -> 8.0 ms per 62 ms
 478 +        # block) — the grammar shrinks the search, but a second acoustic model
 479 +        # still runs on every block. Still only 0.13x realtime, so it adds no
 480 +        # latency; set CATBOT_GRAMMAR=0 if that ever stops being true.
 481 +        self._grec = self._gmodel = None
 482 +        if os.getenv("CATBOT_GRAMMAR", "1").split("#")[0].strip().lower() \
 483 +                not in ("0", "off", "no", "false"):
 484 +            try:
 485 +                name = os.getenv("CATBOT_GRAMMAR_MODEL", "").split("#")[0].strip()
 486 +                gdir = ROOT / "models" / name if name else VOSK_DYNAMIC
 487 +                if not (gdir / "graph" / "Gr.fst").exists():
 488 +                    logger.warning(
 489 +                        f"grammar recognizer OFF: {gdir.name} has no dynamic "
 489 +                        f"graph (graph/Gr.fst) — runtime grammars need one")
 490 +                else:
 491 +                    # keep the Model referenced for as long as the recognizer
 492 +                    # lives (the binding only borrows its handle)
 493 +                    self._gmodel = vosk.Model(str(gdir))
 494 +                    grammar = _build_grammar(self._gmodel)
 495 +                    if not grammar:
 496 +                        raise RuntimeError("no usable grammar phrases")
 497 +                    self._grec = vosk.KaldiRecognizer(
 498 +                        self._gmodel, SAMPLE_RATE, grammar)
 499 +                    logger.info(f"Grammar recognizer ready ({gdir.name}, "
 500 +                                f"{len(json.loads(grammar)) - 1} phrases)")
 501 +            except Exception:
 502 +                logger.exception("grammar recognizer failed to load — "
 503 +                                 "continuing with the free recognizer only")
 504 +                self._grec = self._gmodel = None
 505 +
 506          self._kokoro = Kokoro(str(KOKORO_ONNX), str(KOKORO_VOICES))
 507          # warm up the TTS so the FIRST spoken reply isn't slowed by cold-start
 508          try:

So basically, both models run in parallel, as two arguments, against the same regexes. The grammar model helps with commands and the bigger model is used for more conversational interactions. This effectively makes Catbot a more efficient desktop companion. It is now much more pleasant to hang out with Catbot.

Learning

This entire project, it's all learning, all new territory. Tuning Catbot's ears is a real challenge. I had an awakening about hardware limitations, and an enlightening experience about why different models are used and for what purpose. Since I cannot recompose the larger model with new grammar, I can use the lgraph model on the side to handle custom needs more gracefully. When I made the connection to Helen Keller, I understood the whole situation from a very global perspective. It's not really something I could fully understand without diving into chaos.

Thank you for checking out Catbot's progress!

🐈‍⬛Check Out Catbot's New Leg!

Anna Villarreal — Sat, 25 Jul 2026 01:40:56 +0000

This is fun. I absolutely must share.

So I recently created a desktop pet, called Catbot. Catbot is voice activated and has memory in an obsidian vault that it shares with models of choice as needed. Catbot is a harness that feels like a pet. I quickly built Catbot a body using AI and was excited to see the result was a furry creature with a robotic leg, which I had asked for. This worked for messing around and building Catbot to start. Here are some images I generated with ai in a previous week, just to catch you up to speed:

Awkward initial rendering needing refinement

A high level mock technical drawing generated by Gemini I used to generate Catbot's original body

Original Catbot appearance.

But that badly represented robotic pet leg was getting on my nerves. I knew it had to be better. In the back of my head I was like you know what, it needs a way better leg. I let it fester in my head for a while. Then finally, I couldn’t take it anymore. The next moment of free time I sat down and drew up what I thought a robotic pet leg might look like. I drew this quickly, in about 15 minutes or so. I was happy with the overall idea, and believed it made sense. Here is my drawing:

My original drawing

After creating the drawing, I knew that I had to have multiple views to have enough data for ai to create a working prototype. I gave my drawing to Gemini using the following prompt:

“I created this robotic cat leg and I need some good technical drawings of top, side view, front view and back. Can you make me a good technical drawing I can use to share my idea? “

And having luck previously with a different type of schematic (the original Catbot) I knew that this would at least produce something marginally workable. I was absolutely blown away by the mock schematic it produced for me. It is freaking beautiful, exactly what I wanted!

Nice looking technical drawing by Gemini.

I then gave the schematic with a detailed description to opus for creation using existing Catbot architecture, (using three.js) to create the fantastic leg for me. It did a pretty good job!

I’ve added a video so you can see an interaction with Catbot. It’s entertaining until it frustrates you. Work in progress for sure. LOL. It was difficult to get Catbot's opintion of it's new leg:

Catbot is a brat. Do not give your AI pet sass. (You know, unless you can deal with it.) 😂

And let's not forget where we started:

Catbot the first.

Catbot the second.

So I guess this latest Catbot, is Catbot the 4th.

Has anyone else created an AI pet?

FLUX on a 4070 Graphics Card 🖼️

Anna Villarreal — Sat, 18 Jul 2026 14:32:08 +0000

Preliminary

In the past, I have tried a few things to get local video and image generation to work to my satisfaction. I was irritated for a while that my older macbook didn’t have an M chip because I know you can do some cool stuff with Ollama. But I am not buying a computer every year. That’s unrealistic and wasteful. One of my recent stunts involved trying to get fable to setup a workflow on comfyUI. While that’s novel and impressive-looking, the output was poor at best and I was not amused. Node confusion, half of them in languages I cannot read. I already have too many projects, I’m not about to decipher foreign languages on the fly or watch 30 node handling videos on Youtube over the course of 3 months. Time is a real factor here.

With the 3rd extension of free fable use I’m squeezing every last drop out of it. I’m not wasting it either - I’ve got it dropping all kinds of notes to my vault so I can reproduce things on my own later. And honestly, that’s serious real world value for my workflow.

Before I ramble, I must give credit to Youtuber Richard Aragon for sharing his magnificent google colab notebook. I stumbled into this whole process on accident looking for videos about quantization in an effort to know more about what the eff is quantization really. Little did I know this attempted deep dive would lead me down a path to resolve a personal problem of local generation. By the way, he mentions being able to do this on a 4060, so guys, all is not lost if you have a little bit of patience and good timing. I have come to find out that as developers we have unparalleled patience. So then, this post is for you. If I can save a single person from massive frustration, then I have done my job. It is better to share than to hoard. Because, like Richard Aragon, I would much prefer to share and help. <3

Start Your Own Workflow

Here is Richard’s Youtube link and the google colab is in the notes: AI Quantization Easily Explained

What is really amazing is that I discovered I can use a quantized model locally and train it on my own content. As an artist, I was extremely curious to see how AI might create images for me in my art style. Mission accepted!

Here is EXACTLY what I did with no shame:

❤️ I gave Fable the link to the google colab notebook, explaining what I was trying to accomplish. Fable fetched the data from the notebook and created it locally - a private copy of the workflow for me to modify as I wish.
🧡 Using the 34GB base model from Hugging Face, I am now able to train it on my own images to create my own style. This is accomplished by using a LoRA file which acts as a “lense” that attaches to the base model. This means that you can train it to have many lens (styles!) on your local workflow. In his video, Richard uses pieces from the late Alphonse Mucha (Famous artist if you haven’t heard) to train the model. The results were on point, and even after quantization they still held enough data to hold onto most defining characteristics. Using this knowledge, I ran the same tests as him for a control.

One test without training.
One test with training.

💛 After testing, I knew the structure was in place for experimentation. The first thing I needed to do was to create a folder with my artwork, 14 images, and a metadata.jsonl file. (made my first jsonl file from scratch yesterday, cool haha). This metadata pairs the description of the image to the actual image so FLUX can interpret it for training.

Demystification

Here is essentially how we get a 12GB card to handle a 24 GB model. I’ve simplified the terminology for learning and demystification purposes:

💚 Shrink/Quantization Specifically 4-bit NF4 quantization (NormalFloat4), done by the bitsandbytes library. "8-bit" and "4-bit" refer to how many bits store each model weight.

🩵 Freeze/Parameter-efficient fine-tuning (PEFT), specifically LoRA (Low-Rank Adaptation). The base model's parameters are frozen, so you train small low-rank adapter matrices instead.

💜 Precompute/Embedding caching and and latent caching.

🩷 Right-size/No single fancy word Memory footprint management: lower training resolution, batch size 1 with gradient accumulation, gradient checkpointing (recompute instead of store), and an 8-bit optimizer. Each trades a little speed or precision for a lot of memory.

No fancy UI at the moment (...already have plan for that 😂) but using the terminal and running the python script afterwards with optional parameters offers additional flexibility of image generation.

Here are the generations from my first local tests

Control 1 - untrained

Control 2 - Alphonse Mucha

Training 1 - 100 step artwork (fast, minutes)

Test 1 - 100 step artwork (EVERFLUO style)

Training 2 - 700 step artwork (over an hour)

Test 2 - 700 step artwork (EVERFLUO style)

Much closer resemblance to style.

Test 3 - Ran EVERFLUO style with very custom prompt to see limitations, needs work/additional training to be extra fancy.

Pushing model outside of training to see what happens.

What about video?

I was able to piggy-back off of the pre-existing image generation setup to build a video generation workflow. I am currently taking a stab at a 5 second video on the 4070 on one of my paintings. It's going to be at least an hour and I will update this post.

Here is the first video!

On that note, I'll survive another year without a 5090, maybe XD.