niedziela, 10 maja 2015

Write code every day ... and rest before ... test

Recently I have got almost three weeks in work without writing code.. I prepare documentations, meeting with clients, coordinating projects... even at home I often was too tired to practice writing code. During these weeks I have got online live test for some company, I fail this test on start because of my attitude, I was tired because 5 min before the test I come back to home with my family I was nervous that I was late and I presupposed that I will fail this test...

And yes I failed this test... What lessons I learned form this...? There are few things:

  • I need a rest before test,
  • Try to be optimist not pessimist,
  • The most important thing is that I need practice writing code, just like John Resig writes in his blog post "Write Code Every Day".., I just can't have so many days without writing code....

Oh  and here is the test question I have got (yes I know it is simple):

Implement function check(text) which checks whether brackets within text are correctly nested.  You need to consider brackets of three kinds: (). {}, {}.
Examples:

console.log( check("a(b)") );// = > true
console.log( check("[{}]") );// = >true
console.log( check("[(]") );// = > false
console.log( check("}{") );// => false
console.log( check("z([{}-()]{a})"));// => true
console.log( check("") );// = >true

And below I put my answer from today, when I just sit to this task relaxed...

wtorek, 7 kwietnia 2015

Javascript getter method...

Every day brings something new :-) Recently I was reading Eloquent JavaScript: A Modern Introduction to Programming by Marijn Haverbeke, and I was working with below code from book.

At first everything was very clear for me, ok it is just simple small JavaScript object.... but when I looked once again I saw this strange syntax near content function. It turned out that this is special syntax for getter method.

With getter method we can have property that returns a dynamically computed value or we can reflect the status of internal variable without the use of explicit method calls.

When using get syntax you need to be aware of:

  • it can have an identifier which is either a number or a string
  • it must have zero parameters
  • it must not appear in an object literal with another get or with a data entry for the same property.

A getter can be removed using delete operator.

And there is of course setter method :-). For more info please look on MDN site.

środa, 25 marca 2015

Adventure with Raspberry Pi

Recently I've got very interesting task from guys from devmeetings.pl. They write to me something like this:

There is always a problem with the Internet on live workshops (30 participants, WIFI is not able to handle the traffic, the learning platform make a lot of a request per second). We want to eliminate it: provide a working simple server on Raspberry Pi, which will be physically in the place where the training takes place…. So we want to check if we can run our learning platform on Raspberry Pi and if this little computer can handle this traffic…

And after few days I received a very nice package. The package looks something like this on the left.

Yes it is nice brand new Raspberry Pi 2 (http://www.raspberrypi.org). It was mine first contact with this kind of single-board computer, but when guys from devmeetings asks me to do a few tasks on this platform for them I have got only one answer YES :-) 

This could be a nice challenge or horror :-)… will see.

So I download New Out Of the Box Software (NOOBS) (http://www.raspberrypi.org/downloads/) to install OS for Raspberry PI and extracted it on SD card. After this I connect Pi to my TV to handle OS install…..




OS was installed without any problems and after some time I could connect through SSH to Pi from my laptop.

Now it was time to install node.js. Because of ARM-architecture on Raspberry I need to download node.js version for this specific architecture. 


So I run this commands

and after this I was able to run node –v and npm –v, so far so good :-)



Now I need to run MongoDb on the Pi and with help from https://emersonveenstra.net/mongodb-raspberry-pi/ task was done.:-)



There is only available version 2.1.1 of Mongo for ARM devices, but it should be enough for more cases. Next step was to restore 1.5 GB Mongo DB. With some problems because of lack of space on SD card,  I successfully restored MongoDB .

The learning platform successfully starts! :-)

Because I need to make some load tests I want to monitor performance & health of raspberry itself, so I install great RPI-Monitor (https://github.com/XavierBerger/RPi-Monitor), where gathered information are presented in nice HTML5 pages.

Before I start real test I go to the platform running on PI and I start using it, I clear cache in my browser and start switching between pages and stop on page with editor with live preview(every change in editor was sent to the server and was saved in mongo db, so there ware really a lot of request going on).

During this simple test I haven't noticed any problems with platform performance, and using Chrome Devtools I make some charts presenting network traffic



Latency - empty cache
Switching between pages
Editing large HTML document in editor with live preview
Request was very fast, and the preview of text inserted into editor was updating vary fast.
After using platform for some time I switched on RPI-Monitor to see how PI was doing. And I must say PI was doing very good :-), take a look …

CPU performance during test by one users
Memory used during test by one user
The next step was to simulate 30 users working at the same time on editor. To made it possible I wrote this script which I put on platform. Script simulate writing in the editor.


Because I want to open 30 tabs on my Chrome browser and start test on the every tab at the same time I enable to run script by changing value on LocalStorage



I have to admit that the PI passed the test with very good score :-).

Network traffic - during simulating 30 users

CPU - during simulating 30 users

Temperature - during simulating 30 users

Memory - during simulating 30 users

During test when script writes in the editor, network traffic looks similar on each tab. At the begging the request was block because of  heavy browser load


Summary

It really looks like this small computer ROCKS !!! :-) I made tests on development version of platform and on production version everything should be faster. Raspberry PI was not yet used on live workshops, but I hope it will be. And I want to thanks guys from devmeetings for giving me this opportunity to play with RaspberryPI.

poniedziałek, 23 lutego 2015

Javascript Array Methods - Slice(), Splice(), Map(), Reduce(), ForEach(), Some(), Every(), IndexOf(), Concat()

Recently, I have noticed that I have problems with remember the difference betwean JS method Array.prototype.slice and Array.prototype.splice, so I decided for learning purposes to write this short post as a reference about JS array methods. In this post I included few commonly methods:

  1. slice()
  2. splice()
  3. map()
  4. reduce()
  5. forEach()
  6. some()
  7. every()
  8. indexOf()
  9. concat()

slice()

Slice method create new array which containes shallow copy of elements from original array.This method does not change original array.

Syntax: array.slice(begin, end)

Begin parameter is the index of element from where the copy process starts. Slice copy element until it reach the end, wherein element on index end is not copied into new array. When parameter begin or end is negative, index of the element is counted from the end of the array.

var array = 'lukasz-szewczak'.split('');
console.log(array.slice(0,2))
// ["l", "u"]
console.log(array.slice(0,-2))
// ["l", "u", "k", "a", "s", "z", "-", "s", "z", "e", "w", "c", "z"]
console.log(array.slice(-8))
//["s", "z", "e", "w", "c", "z", "a", "k"]

We can use slice method to convert array like object into array. Very often you can meet wih calling of this method inside function to converte arguments object into array.

function list() {
  return Array.prototype.slice.call(arguments, 0);
}
list(1, 2, 3); 
// [1, 2, 3]

Instead of Array.prototype.slice we can use [].slice.call;


splice()

Splice change the original array by removing or adding new elements

Syntax: array.splice(start, deleteCount, item1, item2, ...)

Start parameter define index from which array will be changed, negative value mean that searching start from the end of the array, deleteCount describes how many elements are to be removed from the array.ItemN describes the element to be added to the array. Method returns array of deleted elements.

var array = [1, 2, 3, 9, 10];
var removed = array.splice(3, 0, 4, 5, 6, 7, 8);
console.log(array)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
console.log(removed)
// []
removed = array.splice(3,5);
console.log(array)
// [1, 2, 3, 9, 10]
console.log(removed)
// [4, 5, 6, 7, 8]

map()

The map method transforms the array by applying a function to all of its elements and building a new array from the returned values. The new array will have the same length as the input array.

Syntax: array.map(callback)

Callback function which generates new array element is invoke with this three arguments:

  • currentValue - current element from original array
  • index - index of current element
  • orgArr - original array on which transformation is made
var array = [1, 2, 3, 4];
var plusOne = array.map(function(el, index, orgArr) {
            return el + 1;
        });
console.log(plusOne);
//[2, 3, 4, 5]

reduce()

Reduce is one of the method I ignored for a long time, because I don't fuly understand it, but my attitiude changed after I started reading a book Eloquent Javascript.

The reduce method is used to calculate a single value from an array.

Syntax: array.reduce(callback, initialValue)

reduce executes callback function once for each element in the array, which receives four arguments:

  • previousValue - value from previous invocation of the callback function or initialValue if supplied
  • currentValue - current element from the array
  • index - index of the current element
  • array - the array reduce was called upon
var numbers = [12,34,23,56,78,34];
function max(array){
   function mathMax(a, b) {return Math.max(a, b);}
   return array.reduce(mathMax);
}

function avarage(array){
   function plus(a, b) {return a+b;}
   return array.reduce(plus) / array.length;
}
console.log(max(numbers));
//78
console.log(avarage(numbers));
//39.5

And here is another example of reduce, where I change array into the list object using reduce method. (This is my result for exercise from the book Eloquent Javascript)

function arrayToList(arr){
   return arr.reverse().reduce(function(previousVal, currentVal){
         if (previousVal){
            return {
               value: currentVal,
               rest:previousVal
            };
         }
         else {
            return {
               value: currentVal,
               rest: null
            };
         }
   },null);
};
console.log(arrayToList([10,20,30,40,50,60]));

forEach()

The standard method (from ES5) to iterate over array. Thanks to this method code is shorter and cleaner, there is probably one small problem that is you cannot break this method using break keyword like the classical for loop (http://stackoverflow.com/questions/6260756/how-to-stop-javascript-foreach). The forEach method takes one argument whis is function to excecuted on every element.

Syntax: array.forEach(callback)

Callback function takes three arguments:

  • currentValue – current element being processed
  • index – index of the current element
  • array
[10,20,30,40,50,60].forEach(function (element, index) {
    console.log('Element: {', element, '}, index {', index,'}');
});
// Element: { 10 }, index { 0 }
// Element: { 20 }, index { 1 }
// Element: { 30 }, index { 2 }
// Element: { 40 }, index { 3 }
// Element: { 50 }, index { 4 }
// Element: { 60 }, index { 5 }

some()

If You want to check wheater at least one element in array meets your specific criteria you can use method some which will return true as soon as it find element meeting this specific criteria.

Syntax: array.some(callback)

callback is a function to test if an element meets our criteria. Callback function takes three arguments:

  • currentValue – current element being processed
  • index – index of the current element
  • array
function ifElementBiggerThen30(element){ return element > 30;}
[10,20,30,40,50,60].some(ifElementBiggerThen30);
//true

every()

On the other hand, if You want to check if all elements in array meet yours specific criteria you can use method every which will return false as soon as it find element which does not meet your criteria.

Syntax: array.every(callback);

callback is a function to test if an element meets our criteria. Callback function takes three arguments:

  • currentValue – current element being processed
  • index – index of the current element
  • array
[10,20,30,40,50,60].every(Number.isInteger);
//true
[10,20,30,40,'test',60].every(Number.isInteger);
//false

indexOf()

Next method can help you find all occurence of element in array

Syntax: array.indexOf(searchElement, fromIndex)

searchElement is of course element we are looking for in the array, if element is founded then method returs it index or -1 if no element is found. indexOf compares element with searchEelement using strict equality ( === )

[10,20,30,40,50,60,10,20,40].indexOf(10);
//0
[10,20,30,40,50,60,10,20,40].indexOf(10,1);
//6
[10,20,30,40,50,60,10,20,40].indexOf(70);
//-1

concat()

If you want to join value(s) or arrays with existing array we can use concat method which joins all provided values with array on which it was called upon and return new array.

Syntax: array.concat(value1, value2, ...)

Where parameter valueN can be an array or not;

var some_array = [1,2,4,6,'a','b','c'],
new_array = [10,9,8,7,'e','d','c'].concat(some_array,'D');
console.log(new_array);
//[10, 9, 8, 7, "e", "d", "c", 1, 2, 4, 6, "a", "b", "c", "D"]

Writing this reference helped me a lot to consolidate my knowledge about the above-mentioned array methods. Now I will go to check new ES6 arrays method. :-)

niedziela, 8 lutego 2015

ES6 Overview - Diagram

I’ve got few provisions on this year :-) Start to write with English on my blog and start to learn ECMAScript 6 features. There are a lot of resources on Internet with this topic and few of them I write below

  1.  Understanding ECMAScript 6 by Nicholas C. Zakas
  2.  https://github.com/lukehoban/es6features - nice overview of ECMAScript 6 features
  3. http://wiki.ecmascript.org/doku.php?id=harmony:proposals
  4. http://tc39wiki.calculist.org/es6/
  5. You Don't Know JS: ES6 & Beyond
  6. https://github.com/ericdouglas/ES6-Learning - List of resources to learn ECMAScript 6!

I want to start my journey with ES6 by finding new stuff and visualized it for better learning process and after that I will try in new posts to go over this new features to get better understanding of it. But for now I prepare this simple diagram for ES6.