Forem: Jonathan Aguilar

It's been a while...

Jonathan Aguilar — Fri, 02 Sep 2022 05:47:08 +0000

Disclaimer: this post is not meant to be educational but more of a therapeutic release. It is meant to be informative to some degree and hopefully give you some light-hearted laughs. If I made you smile, I succeeded at my goal.

So.

No, this is not a throwback to Staind lyrics (if you know this band, two things. 1: I'm feeling old already in my early thirties. 2: let's be friends?). This is going to be a simple blog about how I'm feeling post-Flatiron School. It has only been about 3 weeks and I meant to write this shortly after graduating, but things happen. This thing called life sometimes creeps up and smacks you with all its might, presenting things in front of you that one may not have been ready for or even expecting. Life...

But overall, I must say I am content with where I am now. For one, I definitely need to start practicing my coding. I already feel it getting incredibly rusty especially after going the last 3 weeks without doing any of it. Bad me. But I will not reflect on that, I will only focus on my feelings post-graduation, in the event there may be others like me or have similar feelings.

The bootcamp experience was tough. Personally, it was an experience like no other. It was challenging and complex, but when you solve that code challenge, there is this release of dopamine that is inexplicable. I am aware that the release of dopamine is a natural human phenomenon, but I truly believe there is something unique to software engineers when that dopamine hits. Because it hits different. The level of satisfaction can sometimes make you feel like you can dunk over anything.

The code challenges themselves were tough, but that was expected. The projects we had to produce at the end of every phase was also challenging. I can honestly say I am grateful for all the individuals I was partnered with because they helped me along the way. I was learning on my own and also through them. Watching others work, trying to pick their brain as to why they did something a certain way, is so helpful. I found it incredibly beneficial to how I code. Also, it's inspiring to me.

I believe completing the in-person bootcamp was the right choice. I honestly was not sure at first, but having completed it, I can safely say it is. The people you meet and the friendships you can create are invaluable. I still chat with some of my cohort-mates via slack. The guidance you can receive on-the-fly is also such a huge benefit form the on-site instructors.

Now let me just say this. Can you learn all of this on your own and save yourself money? Simply, yes. What you get from Flatiron and their approach to teaching is structure, and this is probably the big plus for many. I cannot tell you how many people I encountered that mentioned procrastination as a huge stumbling block if they were to teach themselves at home. As I mentioned before, a sense of community and camaraderie. It is 15 weeks after all, people, so you might as well chat with the person next to you. And who knows, this person could become a lifelong friend even after the program.

Overall, depending what your views on bootcamps are or what you're trying to achieve and how you achieve it, Flatiron School was worth it. I now have a better understanding of JavaScript, React, Ruby, Ruby on Rails, CSS, some HTML, and it's all because of Flatiron and their rigorous program. And for that, I am, as DJ Khaled would say, grateful. Software engineering may seem daunting at first, but do NOT let anyone stop you, because anyone can do it. Just remember what DJ Khaled said to you:

So go out there and prove not only yourself wrong, but any of the doubters out there as well.

useState() is such a powerful hook

Jonathan Aguilar — Sun, 29 May 2022 20:28:08 +0000

So I begin yet another blog post by prefacing just how terrible I am at coding. My skill level, or lack thereof, is improving however, but just how much can one know when they basically have embarked on this journey just 4-5 weeks ago. Needless to say, this post is going to reflect on the USE of

useState()

within React. See what I did there? Yes, I am corny, but aware enough to know I am doing it on purpose. Ha.

This is a topic that I could not wrap my head around at first. Even now after passing my code challenge at Flatiron School, do I really know what I'm doing or talking about? Hopefully the answer is a yes and you understand where I go with this. It does make more sense to me now, and setting state within a component is so important. At first I thought it did not matter, that you could just move the state variable or the setter function at any point. However, knowing where to place state is crucial and can make life easier as you code, especially as children components cannot pass props directly to a parent unless via a callback function. More on components a bit later.

A brief explanation of useState() before moving forward. It can only be used within a functional component. It also consists of a variable and a function that updates the variable, and we can set the initial value depending on what we're working on. If it's forms, it will be an empty string, if we're working with something like a toggle button, we may use the boolean data type. Again, it all depends what you're trying to do so always proceed with caution and make sure what you're trying to do makes sense.

const [state, setState] = useState(initialState);

I look back at an example from one of our labs, where from the app component, there are two branches that separate, a header component and a container component that was used to render images onto (what is rendering is not important right now). Just keep in mind that in the hierarchy, app is at the top, the parent component, and header and container branch down from app, they are the children components of app. From here, the header also branched down to a search bar component, now 2 levels away from the main parent, app.

From the lab example, we had to render some images onto the container component, which we do with a fetch request using the

useEffect() {
fetch(\\url here)
.then()
.then()
//
}

hook built into React. Once you've got that going, one of the deliverables was to be able to filter search results. Ideally, you render your images within the container, however, you can also render them within app and from there, move the data as a prop to the container. You will have needed to use useState() for fetching your image data and passing it over. Already seeing the intricacies of this hook already.

Now remember the search bar component, well that's basically on the other side of the hierarchy, under header, and if you recall, children cannot pass props back to parents or from adjacent children components either. Because there is going to be a change when a user types to search for something, we need to create a state for the search. Now where we create this state for search matters and can make life a bit more simple or cause us to do a bit more work. I'll explain it the way I did it. I set the state for search within app, because from app, you can send the initial state variable or the function to any child. In this particular case, we send the variable to the container component, as a prop, because in this component is where all our data is rendered and where we can filter the results. However, the function will update the change to the variable and so we send this to the search bar component, via the header first because we must respect the hierarchy, as a prop. In the search bar component we have a form. This form will change accordingly to whatever the user types, so the function will change the initial state of the variable, which has travelled to the opposite end of the hierarchy tree and will only display whatever is searched.

Rather long and complicated explanation from a novice. The main take away from this is the importance of the useState() hook and how it allows you to change the initial state of a component and its objective, or what that component is meant to do in your overall application. From my example, the search bar and the container are two separate components under different branches. They cannot communicate directly but do so indirectly, via useState().

Is there really a 'fun' in functions?

Jonathan Aguilar — Mon, 16 May 2022 04:29:55 +0000

So, I know most people would argue that there is a lot of fun to be had with functions, but being a beginner with this language, and worse, failing to completely understand its in and outs, I must disagree wholeheartedly. Perhaps in a few weeks or months when I further my studying into Javascript, I will learn to appreciate it for what it is. Right now, it is a dread. But, what the little I know, it is most definitely interesting.
I will not sit and type here as if I am some guru of the language, because as I have mentioned, I am far from it. But functions, to me, are the heart of this language, and if you can wrap your head around how functions work, how there can be a function within a function, make anonymous functions, make a function with one purpose so that it can then be called back on later on in your code, that's definitely a good place to start.
A function usually starts with

Function

a declaration, followed by parenthesis and curled brackets. Ultimately, looking like so:

Function() {
   //code here
}

OR, it can be turned into an arrow function, like so:

placeholderName() => //code here for what is to be returned

In the last example, curled brackets can be used if there are multiple statements to be returned, meaning if the function has multiple things it can do. The word 'Function' is also eliminated since we use '=>' instead, which Javascript understands is a function declaration, rightly called an arrow function. Either of these methods work and I guess the important thing to note with these is what belongs in the code blocks, which as I mentioned before, are descriptions of what the function can do; statements. Within these we can have simple console.logs, we can run loops, etc. There's plenty that can be done and this can be its own blog post to be honest.
But wait, hold on. What about the parentheses? Can that just be left as is. Depending what you want your function to do is the answer. If you put something within your parentheses, those are called parameters, which are arguments that you will pass through the function.
Being as this is my first blog post, I deliberately want to keep it simple and also write on a simple topic. Hopefully at some point in the future I can come back to this initial post and just laugh at all the trouble I am having with Javascript and realize how far I have come. I hope.