DEV Community: Kandis Arzu-Thompson

The Request-Response Cycle Adventure

Kandis Arzu-Thompson — Tue, 20 Jun 2023 19:57:13 +0000

Greetings, fellow tech enthusiasts and aspiring developers! Today, I'm here to regale you with a comical tale of running headfirst into misunderstandings while unraveling the enigmatic concept of the request-response cycle in a React and Ruby on Rails application. So fasten your seatbelts and prepare for a rollercoaster ride filled with confusion, laughter, and ultimately, enlightenment!

Act 1: The Ambitious Developer

Once upon a time, in a bustling coding community, there was a bright-eyed developer named Kandis. Armed with a deep desire to create amazing web applications, Kandis embarked on a quest to master the intricate workings of the request-response cycle. Little did they know that this journey would be rife with unexpected detours and humorous misunderstandings.

Act 2: The Clueless Navigator

With determination in their heart, Kandis decided to build a React and Ruby on Rails application complete with authentication and authorization. They started coding feverishly, fueled by the excitement of creating something truly extraordinary. However, as they delved deeper into the realms of client-side and server-side interactions, confusion began to rear its head.

Act 3: The Mischievous Misunderstandings

Ah, the misunderstandings! They sprouted like mushrooms after a rainstorm. Kandis initially mistook the client-side for a place where customers sit and place their orders, while the server-side seemed like a waiter bustling around, fulfilling those orders. Little did they know that the truth was far more complex and fascinating.

As Kandis dug deeper into the intricacies of React, they stumbled upon the concept of components. These building blocks of the user interface seemed like eccentric puzzle pieces that refused to fit together. Each time they sent a request, it vanished into thin air, leaving them perplexed and mildly frustrated.

Act 4: The Lightbulb Moment

But fret not, dear readers! Our protagonist's perseverance finally paid off. Amid the confusion, Kandis stumbled upon the realization that the client-side was where the magic happened—a place where the user's interactions were handled. React, with its enchanting powers, transformed these interactions into requests, eagerly sent to the server-side.

And lo and behold, the server-side, represented by the mighty Ruby on Rails, welcomed these requests with open arms. Authentication and authorization became the gatekeepers of this sacred realm, ensuring that only worthy souls gained access. The server-side processed the requests, responding with valuable data or updates, and a harmonious dance of information exchange ensued.

Act 5: The Triumph of Knowledge

After countless hours of frustration, Kandis emerged from the rabbit hole of misunderstandings with newfound wisdom. The request-response cycle, once a mysterious enigma, became their trusted ally. With authentication and authorization guarding the gates, they crafted a seamless user experience where client and server worked in perfect harmony.

Conclusion: The Humor in Misunderstanding

Dear readers, whatever act of this journey you find yourself in right now, whether you're just starting to grasp the concept or navigating through the twists and turns of implementation, remember that frustration is but a temporary hurdle on the path to understanding.

Like Kandis, persist and keep your eyes on the finish line. Embrace the challenges with a lighthearted spirit, for humor often accompanies the most confusing moments. And rest assured that with each step forward, you are growing as a developer, inching closer to unraveling the intricacies of the request-response cycle.

So, keep coding, keep exploring, and keep laughing along the way. You will be triumphant!

Complex State Management

Kandis Arzu-Thompson — Thu, 09 Mar 2023 18:00:27 +0000

So what complicates state management?

Nested objects created by model associations in your backend of course 🤓!

It's been several weeks since I started building applications with React, and this last one got a little complicated. My latest project was constructed with a React frontend and a Ruby on Rails backend. Setting up the associations of the 3 models for the project wasn't too bad, but utilizing that information in the frontend proved to be quite a bit more challenging. I found myself in a constant sea of red error messages every time I submitted a form. Well, it turned out I really needed to backtrack and reinforce my understanding of basic state management before I could manage more complex updates.

If your models are associated as have_many_through to support a many-to-many relationship, things can get a little quirky. Let's start with a seemingly simple example. So, we have a book club app. It has 3 models: user, book, and comment. The relationships are as follows:

For this project, I used the useContext hook for the first time and it was wonderful! Passing props for a project this large would have driven me crazy. Happy I can add this skill to my newbie developer arsenal. So, here is my context for managing my books. I only wanted the user to have the ability to create new books so it's simple, but the context of the comments gets a bit more intricate.

The handleAddNewBook function is relatively straightforward. I use the spread operator on the books array to gain access, and then I insert my new book. Super simple. Now...because each user has their own books array created by the backend associations, I also need to update the user state. This is where my brain started malfunctioning so to speak. How do I accomplish such a thing? Those synapses were firing, but they sure weren't connecting until my instructor broke down what I needed to do.

To keep this post from getting too cluttered, the above image only has functions that update the user state for their books and comments. The user can add a book, add a comment to that book, edit a comment, and delete a comment. I break each function down to better explain below.

Updating Complex State For A Create Action

handleAddNewUserBook and handleAddNewUserComment

these functions are similar in that the user is adding new objects to their respective associated books and comments arrays
open the user object with the spread operator (...user)
direct your attention to the respective array and update it's value
everything after the comma is what you will be setting the value of the respective user arrays to
Important: take note that the entire value must be wrapped in brackets because the key (books) is an array

Updating Complex State For A Patch Action

handleEditUserComment

updatedComments is the array of comments after we have mapped over the comments array to find the comment we would like to update and swapped it for the new comment
now that we have this new array, we set the user in much the same way as the two functions above
the difference is that this variable is an array already, so it does not need to be wrapped in brackets

Updating Complex State For A Delete Action

handleDeleteUserComment

when updating state for a delete action, the filter method is used rather than map and the array that is returned will not include the deleted comment

Conclusion

As applications grow, state management gets more complex to manage and useContext definitely helps with the separation of concerns. I hope you utilize both masterfully with the help of this post in the future. This was also my first time using the Polacode extension for Visual Code Studio. I think the image clarity is better than the screenshots I usually use. I'd love to hear your feedback. Please comment below. Happy coding!

Failing Is Funny: Code with humor and sweat the small stuff........it matters!

Kandis Arzu-Thompson — Tue, 17 Jan 2023 16:41:02 +0000

Yooooooooooo?!?!? I know I'm not the only one!

I'm not the only newbie coder out here who just finished their first full-stack project, so to speak, and feel like what the actual f@!#k am I doing here?🤬 I'm just not. Dewey decimal that point! In other words, store it in the library. It matters.

So, I've spun up my first full-stack project. It has a React front-end and a Sinatra API back-end. It was meant to be a little back-and-forth tic, tac, toe-ish game of wizards dueling. To keep myself and my 8-year-old son entertained while I worked, I decided to go with a fan fave theme: Harry Potter. It didn't quite turn out as I expected, but my little man was encouraging every time I looked defeated and frustrated. I have a long way to go to make this thing reach the potential I first set for it but for now, I learned something and satisfied all my project requirements, and.......well, I let it do what it do, babe.

First and foremost, sweat the small stuff. It matters. The small stuff had me all jacked up..........like, debugging saves your life! Ding, ding, ding! It's so important. Use that -ish ALL THE TIME.

Second, A lot of new coders do not read the errors. Doing that is essential. I was doing it, and my classmates were doing it whenever we met to help each other work through code issues. This is a big no-no. I learned the hard way and so did they. Error messages usually pinpoint the general area of the problem, and you can work from there. (Let's be real, the system tells you the exact line: LINE #SUCH-N-SUCH <= LOOK HERE!)

Instead, new coders just start fiddling around until the code works the way they want it to without knowing how they are actually using the data. I am she, and she is I. Guilty. I'm reading errors all day, ery-day now. That's why I'm easy like Sunday morning. Shout out to Lionel Richie. Let's get back to it. If you are trying to go somewhere and a roadblock appears, aka "an error," READ IT! And read the MF thoroughly. Stop rushing through learning to code. Take breaks. Let it settle in. Take breaks. Get back on the grind. TAKE BREAKS!! I worked on this project for 3 and a half weeks. My biggest breakthroughs were after I got a good night's rest or took a real break (lunch and a 30min TV show). Leave the code. Let your personal servers rest, and come back to it fresh.

Third point. I'm only making three points, and then I'll input some actual coding success for -ishes and -iggles.
I'm writing this blog on fumes but I think I'm the funniest then and I'm trying not to bleep myself, but it don't quite hit like sh#ts and giggles. Is that what you say when you're typing and trying not to type profanity? Bleep, yourself? 🤷🏽‍♀️ I hope by now, you are reading to laugh more than learn. Just saying.........

Things fall apart, but piece by piece can be put back together again with a vitamin called perseverance. I was determined to understand why I could not access certain data. I found out that props and params are not the same. Kiss my (shut your mouth). I know I am not the only one who was doing the same thing. Learning how to code in a boot camp sometimes makes you rush through truly understanding a process and the logical pathway of the code to complete a lab or a project. Don't do this! You will not become a good coder. Gotta start at good to become great, and damn it! I'm on my way! I didn't feel the need to type sensor that one. Ya feel me?!? Now to the code:

I don't want you to think I'm just some clever, amateur comedian who is trying to code. I know a thing or two. 😬

Accessing URL params

In the graphic above, I have placed a debugger in my code after my useParams declaration within the component I am working on. Here is where the magic happens. If you look at the scope to the right of the sources tab, I have access to :id via the URL and with the help of useHistory hook helping to generate a param known as :id. I have also passed in my wizards and spells arrays as props. So, what can I do with this information?

Here you see how I used the wizards array and the id, which happened to be a string (so it needed to be parsed to an integer) to access this object specific to this route's :id. Yay! Now to get it on the page.

This graphic shows how I used the filter method on the spells array (which happens to have a foreign key per its association with the wizards) to retrieve the spell data pertaining to that specific wizard.

This took me a while to figure out, but it was a great learning experience. It took hours of failures and a visit to office hours for an instructor to remind me of the gem I had that is the debugger; and how I can have a fail-safe route to accessing my data by utilizing the console. I'm so happy she saved me from myself. Thanks Nancy. Sweat the small stuff. It'll save you a lot of headaches, and use all the tools the wonderful world of newbie coder has given you. You, too, are on your way to being great. And keep laughing through the failures. Your mental health will thank you for it.

Creating & Passing Props

Kandis Arzu-Thompson — Mon, 07 Nov 2022 00:57:46 +0000

INTRODUCTION
React uses components to add functionality, code organization, and exchangeability. However, one very important concept to be well-versed in for your success as a React coder is using props. I thought I understood this going into the production of my first react project, but I could not have been more wrong. Every issue I ran into had something to do with my lack of comfort in creating and passing props. So, let me stop here and give myself props for acknowledging this caveat. See what I did there? Props can also be utilized in the form of callback functions. In fact, you won't get far in React without them. So, take heed.

What are props?
Not the props or kudos you give yourself for a job well done, but those properties that are the attributes of your component. My first react app is all about my favorite meals and desserts. Who doesn't love a delicious meal? I was getting hungry just working on the project and having to keep looking at the delicious meals I'd selected, but I digress.

Firstly, props are passed down to child components from their parent components. When it comes to props reusability, it's all about destructuring. This method allows you to give your props default values and take your components from static to dynamic.

Below is a snapshot of a component where an object called food has been destructured into 5 attributes (id, name, imgUrl, category, description). Neat, huh? To pass these attributes as props, wrap each attribute in JSX curly braces.

Below, this code snippet shows how the attributes have been utilized. On lines 12, 17, 22, 25, they have each been wrapped in curly braces. The rest of the code is some material ui for styling.

This next example is a prop of all the data I used for the foods. Foods is an array of individual food objects. By passing in foods as a prop into my FoodList component, I am then able to use the Array.map() method to render each food object (item) using the FoodItem component, a child of the parent component FoodList. Props and components really do change the game in code organization, and once you get the hang of it, there is no limit to the apps you can create.

In my first example, I described the 5 props derived from the prop object as attributes. The attributes are actually the keys of the prop object. Destructuring takes the keys from the props object and creates variables with the same names as the keys (attributes). I'm being redundant to really drive this home. As I said, I had a lot of issues early on with this concept. I'm here to help. Let me know in the comments how you feel about my explanation. I'm always interested in constructive criticism. Happy coding fellow code newbies! Until the next blog.......be safe, be kind, and be well.

Cover photo by Nubelson Fernandes on Unsplash

Understanding Variable Scope

Kandis Arzu-Thompson — Tue, 06 Sep 2022 19:37:05 +0000

INTRODUCTION

Here goes: my first technical blog. One of the most challenging issues you will come across as a new coder is scoping issues. Sure, you know how to read the error, but how do you avoid getting the same error every time you write new code? First, you need to understand variable scope. Not being able to access the data of a variable that you have declared is super frustrating.....I mean, I want to pull my hair out frustrating. Hopefully, I can help you avoid those premature hair loss patches.

WHAT IS VARIABLE SCOPE?

Variable scope is all about access and visibility regarding access to the data stored in that particular variable. How and where a variable is declared is a very big deal to coding efficacy and code execution without errors. Is it global? This means you can access that variable anywhere in the code document. Is the variable's scope block or functional? This means the variable can be accessed within that block of code (within this block of code's closures) or function-related (within a function block). Closures matter!

HOW TO WRITE YOUR CODE FOR VARIOUS SCOPES

If you want the variable to be global, it must be declared outside the function block. Then the global variable can be read and modified by any code on your page. See an example below:

let user = 0

function returnGlobal() {
return user
}

returnGlobal()

In the above example, the returnGlobal function has access to the user variable. When the code runs, the returnGlobal function is called and will return the value of the user variable.

I can't tell you how many times my code was executed and threw errors due to my misunderstanding of this concept. Wait, I'll estimate. EVERY TIME I WROTE CODE PRIOR TO WRITING THIS BLOG! Yes, the all caps is because I'm screaming at you. Lol. Please don't do this. Get a really good understanding of scope before you start creating your projects. It will save you from so much frustration. Thank you for letting me get that off of my chest.

Now for function scope or more commonly referred to as local scope. Let's jump straight into the example and I'll elaborate after.

function setStatus() {
    let available = "on"
}
setStatus()

alert(available)

When you run the above code, you will get the error that the available variable is not defined. And let me tell you that seeing that error sucks. As I said above, as a coding newbie, I saw it often. Now I'm here, trying to keep you from seeing it or at least help you see it less. So, please practice the concept of scope as much as possible so you can have less mishaps when you start your projects.

Lastly, block scope. A block is a collection of JavaScript statements that are usually wrapped in curly braces. These are the barriers to your blocks of code, aka the code gate keepers. Please don't find yourself left outside of the VIP variable access section. Watch your closures, and block scope will become a breeze. Here's an example:

let iCanScope = true

function isItBlock() {
   if (iCanScope) {
      alert("You can scope!")
   } else {
     alert("You are out of your league!")
   }
}

iCanScope()

Do this!

Winner, winner, chicken dinner! "You can scope!" My work is done here. Now, go code and be great. Until next time.

Cover Photo by Daniel Thomas on Unsplash

Where to now? ...Code School

Kandis Arzu-Thompson — Sun, 28 Aug 2022 23:34:23 +0000

So, what exactly am I doing?

It seems around every corner, there is a code school attempting to recruit code newbies. After several career tests and several hours reviewing which one was right for you, you find yourself taking the plunge. You spend hours mentally preparing yourself for this new journey, now you are in the group of novice developers trying to transition from "Hello, world" to "Hello, entry level developer position" as quickly as possible. Some of the concepts seem to be simple to grasp and execute. Other times the excitement fizzles out as soon as you find yourself running into a coding mental block that leaves you feeling like you have learned nothing at all, and you are months into your journey. Where to now?

Here are the events that I let derail my progress:

A nasty custody battle with an ex.
Ongoing issues at my kids schools.
An untimely death of a friend and relative.
Moving to another state.
Selling a house.
Closing a business.

All of the above derailments were emotionally draining, and there were many times where coding was just not a priority. I wish I were able to tell you I stayed the course and kept coding from taking a backseat. Sadly, I can not. However, I can tell you that if I could get those months back, I would have found a way to trudge through it all. Staying in the coding space is the best way to begin really comprehending the language you are using to communicate with the computer. Plain and simple.....just like you hoped learning to code would be.

Here are my recommendations on staying motivated and being your own committed cheerleader.

A pep talk with yourself is never a waste of time. Keep affirming yourself. Even if you are doing the same project over and over, you are doing something to absorb the information.
A struggling classmate is a blessing in disguise.
Nothing makes you feel better in the depths of despair like finding out you aren't there alone. I started working with classmates and talking through our mistakes and methods, and everything started to click. Your language gets better and you will learn from each other. So, group Zoom as much as you need to, but network through those pitfalls. You got this!
Pseudocode is your ally.
There were so many times that I stared at my Visual Code not knowing where to start. STOP DOING THAT! Just start pseudo-coding. Your synapses will start firing and progress will begin.
Understanding scope is essential to avoid major coding issues.
Take as much time as you need to really understand function blocks, hoisting, local scope, and global scope. When you start getting those initiation, null, and data not accessible errors, you'll be relieved at how quickly you can fix the issue with a better knowledge of scope.
Life must go on.
You have to take breaks and time out to disconnect and enjoy all things outside of coding. Balance your sanity. There have been so many times where I was able to solve a coding issue just by taking a mental break.

In conclusion, keep believing in yourself. Keep coding and learning from your mistakes. It will all start sticking. I'm proof of the matter. Thank you for reading my first blog. I look forward to improving how I am able to write about code and making these reads a little humorous along the way.