Finished BWBP!

[suhyangkim]

BWBP Submission

Su Hyang (Juliet) Kim, suhyang@berkeley.edu, 3034641221

🖋 Problem Approaches and Progress

Problem 1

For the first problem, I immediately looked over the two .tsx files before looking at the Notion doc in order to familiarize myself with the syntax, format, and code given. After understanding and confirming the bug I needed to solve, I looked at the image container (or where the png was placed). Upon looking, I saw that the container was placed oddly in the middle of the code and also from reading the Notion doc understood that the style (or size) of the image was what was the main problem. Thus, after moving the container and seeing a visible change, I then noticed that the width of the photo was the length of the window rather than the width. Upon changing these parts, it worked and fixed the bug.
For this problem, I didn't use any outside sources other than the Notion directions and the code itself.

Problem 2

For the second problem, I decided to first understand the code given as I had done before and did a lot of console.log in order to visually see how the data was being manipulated. I used the slides to refer back to the syntax of TypeScript since I was more unfamiliar with it and also used random sources such as tutorialsteacher.com in order to understand how to simplify iterating and how to do it in TypeScript. I had a lot of difficulty understanding how to use the iterators because it always gave me indices rather than the actual values. I also tried to remove items from newJobs rather than creating a new list; thus, I researched on stackoverflow and random educational sites to understand how to remove items from an array elegantly. Upon realizing that that would take too long, I decided to stick with creating a new array and pushing jobs onto that list instead (this also made the code shorter and more readable in my opinion). It also took me a few tries to understand how to use, manipulate, and extract specific data from arrays and dictionaries in TypeScript.

Bonus Problem

I utilized Blueprint's link to Overlays for this problem as well as stackoverflow to understand how to implement Overlays into the code already given. I struggled the most with even having an overlay appear on screen. Since we were using it inside of the render() it required more research to understand since I constantly received a invalid hook error. After extensive research, I found this site and I was able to understand how to utilize overlays with render(). From then on, I used the code that was given as a template to build the other buttons and style the text on the overlay. The last problem I had was just a warning sign that would said Failed prop type: Invalid prop 'children' of type 'array' .... I also researched to understand how to fix it and came across this github site and saw that I was able to resolve the error by adding everything inside of the overlay into a fragment (</>).

🤳 Screenshots (if applicable)

I didn't screenshot any of my problems, but much of it consisted of understanding how to access information from the arrays and dictionaries in TypeScript as well as problems with the Overlay mentioned above.

🐞 Bug Report

The main bug that I had was the overlay issues that I had with being unable to use hook and actually have an overlay appear. In addition to that, I had the warning sign regarding a failed prop type. I mentioned both above in my problem approach and progress section.

🧪 Reflection

Overall Thoughs

I really enjoyed how organized and thorough the Notion document was with troubleshooting and directions. I was very easy to focus on the actual code and understand which parts needed to be fixed, etc. The time given and the difficulty of the challenges provided had a good balance. I felt that there was a high enough difficulty to be able to grow and be challenged from just doing the exercise but also not so much that I didn't enjoy the whole process.

What was the biggest challenge you faced, what made it the biggest challenge, and how did you overcome it?

The biggest challenge I faced was the bonus problem with the overlays and having them appear. It was a big challenge because I had to fully understand the different between using a render and function where the former was a new concept for me since it's unique to TypeScript I believe. I was able to overcome it with research and reading more about how to do it.

What resources did you use when you got stuck? (outside guides, workshop presentation, asking questions, bp members)

I predominantly used outside guides (educational/introductory sites, stackoverflow, etc).

What did you learn was your greatest strength? Your biggest area for improvement?

I learned that my greatest strength is being able to overcome problems even when they're unfamiliar to me by researching, but my biggest area for improvement is to not overcomplicate tasks. I tend to think about simplifying tasks before even starting the task and evaluate what method would be more efficient and elegant, rather than focusing on first solving the problem and then simplifying which wastes a few minutes in the beginning of each problem.

How did you feel about this project?

I actually really enjoyed this project; I loved how to I learned a new language but I also really enjoyed the challenge of having to do the overlay and understanding how to implement it! It was also really cool to be able to see the results in real time and visually see if it worked.