For this week, I was able to contribute to Ruby projects and also practice my ruby skills. And I can gladly say I found the perfect repo. They are responsible for Indexing all Ruby related videos from conferences and meetups worldwide similar to pyvideo.org. I thought it was the best place to contribute to give back to the ruby community.
You can find them @rubyvideo.dev!
I was able to work on two more issues.
Issue #1
This issue was about showing language to the talks page. It would be a great addition to non-English speakers. My first instinct was to see if they already have feature showing languages and they did. They have have language name and emoji on talk cards adn it was only shown if it is in any language other than English. So, I followed how it was done. They already had a helper to get the language the talk was in. And I knew what I had to do. Next step was to choose where to display it. They UI is very minimal so I had to be conscious about where to put it. So, I decided to put it in the description. After I made the PR. It was merged very quickly. So, after working on this repo I understood how the codebase was and what they were using.
Issue #2
This issue was a bit of work and a lot of research. Someone wanted to be able to open YouTube video in YouTube instead of watching it on the site. Rubyvideo use a lightweight JavaScript library for their video player called Vlitejs. My first instinct was to look at PRs involving modifications to the video player. And there was a PR adding playback feature to the video player. They did it via JS using event listeners. So, Now I had an idea of how to implement it. Next I took a look at the JS library used to see if they have any built in way to implement it. Unfortunately they didn't. So, I planned to add and icon on the player itself. When clicked it would open the video in a new tab.
So, I went to implementation and most of my work was invideo_player_controller.js. Using JS and HTML query I get the video ID and added an onClick eventlistener to open open a new tab with the video ID. Next roadblock was to add the YouTube Icon. They used FontAwesome for their icon library and they download an SVG from their site and use it. So, that's what I did. However, I could not set the color for some reason. Even with modifying the css of the added classname the color would not change. Only other was it worked was adding the SVG code inline using innerHTML. I did not like that since that's not how its done across the app and adding the SVG can lead to reusability. After trial, error and some research I found that Vite has built in feature to import svg code from and .svg file. After sometime I was able to get it the way I liked it and I made the PR.
The owner left some feedback on css changes and having the video playing while the a new tab opens. They liked my idea but wanted some fixes. I updated my PR and after sometime they wanted more changes. They wanted another button on the outside as well. So, I had to refactor and add eventlisteners in two places and updated the view file. And I was right about reusing the icon because I had to add it to the button outside as well.
After that I was left another feedback on refactoring it to use <a> tags instead of buttons so that Mac users can cmd+click to open in new tab and they left a code suggestion which didn't make sense. after some back and forth I realized they didn't want buttons and event listeners instead they wanted <a> tags with Stimulus.js functionality. After some research and more back and forth, I was able able to makes changes the maintainer wanted. It was nice cause I was not aware of stimulus.js and how it worked. And finally it was merged. I'm glad they were quick with their response so that I could quickly update the code.
What's next
I want to work on more issue but not sure if I'll be able to fit in this week with finals approaching. Not sure if it'll be an issue in JS or Ruby but I'd want it to be in Ruby as well. As of now I'm looking for a new issue. Hopefully I will find it soon.
Top comments (0)