During the Hacktoberfest Barcelona event I started working on contributing to the Donate Bitcoin project.
Donate Bitcoin is a simple yet clever project that creates a basic page to accept bitcoin donations through an URL and QR code linked to the user’s specified Bitcoin wallet.
I started to work on improving this project while implementing it for my own blog donations page. My blog, a static website generated by Hugo, is lighting-fast and I quickly noticed that the Javascript console was complaining about some blocking calls in the new donations page:
As shown above, the problem originated from the blocking synchronous XMLHttpRequest calls on the main thread of the newly added Javascript and HTML code. In order to fix this, I had to make use of asynchronous calls and along the way I decided to refactor the code to make it more legible and understandable as well as:
- Avoiding Synchronous XMLHttpRequest on the main thread (as mentioned befores)
- Making self-contained functions
- Renaming the offending div to avoid clashes between element id and function name
- Failing gracefully when user input can not be handled
- Adding a default amount that is displayed on first load
- Start improving code style
- A minor User Experience tweak to reassure the user of the amount to be donated in fiat currency
The most time consuming piece of work was related to figuring out that the original QR code generating library was not working properly on my browser due to the clashes between the library’s function and a div element’s identifier.
For my own use case in my blog, I just made use of another library for generating the QR codes. However, I assumed that this was not acceptable for the original project and dig on the problem until I solved it.
Taking into account that I had in mind just some of the use cases of the original project and there were almost no tests, I wanted to be cautious about not breaking any of the functionalities nor changing its original behavior.
Unfortunately this was not the case, and the maintainer of the project realized about it and released some fixes [1] [2] after merging my pull request.
The final result is shown below for the mobile layout:
Although there is still room for improvement in the project, like adding tests and improving the code style I am happy that I contributed to improving the original project.
Finally, take a look at my merge request