Last weekend, I was talking to a classmate who complained about base converters being clunky and hard to use. For context, a base converter help you convert between different numerical bases, like from decimal to hexadecimal, or from binary to decimal. These types of conversions are needed by programmers from time to time, especially when dealing with low level stuff like binary data or memory addresses. My operating systems class runs into both of these things very frequently, so I decided to build a better base converter to help my classmate out. deadbeef.app was the result of a few hours of hacking over a weekend. My goal was to keep it as simple as possible – just a title and a few inputs (one for each base). I really wanted to have the app automatically convert numbers as the user typed as well. I was originally going to avoid using a framework, but I realized that getting the automatic conversion that I wanted would be easier to do with React’s concept of state. I used
any-base, an npm package that does base conversions, to do most of the heavy lifting. I hooked up a few methods to run
any-base’s conversion functions on changes to the inputs, and display the changes in the other input boxes. This way, users can type into any input and instantly see the change reflected in the other inputs.
I deployed the app using Netlify, which I hadn’t used before. I was surprised at how easy it was to get going! Netlify is fast, cheap, and will deploy straight from GitHub on pushes to master, which makes deployment hassle-free. The name for the app comes from the hexadecimal value
0xDEADBEEF, which has been used as a magic number at the start of certain file types. It’s also very often used as a sample hex value when teaching students about hex/binary/memory addresses, similar to
bar. Plus, it’s just weird and wonky and pretty memorable 💀🐄
Hopefully deadbeef can be useful to y’all whenever you need to convert bases! Coming up for the app, I’d like to add octal support, an easy way to copy values to the clipboard (maybe by double clicking?), and PWA functionality. PRs are welcome, so if you’d like to get your feet wet on a small React project, I’d love to see your contributions (click here to check out the code)!