Skip to main content

Hacktoberfest - Pull request 4 - Fixing a UI Bug in "Lifestyle-Ecommerce-Website"

We are nearing the end of Hacktoberfest and that means we are finishing the challenge with our fourth and final pull request. In my previous post, I announced and explained my third pull request for this year's Hacktoberfest event, where I enhanced the UI/UX of Rhymus, a web based word-puzzle game designed to improve a users vocabulary. I also went on to say that my goal for this pull request will be to solve an actual bug within the code of a project, meaning  correcting an actual flaw, rather than enhancements and additions which I had done so far.

I am proud to say I did exactly what I aimed to by fixing a bug in a project called "Lifestyle-Ecommerce-Website".

The Project: Lifestyle-Ecommerce-Website

Lifestyle-Ecommerce-Website 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 project because I've do some freelance web development on an occasional basis, and often utilize pre-designed themes like this project to speed up the process. I thought it would be fitting for me to give back to the type of work I've used in the past.

The project is built with a standard web development stack of  HTML5, CSS, and Javascript. It  makes use of many stylesheet libraries including Bootstrap, Scaffold, and it's own custom style-sheet developed by the creator of this project, and after a lot investigation, this ended up being the root of the issue ended up being.

The Issue: Mis-aligned components throughout the site

Whenever the project displays a collection of items, the alignment of the borders, buttons and titles seemed to be off at multiple places. My first guess was that this was due to varying item name lengths, image dimensions, or other unpredictable aspects of the dynamically generated content.

After an hour or two of investigation that featured chromes dev tools to disable/enable various styling properties from the various stylesheets that were used in the project, I finally found the issue.

Example of the Issue. Final "Add to Cart" Button not aligned with the rest of the row

The Fix & Pull Request

Screenshot of fixed output. All UI components are uniformly aligned. 

My first guess was half-correct. The issue was in regards to constraints on the item thumbnail images used. Varying heights on different pictures would cause the alignment to look different than other pictures.  My assumption was that there was an absence of constraints, however it turned out that there were styling conflicts between the various stylesheet libraries used that were overriding the constraints.

I went ahead and assigned a "thumbnail" class name to all the div tags generated for items, and then targeted the img tags inside those thumbnail div tags from the styles.css stylesheet which will override all the other styling conflicts for those items. From there, I put a constraint property that would cap the height at 150 pixels (max-height: 150px).

The fix itself was only about 5 lines of code, however the investigation to find the source of the problem is what consumed a significant amount of time.

Next Steps From Here

Looking back at my pull requests throughout Hacktoberfest, there is a clear progression in my contributions to open-source. I started with documentation, then content addition, then styling additions/enhancements, and then finally an actual bug fix. I hope to continue this trend as I advance in my open-source journey.

After successfully completing Hacktoberfest and achieving all the goals I set for each PR, the next step would be to tackle some larger scale issues for bigger projects.


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…