DrumSensei

betwixt code and music

JavaScript

Image Gallery coming

Building a gallery for images posted from users

We have spent the week learning how to simplify JavaScript down into jQuery (although, that is an oversimplification itself, in some ways). Then we learned how to connect to a server using AJAX, pushing information to the server and then learning how to retrieve it. When you put that information alongside the small projects we did all week like creating a login page and making a todo list, then creating an instagram clone (albeit a smaller scale) is a logical outgrowth of that.

So, that is my goal for today and this weekend. If you need me, then I will be under the hood of Sublime Text reading some Input Mono and muttering to myself incomprehensibly.

Now time to leave

And head back home to

What is 'this'?

Week 4 - Day 14

JS 'this'

Ok, things are about to get confusing. If you are not thinking clearly then go skip this and go read the facebooks or something. Maybe go take a walk.

Still here?
Well, let's talk about 'this'...



Just kidding. This is awesome. The easiest way to put this...erm, what I am trying to say is...the best way to get this down on paper...blurgggg... Using this word seems nearly impossible!

In JavaScript we are often dealing with a small snippet of code that does a task. It is called a function. Inside that function we might be targeting a specific item that triggered an event. A shorthand way of talking about some information that is passed in to the function is to use the
this keyword. It enables the programmer to talk about a generic piece of information without knowing exactly what it is ahead of time.

Specifically,
this refers to the current DOM element, at least in the way that we have been using it in class. It is also useful when creating new objects with a constructor. I have not used it a ton just yet (only a couple of times), so I have yet to build up a lexicon of knowledge to disseminate to the masses about this.

Also, here is a .gif. Enjoy!



If you want to learn more about
this, then go to MDN or just !google search it on DuckDuckGo.

The Iron Yard - Day 13

Week 4 - Day 13

JS + HTML = :]

Our homework over the weekend was to construct a to-do list using vanilla JavaScript i.e. just plain ol' JavaScript with no bonus features or extra doodly-whatsits. My implementation of this works pretty well. I wanted to add a few more features to it, but I had to learn some deeper concepts first.

On Friday
our instructor told us it was his favorite day of the entire span of twelve weeks. We officially learned to connect JavaScript to our HTML to produce a page like we are used to seeing in the wild. Remember, constant reader, the JavaScript is what enables actions to happen on the page inside of your browser. For instance, if you look at my very plain to-do list, you will notice that clicking the button next to the text input area will make that text appear below in a list format. While this may seem like an easy task, it does involve many steps.

First, we target the specific areas on the webpage that need action. On my list, those specific areas are the input text field, the clickable button and the "list" section below that.

Second, we create functions that tell us what action we wish to happen. For instance, when I click the button, the text from the input text area should become visible in the list section. At this point we should have thought about what areas are needed and what we need to happen with those areas.

Lastly, we add what JavaScript calls "event listeners" to be the messenger between our targeted areas and the desired functions. In my example of the list, I have JavaScript "listening" for a 'click' from the user on the button next to the input text area. When that button is clicked, the text is added to an array behind the scenes, the list section at the bottom is erased and redrawn with the updated list. All of this happens so fast that we cannot see it, but for every item added to the list, the entire list is erased and started over with all values. I am told that this will be useful later!

My reset button on the list example works in a similar fashion. It is "listening" for a 'click' to happen and then it interacts with the list values by resetting them all back to empty or zero and then redrawing the list section to reflect that.

In honor of our teacher
Aaron, enjoy some nutella...


The Iron Yard - Week 3

Week 3 and Other Tidbits

In my quest to switch careers, a coding bootcamp seemed like a good fit. Through a mutual friend, I talked to a former student from The Iron Yard that attended the original campus in Greenville, South Carolina. He had gotten a job in development in Dallas at a smaller shop doing some cool work. The job market for coding in Dallas has plenty of open positions. After being a band director for twelve years, I was right at the point of getting ready for a new direction. My aforementioned contact said that the thing he would have done more before bootcamp was studying JavaScript.

JS-woody-buzz


Thankfully, I followed his directions. I went through the
Codecademy course on HTML/CSS and JavaScript two times each, the second time around carefully hand-writing nearly all of the code. Hey, I learn best by writing, and it keeps me focused, be nice. (You probably do, too.) I also got the book Eloquent Javascript by Marijn Haverbeke and read (and worked) through the first three chapters three times. You might think I am a JavaScript champion now. I would say that I was simply practicing and getting some mental and physical muscle memory built up. I knew that JavaScript has some weird idiosyncrasies that make it identically a mystery and a brilliant tool. My goal is to understand those and make them work in my favor.

A fun example: like most programming languages, JavaScript has certain base "types" where it stores information. This could be a number like 9 or a boolean like true or a string like "The Iron Yard" or an array like [1,2,3] or an object like {a:1, b:2, c:3}. Got it?
No, you don't.
An array is actually a type of "Object." Gotcha.
Unless you are working in the browser, then it could be an "array-like object."
HUH?
Exactly. That is JavaScript. It is weird and funky and a lot of fun. (Hey, I used Turbo Pascal and C++ in high school... I put in my time with the strict languages!)

This coding bootcamp experience has been daunting and scary at times. Other times I feel like a rock star when the code works and my tests come back with green check marks! YES!! My classmates have been cool to be around. Everyone seems interested in learning their stuff and getting work done. Staff is fantastic. The campus is in Austin...a wonderful place with great food and great people. I miss my family SO MUCH, but it will be worth it when I get a wonderful job back in Dallas with a great team shipping things that make the world a better place.

Something that has surprised me is that I was terrible at my first attempt at coding bootstrap. I haven't really finished my assignment from a week ago...it looks like I really need to start it completely over and rethink my approach to the grid system of the masses. Not everyone gets ALL of it the first time!

I definitely expected a challenge, and it has been delivered in nearly every assignment. Even when I feel like I have a decent level of skill, I know there is a long road ahead. I am always keeping in mind I am still near the left of the flow chart from the mind of
Mihály Csíkszentmihályi (pronounced "chick-sent-me-high"). As a musician, I achieved flow by getting my skills and challenges to extremely high levels. I feel like after about 15 years and thousands of hours of drumming that I was pretty accomplished. Hopefully I can get to flow sooner in coding!



To any future students, please hang in there and keep a positive attitude. Ask questions. A lot of them. The days I have been most frustrated were the days that I felt most isolated. Ask your staff, ask some mentors, definitely ask fellow students. No one can do this alone. I highly suggest doing some exercise to keep your body and mind active, as well. Lastly, I am a fan of writing things down (did I mention that?). I filled our moleskine cahier notebook in the first five class days. If it helps you learn, then GO FOR IT!

The Iron Yard - Day 08

Tic-Tac-Toe

In our quest to learn about loops of all kinds, the task at hand is to create a game of tic-tac-toe (also, called "Noughts and Crosses" across the pond) built in JavaScript to run in node on the command line.

Noughts and Crosses


There are some complications to this problem that are not obvious at first. We are making it a two-player game (except for nightmare mode is building an AI to play against). We start off asking for the players' names, and setting the current player to player1. Then the player must enter the coordinates of their move in the format "x y" (yes, with the space). The move is stored in an array that holds three arrays which I am calling gameBoard.

All of that is fairly simple (yet time-consuming) except we need the array to hold the numbers of the coordinate, and the way it was entered is a string. Thankfully, in JavaScript there is a method called
.split that allows a string to be split by a separator, which I defined as " ". This leaves us with a string of two numbers. The trick now is to use parseInt to get the numbers pulled out of the string and put into the array as a numeric value. This was a bit of a logical challenge simply because I had not really used all of these little processes before. However, like my old days as a music educator, I just have to tell myself (instead of the students) that the best way to learn is by doing it!

For the next part, I don't
love the way I constructed it yet. We must determine if the entered information was, in fact, the correct format, an acceptable number (1, 2, or 3), and that no one has taken that location. My solution here is incomplete and inelegant. I will continue to work through it!

I did manage to make the game board print with the correct player's token in the correct spot. That was a huge moment! Also, I have made it successfully switch players and I have gotten as far as declaring a winner if they get a row of their token (still have column, diagonal, and cat left!).

All in all this has been a good week, but I still have to touch up some of the responsive site stuff from earlier this week. I will do that today. We have a campus-wide huddle at 10:00am and
Iron Pints at 3:30pm. Also, I have to take my car in to double-check that the light that came on will be ok. Heading back to BIG D tonight!

Oh... and my oldest child turns thirteen on Sunday. We got old all of a sudden!

The Iron Yard - Day 07

The Iron Yard - Day 07

We have learned about arrays and objects. We are now aware of the matrix...

matrix_screen_saver_by_icyalaska

An array is a data structure that lists information in what we can think of as an ordered list. This might be most useful when needing a list of items such as a cash register needing to access prices or perhaps an inventory. Square brackets are used to start off an array, and all data types can be stored here.

An empty array named
groceries looks like this:
var groceries = [];

An
object is a data structure that functions more like a large bag that holds pieces of information in any order. Objects are central to the more advanced abilities of modern programming languages. The information stored in an object has a label to go with the value. Curly braces indicate the beginning and end of an object, and all data types can be stored here, as well.

An empty object named
kitchen looks like this:
var kitchen = {};

Arrays
We need to insert data into our array, so we will use the method .push() to insert data into the front of the structure. (You can also add data at the end or the middle, as needed.)
groceries.push('milk');
groceries.push('eggs');
groceries.push('bacon');

So our array now looks like this:
['milk', 'eggs', 'bacon']

These values inside the array can be retrieved and used by referring to label of the
position of the value. For instance, milk is at position 0, eggs at position 1, bacon at position 2. (Due to largely historical reasons, many times computer scientists will begin counting with zero.)

If we need to access an element of the array and reassign a new value to the spot that holds milk, that would look like this (pronounced "groceries sub zero):
groceries[0] = 'whole milk';

Objects
Unlike an array, an object is not ordered, so we cannot
push things to the object. Instead we have to access keys that behave as labels for the objects inside the array. If the keys do not already exist, then they will be created as we give them a value. For example:
kitchen.flour = '2lb';
kitchen.eggs = 1;
kitchen.coffee = true;

The above values don't have just a generic label but have a custom label. If we need to access the values inside an object we can access it much like above. If we want to reassign a new value to an object, then that would be identical to the assignment above.

Objects have two ways to retrieve data from inside: dot notation (usually preferred) or curly braces notation.

A
Matrix is created when we store an array as an element inside an array. If we had three arrays stored inside of an array, then that might look something like this:
var matrix = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
]

This could conceivably lead to some rather complex data structures.

Anyone ready for tic-tac-toe?


The Iron Yard - Day 06

The Iron Yard - Day 06

On Tuesday we dove a little deeper into JavaScript discussing boolean operators, the ternary operator, and conditional statements.



We also discussed several scenarios that JavaScript handles in a quirky way. Type coercion in JS has its own rules that will be wonderful to harness once a developer can fully grasp them.

For instance, let's assign a value to the variable "name" and put it into an important sentence.
var name = "Mike";
var statement = name + " is really cool";
var name = "Bob";

One would think that the output would be "Bob is really cool"... Nope, it is still "Mike is really cool". Confused yet? The logic works like this:

Name holds the value "Mike"
Statement holds the value "Mike is really cool"
Name is given a new value of "Bob" which replaces the original of "Mike"
Statement is asked to show the value it contains, which is still "Mike" - we did not put a new value into Statement

Our homework was to use plain JavaScript to create a command line quiz in either normal mode, hard mode, or nightmare mode. We were to include 15 items that covered various HTML, CSS, and JS topics and then tell the user their number correct and percentage. I finished that and made some adjustments to also tell the user which topics they did best in and I made it display the correct answer if the user gets the question wrong. I also added a timer to tell the length of the test. As a bonus, I made a "100" display in ASCII characters if they get every question correct.

The nightmare mode (which I did not employ) asked the developer to make the quiz adaptive based on the success of the answered questions. I could see how this is possible, but my code would have been MUCH longer to make it work.

Now, I am
still working on my HTML forms homework from Monday. I will finish this TODAY!!