As part of the Release 0.3 project for my open-source course (DPS909), I was asked to continue my learning progression from Hacktoberfest by making another pull request (PR) to an external project.

Ideally, I would have continued working on the project I had already contributed to during Hacktoberfest because I would already be familiar with. But these projects currently didn't have many open issues so it was difficult to find one that wasn't assigned already.

I was recommended to take a look at this project called the Astro Reactive Library. This repository builds components and architecture for projects that use the Astro framework for their reactive user interfaces.

The challenge with this project was that I never even heard of the Astro framework before this. I had no idea what it was and I would have to learn the very basics of the project before even thinking about solving an issue. Luckily, the learning process went smoothly and I was able to get a quick grasp of how the Astro framework works and how the components in the project build UI components.

The Issue

So after this learning process I felt comfortable looking at issues and determining which one I could tackle. I took a look at issue #140 which was related to the components used to create forms. To summarize, the way they assigned the id attribute of the <input> tag the same value as the name. However, the project owner believed that this would cause issues since they use IDs as selectors, so the id attribute needs to be unique. The ideal solution was to create an id attribute that is not the same as the name attribute by making a function that creates a Short Unique ID (UUID). The UUID should be prefixed with arl and assigned that as the id value for every <input> tag.

The PR

PR: https://github.com/ayoayco/astro-reactive-library/pull/182

My idea to fix this issue was slightly different than the suggested solution. Instead of creating a new function to generate the UUIDs, I found an existing NPM library that does exactly what is needed for this issue. It's called the Short Unique ID Generating Library. I added the library to the project. Now any time I need to generate a UUID, I just import the library to the file and assign a UUID like so:

const uid = new ShortUniqueId({ length: 9 });
const id = uid();

The next step was to add id properties to form-control and form-group and assign them with UUIDs so every time the component is created, it will have a unique ID. I added the property, assigned it a UUID in the constructor, and made a get function for the property.

I then found every instance where the id attribute in an HTML tag is assigned the same value as the name attribute. I also changed all <label> tags to use the associated id value for their for attribute.

The PR went well, the project owner only asked me to assign the <FormGroups> component a UUID since I had missed that originally.

Conclusion

This was step above the PR requests I made during Hacktoberfest as I mainly stayed working with web frameworks I was already familiar with. With this PR, I had to teach myself the basics of Astro and figure out how individual components are made using this framework.