Skip to main content

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.

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 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 Issue - Re-Implement the site as an Angular web app
Right now the project acts as a standard HTML website with some additional third party JS and CSS libraries. The owner created an issue suggesting the re-implementation of the site as an Angular web app to act as a theme or starting point for Angular based eCommerce projects for freelance web developers.

The Challenge
Angular supports HTML and CSS, so styling and layout won't present many problems, however the use of jQuery and other Javascript for the underlying logic of the website is where things will get challenging. Angular uses TypeScript for it's logic and programming, therefore it will take longer to re-implement various functions into the typescript. Furthermore, I will need to plan out how to 'component-ize" the website optimally, since Angular runs on a component based architecture. Finally I will have to build the routing module since Angular apps are single page web apps, the routing paths to these pages need to be manually configured and each page will be its own component. 

This is by far the largest issue I've taken on to date, and will almost certainly challenge me in unforeseeable ways as well.

Internal Project - Telescope

In short, Telescope is a website displaying "aggregated feed of blog posts" from students and/or faculty at Seneca College that are working on open-source projects. For a full overview of Telescope please read the official overview on the telescope repo.

This issue was assigned to me by a fellow student who was involved in planning out the front end for telescope. The premise behind the issue is to cap the number of blog posts to a limit, and then have the remaining show up on the next page and so on. This is to improve the UI so that they are not left with an extremely long page to scroll through. 

Up to this point, I have just been waiting for the individual who volunteered to complete the initial static HTML page to have their work merged so I can proceed from there. At this current point in time, there are sample blog posts hard coded to the front end. In this current state, I'll proceed to implement the pagination logic in the same manner, as I will have to statically hard code those sample posts in to each page since they are not being dynamically fed yet. 

Eventually once the blog posts are being dynamically generated in the web page, the pagination will also be ready by tweaking a few lines of code to replace the hard-coded sample posts. 

Stay tuned for the results of these efforts next week!


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…