Struggling With Mystery Word Game

The instructors weren’t kidding when they said that this is a big weekly project (The Mystery Word Game) that we have to be very careful with our programming. The purpose this weekly project was to implement the game Mystery Word as a web application where the user will be playing against the computer. For this project, I have already NPM install express, mustache-express, express-session, and body-parser to be used throughout the programming.

The idea of the Mystery Word Game:

  • A new user arrives (who hasn’t signed up) arrives at the root page, the app will select a random word from the list of words that YOUR computer has in store.
    • How are we supposed to access this list of words? We must be able to receive it with Node.
  • Store the chosen word during a session
    • We must use express-session
  • Note that the word chosen will not be shown. The user must guess a letter for that word. Basically, it is like a hangman game (which it really is anyway).
    • A form must be used where it can validate only one letter is being sent.
    • If more than one letter is entered–it must show that the input is invalid and tell the user to try again
  • Whatever letter is guessed that is not the correct letter for a chosen word–it must be shown somewhere on the page so that the user knows what letter they already used.
    • This is where express-session come in play
  • Whatever letter that is guessed and is correct will be shown on the display of a chosen word–but it will be partially shown until all the necessary words are added
    • Will need to somehow show those “underscores” where the missing letters are shown.
  • A user is allowed eight guesses where they will be reminded how many guesses they have left after each round of letter guessing.
    • Again, express-session plays a role here

This may sound easy to do–but I don’t think so, especially if this is not planned out accordingly before actually program the steps. Already, I find myself having issues with using the for loop inside the web app that is not displaying the words that I needed. I have already done the simple for loop outside of the web app to ensure that I am programming it correctly…and still, it is not working. Perhaps my brain is a bit tired that I am overlooking a very simple solution to this.

I am currently hard coding the first steps which are to use the for loop to go through an array and for some reason, it is not working when I am asking for the correct element and push it to a new array to single out the word.

Below is the code I’ve been working on and it is the first step to programming the game which for some reason is not displaying the word on the root page. Before I did the for loop, it does display the example words when I used the mustache tag (used the node library called express-mustache). Now, I brought in the for loop to get it to show up only one word instead of the whole array…it decides to not display any of the words. So, it is a struggle for me but I know it has to be a simple solution and/or I am practically overlooking something.


const example = ['cat', 'dog', 'horse', 'flea', 'mite', 'shark', 'fish', 'seahorse', 'graywolf'];

const game = [ ];

app.get('/', function(request, respond){

for (let i = 0; i > example.length; i++){
if (example[i] === "flea"){
game.pop(example[i]);
}};

respond.render('index', {
DropWord: game,}
);
});

Note: This is only partial programming I am showing as I have a lot more codes in the app.js file currently. I am doing the programming in baby steps to ensure that one block of code works before working on the next block of code.

Ending the First Week of Diving into Node.js

Today marks the end of the first week after diving into the backend programming called Node.js. While it was a frustrating experience, it was also surprisingly a fun challenge. It took me several programming tries to understand how the code works using libraries that I downloaded via terminal to use on node.js.

Wait, maybe I jumped a bit too fast here. Let me recap what I learned so far.

We can program javascript via the front-end and/or the back-end. Apparently, a website can be created entirely in just Javascript which is pretty neat to think about. And it also leads me to some confusion as to why we really need to entirely either use the front-end programming to create a website or just depend on back-end programming (node.js) to do the same result. Well, as far as I understand–we use node.js to dynamically create websites, especially if it contains information that we, the (future) developers don’t want the public to see. For example…why would we want to create a public folder that contains usernames, passwords and other information that are sensitive? That’s where the node.js come into play–we can create a public folder for everyone to see the website and outside of that…contains sensitive information that only the developers have access to. That side would be called the server side. The public folder that everyone else has access to is called the client-side.

That is pretty much the gist I got.

The more I think about it, the more I realized how far this last cohort of The Iron Yard (not happy about the Iron Yard closing…) has come with what we’ve learned in such a short amount of time. This goes to tell me that we’re all extremely passionate about this, no matter how frustrated we get, we keep coding until we finally understand how it works that we achieve…enlightenment (or maybe I should say satisfaction?).  This is the cohort that seriously wants to change their lives around and I am proud to say that I am part of the last cohort.

Coding in Javascript Rants

This is going to be of a rant.

Learning a programming language is going to be hard. It is not that I can’t learn it. When I studied the materials on the fundamentals of Javascript such as functions, conditional flow, objects and arrays–I understood how it works. What threw me off is learning how to write it from scratch that points to logical steps by steps. Basically, I needed to learn how to think like a developer, telling the “dumb” computer what it is I wanted it to do by providing the rigid instructions.

That was the wall I hit.

And that is the wall I needed to knock it down.

And I will knock it down.

When I coded in javascript for the first time yesterday–I kept knocking down that wall little by little and my brain slowly made the connection, dot by dot, on learning how to think like a developer. That is pretty much how I felt–but I knew it would take time to truly understand the language to where I can manipulate the codes freely without being a bit scared of whether it works or not–or if I’m writing the code correctly.

HTML and CSS are my comfort zone and it is time for me to step out of it and move on with javascript. So, I better fail quick and learn quick (as my instructors told us).

Work that Flexbox!

The last few days we’ve been working with CSS coding and learned the art of FlexBoxing the webpage. I will have to get this off my chest:

Flexbox is not my to go to coding for web design.

Perhaps I will use it strictly for navigation bar or perhaps an image gallery (although I think that can get complex really, really fast). As far as I understand–this new method of creating a layout of the webpage is new and will have some glitches here and there. Perhaps in time, the developers who designed Flexbox will improve its usability or it may be done away.

However, I am extremely happy with the outcome of my  first weekly project that definitely contained the use of Flexbox. I had to create a webpage base on the mockup that the instructors provided for us. While in the middle a fight with flexbox layout, I somehow stumbled and realized I had the images accurately ratio-sized and at the height I was attempting for to replicate the way the mockup was designed. I had to go back and re-read what I just did until I understood what I did. It was a thrilling moment to have when I had the “ah-ah” moment after some serious coding (especially when I did a complete redo of the weekly project!).

I do admit that Flexbox was a fun challenge and it was also great to learn a new way to style a webpage. While I haven’t learned the Grid layout–I think I just may prefer that over the Flexbox

Messy Style in HTML & CSS

It looks like we’ll be spending some time on learning the rope of HTML and CSS styling. I do admit that I have some prior knowledge of it–but it is a messy one. The best way to put it is that I never learned the etiquette of how to write/code web pages. What’s even worse is that I never really knew that there are some HTML and CSS codes that are phased out or simply do not work in some browsers (whether they are new or old). What are some of the things I used to do? I used to:

  • leave a lot of whitespaces in the code file
  • multiple class, id and types that are identical to each other (meaning they overlap one another)
  • never left comments inside any HTML and CSS files for clear explanation of what I was attempting to do
  • never truly understood the concept behind selectors, box models, etc

What I struggled with the most in today’s learning is the CSS Precedence and their general rules. While I knew that CSS reads from top and bottom–but it really means that the most recent code in CSS format generally sets the priority in how the text, images, etc will be displayed on the web browser. Plus, if a selector is more specific than the other similar selector, it will also set precedence. Any CSS applied directly into the HTML file will take precedence over the external CSS file.

Come to think of it–there was another concept that I also struggled with.

Tables.

I admit. Tables are not my favorite coding, especially when it come to coding them in CSS. It seems that they have their own rules to follow that generally does not applied to the content of the web browser. I hope I made sense as I write this out–this is my brain processing, trying to figure out how this works.

Perhaps reading a few chapters from HTML and CSS: Design and Build Websites written by Jon Duckett clear things up a bit. I highly recommend reading this book. Let’s admit it, every HTML books we read are usually dull and very manual-like. This book is nothing like that. It is full of visuals and clear, concise explanation that actually makes it fun to read through the pages.

 

The Importance of Git and GitHub

Today is the first day of my coding boot camp, and so far it had been a fun challenge. The concept for today was to learn how to use Git and GitHub.

As a prospecting developer, the instructors stressed the importance of learning how to traverse and read our file system within the computer. There are two types of methods that we can use to navigate our file system: Graphical User Interface (GUI) and command line interface (CLI). If you own a Microsoft laptop, you would find that you can navigate your files via GUI simply by clicking on a Document folder or even a Music folder. However, on the other hand, you use CLI via the terminal to access these files as well. “The CLI provides a text-based interface that utilizes a special programming language called “Bash.” The CLI is considerably more powerful than Finder, and most programmers prefer it for managing projects and for interacting with tools like Git” (The Iron Yard).

Since I was used to Graphical User Interface, it was time to use the command line interface and make that second-nature to me in terms of using it and writing codes.

As it turned out, Git is a program where it allows people to create codes on their local repository. When the code meets the developer’s satisfaction, then they can push that code to the remote repository which is where GitHub comes in. Keep in mind–any changes we do to the codes within Git, it does NOT affect what happens to the codes in GitHub. GitHub is a great tool to use for developers to collaborate on a single project. It not only allow us to push our code into the remote repository, it also allows us to pull that code from the remote repository into our local repository to see what we can work with.

The Iron Yard not only uses us the ways of using Git and GitHub via terminal, they also teaches us the best practices of how to handle collaboration. That’s why when I learned how to create my own local and remote repositories–I also learned to collaborate with others using my local repository to a single repository that other developers are using as well. We needed to learn how to communicate the technicality of pushing, pulling, adding, deleting files and folders.

It made me feel good knowing that there is a website that serves to make collaboration between developers a smooth ride. Sure–there will be a stumble here and there, but that’s the point of collaboration–we just need to step away from the computer and discuss with other developers in person to see what we can do to make it work!

There’s several more concepts that I learned regarding Gits and GitHubs but I will get to those in later post as well.

Otherwise, this post would’ve become an extremely long post!

Why I Chose Iron Yard

Last week on Friday was a Meet & Greet party and an Installation party with the Iron Yard. The Iron Yard wanted to do this, to make sure everyone had a chance to meet each other and also ensure that their laptops had all the proper softwares needed before starting class next week on Monday with no problem.

It was a bit nerve-wrecking because it would be the first time I would attend the party where I would be without an interpreter. I was hoping that I had enough hearing to be able to understand what the instructors was talking about during the installation party. Luckily, it wasn’t that bad. Their voices were clear and they were very accommodating to me. How they were very accommodating toward me? The instructors knew that in order for me to comprehend what they were talking about, they needed to make sure they don’t turn their face away from me while they lecture the class. They continued to check on me to make sure I was doing okay. Even the director also made sure that I was doing ok as well. She did an exceptional job of ensuring that I can see her whenever she spoke to the group and her voice was loud and clear. They made it a little more easier for me to adjust to the classroom setting without an interpreter.

I am not saying it was okay to be without an interpreter. I just so happen to have enough hearing to be able to get on by without a need for an interpreter. Heck, I worked almost a decade in retail with jobs ranging from sales associate to an assistant manager. I even handle phone calls–in majority of cases (but not always). So, I knew I can also tackle this one. However, had I been completely deaf and hearing aids do not work for me–I would have pursued the need for an interpreter aggressively. However I wanted this long and knew I needed to get started with learning how to code.

I have a purpose and a need for completely changing my life. I am 30 years old. I graduated with a degree in Environmental Science about a year and a half ago. Unfortunately, the job market isn’t too good for me around where I live. I live with a partner who has a stable job. We have a daughter who will be turning 2 years old this year. We have great family support system around here too. I am not about to uproot our family to a different location just so I can get a job pertaining to my degree, especially when I didn’t have experience to back it up.

So, when my partner found out I knew how to code some in HTML and CSS–he suggested I should learn how to code other languages and should be able to find jobs a bit easier. Plus, it would be an ideal job for me–because as a deaf woman, I wouldn’t have to be face to face with customers or be in meetings on a daily basis as part of a job description (like retail jobs, anyone?). He was the one who looked into it and found Iron Yard. He went a step further–he visited the Iron Yard himself first and then later brought me in to meet with them to see how I like it. I became excited, because I realized this is something I should have been doing from the start.

I had enjoyed manipulating and designing websites many years ago–I remember how I spent countless hours learning how to do it from a book my aunt gave to me as a gift (it was an HTML and CSS book) and almost did nothing with my college assignments… 🙂 Somehow, I managed to get by.

When I realized the expense of going to the Iron Yard–I once again worried how we were going to manage our budget. I also considered going to UNCC Coding Boot Camp. Why UNCC Coding Boot Camp? Well, it is offered by the university and will give us a certification provided by the university. They do offer a 3 months full time course or a 6 months part time course. They teach a little bit of everything such as HTML5, CSS3, JavaScript, jQuery, Bootstrap, React.js, Node.js, C#, .Net, Database Theory, Bookshelf.js, MongoDB, MySQL, Command Line, Git, and many more. They offer career services, help you build a profoilo of web applications to show to potential employers. There’s so many benefits I can go on and on–but the Iron Yard still stood out for me.

The Iron Yard is a bit more specialized and still teach the front-end and back-end programming such as Ruby, Javascript, Terminal, HTML, CSS, Databases, Java, Cyber Security and many more. I learned that it would be better to be specialized in few languages and it would become easier to learn new programming languages later on. They have career support system, alternate weeks from activity day and lecture day (it depends on the concepts that we’re learning which is great). They provide 3 months of intensive program (Monday to Friday). That wasn’t the just the best part of it. I almost was ready to decline going to either boot camp because I wasn’t going to receive some help from the Vocational Rehabilitation (which I will explain a bit more in later post) until I received an email from the director, Michelle. She suggested I apply for the #YesWeCode Fund. I applied for the scholarship and suddenly in just the same day I applied, I received word that I was eligible for a scholarship to the coding boot camp (The Iron Yard). I was so ecstatic and in disbelief because I wasn’t sure if I was actually getting what I needed to change my life for the better and especially for my daughter. I emailed the Student Relationship Representative from the Iron Yard, Oliver with some questions regarding the scholarship.

It turned out I received the full scholarship to the Iron Yard! Excited by the turn of event–I decided the Iron Yard was the coding boot camp to go, not just because of the scholarship but the staffs they had were extremely amiable and very willing to work with me, even despite not being able to get an interpreter.

Oh, and please note–I did check into scholarships for the UNCC Coding Boot Camp, I didn’t find any. I also asked if they accept financial aids which they don’t either.

To read more about the #YesWeCode Fund, please go to #YesWeCode Fund: Scholarship application now open.