If you haven't read any of my other posts, I've recently began contributing to an open source project called HAX. HAX is an effort to build tools usable by anyone in every platform. Think WordPress but without the PHP constraints.
Anyways, my professor is the creator and gave interested students the option to skip the final project and pick up an issue on his project and fix it. So for the past couple of weeks we've been writing code, doing code reviews, talking about Web Components, LitElement, and a bunch of other front-end rabbit holes. It has been a really fun experience, and I've learned more about open source and web development in a couple weeks than I have in other classes. Today, I want to reflect on the experience and talk about my contribution.
The eXperience
The first class we started developing, we all chose an issue in the issue queue. Previously, I've talked about a property I added to another component for making a wikipedia-query tag that works with any wikipedia language. So I thought, "I have some experience. Let's try something harder." And that's where I went wrong. So I picked up an issue that was to enable a "learning mode" for their video player that basically disables the ability to fast forward, rewind, replay, enable transcript, etc. The use case is for quizzes or training where you want to ensure the user is viewing the entire video and not skipping around or searching for key terms.
I didn't realize how intense the video player component was, and I ended up spending the next two weeks trying to understand how it worked, and to simply pass a boolean prop from one component to another. After a lot of errors and slack messaging my professor, I finally got it to work. However, throughout the process I didn't regret the issue I chose, because every class we were going over someone else's component which made for a really great learning experience.
I think this is a fresh approach to learning how to code, because every student had their issues, and we got to see how they overcame them. This gave us all the ability to experience their failures as well as their solutions, so we all learned together. So even though I was just arbitrarily learning about a massive component, I got to learn a lot more about LitElement from what my peers were showing in class.
My Contribution
I've posted my PR for the code I worked on for this sprint. To give a basic rundown of what I had to do it was split between working on the a11y-media-player element and the hax properties in video-player.
What I did in a11y-media-player was add a new property called learningMode that is set to default by false. In this element there was already a prop called disableSeek which turned off the ability to drag the video player slider and click the forward, backward and replay buttons. I then had to add a statement to the updated function that sets the value of disableSeek to the value of learningMode. I then copied this format with disableTranscript to get the transcript to be hidden when learning mode is enabled. Finally, I had to add these three properties to the hidden and disabled attributes for all the different buttons of the video player in the a11y-media-player.html file.
For the hax properties file in video-player, I only had to add learningMode as a property to the json file where I described what it does. You also declare it as boolean here, and then add it to the tag. This enables a checkbox in the actual h-a-x editor for selecting learning mode for the video you want to add.
Throughout this process I learned a lot about the larger elements in HAX and what it's like to work with large web components. I'm glad I got to figure out how to navigate this element, as well as learn about what my fellow classmates were doing. In the fall I will be taking this course again with the same professor who wants to make the class all about web development and code reviews. So I am very much looking forward to keeping this blog alive and learning more like we did the past two weeks.
Top comments (0)