Building a TTS App and Debugging the Periodic Table

Got up around 8:30 a.m. this morning after a late night of coding. I honestly don't know how I woke up so early. Spent the early hours catching up on emails (ha! just kidding. I'll check emails tomorrow—but I did catch up on WhatsApp messages including the whole MoHo thing), doing the things that pay cash and planning out my tasks for the day before moving on to the real work.

9:00 AM: Streaming and Periodic Table Fixes

Around 9 a.m. I started a Twitch stream that was originally titled "Building a usable TTS app. Listen to anything as you fall asleep" from yesterday. Yesterday, I was working on a Text-to-Speech app. The goal is to create a simple, usable app that allows users to listen to anything as they fall asleep. It's still in the early stages, but I'm excited about the potential. The app will allow users to input text or select articles, and the app will read it aloud in a soothing voice.However, I ended up focusing on fixing issues with the periodic table web app I've been working on.

Spent some time looking into high DR websites that provide dofollow links, like GitHub. The plan is to eventually manually build links on each one for each of my sites, record the process, and create an SOP that can be automated. Considering offering this as a service to others for a fee. I spent some time checking Wikipedia articles to see if they provide any dofollow links. I used a regex pattern to identify links that aren't marked as "nofollow."

<a\s+(?![^>]*\brel=["']?nofollow["']?)(?![^>]*\bhref=["']?\/)(?![^>]*\bhref=["']?#)(?![^>]*\bhref=["']?javascript:)(?![^>]*\bhref=["']?mailto:)[^&
                        gt;]*\bhref=["']?(https?:\/\/[^"'>]+)["']?[^>]*>

11:00 AM: Exporting Code for LLM Analysis

One of the highlights of the day was creating a handy tool to export an entire codebase (or at least the necessary files) and place them into the clipboard. This is useful for feeding the code into long-context-window models like Gemini. This makes it easy to provide code to AI models like Gemini for huge-context-window analysis. It's run with:

node export_files_for_llm.js file1 file2 file3 folder/ file4

or

bun run export_files_for_llm.js file1 file2 file3 folder/ file4

It requires the clipboardy package to be installed. Interestingly, I had to manually install it with npm install clipboardy even when using Bun. Then bun kept it up-to-date. Oh wait, no, the issue was that the script was initially require-ing clipboardy instead of importing it. Silly me. By the time I updated the script and it was working in node, I'd already installed clipboardy globally with npm, so I don't know if you need to manually install it now that it's been updated. Probably that was the issue, that I'd written the code wrong to use an older version of JavaScript instead of importing it. I'll have to try running it in a fresh environment and see if it works. In short: if it works, great. If it doesn't, install clipboardy.

I'll need to tweak the script a little before I can release it publicly. It only has two options right now: allow the user to specify the files as command line arguments, or use hardcoded values for specific files in the specific Periodic Table project I'm working on. Eventually, I'll add support for a --directory flag to scan a folder recursively.

3:30 PM: Debugging UI Issues

Finally made progress debugging some misplaced UI elements in the periodic table app. Oganesson (the element before the first spacer) was tiny and Actinum (the element that comes after the second spacer) was tiny. As Volodya said, the feeling of accomplishment, even just from figuring out what needs to be fixed, is great. I'll leave how to fix this one as a challenge to the reader. But a hint: it really was the CSS, just like he knew right away.

12:00 AM: Apache Tomcat Workflow

If file updates aren't loading in the app, I need to:

1. Stop Apache Tomcat server
2. Refresh index
3. Start server again

I should update my script to automate this part of the workflow more explicitly, similar to how Volodya does it manually. The current script refreshes and then restarts the server, but it should stop, then refresh, then start.

12:48 AM: Accessibility Improvements

Spent the rest of the night working on accessibility enhancements for the periodic table webpage. Made several commits to improve ADA compliance, responsiveness, and element interaction. I added ARIA labels and titles to various elements, ensuring that the site is more user-friendly for those using screen readers. I want to target accessibility improvements more in the future, both because they simlplify use with an AI tool and with screen readers like when I use the iPhone reader, and because Google apparently boosts ADA-compliant sites in search results. Still have some TODOs to complete.

---

It was a productive day overall, with progress made on various coding projects and some more valuable workflow improvements. Looking forward to tackling the remaining accessibility tasks and any other challenges that come up! Note to self (at 2:10 a.m.): stop spending an hour on blog posts. And Mr. LLM is right: time to move on to the next app. —Michael

---