DEV Community: JJ

CLI Tic Tac Toe (OOP Lesson)

JJ — Tue, 21 Feb 2023 01:50:10 +0000

A few weeks ago, freshly armed with a repertoire of new lingo related to Object Oriented Programming (OOP), I embarked on what would turn out to be a journey of discovery and frustration. On this journey, I learned a lot, got flustered, wanted to quit, and
ultimately forced myself to dig deep displaying some of that Grit I spoke about last year. I've had brief primers of what OOP is, having played around with C#, Visual Basic before, and really, I should know more than I do. The problem is, I never had a course like The Odin Project (TOP) push me to utilize those concepts. At least until the command-line Tic Tac Toe Ruby project!

To get started with CLI TTT, I knew I would need some classes so I started my planning, trying to implement what I had learned. I started off with what I called a Board class in a board.rb file. I then set to work trying to get the visual aspect of my game going. After much research, HEREDOCS were brought to my attention, specifically squiggly HEREDOCS. At first I ignored the comment on using HEREDOCS not realizing just how powerful they could be for what I was trying to accomplish. After some struggle, they were again brought to my attention and less than two hours later I had a working implementation of my game board and I was all smiles.

As I would find out when I finished, there were better ways to implement my design, but I'm proud that I came up with it. I had no clue how to graphically represent an array in a 3 x 3 grid. With each accomplishment, I added another tool to my belt, but I've got plenty of room to add more tools.

Then came the Player class. I knew I only had two players but I didn't quite understand how initializing my player class with instance variables for players worked. Now I understand that you can instantiate a player by calling some_variable = Player.new(name) and what happens is, when an instance is created, it automatically invokes the initialize method and if any parameters were passed to it, as long as the getter and setters are established (either using attr_reader, attr_writer, attr_accessor, or by defining the getter and setter functions manually) it will create a new player object. Prior to this section of the course, I've heard a lot of people talking about getters and setters and had no clue what they were talking about and remember feeling overwhelmed at the time by all the things yet to learn.

Now I know, and guess what? Now I'm hearing people talk about binary search trees and serialization and all kinds of other topics that I know, when I get there, it will be just another hill to climb. I climbed another hill with OOP. I'm no expert, and have a lot to learn about OOP, this I know. But I also know that with each project, I will get better and better at it. Writing about it helps as well. The biggest thing that helped me though, was having someone to ask questions of, and knowing they wouldn't just give me the answers. That's what I love most about TOP. We are trained early on to guide people to the answer so they can discover the solution on their own. I had some super supportive people helping me and that encourages me to press on knowing my peers have my back!

After wrapping up Tic Tac Toe and feeling the satisfaction that each of my manual test cases passed, I'm excited to move on to the next challenge: Mastermind! I welcome the challenge I know it will bring and can't wait to have a discussion about it the next time I write. Who knows? Perhaps I will come up with something in between. Until next time...be good!

Photo courtesy of: Photo by Pixabay from Pexels:

Summer Break

JJ — Wed, 31 Aug 2022 04:35:47 +0000

Hello! I've had a bit of a break from programming for the summer as having three highly active girls in their teens/pre-teens can be very time-consuming when they aren't engaged in school. I had a plan for the summer and unfortunately that plan had to be nixed for a new plan due to unforeseen circumstances that required me to have a more active role as Mr. Mom while my wife worked this summer.

Sure, I could have done SOMETHING, but honestly, it wouldn't have been very productive for me since I couldn't devote hours on end to my studies. I have to have large amounts of uninterrupted time set aside to focus on this stuff for it to make sense and allow me to make sense of it when it doesn't. There is nothing worse than constant interruptions when you're deep in thought processing the flow of an algorithm, or perhaps researching a new method.

The long and short of it is, I needed a break anyway, and because of my schedule change over the summer, it worked out to just take a couple months off and focus on my family. After retiring from the military, that was the one thing I wanted more than anything, the ability to devote my time and attention to my family since so many years were lost to them during deployments.

So what now you might ask? I'm currently watching a refresher video on Ruby programming, and I'll skim through the Ruby Basics course on The Odin Project. I'm enjoying learning Ruby, and can't wait to get deeper into it. I have a stock picking exercise, and a bubble sorting exercise to finish up which is all I need to accomplish to wrap up Basic Ruby.

From there I will move on to the Object-Oriented Programming Basics section which has a TON of reading and will take some time to finish. That is where I'm at and look forward to continuing my journey! Until next time...be good!

Cover Photo Credit:

Photo by Alfred Schrock on Unsplash

Calculator...Done!

JJ — Mon, 30 May 2022 16:37:52 +0000

The Beginning of the End!

I finished the calculator project! That marks the end of the first part of my TOP (The Odin Project) journey with the completion of Foundations. That also means it was time to pick out the next part of my journey and decide between learning Ruby on Rails, or continuing with JavaScript and learning NodeJS.

I never really struggled with this part. I knew the decision was going to have to be made and right up until the start of the final project (Calculator) I had my mind set on going with JavaScript and NodeJS. Then, while working through the project and getting help in the Discord, some things were mentioned that piqued my curiosity and for the first time I decided to at least check out the Ruby path and see what it had to offer. Upon inspecting the coursework, I realized the Ruby path also required the completion of the JavaScript course. The only thing I wouldn't be taking would be the NodeJS course and if/when I felt inclined, I could go and take that as well if needed.

I say all that to say, the Ruby course seemed more challenging to me and thus influenced me to picking that course. That is also why, I haven't really written anything in the last two weeks or so. I've been busy reading and studying a new language.

Ruby

I'm not going to pretend that I'm not excited about my decision to learn Ruby! Ruby has some REALLY cool features and the way the language is designed, it forces you to use Object Oriented Programming (OOP) because everything is an object in Ruby, and every 'function' is a method of an object. It has been slightly frustrating working through some of the key differences between JavaScript and Ruby, but for the most part it has been a seamless transition and the learning is going great thus far.

Since starting the Ruby path last week, I've gone over the following curriculum:

Basic Data Types
Variables
Input and Output
Conditionals
Loops
Arrays
Hashes
Methods
Debugging

I have a few more topics to cover before Ruby Basics will be completed which should be done within the next few days and that leads into the first few projects that will utilize Ruby. The projects are four mini projects that are designed to solidify the previous training. They are also the precursor to the major topic of OOP that will be followed by Tic Tac Toe and Mastermind projects.

Closing Thoughts

I'm genuinely excited about where I am in my journey to becoming a software developer. The idea that just a few months ago I could only program minor snippets that didn't really do anything but utilize the console, to where I am now, having designed and built three applications, one being a usable calculator (for simple calculations), I can't be more pleased with this program. The Odin Project is the real deal. As with anything, the more you apply yourself and put into it, the more you will get out of it. As I progress through part two of my journey in TOP, I will continue to apply myself to what I'm learning and will finish strong!

Photo by Polina Tankilevitch: https://www.pexels.com/photo/a-cellphone-calculator-and-cash-on-a-flat-surface-6927360/

Questions

JJ — Tue, 17 May 2022 04:58:25 +0000

Introduction

Invariably as you progress through your learning journey, you're going to get stuck on a piece of code. What do you do when you get stuck? There are so many resources available to us in today's world that we didn't have years ago. Before message boards existed and became popularized, you would either need a book, or you would need to know someone to solve a lot of problems you ran into whilst coding. Stackoverflow is a major resource for programmers to get help. It wasn't founded until 2008. Before that it was hit or miss on where to get help. Reddit was a popular choice before Stackoverflow and it wasn't created until 2005.

Asking questions is a privilege that shouldn't be taken for granted. We now have the freedom to bridge the gap of our knowledge by tapping into the knowledge of others with ease. When do you ask questions though? Is it cheating to ask questions? I see questions like these come up a LOT in our discord community at The Odin Project (TOP). I will answer these questions and more in this article. It is important to understand questions, and how/what/when/why to ask them.

How/What/

How to ask questions is perhaps the biggest hurdle we see in the dev community. The majority of beginning programmers come into the TOP Discord community and pretty much just ask for help with no context whatsoever for their issue. They either say "can someone help me?" or, they'll go so far as to provide a snippet of code with no context for the rest of the code that works to make their snippet functional. So, how should one go about asking a proper question?

I'll first provide for you my process then the TOP approved resource that should be followed when asking for help. My process is simply to ensure that I've included all the necessary information that someone would need in order to help me. I've never had someone ask for additional information thus far because I'm careful to assess my issue, explore possible solutions, and then seek help when absolutely necessary.

What I do is simple:

After getting stuck, I work to ensure I'm truly stuck by trying various solutions I can come up with on my own and I document my efforts.
After realizing I'm truly in the stuck position, I then transfer my code to some code-sharing service like Codepen.io, jsfiddle, or my favorite repl.it. I then copy the link to the page and take that with me to step 3.
I go to the information site where I will seek help, for me, it is TOP's Discord, for you it might be stackoverflow.com or some other message board. These steps work for all help! I then begin typing up a clear, concise request for help. That means I indicate in bold type something to the effect of "The Issue: " followed by what my stated problem is ie. "I'm trying to create a grid of <div>'s but for some reason I can only get one horizontal row of cells".
Then I indicate "What I've Tried: " ie. "I have tried creating a for loop and a while loop but neither seem to work. I also tried to nest a loop inside a loop but that didn't work either. I don't know what else to try?"
I then include my code. I paste a link with my code-sharing site or I paste the code (for smaller snippets) inside the code tags for whatever medium you're asking for help on. Discord and Stackoverflow both have code tagging features built-in. With experience you will learn what code is necessary for what you are seeking help with but for now, it is best to include it all. It really isn't hard to ctrl-c/ctrl-v after some clicks and drags of the mouse to select code!

That's it! Once you have clearly stated your issue and given all pertinent information you can about your problem, the only thing to do is wait for someone willing to assist which generally doesn't take long.

Why?

Why do you need to be this in-depth? There are several reasons, but the most important is because you want help. If you are seeking help, then you have to fulfill your end of the bargain to make helping you as easy as possible for the person on the other end of the line. It shows care for yourself and others. If you care enough to want a quality answer, then do your best to provide as much detail as possible and supply a quality request.

Another reason is because you want the person who will potentially help you to be able to be fully prepared to assist you in as quick a time as possible. They are giving up their valuable time to help you, for FREE! The least you can do is arm them with the ammunition they need to fight for you!

This article by Gordon Zhu is a really solid resource that everyone should read in the dev world. It is TOP's go-to source of inspiration for beginner programmers on how to ask for help. I basically mimic this minus a few things I should probably adhere to more strictly.

When

Most people get stuck on when to ask for help. There are people that need their hands held and ask for help before even typing a single line of code, then there are those (like me) that wait too long to seek help out of desperation to solving the problem on their own. What we need is right directly between those two extremes.

The right time to ask is after you've devoted enough time to the problem to have sufficiently come to the realization that you are not capable of moving past without some guidance. What does this look like in a practical example? You've been working on a piece of code to get a click event handler to fire for an hour. You have a solid understanding of the code involved but for some reason it just isn't working. You've tried several implementations of the code to try different things and nothing is working. You've researched multiple search terms to address your issue and nothing is working. It is now time to seek help. After following the above-mentioned method to seek help, someone helps you within a few minutes and they bring to your attention a trigger that gets you to think of a different solution to the issue. After trying it, it worked and you solved it on your own, with just a little guidance. That is what seeking help and implementing said help should look like.

Notice I didn't say the helper provided the proper code to get the beginner going? That should never happen, and if it happens to you, try your best to ignore the direct help and ask to be guided to a solution. When you are just given the code, you are coding along with someone else vs. solving the problem on your own. You may as well copy a YouTube video that gets you to code along with them while they do all the problem solving for you.

Conclusion

Asking questions is a fairly tough concept to master. I never knew right off the bat that it was a process to ask questions in the developer world. It makes sense though. To get the help I want, I must invest properly to ensure the one helping me has all the information they need to provide quality support for my issue. Never forget that since they are donating their time, you should bend over backwards to make them want to help you, after all, you are the one that needs the help! Until next time...be good!

Photo by Pixabay: https://www.pexels.com/photo/questions-answers-signage-208494/

JavaScript Exercises

JJ — Thu, 05 May 2022 17:19:48 +0000

Introduction

With Etch A Sketch done, I was glad to finally be able to move on. I honestly thought it might take me a full month to complete that project. Thankfully, I was done in just over a couple weeks and now I've moved on to learning about object oriented programming (OOP) concepts, as well as working through more JavaScript Exercises found here.

Calculator Exercises

The first set of functions that had to be made will tie into the final project in Foundations which is building a calculator. I had to create functions for adding, subtracting, multiplying, powers, and factorials. The first few were pretty simple, but factorials gave me a bit of a hard time. I spent about an hour trying to figure out how to manipulate the code to not decrement n while decrementing n-1. Once I figured that part out, it was quite simple to put together and I had a blast figuring it out.

Today I will be working on palindromes, and I have a pretty good idea of how to go about this one which seems easy enough just to reverse the string and store it in a new variable after stripping all whitespace and punctuation and then compare that to the original that is stripped of punctuation and whitespace.

If I get palindromes done fairly quickly, I'll get going on the Fibonacci sequence and try to implement that into code. I briefly looked at the Fibonacci sequence in my Discrete Mathematics class this past semester, but I don't really know the ins and outs of it in detail so, that one might give me a hard time. Once these exercises are done though, I'll be free to start the final project of Foundations before I move on to deciding which path to take.

Conclusion

As I get closer and closer to the end of the first part of The Odin Project, I'm thinking more and more about which end path to take. Ruby on Rails, or NodeJS. My first instinct was NodeJS from the get-go, but there are some interesting projects on the RoR side that I'm taking a liking to. I probably will stick with JavaScript and NodeJS because honestly, it seems like that would be a more useful stack for me given my market which I've never seen a job opening for RoR but have seen hundreds for JavaScript.

For now though, I'll focus back on the task at hand which is to solve these algorithms. The exercises are fun. I enjoy the test driven development as a means to check my work and see how I'm progressing, and whether my work is done or not. I hope each and every one of you are well and healthy. That's going to do it for this one, 'til next time...be good!

Photo by Markus Spiske: https://www.pexels.com/photo/black-laptop-computer-turned-on-showing-computer-codes-177598/

Etch A Sketch Done!

JJ — Wed, 04 May 2022 02:31:10 +0000

Introduction

I finally finished the Etch A Sketch project at The Odin Project: Etch A Sketch(TOP). What a relief! I remember a little over two weeks ago when I started that I was daunted by the task. I had never written a program before that had a user interface (GUI) that others could interact with. The majority of my programming was mainly either forms, or in the console. I had a genuine complex that perhaps I was biting off more than I could chew. Why?

Fear and Self-Doubt

I was mostly afraid that my document object model skills were sub-par. I didn't think I would be able to figure out how to start the grid. I had a lack of confidence in what I had taught myself over the past few months. None of those thoughts mattered then, and they obviously don't matter now since the project is done. You can go check it out for yourself: Etch A Sketch in JavaScript.

Overcomer

For the longest time, when I first joined the Discord for TOP, my name was Warmaster-I am an overcomer! I had written it like that to remind myself in the early parts of the course that this wasn't always going to be easy. There would be times where things would be difficult and I'd have to have some grit, resolve, and sheer determination to finish strong. Today was one of those days. I was tired of trying to make the rainbow button work and I had almost convinced myself to re-label the rainbow button to accurately reflect how it was working (Random Color Brush). I was also going to try and be content with the darken and lighten buttons not working and planned to just remove them. After all, I had the basic requirements completed for the project.

What stopped me? Myself. I stopped me. I remembered that I am an overcomer and that I could accomplish what I set out to do. I wanted to be an over achiever in this project because I had the time. I wanted to implement my own feature set to be different than others and learn what it takes to plan my own ideas out. It was fun, it was rewarding, and I don't think I would have been able to say that had I just scrapped some ideas just for the sake of moving on. I was in the shower and I had this fleeting thought that, I wouldn't feel right if I didn't finish strong, that which I had started. It took me a mere 4 hours to get those things going once I had some directional guidance from a super patient peer of mine who goes by the name 'snaitseb'. Once he showed me how to properly implement "modes", I was flying. I have a lot to study up on after the lesson but I feel a lot more confident with pass by reference functions in JavaScript.

Conclusion

Never sell yourself short. Don't stop short of your intentions in whatever it is you set out to do/achieve in life. You are just as capable, if not more capable than anyone else. I always say, if I can do it, so can you. Join me in being an overcomer. Stick to your guns, and only change or modify from the plan if the change is 100% necessary. Until the next one...be good!

Photo by Malte Luk: https://www.pexels.com/photo/crop-man-writing-on-whiteboard-in-modern-office-5310564/

Your Personal Code Repository

JJ — Sat, 30 Apr 2022 05:33:47 +0000

Introduction

I ran into a situation during the coding of a grid in the Etch A Sketch project that I'm elbows deep into right now, where I needed to repeat a string a certain number of times. The specific number of times the string needed to repeat itself was variable in nature, but as soon as I saw it, I was filled with relief. I had seen that very piece of code just a few weeks ago when I did the JavaScript exercises of Fundamentals Part 4 in The Odin Project (TOP) where we had to solve algorithms. Luckily for me, I had decided to save all those algorithms in a JavaScript file with comments explaining their use.

This journal entry will be a bit more of a guide than my previous posts. As I get more comfortable with programming, I intend to write more and more informative articles. For now though, I will only slowly introduce informative writing as I feel like I am confident enough in the subject matter to adequately write/teach on it.

Code Repository

Since this is tagged for beginners, I will assume not everyone that reads this will know what a code repository is. A code repository is a place that stores code. It can be as simple as a text file with code you've written/found, or as big as GitHub where they offer version control and branching services that allows you to work on collaborative projects with other developers.

What I'm talking about today is a personal code repository for pieces of code that may or may not come in handy some day down the road. Specifically, my code repository is stored in a random projects folder on my hard drive, and I've named it codeRepository.js:

figure 1- Folder Structure with codeRepository.js

I started this file with the idea that the code block I wrote for the repeatString() function might someday be useful and, that code block took me a fair bit of time to figure out and I didn't necessarily want to have to start over from scratch should I possibly need them later. Little did I know that this particular function would be useful so soon after writing it. So, after the first algorithm (repeatString) was done I opted to stash it in a new file I aptly named as you've seen above in fig. 1.

Fastforward three weeks and two projects (working on the second one now) later, I have just finished the design for Etch A Sketch and I'm working on the code for the grid. CSS Grid being new to me, I was reading the MDN and looking at the various ways to implement the grid-template-columns and I was immediately drawn to the <flex> method and knew that was what I was going to use to implement the grid's rows and columns. The grid was going to be made up of square <div>'s inside a gridContainer and that meant the width and height of the <div> elements needed to be equal which is what made this such an appealing choice.

With my mind made up, I got busy coding the grid and figuring out how to implement the 1fr units for the columns and rows. An example of what the CSS code looks like for the <flex> units of the grid-template-columns is below:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}

As soon as I saw how the grid-template-columns (and rows) were structured with the code I knew I had a function previously built that would save me some time in implementing and I just had to use it.

NOTE: Keep in mind I'm a beginner. I know about the repeat() method and I gave it a bit of a go to implement it, but in the end, I opted to use the following method because it was something I knew worked and could implement more feasibly.

Implementation

At first I wasn't going to share my code because being a beginner, I know there are a lot of ways my code could be optimized. However, one of these days in the not-so-distant future I will be more knowledgeable of those ways, and there is a process to get there and this is part of that process so, here you have it, my implementation of the repeatString() function that I somewhat luckily had the foresight to think to save:

const repeatString = function(string, num) {
    const err = 'ERROR';
    let result = '';
    if (num < 0) result = err;
    for (let i = 0; i < num; i++) {
        result += string;
        }
    return result
};

function defaultGrid() {
    // create a 10x10 grid
    let colRows = repeatString('1fr ', 10);
    // create columns
    for (let i = 1; i <= 10; i++) {
        // create rows
        for (let j = 1; j <=10; j++) {
            let grid = document.createElement('div');
            gridContainer.append(grid);
            grid.className = 'grid';
            gridContainer.style.gridTemplateColumns = `${colRows}`;
            gridContainer.style.gridTemplateRows = `${colRows}`;
        }
    }
}

In the above functions, in the first function I have the repeatString() code I saved to my personal repository, and in the second function is the default grid when Etch A Sketch is first loaded. In defaultGrid() the colRows = repeatString('1fr ', 10); is calling the function I created several weeks ago and I didn't have to modify it in any way. All that does is repeats the 1fr string ten times with a space between each unit and it is used for both the columns and the rows since again, the grid <div> elements are square. This is what it looks like in Dev Tools after the grid is created:
figure 2- Dev Tools CSS Grid: inline style showing the grid-template-columns units of measurement

Conclusion

I'm aware this isn't necessarily the most ground-breaking discovery ever, and I don't intend to portray that. What my intention is, however, is to show you that when you spend a lot of time on a piece of code, and there is a chance you could use it later on, don't hesitate to put the code snippet in a file somewhere. Before long you'll be organizing your files by types where DOM code blocks go in this file, database-related code goes in that one, algorithms in another one, the list could go on. Ultimately, the idea is to save time. Being organized enough to be able to quickly recall where you saved certain code pieces will save you time on future projects. Since I just got started learning this stuff and I'm already reusing code, you will too!

I hope this was helpful to you and it prompts you to want to save code snippets here and there as you find them useful. Even if there is a remote chance you could use it, it is worth it to save because time is money! It won't be long and you'll be using one of your saved code snippets guaranteed. That's it for now, until the next one...be good!

Cover Photo by Luke Chesser on Unsplash

It WORKS!!!

JJ — Fri, 29 Apr 2022 23:06:38 +0000

Introduction

There is no greater feeling than accomplishing something that has given you a lot of grief. Can you imagine what it would feel like to climb a mountain when you finally reach the top? For those of you who have done such things, that feeling is the biggest rush ever. You've overcome many obstacles in your path to get there and you get the dopamine rush that releases all the built up tensions that once hindered you but now intoxicates you with a joyous relief. I had such a moment this week, and I'm about to tell you all about it!

The Buildup

In my journey to complete The Odin Project, I'm currently working on the Etch A Sketch project (Etch A Sketch). Prior to starting this project, I had a preconceived notion that it was a very tough project that would take me a month or more to finish. I was hesitant to start for fear of failing. It just felt like it was more than I could handle at the time so I procrastinated until my university semester was over and I had no more excuses. I dove straight in and got to work.

The Work

The first thing I did was decided to create the GUI. I had visions of this being a showpiece one day for my portfolio. Until that idea was shot down by several of my peers in the Discord Community for TOP (Discord). I dove in and had what I think is a beautiful design going within eight or so hours. which you can see below:

With the GUI mostly done (I had to make a few adjustments along the way but it was 98% completed), I was ready to begin "the hard stuff". I immediately set out to get the grid going and I struggled with that. I struggled a lot. I was trying to implement a two-dimensional grid with a single loop and I'm sad to admit, but it took me several hours to figure that out. Once I put the second loop in there, it was a thing of beauty and let me tell you, I was overwhelmed with joy that I had finally achieved success. My grid had come to life and I could see all the various cells that I would one day soon be coloring in with my mouse. Proud of my work, I took the rest of the day off but not before lining out my work for the next day.

TOP doesn't require a grid toggle button/checkbox to toggle the grid on and off but I just had to have one. I was intent on having a grid toggle because I liked the idea of feeling like you're drawing on paper instead of graph paper! I learned a LOT about the Document Object Model (DOM) and parent and child relationships in this seemingly insignificant task of setting a measly little checkbox to toggle a class name from .grid to .noGrid. This really wasn't a difficult task, after looking back at it, but I looked at the logic all wrong and went about it from the wrong angle and spent about 10 hours too many on something that took 5 minutes to code.

Lessons Learned

Let me tell you something, when you are really struggling with something, and you eventually succeed, THAT my friends is the moment you learn the most. Once the realization of what your mistakes were sinks in, and then you contrast that with what is working and how it works, you gain the most from your period of struggle. I had difficulty understanding the difference between classList and className. Now, I don't think I'll ever forget that classList has methods that you can use to add and remove, toggle, and replace class names that are previously defined with className

I initially shied away from using the DOM as much as possible and it wasn't even intentional. I just had this instinct to try and handle things without looking at the DOM and I learned real quick that the DOM makes things much much easier to deal with. Who knew you could access all the elements of a parent with parentNode.children? The answer to that is obviously those that study the DOM and how it works, but I learn by doing and I learned a lot by the end of my experience in dealing with the grid, and the grid borders.

Conclusion

I am having a BLAST with Etch A Sketch despite the myriad of issues I'm creating for myself. I'm knocking things out one button/checkbox/slider at a time and it won't be long and this project will be in the rearview mirror. It will forever be ingrained in memory just how much this project is building on my knowledge of programming concepts. I can feel how much I've improved from 3 months ago when my journey first began. I'm excited and can't wait to keep pressing forward. Tonight, I'll begin the draw functionality and begin hooking up the colors to the "paint brush". It should be fun. After each and every minor victory, I can't help but be elated about my progress and what I've achieved, from where I started, to where I am now. I'm doing this. Until the next one...be good!

Photo by Jason Hogan on Unsplash

Etch A Sketch in Javascript

JJ — Mon, 25 Apr 2022 04:36:02 +0000

There is something exciting about starting a new programming project! I love that it feels fresh, all the problems from the last project are (theoretically) solved and here we are, embarking on a new journey to create some radical new problems that have yet to rear their ugly heads. My next project will be different from anything I've done to date. It's the Etch A Sketch project from The Odin Project (Etch A Sketch).

Overview:

Etch A Sketch is a "doodling" app of sorts that will allow the user to draw on a grid of square <div>'s. The requirements per the project guidelines are to:

Use JavaScript to create a grid of square div's (not directly coded into the HTML). The grid can be created using any method of my choosing so long as it's not coded directly.
Set up a hover effect that changes the grid background colors when the mouse passes over the divs. I plan to deviate from this instruction slightly and will use a click-and-drag technique as I feel it offers more control over the "painting" on the canvas.
Add a button that will clear the grid and ask the user for the number of squares to use for a new grid. Again, I will do something different here. In trying out others' version of this where they strictly adhered to the instructions, the popup caused the user to immediately start coloring the grids in after clicking "ok" on the popup box which I found counter intuitive.
Optional: Use a random button that paints in a range of colors that gives a rainbow effect. Then have another button that paints each pass at 10% of black so that after 10 passes the grid is completely black.

In going over these instructions while writing this, I realized that I left off the "RGB" rainbow button, but I did add other options to expand on this project just a little bit to give it my own flair. This is a sneak peek of my GUI that I finished last week before I took a three day weekend to spend time with family:

As you can see, I added a "brush color" button, a "background color" button, a "lighten" button, and a "grid size" range slider input, and a grid toggle checkbox. These were added in addition to the optional and required elements above.

For the grid size slider, as you increase the size of the grid, the size of the cells will get smaller as the canvas will be a constant size. One of the things I haven't seen thus far is a background color changing option. Most everyone has had a white background which is common for a canvas, but someone may want to have a pink background and paint on it with blue, so I felt like mine should provide other options that were useful and forced me to think outside the box.

One of my peers' renditions of this project implemented a grid toggle button that gave the canvas effect which I loved. I thought it was cool that you could use the grid to line things up, then turn it off if you needed it for a preview. So, I decided then, when I saw it, that I was going to implement the same thing in my own project.

Having the GUI done, aside from minor changes such as adding the rainbow color option, I will shoot to have the rest of the project completed this week. Once done, I will add a new blog post that will summarize the project and what bumps in the road I faced etc. I did spend half a day last week working on the grid and I was a bit stumped, but I did come up with some things to try while spending time with family this past weekend and I look forward to trying those out and making some progress! Until the next one...be good!

Photo by @felipepelaquim on Unsplash

Finished!

JJ — Wed, 13 Apr 2022 06:34:51 +0000

Intro

It feels good when you finish a project doesn't it? I just LOVE to complete something I set out to do. I just completed the project I've been slowly working on over the past ten days or so and although it didn't happen as fast as I'd have liked for it to, it happened and all my ideas were implemented and I learned a LOT!!!

I actually finished a couple days ago and I've been working hard on finishing my last two weeks of classes at OSU-IT up a little early if I can. I'd like to get a jump start on the summer break where I can really work hard on The Odin Project!

What's Next

A project wouldn't be complete if there wasn't another one lined up. I'm about to be in the planning phase for it, and I'd be surprised if this didn't take me a few weeks to knock out. I have the time to invest so, if there is something I don't understand, I can take the time I need to stop and learn all about that, throw some code in my editor and play around with it until I understand what is going on.

The project I'm working towards is the Etch A Sketch project. I have a few ideas sparked by some of my peers in TOP that I want to implement and I want to implement at least two of my own ideas to make it my own. I have not looked at anyone's code, so this will be 100% my own, just inspired by others' designs. I am super excited to be doing this project, I think it will be a huge learning experience and will incorporate quite a few things I haven't had the opportunity to play around with. Specifically, coding flexbox using DOM manipulation. Aside from the boilerplate, my goal is to implement all HTML through JavaScript.

Closing Thoughts

I had a lot of fun with Rock Paper Scissors. It is a very simple program, but to me, it is an accomplishment. I've never completed a project that I started until now. This will be the first of many as I make my way slowly through TOP. My next project, the Etch A Sketch is underway and I have a sneak peek of my planning for it:

I'm looking forward to making this one a reality! Until the next one...be good!

Photo by Brett Jordan on Unsplash

Grit

JJ — Sun, 10 Apr 2022 03:51:38 +0000

So what is grit, exactly? The Google dictionary defines grit as:

courage and resolve; strength of character.

I'm currently dealing with a bit of a setback in my current project. Despite how small it is, the Rock Paper Scissors project I'm developing through The Odin Project (TOP) has hit me with a few bumps along the way.

In my former self, the self that only dabbled in code a little here and there with no intention to ever become a developer, I would have given up and just gone on to the next shiny thing in sight. Now, however, I'm a lot older, more mature (unless you ask my wife), and excited to forge a new path for my future. I HAVE to finish this. This is not something that I can just skip out on. My future depends on my ability to grind through the difficulties associated with learning new things.

This is how you demonstrate grit. It starts with a purpose, a goal. Without a goal, there isn't enough motivation and determination to push through difficult times. I've been having a seriously difficult time and had many reasons to walk away.

My first roadblock was understanding callback functions in relation to scope of variables. I was trying my best to maintain local scope but because of the way I was using my callback functions, I kept getting errors. The biggest problem was, I was unfamiliar with the errors I was receiving and didn't know how to pinpoint them and debugging with Dev Tools was not productive since the callback function was dumping me abruptly. After several hours of playing with it on my own, I finally opted to seek help and formed a good question, provided my code, and waited for some help.

Help arrive and after another hour of back and forth with my hero, I finally had an understanding of where I was going wrong and why my callback function was not working properly. So, I left a note for myself, took a break, and came back to it the next night refreshed and rejuvenated.

I spent a few minutes reviewing my code, reading my notes, and planning my fixes. Within an hour I had the logic of my program working, and the beginnings of my next problem. I want to stop there because I'm still in the process of learning about how to fix my problem, but the focus of this journal entry is simply to understand that when problems arrive, I have several choices I can make to overcome my problem:

The worst choice would be to walk away and just not ever program again. But then I would never have the benefit of becoming a programmer
I could take a break and hope that coming back with a fresh mind and possibly a different perspective might spark a resolution
I could ask for help from the community, or lastly
I could just keep plugging away and keep being frustrated in hopes the answer falls into my lap

In my case, I decided that after several hours of effort, I simply didn't understand an important underlying concept and opted to seek help from a peer within the TOP community. After a brief back and forth, I was a lot closer to a resolution but it hadn't sunk in just yet. So the next day, after giving it the college try, I again sought help and the same person helped me and that's when variable scope sunk in and I was able to better understand how to get my code working.

Sometimes you just have to be willing to get outside help to expand your mind to seeing things that you couldn't previously see. Nine times out of ten, the person that offers to help you will have the perspective you couldn't see to guide you to your own solution. Don't take this as "I will never get it because I had to be shown", but rather, take it as "I now better understand this code due to the wisdom of this person who has been doing this longer than myself".

Getting help from others should always be a last resort after you've exhausted all avenues on your own. But take with you the mentality that you are about to learn more. After you've put so much time and energy into your project, when you do finally piece it together and you see it working as you intended (or mostly), then you will have a truly satisfying experience. Pushing through to this point is demonstrating resolve, determination, or as TOP calls it, grit.

I encourage each and every one of you to dig deep on those frustrating code days and keep going. You've got this! Until next time, be good!

Photo by Towfiqu barbhuiya on Unsplash

Planning...

JJ — Sat, 02 Apr 2022 01:52:56 +0000

Intro

Planning is perhaps one of the hardest areas for me to figure out in my journey to becoming a developer. My natural inclination is to jump in and start writing code. What does planning look like to you? I'm writing this article out of a desire to put to words what I expect from my own planning. What has worked to date and what hasn't, as well as researching what I SHOULD be doing!

For me, I'm more of a visual kind of person, unless of course the project is purely console driven code, then I'm out of luck there. If my project utilizes a GUI or is a website, then I like to draw it out. I have GIMP on my computer, but that seems a bit overkill for what I need and someone turned me on to this website called Excalidraw.com where I can draw up my web page designs, or design the interface of my latest GUI-based app.

The first time I used it, I was struggling with parent-child relationships for a tricky flexbox design I was building for the Landing Page project. The following pic is an Excalidraw rendition of what a portion of the website was to look like so I could see what <div>'s were containers (parents), and then what elements were the children to the containers.

As you can see, the rendering is clear enough to get a good idea of what the elements on the page should roughly look like, and where they should be located. This helps identify what needs to be grouped together, and where to put some flex to the design. Unfortunately, every project won't necessitate the need for extra tools like Excalidraw. My current project is a good case in point.

Current Project- Rock Paper Scissors with GUI

I wrestled with myself on the planning for this because:

I already had a working console version of the code and I haven't ever refactored code before.
I'm not a designer, so I won't put any fancy designs to it right off the bat (I will, but the goal is to get user interactivity and displayed results functional first.)
Where to start first. This step is helped by the instructions which allude to removing the logic to play five rounds from the console version of RPS from the game() function.

Come to find out, I was really overthinking things (as usual for me). I need three <button>'s and a <div>, possibly another button for added functionality but that isn't required so I'll worry about additional details later.

In thinking things through a little bit more, if I have three buttons, then I'll need event listeners for each button click. Then I'll need to have the text that normally is logged to the console be displayed inside some sort of HTML tag, and that is what the <div> is for. From there, it is a matter of making sure the game only plays five rounds, the running scores are displayed, and add some styling.

There are always details that are missed and that's where refining the plan as you need to comes into play. Turns out, in this case the only thing I needed for planning was a text editor. Because I'm blogging this, this was all the planning I needed and my thought process played out right here. Now I'm going to go figure out what DOM methods I'll be using to make all of the above happen. Until the next one...be good!

Photo by Pixabay: https://www.pexels.com/photo/black-and-white-browsing-business-coffee-265152/