<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anna Villarreal</title>
    <description>The latest articles on DEV Community by Anna Villarreal (@annavi11arrea1).</description>
    <link>https://dev.to/annavi11arrea1</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1467610%2F6ede9a19-775f-483a-b3b8-2bb47e8f954b.jpg</url>
      <title>DEV Community: Anna Villarreal</title>
      <link>https://dev.to/annavi11arrea1</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/annavi11arrea1"/>
    <language>en</language>
    <item>
      <title>👾 🧚🏼‍♀️Maximizing Fable for Life Admin</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Sat, 04 Jul 2026 12:31:09 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/maximizing-fable-for-life-admin-c62</link>
      <guid>https://dev.to/annavi11arrea1/maximizing-fable-for-life-admin-c62</guid>
      <description>&lt;p&gt;TLDR: The most powerful AI on the planet, only a few days of access. Maximize it.&lt;/p&gt;





&lt;p&gt;I'd first like to give credit where it's due: &lt;a class="mentioned-user" href="https://dev.to/trickell"&gt;@trickell&lt;/a&gt; - Thank you for sharing Network Chuck's youtube video with me. The reference video is found here guys if you missed it: &lt;a href="https://www.youtube.com/watch?v=YC77Lb_cN6c" rel="noopener noreferrer"&gt;Network Chuck's Video on Fable&lt;/a&gt;&lt;/p&gt;





&lt;p&gt;I first started by creating a nice template for tech documentation for personal use. It created a beautiful piece of work in about 5 minutes - something I could easily expand on in the future. Here is what it generated for me with after a one or two careful prompts:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9rn97tebs0lfvnda6lp2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9rn97tebs0lfvnda6lp2.png" alt="tech docs by fable" width="800" height="589"&gt;&lt;/a&gt;&lt;/p&gt;
Clean UI, Easy Navigation! Created this personal reference guide for studying for CCNA (Network Chucks Summer of CCNA)



&lt;p&gt;Wanna see it? It lives here: &lt;a href="https://techdocs.annavillarreal.com/" rel="noopener noreferrer"&gt;Techdocs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But after learning about the true span of Fable's power, I started asking the serious questions, the ones that are life-changing. How can I increase my quality of life based on my resume, experience, and current life circumstances? I wrote about 2 pages of life issues that needed fixing - you know the stuff that slowly eats away at your soul, like student loan debt and people that are challenging to work with? Yes - I told it my biggest issues and instructed it to give me actionable plans that are free or low-cost. Even fable told me that this was a lot. 😅&lt;/p&gt;





&lt;h2&gt;
  
  
  Getting Organized
&lt;/h2&gt;

&lt;p&gt;Knowing the scope of my own problems I knew that my thoughts and processes had to be organized. Luckily for me, I remembered I had a good place to do that. A place that Fable could connect to and place documentation in place for me with checklists, notes, summaries and actionable plans. That app is called Notion, and some of you may have heard of it. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv42f8yc3g8lmkemcpwb2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv42f8yc3g8lmkemcpwb2.png" alt="Notion documentation to reference later" width="799" height="289"&gt;&lt;/a&gt;&lt;/p&gt;
No one is going to organize your life for you, no one, except for AI







&lt;p&gt;I couldn’t think of a better place for lightning fast critical life-admin documentation on the spot. And I can tell you, this integration works like a charm, and I highly recommend it. For a busy person with a million ideas, this is great.&lt;/p&gt;





&lt;h2&gt;
  
  
  Anxiety Relief
&lt;/h2&gt;

&lt;p&gt;I had a tremendous amount of anxiety about my pending student loans. After bringing things to light with Fable, I realized that even though I am forced to make payments, it would be entirely manageable. I had massive fears about this because of all the ongoing litigation. Fable helped me think clearly through this - and I found the solution that would best work for my particular position it would seem.&lt;/p&gt;





&lt;h2&gt;
  
  
  Future Hope
&lt;/h2&gt;

&lt;p&gt;I fed it my resume, my linked in, my server website. I told it my struggles about finding work although feeling quite capable. It made me realize something. Even though Junior dev positions are a wasteland at the moment, fable was able to reframe my current position for me in an elegant manner. &lt;/p&gt;

&lt;p&gt;Direct copy from fable: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You are not "a junior dev in a dead market." You are a hybrid: IT support + full-stack dev + technical writer with a real audience + CCNA in progress + self-hosted infrastructure experience. Pure junior dev roles are brutal right now, but hybrid roles are NOT&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;… monumentally wicked powerful outlook rescoping!&lt;/p&gt;

&lt;p&gt;In less than an hour, fable has given me a greater peace of mind, hope, and actions I can work on right now to improve my life and the life of those around me. If you haven’t messed with fable, times a-ticking, go do it now.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>mentalhealth</category>
      <category>productivity</category>
    </item>
    <item>
      <title>👾 Server Access Logs with GoAccess</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Sun, 21 Jun 2026 23:49:41 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/server-access-logs-with-goaccess-333d</link>
      <guid>https://dev.to/annavi11arrea1/server-access-logs-with-goaccess-333d</guid>
      <description>&lt;p&gt;Part 1: &lt;a href="https://dev.to/annavi11arrea1/self-hosting-experience-with-jetson-orin-nano-and-ollama-5a9c"&gt;Self-hosting on Jetson Orin Nano&lt;/a&gt;&lt;/p&gt;





&lt;h3&gt;
  
  
  👽 Jetson Orin Nano Web Server Follow-up 👽
&lt;/h3&gt;

&lt;p&gt;Cool! Now that the mini web server is up and running, how can I see web traffic easily? I discovered GoAccess recently, which is a free and open source tool for checking out server logs in real time. There are two way to view it. At first I was happy to just see nicely-parsed server logs in the terminal. Ahhhh, organization! It gives you a bunch of interesting stuff to look at.&lt;/p&gt;

&lt;p&gt;Here is what the terminal view looks like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flav1ura1myngxxin6gtk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flav1ura1myngxxin6gtk.png" alt="goaccess terminal view" width="800" height="327"&gt;&lt;/a&gt;&lt;/p&gt;
Dats cool







&lt;p&gt;You know, inviting traffic to a webserver invokes anxiety. Having half an idea of what is happening helps ease tension for sure. I was really excited to find this tool. You can open go access in the terminal to display different information with different views. I will leave the explaining to the official documentation found here: &lt;a href="https://goaccess.io/get-started" rel="noopener noreferrer"&gt;GoAccess Docs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But the web developer in me was super excited to find a very human-readable html version readily available. Using a reverse proxy through nginx, you can view all the stats on a web page locally. It also allows you to pick a theme and customize how the information is displayed. Be sure to check out the settings and chart options!&lt;/p&gt;

&lt;p&gt;Here is what the html view produces:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7g6a2pcn65uppscfl944.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7g6a2pcn65uppscfl944.png" alt="goaccess html view" width="799" height="399"&gt;&lt;/a&gt;&lt;/p&gt;
Stats for silly hoomins.







&lt;p&gt;Idk about you, but this is my super exciting find for the day.&lt;/p&gt;

&lt;p&gt;I think my next step is to connect an agent that reads the logs and alerts me on set parameters.&lt;/p&gt;

&lt;p&gt;I'm interested to hear what tools all of you use to enhance web server monitoring?&lt;/p&gt;

&lt;p&gt;What's the best agent for web analytics, in your opinion?&lt;/p&gt;

</description>
      <category>security</category>
      <category>webdev</category>
      <category>learning</category>
      <category>linux</category>
    </item>
    <item>
      <title>⚡️Self-Hosting Experience with Jetson Orin Nano and Ollama 🦙</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Sat, 20 Jun 2026 19:02:46 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/self-hosting-experience-with-jetson-orin-nano-and-ollama-5a9c</link>
      <guid>https://dev.to/annavi11arrea1/self-hosting-experience-with-jetson-orin-nano-and-ollama-5a9c</guid>
      <description>&lt;p&gt;Part 2: &lt;a href="https://dev.to/annavi11arrea1/server-access-logs-with-goaccess-333d"&gt;GoAccess Logs&lt;/a&gt;&lt;/p&gt;





&lt;p&gt;I don't know where to begin. This is a long story, but it all started when I saw that DEV was having a ‘finish-it--up-a-thon’. I was instantly interested, with a particular project in mind. I’ve been working on govend on and off since 2024. It’s something I started in a web developer apprenticeship. When I first ‘launched’ this ‘minimum viable product’ I was so proud of it. Every line of ruby, written by me. - No assistance from AI. The nokogiri web scraper implementation,  figured out all on my own. It was ugly and I had issues with dates not saving properly in the database with the scrapers. Only recently after deciding I was going to finish my project did I address this. If I am going to ship I refuse to ship slop if it is within my knowledge and power. This is the latest before and after shot I have here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fzevtipby4i57ubc46xxz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fzevtipby4i57ubc46xxz.png" alt="before and after" width="799" height="300"&gt;&lt;/a&gt;&lt;/p&gt;
Before on the left, after on the right







&lt;h3&gt;
  
  
  Figuring Out Requirements
&lt;/h3&gt;

&lt;p&gt;I really gave myself an undertaking. I didn’t realize how much work I had left to do. Given other priorities I was sadly not able to participate in the DEV challenge. But it gave me the itch of motivation I probably needed. The biggest part of this challenge for me was to successfully self-host my app locally. I’m using AI and I did not have a personal 'server' on my local network. I had everything running off other services… render, neon, vercel, heroku, github pages. &lt;/p&gt;

&lt;p&gt;I quickly realized that I had a problem when I wanted to use AI in my apps and allow users to use the AI. One of the issues I ran into is that AI cloud servers are expensive. Another issue I ran into is connecting cloud services to a local agent. In my govend app, I created a chat interface a while back where users can talk to ollama and ask about events during certain dates, or to find events by location. This was easy to do locally, I had ollama reach out to algolia with the users request, and bring back related events. But I want to do this… not on my personal computer.&lt;/p&gt;

&lt;p&gt;I must admit all of this is a scary leap for me, but a necessary one. I looked into methods of affordable self-hosting and after some digging, I was convinced that the Jetson Orin Nano was the answer. It’s designed to handle AI tasks on small models. Good enough for my use case. And I was really liking how it was a one-and-done situation, no need to buy external little this-and-thats. I’m already doing a big new undertaking, don’t wanna complicate it. I’m not gonna spend $100 or whatever it is now a month on a cloud ai server - I’ll spend a few hundred and be done. (For now, evil laugh)&lt;/p&gt;

&lt;p&gt;What I actually got:&lt;/p&gt;


&lt;ul&gt;

&lt;li&gt;Nvidia Jetson Orin Nano Developer Kit&lt;/li&gt;

&lt;li&gt;Pack of USBs&lt;/li&gt;

&lt;li&gt;nvme hard drive&lt;/li&gt;


&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj3x1beo43jju1lhllngx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj3x1beo43jju1lhllngx.jpg" alt="jetson orin nano" width="800" height="1067"&gt;&lt;/a&gt;&lt;/p&gt;
Jetson Orin Nano



&lt;h3&gt;
  
  
  Tips
&lt;/h3&gt;


&lt;ul&gt;

&lt;li&gt;After seeing some posts online and speaking to some people, I steered clear of even bothering with an SD card. I’d have to recommend you do the same if you go this route. I have zero regrets.&lt;/li&gt;



&lt;li&gt;They have some good documentation online for setup, and it’s pretty straightforward when all the stars are aligned. But let me tell you how they weren’t.&lt;/li&gt;



&lt;li&gt;So, depending on the current configuration of your nano, it will likely need updates at boot. The updates must be allowed to run for compatibility reasons. No problem. &lt;em&gt;However,&lt;/em&gt; the screen I was using for setup was something the cat dragged in... &lt;/li&gt;






&lt;h3&gt;
  
  
  Drama Begins
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fukr1vd7sl8ae99hqchia.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fukr1vd7sl8ae99hqchia.jpg" alt="what the cat dragged in" width="800" height="1067"&gt;&lt;/a&gt;&lt;/p&gt;
Issue-laden monitor - This is a monitor that was mounted in an RV and dragged across the country. It was then abandoned by a family member which I made quick use of. It was then given back, and then abandoned again. It has loose pieces inside that rattle, the bezel is missing, and it decides when and where it has a problem. I was excited to connect it so I could play with my nano.







&lt;p&gt;So that little piece of information that pops up and says ‘enter yes to continue’, I never saw that during my first attempt. I kept retrying over and over, never seeing the screen I needed to see. &lt;/p&gt;

&lt;p&gt;I’ll tell you why:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If my monitor is already on and then I plug in the nano, the screen goes into sleep mode and hibernates, within 1 second of me plugging it in. It goes to sleep while the nano is still booting.&lt;/li&gt;
&lt;li&gt;By the time I press the button on the screen to wake it back up, the nano has already passed a crucial input moment, so I never saw it! &lt;/li&gt;
&lt;li&gt;The only reason I found this to be the case was because I started reading through troubleshooting with a fine tooth comb. I figured out I was waiting for an input screen I was never going to see because of timing. And yes I did look into the monitor settings, no hope there.&lt;/li&gt;
&lt;/ul&gt;





&lt;p&gt;At some point, I finally got the thing to boot by plugging in the orin nano and pressing the button on the monitor at the exact same time. Things started loading, packages zipping across the screen, general excitement. And then, I waited. For like, half an hour. Is it broken? What is happening? General panic. &lt;/p&gt;

&lt;p&gt;After what seemed to be rough 45 minutes to an hour, I pulled the plug. Something didn’t seem right. I carefully plugged in the nano and pressed the monitor power button at the same time. It booted, and asked me for a login. Login? What login? I haven’t made a login? That usb became read-only afterward, so I couldn't reformat it normally. I ended up using a different usb for the installer.&lt;/p&gt;

&lt;p&gt;Now armed with the knowledge of the scope of my personal problems, I create a new usb, ready to battle with peripherals. It works correctly when you both know what your problems are and how to handle them. &lt;/p&gt;





&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fy51fdn399grx68o0wprv.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fy51fdn399grx68o0wprv.jpg" alt="tiny server" width="800" height="1067"&gt;&lt;/a&gt;&lt;/p&gt;
Got a mini hdmi cable so I could get rid of the obnoxious pile of a screen I was using prior. Way better!



&lt;h3&gt;
  
  
  Learning Self-Hosting
&lt;/h3&gt;

&lt;p&gt;In the days (weeks?) that followed, I got everything setup. I learned how to self host my own apps on the nano. Having cleared out all of my heroku’s and render’s I had a small pool of domain names at my disposal as well. I spent a few days really trying to get govend to a proper state so I could share my app and help vendors and artists find events to vend at and manage their events in one place. As a vendor of 5 years I know this is needed. Small businesses are the wild west and don’t have too many specialized tools. I really wanted to see it come alive. I could spend forever on it, but I have to make it available at some point. &lt;/p&gt;

&lt;h4&gt;
  
  
  1 Ollama for 2 apps
&lt;/h4&gt;

&lt;p&gt;I also cleaned up my flippy card app that uses ollama for the generation of flashcards, a memory game, and self quizzes. I am able to use a single ollama instance for both of my apps. How awesome is that? And basically, since my database is separated from supporting services, my web server is basically just a little connecting hub for apps and services. Pretty cool! I think its relevant to insert here that AI can be a security nightmare if you don't button stuff up. &lt;/p&gt;

&lt;h4&gt;
  
  
  Learning Security
&lt;/h4&gt;

&lt;p&gt;I learned about securing things, using proxies, and closing unused ports. I asked a couple trusted people to take a peek at my app and I had someone run a scan on it before sharing with their bot as a security measure. I openly admit I had not considered the ai security too heavily, and things were found and addressed. It’s interesting to be fairly confident about an app and then AI throws a wrench into everything. I did not anticipate all the time that has to be spent on security. Massive learning experience, and had me groaning at my server towards the end.&lt;/p&gt;

&lt;h4&gt;
  
  
  Fast Build from Experience
&lt;/h4&gt;

&lt;p&gt;I installed claude code and used it to help me build out a server ‘hub’ page quickly, where I share some live apps, blog posts, and relevant links. After a carefully chosen prompt it built quickly with my aesthetic in mind. I proceeded to tweak it, adding a carousel to the projects section on top so it would look different from the bottom blog section. I pulled in code I used in previous projects to let Claude know what I was trying to do. Having built a bunch of stuff prior, it made constructing this page incredibly simple.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fn3kzrz83of4zw938jbzu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fn3kzrz83of4zw938jbzu.png" alt="new server hub" width="800" height="687"&gt;&lt;/a&gt;&lt;/p&gt;
Look at the tiny server go!







&lt;h3&gt;
  
  
  Security
&lt;/h3&gt;


&lt;ul&gt;

&lt;li&gt;I took the feedback of hermes and fed it to claude to quickly implement solutions like rate limiting and endpoint security. On too many attempts, the account will lock for a timed period. I discovered so many security vulnerabilities quite frankly I'm embarrassed to admit. The part that is not so embarrassing is that I was intelligent enough to check myself before sharing.&lt;/li&gt; 


&lt;li&gt;The app I really wanted to highlight here was govend, but honestly, I’m kind of gushing over my “server hub page” I created as a result of all this. I have been making little ‘profile’ apps here and there throughout time, each one better than the last. I decided instead of a profile page per say, I wanted a central hub to find all things related to me, the developer. Not a resume or profile. Just a ‘hub’. My microserver. Welcome, and thanks for looking. I built this.&lt;/li&gt;



&lt;li&gt;AI helped me implement and identify baseline protections, and I treated security review as essential. I learned about including a security.txt file for bug reporting. A fellow member has a nice article about security.txt: &lt;a href="https://dev.to/route06/what-is-securitytxt-and-how-can-it-help-improve-website-security-3kij"&gt;security.txt article&lt;/a&gt;
&lt;/li&gt;


&lt;p&gt;I would have to say a large part of cleanup involved making sure everything is secure as possible. &lt;/p&gt;

&lt;h4&gt;
  
  
  Here is a breakdown:
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;I added rate limiting, progressive lockouts, and CAPTCHA hooks.&lt;/li&gt;
&lt;li&gt;Added Security headers&lt;/li&gt;
&lt;li&gt;Added Content Security Policy, Removed the unsafe-inline and unsafe-eval directives from script-src, and removed architecture leaks.&lt;/li&gt;
&lt;li&gt;Responsible disclosure - Created /.well-known/security.txt with contact email&lt;/li&gt;
&lt;li&gt;I configured the server firewall. Initially, I was having issues getting it to work, and then I discovered that there was a table compatibility issue I needed to address. Addressing security alone was added another day or two.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://annavillarreal.com" rel="noopener noreferrer"&gt;annavillarreal.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What do you think?&lt;/p&gt;


&lt;/ul&gt;
&lt;/ul&gt;
&lt;/ul&gt;

</description>
      <category>ubuntu</category>
      <category>nvidia</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>🐝 Real-Life Debugging Story + Home Network Analysis: Peekyport 🫣</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Sat, 16 May 2026 16:44:11 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/real-life-debugging-story-home-network-analysis-peekyport-a10</link>
      <guid>https://dev.to/annavi11arrea1/real-life-debugging-story-home-network-analysis-peekyport-a10</guid>
      <description>&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;I slowly turned off my hair straightener and set it down, backing away semi normally. (Ladies, who &lt;em&gt;hasn't&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;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. 😭 &lt;/p&gt;

&lt;p&gt;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!"&lt;/p&gt;

&lt;p&gt;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 &lt;em&gt;save the princess&lt;/em&gt; 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. &lt;/p&gt;



&lt;h3&gt;
  
  
  But my computer is in the basement...
&lt;/h3&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h4&gt;
  
  
  Remote Access for the win
&lt;/h4&gt;

&lt;p&gt;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?) &lt;/p&gt;

&lt;p&gt;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! &lt;/p&gt;

&lt;p&gt;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 &lt;em&gt;convertabobbing&lt;/em&gt; involved. I had copilot CLI do the fantabulous converting.&lt;/p&gt;




&lt;p&gt;All of this so I could share:&lt;/p&gt;

&lt;h3&gt;
  
  
  Project Peekyport
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa404g7aqzjv3p125f6or.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa404g7aqzjv3p125f6or.png" alt="Peekyport Logo" width="800" height="689"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App Name: Peekyport&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Tech used: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JavaFX&lt;/li&gt;
&lt;li&gt;Nmap&lt;/li&gt;
&lt;li&gt;tshark&lt;/li&gt;
&lt;li&gt;Custom CSS&lt;/li&gt;
&lt;li&gt;Draggable topology&lt;/li&gt;
&lt;li&gt;Local storage&lt;/li&gt;
&lt;li&gt;and an interface to connect your router of choice.&lt;/li&gt; 
&lt;/ul&gt;

&lt;p&gt;This is &lt;em&gt;not&lt;/em&gt; 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! &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Quick Layout Overview&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rmo9jmqz86ehrqvviut.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rmo9jmqz86ehrqvviut.png" alt="Peekyport Overview" width="799" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Here you can see a scan in progress in Peekyport:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk5ao21wpwo856jj796vp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk5ao21wpwo856jj796vp.png" alt="Scan in progress" width="799" height="488"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After scanning your network, nodes will display in the central area in the Topology Tab. With each node you can edit:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Name&lt;/li&gt;
&lt;li&gt;Category&lt;/li&gt;
&lt;li&gt;Group&lt;/li&gt;
&lt;li&gt;Floor Number&lt;/li&gt;
&lt;li&gt;Shape and color to differentiate items&lt;/li&gt;
&lt;li&gt;Upload images to help you additionally identify&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F14rat2hxn958z3ot71yx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F14rat2hxn958z3ot71yx.png" alt="Node interface" width="800" height="487"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Connect to your router by navigating to the router page and entering the details.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdld9cjm5uzem7wx0xffw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdld9cjm5uzem7wx0xffw.png" alt="Connecting home router" width="800" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.  🤔&lt;/p&gt;

&lt;p&gt;Heading to the Web Traffic Tab, we select a packet capture for analysis.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2te8a8vm95cbuv3felmg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2te8a8vm95cbuv3felmg.png" alt="pcap file uplaoder" width="800" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is a screenshot of the per device traffic activity after upload:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F24nwkxqncve6acd6bz31.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F24nwkxqncve6acd6bz31.png" alt="Traffic by device" width="800" height="457"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6ihns0epvg55a3ukf9lw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6ihns0epvg55a3ukf9lw.png" alt="logical wifi links" width="800" height="348"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Network safety by severity is found in the safety tab:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fibddyn5qlyh83ni2f88x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fibddyn5qlyh83ni2f88x.png" alt="Overview findings" width="800" height="472"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;



&lt;h3&gt;
  
  
  For everyone
&lt;/h3&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;



&lt;h3&gt;
  
  
  For the future
&lt;/h3&gt;

&lt;p&gt;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)&lt;/p&gt;

&lt;p&gt;What network analysis tools have you built? Comments, tips, questions? &lt;/p&gt;

&lt;p&gt;Thank you for reading my tiny story. 💜&lt;/p&gt;

</description>
      <category>java</category>
      <category>network</category>
      <category>javafx</category>
      <category>security</category>
    </item>
    <item>
      <title>Circuits: Bit-Banging, SPI, and CPLD</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Thu, 14 May 2026 22:53:39 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/circuits-bit-banging-spi-and-cpld-3b5o</link>
      <guid>https://dev.to/annavi11arrea1/circuits-bit-banging-spi-and-cpld-3b5o</guid>
      <description>&lt;p&gt;TLDR: A small exploration of the use case of hardware over software. &lt;/p&gt;




&lt;p&gt;"Bit-banging" ...what?&lt;/p&gt;

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

&lt;p&gt;This is that area in computer science where software developers probably start to stick up their nose. Circuit? &lt;em&gt;Excuse me&lt;/em&gt;? 😆 Leave that to the hardware engineers. &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SPI - Serial Peripheral Interface&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;A four-wire, high-speed, full-duplex protocol for synchronous communication between microcontrollers and peripherals&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;I happen to be a big fan of programmable LEDs.&lt;br&gt;
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:&lt;/p&gt;

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

&lt;p&gt;And returning to the concept of bit-banging...&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;THE SOLUTION&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8hbse6lmsyz7f8pbdfr6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8hbse6lmsyz7f8pbdfr6.png" alt="Circuit Overview" width="800" height="582"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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. &lt;em&gt;Cool&lt;/em&gt;. A faster clock speed means LEDs will update more frequently, and a slower clock speed will make them update in a slower manner.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Let's Talk Real Life&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;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). &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3bzj3763udamet74iptc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3bzj3763udamet74iptc.png" alt="ALtera Max II EPM240 CPLD" width="738" height="534"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

</description>
      <category>esp32</category>
      <category>learning</category>
      <category>circuits</category>
      <category>hardware</category>
    </item>
    <item>
      <title>You know you are a coder couple when...</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Sun, 19 Apr 2026 11:29:18 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/you-know-you-are-a-coder-couple-when-8an</link>
      <guid>https://dev.to/annavi11arrea1/you-know-you-are-a-coder-couple-when-8an</guid>
      <description>&lt;p&gt;Are there many coder couples out there? It presents unique opportunities to poke around with things. Take this morning for example...&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fltp88uwo7jp4ek9h5kr9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fltp88uwo7jp4ek9h5kr9.jpg" alt="sleep defenses" width="800" height="821"&gt;&lt;/a&gt;&lt;/p&gt;

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

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

</description>
      <category>mentalhealth</category>
      <category>ai</category>
      <category>openclaw</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I Love Watching the Storms Roll In</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Fri, 27 Mar 2026 02:06:12 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/i-love-watching-the-storms-roll-in-166m</link>
      <guid>https://dev.to/annavi11arrea1/i-love-watching-the-storms-roll-in-166m</guid>
      <description>&lt;p&gt;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!&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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: &lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://annavi11arrea1.github.io/school_weather/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;annavi11arrea1.github.io&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


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

&lt;p&gt;SIDE NOTE: The video only plays when the stream is live. Otherwise, it displays current info.&lt;/p&gt;

</description>
      <category>weather</category>
      <category>webdev</category>
      <category>api</category>
      <category>javascript</category>
    </item>
    <item>
      <title>The Ultimate Job Finding-Management Tool</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Tue, 24 Mar 2026 03:05:20 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/the-ultimate-job-finding-managment-tool-522i</link>
      <guid>https://dev.to/annavi11arrea1/the-ultimate-job-finding-managment-tool-522i</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Now I can easily collect relevant jobs and apply to the ones that are most aligned to my skill set!&lt;/p&gt;

&lt;p&gt;This is a chrome extension built quickly with copilot CLI and local ollama. Fighting automation with semi automation! Haha.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqbg6pj249z5f7chbv1p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqbg6pj249z5f7chbv1p.png" alt="Full view" width="800" height="559"&gt;&lt;/a&gt;&lt;/p&gt;
Full view option






&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3d82w0xouc5ibuwxdo6t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3d82w0xouc5ibuwxdo6t.png" alt="chrome extension" width="475" height="655"&gt;&lt;/a&gt;&lt;/p&gt;
Extension pop-out






&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;I love it also because it's neon and fun and completely personalized. &lt;/p&gt;

&lt;p&gt;What do you think? Have you tried something like this?&lt;/p&gt;




&lt;p&gt;Edit 3-25-2026:&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;You guys are literally awesome. Thank you for making my day. &lt;/p&gt;

&lt;p&gt;If you like it, give it a star! &amp;lt;3&lt;/p&gt;

&lt;p&gt;Repo: &lt;a href="https://github.com/AnnaVi11arrea1/job_seeker/tree/dev" rel="noopener noreferrer"&gt;Job Seeker Repo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>webscraping</category>
      <category>ai</category>
      <category>programming</category>
    </item>
    <item>
      <title>Path of Discovery</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Tue, 17 Mar 2026 01:12:55 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/path-of-discovery-1aoi</link>
      <guid>https://dev.to/annavi11arrea1/path-of-discovery-1aoi</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/wecoded-2026"&gt;2026 WeCoded Challenge&lt;/a&gt;: Echoes of Experience&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;A bit personal, a bit all over. Sharing pieces of my uncomfortable journey in the working world.&lt;/p&gt;


 
&lt;h3&gt;
  
  
  Illusions of Society
&lt;/h3&gt;

&lt;p&gt;Why is there a glass ceiling if a woman must pay as much as a man for things? &lt;/p&gt;

&lt;p&gt;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 &lt;a href="https://www.epi.org/blog/gender-wage-gap-persists-in-2023-women-are-paid-roughly-22-less-than-men-on-average/" rel="noopener noreferrer"&gt;according to this source&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I was once told to not get fat because I'm “not married yet”. &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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? &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.techtarget.com/sustainability/feature/Business-driving-reasons-why-diverse-teams-are-smarter" rel="noopener noreferrer"&gt;This article&lt;/a&gt; briefly summarizes some of the benefits of diversity in the workplace. &lt;/p&gt;

&lt;p&gt;Diversity should be embraced, not avoided.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15xqans2wnnmzdp2tc1v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15xqans2wnnmzdp2tc1v.png" alt="woman in a mans world" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;h3&gt;
  
  
  Productivity Buffs
&lt;/h3&gt;

&lt;p&gt;If I must work, I want to do something I like. &lt;/p&gt;

&lt;p&gt;I used to think programming was for some smart people in a distant land way over there —-------------------------------&amp;gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25g9hirv94e7bs1ze2vg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25g9hirv94e7bs1ze2vg.png" alt="woman thinking about things" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;h3&gt;
  
  
  General Life
&lt;/h3&gt;

&lt;p&gt;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.)&lt;/p&gt;

&lt;p&gt;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… -.-)&lt;/p&gt;

&lt;p&gt;Despite society trying to stuff me into some cute little predefined bundle, I have been just about everything but the expected. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;



&lt;h3&gt;
  
  
  Closing Statements
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmyoq5byx5arssiom9uk7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmyoq5byx5arssiom9uk7.png" alt="woman talking to crowd" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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. &amp;lt;3&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>wecoded</category>
      <category>dei</category>
      <category>career</category>
    </item>
    <item>
      <title>Dream/Nightmare: What Kind of Malware is That? 🥶</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Sat, 07 Mar 2026 13:10:43 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/dreamnightmare-what-kind-of-malware-is-that-201j</link>
      <guid>https://dev.to/annavi11arrea1/dreamnightmare-what-kind-of-malware-is-that-201j</guid>
      <description>&lt;p&gt;Another computer dream!&lt;/p&gt;

&lt;p&gt;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? &lt;/p&gt;

&lt;p&gt;If it invokes immediate panic or uncertainty... DO NOT CLICK! --&amp;gt; This is what they want!&lt;/p&gt;

&lt;p&gt;I literally got a nightmare from this. Hundreds if not thousands effected. Infected devices. Spread unknown.&lt;/p&gt;

&lt;p&gt;The hard truth is that we cannot save people from themselves.&lt;/p&gt;



&lt;h2&gt;
  
  
  The Dream 🌌
&lt;/h2&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;Suddenly, a download starts happening in my browser. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;PANIC&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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?&lt;/p&gt;

&lt;p&gt;I paused for a moment, shocked (no, not electrocuted, LOL). I couldn't believe what just happened. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;My heart sank, and I felt stupid and useless. Then I FINALLY woke up.&lt;/p&gt;



&lt;h2&gt;
  
  
  Share
&lt;/h2&gt;

&lt;p&gt;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!!&lt;/p&gt;

</description>
      <category>mentalhealth</category>
      <category>programming</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>📨 Pop-out Messaging Extension: Dev Whisper</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Sun, 01 Mar 2026 21:39:45 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/pop-out-messaging-extension-dev-whisper-4bma</link>
      <guid>https://dev.to/annavi11arrea1/pop-out-messaging-extension-dev-whisper-4bma</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/weekend-2026-02-28"&gt;DEV Weekend Challenge: Community&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This is the fastest I've ever made something functional.&lt;/p&gt;

&lt;p&gt;- b r e a t h e s -&lt;/p&gt;

&lt;h2&gt;
  
  
  The Community
&lt;/h2&gt;

&lt;p&gt;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!&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;



&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;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. &lt;/p&gt;



&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/4RGimHksJgY"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;



&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;

&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/AnnaVi11arrea1" rel="noopener noreferrer"&gt;
        AnnaVi11arrea1
      &lt;/a&gt; / &lt;a href="https://github.com/AnnaVi11arrea1/dev_messages" rel="noopener noreferrer"&gt;
        dev_messages
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      3rd party messaging app that works with Dev.to
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;Dev.to Messages (Unofficial 3rd Party Extension)&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;A Chrome extension that adds private direct messaging to &lt;a href="https://dev.to" rel="nofollow"&gt;Dev.to&lt;/a&gt;, with built-in link safety, spam reporting, and a first-contact approval system.&lt;/p&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;File Structure&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="snippet-clipboard-content notranslate position-relative overflow-auto"&gt;&lt;pre class="notranslate"&gt;&lt;code&gt;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 &amp;amp; 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
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Features&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Details&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Account eligibility&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Checks &lt;code&gt;joined_at&lt;/code&gt; &amp;amp; &lt;code&gt;articles_count&lt;/code&gt; via the Dev.to public API. Account must be at least &lt;strong&gt;30 days old&lt;/strong&gt; and have &lt;strong&gt;at least 1 published post&lt;/strong&gt; before sending or receiving messages.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;First-contact approval&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;When someone messages you for the first time,&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;…&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/AnnaVi11arrea1/dev_messages" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;




&lt;h3&gt;
  
  
  Meme Search Implementation
&lt;/h3&gt;

&lt;p&gt;Arguably, the most important feature. XD&lt;/p&gt;

&lt;p&gt;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:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/* 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 &amp;lt;= 6; page++) {
      try {
        const res = await fetch(
          `https://dev.to/api/articles?username=ben&amp;amp;per_page=100&amp;amp;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 &amp;lt; 100) break;
      } catch { break; }
    }

    /* ── Step 2: collect images with dedup ────────────────────────────────── */
    const seen   = new Set();
    const images = [];
    const add    = (url, title) =&amp;gt; {
      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 =&amp;gt;
        fetch(`https://dev.to/api/comments?a_id=${a.id}`)
          .then(r =&amp;gt; r.ok ? r.json() : [])
          .catch(() =&amp;gt; [])
      )
    );

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

    this._cache = images;
    return images;
  },

  /* Recursively walk comment tree and pull every &amp;lt;img src="…"&amp;gt; with its own alt */
  _extractImages(comments, articleTitle, add) {
    for (const comment of comments) {
      const imgTags = (comment.body_html || '').matchAll(/&amp;lt;img([^&amp;gt;]+)&amp;gt;/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);
      }
    }
  },
};

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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 &lt;a class="mentioned-user" href="https://dev.to/trickell"&gt;@trickell&lt;/a&gt; for being awesome.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flqc60t60kjf7xwrl2dxb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flqc60t60kjf7xwrl2dxb.png" alt="coolest chat ever"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I had fun making a settings and options area for users which includes colors and text sizes for increased accessibility.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl5cpnl1xpa6cb127u3q1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl5cpnl1xpa6cb127u3q1.png" alt="customize settings"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;h3&gt;
  
  
  Features:
&lt;/h3&gt;

&lt;p&gt;&lt;small&gt;&lt;em&gt;Created with the mindset of reducing spam and annoyances&lt;/em&gt;&lt;/small&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Account eligibility - Checks &lt;code&gt;joined_at&lt;/code&gt; &amp;amp; &lt;code&gt;articles_count&lt;/code&gt; via the Dev.to public API. Account must be at least &lt;strong&gt;30 days old&lt;/strong&gt; and have &lt;strong&gt;at least 1 published post&lt;/strong&gt; before sending or receiving messages. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;First-contact approval -  When someone messages you for the first time, you see a banner with their opening message and must hit &lt;strong&gt;Approve&lt;/strong&gt; or &lt;strong&gt;Deny&lt;/strong&gt; before the conversation unlocks. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;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. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Link spoofing detection - Before any link opens, &lt;code&gt;LinkSafety.isSpoofed()&lt;/code&gt; compares the visible URL text against the actual &lt;code&gt;href&lt;/code&gt; hostname. A red alert is shown if they differ.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;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. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Local storage persistence - All conversations, approvals, flags, and user data are stored in &lt;code&gt;chrome.storage.local&lt;/code&gt;. The extension must be installed and active to read messages. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Unread badge - The extension icon shows a live unread count, updated by the background service worker whenever storage changes&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;My extension is getting reviewed by google currently... whish me luck! haha&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F38xqrnzmaumz8zdrvvz7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F38xqrnzmaumz8zdrvvz7.png" alt="pending review"&gt;&lt;/a&gt;&lt;/p&gt;

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

</description>
      <category>devchallenge</category>
      <category>weekendchallenge</category>
      <category>showdev</category>
      <category>webdev</category>
    </item>
    <item>
      <title>ASCII Whisper: Local P2P Chat with Sound FX and Battleship</title>
      <dc:creator>Anna Villarreal</dc:creator>
      <pubDate>Wed, 11 Feb 2026 00:29:42 +0000</pubDate>
      <link>https://dev.to/annavi11arrea1/ascii-whisper-local-p2p-chat-with-sound-fx-and-battleship-18c7</link>
      <guid>https://dev.to/annavi11arrea1/ascii-whisper-local-p2p-chat-with-sound-fx-and-battleship-18c7</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a group submission for the &lt;a href="https://dev.to/challenges/github-2026-01-21"&gt;GitHub Copilot CLI Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What We Built 🧙🏼‍♂️💁🏼‍♀️
&lt;/h2&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fejt5dhzw4klhjr4k8fhq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fejt5dhzw4klhjr4k8fhq.png" alt="Testing"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;ASCII Whisper is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Simple&lt;/li&gt;
&lt;li&gt;Effective&lt;/li&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Secure&lt;/li&gt;
&lt;li&gt;Fun for all ages!&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Contributors:
&lt;/h3&gt;

&lt;p&gt;&lt;a class="mentioned-user" href="https://dev.to/trickell"&gt;@trickell&lt;/a&gt; 🦑 John&lt;br&gt;
&lt;a class="mentioned-user" href="https://dev.to/annavi11arrea1"&gt;@annavi11arrea1&lt;/a&gt; 🦄 Anna&lt;/p&gt;
&lt;h3&gt;
  
  
  Tools used:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Github Copilot CLI&lt;/li&gt;
&lt;li&gt;Ollama&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;Pillow&lt;/li&gt;
&lt;li&gt;Rich&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You are welcome to take a tour of the code on &lt;a href="https://github.com/AnnaVi11arrea1/live_ascii_video" rel="noopener noreferrer"&gt;Github&lt;/a&gt;. 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.&lt;/p&gt;

&lt;p&gt;🦄 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. 😂&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjrcqf9qal619j8m41xdz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjrcqf9qal619j8m41xdz.png" alt="ascii whisper intro"&gt;&lt;/a&gt;&lt;/p&gt;
What you see when you launch Ascii Whisper





&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1z7hqmf6flgtzu9g7lpw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1z7hqmf6flgtzu9g7lpw.png" alt="John is waiting"&gt;&lt;/a&gt;&lt;/p&gt;
Waiting for the other person to connect





&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/Zw_jS2C2NIU"&gt;
  &lt;/iframe&gt;


&lt;br&gt;
While creating the demo video, the excitement and ridiculousness nearly brought us to tears from laughing.&lt;/p&gt;



&lt;h3&gt;
  
  
  Contributions
&lt;/h3&gt;

&lt;p&gt;🦑 John added useful in-chat commands. &lt;/p&gt;

&lt;p&gt;Commands include:&lt;br&gt;
/help&lt;br&gt;
/ping  (John cannot stop laughing, that is my voice)&lt;br&gt;
/battleship&lt;br&gt;
/manual&lt;br&gt;
/togglecamera&lt;br&gt;
/theme &lt;br&gt;
/togglesound&lt;/p&gt;

&lt;p&gt;(Yes that’s right, you saw battleship!)&lt;/p&gt;

&lt;p&gt;🦑 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.&lt;/p&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;a class="mentioned-user" href="https://dev.to/trickell"&gt;@trickell&lt;/a&gt; (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 &lt;strong&gt;subprocess&lt;/strong&gt; for mac sounds and *&lt;em&gt;winsound *&lt;/em&gt; 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.&lt;br&gt;
&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
    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

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd9btqn2v2q1e2ggbvxxh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd9btqn2v2q1e2ggbvxxh.png" alt="Sound features overview"&gt;&lt;/a&gt;&lt;/p&gt;
Copilot helps set up the sound manager.






&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnabgd7fi81gd5dlp27lm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnabgd7fi81gd5dlp27lm.png" alt="Debugging ascii image converter"&gt;&lt;/a&gt;&lt;/p&gt;
Debugging video stream with new color themes





&lt;br&gt;
🦄 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.

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftvd31slqdwyhrtkowofe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftvd31slqdwyhrtkowofe.png" alt="localhost test"&gt;&lt;/a&gt;&lt;/p&gt;
Testing on one device






&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Start the host with: &lt;code&gt;python main.py –host –device &lt;/code&gt;&lt;br&gt;
You may or may not need to include the device id depending on your setup. &lt;/p&gt;

&lt;p&gt;Start the client with: &lt;code&gt;python main.py –connect localhost –device &lt;/code&gt;&lt;/p&gt;

&lt;p&gt;If you are starting the client on a different device on the same network:&lt;br&gt;
&lt;code&gt;python main.py –connect  –device &lt;/code&gt;&lt;/p&gt;



&lt;h3&gt;
  
  
  Battleship Game
&lt;/h3&gt;

&lt;p&gt;🦄 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. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fij2ccyfvg4rnvddqerzj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fij2ccyfvg4rnvddqerzj.png" alt="battleship in game screenshot"&gt;&lt;/a&gt;&lt;/p&gt;
Example of battleship game play.






&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Here is a preview of the manual:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frx3kp3ccgnbbyxx5zxuu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frx3kp3ccgnbbyxx5zxuu.png" alt="ascii whisper user manual"&gt;&lt;/a&gt;&lt;/p&gt;
Detailed user manual for Ascii Whisper included!





&lt;h2&gt;
  
  
  Our Experience with GitHub Copilot CLI 👾
&lt;/h2&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;🦄 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. &lt;/p&gt;

&lt;p&gt;🦑 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. &lt;/p&gt;



&lt;h3&gt;
  
  
  Links:
&lt;/h3&gt;

&lt;p&gt;Repo: &lt;a href="https://github.com/AnnaVi11arrea1/live_ascii_video" rel="noopener noreferrer"&gt;Ascii Whisper&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhvxe28yemdvfxcgf0s9y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhvxe28yemdvfxcgf0s9y.png" alt="John and Anna"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;We would love to hear your feedback! Thank you so much for reading!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>cli</category>
      <category>githubcopilot</category>
    </item>
  </channel>
</rss>
