DEV Community: Anna Villarreal

🐝 Real-Life Debugging Story + Home Network Analysis: Peekyport 🫣

Anna Villarreal — Sat, 16 May 2026 16:44:11 +0000

There is, for the second time in a month, a yellow jacket in the basement. You know what else is in my basement? My favorite machine.

The first time this happened, it was early and I was getting ready for work. I saw something moving on my bottle of heat-protectant spray. It looked like a really fat caterpillar, but it had wings. I sat there for a second pretending like nothing was happening. It was distracted by the smell of the heat protectant.

I slowly turned off my hair straightener and set it down, backing away semi normally. (Ladies, who hasn't done their hair in front of their device. 😂) I realized that this was not an average bee. This was not a regular puffy bumble bee, or a sweat bee, or a honey bee. This bee looked like it was a soulless attacker.

I alerted my boyfriend immediately. I did not want anything bad to happen to him while he was sleeping. These yellow jackets attack for no reason. While I was at work, he picked a fight with the yellow jacket and thankfully won. I was so scared for him. The following morning, I saw a dead yellow jacket inside my computer case. 😭

That sounds like 2 yellow jackets so far. After a month passes, I am sitting there minding my own business and BAM, another one! I saw it just barely land on the top of the bookshelf out of the corner of my eye! I think to myself: "**** this, I am moving out!"

My boyfriend got traps and crack sealer for the basement, seeing my state of petrification. They have been setting out for a few days. But he went to work and could not save me until he came back. (Yes, it is save the princess when there is a direct threat buzzing around.) Therefore, I must stay up on the second floor. I am not moving until I see a dead bee. I have not been in the basement and I absolutely refuse to go down there until there is undeniable evidence.

But my computer is in the basement...

My 7-year-old mac is no match for my 2-year-old custom desktop. I must use it. But how? I had one of those moments where a tiny lightbulb went on. I wanted to get to a specific project of mine so I could share the tiny excitement with everyone.

Remote Access for the win

I remembered that I installed a remote app on my phone so I could see my pc screen whenever and wherever. (LOVE that btw). Since it's all synced through google anyways, I was like well hey, let me pull that bad boi up! Like butter, I see my pc desktop. I messed around with it but my pc desktop is much wider than my laptop, so it wasn't a perfect situation. I discovered I couldn't record my pc screen while remoting in from mac. I tried it a few times with no luck. (What's up with that?)

Then I remembered I had made a shared folder for my local network. (Just to prove to myself I knew how at the time.) I saw that it was still there. Ah! So this is what networking is really for! To save us from ourselves and evil bugs!

So then, I copy over the project folder of interest to shared location, and then put a copy on my macbook. So, as you likely know, we can not just open up a project and run it on mac, if it was built on a windows pc. There is some convertabobbing involved. I had copilot CLI do the fantabulous converting.

All of this so I could share:

Project Peekyport

It's a home network analysis and organization tool that I am building from scratch. Well, yes from scratch but ai-assisted because I am just learning Java. Which btw Java appears to be more verbose than Python and Ruby I am also finding. Why do I have to tell you it's a string? Python and Ruby are not like that. I digress.

App Name: Peekyport

Tech used:

JavaFX
Nmap
tshark
Custom CSS
Draggable topology
Local storage
and an interface to connect your router of choice.

This is not a web app. It is a thick-client JavaFX network tool with direct OS integration and minimal dependency footprint. I made it over-the-top with "levels" to represent the floors in a building. One can place nodes around and get a better idea of what your topology actually looks like!

I built this because all the cool-looking tools are not free, and I wanted an engaging one. This is by no means perfect or a finished product, but I wanted to share my excitement.

Quick Layout Overview

Before Peekyport becomes interesting, we need to scan the network in question. You can run a lightweight scan that covers only the most common ports, or a deep scan which would take much longer. A light scan is adequate for tinkering purposes. When the scan is run, I created a visual console display so the actual scanning can be seen in real time with a progress bar. The visual feedback is nice to clarify that things are actually happening. Bonus: it looks cool.

Here you can see a scan in progress in Peekyport:

After scanning your network, nodes will display in the central area in the Topology Tab. With each node you can edit:

Name
Category
Group
Floor Number
Shape and color to differentiate items
Upload images to help you additionally identify

Connect to your router by navigating to the router page and entering the details.

Connecting your router, scanning your network, and comparing it to your wireshark packets gives you a good peek into possible security holes. This allows a user to draw actionable insights for tightening things up on a home network. Being careful with what you are exposing ensures you are less prone to security issues.

Cool! Now having our basic network topology from the grass-roots network scan and our router connected to allow more specific details, we can run a small wireshark scan and import the saved pcap file. About 2,000 packets or so should give you enough to poke around with. 🤔

Heading to the Web Traffic Tab, we select a packet capture for analysis.

Here is a screenshot of the per device traffic activity after upload:

Depending on your scan and what network you are connected to, you will see the corresponding devices. On a wifi network scan, you will only see wifi links. If you run a scan connected to ethernet directly, you will choose "hardwire" in the link view. If you do not have the right one selected, you won't see the links because they do not exist. Makes sense.

I really, really like the network topology link visualization. I feel like I can gain a much better understanding by see what devices speak to each other, through what ports, and how much. Now I can confront household memembers when they overtake the network bandwidth, with my new network facts. Empowering, isn't it? 😂 JK, my bandwidth has actually not been a problem thanks to dynamic quality of service.

Network safety by severity is found in the safety tab:

This provides a snapshot of home network security. Many internet users do not have the need or resources to have a fancy enterprise grade network solution for their home. This app empowers a single individual to investigate their home network with a home router, keeping data secure by running it locally.

For everyone

This app pulls web traffic together with IP addresses, mac addresses, and conversations between these addresses to gain insights about what can be addressed to improve security. It's super nice to be able to monitor traffic in such a specific modular way, with each device and all of is ports listed.

It makes learning about your home network fun and de-mystifies the seemingly intangible network activity for all. I think every home network should have something like this.

For the future

I am struggling a bit with the drag and drop interface, it behaves in an unexpected manner and there is a lot of weird layering and processes happening if other processes happen. It was so bad at one point I was about to trash the whole thing. But I have been powering through it, and I am slightly less frustrated although it's still not great. The data part is working gracefully. I will continue to fight with the UI until I am satisfied. (So, no end in sight for the foreseeable future. LOL)

What network analysis tools have you built? Comments, tips, questions?

Thank you for reading my tiny story. 💜

Circuits: Bit-Banging, SPI, and CPLD

Anna Villarreal — Thu, 14 May 2026 22:53:39 +0000

TLDR: A small exploration of the use case of hardware over software.

"Bit-banging" ...what?

Apparently, bit-banging is when you are trying to do with software what should be done with hardware. What an entertaining thought. Has anyone done this? I would love to hear your story.

This is that area in computer science where software developers probably start to stick up their nose. Circuit? Excuse me? 😆 Leave that to the hardware engineers.

Guys, we have to play nice and communicate here. Did you know that when it comes to development, some argue there is up to 7,000 communication protocols globally? In all fairness, most of us only use a handful. But still, if you can handle the vast majority of communication protocols for web development, surly you can handle the small amount that exist in hardware. The focus is on one today: SPI.

SPI - Serial Peripheral Interface
A four-wire, high-speed, full-duplex protocol for synchronous communication between microcontrollers and peripherals.

In one of my classes, we had to come up with a project where we implemented a PLD into a circuit. I looked into use cases for such a thing, and discovered a CPLD is very useful in cases where timing is absolutely critical, or else the system would dysfunction.

I happen to be a big fan of programmable LEDs.
It is entirely possible to wire an ESP32 directly to an LED strip, but there are a lot of problems with connecting directly, and I have witnessed them in person. Challenges with the ESP32 include:

It runs a multitasking operating system, and interruptions from wifi can disrupt timing precision.
If the timing is off, the LEDs will display the wrong colors or glitch.
Inconsistent timing resulting from this could lead to the wrong colors displayed.
Disabling interrupts would also drop wifi packets, leading to intermittent connectivity and exacerbating the problem.

And returning to the concept of bit-banging...

This is probably one of those topics that software engineers should pay closer attention to. Some things are best left to hardware. The bit-banging software approach to handling the circuit introduces more inconsistent timing due to wifi, timer, and serial port interrupts. The timing must be nearly perfect for it to work as expected. Bit-banging can lead to high CPU usage for moderate reliability.

THE SOLUTION

So what can be done to run our multitasking OS alongside a fluid light show? We can fool the audience by offloading the timing-critical LED driving to hardware. The ESP32 talks to a CPLD (complex programmable logic device) through a serial peripheral interface. In this arrangement we have a wire for data, clock, select, and ground. I was very excited to learn about how these connections all work, so I made a diagram that represents the physical connections between each set of circuits.

This gives a high level understanding of our circuit structure. The CPLD takes the serial data from the ESP32 controller and uses memory to store the information. A pulse generator will also be built as part of the CPLD to make sure that we do not have timing issues. A unique feature of the SPI protocol is that it allows data to be transferred without interruption. This is the really important part. Instead of doing an internal eye roll over performance issues, I would encourage you to try it out. With these boards you don't even need to solder. You just connect the pins, like adult legos. Easy-peasey.

Now, the speed of data transfer is determined by the frequency of the clock signal. This means that we can make the lights change faster or slower by controlling the frequency of the clock. Cool. A faster clock speed means LEDs will update more frequently, and a slower clock speed will make them update in a slower manner.

Let's Talk Real Life

In real hardware, code is written to describe both parts of the CPLD. The synthesis tool converts it to actual logic gates and flip flops. The CPLD contains both the SPI receiver and the pulse generator (which controls the timing).

A nice board that could be used in a project like this could be the Altera MAX II EPM240 CPLD Development Learning Board that I found online. In the picture below, we see the top row of input pins with the GND and +5V on the very right. The programmable logic of the CPLD happens inside of the central black square. On the bottom, a row of output pins is aligned.

Might have to try this out and see what happens. Am I stepping into the unseen madness that is hardware? It is uncertain, but very curious indeed Mr. Watson.

You know you are a coder couple when...

Anna Villarreal — Sun, 19 Apr 2026 11:29:18 +0000

Are there many coder couples out there? It presents unique opportunities to poke around with things. Take this morning for example...

I ask my significant others bot for advice about weather or not to wake him. His bot replies with unwavering logic, as usual.

Anyone else with a tech savvy partner? I would love to hear your stories. (Or give me ideas.... shhhhhh! Haha.)

He has since rolled over, in an attempt to access my track pad in his sleep. I can see revenge is eminent. 😂

I Love Watching the Storms Roll In

Anna Villarreal — Fri, 27 Mar 2026 02:06:12 +0000

I have always liked the weather radar. First of all, it's rainbow. Second of all, the weather is mysterious and constantly changing. I like the visual aid of seeing what's about to head my way, and making the connection of what the radar looks like versus what is happening outside. I am not a meteorologist. I am a curious observer. I've been building this fun and simple app for myself and to share with students to get them excited about science and weather. Hey it's storm season after all!

I've included the live stream of one of my favorite storm crew's when they go live - the ya'll squad. I obviously take no credit for any of their videos, but I enjoy shoring it with others.

I am using publicly available API keys of free services like NOAA/NWS for radar images. I am Using another free one for air quality information. I hope to set up a weather bug or something of the sort so we can have live data for our location, potentially sharing our data for the greater good. This is one of my latest side projects. Just wanted to share the fun colors.

What weather related apps have you created? I may look into some other radars, but this one is working and I am happy with it for now. If you would like to see the actual site you are welcome to visit it on github pages here:

annavi11arrea1.github.io

SECRET: Click the "Weather Station" title at the top to use it in your location. Let me know what you think!

SIDE NOTE: The video only plays when the stream is live. Otherwise, it displays current info.

The Ultimate Job Finding-Management Tool

Anna Villarreal — Tue, 24 Mar 2026 03:05:20 +0000

I need to go to bed but I want to share my excitement before I crash. I built a tool finally to help me find jobs. I save the description and have ollama check the alignment with my current skills, which gives it a star rating of 1 to 5 stars. This list is then sorted.

Now I can easily collect relevant jobs and apply to the ones that are most aligned to my skill set!

This is a chrome extension built quickly with copilot CLI and local ollama. Fighting automation with semi automation! Haha.

Full view option

Extension pop-out

This was both fun and exciting! I'm probably not done playing with this, I really like it a lot. I have future plans for sure.

I love it also because it's neon and fun and completely personalized.

What do you think? Have you tried something like this?

Edit 3-25-2026:

You guys have me so flattered! It convinced me to take action. I made a database version on main and a local storage version on dev which you are welcome to branch/fork and poke at if you really want to lol.

You guys are literally awesome. Thank you for making my day.

If you like it, give it a star! <3

Repo: Job Seeker Repo

Path of Discovery

Anna Villarreal — Tue, 17 Mar 2026 01:12:55 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

A bit personal, a bit all over. Sharing pieces of my uncomfortable journey in the working world.

Illusions of Society

Why is there a glass ceiling if a woman must pay as much as a man for things?

I make 20% less to my male equivalent, but life expenses are the same (if not more if you include the “pink” tax) as what the man would pay. In 2023, that number was precisely 21.8 percent according to this source.

I was once told to not get fat because I'm “not married yet”.

At one of my first jobs, the person that interviewed me told me he thought I was going to be Mexican. Since I look white, you would never guess I was half Mexican.

At a place where I had training, a peer asked me: “Why would anyone want to hire you? You don’t even have a computer science degree.” I looked at the person, knowing that I had built a computer, repaired many others, and he did not. Everything I knew to that point was largely self-taught. What an arrogant fool. I said nothing, because I had nothing productive to say to him at that moment.

Does not having a C.S. degree negate the 10 + years of other work experience? Am I completely incompetent because I hold a science degree currently, not in computers?

I once had an IT position where the clients were often surprised that I was not a man. I was a tomboy as a kid, but sheesh.

This article briefly summarizes some of the benefits of diversity in the workplace.

Diversity should be embraced, not avoided.

Productivity Buffs

If I must work, I want to do something I like.

I used to think programming was for some smart people in a distant land way over there —------------------------------->

A recent book I read called “How to Think Like a Monk” by Jay Shetty, reminded me that everything is a variable. The only thing that is truly with you your whole life is your breath. If that’s the case, then anything is possible. My current financial status, my relationships, everything, variable.

There is no task too difficult that cannot be achieved by small, easy to digest steps. (Thank you Monks) This must be how reverse engineers think.

Reverse engineering. That sounds cool. I purchased a reverse engineering book from the local bookstore and added it to my pile of growing programming books, somewhere between my CompTIA A+ book and SQL Programming Guide. One day.

I do not know where I am going, but I know that I am building. Since I have changed my thinking and begun to get a better grasp of the briefness of human existence, I have been able to put aside all the things that do not serve me (for the most part) and pay attention more to those things that will help take me places to achieve my goals. Learning programming and computer science the last three years has allowed me to stop focusing on all of my supposed problems and slightly uncomfortable reality, and focus on things that are more productive.

General Life

Some people have written about how coding jobs can be stressful, and while I can see that, I’m a workhorse with a non-existent social life. Pretty sure I’d be right at home. (I have had my fair share of social-butterflying.)

I wake up, I go to work, I come home and go to my remote class, I work on projects, I have my daughter on the weekends, I help my parents with random house things (you know, simple woman stuff like repairing the garage door in the freezing cold and family cybersecurity… mom… why did you click that… -.-)

Despite society trying to stuff me into some cute little predefined bundle, I have been just about everything but the expected.

I’ve avoided developing a wrinkle on my forehead by actively trying to not frown my whole life. Some call this OCD. Some call this determination.

Closing Statements

You decide what matters. You set the bar. Make sure you always ask the question: “According to whose standards?” Is it your standards, or someone else’s? Do you blindly follow, or do you think for yourself? Every being should have the freedom to express themselves and live their life in a way that suits them so long as it does not cause harm to others. Help actually, if you are able. <3

Our challenges make us stronger when we come out the other side. Do not be mad the universe gave you challenges, but instead thank it for seeing you as a worthy champion.

Dream/Nightmare: What Kind of Malware is That? 🥶

Anna Villarreal — Sat, 07 Mar 2026 13:10:43 +0000

Another computer dream!

Backstory: The previous day, I had experienced chaos in an environment where many users were receiving emails from a hacked account. This was from a person that many people knew and trusted, however an external account. (Red flag!) The point is basically that non-techies do not have the skills needed to keep themselves safe. If you recognize the name, how likely are you to just trust and click?

If it invokes immediate panic or uncertainty... DO NOT CLICK! --> This is what they want!

I literally got a nightmare from this. Hundreds if not thousands effected. Infected devices. Spread unknown.

The hard truth is that we cannot save people from themselves.

The Dream 🌌

Looming over my own desk, I see a terminal open. I am aware that someone is on the other side. I do not know what they want. I try to befriend them, and of course it doesn't work. After some back and forth communication, I knew this person was weird.

Suddenly, a download starts happening in my browser.

PANIC

I abruptly stop and cancel the download. Another one pops up, followed by another. I can see the percentage completion of each download with a tiny progress bar, and who knows if that was even accurate. Could be a game to make me close the one that looks the most downloaded first, leaving the other ones actually downloading. The more I click, the faster more appear at the top of my browser, trying to download to my computer! More and more kept appearing until they spread nearly all the way across.

I couldn't keep up. I started to actually panic. I ran to the back of my pc, ripping out the power cord and ethernet cable. They can't touch me if there is no connection, right?

I paused for a moment, shocked (no, not electrocuted, LOL). I couldn't believe what just happened.

Not having a computer anymore, I just hopped on over to my boyfriend's PC. The first thing I sense is that person in the terminal again. I could feel the evil laugh a million miles away. The downloads started again. This became a double panic because now I have jeopardized my boyrfriend's PC. What will I tell him I did to his computer? Being responsible for destroying someone else's important things is not a scuff I want on my relationship.

My heart sank, and I felt stupid and useless. Then I FINALLY woke up.

Have you had strange computer dreams? This post is a safe space for sharing. Also, if anyone can give me any insight as to if this is a real world scenario or not, I'd love to hear from your experiences or knowledge! Love you all!!

📨 Pop-out Messaging Extension: Dev Whisper

Anna Villarreal — Sun, 01 Mar 2026 21:39:45 +0000

This is a submission for the DEV Weekend Challenge: Community

This is the fastest I've ever made something functional.

- b r e a t h e s -

The Community

For the past couple years, I have actively used dev as a resource. Learning, discovering, and trying things way out of my league. Because of this, I have learned more than I would have on my own with no other support. When you enter the realm of web development and you don't really have anyone close to you doing it, it's the wild west. Dev has provided a place for all walks of life to learn and push forward to discover new things. For this reason, I chose Dev as my community!

The one thing I noticed about dev is there there was no p2p chat. I thought it would be cool if users could send simple messages together about cool projects, ect. If the chat is implemented by way of an optional extension, then we are never forcing people to deal with the chat. It's truly a personal decision.

Thinking from a community standpoint - I wanted to include all the meme monday memes inside the gif picker in the chat. YES you can probably find your meme you posted 2 months ago. This way, I'm using community data, for the community, to continue enhancing the experience.

What I Built

A free open source messaging app for dev members to communicate with each other without having to share personal information. It's shipped as an extension but has a pop-out option for ease of use.

Demo

Code

AnnaVi11arrea1 / dev_messages

3rd party messaging app that works with Dev.to

Dev.to Messages (Unofficial 3rd Party Extension)

A Chrome extension that adds private direct messaging to Dev.to, with built-in link safety, spam reporting, and a first-contact approval system.

File Structure

dev_messages/
├── manifest.json          MV3 manifest
├── background.js          Service worker – updates unread badge
├── content.js             Injected into dev.to – detects user, adds Message buttons
├── popup.html             All UI views & modals
├── popup.css              Dev.to-inspired styles (380px popup)
├── popup.js               Full SPA app logic
├── js/
│   ├── storage.js         chrome.storage.local wrapper
│   ├── eligibility.js     Dev.to API eligibility check
│   └── linkSafety.js      URL spoofing detection + safe renderer
└── icons/                 16 / 48 / 128 px PNG icons

Features

Feature	Details
Account eligibility	Checks `joined_at` & `articles_count` via the Dev.to public API. Account must be at least 30 days old and have at least 1 published post before sending or receiving messages.
First-contact approval	When someone messages you for the first time,

…

View on GitHub

Meme Search Implementation

Arguably, the most important feature. XD

I wanted not to just pull in the memes, but to allow a user to search them. The best way I figured was to use the alt tags as search parameters. Many of us are nice enough to put alt tags on our stuff, and so I was able to leverage that to get a sort of lazy search going. Hey, it works. I thought that was a little cool and different so that is the snippet I'll be sharing below:

/* gifPicker.js – Fetches meme images from Ben Halpern's Meme Monday posts,
   including every image posted in the comments (community memes). */

const GifPicker = {
  _cache: null,

  async fetchImages() {
    if (this._cache) return this._cache;

    /* ── Step 1: collect all Meme Monday articles ─────────────────────────── */
    const articles = [];
    for (let page = 1; page <= 6; page++) {
      try {
        const res = await fetch(
          `https://dev.to/api/articles?username=ben&per_page=100&page=${page}`
        );
        if (!res.ok) break;
        const data = await res.json();
        if (!data.length) break;
        for (const a of data) {
          if (/meme\s+monday/i.test(a.title)) articles.push(a);
        }
        if (data.length < 100) break;
      } catch { break; }
    }

    /* ── Step 2: collect images with dedup ────────────────────────────────── */
    const seen   = new Set();
    const images = [];
    const add    = (url, title) => {
      if (!url || seen.has(url)) return;
      seen.add(url);
      images.push({ url, title });
    };

    /* Cover images first so they appear at the top of the grid */
    for (const a of articles) {
      if (a.cover_image) add(a.cover_image, a.title);
    }

    /* ── Step 3: fetch all comment threads in parallel ────────────────────── */
    const commentThreads = await Promise.all(
      articles.map(a =>
        fetch(`https://dev.to/api/comments?a_id=${a.id}`)
          .then(r => r.ok ? r.json() : [])
          .catch(() => [])
      )
    );

    for (let i = 0; i < articles.length; i++) {
      this._extractImages(commentThreads[i], articles[i].title, add);
    }

    this._cache = images;
    return images;
  },

  /* Recursively walk comment tree and pull every <img src="…"> with its own alt */
  _extractImages(comments, articleTitle, add) {
    for (const comment of comments) {
      const imgTags = (comment.body_html || '').matchAll(/<img([^>]+)>/gi);
      for (const m of imgTags) {
        const attrs  = m[1];
        const srcM   = attrs.match(/src="([^"]+)"/i);
        const altM   = attrs.match(/alt="([^"]*)"/i);
        if (srcM) {
          const alt = altM?.[1]?.trim() || articleTitle;
          add(srcM[1], alt);
        }
      }
      if (comment.children?.length) {
        this._extractImages(comment.children, articleTitle, add);
      }
    }
  },
};

How I Built It

I very quickly realized that I was going to need a secure database so users could keep their chat history. I'm using Neon's free tier for this project. Give it a whirl! XD. Requests from the extension go to Vercel over HTTPS. Vercel connects to Neon with an encrypted connection. The database is never exposed to the internet, and it is only queried by Vercel's serverless functions.

I used copilot CLI to quickly build up a working template - I would not be able to build something so quickly without it. This is not my first chrome extension, but it is the 'fanciest' one I have made to date.

I tested with my unpacked files in the google chrome extensions. I was lucky enough to test functionality with another dev user. That was amazingly helpful. A big thank you to @trickell for being awesome.

I had fun making a settings and options area for users which includes colors and text sizes for increased accessibility.

Features:

Created with the mindset of reducing spam and annoyances

Account eligibility - Checks joined_at & articles_count via the Dev.to public API. Account must be at least 30 days old and have at least 1 published post before sending or receiving messages.
First-contact approval - When someone messages you for the first time, you see a banner with their opening message and must hit Approve or Deny before the conversation unlocks.
Flag / report spam - Every incoming message has a 🚩 button. Clicking it opens a reason picker (spam, phishing, harassment, inappropriate, other) and marks the message as reported.
Link spoofing detection - Before any link opens, LinkSafety.isSpoofed() compares the visible URL text against the actual href hostname. A red alert is shown if they differ.
Link safety warning - Every link in every message routes through a warning modal that displays the full destination URL before opening it in a new tab.
Local storage persistence - All conversations, approvals, flags, and user data are stored in chrome.storage.local. The extension must be installed and active to read messages.
Unread badge - The extension icon shows a live unread count, updated by the background service worker whenever storage changes

My extension is getting reviewed by google currently... whish me luck! haha

A user must have the extension to test it. Guess I've made myself a guinea pig haven't I. (hides, 😅)

ASCII Whisper: Local P2P Chat with Sound FX and Battleship

Anna Villarreal — Wed, 11 Feb 2026 00:29:42 +0000

This is a group submission for the GitHub Copilot CLI Challenge

What We Built 🧙🏼‍♂️💁🏼‍♀️

We created a P2P chat that runs on your local network. We enabled a “video feed” capability in the terminal by translating the image from your device camera into low resolution ascii with a certain number of “frames per second”. Python reads camera data and translates it into approximate values. This is then displayed in the “video” stream. This is how we have video in the terminal without fancy packages.

ASCII Whisper is:

Simple
Effective
Fast
Secure
Fun for all ages!

Contributors:

@trickell 🦑 John
@annavi11arrea1 🦄 Anna

Tools used:

Github Copilot CLI
Ollama
Python
Pillow
Rich

You are welcome to take a tour of the code on Github. We had SO much fun making this project. There were many gut-busting laughs during development, especially when making sounds. 🤣 John managed the implementation of chat sounds and in-game sound effects. This was done using Python.

🦄 I specifically remember going under my desk in the basement for better sound recording on my cell phone, and trying to artistically whisper “ascii” into the phone. I haven’t done too much work with custom sounds, so my recording studio consists of my cell phone and desk. John proceeded to gaze with amusement. The energy was returned when I saw him positioned under a blanket next to a wall whispering repeatedly “whisper” into his phone. I could not stop laughing, it was extremely entertaining to say the least. 😂

When you open the app, you will hear our hand crafted intro: “a-s-c-i-i w-h-i-s-p-e-rrrr” 🍃

What you see when you launch Ascii Whisper

You enter a user name, select some color options, and then wait for the other person to connect. You will see a preview of your video feed momentarily while you wait for the other person to connect.

Waiting for the other person to connect

Demo

While creating the demo video, the excitement and ridiculousness nearly brought us to tears from laughing.

Contributions

🦑 John added useful in-chat commands.

Commands include:
/help
/ping (John cannot stop laughing, that is my voice)
/battleship
/manual
/togglecamera
/theme
/togglesound

(Yes that’s right, you saw battleship!)

🦑 John also worked on sounds and display layout, polishing up the camera display and adding color themes to choose from. Copilot was used to create basic methods for using sounds, from which John was able to add additional sounds by analyzing the structure in place.

@trickell (John Here!) I just wanted to chime in about the sounds and how much fun I had making these work in the code. So sound_manager.py is using subprocess for mac sounds and *winsound * for windows to play the sounds and threads to keep them actively going as the application is running. In a previous time in my life, I was a sound engineer so getting to create and play with the sound design for the game with Anna, I found that we had a lot of laughs in the creation of quirky and fun sounds using words and throwing some effects on it.


    def play_battleship_start(self):
        """Play sound for battleship game start."""
        if not self.muted:
            thread = threading.Thread(target=self._play_sound, args=(self.battleship_start_sound,), daemon=True)
            thread.start()

    def _play_sound(self, sound_path):
        """Play a sound file using OS-specific methods."""
        if not os.path.exists(sound_path):
            # Sound file not found, silently skip
            return

        try:
            system = platform.system()

            if system == 'Windows':
                self._play_sound_windows(sound_path)
            elif system == 'Darwin':  # macOS
                self._play_sound_macos(sound_path)
            else:  # Linux
                self._play_sound_linux(sound_path)

        except Exception as e:
            # Silently fail - don't interrupt application if sound fails
            pass

I also wanted to touch on the commands. I'm someone who when using applications like vim, nano, github copilot, love the ability to run commands while in the application. When that was missing, I knew something was off about the app because the first thing I wanted the ability to do was alert someone, mute sounds, and exit without having to ctrl-c out of the app. Thus commands happened, and several were born. It makes being inside the app more user friendly.

Copilot helps set up the sound manager.

Debugging video stream with new color themes
🦄 I spent a lot of time getting the “video feed” to work locally, the battleship game complete with trash-talking ai, and user manual. We both contributed to the “voice acting” 100% original noises for your amusement.

Testing on one device

You can test Ascii Whisper on a single machine. Once you have it downloaded or a copy of the project, open two terminals. Then navigate to the project folder.

Start the host with: python main.py –host –device
You may or may not need to include the device id depending on your setup.

Start the client with: python main.py –connect localhost –device

If you are starting the client on a different device on the same network:
python main.py –connect –device

Battleship Game

🦄 When you type the /battleship command, it starts a game of battleship in the chat. Each player places their ships and the game begins. The player that goes first is determined by a dice roll.

Example of battleship game play.

After every turn, the game board is updated and displayed in the chat to help you plan your next move. If there are many lines of chat and the map has disappeared, you can use the /map command to display it once again. If you are feeling very lost, the /manual command will pop open a simple .txt file with instructions in a separate terminal. This way you can keep it open while you play.

Here is a preview of the manual:

Detailed user manual for Ascii Whisper included!

Our Experience with GitHub Copilot CLI 👾

Github Copilot CLI was an amazing tool for helping us develop our plan. When you have an idea, it can be a large task getting something minimal up and running. We were able to get a minimally working version in a short period of time. We knew what we wanted, and Github Copilot CLI got us started on the right foot. This is a very large project to completely write out by hand. But we were able to accomplish a lot in a short period of time. When we ran into issues, Copilot was often helpful at writing out tests for debugging.

🦄 For example, when I was suddenly running into issues with my camera being detected, I asked Copilot why my camera was not displaying anything. I learned from copilot that I may need to provide a device id, and that this is a simple configuration step depending on a user's setup. Cool! I simply started using –device after finding out what device I should be using.

🦑 Copilot was also very helpful when John was adding custom sounds into the battleship game. The sounds were “nested” in the game in the wrong place and Copilot helped him relocate the code to the correct places. This was a bug that occurred after I had added the ai trash-talker.

Links:

Repo: Ascii Whisper

We would love to hear your feedback! Thank you so much for reading!

An Al-go-llama Adventure

Anna Villarreal — Wed, 04 Feb 2026 03:35:52 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

Hello Everyone!

As an event vendor for 5 years, I know that it can be hard to find events you are looking for. You need to sell at places with your target audience.

It would be really nice to have a natural conversation about what you are looking for, rather than querying hard parameters all the time. It is possible to discover even more opportunities with natural language models. It makes it much easier for the exhausted business owner to say "Find me events to vend at this April near Chicago". Instead of typing, checking, toggling, whatevering-- a bunch of fields.

So let's output some related findings for the very tired Miss Bosswoman CEO!

By the way guys, I've been working on this project here and there through time. This Algolia search intelligent chat bot is a wonderful feature.

Demo

How I Used Algolia Agent Studio

I took this opportunity to learn about Algolia and implement it into one of my projects: GoVend, Connecting vendors to events.

Implementing my first intelligent chat assistant was a challenge for sure. Initially, I set up an Algolia agent with Gemini.

“Carl”, the agent I created in Algolia, would take user queries and find related events in the available data.

You can choose what attributes should be searchable on each index. An index is a group of data on Algolia. For me, I had an “Events” index, which included things like name, date, city, etc. I left most of them on to improve searchability.

Example chosen index in algolia

I explored Algolia’s MCP Server integration. It was fairly straightforward, and I was getting excited about it. By assigning tools to agents, we can build them to be more accurate and useful.

And then of course...

I ran out of API requests as usual. I pushed the envelope a bit here with an Ollama wildcard.

I first connected local Ollama (model: llama3.2:latest)to my app and got that working with my local data.

Why Fast Retrieval Matters

I integrated Algolia's Search API with llama3.2 for natural language event discovery. Users can ask questions like 'Find events in Chicago' and get intelligently formatted results. Algolia's powerful search combined with Ollama's natural language understanding is a winning scenario.

Natural language event search powered by Algolia's search API

I realized that maybe having a fallback method for searches was a good idea to handle errors in production. Llama3.2 will be able to find some event data no matter what.

I used enhanced Algolia search capabilities by using:

Zipcode Detection
Geo-Location Search
- Geocodes the zipcode to latitude/longitude
- Uses Algolia's aroundLatLng geo search
- 50km if query includes "near", "nearby", "close", "around"
- 100km default radius
Distance Display
- Shows distance in miles for each event
- Sorted by proximity automatically
Combined with Time Filters
- Can search "events near 35801 this spring"
- Combines zipcode + seasonal date filtering

Example Queries:

"Find events near 35801"
"What's happening close to 90210 in June?"

Highlights that Align with Algolia’s Standards:

Unique Ollama Integration
Error Handling
Graceful fallback system
Clear logging and debugging
No breaking when services unavailable
Natural Language Processing
Extracts locations from queries
Understands user intent
Aesthetically pleasing results formatting
Real-World Problem Solving
Faced API limits (common in production)
Built resilient solution

The Future:

This was an interesting journey for me, lots of exciting tiny wins, and a couple long drawn out learning experiences. I like that Algolia allows you to configure multiple agents in the background. One day when I stop running out of API requests, I’d like to do a little experiment and have multiple agents talking to each other and see where that ends up.

Repo: GoVend ai_beta

Mystery Resolved: Switching Repeatedly from WSL to PS - Issues

Anna Villarreal — Mon, 02 Feb 2026 12:29:53 +0000

After having previously built an Ubuntu server, I am a little bit more fond of using WSL instead of PS in Windows. Feeling like I am "getting by with something" using linux commands on a windows pc. It's a nice little feature.

But, I ask, what is all of that power good for if you are repeatedly running into super annoying unresolvable permission issues? I have gotten around this somehow until I started using antigravity. Being excited, I installed the new IDE and decided I was gonna do my linux nonsense on there too.

The annoying mount issue rears its head, of course. (Yes I know wizard, should have been a read flag) I proceeded to try to use it anyway. No one is exactly over hear showing me how to stay out of messes. I misuse things, fall on my face, and share it so you don't have the same issue. Grit is one of my superpowers.

Fast forward through over two years of coding like this, and having gotten around it by using things like codespaces or running everything sudo. (Yes I know, I'm banned) XD

The fix: literally 5 minutes of reading.

I should have delt with this before.

I simply had to properly mount WSL before entering my code editor. All I had to do was open a terminal, switch to WSL in said terminal, and type 'code .' This opens your code editor with your projects mounted properly, resolving all permission issues and "things not installed" issues.

What it should NOT look like when you start:

Improperly mounted WSL

What it SHOULD look like:

Properly mounted WSL

HAPPY MONDAY!

Deployed Profile to Google Cloud via AI Interface in Antigravity

Anna Villarreal — Tue, 20 Jan 2026 03:00:10 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hey there.

I have been learning web development for the last few years. To date, I have created a few variations of my portfolio, none of which ever made it to deployment. I am excited for this opportunity to share the latest rendition of my portfolio website in all of its glory.

I have a background in art and I personally like styling. I wanted to translate a little bit of artistic edgy flare without going too terribly wild. That's a bit of a tough one for me. User-friendly this, attention-grabbing that. I wanted to represent myself, and I am not a well defined black and white object. No, I'm more of an ethereal purple and windy blue.

Now presenting for the first time ever, a semi respectable portfolio website: Anna Villarreal

Portfolio

How I Built It

So, I initially had this portfolio laid out in Ruby on Rails. But I hadn't deployed it anywhere. I always felt like something was missing.

Here is screenshot of the previous UI:

Old UI. Good, but not excellent.

When this challenge popped up, I thought it was a great excuse to get my app deployed finally. I also wanted to convert it to a react app, implementing a mobile-first approach. I just really wanted an "app" that would translate well no matter where you were looking at it from.

New tools and approaches I used for this project included:

Antigravity
Google Cloud CLI
Google Cloud Run
Deploying my project within Antigravity by telling the built-in AI what to do!
Tailwind (I usually don't use tailwind because I enjoy styling.)

I had the built-in AI in Antigravity read the repo of my original project. Then I had it translate Ruby on Rails into a react app. (I think that's pretty slick!) I told it which color palette I wanted to stick to and the general mood I wanted for my page. I continued on with a massive amount of tweaking. I really wanted originality, so I crafted an SVG for my background in illustrator. I used an image I generated from midjourney to make the nav bar come alive as well.

What I'm Most Proud Of

This is the most effective profile to date I have created. (Again, actually deployed it. LOL) This profile website balances my whimsical internal artist while keeping the UI and functionallity at the center for users. I am happy with this being my first deployed profile website.

I was really excited to discover that I could deploy my project to Google Cloud Run right from within Antigravity! It was SO FAST. No hours of debugging, at least for me. After a few minutes of prompting, success! Fastest. Deployment. Ever.

And the app itself is fast!

After I was happy with how my app was looking, I simply ran:

I installed Google Cloud CLI:

As someone who has fought with deployments for literally days in the past, this is basically a jaw-dropping experience. Overall, I am happy I tried out the new Antigravity IDE as well as the deployment to Google Cloud Run from within it. And my app is alive! Yay! XD

I couldn't tell you how exciting it was to see this message back from AI:

DEV Community: Anna Villarreal

🐝 Real-Life Debugging Story + Home Network Analysis: Peekyport 🫣

But my computer is in the basement...

Remote Access for the win

Project Peekyport

For everyone

For the future

Circuits: Bit-Banging, SPI, and CPLD

You know you are a coder couple when...

I Love Watching the Storms Roll In

The Ultimate Job Finding-Management Tool

Path of Discovery

Illusions of Society

Productivity Buffs

General Life

Closing Statements

Dream/Nightmare: What Kind of Malware is That? 🥶

The Dream 🌌

Share

📨 Pop-out Messaging Extension: Dev Whisper

The Community

What I Built

Demo

Code

AnnaVi11arrea1 / dev_messages

3rd party messaging app that works with Dev.to

Dev.to Messages (Unofficial 3rd Party Extension)

File Structure

Features

Meme Search Implementation

How I Built It

Features:

ASCII Whisper: Local P2P Chat with Sound FX and Battleship

What We Built 🧙🏼‍♂️💁🏼‍♀️

Contributors:

Tools used:

Demo

Contributions

Battleship Game

Our Experience with GitHub Copilot CLI 👾

Links:

An Al-go-llama Adventure

What I Built

Demo

How I Used Algolia Agent Studio

Why Fast Retrieval Matters

Highlights that Align with Algolia’s Standards:

The Future:

Mystery Resolved: Switching Repeatedly from WSL to PS - Issues

Deployed Profile to Google Cloud via AI Interface in Antigravity

About Me

Portfolio

How I Built It

What I'm Most Proud Of