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.
The Fix & Pull Request
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.
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.
Comments
Post a Comment