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

Post a Comment

Popular posts from this blog

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 library to 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...
Post a Comment
Read more

My First Contributions and Collaborations in Open-Source

This week I continued my journey into the world of open source by contributing to the work of others, as well as accepting contributions from others for my Micro-Note web app detailed in the previous blog post . I was able to contribute one bug fix, and one additional feature to similar applications built by other students. This was done by utilizing Git features such as posting issues, forking repositories, creating new branches, and creating/receiving pull requests. Details of my contributions are explained below. In addition to these, I also received my first pull request to review nad merge another students contributions to my own application. Fixing Another Students Bug One of my colleagues ( dbeigi ) built a note taking application called " whiteboard " that allows users to save their notes using hotkey inputs, otherwise the application is meant to automatically save the users work every 4 seconds. While I was reviewing the code, I noticed the paramter in the setInt...
Post a Comment
Read more

Lab 8 - Contribution Goals for CDOT Telescope & LifeStyle E-Commerce

After successfully completing Hacktoberfest, we move onto bigger and better challenges in open source. By November 15th I have the following goals to complete: 1. Contribute to a bigger issue on an open-source project (no more "good-first-issue" tags). 2. Contribute to CDOT Telescope, an internal project built by my fellow classmates. In this post I will break down my issue and goal for each goal. External Project- LifeStyle E-Commerce  This is a project I found in hacktoberfest and fixed a styling alignment bug for. You can find the full details of my contribution in my previous post.   If you are already familiar wit the project, you can skip the overview section. Overview Lifestyle E-ommerce is a front-end project for building an online store. It supplies various well designed pages for front-end developers to customize and utilize as a starting point for their e-commerce projects, whether it be for themselves or their clients. I gravitated towards this ...
Post a Comment
Read more