The Rising Coder - Week 10/13 (Frontend Week 3/3)

Good morning, good afternoon or perhaps good evening, it is that time of the week again - another update of The Rising Coder!

As always thank you for coming to check up on me and my journey at the Northcoders Bootcamp and without any further delay, let's get straight onto the topic of what exactly did happen this week?

Week 10 marks the final week of the Front-End section of the Northcoders Bootcamp, and boy has it been an absolute beast of a journey. From the start of the bootcamp where we were struggling to write a simple For-Loop and trying to get our heads around Higher Order Function Array Methods such as map and filter, to using them as if they were second nature.

Even the start of the Front-End block where I remember having mentioned that just thinking about the word "State" just left me in a right state in the first week... But now, I've got a firm understanding of what it is and why we would use State in React.

It all came full-circle and everything that we learnt in order from the start-to-end of this bootcamp have been carefully crafted by Northcoders to ensure that we know everything we need to get our hands dirty in our first Junior roles as developers!

Enough of that... What did you do this week?

As this is our final week working on the Front-End side of development, we were now able to finally start building our own Front-End websites that would consume the Back-End API that we had created during the Back-End project phase during Week 7/13 of the course, and really making this project our own prized possession that we would be sharing with future employers.

Even before going into the actual Front-End project itself, I wanted to try add a bit of spice to my projects by first creating documentation on the root directory of my Back-End API that would detail all of the possible API endpoints and responses that the user would receive, as well as challenging myself to learn a new framework called Tailwind CSS.

And I can say that I definitely do not regret my choice of learning Tailwind CSS. For someone that does not have the best understanding of CSS styling, it was a lifesaver. If you are unfamiliar with what Tailwind CSS is a "utility-first css framework" - in short this means that it comes with pre-bundled CSS classes that you just use to style your code.

But, the beautiful thing about Tailwind CSS is that you never have to leave your code editor to make separate CSS files and link them up with your React Components. This is because all of the styling is done by putting the Tailwind CSS properties in the className of the JSX elements, and then it's up to you how you start building up your components!

Before I go on to talk about my reflections of this entire week and the final Front-End project, here is a link to my live project: Christopher Lam's Northcoders News

Reflection #1 - Take It Slow

Over the course of this week where I'd been working through my project, one of the most important things I had to constantly remind myself that it's absolutely fine to take it slow and at my own pace. It's really tempting to think about what others on your cohort are doing and "how far ahead they are", but at the end of the day, their progress is your own and yours is yours.

I'd admit that I had a lapse of confidence when I couldn't resist the urge to check on how others were doing and feeling that I felt "behind" and felt that physical discomfort that came with stressing myself out.

So TLDR: take a breather, don't look at the others around you and their progress, focus on yourself!

Reflection #2 - Official Documentation's Your Best Friend

Although this is pretty self-explanatory that the people who created React and other libraries built around a certain framework or programing language know what's best, it's really easy to forget this fact! I myself am guilty of trying to Google StackOverflow answers without properly consulting the official documentation first and that's come back to bite me (more on that later)!

Reflection #3 - Regular Breaks Are A God-Send

For those of you that are able to sit at the screen for hours on end without a single break, perhaps this may or may not apply to you but, taking regular breaks and going on a quick walk around the block can really help you both get some vitamin-D, but more. importantly unblock your mind!

The number of times throughout this week and bootcamp in general, where I've been able to just take a break and then come back with that "EUREKA!" moment have been countless, so TLDR is to put that laptop/pc away and treat yourself to some fresh air and vitamin-D!

Reflection #4 - Enjoy Yourself

If you've been in academia for years and had it conditioned in you that every assignment that you're given must cause you stress and is absolutely unenjoyable, then this is what you learn to essentially un-learn here at the Northcoders Bootcamp.

Instead of fighting the Back-end and Front-End projects as if they were your enemies that just cause you unnecessary stress, instead try think of it through the other end.

If you truly enjoy working on your projects then your entire outlook on how you approach your projects and how you feel about your projects will change entirely!

For example, imagine if the projects only caused you stress and you had to try explain your projects to future employers, it'd be difficult to properly convey your excitement over working on the project at all if you only viewed the project negatively. Compare this to if you really enjoyed working on the project and how more clear-cut this would come across to future employers.

So TLDR is really try to challenge your outlook on how you perceive the Back-End and Front-End projects so that you do your future self a favour!

Mini Surprise

Before I close up this relatively shorter blog entry for this week, for those of you who have stuck around to the end, if you interact with my blogs on LinkedIn, go ahead and drop in the comments: What your most memorable moment of the Northcoders experience was, and why?

For what I enjoyed about the Northcoders Experience was being able to meet such an amazing group of people be it all of the mentors or my fellow cohort members that I've had the pleasure of meeting.

And for the most memorable moment, it would have to be what happened today...

If you were in the final Zoom call with Jim - then you would have heard him talk about "Do not use an array's index number as a key." So if you're still reading then yes, that was me 😂

So before I show you the code that was causing us headaches, I'll just explain what happened. In my piece of code I had a CommentsDisplay component that would map over an array of comments and in React, you need to pass in a "key" into a List Item when mapping over it in React, this is so that React knows what to look for.

However, me being the absolute pillock I am, caused an absolute nightmare! So when I was implementing a "Post Comment" and "Delete Comment" feature in my project, I was able to delete the comments perfectly fine, but posting a comment would temporarily bring back previously deleted comments.

I then put in a desparate NC Help request to which Scarlett (One of the brilliant mentors) tried to step in and save the day... Except we both fell flat on the floor and had to get saved by Jim... except Jim was also completely baffled and had to take a bit of time away from the screen to try process what an absolute mess I had made 😂

So without further ado here was the small piece of code that caused the issue:

{comments.map(({ comment_id, author, body, article_id, votes, created_at }, index //<-- THIS) => { 
            const convertedCreationDate = created_at.slice(0, 10)
            return (
                <li key={index} > //<--- AND THIS - THESE TWO LINES OF CODE
                    <CommentCard removeComment={removeComment} comment_id={comment_id} author={ author } body={ body } article_id={ article_id } votes={ votes } created_at={ convertedCreationDate }  />
                </li>
            )
        })}

It really was just this, but it wasn't exactly so clear-cut even when three people including myself were staring at the code in complete bewilderness. Earlier on I had hinted towards this when I said something about always reading official documentation in which this article of documentation by React says: We don’t recommend using indexes for keys if the order of items may change. - And thus again highlights the fact that documentation is absolutely essential as a developer, I'm really sorry for causing a headache Scarlett and Jim, but I'm glad that I got to see a giddy side of Jim that I hadn't seen in the lectures as he was ecstatic and over the moon when he solved the problem - brilliant stuff Jim you lifesaver! 😭

Thoughts Going Forward

And with that less-informative and more personal blog post will come the end of Week 10 and the Front-End block of the bootcamp. Going forward will be the next three-weeks that are focused on the project phase and developing our CVs and preparing for future tech tests, which I am extremely nervous about but excited at the same time.

But for now, I'm just going to enjoy my weekend and watch the League of Legends Championship Finals tomorrow evening and hopefully see you all this time again next week, and as always thank you for reading!

Socials

Feel free to give me a follow on any of my socials down below!

Blog