Hacktoberfest - PR #3

    For the third Pull Request, I decided to work on the Repository made by OSD students present and past. The Telescope is an app that displays and updates all the students at OSD's blog posts in chronological order, I thought since I was working on CSS and HTML for my second pull request at Hacktoberfest, I may understand the front-end parts of the app better.

    I picked up an Issue on creating User Experience for when errors occur in terms of displaying the blog posts. There were three specific situations that David Humphrey, our professor, mentioned: 
    - When the post fails to load
    - When the post is still loading
    - When the loading for the entire timeline fails
    
    In order to get started on the issue, I had to go through various different kinds of installation to allow the code to run locally. Setting up Elasticsearch and Redis Server pre-requisites took longer than expected, but thanks to classmate Tony Vu's reply, I was able to run everything without problems. I learnt how the front-end code works after going through the structure of the files, as well as reading the targeted files that are related to the issue.

    Since there were components for the layout of a regular blog post Box element, I decided that I was going to keep visual consistency by making the error displays similar to the header section of a regular blog component. To decide how all the error displays will look, I spent some time going around the internet visiting blogging and forum websites to take how their error messages look as references to my own. I concluded with the usage of icons and spinners for the best possible error message visual cues.

    First, when a post fails to load, I made a regular post header without a display body. It will consist of an Icon component and descriptive text for the type of error it is.

    Second, when a post is still in the process of loading, it will have an identical layout as a regular post. But instead of what a regular blog post block is formatted, it will inform about the loading state and include a spinner component on the text body to visually indicate loading time.

    Finally, when an entire timeline fails to load, none of the posts will be displayed. Instead, a replacement will be a faded font plus an icon of the same style to be displayed over where the timeline would be to inform the users that the loading failed.

    After creating the base designs for how the error handling would look like, Professor Humphrey suggested that I consult with indivisuals who works on and/or maintains the front-end sections for Telescope. I asked around Slack and recived approval for this pull request as an initial look.

    This pull request allowed me to learn more about react components like Box and Grid, as well as CSS using react. I believe that I had improved just by a little in terms of trying to have a perspective as an user when an error occurs, and concluded that what would be ideal is a simple, easy, and informative design.

Comments

Post a Comment

Popular posts from this blog

Lab 2 Blog

     Today I contributed to another user's project on GitHub , I wanted to work on a feature where it counts how many times each type of HTTP status code as well as URLs in total has been checked, and then display it as a result section of the output.      First I sent out an Issue on his repository regarding what I wanted to do and proposed to work on it myself. After I finished adding my feature, I issued a pull request to the person's repository as I wait for feedback.      During the making of the Result Counter feature, I started by creating variables to hold all the counters and display messages. Then, I put the counters inside the loop that determines the status of the URLs, counting each and every time the if statement was valid. The total amount of URLs are added each time the loop had completed. One major problem I came across while making this feature was the fact that the result message were displayed before the list of URLs were outputted, the only way for me to
Read more

Lab 4 Blog

     This week's lab consisted of going to a new user's repository that we haven't worked on before, and add a new feature called "Ignore URL Patterns" onto their Release 0.1 repository. This feature will be activated after a new argument '--ignore' had been received, containing the ignore argument will allow the CLI tool to read two files in order: the file that contains the list of URLs that will be ignored by the link checker, and the argument after that will be the targeted file to scan.     I created an Issue on another person's Repository , and once I got permission to work on the issue, I Forked the repository into my own and cloned that forked repository into my local machine. I ran through the code and got a better understanding of how the code works before working to add the feature in.     After the feature had been completed, I contacted the owner of the project through the issue that was opened to let him know that I had finished the fea
Read more

Release 0.4

     The final assignment is finally here, it is almost time to say goodbye to this semester. Throughout the semester, we've done many different things and was involved in several open-source projects where we learned and overcame problems. This is the best course to explore Github and get some hands-on experience with programming, the open-source community is vast and filled with professionals that you can work with as well as learn from.     For the final assessment, I'd like to work on a feature that I've never touched before to prove that I did indeed grow as a programmer from taking this course. I decided to work on a repository that had started contributing to since Release 0.2, qasong . I picked this because they are a project that is near launch and I grew to like their team's effort as well as what they do, I definitely learned a lot more about React by contributing.      I am currently contemplating on taking an old issue that was never taken since September,
Read more