Hacktoberfest: Learning new technologies
Published: 2021-11-01 00:06:55

For this week I was planning to work on the following [issue](https://github.com/openbenches/openbenches.org/issues/249#issuecomment-937514762). However, I had a lot of difficulties setting up my computer to be able to run the repository, as the whole thing was in PHP. I spent a fair amount on the setup. 

Instead, I decided to pick something from Telescope again. This time I was going to have to run the application locally. I spent the first day trying to get this to work, as I have a bad experience with the development setup. I installed Docker and kept getting an error about Linux. I went back to the documents and realized I was following the wrong steps for my OS. After successfully installing the remaining requirements, I was on my way! 

### Finding the right documents
When you first look at an application, it's overwhelming. All these files and you have no idea what to do. I decided to stay calm and do a quick search for the quote that was already there using the VS Code search tool. I found it so quickly. I decided to look around to see how some of the other files there were being implemented to get a better handle on how to approach the problem. I realized I would need a getter for the quote, but struggled on a few things to implement this.  
### Problem 1: I couldn't exactly return an object of Quote with the quote, author, and link. I had to set each one someplace and then access it. 
I found out quickly that if I was returning the quote object, I would not be able to access the members without calling the function again, which may have returned a different quote at that point. I decided to store it in a const reference. 

### Problem 2: I needed a way to grab a random quote. 
When I started this I created a .js file with some quotes I found interesting in an array that was exported. When I imported the file, I was not able to use the .length feature to get the size of the array. I was stumped. then I realized that I had forgotten to `import { quotes } `. I had instead written `import 'quotes'` when there was no default. After this fix, I was able to use quotes.length!
 
### Problem 3: I ran the commands, and then navigated to localhost: 8080 - where I would finally see Telescope locally. Wrong!
To my surprise, the telescope app looked much different than what I'd seen. Probably because I was on the Traefik site. I kept going through the docs wondering what I was doing wrong. After a lot of struggling and cursing, I just decided it's time to ask for help. I had the lovely help of James, who kindly asked what I see when I go to localhost:8000. I sent him a screenshot, and then he asked "it re-directs to 8080?". I read over what he sent again... **Localhost:8000**. I had to go back to the documentation, only to see that I had misread this the first 20 times. 
![](https://media.giphy.com/media/d89HR0V8fq4hKwVECY/giphy.gif)

### Problem 4: How to CSS in React.
I'd never seen such terror on a page - the whole quote was ugly and purple and underlined and the wrong font! I knew what properties I had to fix (thanks to dev tools!), but no idea how to do it. I looked up and saw that there was a section of CSS and made the connection. 

### The PR: 
After making the pull request for the issue, I quickly got feedback about a better design for the quote. I completely agreed with adding extra space and made the changes. I felt indifferent about the italics, and so did everyone else. In the end, I decided to leave them out as it was easier to read without them.