Skip to main content

Release 0.4 - My External Pull Request to Uber

Continuing from my previous post, I will now be covering my external contribution for Release 0.4. This external pull request is my biggest and most challenging one to date. The challenge came from size of the project, as searching and navigating through it's code base felt like somewhat of a rats maze to find where the issue lies. I also had minimal experience in React (one small school project), so the unfamiliarity with the language and architecture presented some challenges as well.


The Project - Uber - Base Web

In short, Base Web is Uber's web based design system comprised of "modern, responsive, living components" implemented in ReactJS. This project contains a vast variety of functional web components that can be used by web developers the front-end of their web projects. As someone who has done freelance web development in the past, I've always appreciated the availability of open source libraries, especially the more complex one's such as this because they can really streamline the process for developers. For that reason, I felt inclined to contribute to a project of this nature.

The Issue - UI distorts when align="horizontal" 

image
Screenshot of issue. Radio buttons would distort when they are oriented horizontally 
As the screenshot shows, the radio buttons in a radio group would distort when they are oriented horizontally. This issue seems simple enough at first but it was actually quite challenging to address. 

You might be thinking that simply using the browser inspection tools to tweak the margins should fix it. But you would be wrong. While you could preview styling tweaks with the browser tools, that did not help solve the problem in this case at all. This is because React uses a virtual DOM so the HTML you see in the browser is just the resulting output of the react compiler, not the code itself. It does not tell you which component to look for, nor which properties or even number of pixels to look for. This is because the react code did not use pixels or standard CSS units for it's margins, but rather a react scaling functionality. Here is an example of how units of pixels are scaled in this project:


After many hours of navigating through the code base like a maze, and chasing a chain of imports from component to component, I finally landed at the component that contained the styling for the radio buttons in src/radio/styled-components.js

From there, I scanned through several hundred lines to try to identify where things might be going wrong and eventually noticed this condition. 
Red Highlight shows broken condition. Green Highlight shows my fix.
There was flawed logic in their condition for radio buttons with descriptions. The original condition would nullify the bottom margin if it has a description, however this only makes sense when they buttons are vertically aligned, and that is why we see the buttons with descriptions misaligned in a horizontal orientation. As the screenshot shows my fix, I went ahead and added a condition that also makes sure the buttons are not horizontal when nullifying the bottom margin.

From there the UI still looked bad because the buttons were all stuck together when horizontal. So I went ahead and added a line with my own condition and logic that adds a margin right when the group is horizontal. This enhanced the UI.

image
Screenshot of final result


Screenshot of changes made to accomplish fix
There you have it, that is how I completed my biggest and most challenging pull request to conclude the DPS909 course. This was the biggest project  I've tackled for an external open source project. It is still pending approval to be merged, but I will post an update if it is successfully merged. 

Comments

Popular posts from this blog

Release 0.3 - Pull Requests Telescope & LifeStyle Ecommerce

In my previous post, I revealed the issues I will be attempting to resolve in order to contribute for an internal project and an external project. I also detailed the projects themselves, so if you haven't already read my previous post, I would advise starting there to give my current post some context.

I can successfully say I reached the goals I set for both the external and internal project in my previous post. Keep reading to find out how I did this, and the challenges I overcame.

Internal Pull Request Adding Pagination to CDOT Telescope
This issue was assigned to me by a colleague and was much trickier than I initially anticipated. The issue simply required to implement paginating functionality to the front end, so that the blog posts are displayed in pages instead of all  being displayed in one very long scrollable feed.
The first challenge came with the starting point. The home page was designed with a very specific bootstrap library (MD Bootsrap) that had some different con…

Hacktoberfest - Pull Request #3 : Improving Rhymus' UI

In my previous post, I announced and explained my second pull request for this year's Hacktoberfest event, where I added puzzles to Rhymus, a web based word-puzzle game designed to improve a users vocabulary.


The Project: Rhymus

If you have already read my description of Rhymus in my previous post, you can go ahead and skip to "The Issue" section.

Rhymus is an open-source web based game written in HTML, CSS and Javascript. It presents the user with word based puzzles to help users improve their vocabulary and familiarity with some common expressions, Phrases and/or common expressions are shown with on of the words being replaced with a rhyme for the original. The user must input what the correct word is, and has the option to take a hint for less point. The game has a scoring system to measure the users success. All in all, I found it to be a fun project that would be very helpful for those looking to expand their vocabulary. I can see it being useful for foreign…

Micro-Note : My First Steps into Open Source

I just finished building Micro-Note, a simple web based note taking application. While it is not the most innovative app, it marks my first steps into the world of open source. Not only was I able to learn and exercise essential Git skills including the creation and operation of a repo, but also brush up on my web development basics. This involved both features found on the GitHub web app, and the Git command line interface. I found this highly useful as I am aware Git will be a part of my career moving forward, whether it be for open source or other ventures as a developer.

The app is simple and fairly self explanatory.  It allows the user to input notes into the web page and save them to continue or edit them later if needed. It is built with the standard web stack, HTML5, CSS, and JavaScript. It uses the FilerJS Browser Filesystem libraryto save the user input to a local file so the user can save and resume their note-taking at later time.  This was helpful as it allowed me to brus…