spencer pope

My Open-Source Journey Begins

12/31/2022
front end devjavascriptnpmopen sourcereactsoftwaresvelte

I’ve realized that I’m a very specific type of person. This is the case for all of us, and I believe the process of narrowing down the cohort of people we belong to also assists in determining where we can be most useful. This is a two-way street. If you decide you want to be a life coach, you will benefit from narrowing down the massive pool of coaching candidates to a more specific cohort that your unique skillset would make a greater impact on. Conversely, if you decide you want to study bacteria that thrives in wood from native New England trees, you may benefit from entering the broad community of microbiology to first get a lay of the land. Whatever the case, we know humans tend to band together in networks of varying specificity, and the process of traversing the levels of specificity of the networks you find yourself in will prove to be a powerful exercise.

I’m a person who wants to know how things work. Beyond that, I’m interested in the invisible frameworks we use. I didn’t take apart the TV set as a kid to see what was going on inside, but the first time I saw the guts (source code) of a website, I was fascinated. There’s something about the intangibility of code running in a web browser that makes me want to figure out the magic behind it all. The other invisible frameworks that interest me are in people. I am endlessly curious about human decision making. What makes someone decide to study Spanish instead of Portuguese, to start a business or get a job, to add to their retirement fund pretax or post. I have an endless backlog of questions like these, and the frameworks people use to answer them are massively under-documented. I think the parallels between software processes and intellectual processes, (how computers make decisions and how humans make decisions), say a lot about my core curiosities. I’m excited to continue bridging the gap between these two schools of thought.

My technical curiosities have led me to a career in web development, and my education landed me in the field of building commercial applications for private companies. The cohort I’ve just described is one corner of the software community. There are numerous others, and several of them would peak the curiosities here described just as well. One example is open-source software. To draw some initial parallels, what I do is build web apps that in turn, users of the internet will give money to my employer in exchange for the privilege to use said web apps. This is a common way to leverage software in business. Open-source software is entirely different in that it is built without the guarantee of compensation. There are teams of developers just like me out there building software only because they believe it will be useful. When they’re right, the natural response of the market is for reciprocity to come in the form of donations. There are many reasons to desire a steady paycheck over the possibility of a generous donation, but as far as the type of work goes, they’re certainly in the same wheelhouse. As someone whose curiosities lie in all kinds of software products, I’ve chosen to spend some time trying my hand in the unfamiliar corner of open-source software.

This past year I’ve open-sourced four of my own projects. As a frontend developer, I often come up with neat ideas for user interfaces I think would be fun to build. This is something I’m happy to invest my time in. I enjoy honing my talents to produce something satisfying that I put my mind to, and the skills I pick up along the way make me more valuable as an employee too. I’ve recently begun to study Jim Collins’ concept of The Flywheel Effect. I’m still figuring out what makes mine turn, but I’d like to think it starts with following this same curiosity, which tends to produce effortless work that I benefit from in many ways. Another way I can gain from these side projects is through this blog. Each project is an opportunity to summarize what I learned from the experience and share it with others. Thinking out loud and in front of anyone who will listen is a great way to confirm or reject the ideas that I form while working in solitude. Another way to draw out some value is by showing them off. Now that I have my own website, I’ve been able to publish some information along with a demo of each of these four projects. And the newest way I can benefit from a side project is by making it open-source. The process of preparing software for others to consume and publishing it in a public forum is invaluable experience and serves as a permanent signature on a large community of developers. All four of the projects I’m referring to have been made public on npm, the default package manager and registry for consuming and distributing JavaScript based modules. I’ll now hover on each of them and do some reflecting.

language-flash

One day I was listening to The Lex Friedman Podcast and got an idea for a flashcards app. I outline my epiphany in the following thread. I started by gathering some data to use for Mandarin Chinese flash cards. Once I had that, I built the UI. At some point in the process, I started to think of how the app could actually be useful to a lot of people. I was building a full stack application for studying Mandarin, but on a more practical level, I was building a frontend module for studying any language. That was when I knew I should put in the effort to make it publicly available. Going from building an app with one purpose to a component with many potential purposes is an intellectual shift that I recommend all creatives explore. I had to devise a way for the consumer of my component to inject their own data, rather than building it around the data I already had in whatever way was convenient for me. I’d like to think the new perspective of an open-source developer who doesn’t know exactly what their work will be used for has made me a better commercial developer too. I use this approach to think objectively about the flexibility and configuration of the components I build for my teammates at work.

3x3-cube

When I was a senior in high school, I got hooked on solving Rubik’s Cubes. I didn’t know anyone who could solve one, but I knew it was possible, so I decided to be the first. I picked it up quickly and it became a fun party trick that would preoccupy my ego through the end of high school. Fast forward 8 years, and the old obsession has become more of a sanctuary where I go to engage myself when I’m bored, anxious, confused, etc. I recently remembered using a website to try solving my older brother’s cube when we were much younger. That got the ego involved again and the first thought that followed was: ‘I could build that’. I had a blast developing the UI for entering the colors of a cube you’re trying to solve, but I quickly hit a wall when developing the backend. I realized it wasn’t enough that I knew how to solve the cube, and I needed to do some serious training in object-oriented programming to develop a service that knew it too. I didn’t want a project that I enjoyed so much to die alone in my github. There were plenty of backend services for solving a 3x3 already out there, so all I did was publish the UI component. Anyone building a react app that solves Rubik’s cubes can now import my component and integrate any backend service they want. I demonstrate this on my website by implementing a module from cubejs to get the solution. And I’m still interested in building my own solution, but by open sourcing the frontend I was able to publish some work quickly while the huge undertaking of coding a solve function is on the back burner. I built the component intentionally for integrating it with cubejs, and was able to see the vulnerabilities that manifested in doing so. Building a flexible component is hard. Attempting to do so has given me newfound respect for the open-source developer.

two-truths

At this point, I’d posted demos of two cool side projects to my new website. I posted my resume on a separate page, and the homepage had links to my other work, social media, and what not. It was shaping up to be a nice little hub for my web presence. I started thinking of ways to add to the lore of that presence that would make more people come check out the site. I wanted to share some things about myself that weren’t already evident. This sparked the idea to build a little game. I wanted to share interesting facts about me, but in a more creative way than an about page with a paragraph on how cool I am. Every website has that. I decided to build a UI for the game two truths and a lie. Part of my inspiration here is that I would often think of the other people that are the same very specific type as me. If there are other developers out there building a website from scratch in hopes of starting a business off their brand someday, wouldn’t they want their visitors to play two truths and a lie with them too? This made open-source the way. I wasn’t just building a full stack app for my visitors anymore. I was building a frontend module for anyone like me who wants to engage their audience. I setup the component so that any JavaScript developer could pass in a function that returns two random truths and a lie. That’s all it takes to get this game up and running if you want to include it in your site too. This taught me the power of open-source. It’s like doing the work for someone else who doesn’t even know they have to do it yet. Even if no one uses it, that’s a valuable lesson.

react-timeclock

A couple years ago I was building a website and wanted to start tracking how much time I was putting into it. I had an Excel sheet going where I would log what I did and how long it took each time I did some work. One day I realized it’d be so much nicer if I could just record that stuff right in the app I was building. I built a simple UI for a timeclock and put it on a random page that wasn’t intended for the production version of the app, this was only for ease of development. Well, I never deployed that app anywhere, but a few weeks ago I realized that little timeclock component was a great idea. If I wanted something like that bad enough to build it myself, whose to say there aren’t other devs out there that want the same thing? I was already in the groove with open sourcing UI components to npm, so I decided to get that one ready too and put it out there. I loved this process because I never meant for the thing to go public two years ago, and there were plenty of trials and tribulations in preparing it. I’m such a different developer now than I was back then, and I had to decide which parts to modernize and which to leave as is. I had used Bootstrap for styling back then and trying to open-source a component with the Bootstrap CDN embedded turned out to be a nightmare. This was one of many lessons I learned from this project in picking the right battles as a developer. I decided I wanted implementation to be drop dead simple for this one, so anyone could just render the component and start using it. This led me to storing the data in localStorage, which introduced extra fragility, but provided the ease of implementation I was going for. Tradeoffs! I love this dynamic because it encourages the developer to be future oriented. I wanted to bring this component to the public quickly, so I did. There’s nothing stopping me from building out another more flexible version where the user can integrate their own database if they want to. I also have plans to add the ability to export your timeclock as a .csv file. Dreaming about future iterations that you may or may not carry out is the whole point of software. I do hope I act on some of those dreams, and others will be better off forgotten.

I’m proud to have begun a new stock of knowledge that will round out my technical skillset as it grows. The most satisfying part has been exploring a very specific corner of software that’s new to me, while simultaneously being fully aligned with the type of work I like best. I may have learned some of this stuff as a commercial developer if I waited long enough, but I didn’t want to. And this is literally the tip of the iceberg in the world of open-source software. Now that I’ve built some components, I want to know what it takes to develop a whole library of tools for devs like me. I wonder what it takes to contribute to an open-source project I didn’t start. What would it be like to issue a pull request to Material UI, Next.JS, or even TypeScript? These are incredibly powerful tools, but at the end of the day they’re code bases powered by dev just trying to make each other’s lives easier. I’m excited to continue adding to this new set of skills and eventually have the confidence to contribute to efforts like those. Open source can have incredible impacts on the world, and it all starts with one developer and one idea.

If you’re interested in all the different kinds of work I’ve got my hands in, you might enjoy my recent post about how my goals have shifted this year and how I'm approaching work lately. Check it out here.


And, if this made you think, please share with a friend.

Please visit my Wordpress site to leave a comment on this post.

front end devjavascriptnpmopen sourcereactsoftwaresvelte