@SP14

I started building AttachGuard, a Chrome extension for Gmail that helps prevent one of the most common email mistakes: forgetting to attach a file after mentioning it in the email. Before writing any functionality, I set up the project structure and created the manifest.json file, which tells Chrome important information about the extension, such as its name, version, icons, and which websites it should run on. I also configured it to inject my content script only when Gmail is open. After setting up the extension, I began writing the main logic inside my content script. The extension reads the text from the Gmail compose window and searches for common attachment-related phrases like “attached,” “enclosed,” and “resume attached.” If one of those phrases is detected, it then checks the Gmail interface to see whether a file has actually been attached before the email is sent. One of the biggest challenges I ran into was learning how Gmail’s interface works. I originally expected the compose window to already exist when the page loaded, but Gmail creates new compose windows dynamically without refreshing the page. Because of this, my script couldn’t detect newly opened emails. After researching different approaches, I learned about the MutationObserver API and used it to watch for new compose windows being added to the page. Once a new compose window appears, my extension automatically attaches the necessary event listeners. I also made sure the extension works whether someone clicks the Send button or uses the Ctrl/Cmd + Enter keyboard shortcut. Before the email is sent, AttachGuard checks for attachment keywords, looks for indicators that Gmail is displaying an uploaded attachment, and, if necessary, displays a confirmation dialog asking whether the user wants to send the email anyway or go back and attach the missing file. Working on this project has helped me learn much more about Chrome extensions, the purpose of the manifest.json file, DOM manipulation, event listeners, and observing dynamic web pages with JavaScript. There are still a lot of improvements I want to make, such as expanding the list of attachment keywords, reducing false positives, and improving how attachments are detected, but I’m excited that the core functionality is now working.

I am ready to ship!!I started with a basic bot where most systems were just placeholders. Fishing, inventory, and shop commands existed, but they weren’t connected in any way. Nothing persisted, the economy didn’t really function, and everything reset on restart, which made it feel more like a demo than an actual game. By the end of this coding session, BikiniBot has completely turned into a real persistent RPG system inside Slack!! Inventory and Sand Dollar balances now persist using JSON storage, so every user’s progress is saved. An XP and leveling system lets players grow over time, and a full quest system now tracks objectives and rewards directly in gameplay. Item effects also matter now, like boosting fishing luck, and leaderboard/cooldown systems were improved to balance progression. API commands were upgraded with fact and joke integrations, and character systems now include milestone-based behavior changes. Gary also exists now and he responds with “meow” :)) Before this update, nothing carried over between sessions. Now every user has a persistent game state that evolves over time, making the experience feel like a real RPG. For example, the inventory now reflects actual progression such as levels, XP (like 310/500), Sand Dollars, and items like Rusty Spatulas, Glowing Coral, and Krabby Patties. Quests update automatically as you play, like collecting specific items during fishing or work actions.The core persistence system uses JSON-based user storage with auto-save on every action and safe defaults to prevent crashes. Fishing was also overhauled with rarity tiers (common through legendary), where tools like the Fishing Net increase rare drop chances from ~3% to ~8%.Quests are now fully integrated into gameplay, XP ties everything together into a progression loop, and API-based character commands add personality with safe error handling. A hidden milestone system also changes character behavior at usage thresholds (10, 25, 50, 100), adding long-term variation. So happy with how this turned out and thank you so much for following along throughout my journey!! :))

Today I kept building out BikiniBot and it’s starting to feel WAY more like an actual game inside Slack :)) I expanded a bunch of slash commands (about 15-16 more commands) and cleaned up how the characters respond so they don’t feel repetitive anymore. SpongeBob, Patrick, Squidward, Mr. Krabs, Sandy, Plankton, and Bubble Bass all have way more personality now and way more different responses depending on what you say !!I also connected a lot of the “game” side commands like /bikinibot-jellyfish, /bikinibot-fish, /bikinibot-work, /bikinibot-shop, /bikinibot-inventory, /bikinibot-krabby, and /bikinibot-order so they feel like they’re part of one system instead of random separate features. It’s starting to feel like an actual Bikini Bottom loop where you earn stuff, get random outcomes, and mess around with it all :) Had to fix a lot of structure issues too (Slack commands not responding, formatting inconsistencies, and making sure everything follows the same pattern), but it’s way more stable now!! Next I’m planning to keep adding MORE variety to all commands, connect inventory properly to what you actually earn (fish/jellyfish/work rewards), and keep building the economy + loot system so everything actually links together instead of being isolated features! Excited for my final steps! I’m really close to shipping :)))

Today I started building a Slack bot called BikiniBot!! :)) If you add a -tom to the end, it becomes the name of where the show SpongeBob Squarepants takes place! As you might guess from that fact, BikiniBot(tom) is a SpongeBob-themed bot that runs 24/7 and responds to slash commands with different Bikini Bottom characters like SpongeBob, Patrick, Squidward, Mr. Krabs, Sandy, and Plankton!! The idea is that each character has its own personality and reacts differently depending on what you type, so it feels more like interacting with characters instead of just a normal bot. I set up the whole project using Node.js and got the bot properly running in Slack. I also set up my .env file with all the tokens and got the basic structure working. After that I created a bunch of slash commands like /bikinibot-spongebob, /bikinibot-patrick, /bikinibot-squidward, /bikinibot-mrkrabs, /bikinibot-sandy, and /bikinibot-plankton!! Then I started building out different response styles for each character so they actually feel unique instead of all sounding the same. Right now SpongeBob is super energetic and excited all the time, Patrick is silly and random, Squidward is more tired and sarcastic, Mr. Krabs is all about money and profit, Sandy is more logical and science-based, and Plankton is chaotic and always talking about plans and the secret formula!! I also added some helper functions like clean(), has(), and pick() so it’s easier to handle user input and make the bot react based on keywords like “help”, “money”, “sad”, or “hello” instead of just random replies. The hardest part today was getting everything to actually respond correctly in Slack. Some commands weren’t triggering at first even though the code looked fine, so I had to go back and double check the Slack command setup and naming. It was a bit confusing because some commands worked perfectly while others just didn’t respond at all, but eventually I figured out it was just small setup issues and mismatches.Now the bot is finally running properly and feels way more interactive!! :)) It actually responds differently depending on what you say instead of just being static replies, which makes it feel a lot more alive. Next I want to add more game-like features like jellyfish catching, sand dollar money system, inventory, and maybe even a shop so it turns into a full little Bikini Bottom game inside Slack!!

ArianaGrandeOS is finally ready to ship!!

I polished everything up and added some final features. I added an Ariana Grande trivia app where you can answer questions about Ariana, her music, and her career. I also updated the homepage, made the time bigger so it’s easier to see, added a “Now Playing” section, and added a few more apps on the display of the homepage.

One thing I’m really happy with is the music player. I added a queue system so you can choose exactly which songs you want to play next instead of having to listen in album order. It makes the music player feel way more like a real streaming app and was something I really wanted to include before shipping.

The music player ended up being way harder than I expected. Even though all 111 songs were already in the OS, they weren’t syncing properly at all. I spent a long time trying to figure out what was wrong and honestly thought I had broken everything at one point 😭. After a lot of testing and fixing random issues, such as the play button not working, audio not playing, etc etc, I finally got every single song synced correctly and working. Seeing all 111 songs play perfectly from Yours Truly all the way to Eternal Sunshine felt so rewarding.

I also added a quote section to the homepage that changes every 30 seconds. All of the quotes are from Ariana Grande, and there are currently 12 different ones that rotate throughout the day.

The OS now has 12 different apps and actually feels like a real operating system. Looking back at where I started, it’s kind of crazy how much it grew from a simple pink desktop into this huge Ariana-themed project!! :)

The best part was finally showing it to my sister. She thought it was absolutely amazing and was especially excited about the music player. Watching her click through everything and seeing how happy she was made all the frustrating bugs and long hours worth it.

I’m really proud of how this turned out and am super excited to finally ship it :))

Thank you all so much for following along through this journey!

Last devlog I had a very basic frontend and that was basically it. Since then I built almost everything and it actually feels like a real OS now.

The biggest thing I worked on was the music player. I built it to look like a real music player with a dark background, big album art, pink progress bar, white play button. You can browse all 7 albums, click to see every song inside, and tap any song to play it. I added in all 111 songs from Yours Truly to Eternal Sunshine in the right order.

The hardest part was the wallpaper choices. I wanted real album photos so I had to embed them directly into the HTML so the file works on its own without needing extra files. I also needed to find the wide version of each album so it could fit on the screen; all her album covers are originally square. For some of the photos, I couldn’t find the wise version, so I had to manually import the photos into a photo editor and fill in the backgrounds. Every time I added a photo the file went over 2MB. Took a while to get the quality high but at the same time keep the file size reasonable.

Other stuff I added:
Calendar with monthly and yearly view, you can add events to any date
Journal and Notes combined into one app with tabs
Stopwatch and Timer that flashes red in the last 5 seconds and beeps when done
A paint app where you can draw and save as PNG
Welcome screen with a guide that walks you through the whole OS
A to-do list!
A fun little fortune cookie app which you can crack (press on), revealing a fortune cookie message related to Ariana Grande
Browser that has Ariana Grande’s socials pinned to the top
Added a notification bell that keeps you updated on album drops, tours, etc etc
Weather application which is based on user’s location
All 4 corners of every window can now be dragged to resize
Added customizable features such as album cover wallpapers, themes, fonts, changing font size, etc etc

What I’m going to be doing next:
Fixing up bugs and any issues
Adding more details or effects to the home screen to give it more oomph
Maybe: adding more wallpaper choices (?)

Really happy with what I have and what else I’ll accomplish!! So excited to show this to my sister (I’ll let you all know what she thinks in my next devpost…coming soon!!) :))

Built the base of GrandeOS and pink desktop background as well as a taskbar with a live clock that updates every second, and the first draggable window. I chose the pink color palette intentionally because my sister’s favorite color matches Ariana’s whole aesthetic, so every color decision was locked in from the start. Next up: building out the actual apps and adding more draggable windows!!