Tapping into the Bird World.

Its been a while since I’ve done a development update and wow there is so much that has happened since.  Because time is short (on your end and mine),  I’ll try to condense this into a quick update.

First some small things I’ve accomplished.  Had two challenges to complete,  one was checking to see if words in different arrays were anagrams and another I was given a bunch of bracket, parenthesis, and curly braces and had to make sure they closed properly.

The anagram initially seemed really hard as I was going through a loop function to check if first the words were same length, and then go through letter by letter to see if one contained the other.  (Btw if you don’t know an anagram is when two words have all the same letters such as ‘lamp’ and ‘palm’).  This worked fine until I noticed ‘aha’ and ‘hah’ was passing as true,  because the loop was only checking and saying ‘Yep there is an A’,  ‘Yep there is an H’, but not how many of them.  So instead I had to export each word into their own array and then do a sort and compare function.  This got it working good.

Next the bracket test.  This one really got me good as there was some tough logic to work out.  Essentially you have an object with different variations of brackets, parenthesis, and curly braces which you have to see if they are properly done.  So this ‘{()}[]’ would be good since each closes properly,  however this ‘[(]){}’ would be incorrect since you are closing the bracket before the parenthesis that was opened inside it.  The logic I came up with was a loop that checks to see if it is an open or closed,  it if is open it marks it as open and moves to the next.  If it is closed, it runs a function to check to make sure it is properly closed (matches the one open),  and that anything inside of it is also closed (so it checks the one to the right and if isn’t its match and isn’t marked as closed then it returns error).  This logic seems to have worked okay.

Now on to the real project,  the Twitter client page.  For this we overcame the challenge of getting it hooked up to LIVE data!  Woooo!  So I went through the Twitter API and get my keys and all that good stuff.  Then plugged it in and flipped the switch to pull in live data.  At first it ended up crashing since the live data structure was a little different from the test data we were using before.  Once I made the adjustments for this,  it started working good.  Then the next challenge presented itself in trying to get endless scroll working.  This took some tweaking and adjustments again,  but after a bit got that working (up to about 7 times before Twitter cuts me off,  will check into that later).

So things are progressing along and I’m now diving into some deeper reading materials as well.

First I order this book: JavaScript Definitive Guide

Then I also found two great online resources I’m reading through as well:

First is Eloquent JavaScript which not only is a great book but the online version hooks up a console so you can test code along the way.

Second is for learning Backbone.js called Backbone.js Applications which was produced by O’Reilly who also produced the JavaScript Definitive Guide.

So I have a lot of reading and playing around ahead and hopefully will be making something cool to show you soon.

Tweet Tweet Tweet!!

Having wrapped up the Minesweeper game,  the next challenge came down the lines.  It was a multipart challenge that would have me learning several new things.  First was to create a Ruby on Rails application to which we would be using for the next project.  Having tinkered with Ruby,  I already had an older version on my machine so it was really just a matter of pulling the Git, and running the bundle to grab all the latest and greatest things needed from the Gem file.  This of course never goes %100 according to plan and took a bit a troubleshooting to require particular versions that would work correctly.  Once I got all the needed items and requirements added to the Gem file,  got the server up and running and was ready to start work.

With the server up and running,  my blank page at Localhost needed something.  That is when I got my mission,  to act like I’m working with Stanford and create a page where their tweets would be displayed.  After getting a lesson on the Twitter API and getting it hooked up to a test dataset,  it was time to begin work.

First up was to create the framework for which the tweets would get pulled into.  This was as easy as creating some Divs in which I could then post the results to.  From there,  using what I knew about the data,  I was able to start pulling it in and making it display on the page.  It was very nice to look at,  so I decided to invest a bit of time and effort cleaning it up with some CSS.

Now I had a list of Stanford Tweets, which was exciting,  but not very useful.  I was directed to List.js which allows for some great sorting functionality.  It took some time tweaking with it to figure out just how to get it working,  but once done, it was great at sorting the list as well as providing a dynamic search as well.

Things were going great,  when the next challenge came in:  Make some reports; such as which are the top posts being Re-Tweeted,  or which Locations get tweeted from the most.  The presented a new battle,  as I now needed to figure out how to manipulate the data in a different way.  I learned sorting of Arrays which wasn’t too bad but this data was an Array in an Object.  The difference being that Arrays are easy because you can sort by indexes,  but with Objects the data is put in as names and it is not as simple as saying “alphabetized this”.  After a session with the trainers,  they taught me how to dig into the Objects, and effectively pull the items into an Array so then I could do the sorting.  From there I needed to create some loops that would go through the data and get it sorted by what I needed,  as well as tallying up the counts (for how many Tweets came from a location).  Finally everything was looking great and I thought I was just about done.

Really,  is a product ever done?  It was time for a new lesson.  With my JavaScript code it was becoming rather large and unsightly.  This was largely due to the long functions need to put the data on to the HTML page.  So it was time to learn a new way of doing this,  which is with Templates.  With the templates in Ruby,  you build out the page (or section of a page) just like you would regular HTML.  The difference is that you can add JavaScript directly in by wrapping it in “<% %>”.  From this I was able to build each of those reports into their own little page,  and greatly clean up the JavaScript file as a lot of it was on the template.  The added bonus is that I can easily fix or change things with the layout or look,  without tinkering with the delicate functions I had created.  So I set out and converted each of the sections into their own templates.

Weeeeew!  That was nice chunk of work,  but are we finished?  Nope, it was time to learn something new. (Learning programming has no end because there are always great new things to figure out)  The lesson this time was about framework,  specifically putting things into an MVC framework.  MVC stands for Model-View-Controller and was such a shift that my mind hurt for a few days after learning (still hurting in fact as I’m still learning it!).  From my understanding at this point,  the goal of an MVC is really a form of organization.  It allows you to separate your data (Model),  your display (View),  and your page links (Controller) into different parts that can then be accessed easier.  Using a framework always adds a lot of functionality to things like data manipulation such as the sorting we were doing before.

We decided to use Backbone.js and after adding the needed entries into my Gem file and re-doing my bundle,  I was ready to begin.  One of the first things I had to wrap my brain around with GET and SET.  Normally (at least my normal at this point),  I would be creating variable of different results to manipulate.  Doing so was only creating a copy of the data,  so the real data never changed.  With GET and SET,  you are actually touching the data so you have to be a bit more careful in what you do.  The next challenging aspect to learn was separating the different elements and how to work with them.  Such as creating your Model and your Collection from the data and get it to initialize,  and then working with your View for the displaying it.  The real confusion came from wondering what actually should go in these vs outside.  Such as the sorting function,  do I do within the Collection,  within the View,  or outside of both?  With programming there isn’t a fully right or wrong answer,  it usually is situational.  Because I was having different views,  sorted different ways,  I decided to put each sort into each of the relevant views.  This allowed me to easily do it in the render area of the view which seemed to work good.  In our next session however,  they walked me through being able to do this in its own function within the Collection,  so that it can easily called by any view that may need it.

Okay,  so finally I went through and got everything converted over to the MVC and then did a great deal of clean-up on the code.  For today’s challenge I’m working on a Collatz Conjecture.  So far it looks like I got it,  but will update again after my meeting today.

Here comes the Boom…..Part 2.

So, I got the first game working but not without its problems.  The main one being that everything was placed inside the squares already, and so the way I was hiding bombs from numbers from blank spaces is using a black font and black backgrounds.  So you can easily cheat just by highlighting a square.  Sure I could also add a “.hidden” CSS class that could hide it until the user clicks,  but really it becomes a bit clunky of a workaround.  So after meeting with my trainers,  we decided that I should take things in a different direction which would also get me more familiar with a core concept.  The decision was to use an array of data in which to store the information on the backend and the array would refer to a square.  So for instance if I clicked square in the second column and third row,  it would see what was in the array spot of [1][2] (cause arrays are 0 indexed,  meaning the count starts with 0).

I accomplished this by building the game board which was easily done by creating a loop to build the array depending on the number of squares needed and each loop would .push a new square in. On the HTML side,  I had a table setup with the same number or columns and rows.  I decided to stick with a hardcoded number of 7,  but this could easily be changed later if we wanted to say build a user selectable number of squares in the game board.  Then creating the randomizing placement of the bombs,  again was easy with quick loop and setting a .hasBomb = true on the squares.  It was going pretty good,  then it wasn’t

The first major difficulty was figuring out how to link the TD’s (Table Data,  aka squares) to the array so that when you click on one it will look to the array.  This had me going in circles for a while.  I had my click function to pull the this.index and the this.parent.index,  which effectively give me a number for the column and row (Column = this.index,  Row = this.parent.index).  This seemed to match up pretty good,  but then trying to get the next part where it ‘loops’ around the square proved to be another challenge.  Finally figured out the correct way to get it looping and checking surrounding squares to decide if they had a bomb or not.  I ended up putting the number of bombs a square touches into a .bombCount value on each item in the array and triggered that when the board was created.  Then I had the click check to see if there was a bomb or not;  if yes – Boom game over,  if no – then see if it was a number and display that.  The last step was if it was a blank space,  where it needed to keep checking spaces around it, and keep opening them up until it got to numbered spaces.  This was finally accomplished by looping a ‘click’ on surrounding squares.  This fun little loop presented a few problems.  First was getting it to actually apply clicks to surrounding squares.  Remember I’m using the array for looping and checking,  but the clicks needed to apply to the DOM (Table Squares).  And many attempts to find the right way to write it,  came up with this:

$(‘#field tr’).eq(rScan).find(‘td’).eq(cScan).trigger(“click”)

The rScan was the number pulled from this.parent.index,  and the cScan pulled from this.index.  I had to specify the #field table row (tr) and use eq to get access to it by row index,  then a find ‘td’ eq to use the column index,  which then got me to the right square and allowed me to put the .trigger(“click”) on it.  That was probably one of the hardest webs I had to dig through yet.  But it still wasn’t working.  After a bunch of troubleshooting,  the answer was found.  The loop was essentially endless as it couldn’t understand the game board boundaries.  Even though there was only 7 x 7 squares,  it would keep checking endlessly past that.  To stop this,  I had to create a boundary check that would look to see if it was in the boundaries of the play field by making sure both column and row were >= 0 and <= 6.  If it was it would return true,  and if not it would return false and stop it there.  Adding this in allowed everything to start working correctly.

Finally came the last few pieces to finish the game up.  First was of course getting the squares to change colors when clicked, or Command clicked (still need to get Ctrl clicks for PC folks).  The command clicking is for the player to mark squares they think are bombs,  where the regular clicking will open them up to see.  Had to get the command clicking to also change back the color so you can undo selections as well.  This actually proved a bit tricky at first as it just wasn’t working.  Come to find out that it wasn’t taking HEX color values which was annoying,  but started working once I changed everything over to RGB values.  Then I needed to create the win conditions.  This took me a bit to work through in my mind.  It seemed a simple concept,  just check the board and see if all the bombs are found or not and if so then yay you win.  But putting it into practice ended up being more difficult than expected.  I decided to do it the easy way,  and not trying to loop through the array each time a click happens (since I already have a bunch of loops running and more loops = slower programs),  I instead create a win counter.  Since we know there are 5 bombs and 49 squares,  we know if 44 squares are open then you are a winner (and didn’t blow up).  So I simply created a win counter which could add anytime a square opened up and the game continued on.  Then I added a reset button to let you reset the game back to default.  Everything was looking pretty good and done,  and since I had few more moments before I had to show what I did to my trainers I decided one last little feature.  I found an iconography font source which had a nice little mine explosion graphic.  Instead of using the basic ‘X’ that I was using,  I swapped it out with this so when you click on a mine,  you now see a little mine explosion.  The first time you get it,  it does take a second for the load,  but each game after that it displays immediately.  This is due to it being accessed on another server and not running directly on my server.    Well that is all I can do for now,  and it was time to move into another project.

If you want to play the new and improved version of Minesweeper you can do so here: Minesweeper v2

Here comes the Boom…..Part 1.

So having gotten the Hangman,  I got my next assigned project to work on for the next several days.  The idea is to make a Minesweeper like clone.  That seemed easy enough.  Start with a table to create the grid,  create a loop that then assigns a ‘bomb’ class to each square that has a bomb (randomly with:

[code language=”javascript”]

var X = Math.floor(Math.random() * 7 + 1);

var Y = Math.floor(Math.random() * 7 + 1);

[/code]

Then do another loop to go around the bomb square and place a number depending on how many bombs that square is touching.  This proved to be a snag as I could get the loop to go around the squares,  but it was replacing the numbers rather than adding to them.  After a very intimate session with Google,  I finally found the answer:

[code language=”javascript”]

$.fn.counts = function(row, column) {

for (i = row – 1; i <= row + 1; i++) {

for (p = column – 1; p <= column + 1; p++) {

if ($(“#field tr:nth-child(” + i + “) td:nth-child(” + p + “)”).html() == “X”) {

return;

}

else {

$(“#field tr:nth-child(” + i + “) td:nth-child(” + p + “)” ).html(function(m, val) {

return + val + 1;

});

$(“#field tr:nth-child(” + i + “) td:nth-child(” + p + “)” ).css(‘backgroundColor’, ‘green’);

$(“#field tr:nth-child(” + i + “) td:nth-child(” + p +”)” ).removeClass(“space”).addClass(“numbered”);

}

}

}

}

[/code]

(Sorry for the poor formatting,  still have figure out to properly place code in this blog.  It looks A LOT better in my Sublime. )

The loop tells it to go around the ‘Bomb’ squares.  If it has an X (meaning Bomb),  then do nothing to that square.  Else return a value of +1 into that square and change the class of “space” (meaning empty square) to be “numbered”,  a square with a number in it.

So now I have Bombs,  and numbers calculated around the bombs so you know when you are getting close.  The idea was to create a click function that would blow you up if you click on a bomb,  open up a square if it is a number, and if it is a space then do a loop that would keep opening squares until it opened up a numbered square.

 

Concept-wise this proved a good strategy,  but one I tried to put it into practice I ran into many problems.  I created the click for the bombs and numbered squares easily.  The loop for opening squares is where things went awry.  I started with the loop I used above for assigning numbers,  only to check the squares around each and then open them if they are blank or numbered.  Upon first trying this,  things looked like they were working.  But the celebration got cut short after a few more rounds of testing.  It would in fact go through the squares,  but each time it would jump to the new square and apply the ‘Click’,  it seemed to abandon the initial click function.  So instead of opening all squares it would only open the one.

 

I then tried to fix this using a ‘While’ loop,  thinking up some logic of “While the square next to it was empty keep opening.  After several hours of playing with this,  and talking with my support trainers,  we determined the original way that I had planned on doing it would be the best and that we should continue debugging to find out what is wrong.  That is when I got a nice lesson in line by line debugging.  Basically throwing in a debugger at the beginning of the code and stepping through it.  Upon each step,  using the console to verify information (variables, functions, etc.), and even copy and pasting snips of code from the editor (sublime) into the console to see if it in fact runs or errors.

 

This time-consuming process allowed me find one problem,  that the ‘clicks’ went out-of-bounds (off the game board) and thus caused it to hit into an infinite loop.  After setting up a function to check to make sure each ‘click’ was in the boundaries,  things started improving.  Once I fixed that,  and I took at the extra check of “If has class space” (because that was already being handled by the ‘click’),  things worked beautifully.

 

I added a bit more of code such as ability to Command-Click on Macs to mark spots.  Sorry PC people, didn’t include other clicks in this release.  And started the work on the win condition.  It came time to show my work and though it looked pretty good,  there was still a glaring issue.  The fact that I was using Classes and putting the data directly into the cells,  made it not much of a game since you could see where everything was.  The plan was going to be make all the squares black (since the text was black, it would then hide the items) for a simple solution and a more complex solution would be to include a graphic file that would layer on top and be ‘hidden’ on ‘click’.  After showing my progress,  they gave me my next task that would be a better way of handling the last touches of the game.  That is to put the data into an array and use that as reference,  thus only populating the board squares when the click function runs on them.

So tune-in next time when I rebuild the entire game using an array of data.

For this session you can see what I built here: Minesweeper Version 1

Find a tree, we’re hav’n a hang’n!

So the Tic-Tac-Toe game went really well.  After I got over the hiccup it was all smooth sailing and so the next challenge presented itself.  Take what I learned and create a Hangman style game.  And then there I was again confronted with the blank page.  This time I decided to try a new tactic,  throw something up really quick so that way it is no longer a blank page!  So first things first,  I build a couple divs,  add a bit of styling with CSS,  and poof now I have a frame to build something in.  And it’s not as intimidating as a blank page.  Now I can start to plan out the hangman game.

First I look at the components needed to make the game.  First is to have a list of words that the player has to guess,  create an array of words and done.  Next I’ll need the underlines that shows how many letters are there.  For this I decided to do a loop that appends the underlines per the word counts.  Off to a good start so far.  Then the difficult part hit,  the guessing of the letters.  I knew of a few options available such as str.indexOf() and .charAt(),  but that usually just finds the first instance.  For Hangman I’m going to need it to scan the entire word,  and place the letter in the appropriate space.  It took a good deal of searching and trying different things,  but finally found the solution:

// if (theword.indexOf(letter) > -1) {

//       for (var i = 0; i <= theword.length; i++) {

//                    if (theword.charAt(i) == letter) {

//                               $(“#” + i).html(letter);
console.log(“Found it”);
}
}
}

Basically it goes like this:  Take the letter the user entered,  and if it is greater than -1 (remember things start at Zero),  then start looking through the word and if the Character at the point in the loop (i) matches the user’s letter,  then bam you found it.

So now it can find the letters the user enters,  but another problem popped up.  The user can put it in either upper or lower case.  The easy solution to this was to convert it all to uppercase using the dun dun DUUUUuun .toUpperCase() function.

The final steps was to then give the user the ability to guess the word as well as give them a set number or guesses they can make on the letters.  These were pretty easy so I also added a little extra in that the user can see letters they already guessed.  Having come to the end of this session,  I turned it in and excitedly waited for my next challenge.

If you would like to check out the Hangman game (even though it’s not very pretty),  you can do so here:  Hangman

The journey thus far….

So after completing all the online courses I could find (Code Academy, Coursera, TreeHouse, Lynda.com, Udemy, Khan Academy, and even the ‘Hour of Code’ challenge on Code.org),  I found myself in an infinite loop (ha!).  I keep learning the same things over and over,  in different languages,  but I still haven’t really applied it and built anything.  It’s like learning the ability to ask where the bathroom is in many languages,  but never going to another country to ask.

Even though I have multitudes of ideas in my head,  once I get the blank page in front of me the ‘writers block’ takes over and nothing happens.  That is until I met a couple of guys (Eli and David) which were starting their own programming course.  What immediately drew me in was their focus on not just running through the same course work found in other places,  but doing it a project based fashion.  Basically it starts off with a bit of a test,  as their site has several challenges such as ‘Change the background color of this menu’,  ‘Make this section look good using the Bootstrap’, and ‘Align this stuff up using CSS’.

Having done a lot of this already,  I had breezed through it.  That is when the real challenge began.  First up,  was opening the blank page,  that endless black hole of despair that has eaten up so much of my staring at the deep void of its existence.  From here they quickly showed me a few tricks and then said, ‘Okay,  now build a Tic-Tac-Toe game and we’ll meet again in a few days to see what you did’.

Then something amazing happened,  I started writing code.  My mind first worked through the logic of what Tic-Tac-Toe means to a computer.  It needs 3×3 of squares,  which can be selected back and forth by X’s and O’s and once 3 of those line up ‘Bam, Winner!’  I then started off with the front end framework.  Using some HTML and CSS,  I built out the game board and make it look just like I wanted.  Then I started adding the click functions to turn each square into either an X or O depending on the turn.

It seemed to be going great but then the first major problem happened.  As squares were clicked,  the board then when crazy and squares started moving around all over the place.  Well come to find out that I made my first rookie mistake: not getting enough information and making assumptions.  You would think with my years of Product Management that my first thing would be to detail out the entire plan and make sure of the constraints against building it.  But alas excitement of actually building it got the better of me.  I had made an assumption that because we last left off building everything using divs and CSS for aligning them up,  that the board should be built this way.  Once we touched base again,  it was made clear that no you can build it using anything HTML or CSS can do.  And so I started the reconstruction by building it all into a 3×3 table.  From there everything started working out great.  So good in fact that I decided to go above and beyond by adding a scoreboard so you can see how many games each player has won,  along with a ‘Play Again’ button that would clear the board for another game.  All in all I’m pretty proud of my very first development project.

If you want to play some Tic-Tac-Toe you can try it out here: Tic-Tac-Toe

There is more to come so stay tuned!!

~B

Hello world!

Welcome to my little corner of the net.  I decided to start keeping track of everything I’ve learned from being a Product Manager as well as stuff I learn on my journey learning how to program.  Mostly this is for me, just to keep track of my progress,  allow me to reflect on things I’ve accomplished,  as well as have a place to go when I need to remember that certain process or bit of code.  And hey, it helps other people out in the process then it makes it all the more worth it.

So welcome and here is looking forward to a great 2014!!!