Skip to main content

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

The responsive page navigation is circled at the bottom

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 conventions from traditional bootstrap, therefore I had to pull up the documentation for that library to figure out how to design the page navigation. 

From there I proceeded to implement the functionality in a JS file called Pagination.JS using jQuery. Since the original contributor used a CDN link to jQuery it was not recognizing any of my code initially. After further investigation, I found that the script tag calling the library MUST come before the script tag calling my file in order for it to recognize my jQuery. 

The next challenge was making sure it is implemented in a modular way so that it can be easily configured for how many blog posts per page by simply changing the value of the "limtitPerPage" variable. 

The final bug I bumped into was the eslint linter test. It was initially not recognizing jQuery so I had to add that in it's configuration file, but then it was still throwing errors. These errors involved things such as using "++" operators, or having strings and comments over 100 characters per line. Since I was dynamically creating HTML tags, some strings needed to be long. 

My first approach was to change the rules to correct this problem, but the community rejected this solution as it would conflict with the selected AirBnB standards. So at this point I learned that it would make more sense to change my code, rather than the rules to pass eslint's test.

External Pull Request

Re-Building LifeStyle Ecommerce as an Angular App

This was my biggest issue I've taken to date and it was as challenging as expected. Although it is a smaller project (5 Contributors), I gravitated towards this because it is a front-end theme meant to be used a starting point for web based e-comemrce projects. As a former freelance web developer I always appreciated this kind of projects as expedite the process and provide great starting points.

As I expected, the major challenge here was going to be in re-implementing the logic in typescript. The original app is a basic HTML, CSS, & JS stack with the use of common libraries like bootstrap. These all translate well into angular so re-building this isn't too difficult, just a little tedious. While Javascript (ES6) is syntactically very similar to Typescript, it cant be simply copied over in a singular file. This is mainly for the logic that dictates the state of the app, for example, items being added to the cart while shopping, would have to be implemented in the '.ts' file for the cart component due Angular's component oriented architecture.

Since Angular apps are single-page applications, each page had to be reconstructed as it's own component and dynamic elements of that page were constructed as their own components. Ultimately I managed to achieve output and behavior as the original website.

UPDATE (Nov 15): I have received some feedback and requests for changes from the project author. The first request seems to be in regards to alignment issues in some HTML files. This likely occurred when I had to change some of the custom tag names from the original since Angular's parser does not recognize custom tags by default. The other was in regards to an unused component I created called "lists". I made this initially when trying to "componentize" the website, however never ended up needing it and thus forgot to remove it.

I have made these changes and requested a re-review.

UPDATE (Nov 16): A final change has been requested by the project author. Since I have three identical consecutive commit messages, he requested that I be more specific in them or squash them if they are not significant. In retrospect, I agree that I should have been more specific in the messages, so I will be sure to do that in the future. I will squash and hopefully have my contributions merged soon.

Next Steps for Improvement

As mentioned earlier this was my biggest, most challenging issue I've ever tackled as an open-source contributor, however the project was quite small so that's where I should look to improve. 

My next major milestone would be to take on an issue on a big and popular project. Maybe not an issue of this magnitude that entails re-implementing an entire website, but certainly something in the ball park of adding or enhancing some functionality.

Stay Tuned for the final release!   






Comments

Popular posts from this blog

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 proj

Release 0.4 - My Internal Pull Request to Telescope

After a frantic 12 weeks, we have arrived at Release 0.4 - AKA the final release for the DPS909 Open-source course. Much like the previous release I covered, this release is comprised of two parts: an internal pull request to CDOT Telescope, and a more challenging external pull request to an open-source project. To improve your reading experience, I've also split my blog up into two parts. This post will be covering my internal contribution to CDOT Telescope. For a full description on what Telescope is, please refer to my previous pos t where I introduced it in detail, or the official overview . The Issue -  Search icon floating with window resize  Demonstration of the floating search issue Another student had added a dynamically floating search bar to the front end, however it was not functioning correctly as it would sporadically float around as you scroll or resize the page.  The initial hypothesis was that it was positioned relative to the view port cs it's

Hacktoberfest - Pull Request #2 : Rhymus

In my previou s post , I announced and explained my first pull request for this year's Hacktoberfest event, where I contributed to the documentation of CMS program called RawCMS. I also mentioned that documentation was simply a starting point for me as I aimed to contribute to the code/content of an actual application for my next pull request. I can proudly say that I succeeded in reaching this goal for my second pull request, as I was able to contribute to a project called Rhymus . The Project: Rhymus 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 a