zuzulearnstocode

[zuzulearnstocode]

Getting Distracted

One thing I've always struggled with, and something I'm sure others also have problems with is getting distracted when working on a project, especially when you are also trying to learn new things alongside that project. I often times find myself not wanting to work on a project after starting it due to finding something newer and equally interesting to turn my attention to, be it a new project idea or some form of entertainment, I always inevitably find something else.

Now, how do I fix this? Honestly the answer took me quite some time to come to, and whenever I say it out loud it sounds like more of a joke than a serious solution, but...

Just let it happen. Get distracted.

Its kinda just that simple. If you spend all your time trying not to be distracted by something, you're actually just letting it distract you without satisfying the urge to interact with it at the same time. The simple solution to that is to just let it happen, let yourself be distracted by the new shiny thing.

Breaks are important. If you find yourself fighting off distraction while trying to work, just step away from your work. Allow yourself to relax and follow your distraction to satisfy that urge, and then come back to your work feeling refreshed and no longer constantly thinking about fighting that distraction.

For myself, I tend to work for about an hour before finding my mind wandering, be it to a different topic similar to what I'm working on or simply wanting to check to see if my favorite Youtubers have released any new videos today. When I find myself having these wandering thoughts I simply stop working, save my progress and allow myself to be distracted, to have that refreshing break to reset my thoughts, and it always allows me to come back to working much quicker and better than when I try to fight the distractions.

[zuzulearnstocode]

Step 3. Staying Organized With Components

Something important to remember when coding (that I still struggle with every time I start something new) is staying organized while working on a project. Not only is this important while you are working, but will also come in handy if you ever have a need to return to your code later. Whether it be to troubleshoot a bug or to see what you did so that you can use it again in a new project, or even so that someone else will be able to read your code, staying organized is the first step to making sure that process goes smoothly. Luckily, React makes that quite easy with the ability to create "components" that you can then piece together however you like!

To start with, we'll need some more files to move our code into... and since we're aiming for organization here, lets put them into folders as well!

There we go, nice and simple and hopefully easy enough to understand their function (which is another part of proper organization that I personally struggle with). With this we can start moving the HTML from our App.js into these components, where it will be easier to add new content to each of them without making a mess around the others!

To do that, we'll need a few things.. Namely, we'll need to "import" our components into App.js and call those components in place of the HTML we used to have.

The order we call them in our App is important, just like when we first wrote them in! Now we've got them imported, we can probably guess what we need to do next, which is of course to be sure we're exporting something in the first place!

Let's take a look at our TopInfo component to see all the things we'll need to get that done...

Huh, this looks just like our App.js file, with all the same little pieces! This component does its own importing, has a named function that returns some HTML and then finally exports that function at the bottom to be used in other components and files!

Once we've done the same to our midBox and bottomBox HTML that we've moved out of our App and into components we'll only need to do one last thing in this little exercise of organization, and that's to move our CSS for each into their own file, so that when we want to make quick changes to them later we won't have to go search index.css to find them first.

And that's it, now we can start adding things to each section without worrying about making a mess of the other sections!

[zuzulearnstocode]

Step 2. Getting Excited by Starting a Project

One of the most important parts of learning something new is being excited and motivated so that you can enjoy the learning process while also (hopefully) being engaged enough to actually remember what you're learning. One of the best ways I know to achieve that is to start some sort of side project outside of school, so that's what I've done and will be talking about in the next few posts as I continue to journey into the world of coding.

When it comes to myself and getting excited about programming, the first thing that always jumps into my mind is to make some sort of game, or anything where the main focus will be the user interacting with the app on a more casual, recreational level. To that end its important to start by imagining a simple goal to achieve, and then building on that by creating a basic framework of that goal to help you decide what steps to take to start making progress (like making a rough sketch before you start drawing, or a scale model before building a large structure).

When it comes to making an app, the first thing I want to do is to decide where everything that will eventually be in my app will appear on the screen, and that can be done pretty easily with a few lines of code!

We can start by defining a few elements and giving them some simple class names and ids to help us control what they will look like.

For now we are going to have three "boxes" in my parent "body", which will later hold the different sections of content that we want the users to be able to view when they're interacting with the app!

Now that we have some basic HTML on the page, we are going to want to actually see an area that these "boxes" will take up, so now its time for some CSS to help visualize what we have going on.

Starting with giving our parent "body" some height so that all the children "boxes" have some room to work with, along with giving the "boxes" some basic dimensions and a border that we'll be able to see on our page. This alone will let us finally see something on the page, but for now all our "boxes" will be the same since we only targeted their class name.

Not a problem, though, since now all we have to do is give our "boxes" their own height individually using their id tag!

With that done we've now got our three "boxes" filling the space of their parent "body" element, and will be ready to receive some content to display as well!

From here it will be much easier to visualize and separate our next steps, or even make quick adjustments to what we've already done so that we can make sure everything looks exactly how we want it to!

Next time we'll start filling in these boxes and hopefully make our page worth looking at, instead of just some blank, white boxes.. But at least now we have somewhere to start!

[zuzulearnstocode]

Step 1. Re-Learning how to Learn

The first and hopefully biggest hurdle in my journey to become a Software Engineer has been learning how to switch from my mostly NEET lifestyle (waking up and gaming or otherwise wasting time all day, basically every day) to not only waking up for classes almost every day but also forcing myself to study and continue learning in my "free time" between classes.

I can't say for sure yet that I've been successful in actually forcing myself to be productive enough to keep up with my studies, but at the very least I've been able to keep my sleep schedule in line to make it to class every day. The hardest part of switching to this new schedule was telling my body when to sleep, instead of letting my body choose that for itself, and even once I got that down it has been difficult to make myself pay attention to class so early in the morning, since in my previous cycle I would usually spend multiple hours waking up and getting to a functioning state.

All that said and in mind, how did I do it? How did I tackle these lazy-life induced issues and turn my sleep schedule on its head? Well the obvious and probably most common answer to doing something like this would be "coffee, lots of coffee" but unfortunately for me I've never really enjoyed coffee without enough sugar to completely overwrite the flavor so that wasn't really an option. Instead, and this honestly sounds silly to even think out loud but it really did make a difference in how I woke up, but what it really took to be able to switch to this new schedule was simply forcing myself to actually eat breakfast first thing in the morning, even if its just a banana or a peanut butter sandwich! I'm sure everyone has heard while growing up that "breakfast is the most important meal of the day" or something similar, but I'm also sure that I'm not the only one that at some point in their life just sorta stopped listening to that message and started skipping meals non-stop. Well now I'm here to say that honestly and truthfully, breakfast before class is definitely a huge part of how I'm able to get myself out of bed and get straight to work without several hours of YouTube and boredom first!

Once I had figured out the colossal challenge that was "waking up", I had to figure out how to adjust to being productive all day instead of simply being bored and trying to find something interesting to do until my friends woke up or something else came around to hold my attention. This problem has had a much less straight forward answer, since unfortunately there is no quick fix to not feeling motivated to be productive, so anything more than "just try not to let your usual lazy routine distract you" is really going to come down to personal preference and will of course have varied results. What has worked for me so far has been to start my day in full work mode, no games or social chats or anything like that for as long as my attention span can manage, and then slowly allow myself to ease into being "distracted" while also continuing to work, even if that means being less productive.

"Anything worth doing is worth doing badly.", or otherwise "Any effort is better than no effort.", even if you don't do it very well, you're at least trying and that means progress is happening. So hopefully as long as I can keep waking up, keep trying to work without getting distracted I can someday get to a point where I don't even realize how hard it was to get there.

[zuzulearnstocode]

Step 0. Who am I and why am I here?

Hello! My name is Zuzu and welcome to my "Learning to code" blog. This is basically my first attempt at blogging anything, pretty much ever, but hopefully it can be helpful both for me as I learn and one of you that's reading this some time later!

When it comes to me and "learning", there hasn't been much of a relationship for several years since I've been doing that typical lazy sort of "just get any job you can" job searching since I left High School. For some reason it took me nearly 10 years to realize that maybe, just maybe I should stop hopping from stocking job to fast food job and back, and instead I should get back to something I actually enjoy so I can find something to do with my life that makes me feel good about what I'm waking up for every day. That's where my journey into a coding bootcamp comes in, and that leads in to the main reason for this blog, because not only has that journey started just recently, but it already has me excited and enthusiastic about what may be coming in the future!