Hacktoberfest Week 4: Wrap Up And Overflow

Wrap Up

Since we are in the final part, let's wrap up some loose ends. I forgot to mention it in previous posts, but week 1's translation PR had some follow-up work after the time of the post. There were several discussions with reviewer about how to translate technical terms, like SSO and Pull Request. Ultimately, we decided to keep most of them in English unless we can cases where a mandarin term was used.

Week 3's text processing PR had some follow-up work after the post as well. The owner of the repository wanted the input format to be metaxa read <delay> <text> instead of how the start option does it, so I have to write an if construct to handle the swapping of input positions, without changing the names for those variables. The if construct is written in a way that would ignore extra input from what's expected.

This Week's PR

This week, after having more experience with pull requests, workflow of contributing to the telescope project, and working with existing project code, I went back to the telescope project to work on an issue regarding overflow of text on sign-up review page by making this PR.

Changes

Before

After

Changes on src/web/app/src/components/SignUp/Forms/Review.tsx:

• add title={feedUrl} to the RSS links in Blog RSS and Twitch/Youtube Channel RSS, to show text on hover
• add rssContainer and rssContent class for CSS
• assign rssContainer class to each RSS item, and wrap the actual RSS URL in rssContent class <span>, to handle overflow
• fix typo from Twich to Twitch
• add max width to blogRSS class's CSS to limit text length for overflow handling

Process

It took me some time to figure out what to do to setup a proper testing environment for this. There are steps described in the contribution related documents, but some elements, such as test accounts or database setup, are missing from the current iteration, so I had to look through discussions on Slack to figure those out from past conversations. Apparently I'm not alone in these setup issues.
After setting up the environment, I studied the page's code and ran the tool locally to see what I'm dealing with, using the same sign-up information when applicable. While looking at the page's CSS in source code, I edited the CSS in the browser to quickly debug the page and test my solutions.
I found out the RSS links can be very long and cause overflow that disrupts the display of the UI, so I added some CSS to hide overflow and implemented the suggestion to use ellipses. The text display on hover to show the full RSS URL is done via filling the elements' title attribute with the full RSS URL.
Afterwards, it's just some minor requests from the reviewer to changes things like name of classes or wordings. I had a small discussion with a reviewer about proper title for the RSS URLs on the UI. There's a question raised about proper max width for part of the UI, but we agreed to leave that for a separate issue.

Difficulty And Learning

It took me some time to get comfortable with the setup and understand how to make it work, but I get used to it and understood what I needed to do after some searching, eventually.
I had a hard time understanding how each part of the UI CSS fit together, so I try to change as little of existing work as possible. I had to look up different ways overflow can be handled and pick the way I think is suitable. It was a learning experience to figure out how to make ellipses work, given that there are different ways depending on what you are working with in the CSS. I found this guide really helpful. This page uses grid, so I had to set the container of the target text to use:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Then, the text itself need to be wrapped in <span> with display: flex; as a CSS attribute. Of course, you can't forget to limit the container width for the ellipsis use to trigger.

Because using % for setting width can mess up the UI arrangement, I tried to use a set px instead, and there should probably be another issue to figure out a better number to use from what's used for rest of the UI, instead of just me eyeballing the number to use.

In the future, by following this experience, I would know what to do to handle overflow in different ways, as well as what to do with to use case of ellipses.