Twitter Cashtag Extension
[April 2020]
Twitter tracks stock tickers with Cashtags ($), just like they track trends with hashtags. But this feature has been chronically underdeveloped. They don't give you any info about those stocks, so it’s hard to understand what people are talking about when they tweet with Cashtags. I've always been annoyed seeing tweets with random tickers and not having any clue what they were talking about.
So I created a chrome extension to fix that; it shows you the company name 🤝, price 💸, and 5 day price chart 📈 for any stock ticker. No need to memorize every stock ticker on the NASDAQ and NYSE, or juggle 4 tabs just to keep up with the latest financial news. Just click on a Cashtag to pull up the info!
I created this project in March 2020, after getting bored during the Coronavirus quarantine. This is my first real independent "software" project, and I really enjoyed creating it. Truthfully, the main reason why I decided to work on this and not something else was that I was locked in my apartment all day with no access to physical tools.
When I started out with this project, I told myself I wouldn't do any research on other products that did the same thing. I didn't want to get discouraged from building something, and I was almost certain that there was something else similar out there. The purpose of this project was not to build an original product, but to learn more about software development. I also was afraid of subconsciously comparing my product to others and changing my vision from its original form. Only after I finished development did I look up other similar products.
development
I developed this extension using javascript, HTML, and CSS. To help with manipulating Twitter's HTML, I used the jQuery javascript library. jQuery makes it easier to select HTML elements and manipulate their properties. For a text editor, I used Atom, which is developed by Github. Atom is free. I don't exactly remember why I chose Atom over other text editors like Sublime Text or VS Code. I used Atom for a few small things before this project, and I enjoyed using it. One of the features I particularly came to like was Atom's integration with Git and Github.
Whereas I would usually run git from terminal, I could now just visually drag and drop files into new commits and push them. When committing, I could see the changes I made on the file right next to the commit message, so I could enter in an accurate message of what I changed. Some terminal purists would say this is a bad thing, but it's a lot easier to keep accurate commits, rather than just running "git add .". I often used to forget what exactly I had changed in a commit, so my messages weren't very specific. Although I didn't do much with my version tracking and would have been fine without git, it was nice to get into the habit of tracking changes and keeping organized.
I used Figma to mockup the popup page of the extension. Figma was super easy to use, and going from Figma to HTML was quite simple as well. My user interface for the popup was pretty simple; I'll hopefully incorporate some more advanced designs in a future project.
To get financial data, I used the stocks.js API written by Thomas Wagenaar. This API is built on top of a web API by Alpha Vantage. I ended up having to add to the API a bit to get some more company information that wasn't already available. Maybe in the future I'll contribute those changes back to the original API. For graphing, I used the plotly javascript API. Plotly has tons of resources for just about any type of graph. I had a bit of trouble with formatting and graphing with dates, but overall this API was relatively straightforward. Finally, I used this hot reloader by Vitaly Gordon as a development tool. With Chrome extensions, each time you want to update changes you have to save your file, refresh the extension from chrome://extensions, and then refresh the webpage you're working on. With this hot reloader, all you have to do is save your file, and the rest is done automatically. It saved me a lot of time in the development process.
Besides the reloading, Chrome makes it very easy to develop web applications. I haven't used any other browsers for development, but from what I've heard Chrome is the best.
As of April 1 2020, I still plan to iterate on this project and add more features.
gallery
reflections
A friend mentioned to me a while back that Chrome extensions were relatively simple to develop. I took that thought into the back of my mind, thinking that I could some day build one as an easy way to get started with software projects. Reflecting on the actual difficulty of this project, I wouldn't say it was "easy", but at no point during the development process did I find it particularly hard. I believe this is because Chrome extensions are quite simple to get started, and after that you can immediately see ways to improve your project. As I kept working on the extension, new features kept popping into my head, and I was inspired to knock them out right away. I began by messing around in a low-stakes way, but I quickly fell down the rabbit hole of web development. This is something I wrote about in my blog post about Glide, which is a no-code app development tool.
Some of the hardest challenges I did run into involved formatting and styling. This didn't seem like especially challenging work intellectually, but mostly just tedious pixel pushing and looking up specific property names. To me, this felt like the software analog of organizing wires in an electronics project. I will also say that 90% of the development process was looking things up on Google. Besides the base programming skills, everything can be looked up more efficiently than memorized. I should definitely know how to parse structured data, but I don't have to know each method of the Chrome.tabs API, because I can Google that in one second.
This was the first project that I distributed publicly. Coming from a hardware background, all of my other projects have been one-off prototypes. Although in this case I was also only building something for myself, it was just a few extra steps to take my code for this project and package for anyone to use. I wrote about some differences between software and hardware development in a previous project's page, and I'll probably turn this topic into a full blog post sometime in the near future. For now, I'll add that it was really encouraging to see immediate progress on my project as I built it. I could hit save and a new version of the code would pop up in my browser.