rationali.st

A fresh coat of paint for Jittertrap

Sun 03 August 2025

Jittertrap

My long-running project, Jittertrap, had been neglected for a long time... Mostly, because of a lack of interest.

However, I recently had need for it at my day job, and I dusted it off, wrote down a list of things I need to fix for it to be useful to me in that one particular use case, and decided to fix the things that embarrass me and implement the things that would improve my life.

The backend code is mostly fine. There are some tricky things about it, and I've been thinking about a rewrite in Rust and eBPF, but it mostly works.

The frontend, however, has always been a different story. It’s a web UI, and to be blunt, my interest in the nuances of JavaScript, CSS, and the ever-shifting sands of web frameworks is minimal. It’s necessary, but it’s not the work I enjoy.

For years, this meant the UI languished. It was functional, but it was built on an old version of Bootstrap and was riddled with the kind of minor, irritating bugs that I had little motivation to track down. The project stalled, not because the core idea was finished, but because it wasn't fun, and it wasn't appreciated. The uninteresting work had become a barrier to the interesting work. I decided that this is my opportunity to see what all the AI coding fuss is about.

I started using Gemini as a coding assistant, specifically to tackle the frontend. My goal was to offload the tedious parts - the parts I had no desire to master myself.

The results have been surprisingly good. Over the past month, I've managed to clear a huge backlog of UI debt. Here’s a quick rundown of the progress:

  • Modernized Frameworks: The entire UI has been migrated from Bootstrap 3 to Bootstrap 4. This was a significant undertaking that I’d been putting off for ages, and one milestone on the journey of removing the jQuery dependency. Because apparently all browsers are good now and jQuery is a liability.

  • Richer Charting Features: The charts have become more powerful for analysis. The "Top Talkers" chart now aggregates smaller, less relevant flows into a single "Other" category, making the visualization much cleaner. I also added a switch to toggle the Y-axis between logarithmic and linear scales, allowing for a more nuanced view of the data.

  • Improved IPv6 Support: The backend now properly handles IPv6 traffic. I fixed several bugs in the packet decoding logic for IPv6 addresses and extension headers, which is critical for monitoring modern networks.

  • Security Hardening: I took the time to harden the application by fixing several security vulnerabilities, including a potential XSS issue in the WebSocket handler and a memory leak in the backend C code.

  • Code Modernization: The JavaScript codebase has been brought into the modern era. All the old var declarations are gone, replaced by let and const, and I’ve been able to systematically replace old jQuery patterns and callbacks with native JS and arrow functions.

  • Performance Overhaul: The d3.js charts, which are central to Jittertrap, have been substantially optimized. We moved the "Top Talkers" chart to a <canvas> element, which dramatically improved rendering performance. The old setInterval loop was replaced with requestAnimationFrame for smoother, more efficient updates.

  • Responsive Layout: The UI is now properly responsive. The main container is fluid, and on wide screens, the throughput and top talkers charts now sit side-by-side, which is a much better use of the space.

  • Bug Fixes: And of course, a whole host of nagging bugs have been squashed, from layout issues with the chart legends to incorrect resizing behavior.

The interesting part of this process is how it has changed my relationship with my own project. I can now focus on the What and not get bogged down in the How of web development. I describe the desired outcome—"make the legend responsive," "fix the grid resizing"—and the AI generates the code. It’s a powerful new tool, not unlike a compiler or a static analyzer, that handles a specific domain of work for me.

It’s a more efficient and, frankly, more enjoyable way to work on a passion project. The AI isn't driving the project, but it's clearing the road so I can.