CSS Responsive Web Design

Notes taken from code academy.

More notes.

This here is a very good pattern to learn!

Advertisements

CSS Basics: Flow of HTML

Notes taken from code academy.

 

CSS Basics from Code Academy

Some notes from code academy.

JavaScript Recursion #7

This is how you define a function in ECMAScript6

let is the new var
arrow function is the new way.

And this is a simple method that counts down from 10.

Notice this method calls itself. That’s recursion.

Here is another example. Say you have a datastructure has contains a parent, and then several children that reference other children like this.

And say you want to convert this into a form where you could visualize this as nested subdirectories. Say a tree structure like this.

Let’s start by making a function

Then let’s call our makeTree function with categories and a starting parent of null. This will give us the first node with parent === null.

Then what we are going to do is to take each element and assign it a node based on it’s id.

.

So now we have a node called animals.

Now here is where the magic happens. We are going to take that node and create the subtree by calling makeTree again passing in the same categories and parent for the next wave of subnodes, which happens to be this nodes id.

So that’s an example of recursive. My other favorite example of recursion is in a binary tree. But we can look at that later.

Check out mpj’s excellent series for my videos like this.

 

JavaScript Currying #6

Continuing my following of mpj’s series.

Currying is when a function, instead of taking all arguments at once, takes the first one and returns a new function, that takes the second one and returns a new function, which takes the third one and so on until all the arguments have been fulfilled.

Here it is in lodash.

Another way of looking at it is like this. Here is a regular dragon function.

And here is the curried version of the same function.

In this curried version dragon is a function, that takes name as an argument, and returns a function that takes size as an argument, that returns another function that takes element as an argument, which in turn finally uses all three arguments.

And you call it, like this.

This may look strange at first, but it’s not that bad. It’s just three method calls, all combined (or curried) together where a method keeps getting returned, and you simply chain the argument parameters. It does look strange. But that’s how it works. It’s just a chain of functions.

The idea with curries is that you can pass your function through your application, decorating it up and adding functions to it as you go.

For example we might break out various functions and call them in a more incremental manor like this.

Now some tools/libraries, like lodash, help make your regular JS functions curriable. For example we have have left our dragon function like this. And then called it with lodash like this.

Why is currying handy

Let’s say we start off with something like this, and we want to improve it with currying.

Let’s import lodash, and curry has element.

Then if you remove the wrapping function you can just do this

What making hasElement curryable does it is means hasElement can return a new function, which takes a new argument which can be called from filter.

It’s still a bit weird. And I am still getting my head wrapped around it. But it looks like this could be handy for chaining function calls together, while passing arguments in just-in-time.

Javascript Closures

 

In JS, functions are not just functions. They are also closures. What that means is that the function body has access to variables that are defined outside the function body.

Take this example.

Here we are able to execute the variable var me, defined outside the function scope of the function, because JS functions are closures.

Other languages like Java, C#, and Objective-C don’t work like that. Normally you need to define the variable in the same scope of the function or method using it. Or by passing it in. But not in JS. Here functions (or closures) have access to variables define elsewhere.

So why are closures useful? Let’s look at this example.

This asynchronous ajax method callback, will have access to requestId, even though it will be called asynchronously sometime in the future.

This is a good use of closures. What you want to start a task, and set some variables up for the future. This makes the code easier to read.

 

 

 

 

 

 

 

 

 

 

JavaScript reduce and mawr reduce

map, filter, and reject transform lists into something else. map will take an array and transform that into an array of the same length but with each individual transformed.

filter and reject return new arrays based on whether each element of the array passes the passed in callback function.

and find behaves just like filter only it returns the first element.

There are lots of array transformations like this on the array object, but what should you do if you can’t find one that fits? That’s where reduce comes in.

map, filter, reject, and find are all list transformations. They are all pretty specific. But reduce is not. reduce is the multitool of list transformations.

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Here is another example.

And yet another example.

This one takes a file of tab delimited characters, and transforms them into JS literals.

It does this by:
* splitting on newlines
* mapping the lines into an array of arrays by splitting on tabs
* and then reducing

reduce takes two arguments. A function and a starting object. Because we are reducing to an object literal, here we start with an empty object literal.

The function that wants to reduce takes two arguments.

The first is the object was are constructing customer. For the first loop this will be our empty object literal {}. The second object is the thing we are iterating.

So reduce is going to receive this:

['mark johansson', 'waffle', 'iron', '80', '20']

If we ran this now we would get output undefind. And that is because our var output will be set to what reduce returns on it's final iteration. So lets return the customer object.

If we ran this now we would still get an empty object, because we haven’t reduce anything yet.

So let’s rename customer to be customers because we are accumulating customers and for every customer we are going to make customer with their name.

OK. There is a lot going on here. So let’s unpack this. What we are shooting for is this.

And we have the beginning of that here. This line

accumulates, or adds, a new array element every time with a key of line[0]</code which is the persons names, followed by it's value. In this case an empty []. That's what gives us this.

Now all we have to do is build that inner array.

And we can do that, by pushing our remaining inner array values.

There is one other gotcha. Because we want to keep reusing the existing customer line each time, and not override it, we modify this line here.

 

And to better print out our JSON with 2 spaces we modify this line here.

Second video.