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!


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…

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…