Skip to main content

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 individuals who are still learning the English language.

The Issue - Improving Styling

The creator posted an issue requesting improvements to the applications UI without using an libraries. He specifically wanted the UI to be made with Vanilla JS, HTML5 and CSS3. While I felt like a library would allow for more robust design, I was excited to dust off my core front-end design skills that I have not used in a long time. And it definitely showed how rusty I was as it took a lot of trial and error to achieve the effect I wanted.


The Pull Request

After a lot of trial and error, I was able to make a handful of stylistic improvements in the HTML, CSS files to improve the UI along with the overall look and feel. These improvements include:
  • Switching title text components to sans-serif where appropriate
  • Adding a light grey background to the input field to increase its affordance to the user
  • Rouunding off sharp corners
  • Adding colour changes to buttons on mouse hover and click events
  • Colouring negative context text as red
  • Bolding important texts to improve visibility
  • Changing the background to a gradient colour instead of a solid one. 
  • Adding a title
The screenshots below show the changes I made from the original state.

Original Styling Before Improvements
New Styling after Improvements

The pull request was reviewed, approved and merged with 'styling' branch on the original project repository by the creator.

Next Steps for Hacktoberfest

To recap, my goal for this week was to improve some aspect of an open-source project, and I feel I have succeeded in that. My first pull request was contributing to documentation, my second was adding puzzles to Rhymus as Javascript objects, and this week I enhanced the UI of Rhymus.

To improve from this point, my next PR should be implementing an additional functionality to a project or improving an existing one. The improvement can be in terms of perofrmance or fixing a logical bug that occurs when the function is executed in ceratin cases.

I am eager to report my next major step in becoming an open-source contributor!


Stay tuned for the next pull request in about one week!

Comments

Popular posts from this blog

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 ...

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...

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 ...