Day 100: More UX and Design Teardowns

Woke up very early today, ready to get in a productive day.  Started the day by going over the design teardown video again, in order to refresh myself on design teardowns (as opposed to UX teardowns).  I'll be posting daily again instead of those very long, multi-day posts, as holding myself accountable on a daily basis boosts my productivity.  

As an aside, I bought a light alarm.  It's neat, it wakes me up gradually over the course of half an hour, by turning on a light at a dim intensity, then raising that intensity up over the course of the half hour before I am supposed to wake up, and then an alarm sounds at the desired time, just in case.  It has helped me a lot, because I close my blinds at night (to avoid light pollution from the street), so then in the morning, when the sun comes up, I don't really notice, and that's not good, because our bodies are made to rise with the sunrise.

The interesting part is that it actually works.  So, for example, I usually wake up before the alarm even sounds, and I wake up feeling great, it eases me out of my sleep instead of jarring me out of it like a typical alarm does.  This light alarm isn't really coding-related, per se, but in order to code, we've got to have our mind and body in tip-top shape, and this light alarm helps with that, so that's why i'm mentioning it.  I highly recommend getting one, even though they can be a bit pricey, for example, mine was around $75.  

That said, I don't really see the light alarm as a waste of money, I see it as an investment in myself, in the same vein as buying the ergonomic chair, the ergonomic and spacious desk, the laptop stand, the book stand for reading coding books, and the bright lamps, for having a nicely illuminated desktop, for example.  All of these purchases have aided me greatly in working towards my goal of becoming a web developer.  Before I bought the ergonomic chair, for example, I had a chair with no back support and a metal wal-mart chair which cut off the blood flow to my legs after 20 minutes or so, making me not want to sit down, but now, with this new chair which is perfect for tall people like me, I can actually sit for 8 or 10 hours (or more) straight if I need to without any discomfort.  This means I can focus on coding instead of on physical discomfort.

So yeah, that's just a few thoughts on investing in yourself.  Sometimes some of the things you get will not work out, and that's o.k., a couple of bucks will go to waste, but if you research the product enough and decide it could help you in achieving your goals, then you'll be right more often than not, and it'll pay off in increased productivity.

Today, Erik Trautman hosted an online presentation (via Google Hangout) in which he invited potential coding school applicants to ask any questions we may have about the program.  I submitted a couple of questions in case Erik could use a few extra to fill out the presentation.  To be honest, the only real question I have is:

"When can I start?"  

Hahaha!  Seriously though, I've got to keep up the momentum and get these modules knocked out.  They're actually pretty fun to go through, and I'm learning a lot.  Coding is cool.  

Oh, the hangout started!  There's a girl chatting with Eric, and I can see her in the video...I'm not sure if I am supposed to do video.  I thought it would be like a chat, I haven't used Google Hangout before.  Neat.

Ok, I figured out how to use it!  Next time, I'll look for the save chat history feature, I didn't know that the chat would not be saved without it.  Nonetheless, that was cool.  I found out that Erik's a mechanical engineer, and he's been coding since college.  That's pretty cool.  Oh, and he was in finance before going into coding as a career, which is cool because I was in finance too, when I worked as a stock broker.

Erik mentioned that two of the students from the first class now work for The Odin Project/The Viking Code School.  I think that's pretty neat.  I wonder if they work remotely or if they work from an awesome San Francisco office.  I'd consider moving to San Francisco...perhaps.  

Erik mentioned the Pomodoro technique and rescue time when i asked him about time management tools, so I'll look into them.

I love this.  Making the decision to code is making every day novel and exciting, as well as giving me an even happier outlook on the future than I already had to begin with.  

Good stuff.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 72)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 3

Total Hours Coding: 473

Assignment from Viking Code School Prep Work: Twitter, Airbnb, and Amazon UX Teardowns

This is my Viking Code School prep work UX teardown for twitter, airbnb, and amazon.  This post is different from my usual posts, as it is intended to be shared, unlike my other posts, which are more like personal notes.  As such, I won't include any of my coding stats on this post, but I'll go back to doing so after this post.  

One thing that was made plainly obvious while doing the UX teardowns of these three sites was that the design of these sites facilitates their key user's critical goal.  Another thing I noticed is that all three of these sites depend on user-generated content.  All three of these sites provide a platform that is then filled up by buyers and sellers, or in the case of twitter, by readers and writers.

These sites are very successful, they have been carefully designed to facilitate certain critical goals, leading to exponential growth rates.  Also, my first information architecture sketch was done with pencil and paper, but the second and third sketches were done using Balsamiq, which produced far more useful end results.

O.k., here goes!

Twitter UX Teardown

1. Who is the key user? This isn't always clear, especially in marketplace sites, so take your best guess.

People who enjoy consuming and creating microblog content.

2. What is that user's number one critical goal when using the site? Be as specific as possible if there are multiple options here, e.g. "to purchase a red wagon" instead of "buy a toy".

The user's goal is to consume and create microblog content. Twitter limits you to posts of 140 characters or less.

3. What is likely to make that user's experience particularly positive (i.e. provide good satisfaction)?

Easily being able to update content on a user's microblog and the ease with which the user can follow other users' microblogs.

4. What is the approximate information architecture of the site? (sketch it out)

Drawing that took a while and my desk is now covered in pieces of used up eraser, pencil shavings, and lead, haha.  I'm going to try using Balsamiq to do this for the next two UX teardowns, to see if that's faster, now that I know how to use that tool. 

5. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?

Once logged in, on the very first screen, the user can microblog (tweet) via a text entry box located on the center of the screen. It's very efficient.

6. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?

A horizontal navigation bar is used. Twitter does let the user know where they are and how they got there, as the area of the navigation bar that you are currently in is marked by a blue underline, so you can't get lost. As far as where should I go next and how do I get there, the site focuses the user's attention on the twitter feed by having it centered on the screen and occupying the greater part of the screen's width. From there, the user's individual preferences will determine the path the user takes through the user generated content (or sponsored ads).

7. What key interactions does the user have? Are they clear and usable?

The user can make a tweet, send a message to another blogger, and explore the profiles of other bloggers. Making a tweet is straightforward.

8. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site focuses on user's critical goal, microblogging, pretty much exclusively. The trends box gives users suggestions on what trending hashtags to follow, the main twitter feed gives users access to the content created by people the user is following and allows the user to create content, and the "who to follow" section on the right gives users suggestions on new people to follow. In sum, the site is all about microblogging, and does a great job at encouraging users to create and consume microblogging content.

9. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site has a help section for any questions you may have, but it's all in text. I think it would be nice if the site also had video walk-throughs, because those are fun to go through. Other than that, I don't really think it does much poorly.

Airbnb UX Teardown

1. Who is the key user? This isn't always clear, especially in marketplace sites, so take your best guess.

People who are looking for lodging during their travels.  People who are looking to post available lodging are also key users, because without sellers, there are no buyers, but the buyers vastly outnumber the sellers, so I chose to label buyers the key users.

2. What is that user's number one critical goal when using the site? Be as specific as possible if there are multiple options here, e.g. "to purchase a red wagon" instead of "buy a toy".

The user's goal is to book lodging.

3. What is likely to make that user's experience particularly positive (i.e. provide good satisfaction)?

A streamlined process with which to make the booking.

4. What is the approximate information architecture of the site? (sketch it out)

Well, I tried drafting the information architecture both ways, via pencil and paper and via Balsamiq, and Balsamiq is much better for visualizing information architecture.  I love Balsamiq!

5. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?

Enter location desired, enter arrival date, enter departure date, select number of guests, click on the search button, click on the lodging desired, and then book the lodging (the process then varies from there depending on if the user already has an account or not).

6. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?

There are two horizontal navigation bars on top, one of which only appears when the user scrolls down far enough, but the site is so streamlined that it is virtually impossible for a user to get lost.  The user is guided every step of the way in a very intuitive manner towards the end goal, booking lodging.  In addition to the architecture being extremely efficient, the site is also aesthetically pleasing.  O.k., that's an understatement, the site is downright elegant, it has a minimalist beauty to it.

7. What key interactions does the user have? Are they clear and usable?

The user is able to search for lodging via a combination of google maps and images of the specific bedrooms/apartments/houses available.  This system is very clear and very usable, it's fantastic.  

8. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site focuses on the user's critical goal, finding lodging, in a way that makes the search for lodging itself a pleasant experience.  In the past, searching for a hotel involved calling many hotels, jotting down details for comparison, and then crossing one's fingers that what was advertised was what was delivered.  Now, with airbnb's model, what used to be a somewhat tedious process has been turned into an amazing experience.  It's beautiful to behold.

9. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

The only thing I can think of, if forced to answer this from the viewpoint of a user, is that the site is amazing, but it is still not a popular service in some parts of the world, so the search function will return sparse offerings in those locations, which is not good.  It would be great if airbnb would promote itself in places where it has not made inroads yet.  So, for example, there are mid-size cities around the globe where there are plenty of hotel offerings, but few or no airbnb offerings because landowners in those areas simply haven't been exposed to airbnb yet.  As airbnb grows and grows, this will change, but for now, there are still areas where airbnb pickings are sparse and travelers still have to deal with hotels.  That said, from the viewpoint of a business owner, not promoting airbnb in these mid-size or smaller cities may be the better business decision for now, allowing growth to happen via word of mouth, so it's understandable.

Amazon UX Teardown

1. Who is the key user? This isn't always clear, especially in marketplace sites, so take your best guess.

Buyers of consumer goods.  Sellers are also key users, as without the sellers, there can be no buyers, but as the case with airbnb, buyers vastly outnumber sellers, so I chose to label buyers as the key users.

2. What is that user's number one critical goal when using the site? Be as specific as possible if there are multiple options here, e.g. "to purchase a red wagon" instead of "buy a toy".

The key user's goal is to purchase consumer goods.  

3. What is likely to make that user's experience particularly positive (i.e. provide good satisfaction)?

Easily being able to find desired goods to buy. 

4. What is the approximate information architecture of the site? (sketch it out)

I love Balsamiq.  It's easy to work with, and I can see how, whenever you are going to create a web application, you've got to mockup both the information architecture and the site itself before writing your first line of code, to lay the groundwork for completing a project efficiently.

5. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?  

Once logged in, on the very first screen, the user can enter the name of the desired product in the search bar on the top of the screen, which takes up most of the space on the navigation bar.  Once the name is entered, the user clicks on the search button (a magnification glass icon) and a list of results sorted by relevance appears below the search bar.  To the left of the search bar, the users is shown various options that can be used to further filter the search results.  To the right of the search bar, the user is sometimes (depending on the product category) shown sponsored ads for products that are also relevant to the search criteria entered.

6. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?

A horizontal navigation bar is used, but the main feature is the search bar, which facilitates the user's key goal, finding a desired consumer good to purchase.  It's hard for the user to get lost, because the search bar itself is the primary way to navigate the site, and as the search bar is easy to find, navigation is a breeze.  This is excellent, as the design of the site is completely in sync with the key user's goals.

7. What key interactions does the user have? Are they clear and usable?

The user can search for a product, be given a list of results, and can then interact with those results in many ways, by viewing images of the product, viewing product reviews, and finally, making a purchase.  The interactions are very clear and usable, the site is well made and uses every inch of its real estate to advance the key user's goal.

8. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site focuses on the critical user goal, making the search bar very large and using good search algorithms to display highly relevant goods to the user.  Then, the site has a review system which allows the user to judge a product, after which, if desired, the user can then walk through the very streamlined purchasing process.

9. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

The ads can be a distraction if a user is just trying to get in and get out, but in Amazon's defense, the ads are usually relevant to the search, and also, many shoppers are not looking for an efficient experience, instead enjoying meandering through the product selection, taking their time to compare goods before selecting the good to purchase.  Amazon does a fair job of catering to both buyers who prefer a direct, efficient process and those who prefer to meander about and take their time.

Day 92 - 99: Back to Module 2, Design

I really want to pass the entrance exam for the Viking Code School, and so I was planning on taking it in JavaScript, but after doing 20 hours of JavaScript studying, I realized that much of my effort, because it was spent studying material not provided by the Viking Code School, was being inefficiently applied.  That is, much of what I was studying may not even be on the exam, or more importantly, I may miss something that I should have covered.  This is in contrast to going over all the modules, the content of which is sure to help me gain admittance to the coding school.  While the exam will deal in large part with the material covered in the last module, "Coding," completing the other modules as well will show that I am serious about this, and it will also help me with the interview after the exam.

I thought that studying JavaScript for a week intensely would prepare me enough, but upon doing so, I see that the material I was studying, while great material, could easily have gaps in the material which may result in me missing critical knowledge.  So, in order to prevent this possibility, it's back to the modules.  I think this is the right decision, and I don't see the 20 hours I spent on JavaScript in the last couple of days as time wasted in any way, shape, or form, as I need to master JavaScript anyways, so it furthered my goals considerably as I'm now more comfortable with the language.

Note: For Chapter 10, we are supposed to do a UX teardown for Twitter, AirBnB, and Amazon, but I'm going to make a separate post for that after I finish the entire module.  This is because we are supposed to send a link to our blog post that contains the UX teardowns, and I don't want to include all the extra material in this post on that blog post.

Continuing with Module 2, Design

O.k., today I went back to the Design module, starting with section 12, "What is Good Design?"  Then I read Chapter 13, "Design on the Web," and Chapter 14, "Layout and Composition."  I then read Chapter 15, "Building Visual Hierarchy" and Chapter 16, "Fonts and Typography."  I downloaded an add-on called WhatFont and added it to Google Chrome.  These chapters are all going over design, which I've actually covered quite a bit already in my Treehouse courses, so the material is familiar to me.  The next chapter was Chapter 17, "Demo: A Sample Design Teardown."  For chapter 18, I went over design teardowns.  For chapter 19 we went over grid systems, which I'm already familiar with due to the Treehouse courses.  For chapter 20 we went over color, and I installed an add on called ColorZilla which lets me identify a color on a website easily in case I want to use it.

We then went over the differences between wireframes (real basic, structural), mockups (more meat, so to speak, more design involved), and prototypes (closer to the final product, may even be aesthetically finished).  The three processes can blend into one another, but it's good to have an idea of what they generally refer to.  That chapter went over the high level process for building sites again:

Identify the user and her goals 

Mock up the site that fulfills those goals 

Break the mockup into discrete pieces of work ("stories") 

For each story, start with the mockup of its end result (e.g. the specific feature) and build the data infrastructure, back end, and front end necessary to actually produce it.

Validate, refactor, and ship. I thought I'd copy that to reference it from time to time.

Learning to Use Balsamiq Mockup

For chapter 22 we started learning how to use Balsamiq (a software program) for mockups.  I created my first mockup, it's very simple, here it is:

Cool, huh?  Graphically speaking, it's quite endearing.  I really liked the Balsamiq software, not only is it easy on the eyes, but it's also very intuitive.  On Balsamiq, before you click on an item, hold down the alt key, and when you click on it and pull away, you'll have a copy of the item.   

I viewed a video going over the construction of a Balsamiq mockup for a restaurant webpage.  I also learned how to link mockups together, to simulate the links between different parts of a website.  These links even continue to work when you save the mockup as a pdf file.  I walked through how to download BMML files from the mybalsamiq website and use them in my own (30 day free trial) Balsamiq browser version.

So now I'm on Chapter 23, "Demo: Mocking up the Viking Blogger," which means I'm almost finished with the second module, as it has 27 chapters.  Chapter 23 has a 30 minute video going over design and mockups.  Also, in chapter 23, it was revealed that we'll actually be constructing and deploying a blogging web application.  I'm completely stoked, this is wonderful!  

In the video, Trautman did something interesting, when he wanted to de-emphasize something (the date/time label for a post on the blog), he not only made the text size smaller, but he also made the color grey instead of black, making the text sort of fade, in comparison to the black text and heading.  I thought that was a great use of color to achieve the desired purpose of guiding the user's eyes to the content of the actual blog post, as opposed to the peripheral information.

I purchased a version of Balsamiq because Trautman mentioned that he "kind of thinks in Balsamiq," so that, to me, is a pretty solid endorsement of the tool.  Since I aim to be a web developer, I think equipping myself with tools as highly rated as this one is a great investment in myself.  I wasn't sure whether to go for the desktop or the online version, but in the video, Trautman is using the desktop version, and in the reviews, people commented that the desktop version is faster than the browser version, which can lag at times.  So those two factors influenced my decision to go with the desktop version.

I've been playing around with Balsamiq quite a bit now.  I really like the ability to link mockups.  It's superior to paper and pencil, because you can resize objects without having to erase and make a mess.  It's a fantastic tool, and I'm really glad it was brought to my attention.  

I learned about modal windows, which are those windows that come from the main screen, then take up the whole window and you feel like you are trapped, but then there is an x in the upper corner or a close link on the bottom right.  

Another way that Trautman used to set aside comments from the main text is by having them be indented, so that they appear less important than the main post.  Command down arrow (or up arrow) moves the positioning of an object from foreground to background, for example.  I saw how to color things on Balsamiq.  That seems like a small thing, but think about the advantage of being able to do that, versus doing so on a pen and paper mockup.  You can't really erase color on pen and paper, not an entire drawing anyhow, not without making a mess.  Balsamiq really shines with this feature and many others, as opposed to a board and markers or pen and paper.

I worked on two mockups on my own, for an imaginary startup, just to get the hang of Balsamiq.  I made two sample landing pages, using different background images and hues for the transparent header and footer.  The instructor used a site called paletton (www.paletton.com), which is useful for creating an aesthetic color scheme, so I I bookmarked it for future use.

After that, I started on Chapter 24, "Tearing Down and Mocking up Facebook."  This chapter requires us to do a UX and design teardown of Facebook as a whole and of various individual Facebook pages.  I'm finished with the UX teardown of Facebook as a whole, but the design teardown involves tearing down 5 separate pages, after sketching the visual hierarchy for each page.  While reviewing to do the work for this chapter, I learned more about lightboxes, which are very similar to modals, except with lightboxes, you can usually click outside the box to go back to the regular page, whereas with modals, the user is required to interact with the modal before the user can return to the page. 

Regarding Time Management and My Goal to Become a Web Developer

I'm working on finishing up this module, and it's taking quite a bit longer than I thought it would take.  I downloaded several time management apps and add ons, such as Tracking Time for Google Chrome (I can create projects and track how much time I have spent on them) and Be Limitless, also for Google Chrome (it tracks the time I spend on websites that I classify as either productive or not productive, although I have most unproductive sites quasi-blocked already anyways with StayFocusd, which limits me to 1 minute a day on unproductive sites).

Oh, here's some pics of my new working area!  I gave away my old desk (the surface area wasn't large enough) and I bought a solid ikea desk with adjustable height as well as a comfortable office chair.  It's been great so far, two days ago I spent 9 hours straight studying, and my legs didn't hurt like they used to after spending an hour or so sitting on my old chair.  i guess I didn't realize it, but I was too tall for that chair or something about its ergonomics just weren't ideal for my taller frame.

O.k., this blog post is becoming way too long, haha, I'm cutting it off here and resuming my practice of blogging once a day, to keep the subjects of each post more concise, and also, to better keep track of my hours spent on coding every day.  

Good stuff!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 72)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Since Last Entry: 29 (note: I included the hours spent working on the next blog post in this one as well, since the next blog post does not include coding stats)

Total Hours Coding: 470

Day 87 - 91: Back to the Javascript Book

This blog entry will chronicle my studying from the period starting on April 3, 2015 and ending on April 9, 2015.  This period comprises the 7 days I will use to study javascript, with the goal being to take The Odin Project's exam on April 10, 2015.  I'll use this entry as a sort of quick reference for javascript basics.  NOTE INSERTED LATER: I changed tactics on April 7 in order to take the test in Ruby.  I will be going over the modules instead, but I put in 20 hours of JavaScript coding in the last couple of days.

I started the day on Chapter 10 of the javascript book, which dealt with "if" statements.  I learned that the equal sign is reserved for assigning a value to a variable, while the === sign is used for testing a variable for a value.  So, we should not use the single = when testing a variable for a value, for example in an "if" statement.  Here's an example of this concept:

if (var1 === var2) {
  var3 = var4;
}

So, above, var1 is being tested to see if it matches var2, so we use the triple === sign.  Then, on the second line, the value of var3 is being transferred to var4, so in that case, we use the singular = sign.  

Another comparison operator is !==, which is the opposite of ===, so !== means is not equal to.  The instructor says the double equal sign can be used instead of the triple equal sign, and the != can be used instead of the !==, but I'm sticking to === and !== at the instructor's request.  

Next is Chapter 12, which goes over "if...else" and "else if" statements.  With "if" and "else...if" statements, we have some parentheses after the "if" or "else if" with a condition within, but with "else" statements, there are no parentheses (no condition), there are only brackets with commands within. 

When being instructed to assign a variable to another, for example "assign a to b," we write it like so:

b = a;

So, "assign the number 8 to the variable x" is written like so:

x = 8;

In Chapter 13, we worked on testing sets of conditions with the or operator, || and with the and operator, &&.  These can be chained and parentheses can be used to clarify ambiguities.

In Chapter 14, we went over nested "if" statements.  Nested "if" statements can be used instead of "if" statements with the and operator, &&, as a part of the condition.

In Chapter 15, we went over arrays.  In an array, because the first element has an index value of 0, that means that the last element in an array always has an index value one number less than the amount of elements in the array.  So, for example, if an array has 10 elements in it, the index value of the tenth element would be 9 (because the first element has an index value of 0).  When choosing the variable name for an array, it is common to give it a plural name, for example cities instead of city, since an array is used to list things.  

In Chapter 16, we went over adding and removing elements from arrays.  If you happen to make an array with some empty elements, anytime you try to reference them, the output will be undefined.  You can remove the last element of an array like so (you don't have to identify the last element):

list.pop()

Assuming the array was named list, then the last item in that array would be removed.  You can also add elements to the end of an array like so:

list.push("Sample String", "Sample String")

The code above will add those two strings to the list array, at the end, in the same order as they are entered in the parentheses.

In Chapter 17, we went over removing, inserting, and extracting elements in an array.  This:

list.shift()

Will remove the first element in the list array.  This:

list.unshift(sample, sample, sample)

Will insert the designated elements in the beginning of the list array.  We learned about the .splice() command.  Suppose you have an array with the elements:

["dog", "cat", "fly", "bug", "ox"]  

The following code adds "pig", "duck", and "emu" after "cat" while removing "fly" and "bug".

pets.splice(2, 2, "pig", "duck", "emu");

The first digit in the parentheses is the index of the position where you want to start adding or deleting.  The second digit is the number of existing elements to remove, and it starts right after the element(s) that you just inserted.  It can be a little confusing, but just imagine that the .splice() command is inserting itself into that index spot and shoving whatever is already in that spot to the right.  The second number is then the amount of items to remove AFTER the items inserted.

Then we went over the .slice() command has a similar name, but does something different.  It copies one or more consecutive elements in any position in an array and puts copies of them into a new array (so it doesn't remove the originals).  A good way to remember is to think that sPlice "Pushes" or "Pastes" elements out of or into an array, while .slice() cannot push or paste, it can only copy. 

Lets say you have an array like this, named list, ["dog", "cat", "fly", "bug", "ox"].  The code below:

var newList = list.slice(2, 4);

Will copy "fly" and "bug" into your new array, newList.  The 2 is the index number at which you start, and the 4 is the index number after the index number of the last item you want to copy.  So you could visualize it like list.slice(index # to begin copying, index # after last copy).  Or perhaps list.slice(index # to begin copying, index # not to copy).  That should help.  If you happen to slice array elements into the same array, because you are giving the array variable a new value, the old array will be gone in that case, not because the copying destroyed it, but because transferring the slice data into the array variable replaces the prior array/data.

Chapter 18 goes over "for" loops, but before doing that, since I just went over arrays, I wanted to give Euler Problem 2 another shot.  Here's my solution from a week or two ago:

var fibArray = [1,2];
var total = 2;

    for (var i = 0; i < 30; i += 1) {
     var fib = fibArray[fibArray.length - 1] + fibArray[fibArray.length - 2];
     fibArray.push(fib);   
     if (fib % 2 === 0) {
     total = total + fib;
     } 
    }

    document.write(fibArray)

    console.log(total);

And then here's my new solution:

var fib = [1, 2];
var totalElements = 2;

for (var i = 0; i < 100; i += 1) {
  if (fib[fib.length - 1] + fib[fib.length - 2] < 4000001) {
  fib.push(fib[fib.length - 1] + fib[fib.length - 2]) 
  totalElements = totalElements + 1;
  }
}

document.write(fib);
console.log(totalElements);

var evenTotal = 0;

for (var i = 0; i < totalElements; i += 1) {
  if (fib[0] % 2 === 0) {
    evenTotal = evenTotal + fib[0];
    fib.shift();
  }
  else {
    fib.shift();
  }
}

console.log(evenTotal);

The thing is, in neither do I use a function.  In both of them, I'm figuring out the answer as I go along by running the Fibonacci sequence and then using my output to keep going with the formula.  By the way, the 100 in that for loop is simply a number of iterations, but it takes less than that many iterations, I just had to put a number there, but the thing is, the question remains, "How do you know it takes less than 100 iterations?"  Well, I know because I ran it and then I saw on the screen by testing various numbers, but that's not good enough.  I need to be able to solve the problem with a function in order to be prepared to take the test.  So, that's the goal right now.  By the way, here's my new and improved solution to Euler Problem 1:

var total = 0;

for (var i = 0; i < 1000; i ++) {
  if (i % 3 === 0 || i % 5 === 0)
    var total = total + i;
}

document.write(total);
console.log(total);

That one's clean, unlike my solutions to Euler Problem 2, which are quite convoluted.  In going over my solutions to the problems, in both cases, I found unnecessary code (in my first solution to Euler Problem 2 posted above, I removed the extra code).  By unnecessary  code I mean code that, if removed, did not affect the answer at all, it was 100%, completely superfluous.  I feel good about seeing that, because I'm seeing that my understanding of javascript keeps increasing, so that what I didn't notice as extra code the first time I solved the problem, I now noticed it as such when reading my code.  Nonetheless, I've got to solve Euler Problem 2 via the use of a function.  I could skip ahead in the book to the chapters on functions and get done with it, but I'm going to go over the chapters sequentially, to make sure I cover all the basics.

Anyhow, onwards with the book and I'll come back to this.  Wait...I figured out a fix for the "100" problem...I replaced 100 with fib.length, and it worked:

var fib = [1, 2];
var totalElements = 2;

for (var i = 0; i < fib.length; i += 1) {
  if (fib[fib.length - 1] + fib[fib.length - 2] < 4000001) {
  fib.push(fib[fib.length - 1] + fib[fib.length - 2]) 
  totalElements = totalElements + 1;
  }
}

document.write(fib);
console.log(totalElements);

var evenTotal = 0;

for (var i = 0; i < totalElements; i += 1) {
  if (fib[0] % 2 === 0) {
    evenTotal = evenTotal + fib[0];
    fib.shift();
  }
  else {
    fib.shift();
  }
}

console.log(evenTotal);

Okay, I like that much better than the solution with the random "100" inserted in.  Well, from that, I worked on a cleaner solution:

var fibArray = [1,2];
var total = 2;

for (var i = 0; i < fibArray.length; i += 1) {
  var fib = fibArray[fibArray.length - 1] + fibArray[fibArray.length - 2];
  if (fib < 4000001) {
  fibArray.push(fib);
  }     
  if (fib % 2 === 0 &&  fib < 4000001) {
    total = total + fib;
  } 
}

document.write(fibArray)
console.log(total);

When running this code, the first if statement is true 30 times, the second if statement is true 10 times, and the loop itself runs 32 times.  However, on the 31st loop, we do have a new value for fib, but it becomes a standalone value because no new fib is pushed, as the first if statement does not activate (neither does the second, as the number is odd, but if it were even, it would activate, and this would cause a problem, as a number like 4,000,002 would go past the first if statement, but trigger the second, so to fix this, I added fib < 4000000 to the second if statement as an additional condition).  I can also add - 1 to the second section of the loop condition, and that gets us down to 31 loops, with the end result being the same (the fib variable becomes the first Fibonacci number over 4,000,000, but does not get pushed to the array, and so, it remains the same on every iteration after that one), but I decided to move along from this problem for now, as that code above is much cleaner that my prior attempts.  It's like a synthesis of the best of my first and second solutions.  I'm stoked that I finally came up with a solution where I don't have to know the number of iterations ahead of time in order to solve the problem.  I've learned quite a bit, and I'll come back to this problem later once I've learned some new things.

So, Chapter 18 goes over "for" loops.  This is an example of a simple way to iterate through an array, via the use of a "for" loop, coupled with an "if" statement:

var city = prompt("What is one of the cleanest cities?");

var cleanestCities = ["Cheyenne", "Santa Fe", "Tucson", "Great Falls", "Honolulu"];

for (var i = 0; i <= 4; i += 1) {
  if (city === cleanestCities[i]) {
    alert("Good job!");
  }
}

The i <= 4 in the for loop means the loop will iterate until i is less than or equal to 4.  Since the first loop has I set at 0, that gives us one extra loop, for a total of 5 loops, equaling the 5 elements in the array.  You can decrement and use negative numbers, for example this loop:

for (var i = 0; i > -3; i--) {

Runs three times and decrements by 1 each time.  It starts at 0, goes to -1, then -2, then it can't run a third time because -3 is not less than -3.  

Chapter 19 then goes over "for" loops on more detail, going into flags, booleans, array length, and "loopus interruptus," as the author calls it.  I learned about flags, where we set a variable to default to false (or true), and then if a condition is met, we change that variable to true (or false), but if not met, the flag/variable remains false and another statement runs.  I also learned about the "break" keyword which can be inserted after a line of code when we want to prevent further iterations from running, for example if an answer was found on a 3rd loop, but the computer was set to run 8 loops, the "break" keyword would prevent the loop from continuing once it's no longer necessary for it to do so.  Here's an example of a flag:

var matchFound = false;

The false is a boolean value (the other is true).  So we have this variable default to false, then switch to true when certain conditions are met, and if they aren't, it remains false and triggers some other conditions.

Chapter 20 goes over nested for loops.  I finished Chapter 20 and stopped there because I don't think the things I am learning will prepare me enough for the test.  I thought they would, but that's not the case so far, so I've got to change course.  

I am going back to the modules starting tomorrow, starting where I left off, and continuing from there until I finish the modules.  Once I finish the modules, I will take the test for the Viking School, in Ruby.  I could take the test right now in JavaScript, but I think my odds of passing it are much higher if I take it after going over the material provided by the Viking Code school itself, instead of by going over an unrelated JavaScript book.

Nonetheless, I got quite a bit of work done these last couple of days, a total of 20 hours of coding.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 72)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Since Last Entry: 20

Total Hours Coding: 441