A little background

I am a developer at heart, but a cyber analyst by education, or at least learning to be one. My college taught us Java as a primary language, and very little else. My only experience with JavaScript was AP Computer Science Principles in 11th grade through Code.org. I'm not a complete novice programmer, I like to consider myself competent enough to make multiple websites and apps in various languages, but I'm somewhat new with JS.

The story

I was approached by one of my professors to learn JS by doing. Specifically, by creating a custom Web Component for the ELMS Learning Network. Penn State had me get a COVID test just before our first call, so the barcode reader that never worked on my phone came to mind when I was asked "What element do you want to make?" I picked one of the most advanced ideas to turn into a tag. As I was explaining my motivation with the COVID test scanner that didn't work, it dawned on me the work that needed to be done. Video streaming and processing, and connecting an engine to process the actual barcodes. All with little knowledge of Web Components, ShadowDOMs, or ESGlobalBridges.

The process

Initial steps

I focused on getting a video to stream with the tag first. Easy enough with tutorials. But then trying to find an engine to read the barcodes proved difficult.

Downfalls of the project

My programming style is terrible for large projects. I rarely delete code blocks that are obsolete until I get a working prototype. It makes sense for me as I can go back and reuse lines that worked for better solutions, but code reviewers hate the lines of commented, garbage code.
Another issue; school. I am still a student taking 18 credits, working, volunteering, and trying to maintain relationships. This limited the time I could work on the code and find different solutions.
The last issue; burnout. I had been feeling it since my last major project stalled due to technical limitations, and it was starting to feel like this one was going to meet the same fate (More on that later. I know I'm bad at recounting stories).

The engine

We tried getting multiple different barcode engines working. The best one I could find was ZXing, but we ran into many issues of using the code. Documentation is not this project's strong suit. Circling back to the technical limitations issue, It was starting to look like another project lost to errors. Then, by the saving grace of DuckDuckGo, I found a working example. Nevermind the repo is an assembly repo built in C++, it has a working, pure JS example of the engine in use. We used that, and their JS file of ZXing, to get the WebComponent working. I had to rely on my professor to help link the Zxing JS file, as he had created a custom ESGlobalBridge feature for this exact kind of instance. Once we got that, and a few more bug fixes, we had a working component! Some more minor tweaks for performance and hiding the video later, and we had a working, usable scanner! Now just onto maintenance and minor improvements.

Final thoughts

Taking two days to write this probably isn't the best storytelling strategy. But, the experience itself was a fulfilling experience. And now I can say I contributed to an open-source project and created a custom element with JS.
Definitely, if you get the chance, learn from an expert, no matter the topic. It'll be rewarding.