Maker Square Day 6

The notes get less and less as we are in sprints longer and longer. I will try to figure out a way to transfer the notes/diagrams without scanning etc. For now:

More Data Structures
Linked list – has a head and tail, with pointers from one list member to the next list member.
Graph  – is a network of an arbitrary number of connections.
Binary Tree – node with at most two children and one adult. The left value is less than the parent is less than the right child.

Maker Square Day 6

Data Structures

Linked List

Singly Linked List

Singly Linked List (see video)

What is a linked list? It is a list where each section of the list knows the name of the next section of the list. Something like a->b->c-X where X is null. If we look at a we know we can get the next value, so would be b. This is interesting because without knowing what is third we can find it by going = c because b knows about c. Then we can pull the information from that location = 3000. You might be saying so what?

Here are some reasons for a linked list.

  • you need constant-time complexity for insertions and deletions from the list i.e. to increase time predictability
  • you don’t know how many items will be in the list. With arrays you might need to re-declare and copy memory if the array grows too large
  • you don’t need random access to any elements
  • you want to be able to insert items in the middle of the list such as a priority queue.

Though there is debate on almost every reason to use it vs another data structure. Hopefully I will learn more and make up my own mind on when I would like to use them and not. For now… just store it and move on.


Tree Data Structure

Tree Data Structure

A tree is a hierarchical structure with parents and descendants at the very minimum. Not super useful yet, but add in siblings and it gets a bit more exciting. There is a bunch. So I am going to put them in a list… hrmm.

  • Root – The top node in a tree.
  • Parent – The converse notion of a child.
  • Siblings – Nodes with the same parent.
  • Descendant – A node reachable by repeated proceeding from parent to child.
  • Ancestor – A node reachable by repeated proceeding from child to parent.
  • Leaf – A node with no children.
  • See the wikipedia entry for even more good stuff.

Once all of these things go together we can see that now it has some value. Thinking of the DOM right away, but also a great way to store data that has this type of relationship. Grape growers could track down to the grape if they wanted to in a production line. Builders working on a complex structure could be arranged this way with responsibilities being assigned to nodes.


Undirected Graph

Undirected Graph

We only looked at one type of graph, the undirected  graph.  This is a set of nodes that have a set of unordered pairs called edges linking them.  Think of a community. House A, House B and House C. House B is on the corner of two streets. House A is on one street and House C is on the other. House A and House B share an route, and House B and House C share another route.

So… House A has an edge to House B. House B has an edge to House A and House C. House C has an edge to House B. Clear? okay good. Also that network at the top is a graph.

Some common things to be done with graphs you say? Glad you asked. Add a node. Add/Remove edges. Get Neighbors? Sure list every node that has an edge to me.

Most of this day was spent on finishing up the sprint and going into the extra credit section a bit.

Maker Square Day 5

Test Driven Development
Write a failing test, then code to the test. Go from Red to Green to Refactor. Why test? It changes the way you think about code. Forces the MVP thought process. Once you have an error, write a test.
Types of Testing
Unit Test – normally focus on 1 single method or class. Unit testing uses faked data.
Integration Test – ensures different parts of system work together like creating a customer, logging in a customer etc.
End to End test – make sure it works in real world test most realistic form of test. Start to finish, whole system. Think about smarter, less tests.
Visual Test – does it look like what it should look like?


Maker Square Day 4

Video Lecture on Complexity Analysis. Space = memory. Time = when. How does time grow?

An algorithm is a plan that helps you solve problems.

To compare all numbers is n^2 is of quadratic time complexity.

Find largest by finding smallest? On

if sorted list, compare first and last is constant time. Gives an approximation of time, not an actual number. Note, highest order first. Think about it as LARGE(n).

Static analysis = analyse and reason through it with graphing.

Constant = array look up
O(log n) = binary search
linear O(n) = print array;
O(n^2) = find largest (nested for loops)
O(c^n) = guess password of (n) length

Binary Search?

var binarySearch = function(array, ele, start, end){
  var start = start || 0;
  var end = end || array.length-1;
  var midpoint = Math.floor((end + start) / 2);
  if (array[midpoint] > ele){
    return binarySearch(array, ele, start, midpoint-1);
  else {
     return binarySearch(array, ele, midpoint+1, end);

Protoypal Classes

Q: Can you think of a way to use prototype chains that might help? Removes extend loops, allows chaining of values and having them push out.

Talking about obj within constructor class is the same as talking about every instance. To create a function for making instances is a line in that function where you create a new instance object (object.create(car.methods)) an object as a prototype and some logic for augmenting the new object with properties that make it unique from other objects in the same class (obj.loc = loc).

Pseudo-classical Classes

new keyword = when new is used before a function it acts in a special mode called constructor mode. (var foo = func() {blah;}; var blah = new foo;) constructor mode sneaks in the this.object.create(car.prototype); and the return this; at the end of the function. Pseudo-class has two parts, the prototype properties to hold similarities  and the constructor function to hold the differences.

Open Source Lecture

Productivity Tip: Look at OctoTree for chrome and git access

To contribute to open source projects is a good thing! You don’t have to be a genius to help out. Look at the larger repos. Think about clarifying comments, adding tests, even making sure the style is consistent. These things are needed and appreciated.

Tips for success. Follow repo styles and conventions. Pay close attention to the commit message conventions. Changes should be a single commit. Well written merge comments will increase the chance of a successful pull request.

Data Structures

Quick review on scope and closure. Scope = set of rules to define value availability lexical scoping. Closure = if you instantiate an object the instantiated object has access to the original object.

Hash Tables

Very similar to an object. 2 components to a Hash table. The storage part and the hashing function.  The hashing function takes a key, and dresses it up so that its always the same dress for the same key. This hashed key equals the location in storage. We must watch for collisions, and distribute as evenly as possible to reduce collisions.


Negative Feedback loop

I was dealing with a personal bout of Impostor Syndrome when for no good reason I sort of interrupted the speaker, he had just asked if there were questions and I had waited just a bit too long, ya know. So I asked the question, I don’t know what it was but let’s say it was not that tough and I probably should have known the answer. I asked it, he answered it and there were a few quiet ah-has that mumbled around the room.

Wait a minute, he asked if there were questions and no one, NOT ONE other person asked a question, but clearly they needed to. So who was the impostor here? Well not me, that’s who! POOF! The negative feeling went away and I could focus again on moving forward and growing. Never would I have that feeling ever again! Solved!

Well I am sure you know it came back, but instead of wasting time I asked the question right away, right when there was space for it. I tried to make it a good question, on something I was not clear on, but not totally lost. Something that would have a clear response. Hoping that it would work again. Guess what? It did!

So now I am developing the habit, an automatic response to feeling like I don’t belong among the giant intellects around me. Ask a good question, its like a pin popping the balloon of self-doubt.

I thought one should have the attitude of ‘What do you care what other people think!’
–Richard P. Feynman

Makers Square Day 3

I don’t know about you but sleep has not been a close and personal friend of mine. Its a love/hate relationship at best tending towards the latter, or is it ladder? I must be tired. It was on Day 3 (dun, dun, dunnnn) that I noticed that I had forgotten to sleep much *cough* is that an owl? *harumph* I am fine, as I was saying an owl has three eyelids: one for blinking, one for sleeping and one for keeping the eye clean and healthy. Wait, I had a segue I was supposed to say, something about night owls…

To The Notes!!!

Best Practices

I have to preface this with a caveat. I really liked this lecture. It made me feel as though I could contribute if only because I enjoy clarity over cleverness. I usually stand in awe of cleverness, but strive for clarity. If that makes sense. Well on to the actual notes.

Save often! Use the auto-save feature of whatever IDE you are in. If it does not have one complain. Only commit to git when working.

Frameworks, when, where, why? (sometimes what?) – It’s a roll your own (smoking reference in this day and age?) vs others. If you really must I would say roll your own, but REALLY look for another solution or you are wasting your time. Let others solve the problems that have already been identified by the community, for now. (A Jedi must have patience)


Keep parts together that are related. Avoid bad closure. use input var/let for dependencies, avoid mutating. avoid global. avoid side effects.


Keep unrelated things, unrelated. It sounds obvious but I have found it easy to want to ‘normalize‘ everything. This is the wrong use of normalize, hence the quotes and italics but you will hear it used this way in the real world. They really mean avoid mutating. I see decoupling as breaking the functions down to as small as possible. For the MASH fans out there:

I do one thing at a time, I do it well, and then I move on.
                                                                   –Charles Emerson Winchester III


Hide the guts. Show the usage. It really can be that simple. Think _.each(array, thingToDo); vs

function(collection, iterator) {
    for (var i=0; i < collection.length; i++)
     iterator(collection[i], i, collection);
  } else {
    for (var key in collection) {
       iterator(collection[key], key, collection);


Self describing code is better than comments, but comments are better than clever. Follow the company style. Aim for short, compact code. MVP first.

Embrace Failure!

Failure is inevitable, it also indicates you are doing something interesting. Simply put, what is the formula for success? Fail until you succeed.

Common Pitfalls

Failure to read instructions. Read them. Then re-read them. Then.. yeah. Think about the intention.


Use 2 spaces instead of tab. White space is your friend. Be consistent. Keep blocks aligned. Avoid redundancy. Keep blocks aligned. Did I mention to avoid redundancy? No? Well do it.

‘use strict’

It was a great day!

Maker Square Day 2

Here is the rough schedule for the day:

  • closures
  • underscore pt1
  • lunch
  • underscore pt1
  • this keyword
  • underscore pt 2
  • group meeting
  • dinner
  • lecture

I am being deliberately vague here. Somethings you have to pay to get the info, ya dig? I list it to illustrate that the days are fairly full right off the bat making me think they will ditch some of the “welcome to…”, “benefits” and “how to kick ass” type lectures in favor of even more JavaScript stuff.

Let’s see if my notes improved:

A closure is a function that has on going access to the variables of the context it was created in, even after outer function calls it was created in have returned.

assign Saga() to global var
 new Saga = function() {
 sagas.push(function(){ blah; }

Okay so not much better really but at least it had a basic definition of a closure. Here is a better example:

function init() {
// name is a local variable created by init
var name = "Mozilla";
// displayName() is the inner function, a closure
function displayName() {
alert(name); // use var declared in the parent function } displayName(); }; init();

Then we examined some underscore functions and the whats going on behind them.
_.extend = function(obj) {
_.each(arguments, function(passedObj){
_.each(passedObj, function(value,key) {
obj[key] = value;
return obj;

In Human:

for an object(s)
iterate over the arguments (objects)
iterate over each passed object
assign object[key] to the passed value

_.defaults = function(obj) {
  _.each(arguments, function(passedObj){
_.each(passedObj, function(key, value){
      if(obj[key] === undefined) {
obj[key] = value;
return obj;

In Human:

for an object(s)
iterate over objects arguments
if element does not exist in obj, add to obj

Interesting topic popped up about the !! convention. It forces coercian of the result to boolean.

Interview Question: How do you access a function inside of a return function? ()()… That is a bad note.. avoid this section.

Then there was a lecture on something about macs or something. I only just listened to this at the edges. I use linux so not much benefit, I took notes but I will never use them, so I am not typing them.

There was a cool GIT section though.
git remote -v //shows remotes
git remote add <username><username>/<repo>.git
git branch -v show //shows branch
git checkout -b pairs //create and go to pairs branch
git checkout master
git push <username> branch:newBranch

Push to two repos in one command:
$ git remote -v
origin me@original:something.git (fetch)
origin me@original:something.git (push)
//add 'pairs' remote
git remote add pairs me@original:something.git
//add url
git remote set-url --add --push both git://somewhere/something.git
$ git push pairs


A new four letter word. In 4 steps.

  1. Debugger paused on this.
  2. Scan outward for function {}.
  3. once function containing this is found look at the where stack
  4. inspect syntax of how the function was called to see which run pattern is being is being used.

Run Patterns

  • Global Reference
    • Why?
      • Needs a value
    • What?
      • In a browser its window
    • example
      • this (not enclosed in any function)
  • Free Function Invocation
    • Why?
      • Needs a value…
    • What?
      • global object
    • example
      • functionName()
  • ABC (.apply, .bind, .call)
    • Why?
      • to manually pass in a this binding, like passing in an argument when invoking a function/method
    • What?
      • the first argument to .apply, .bind or .call
    • example
      • or obj.methodName(target)
  • Method Invocation
    • Why?
      • to execute the method in the context of the object they’re found in
    • What?
      • Object on the left of the call time dot
    • example
      • target.methodName();
  • Construction Mode
    • Why?
      • Allow a constructor to operate on the instance it is creating
    • What?
      • A new object created for that invocation
    • example
      • new functionName()

90% Rule

Inside a function, the keyword ‘this’ will be bound to the object that was left of the dot where that function was called.

The last lecture I took notes on was about some things to do and ways to think that can help you at Maker Square.

Set up a blog. Okay I was a little late on that but as they say blah blah late blah blah never.

There will be people here who work harder, learn faster, code stronger and think better than you…. learn to deal with that. (trust the program)

Have a growth mindset vs a fixed mindset. (trust the program)

This sparked a note for me to tell Muhammad about Richard Feynman, the ultimate in growth mindset.

Judge yourself by the core curriculum, not by others. They said this a few times. (trust the program)

Work hard, be strong and ask for help! (trust the program)

What does a professional developer look like?


Coders Block!

Learn the workflow, its important!



Maker Square Day 1

I was pretty nervous starting out. School? Not for a long time now, and even back then I was pretty shitty at it. What would be the difference now? Would I do it? Could I do it? My mind was not on my side, throwing doubts in front of me at every step. So I did what any person I admire has done and said to myself “Do the work”.

I have to admit my notes of the first lecture make no sense to me. Random words of JavaScript, some !!!!s and a whole lotta nuttin.

For Example:

1   -> func(targetClass)

-> document.body.classList
if contains ClassList
add to array
call recurse
results = []
node = document.body
if (node.classlist contains className
push -> results

for ( node.children.length)
results = results.concat(node.children[i]
return results

({   }).a_prop = { x: 5 }

What the heck is that!?!? I call it insane.js, coming to a github near you…

Maybe I would do better with the second lecture given by Muhammad?

read wiki

Do all toy problems. (sweet toys!)

That almost seems worse! I do slightly better on the next. I can verify this by being able clearly state what I learned. Review underscore/lodash implementation. Intro to Time Complexity. Look at pluck and reduce.

Alright, getting better! The next topic was about Paired Programming and how it was an Agile technique where there is the driver, mostly typing, and the Navigator, mostly syntax/logic. I think with the educational model they focus more on the driver being a bit of a noob and the navigator being more comfortable. In practice it is much more cooperative than that. They mentioned Data Structures very briefly. Then they touched on whats it is like to be a junior (code, code, code, sleep, workout, code) and what it might be like to be a senior (code, code, code, code, code, jobs, code, code). I am pretty sure they said much more but… I learned that we had to do 5 min presentations and I got excited about that.

Can’t wait for more!