David Tejada

Rango

Rango is a cross browser extension that enables people to navigate websites and control their browsers by voice. Sitting on top of the phenomenal software Talon, it has become the go-to solution to browse the web for people with mobility challenges.

Purpose

The origin of Rango was a simple question: "How do you make so that the hints in Vimium appear automatically?". At that point me and many other Talon users were using Vimium to click elements. Vimium was created to use with keyboard but triggering the command to show the hints by voice required a couple of extra seconds every time you wanted to click something. It worked but it was tedious. Me and many other Talon users had asked this question. It seemed simple enough that this could be enabled with a setting. But as I was going to find out it wasn't that simple.

During the next two years I spent hundreds of hours making this idea a reality and I am happy to report that I succeeded. It wasn't easy and I found many challenges along the way but I was able to overcome them and make my idea a reality. Now Rango does more than just clicking. It lets you scroll, switch tabs, copy links or text content or elements, save reference to elements for later use and many other things.

Tech Stack

I hadn't used Typescript before but I was hearing lots of great things about it. So I decided to go with it and I don't regret it. To make the extension cross browser I used webextension-polyfill. Parcel was the bundler of choice and for the UI bits like the toast notifications or the settings page I went with React. Jest and Puppeteer for testing complete the stack.

Challenges Encountered

I have faced many challenges while building Rango. One of the most interesting ones was making the hints stable as the page scrolls or elements resize. In earlier versions of Rango hints would jump around when this happened. It was okay but it could get distracting. Improving this was very complex as I had to place elements all over the page DOM. I had to be very careful so that it wouldn't affect the layout of pages. I also had to add some complex logic for handling stacking contexts appropriately. It took a lot of effort but in the end it all worked out and people were very happy with the results.

Lessons Learned

I could write a long article about all the things I learned while developing Rango. I had some coding knowledge going into it but I had never created a project of this magnitude. I became quite good at Typescript and I realized why people prefer it over plain Javascript. I learned about git bisect that helped me find a pesky bug. I learned that the way I use things aren't exactly the way users of your product are going to use it and that different people have different needs. I also learned about being very specific when writing documentation.

User Reviews

Here is what some users have to say about Rango: