I wasted two days jerry-rigging a package when the solution was one search away
Tags: typescript, react, opensource, nextjs
Published: 2022-03-22 19:59:43

> ["I attempted to jerry-rig this package for two days before giving up..."](#how-to-look-for-solutions)

## [Mission Statement](https://dev.to/tieje/the-beginning-of-project-skill-tree-1je2)

## Contents
- [Introduction](#introduction)
- [How to Look for Solutions](#how-to-look-for-solutions)
- [Lessons Learned](#lessons-learned)
- [Conclusion](#conclusion)

## Introduction

&emsp; Developers use open source software all the time. They allow us to build products quickly and easily. Figuring out which software to use is a task that in itself requires in-depth knowledge about how these technologies work. The following is my experience in building a pan and zoom network graph and what I learned from the process.

## How to Look for Solutions

Open source solutions range from:

> This is exactly what I needed, the documentation and examples are helpful, and it works.

&emsp; to

> While the documentation is poor, it should be hackable enough for me to build something with it.

&emsp; An example of the former while building the network graph, was [`react-hexgrid`](https://github.com/Hellenic/react-hexgrid). The documentation was unfinished, but what sold me were the examples and the simplicity of the code.

&emsp; However, if your thought is the latter, then you should probably keep looking for a better solution. One could certainly hack their way to a solution, but unless you've been through almost everything, there is likely a better solution just around the corner.

&emsp; For example, at one point I needed to solve two problems:

1. Scroll by grabbing in the browser with the mouse.
2. Zooming with a mouse wheel.

&emsp; At first, I was going to use [`react-indiana-drag-scroll`](https://github.com/norserium/react-indiana-drag-scroll) to solve the first problem. And it worked. But I had a feeling that there might be a solution that solved both of these problems at the same time. Searching on [libhunt](https://www.libhunt.com/), [openbase](https://openbase.com/), and [duckduckgo](https://duckduckgo.com/), I found out that this problem is actually very old and the term that better fit my problem was "pan and zoom". Searching with this term, I stumbled upon [`react-pan-and-zoom-hoc`](https://github.com/woutervh-/react-pan-and-zoom-hoc), which helped solve my problem, but it was difficult to fidget with because rather than having a simple component, the component spit out the correct x, y axes translation that would need to be worked into the component's CSS. No bueno. I attempted to jerry-rig this package for two days before giving up and switching to [`react-svg-pan-zoom`](https://github.com/chrvadala/react-svg-pan-zoom), which worked pretty much instantly and was exactly what I needed.

## Lessons Learned

1. Don't settle. Taking a few days to find the right tool can save you weeks of fidgeting with a subpar solution.
2. Using a variety of search terms and even different search engines and search applications are a must when looking for existing solutions. Most of the time, the problem has already been solved. This seems like a no-brainer, but I fall for this trap all the time.

## Conclusion

&emsp; That second point is important for another reason: [a version of the application I'm working on has already been created by someone else.](https://easyskilltree.com/) 

![easyskilltree.com UI](https://i.ibb.co/hYVqbBM/Screen-Shot-2022-03-22-at-3-42-59-PM.png)

&emsp; However, the application looks rushed and unfinished. The UI is not what I had in mind.

&emsp; Now that a static version of my network graph is basically finished, I'll start with building the instructor's interface since this deals with creating and storing data, which I haven't really figured out yet.

![Hexgrid UI](https://i.ibb.co/GTmtTWs/Screen-Shot-2022-03-22-at-3-47-07-PM.png)

&emsp; Am I really building a network graph with a hexagonal grid? Yes, and it's because of a [CGPGrey youtube video](https://youtu.be/thOifuHs6eY).