For this week I was planning to work on the following issue. 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.
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.
Top comments (0)