Buggin out…on my portfolio
Hello frens! I’ve been writing about design patterns lately but today I’m going to switch gears. The other day I shared on LinkedIn that I finally finished my portfolio that took me weeks to complete because of all the troubleshooting I had to do. I was actually really surprised that there were a couple people that wanted to hear how I worked through it and also even received constructive criticism. I chose to finally do a portfolio because as I was applying for jobs there would always be an option to enter your website & I felt like having a one stop shop with everything about me was a good idea.
I chose to work from a template because I didn’t want to take so much time building from scratch. I’ve been trying to dive into algos & data structures so I didn’t want to spend more than a day maybe 2 to deploy a portfolio. I also thought it would’ve been easy and simple….it was not lol. In the order that I can remember my first challenge => working with code that I didn’t write myself. I came across this template on Dev.to and there was plenty to pick from! In true Libra fashion I couldn’t make a decision but once I see something I like, I’m set on it unless I see something else that I like then hello indecision my old friend! This particular template wasn’t featured as a portfolio template but more so for a company/organization. I didn’t care it was perfect and spoke to my clean lines and beautiful things soul.
I thought this would be easy, just filling in what I needed to fill in, removing components that I didn’t need etc etc. Yes but also no, the creator of this amazing free template, Issaaf Kattan did things a bit different than I would’ve done. For instance, almost all of the text is in a data.json file, then imported into the parent component App.jsx, where it is then set to state as Json data and passed down as a prop to the component that needs it. At first I thought, what the hell but then I thought wow, that’s actually pretty smart if you’re creating something for others to customize. That really wasn’t a bug though.
Bug 1:
Getting email!
I instinctively thought, okay I need to have a function that will handle state on my form, capture the info from the respective inputs and have my submit handler send that info to me! Yes…simple if had I built this from scratch because that’s how I would’ve done it. Not so simple figuring out how another developer wanted this functionality to work. Just as with the the text all being stored in a data.json file, the functionality for the form to work was stored separately from the component that’s rendering it. Thanks to my amazing & super smart friend Shadman Ahmed, who informed me about EmailJS. This service sends emails directly from your client-side to you for FREE. The step by step tutorial is super easy to follow, they also give you an email template on how you want your messages to appear.
Bug 2:
So I wanted to add a little something extra to my portfolio, and that was fetching from an API that had quotes. The API used was TheySaidSo, a free and paid API depending on your needs, that has thousands of quotes. You can choose to have a random quote everyday, or a random quote on refresh(not free), quotes from a specific category such as funny, love, inspirational etc(also not free), you can also limit the amount of characters in a quote if you’re worried about how it displays on your app(maybe free not sure). I hadn’t done a fetch in a while but I thought this should be easy…hahaha no. I had to add a couple of things that were given by Postman such as the headers and requestOptions, I will touch on how Postman enters this story.
So as I’ve done hundreds of times when fetching from an API, I console.log to make sure I’m getting the correct info. Since I hadn’t done a fetch in awhile & have been focusing on other things, the fact that I got something in the console was good & it didn’t occur to me the way it showed up in the console was different than I’ve ever seen. The next step would be to set qod to my state of qodArrayand pass that down as a prop to my Navigation component which is where I want the quote displayed.
Now, if you go back and look at what my console was returning, to access the quote within my Navigation component I thought I would write this.props.qod.contents.quote right ? Nope…I kept getting undefined and could not figure out why. Enter Postman! A super helpful tool to test end points and even gives you the code(23–34) you need for whatever programming language you need for the GET request. So thanks to Postman, my end point was successful but my prop was still…undefined.
Whenever I fetched from an API, I always received an object back and it always looks the exact same way. An object always returns not just the object, but information about the object that you just click on the little arrows to go deeper into object. If it’s an object with nested information you should also be able to just click through and see that information. But my console.log was not returning an object, it just looked like it was.
Enter my amazing amazing(yes amazing 2 times!) super software engineer mentor calvinalibra, who I cannot praise enough helped me through this. It didn’t even occur to me that the way the ‘object’ was returning in my console was a way I never seen before. James has been a developer for over 10 years and even he missed that little detail that an object should appear as above and of course he knew how to fix it! The TheySaidSo API was not returning an object but in fact returning a string….girl!! what ??!?! I always assumed whenever we send a GET request it will return an object but I learned not necessarily. I also learned that the Chrome browser returns the string within {} for readability in the console but it’s NOT an object it just appears that way. Not being aware that Chrome does this, I just assumed I was receiving an object from the API. Now how to correct this? JSON.parse() A common use of JSON is to exchange data to/from a web server. According to w3schools, when receiving data from a web server the data is always a string and to change that string into an object you would use JSON.parse(). I have made a GET request to a public API before and received an object back, so I don’t think this is always the case.
The trouble shooting doesn’t end there, I still need to access just the quote and the author. So this.props.qod.contents.quote should work now right? Still….no, *insert manic laughter*. Looking at my object again, notice it’s nested and also next to my quotes key it says array and nested within that is 0 and within that are several other keys. Imagine my quote object as a house, the actual house is the content key and the door is the quote key and 0 is the doorknob that gives me access into the house where author, background, category etc is. Knowing all of this, I have to write my code so that I have access to get what I need. I couldn’t just write this.props.qod.contents.quotes.quote, it would break my app. Below is how I had to access the keys that I needed and render it to my page.
Bug 3:
The way your app works on your local machine won’t necessarily work exactly the same way when deployed. Like with everything that I do, I push up my code to Github but I discovered Github likes things a certain way. When I deployed my portfolio to Github pages and went to look at it live, you couldn’t see my beautiful face which is the highlight of my portfolio I must say *smile*. It was showing a broken image in place of where my selfies should be. I double checked that I didn’t have any typos and that I was pointing to right path. Everything looked fine and when I looked at my page on my local machine, the pictures were loading, so why when it gets deployed the pictures break? Google…a developers best friend. I learned that with Github the pathname and the file it’s pointing to has to be lowercase and the directory has to be explicit. The below screenshots show how I had my code originally & how I had to correct it to get my images to show in deployment.
Bug 4:
This really wasn’t a bug because I didn’t spend much time correcting it. My beautiful selfies on mobile were showing up stretched! If I’m a good developer, I should also make sure that my portfolio looks just as good on mobile since that’s how most people will be looking at it. There’s several ways to make sure that an image is responsive and displays the way it should across all devices. I chose to do object-fit: cover because it’s supported across the most used browsers but also it is used to specify how an image should be resized to fit its container. The css property object-fit has a few other values such as fillin which the image is sized to fill the element’s content box, if necessary it will be stretched or squished to fit. There’s also contain , none , and scale-down. For my portfolio, cover worked best.
While creating my portfolio, I realized just using a template someone else created isn’t really that easy, especially when you’d like to add your own touches. I was able to work with existing code, making very little if any changes to the other person’s code and how to implement what I needed into their code. I learned how being able to pay attention to details is key & how in development, even we don’t get a clear error, those details sometimes can let you know. Thank you for reading !! Visit my portfolio !!
