From adbde0a6ff414330ac91d4531e91d60995733a38 Mon Sep 17 00:00:00 2001 From: John McTigue Date: Sun, 10 Apr 2016 17:36:01 +0100 Subject: [PATCH 1/5] minor-text-changes Spelling and grammar changes --- array-map.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/array-map.md b/array-map.md index e5ce824..f3bb836 100644 --- a/array-map.md +++ b/array-map.md @@ -1,6 +1,6 @@ # Array `map()` method -The `map()` method creates a new array, without altering the original, by applying a function to each element of the array. The transformation (or processing) is done by a callback function, which is specified as the first parameter of the method. Higher-order functions such as `map()`, `reduce()` or `filter()` are an shorter, more readable alternative to iterating through an array with a loop. +The `map()` method creates a new array, without altering the original, by applying a function to each element of the array. The transformation (or processing) is done by a callback function, which is specified as the first parameter of the method. Higher-order functions such as `map()`, `reduce()` or `filter()` are a shorter, more readable alternative to iterating through an array with a loop. ## Example @@ -85,7 +85,7 @@ As you can see, `Math` is specified as the second parameter, which is used as `t ## Slightly more practical example -One of slightly more practical examples of using `map()` method is transposing a 2 dimensionl array (swap rows and columns), which I found [here on StackOverflow](http://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript): +One of the slightly more practical examples of using the `map()` method is transposing a 2-dimensional array (swapping rows and columns), which I found [here on StackOverflow](http://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript): ```javascript var newArray = array[0].map(function(col, i) { From e83931a993814aa53c7e1ae7f72b4e0e2a8f2929 Mon Sep 17 00:00:00 2001 From: John McTigue Date: Sun, 10 Apr 2016 20:52:40 +0100 Subject: [PATCH 2/5] minor-changes Corrected typos and the odd grammatical slip. --- array-methods-overview.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/array-methods-overview.md b/array-methods-overview.md index b6336a1..7ffca39 100644 --- a/array-methods-overview.md +++ b/array-methods-overview.md @@ -30,7 +30,7 @@ Array.isArray([]); // true ``` ## Accessing items in an Array -An array provides random access to the elements of the list via the items position (index) within the list. Indexes start at zero. +An array provides random access to the elements of the list via an item's position (index) within the list. Indexes start at zero. ```javascript var arr = ['a', 'b', 'c', 'd']; @@ -91,7 +91,7 @@ c; // 10 ## Arrays and equality -An equality check on a reference type checks if the values point to the same reference, so an equality check on an array will check if the two refrences point to the same array object. It will not check if the contents of the arrays are the same. +An equality check on a reference type checks if the values point to the same reference, so an equality check on an array will check if the two references point to the same array object. It will not check if the contents of the arrays are the same. ```javascript var a = [1, 2, 3]; @@ -200,7 +200,7 @@ As traversing arrays is such a common task, there is a built-in Array method for present in the array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized (i.e. on sparse arrays). -The callback is a function which will be passed (i) the element value, (ii) the element index, (iii) +The callback is a function which will be passed (i) the element value, (ii) the element index, and (iii) the array being traversed. ```javascript @@ -208,15 +208,15 @@ the array being traversed. var myArr = [1, 2, 3]; var myCallback = function (val, idx, arr) { - console.log(val ' is item ' + idx + 'in array: ' + arr); + console.log(val + ' is item ' + idx + ' in array: ' + arr); } myArr.forEach(myCallback); // Outputs: -// 1 is item 0 in [1, 2, 3] -// 2 is item 1 in [1, 2, 3] -// 3 is item 2 in [1, 2, 3] +// 1 is item 0 in array: [1, 2, 3] +// 2 is item 1 in array: [1, 2, 3] +// 3 is item 2 in array: [1, 2, 3] ``` Of course, you can also use an anonymous function: @@ -224,15 +224,15 @@ Of course, you can also use an anonymous function: ```javascript var myArr = [1, 2, 3]; -myArr.forEach(function (val, idx, arr) { console.log(val ' is item ' + idx + 'in array:' + arr); }); +myArr.forEach(function (val, idx, arr) { console.log(val + ' is item ' + idx + ' in array: ' + arr); }); ``` Which, with ES2015, can be written more succinctly with arrow functions: ```javascript var myArray = [1, 2, 3]; - -myArr.forEach((val, idx, arr) => console.log(val ' is item ' + idx + 'in array:' + arr)); + +myArr.forEach((val, idx, arr) => console.log(val + ' is item ' + idx + 'in array: ' + arr)); ``` Because arrow functions work so well with array methods which take functions, we will use them from here on. @@ -243,7 +243,7 @@ Often we want to traverse arrays because we want to manipulate the data in the a provides a number of methods which apply a function to each value, returning a new result. The first array manipulation method to look at is ```Array.prototype.map(callback[, thisArg])```. See -[definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) for full description. +[definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) for a full description. This method applies the callback to each value and returns a new array (so does not change the original array). @@ -257,7 +257,7 @@ arr; // [1, 2, 3] The second array manipulation method to look at is ```Array.prototype.reduce(callback[, initialValue])```. See [definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -for full description. This takes applies a function to each value and collects the results into a new value. +for a full description. This takes an array, applies a function to each value and collects the results into a new value. The most common example used for reduce is summing values in an array, which could work like this: @@ -285,7 +285,7 @@ arrayMap(arr, v => v + 1); // [2, 3, 4] ### More array manipulation methods In addition to map and reduce, JavaScript provides various other array manipulation methods. All of -which work in a similar way to ```forEach``` ```map``` and ```reduce``` (i.e. they take a callback +which work in a similar way to ```forEach```, ```map``` and ```reduce``` (i.e. they take a callback which is applied to each element in the array). Next we'll have a look at some of the most useful and also implement them using ```reduce```. @@ -371,14 +371,14 @@ some(arr3, v => v % 5 === 0); // false Sorting algorithms are hard. In fact there's almost a whole [Khan Academy course](https://www.khanacademy.org/computing/computer-science/algorithms) on the subject. Whilst this is all very interesting, it's a lot to learn just to put some values into order. Fortunately arrays have a built in sort method ```Array.prototype.sort([compareFunction])``` (see [definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)). -An important thing to note about ```Array.prototype.sort``` is that it sorts in place, which means the original array is changed. If you need to keep the original array, then you should make a copy of the original before sorting (see ```Array.prototype.slice``` section above for a way how to make a copy). +An important thing to note about ```Array.prototype.sort``` is that it sorts in place, which means the original array is changed. If you need to keep the original array, then you should make a copy of the original before sorting (see ```Array.prototype.slice``` section above for one way to make a copy). By default elements are converted to strings and then compared in Unicode point order. This means sort is great for lists of strings: ```javascript var arr = ['orange', 'kiwi', 'apple', 'pear', 'banana']; -var sortedArr = arr.sort(['orange', 'kiwi', 'apple', 'pear', 'banana']); // ['apple', 'banana', 'pear', 'kiwi', 'orange'] +var sortedArr = arr.sort(['orange', 'kiwi', 'apple', 'pear', 'banana']); // ['apple', 'banana', 'kiwi', 'orange', 'pear'] sortedArr === arr; // true ``` From 966c5704dab5bee5e1f0b678c6534782ebfda330 Mon Sep 17 00:00:00 2001 From: John McTigue Date: Sun, 10 Apr 2016 23:29:21 +0100 Subject: [PATCH 3/5] Minor Corrections Typos and minor grammatical changes. --- array-reduce.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/array-reduce.md b/array-reduce.md index 6b38c15..6345c2a 100644 --- a/array-reduce.md +++ b/array-reduce.md @@ -62,7 +62,7 @@ console.log(sum); // 20 ``` -At the first iteration of the callback function, the first parameter (`a`) stores the initial value (`10`). The second parameter (`b`) stores the first element of the array (`0`). Then the rest of the calculation is done in the same way as the first example. +At the first iteration of the callback function, the first parameter (`a`) stores the initial value (`10`). The second parameter (`b`) stores the first element of the array (`0`). Then the rest of the calculation is done in the same way as in the first example. ![reduce() method](images/array.reduce2.gif) @@ -108,7 +108,7 @@ arr.reduce(function (a, b) { Note that you need to specify the initial value `0` as the second parameter of the `reduce()` method, because, as mentioned above, the initial value of the parameter `a` would be the first element of the array (`{x:1}` in this case) if the second parameter of the `reduce()` method were not specified. -Another example of the `reduce()` method is to count the occurence of values in an array. For example, the following example shows one of the ways to count how many times each letters appears in an array: +Another example of the `reduce()` method is to count the occurence of values in an array. For example, the following example shows one of the ways to count how many times each letter appears in an array: ```javascript var array = ['A', 'B', 'C', 'B', 'B', 'A', 'A', 'C', 'A', 'B']; @@ -124,7 +124,7 @@ Note that the initial value of the object `{}` is specified as the second parame ## Other parameters of the callback function -The `reduce()` method can actually take 2 more parameters: +The `reduce()` method can actually take two more parameters: - The third parameter stores the index value of the element at the current iteration - The fourth parameter stores the array itself From c371bc164cd668cc71786b765262e8b2fb699713 Mon Sep 17 00:00:00 2001 From: John McTigue Date: Mon, 11 Apr 2016 00:17:46 +0100 Subject: [PATCH 4/5] Minor Changes A few typo, grammar and style changes. --- basic-performance-testing.md | 41 ++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/basic-performance-testing.md b/basic-performance-testing.md index f2b1df5..33e92a5 100644 --- a/basic-performance-testing.md +++ b/basic-performance-testing.md @@ -1,8 +1,8 @@ # Basic Performance Testing -This guide will follow a worked example on how to go about comparatively performance testing functions. Performance testing is not a subject that should worry beginners, however, it is very interesting to look at and will become useful on complex projects. +This guide will follow a worked example on how to go about comparatively performance testing functions. Performance testing is not a subject that should worry beginners. It is very interesting to look at and will become useful on complex projects. -The following is almost certainly not the only (or necessarily the best) way, however, it is fairly easy to understand and use. +The following is almost certainly not the only (or necessarily the best) way, however it is fairly easy to understand and use. ## The Functions @@ -22,7 +22,7 @@ function makestring() { } ``` -This received feedback that it is extremely ineffcient to sum X strings as it generates X-1 intermediate objects; but it is instead always better to use an array and finally perform a .join("") over them. So we created the following: +This received feedback that it is extremely inefficient to sum n strings as it generates n-1 intermediate objects; it is instead always better to use an array and finally perform a .join("") over them. So we created the following: ```javascript function makestring2() { @@ -37,16 +37,16 @@ function makestring2() { ## Performance Test -Now rather than just accepting the advice, how do we actually test these? +Now, rather than just accepting the advice, how do we actually test these? -Our chosen method is to make use of javascripts `new Date()` constructor. This gives the time since 01 January 1970 00:00:00 UTC. The number is specified in milliseconds. Therefore if we wrap a for loop repeating the function in two variables that equal `new Date()` and find the difference between these variables we should have the time taken to perform the function. To give a large enough data set, consider repeating the function 20,000 times. +Our chosen method is to make use of JavaScript's `new Date()` constructor. This gives the time since 01 January 1970 00:00:00 UTC. The number is specified in milliseconds. Therefore, if we wrap a for loop repeating the function between two variables that are assigned `new Date()` and find the difference between these variables we should have the time taken to perform the function. To get a representative measure of performance, consider repeating the function many times over. Here we have used 20,000 times. ```javascript var start = new Date(); // log start timestamp for (var i = 0; i < 20000; i++) { console.log(makestring()); } -var end = new Date(); // log end timestamp +var end = new Date(); // log end timestamp var diff = end - start; console.log(diff.toString()); ``` @@ -56,20 +56,20 @@ and for the second function: ```javascript var start1 = new Date(); // log start timestamp for (var i = 0; i < 20000; i++) { - console.log(makestring1()); + console.log(makestring2()); } -var end1 = new Date(); // log end timestamp +var end1 = new Date(); // log end timestamp var diff1 = end1 - start1; console.log(diff1.toString()); ``` ## The Comparison -By comparing the time taken to perform each function you will be able to get a rough idea for performance. In this example, our `makestring()` takes approximately 2322 ms and our array function `makestring1()` takes approximately 323 ms. +By comparing the time taken to perform each function we are able to get a rough idea of performance. In this example, our `makestring()` took approximately 2322 ms and our array function `makestring1()` took approximately 323 ms. -*Note: Values may not be constant between seperate runs, but will be in a similar range. Likewise consider moving `console.log(diff)` to end of function for ease of reading.* +*Note: Values may not be the same between seperate runs, but will be in a similar range. Likewise consider moving `console.log(diff.toString())` to the end of the function for ease of reading.* -Moving beyond this example, the same method should be applicable to any other set of functions. Wrap a loop repeating functions in date variables, find difference, compare! +Moving beyond this example, the same method should be applicable to any other set of functions. Wrap a loop repeating the test function(s) between date variables, find the difference, compare! ## Appendix @@ -80,7 +80,7 @@ function makestring() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; - for( var i=0; i < 50; i++ ) { + for( var i = 0; i < 50; i++ ) { text += possible.charAt(Math.floor(Math.random() * possible.length)); } return text; @@ -89,7 +89,8 @@ function makestring() { function makestring2() { var array = []; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; - for( var i=0; i < 50; i++ ) { + + for( var i = 0; i < 50; i++ ) { array.push(possible.charAt(Math.floor(Math.random() * possible.length))); } return array.join(""); @@ -102,19 +103,13 @@ for (var i = 0; i < 20000; i++) { var end = new Date(); // log end timestamp var diff = end - start; -var start1 = new Date(); // log start timestamp +var start = new Date(); // log start timestamp for (var i = 0; i < 20000; i++) { console.log(makestring2()); } -var end1 = new Date(); // log end timestamp -var diff1 = end1 - start1; +var end = new Date(); // log end timestamp +var diff1 = end - start; console.log(diff.toString()); console.log(diff1.toString()); -``` - - - - - - +``` \ No newline at end of file From f0c8932a6b41db78bdb94547f3fc9a9ccb345027 Mon Sep 17 00:00:00 2001 From: John McTigue Date: Mon, 11 Apr 2016 00:28:22 +0100 Subject: [PATCH 5/5] Minor Changes Typos and grammatical changes. --- best-js-resources.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/best-js-resources.md b/best-js-resources.md index 3de1bff..5d8f846 100644 --- a/best-js-resources.md +++ b/best-js-resources.md @@ -1,5 +1,5 @@

Best JavaScript Resources Online

-

Learning something new is scary. For all of us the biggest issue with picking up a new skill is don't know where to start. It's often useful if we have a Plan of actions , A Blueprint , A Roadmap. It makes our journey towards that new step a lot easier. But you don't have to worry about that now i have found the best resources on the Internet sorting out the bad ones. Available to us for free. All these resources are authentic, reliable and effective.

+

Learning something new is scary. For all of us the biggest issue with picking up a new skill is not knowing where to start. It's often useful if we have a plan of action, a blueprint, a roadmap. It makes our journey towards that new skill a lot easier. But you don't have to worry about that now I have found the best resources on the internet, weeding out the bad ones. These are all available to us for free. All these resources are authentic, reliable and effective.

Massive Open Online Courses(MOOC)/Online Courses


[Udacity-Web Development Program](https://www.udacity.com/courses/web-development)
@@ -64,7 +64,7 @@

JavaScript Books


-[Eloquent JavaScript](http://eloquentjavascript.net/) (one of the best resources for detailed explanations with good examples, try running and then rewriting the examples by yourself in the browser)
+[Eloquent JavaScript](http://eloquentjavascript.net/) (One of the best resources for detailed explanations with good examples; try running and then rewriting the examples by yourself in the browser)
[Exploring ES6](http://exploringjs.com/es6/)
[JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
[Speaking JavaScript](http://speakingjs.com/es5/)