Contributing to Open Source: Part 2

In my previous post relating to contributing to open source, I outlined how I contributed to WooCommerce, an eCommerce platform that sits on top of Wordpress. The theme of the post is to share my stories of how I contributed to open source, and how it can benefit you and your career in doing so. In this post, I'll outline my 2nd contribution to an open source project called jQuery Filedrop - a library that has 960 stars on github and at the time of my contribution, was seemingly used all over the internet!

The necessity to contribute - Dr. E's LEGO Robotics Challenges

The story begins when I was starting my career as a software developer at Tufts Center for Engineering, Education and Outreach. At the time, I was tasked with building a special plugin centered around frictionless contributions to social platforms. The social platforms were mostly STEM education focused, but it could be any sort of platform. The plugin is called "SmartPost Templates" and you can read more about it here.

The professors I was working with at the time, Dr. Ethan Danahy (professor of Computer Science) and Dr. Chris Rogers (professor of Mechanical Engineering) came up with a really cool and novel idea of setting up an international LEGO robotics competition called Dr. E's Challenges. The idea was that each month, the website would present a new LEGO robotics challenge, such as building a robot that can walk, or crawl, or perform some other action. Users could sign up for the challenge on a website, and would be required to fill out a form with various sections - for example a section for uploading pictures of the robots, a video, and sections describing the steps along the way of how the robot was built, etc. The community of users would then vote on the best robot for the given challenge, and the winner would win a prize!

SmartPost Templates at the time did a great job handling these requirements. It allowed users on the back-end to configure web form templates with a dynamic structure - like the example above - you could configure a template with a section for video uploads, a section for a photo gallery, etc.

File uploads are essential for Social Media impact & sharing

While developing SmartPost templates, the file uploads were essential for sharing media content around the robotic competition. The part of the interface had to be frictionless and work seamlessly. At the time, drag & drop file uploads were a new thing (yes, I feel old typing this) - and so I was on the search for finding a library to help me incorporate this into the plugin. I eventually stumbled across jQuery Filedrop - it seemed to have all the right components - it used a popular JavaScript library (jQuery) and the API seemed simple and easy to use. I went ahead and included it as part of the plugin for the various media upload portions of the web forms that were part of SmartPost templates and deployed it to production!

Error handling is important!

While initially the file drop UI was a success, eventually reports would come in around attempts of uploading large files, or the server hanging up, or other issues. I started the process of debugging and realized something very quickly: jQuery Filedrop did not handle errors / bad status codes from the server!

I went ahead and forked the repo and add a very simple change:

Here is the link to the actual PR: https://github.com/weixiyen/jquery-filedrop/pull/54

This simple change allowed me to see exactly what status code was being returned from the server - this really helped with attacking some of the issues that users were seeing, and ultimately made the experience a lot better. It also exposed some of the server limitations - for example on the server side I ran into PHP timeout issues for server requests. By default (from what I remember), the default request time limit is set to 30 seconds, I was able to increase this to 2 minutes to allow for bigger file uploads.

Conclusion

Ultimately, going into the jQuery FileDrop library and realizing there was no error handling was what spurred me to open a PR and contribute to an open source library. But I think other take-aways here are how this contribution allowed me to debug issues more easily, and eventually make the experience more seamless and frictionless for the user. I hope this post inspires folks to be curious and dive into the libraries they use everyday, and to not be scared to make contributions!