Month 2

Month 2 - #301DaysOfCode Daily Updates

Missed the first month, and do not know the basics of HTML, CSS, SASS, nor JQuery? Start the first month of #301DaysOfCode.

Intro to Wireframing - Part 1 - (Day 32)

Topic Covered:
Link: A Beginner’s Guide to Wireframing

Resources:

My Takeaways:

Golden rule – Keep it simple

  • Be comfortable trashing or altering wireframes your team or client does not like.
  • It is okay to be messy. We are going for many fast ideas.
  • Do not worry about color, yet.

Have a process.

  1. Typically start by hand drawing.
  2. (Optional) Then, make a low fidelity wireframe in a tool you can share with others. Personally, I would do this in Photoshop.
  3. Make a mockup. We are going to use bootstrap for this.

Have a user/business goal for each page.

  • Is this a signup page?
  • Is this a profile page?
  • Etc

Have a main message for the page.

  • Have a call to action.

Layout the information hierarchy of the page.

  • How will your directories, subdirectories, and pages be laid out?
  • What page elements go where?
  • What is the most important to the user?
  • What is most important for business goals?
  • What is the buyer persona for the webpage?
  • Which pages link to which?

Do not work alone.

  • Seek feedback and create a cross functional team. That can provide input, a loose strategy to consider while designing, and what the client may want.
Do not work alone - a quick rant.

A note: While you do not have to know the day to day of a graphic designer, digital marketer, or CRO professional it helps to know how their roles fit with yours.

Note 2: Do not make the classic developer blunder, “build something awesome and people will love it”. Many developers, let alone people do not know what others like because they are so wrapped up in what they want.

To avoid this trap, build a network of designers, marketers, and UI pros as you learn to code.

The founder of Pied Piper from the show Silicon Valley exemplified what not to do. He made his UI, and marketing message, so detailed only a software engineer would love it.

Now I understand what Monica was worried about. (From the Pied Piper website.)

Ordinary people had no clue why they needed his app, or how to use it.

Remember, we are usually developing for end-users who barely know the difference between Internet Explorer and Google Chrome. They just know which one is “better”, and want it to “just work”.

Do not work alone.

  • Reach out to an experienced marketing friend or the marketing department. They can help with:
    • Buyer intent, marketing messages.
    • Buyer personas.
    • Color physiology.
    • SEO best practices.
    • Social media features.
    • Marketing trends to integrate.
  • Reach out to a graphic designer. They can help with:
    • Unique layout ideas.
    • Color palettes.
    • Creating quick lo-fi layouts.
    • Textures.
  • Reach out to a UX/CRO professional. They can help with:
    • Which colors convert customers the best.
    • What typical layout flows have the lowest friction on users.
    • What A/B tests they may want to run in the future.

Common Communities Were These Non-Devs Hangout:

A quick note. If you want to learn SEO, Moz has one of the best communities. I learned SEO by reading Moz & watching White Board Friday videos. I also have a free intro to SEO course on if you are interested.

Intro to Wireframing - Part 2 - (Day 33)

Free Online Tools:

  • Mind Map Style Planning – Coggle
  • Perfect for low fidelity mockups – Frame Box
  • Great for mapping user flows and database structure – Draw.io
  • Good for a simple low to medium fidelity mockup – Google Drawings
  • Have not tried this one myself, but it looks awesome – The Pencil Project

For Hand Drawn $:

I suck at drawing and perspective. Like, really bad lol. Check out these boss UI Stencil Templates if you are drawing handicapped too.

Our Wireframe Stack:

While you could pay for an all-in-one solution I prefer free, even if that means I need to use a few tools. You are going to use Coggle for your page brainstorming, Frame Box for your page mockups, and Draw.io for mapping alternatives to user actions.

Don’t worry, you are keeping this process simple at first. I am still learning how to use these tools myself.

Fast forward:

I find it is easier to learn a concept with a project. Review the details of your tribute page project Day 34 & Day 35. Then, come back to this section.

User Stories:

As you can see the tribute page instructions introduces you to user stories. But what the heck are user stories?

Recall from yesterday. You want to have a business or user goal for each page.

A User Story is an Agile Software development tool that allows us to quickly create those goals.

Fun fact: Uncle Bob Martin from last month’s video had a large part in developing the agile software process widely used by development teams today.

Here’s the typical user story template:

As a <role>, I want <feature> so that <reason>.

Examples of user stories:

As a <user>, I want to <upload photos> so that I can <share photos with others>.
As an <administrator>, I want to <approve photos> before they are posted so that I can <make sure they are appropriate>.

Pretty simple and neat huh?

First up we are going to use Coggle to plan out the elements of our tribute page.

Make a Tribute Website - (Day 34 & 35)

We are doing the Make a Tribute website challenge from Free Code Camp for the next couple of days. Challenge yourself a little and use what we have learned from JQuery, and SASS in your project.

Start with a bootstrap base in Code Pen. You are quickly becoming a pro-Googler, it is time to look up answers you cannot find for yourself. In building my tribute page I had to Google roughly 10+ resources, to understand what I was doing better, get the syntax correct, etc.

Do not worry if you make mistakes. One of the most important lessons you can learn in life is to keep failing until you succeed. Programming is not the exception to that lesson.

My Tribute page: Who was Alan Turning

Challenge user stories:

I can view a tribute page with an image and text.
I can click on a link that will take me to an external website with further information on the topic.

Personal Note:

Begrudgingly attending a Project+ bootcamp today. It’s free, and I get a test voucher if I pass the pretest, so.. Yay!! I took my final exam with Support.com yesterday, so my brain is kind of fried O_o

Basic JavaScript - Part 1 - Ramp up with Code Cademy - (Day 36)

Often I feel Code Cademy throws us in the deep end when introducing new material. This time Free Code Camp leads the way re: the deep end, so we will start off with part of the Code Cademy JavaScript course, and then move over to FCC tomorrow.

Just complete the first portion of JavaScript by CC: Introduction to JavaScript

If you already did this portion of JavaScript by CC because you needed it to get through JQuery last month, no worries. Take a day to review and work on a personal project.

Basic JavaScript - Part 2 - With Free Code Camp (Day 37)

Lessons covered in FCC:

  • Comment your JavaScript Code — >Finding a Remainder in JavaScript

You may not feel the burn but when I got up to “Storing Values with the Assignment Operator” by Free Code Camp I had to pause to work through the exercise. I feel their instructions are a bit cryptic so here are my revised instructions for this lesson:

Understand that b already has a value of 2. While to someone new to code it would make sense to do it this way from a grammatically logical point of view because that is what the instructions directly state, it is a trick.

a = 7;
b = 7;
a = b;

Programming has its own differing sense of logic in order to remain as resource efficient as possible. With this mindset, you have to count Variable b already equals 2. Working with the unchanging principle that b already has a value of 2, you must look deeper from a mathematical perspective at how JS resolves assignments.

“Assignment always goes from right to left. Everything to the right of the = operator is resolved before the value is assigned to the variable to the left of the operator.”

Keep in mind code processes from top to bottom, left to right. You will have to put some assignments above others for this to make sense. You may also have to ensure some assignments are on the left side of the “=” and not the right for this to make sense.

Good luck, you got this.

My notes:

Straight from the horse’s mouth. “In JavaScript all variables and function names are case sensitive. This means that capitalization matters.

MYVAR is not the same as MyVar nor myvar. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you do not use this language feature.”

  • Best practice dictates the use of camelCase.
  • To increment (add 1), change the entire line to “myVar++;” eliminating the need for the equal sign.
  • To decrement (subtract 1) use “–: instead if “++”.
  • “We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as floating point numbers or floats.”
  • The remainder operator % gives the remainder of the division of two numbers.
    • In mathematics, a number can be checked even or odd by checking the remainder of the division of the number by 2.
Basic JavaScript - Part 3 - With Free Code Camp (Day 38)

Lessons covered in FCC:

  • Compound Assignment With Augmented Addition — >Word Blanks

Notes:

  • “myVar = myVar + 5;” make it more efficient “myVar += 5;”
  • -=
  • *=
  • Escaping
  • Concatenating
  • I just learned the meaning of += today, but re: string concatenation I feel I should shout, “Where have you been all of my life!” ahaha <3 Love at first sight.
  • “Bracket notation is a way to get a character at a specific index within a string.”
  • “Most modern programming languages, like JavaScript, don’t start counting at 1 like humans do. They start at 0. This is referred to as Zero-based indexing.”
  • “In JavaScript, String values are immutable, which means that they cannot be altered once created.”
  • Pretty cool you can find the value of an index from a string from the front as well as from the back.

Googled:

  • function vs variable. Read:
  • @JavaScript Scope cleared up some confusion for me. It made it easier to see what belongs to what, and how it may or may not effect code around it.
    • “Variables declared within a JavaScript function, become LOCAL to the function.”
    • “Local variables have local scope: They can only be accessed within the function.”
    • A global variable can be accessed anywhere, even inside another function.
    • ** In looking at local, global, and global by default I am going to assume miss using global variables could create security issues. I will look this up later down the line after I am more familiar with JS.
Basic JavaScript - Part 4 - With Code Cademy (Day 39)

Section covered in CC:

  • Introduction to functions.

Notes:

  • After getting super frustrated with how returns work on FCC, I swapped over to CC to get up the momentum.

What I learned:

  • Once the function runs be sure to consider any additional processing will be done on the returned value.
  • The === operator compares the likeness of two values.
    • Ex; 0 === 1 <– Would be true becuase they are both numbers. 0 === “”zero” <– Would be false because one is a string and the other is a number.
  • While the == compares the literal values. Ex: 1 == 1 <– The number one is equal to one.

Googled:

Difference between == and === in JavaScript

Basic JavaScript - Part 5 - With Code Cademy (Day 40)

Section covered in CC:

  • “Build Rock, Paper, Scissors”

Notes:

  • Having a little trouble remembering how to express a range between one number and another. After looking it up, I had a “No, duh” moment. I can use greater/less than or equal to.

What I learned:

  • The Math.random() method will call a random range of numbers between 1 and 0 with several decimal places.

Googled:

Basic JavaScript - Part 6 - With Code Cademy (Day 41)

Section covered in CC:

  • Introduction to “for” loops.

What I learned:

  • A for loop is basically a while loop in short hand.
  • You can increment and deincrement any value
    • i += x | i -= x
  • A for loop is given 4 elements:
    • Starting point,
    • End point (Boolean)
    • Code block
    • Incrementation
  • For loop explained:
    • We define the starting and end points first.
    • Then, the code block runs.
    • Next the for loop increments.
  • If a for loop is not given a condition in which it ends, it will keep running as a infinite loop until it crashes your computer.

Googled:

JavaScript Unit Testing And TDD Theory - With hirez.io (Day 42)

After seeing some code tests while doing CodeCademy, I figured it was time to learn to test my code from the start. I want to develop good habits early.

I’m watching all 8 videos of JavaScript Unit Testing And TDD Theory today.

Notes:

A good portion of this was over my head, but it was nice to get exposure. I also picked up a couple of nifty tools to play with.

CSS: Flexbox First Look - Pt 1 (Day 43)

I’m making use of the Linked In Learning which is basically a spin-off of Linked In’s acquisition of Lynda.com. I get a free membership to Lynda and Linked In Premium because I’m a Air Force veteran.

Course:

Course Notes:

  • I didn’t know you could reorder flex items. That’s awesome! There are definitely different needs on mobile vs desktop so it’s nice to be able to make one design. Then, via Flex Box, move items like the nav and search, below the site content. That’s a much better user experience, IMO.
  • The “flex:” property uses display ratios. So instead of thinking from a standard 12 column grid layout, you can “simplify”. For example, 3, 6, 3 makes two elements the same size and one larger. 1, 2, 1 accomplishes the same thing because the ratios are the same.
    • I’ll stick with the 12 column ratios, but it’s good to know if I’m trying to understand code other people write.

Additional Googlings:

I noticed webkit, flex box, and AMP HTML are being used more and more often. Guess it’s time I learn 🙂

  • CSS What are -moz- and -webkit-?
    • Looks like vendor prefixes are less of an issue now. So that’s a plus, and the code base for simple designs such as a box with rounded edges is becoming simplified.
  • WebKit extensions
    • Now I’m understanding all of the nuts and bolts of bootstap a little better. I see the 4.0 alpha has flex box, as well as web kit and other awesomeness already built in. It’s nice to see the pieces coming together.
  • CSS3 Transitions
    • Still really in the dark as to whether I should use CSS3 or JQuery for animating things.
  • Myth Busting: CSS Animations vs. JavaScript
    • This provided a great history lesson and lays out the argument. Just what I was looking for.
    • Checkout out GSAP, but it doesn’t look like worth investing the time in because I’m not super art minded, and JQuery’s name still holds more weight.
    • Now I’m on the fence again haha I feel like I should see which direction AMP is leaning on this. “Does AMP even support animation” is a good question too.
    • In the end, it looks like I should learn both.
    • Frankly, I would like to keep all of my presentation and design in CSS and away from my JS code.
Basic JavaScript - Part 7 - FCC (Day 44)

Lessons:

Course Notes:

  • In Comparison with the Strict Equality Operator, I corrected my knowledge base. “===” actually compares value, and data type. Not just comparing data type.
  • The Strict Inequality Operator “!==”. Strict inequality will not convert data types.
  • Using the Comparison && AND operator only returns true if both values on the left and right of the operator are true.
    • You can do the same thing by nesting an if statement within another if statement.
    • Horray! A chance to refactor code.
  • The || OR operator returns true if one of the operands is true. It returns false only if both sides of the comparison are false.
  •  If/else statements cascade from top to bottom, just like other code. If the first part of the if/else loop is true, the first part will be returned before the else is even processed. Technically, this is because the loop and function have already been satisfied. So remember order matters.
  • In Chaining If Else Statements I learned you can keep using “else if” to add more conditionals. While this is not clear nor, efficient code, it is still functional pseudocode.

I don’t like how the strokes table is setup. It encourages you to invert the inputs in your code based on the operators provided. Personally, I would make more mistakes by having to mentally invert parameters before writing a call. I would prefer to reverse the operators to keep the args on their respective sides like so:

function golfScore(par, strokes) {

// Only change code below this line
if (1 === strokes ) return "Hole-in-one!";
else if (par - 2 >= strokes) return "Eagle";
else if (par -1 === strokes) return "Birdie";
else if (par === strokes) return "Par";
else if (par + 1 === strokes) return "Bogey";
else if (par + 2 === strokes) return "Double Bogey";
else if (par + 3 <= strokes) return "Go Home!";

// Only change code above this line
}

// Change these values to test
golfScore(4, 1);
CSS: Flexbox First Look - Pt2 (Day 45)

Course:

Course Notes:

  • Looks like you can do a lot of different alignments with Flex box. Looks much easier than vanilla CSS.
  • I’ll dive into and play with Flex Box more when I start doing projects in March.
  • ** Note to future self. Do the chapter 3challengee tomorrow.
  • Can’t wait to use the order feature for reording elements when transitioning from desktop to mobile display.
  • I’m also excited about nested flex box’s, and how children flex items inherit from parent items.
Basic JavaScript - Part 8 - FCC (Day 46)

Lessons:

Selecting from many options with Switch Statements thru Accessing Nested Arrays

Notes:

  • At first glance I’m not sure what the purpose of switch statements is. But I’ll read more about them.
  • Was a bit flustered with the idea of creating multiple cases to over one string output, but now it makes sense. List all of the cases you want to include prior to the string, than use a break.
  • In “Replacing If Else Chains with Switch” switch finally made sense. Though I wonder as I get more advanced with logic, if I would just use arrays instead.
CSS: Transitions and Transforms - Lynda (Day 47)

I’m changing my front-end learning habit. I will be doing 30 min of JS and then 30 min of another skill. This way I can keep up-to-date with JS without beeing burnt out on only code and visa versa.

First 30 minutes:

CSS: Transitions and Transforms

Notes:

  • Seems a bit out-dated, but proves a good overview.
  • It covers 2D and 3D transforms and provides some pretty cool examples. For example, animating with opacity, rotating, and adding drop shadow to elements.
  • I don’t see a large difference between this and JQuery but it’s worth the overview.

30 min of JS Practice:

JavaScript by Code Cademy – Functions

Notes:

  • I feel like I really blazed past complex if/else functions, and for loops. I’m going to double back.
1 var foodDemand = function(food) {
2   console.log("I want to eat" + " " + food);
3 }
4 foodDemand("Pizza");

I’m going the try the approach of explaining my code here to help understand how it is laid out better. I feel like teaching is something that really helps me solidify concepts.

  1. Line one first defines a variable foodDemand.
    1. foodDemand will now store the output of anything after the equals sign (=).
  2. In this case, we are storing the output of a function.
    1. In order to make the variable a function, we have to use the keyword “function” to let the browser know what are code is intending to do.
    2. Then we have the option to pass parameters into our function.
    3. In this case, we have called our sole parameter “food”.
    4. Now, whenever food is “called” we can pass a value of our choosing into the function. This value could be a string, or number. In this case we are choosing to use a string.
  3. After we have determined that we are using a function we can add additional code within a “code block” in between the curly braces { }.
    1. The code block is what the function does when called.
    2. In this instance, once the function runs it uses “console.log” to print all text and values within the parenthesis ( ).
      1. We use the string “I want to eat” to display the text in the console window.
      2. Then we use the plus “+” symbol to “concatenate” or chain our additional strings and functions together.
      3. In this example, we concatenate a string with a blank space in it to separate our first string of text and our parameter call.
      4. Finally, we call our function parameter.
    3. When the code block is run it will display as “I want to eat (food)”. Food being the parameter of our choosing.
  4. Last but not least, in order to use our variable with the function we have to call the variable “foodDemand”. When we call the variable this is the perfect time to pass the parameter of our choosing.
    1. In this case, when we call our variable we pass a string of “pizza”.
  5. When all code has been run in our function and the string we provided is factored in we will see “I want to eat pizza” displayed in the console.
  • Next, I’m called to debug the function. I  want to display the parameter of a name I provide. Simple enough, just have to ensure I remember the syntax and code structure of a function.
  • Then, I go on to be introduced to the concept of D.R.Y don’t repeat yourself.
  • Some time later.. I’m digging into “return” and how it sends back the out put of a function from the depths of our code.
  • Also, pretty awesome sauce, you can define a new variable and set it equal to your function call with parameters. Now I really don’t have to repeat myself!
    • // Parameter is a number, and we do math with that parameter
      var timesTwo = function(number) {
       return number * 2;
      };
      
      // Call timesTwo here!
      var newNumber = timesTwo(5);
      console.log(newNumber);
    • I’m still scratching my head on when to use “==” vs “===” in code. I have a rough idea of what both do, but I’m not sure when to use one over the other.
      • == vs. === in Javascript (Abstract vs Strict equality in js)
      • “Double equals is officially known as the abstract equality comparison operator while triple equals is termed the strict equality comparison operator”
      • The abstract equality comparison performs a type conversion.
        • ex: true == “1” <– the number within the string of one is converted to the number one. In boolean/binary 1 is true/on, 0/off is false.
          • This example would evaluate to true because 1 is equal to 1 after the string is converted.
      • The strict equality comparison does not perform the type conversion.
        • ex: true === “1” <– Since the number within the string is not converted to a number 1 does not equal “one”.
          • This example would evaluate to false because 1 is not equal to “1”.
      • It looks like one caveat is strings’ with words such as “true” are not converted with the abstract comparison operator.
        • ex: true == “true” <– Returns false.
      • Then the article gets into string literal, string objects, and using the equals operators with arrays and my understanding goes fuzzy.
  • This interesting bit I need to remember when working with functions:
    • var quarter = function(number) {
       return number / 4; 
      }
      
      if (quarter(12) % 3 === 0 ) {
       console.log("The statement is true");
      } else {
       console.log("The statement is false");
      }
    • When I call the “quarter” function and pass the value of 12 for the parameter “number” I need to bear in mind the function runs and processes the number 12 before the value is put up against the modelo.
      • So, in other words we pass 12, the function runs, and divides 12 by 4. Leaving us with 3.
      • Then, 3 is divided by 3. Since 3 was evenly divided by 3 there is no remainder.
      • So, because there is no remainer 0 strickly equals 0.
More JS Function Review - CC (Day 48)

This first week of my new work schedule is a steep change. 11+ Hours of work a day will take some getting used to. For the next couple of days I will be coding for about 20-30 min instead of my usual 40-60min. So ready for my first front-end gig.

Today, I’m churing thru more Java Script functions, if/else statements, and for loops.

  • Passing multiple parameters is covered. If you understand passing one parm, two is similar.
  • Then, I dive into global and local variables. Pretty straight forward. Global can be called anywhere, local only within a function it is defined in.
  • Next, I have to write my own if/else function.
    • As a note to self, if will have conditions, so will else if, else does not.
  • Moving right along, I’m back into for loops.
    • I’m told to write 5 console log calls, which is a frustrating, but perfect example of why for loops help with D.R.Y
  • Digging into for loops, I’m reintroduced to how to change the starting value, set the ending value, and see how to increment the loop.
    • Also, once the threshold has been reached the code block will display the  print out of increments.

That’s all for now, how to start my long shift.. Save me lol

JS For Loop Review - CC (Day 49)

Reviewing for loops, and how to change the start/stop points. Additionally, how to increment and deincrement a for loop.

JS Array Review - CC (Day 50)

Digging back into arrays.

  • I have to remember most data lists and structures start with 0 as opposed to 1.
  • The .length property measures the length of the variable that preceeds it.
  • Still a little iffy on calling arrays in for loops, but I suppose if I learn when I need them, that will provide an additional context.
A period of flux. (Day 51)

Been struggling to hit JS hard again on my days off. This new work schedule is a real thorn in my side. I would much rather a consistent schedule with shorter days than 4 days of work with 3 off. Lack of consistency kills habits faster than anything for me.

Functions - FCC (Day 52)

While doing “Return Early Pattern for Functions” on Free Code Camp I ran into an issue I was not alone on. The exercise wanted us to return “undefined” if a or b were less than zero.

I first write the code like this:

 if ((a || b) < 0) {
 return undefined;
 }

But it appears what was needed was this:

 if (a < 0 || b < 0) {
 return undefined;
 }

I’m scratching my head on this one, but not sure where to start to understand WHY to use the second solution instead of the first.

On the “Counting Cards” exercise I’m trying to figure out how to call a global variable in a local scope.

My first attempt is returning a reference error:

var count = 0;

function cc(card) {
 // Only change code below this line

 var pos1 = [2, 3, 4, 5, 6];
 var zero = [7, 8, 9];
 var neg1 = [10, "J", "Q", "K", "A"];

 if (card == pos1){
 [count]++;
 return "Bet";
 }

 else if (card == neg1){
 [count]--;
 return "Hold";
 }

 else {
 return "Hold";
 }

 return "Change Me";
 // Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');

I feel I am still not grasping the nuances for functions, and variables. Perhaps a fresh look tomorrow may help.

(Day 53)

I asked some followers on Twitter last night about why the second option is ideal.

 if ((a || b) < 0) {
 return undefined;
 }

Option 2

 if (a < 0 || b < 0) {
 return undefined;
 }

Looks like I’ll need to review how AND/OR works in greater depth to really grasp this fully, but huge shoutout to John Bokma! Thanks John 🙂

I studied up a bit more on for/while loops out of the book “Head First HTML 5 Programming”

(Day 54)

This morning I took notes on the content in the HTML 5 book for a deeper understanding of JS.

JS Conversions

I skimmed JS conversions a little in the past, but it’s clear I needed to understand this more in depth. Diving a little deeper, the HTML 5 book when on to mention that in other languages you have to explicitly state data types, such an integer being int.

In JS, most data types are given an implied meaning. For example:

message = 2 + " if by sea";

Above we have two different date data types. 2 is an integer and ” if by sea” is a string. Since JS knows a string of text can never be an integer, JS converts the integer to a string while concatenating. We essentially get a string that states “2 if by sea”.

Anther example:

value = 2 * 3.1;

In the above example, JS converts the int of 2 to a floating point value like 3.1. We essentially get 2.0 * 3.1.

Js conversions seem important because it gives us a better understanding of how JS will read and use the data we put into our lines of code.

While & For loops made easy

I knew there were several nuances of loops that I was not quite grasping.

In short:

  • While and For loops do the same thing
  • While loops are easier to read, for loops are more compact
  • Both while and for loops are just a more complex boolean expression (True / False)
    • The loop runs as long as the conditional is true.
    • Once the the conditional is false the loop stops, and code after it is run.

**** I’ll finish this post after work. I’m stuck behind a VPN all day.

var tops = 5;
while (tops > 0) {
    for (var spins = 0 ; spins < 3; spins++) {
    alert("Top is spinning!");
    }
    tops = tops - 1;
}

 

** Note to self

If 1 is substracted like in the while loop above:

(5 > 0) = True | (4 > 0) = True | (3 > 0) = True | (2 > 0) = True | (1 > 0) = True | (0 > 0) = False

 

So in the while loop above, I would see the alert 15 times.

As a shortcut, – if only increasing or decreasing by 1 – I can simply add 1 to the displayed values if they are in a greater/less than or equals expression.

Using the example above, instead of the alert appearing 15 times, if greater/less than or equals were used the alert would appear 24 times.

(Day 55)

Head First HTML 5 pages 52 – 66.

Reviewed how the DOM works in relation to a page. Learned more about manipulating page elements, this time using the “document.getElementById()” property.

(Day 56)

Head First HTML 5 Arrays

On page 67 it’s nice to see the long form style of arrays. It adds more context to why shorthand is ideal. But it is nice to see the index number and not just have it implied.

var tempByHour = new Array ();

tempByHour[0] = 59.2;
tempByHour[1] = 60.1;
tempByHour[2] = 63;
tempByHour[3] = 65;
tempByHour[4] = 62;

Verses – Short form

var tempByHour = [59.2, 60.1, 63, 65, 62];

Regaining Momentum

Going through the Learn JavaScript course on Code Cademy

  • Reviewing
    • Data types
    • Console log usage
    • Operators
    • Modulus
    • Commenting
  • Relearning
    • Math random, and floor functions
      • Math.floor(Math.random() * 50);
        • Math.floor rounds down to the nearest whole number.
        • (Math.random() * 50) generates a random number between 0 and 50.
(Day 59)

Missed a few days of the challenge. I’ll tack on a few more to the end.

After having a chance to speak with a friend who has been programming for 20 years he was able to share insights and point me in the right direction. While I know the basics of JavaScript I’m going to be transitioning to Python.

I’m excited many of the concepts will carry over. The syntax appears more user friendly. Stoked about that!

Started Python from Code Cademy tonight.

First thoughts:

  • Defining variables is a bit more straight forward.
  • I also like that it forces indentation for code blocks. Messy code be damned!
  • I also love that I have less of a chance of messing up the syntax. In JS I often forget the “;”.

New stuff:

  • String methods
    • I like how the method precedes the variable being called rather than the other way around. Read more like English.
    • len(parrot) Versus parrot.length
    • I wonder why lower does not follow that same pattern..
      • parrot.lower()
    • Looks like I can change data types. I hope Python doesn’t auto-convert to mixed data types like in JS. Hated that with JS.
      • pi = 3.14
        print str(pi)
    • OMG, it’s fucking intuitive! Halleluiah!
      • “Methods that use dot notation only work with strings.”
      • “On the other hand, len() and str() can work on other data types.”
    • Concatenation is the same. *Happy Dance*
    • Nice! When you try to concatenate two different data types an error is thrown.
    • String Formatting with %, Part 1
      • string_1 = “Camelot”
        string_2 = “place”print “Let’s not go to %s. ‘Tis a silly %s.” % (string_1, string_2)
    • String Formatting with %, Part 2 – Love it! Super straigh forward 🙂
      • name = raw_input(“What is your name?”)
        quest = raw_input(“What is your quest?”)
        color = raw_input(“What is your favorite color?”)print “Ah, so your name is %s, your quest is %s, ” \
        “and your favorite color is %s.” % (name, quest, color)
  • Alvaro Mesa

    Those notes really help, great work benjamin. I am doing the 100 days challenge, but I will try to keep fordward to the 300. Also I plan to get a job in December but I need to learn more, you are doing a great work.

    • Thanks Alvaro. Free free to reach out anytime you want to chat 🙂