Clean Up Your Javascript

10-5-2015

This was the week in the Dev Bootcamp curriculum where the materials switched from focusing on Ruby to teaching us about Javascript. It was rough to move from a place where I was just starting to feel comfortable, to a new language that elicits groans from a majority of users who try to wade into its murky depths.
While struggling with one function and for-loop after another, I started looking around for a resource that would help me understand why my Javascript code wasn't working the way I expected. That's when I found JSHint, a Javascript quality code tool.

JSHint logo

JSHint is incredibly easy to use, and even complete beginners can get a lot out of it. Paste your Javascript code into the screen on the lefthand side and on the right side of the screen you will find information about what is contained in the code, as well as a list of warnings if the code has errors or strays outside the bounds of normal Javascript conventions.

JSHint Example

JSHint has helped me clean up my code along with debugging that has untagled why a particular piece of code isn't performing as expected. It's the sort of open-source group-collaboration project that gets me excited about building up my coding skillset so I can help develop similar resources!


Why Use Instance Variables

9-28-2015

A method is a piece of code that acts like a shortcut, allowing you to run the same piece of code many times. Instead of writing out the process to be executed indvidually each time you want it to run, you can call out to the method and have it run when called.

def method
puts "You just made a method."
end


But what about when you want methods to not only run one after the other, but pass information between them so Method B can build upon whatever Method A was tasked to accomplish?
Methods can be grouped together under a class and executed one after another to achieve the finale product. Instance variables are variables with an @ sign in front, allowing them to be accessed in both Method A and Method B. Here is a simple program for teaching basic math to a child.

class Addition

def first_pass
@answer = 2
puts "Hello! Let's talk about 1 + 1"
puts "Do you know what 1+1 equals?"
sleep 4
puts @answer

second_pass
end

def second_pass
puts "Now get up and shake your wiggles out"
puts "Shake shake shake"
puts "Shake again!"
puts " ... "
puts "Now that you're done shaking can you tell me again, what is 1 + 1?"
puts "Hit enter when you know the answer"
gets
puts "The answer is 1 + 1 ="
sleep 1
puts @answer
end

end


Addition is a class where all of the methods reside. first_pass is the first method, introducing the child to the idea that 1 + 1 = 2. The second_pass prompts them to wiggle a bit, and then revisit the question and see if they can respond with the correct answer.
@answer is the variable used in both first_pass and second_pass. It seems silly to break them apart in this simple example, but once more complicated code is introduced moving the information between methods will become critical. In this basic example having the code run as two methods would allow the second_pass to be cut off, if the teacher wanted the student to skip the wiggles shaking and just focus on letting the child be asked the question, wait four seconds, and then be given the answer.

Enumerator v. Enumberable

9-22-2015

Enumeration, enumerator, and enumerable are terms I encounter again and again as I search the web for solution to my coding challenges. I'm getting better at searching the Ruby documentation for enumerables to use in my code, but I confess that I couldn't clearly define what they are; at least until I decided to write this post.

As with most specialized concepts it will help to define another concept before wading into the terms at hand. A coding program is like a tower made of legos, with each lego block containing information about the tower as a whole. Each of those lego blocks is a module, and modules contain instructions that will help the program run for beginning to end and return the desired output.

To enumerate is to list, to mention things one by one. Enumeration is the act of enumerating.

An enumerator object is the tool that iterates over a list and returns an output.

Enumerables are a class of objects. Enumerable methods are a sort of pre-fabbed mix-in that can be used throughout the modules to execute different functions. I think of them as a shortcut I can take thanks to the creators of Ruby. I don't have to figure out how to break down the steps necessary for the computer to sort an array in alphabetical order, I can use .sort for that.

I'm still trying to wrap my head around these concepts. If you have a clarification or explanation that will improve this post and my understanding, please tweet with me via @jennacole so I can make necessary modifications.

Wanna Hash? Maybe Array?

09-11-2015

Let's hold a bake sale! Doesn't that sound delicious? We'll have cupcakes and brownies and pies and maybe the woman down the street who runs a baking blog will invent something completely unique for all of us to taste. We send out a list to collect names and see who wants to participate. Alice, Jenny, Derek, Megan, Samantha, Josh, Davis, Brittney, Jessica, Brad, and Heather. If we're going to create a database where we can easily access the list of participants, an array is a great way to store our list. Create an array using the literal method by typing each of the names inside of square brackets, with quotation marks on either side of each name (string):

    bakers_array = ["Alice", "Jenny", "Derek", "Megan", "Samantha", "Josh", "Davis", 
"Brittney", "Jessica", "Brad", "Heather"]
If a few weeks go by and you forget who signed up, accessing the list again is easy. Type in "p bakers" and the list will be printed back out to you:
    p bakers_array

    -->["Alice", "Jenny", "Derek", "Megan", "Samantha", "Josh", "Davis", "Brittney", 
"Jessica", "Brad", "Heather"]
As the bake sale approaches, you realize that you don't know how many people have signed up. Cue ".length":
    p bakers_array.length

    -->11
    
There are 11 bakers bringing goodies to your sale, but you want to make sure you have variety. Cupcakes are great, but what if someone came to the sale craving a brownie?
Once you've collected who will be bringing what, an array won't work for storing both the name of the person and what they are bringing. This is where an array is what you're looking for. An array stores an object, like the names referred to as strings in our bakers array above, but it also can store corresponding information for each object. One value is called a key, the other is called a value. Hashes are always built with key-value pairs. For our baking sale the names will be the keys and the yummy treats people bring will be the values. Key names must always be unique, so when creating your hash think through what strings or integers might be duplicates of each other and make that the values.
    bakers_hash = {
    :Alice => "cupcakes",
    :Jenny => "brownies",
    :Derek => "cake",
    :Megan => "brownies",
    :Samantha => "cupcakes",
    :Josh => "cupcakes",
    :Davis => "cupcakes",
    :Brittney => "cookies",
    :Jessica => "cookies",
    :Brad => "brownies",
    :Heather => "cookies"
    }
    
What was it that Samantha was bringing?
    p bakers_hash[:Samantha]

    -->"cupcakes"
    
And one ambitious person was bringing a cake, right? Who was that again?
    p bakers_hash.find {|key, val| val == "cake"}

    -->[:Derek, "cake"]
    
And that's one way to think about the difference between hashes and arrays. Now Derek, can you please bring me some of that cake?


Thinking of Margin/Border/Padding as Images on a Wall

9-3-2015

Imagine a completely blank webpage. Place an image of an adorable baby make a sour face upon first tasting a lemon. Adorable! Except your image feels like it's clinging to the upper left corner of your page and you'd like to give it some space to breathe. And you also notice that it looks a little flat and could benefit from having a lime green border to offset the lemon yellow in the photos.

Once you have your puckering baby surrounded by a lime green border should you change the dimensions of the margin, border, or padding to make your desired changes? I found the answer to this question clicked for me when I started each element on the page as a framed and matted image on a wall. All websites can be thought of as an arrangement of square containers, often referred to as divs. The edges of the wall below represents the div or container that the element is sitting inside.

1 = Margin. The space between the edge of the wall and element is the margin.
2 = Border. The white wooden frame seen below is the border between the margin and the padding.
3 = Padding. Inside of the border is the off-white thick paper used as a mat. It gives some nice breathing room between the border and the actual content.
4 = Content. In the visual example below the content is a reproduction of a painting. On the web it can be an image or text.

Image on Wall

When making changes to elements on your site and trying to decide whether to change the border, padding, or margin, think about exactly what you're trying to change. Using the image on the wall above...

Do you want the image+mat+frame to stay the same, but you want the image to be closer to or farther from the edge of the wall? Change the margin.

Do you like where the image+mat sit on the wall but want a thick pumpkin-orange border around the image and the mat? Change the border color and size.

Do you want more breathing room between your image and your border? (A larger mat?) Change your padding.

CSS placement can be tricky, and changing the above parameters might not put your logo or title or navigation bar quite where you'd like it to go. Your website is a series of boxes next to boxes inside boxes (divs) and there are a variety of factors that can affect how your website looks and where things go. But when you're thinking about one element, and the div it sits inside, and the way your element is placed within that div, changing the margin, border, and padding should get your content looking the way you desire it to.

Taking Ownership of the Dev Bootcamp Experience

Walk into the kitchen, grab a ladle, stir up your future

8-27-2015

I signed up for Dev Bootcamp specifically because of the phase-based program structure with an emphasis on developing the EQ of an individual along with their IQ. The phase-based program allows me the space I need to really learn the material, instead of forcing myself to rush in order to meet all of the deadlines. Of course my goal is to finish the program the week before Christmas and move into a new chapter of my life in the first week of 2016, but it is very important to me that I graudate the program after soaking up as much as possible before the technical interviews and the new job training begins. I've been passionate about the growth mindset after reading The One World Schoolhouse and am excited to be a part of a learning environment where the capacity to learn is emphasized as robustly as the curriculum.

Shereef's Fireside Chat clarified some of my assumptions and further reinforced that this program is the right choice for me. One week in and I'm already scrambling a bit to make furthter adjustments in my life to accomodate the workload of Phase 0. I've been a work-at-home-mom for over five years now, and there are a lot of things I'm going to need to adjust about my schedule and mindset in order to manage the demands of my future job. Phase 0 is not only preparing me for Phase 1, 2, and 3 of the DBC program, but also is providing me a glimpse into what my work-life balance is going to be like after DBC graduation. Attending a program without something like the Phase 0 ramp-up period and the Phase 1/2/3 holistic approach to developing a person instead of just a programmer would have been a recipe for mental/emotional collapse for me.

I most appreciated the frank talk about a student's employment prospects post-graduation. Becoming employable is as important as the amount of programming skills a student absorbs, and employability and a firm grasp of a wide-variety of programming principles are not always the same thing. I was already approaching the program with a growth-mindset, but now I'll be striving to focus less on checking the "completion" box for each assignment, and more on developing the unique skillset I can take from this intense experience and leverage into a choice employment opportunity in January 2016.

Version Control and GitHub

8-25-2015

During my college years group projects were one of my least favorite things. It took far too long to decide on a project focus, and once we did start working toward something we would have to pull out our calendars and try to find a time where we could all meet up at the same time. This was before Google Docs, and working remotely on the same file would require saving multiple versions of the same file to keep track of which version we were working on. Historypaper1, Historypaper2-modifiedoctober5, HistorypapereditsbyJenna, etc etc. Today when working on group projects there is no need for meeting in the same place at the same time to work, or renaming the same file over and over to try to keep track of what changed what and when. Establishing a tight workflow that implements a version control system and utilizes Git and Github will address all of those obstacles.

Version control is a system used to track changes to file(s) over time. Using "save as" to save multiple versions of the same file is a crude version of this. As a photographer I have developed a version control system for my photographs that utilizes the snapshot function in Photoshop or Lightroom. As I work on an image I take snapshots at specific points, allowing me to compare changes and go back to a specific edit if I'd like to go back and try a different method for the finished product. Developers use version control systems like Git to make virtual clones of the project they (and their team) are working on. Changes are added and recorded using Git, and then those changes are pushed over to a site like GitHub so the rest of the group can see them and utilize them in their own work on the project.

GitHub is a social network hub that currently claims the title of largest online storage space of collaborative works. Upload your code to GitHub and mark it public and anyone who stumbles across your profile can take your code, load it on to their own computer, manipulate it, and upload their own version back to GitHub where the process can be repeated by someone else. Going back to the college group project example, college students working on coding projects for a class assignment can establish roles and responsibilities for each group member, create the main repository for their assignment, and complete the entire project remotely without the need to meet in person. If responsibilities are fuzzy and two people make changes in the same area GitHub will illuminate any merge conflicts to prevent duplicate work or overwriting of someone's efforts. A proper workflow will include a log of all changes, including information on who made the change, so there would be no more confusion about who is or isn't pulling their weight.