Technology Works: June 2018

Tuesday, June 19, 2018

Python - Installing virtualenv in Ubuntu

Use the below command to install virtualenv in Ubuntu:

$ sudo apt-get install virtualenv
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
python3-virtualenv
The following NEW packages will be installed:
python3-virtualenv virtualenv
0 upgraded, 2 newly installed, 0 to remove and 9 not upgraded.
Need to get 47.8 kB of archives.
After this operation, 171 kB of additional disk space will be used.
Do you want to continue? [Y/n] Y
Get:1 http://in.archive.ubuntu.com/ubuntu bionic/universe amd64 python3-virtualenv all 15.1.0+ds-1.1 [43.4 kB]
Get:2 http://in.archive.ubuntu.com/ubuntu bionic/universe amd64 virtualenv all 15.1.0+ds-1.1 [4,476 B]
Fetched 47.8 kB in 1s (49.2 kB/s)
Selecting previously unselected package python3-virtualenv.
(Reading database ... 205693 files and directories currently installed.)
Preparing to unpack .../python3-virtualenv_15.1.0+ds-1.1_all.deb ...
Unpacking python3-virtualenv (15.1.0+ds-1.1) ...
Selecting previously unselected package virtualenv.
Preparing to unpack .../virtualenv_15.1.0+ds-1.1_all.deb ...
Unpacking virtualenv (15.1.0+ds-1.1) ...
Setting up python3-virtualenv (15.1.0+ds-1.1) ...
Processing triggers for man-db (2.8.3-2) ...
Setting up virtualenv (15.1.0+ds-1.1) ...
$

Refer:

https://virtualenv.pypa.io/en/stable/installation/

Python - Install Jinja - template engine

Install Jinja2 templating engine using pip:

$ sudo pip install Jinja2
The directory '/home/ubuntu/.cache/pip/http' or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
The directory '/home/ubuntu/.cache/pip' or its parent directory is not owned by the current user and caching wheels has been disabled. check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
Collecting Jinja2
Downloading https://files.pythonhosted.org/packages/7f/ff/ae64bacdfc95f27a016a7bed8e8686763ba4d277a78ca76f32659220a731/Jinja2-2.10-py2.py3-none-any.whl (126kB)
100% |████████████████████████████████| 133kB 374kB/s
Collecting MarkupSafe>=0.23 (from Jinja2)
Downloading https://files.pythonhosted.org/packages/4d/de/32d741db316d8fdb7680822dd37001ef7a448255de9699ab4bfcbdf4172b/MarkupSafe-1.0.tar.gz
Installing collected packages: MarkupSafe, Jinja2
Running setup.py install for MarkupSafe ... done
Successfully installed Jinja2-2.10 MarkupSafe-1.0
$

Check Installation:

$ python
Python 2.7.15rc1 (default, Apr 15 2018, 21:51:34)
[GCC 7.3.0] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import jinja2
>>> exit()
$

Installation successful.

Python - PDF reports module - weasyprint - install

Follow the below steps to install weasyprint module for python on Ubuntu 18.04:

Step 1: Install the dependencies for weasyprint:

List of dependencies: http://weasyprint.readthedocs.io/en/latest/install.html#debian-ubuntu

Install dependencies using the command:

sudo apt-get install build-essential python3-dev python3-pip python3-setuptools python3-wheel python3-cffi libcairo2 libpango-1.0-0 libpangocairo-1.0-0 libgdk-pixbuf2.0-0 libffi-dev shared-mime-info

Step 2: Install using pip :

$ sudo pip install weasyprint

[sudo] password for ubuntu:

The directory '/home/ubuntu/.cache/pip/http' or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.

The directory '/home/ubuntu/.cache/pip' or its parent directory is not owned by the current user and caching wheels has been disabled. check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.

Collecting weasyprint

Downloading https://files.pythonhosted.org/packages/7e/4c/cf2ec7abf7f84a2d1325d01dcac1d4bcb77f41117101fe564eb76952c65f/WeasyPrint-0.42.3.tar.gz (399kB)

100% |████████████████████████████████| 409kB 1.4MB/s

Collecting Pyphen>=0.8 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/dd/c4/74859f895e2361d92cfbb6208ea7afd06c2f1f05c491da71cbd7ce3887be/Pyphen-0.9.4-py2.py3-none-any.whl (1.9MB)

100% |████████████████████████████████| 2.0MB 516kB/s

Collecting cairocffi>=0.5 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/7a/2f/78179fea3413322fd20be407897738e5569e876e7cb6e4647a79b1ffd8dd/cairocffi-0.8.1.tar.gz (79kB)

100% |████████████████████████████████| 81kB 2.9MB/s

Collecting cffi>=0.6 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/14/dd/3e7a1e1280e7d767bd3fa15791759c91ec19058ebe31217fe66f3e9a8c49/cffi-1.11.5-cp27-cp27mu-manylinux1_x86_64.whl (407kB)

100% |████████████████████████████████| 409kB 1.5MB/s

Collecting cssselect2>=0.1 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/12/e2/91fcd4cd32545beec6e11628d64d3e20f11b5a95dd1ccf3216fd69f176b7/cssselect2-0.2.1-py2.py3-none-any.whl

Collecting html5lib>=0.999999999 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/a5/62/bbd2be0e7943ec8504b517e62bab011b4946e1258842bc159e5dfde15b96/html5lib-1.0.1-py2.py3-none-any.whl (117kB)

100% |████████████████████████████████| 122kB 2.5MB/s

Collecting pdfrw>=0.4 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/c0/84/af442c4458756bb0c0d2424102d1200616f3ff9b82c48aaa130e08549bf6/pdfrw-0.4-py2.py3-none-any.whl (69kB)

100% |████████████████████████████████| 71kB 2.9MB/s

Collecting tinycss2>=0.5 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/88/95/0ec73db7fc638ec000e662936ffe1a4e1eaa22f2861c8de18b1597c42584/tinycss2-0.6.1-py2.py3-none-any.whl (61kB)

100% |████████████████████████████████| 71kB 3.6MB/s

Collecting CairoSVG<2.0.0,>=1.0.20 (from weasyprint)

Downloading https://files.pythonhosted.org/packages/d9/9b/c241990c86faa9e52a01f0570bba4247ba0f3d66eae2607e179cb9ae773a/CairoSVG-1.0.22.tar.gz

Collecting pycparser (from cffi>=0.6->weasyprint)

Downloading https://files.pythonhosted.org/packages/8c/2d/aad7f16146f4197a11f8e91fb81df177adcc2073d36a17b1491fd09df6ed/pycparser-2.18.tar.gz (245kB)

100% |████████████████████████████████| 256kB 2.1MB/s

Requirement already satisfied: six>=1.9 in ./.local/lib/python2.7/site-packages (from html5lib>=0.999999999->weasyprint)

Collecting webencodings (from html5lib>=0.999999999->weasyprint)

Downloading https://files.pythonhosted.org/packages/f4/24/2a3e3df732393fed8b3ebf2ec078f05546de641fe1b667ee316ec1dcf3b7/webencodings-0.5.1-py2.py3-none-any.whl

Installing collected packages: Pyphen, pycparser, cffi, cairocffi, webencodings, tinycss2, cssselect2, html5lib, pdfrw, CairoSVG, weasyprint

Running setup.py install for pycparser ... done

Running setup.py install for cairocffi ... done

Running setup.py install for CairoSVG ... done

Running setup.py install for weasyprint ... done

Successfully installed CairoSVG-1.0.22 Pyphen-0.9.4 cairocffi-0.8.1 cffi-1.11.5 cssselect2-0.2.1 html5lib-1.0.1 pdfrw-0.4 pycparser-2.18 tinycss2-0.6.1 weasyprint-0.42.3 webencodings-0.5.1

Check the installation:

$ python

Python 2.7.15rc1 (default, Apr 15 2018, 21:51:34)

[GCC 7.3.0] on linux2

Type "help", "copyright", "credits" or "license" for more information.

>>> import weasyprint

>>> exit()

Installation is successful.

Sunday, June 17, 2018

JavaScript - built in method on Objects

Below code demonstrates the usage of built in methods and properties on Objects:

var person = {
name: 'Sandra',
age: 27
}

//deleting properties
// checks if the field name is present in the object person
console.log('name' in person);

//determine if they are there
// deletes the field from the object
delete person.name;

console.log(person);

var school = {
name: 'Sadhana Infinity International School',
age: 1,
place: "Nallagandla",
greet: function () {
return "Welcome to "+this.name;
}
}

//demonstrates usage of for loop
// to access fields and values in Object
for (var field in school) {
console.log(field +":"+school[field]);
}

Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

Practice at:
http://jsbin.com

JavaScript - Objects - defineProperty

The below code demonstrates usage of defineProperty in JS:

var BankAccount = {
cash: 12000,
_name:"Default",
withdraw: function(amount){
this.cash -= amount;
console.log('Withdrew '+ amount + ', new cash reserve is: '+ this.cash);
}
};

//BankAccount.withdraw(1000);

Object.defineProperty(BankAccount, 'deposit',{
value: function(amount) {
this.cash += amount;
}
});

BankAccount.deposit(3000);
BankAccount.withdraw(1000);

/*
Object.defineProperty(BankAccount, 'name',{
value : 'ID000-1',
writable: true
// by default, properties created using defineProperty = readOnly
});

console.log(BankAccount.name);
*/
BankAccount.name = 'Sandra';
console.log(BankAccount.name);

Object.defineProperty(BankAccount,'name',{
get: function() {
return this._name;
} ,
set: function(name) {
this._name=name;
}
})

BankAccount.name = 'Cassandra';

console.log(BankAccount.name);

Practice at:
http://jsbin.com

Saturday, June 16, 2018

JavaScript - Simulate POST request from JS Console

Below code simulates a POST request from a JavaScript console:

var xhr = new XMLHttpRequest();
xhr.open('POST','https://mathbostock.execute-api.us-east-1.amazonaws.com/dev/random-items');
xhr.onreadystatechange = function(event) {
console.log(event.target.response);
}

xhr.send();

Practice at:
https://codepen.io

JavaScript - Object - this - bind, call, apply

The below code demonstrates the usage of the following object methods:

bind
call
apply

// here this refers to the window object

function myFunc(message){

console.log(message+" "+this);

}

var obj = {

objectFunction:myFunc

};

var Person = {

name: "Cassandra",

age: 27

}

// Observe the extra paranthesis in Bind

obj.objectFunction.bind(Person,"Bind says - Hey there ")();

// Observe that there are no extra paranthesis

obj.objectFunction.call(Person,"Call says - Hey there ");

// In apply parameters are passed using an array

obj.objectFunction.apply(Person,["Apply says - Hey there "]);

Refer:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Practice at:
http://jsbin.com

JavaScript - Object - this - bind

Below code demonstrates the usage of this and bind when dealing with objects:

// here this refers to the window object
function myFunc(){
console.log(this);
}

//myFunc();

var obj = {
objectFunction:myFunc
};

var Person = {
name: "Cassandra",
age: 27
}

obj.objectFunction.bind(Person)();

Refer:

Practice at:
http://jsbin.com

Friday, June 15, 2018

JavaScript - Object - constructor with parameters

Below code demonstrates - how to create a constructor with parameters:

//creating a generic blueprint
function Person(name, age) {
this.name = name;
this.age = age;

}

var person1 = new Person("Anna",37);
var person2 = new Person("Steffi",37);

console.log(person1.name);
console.log(person2.name);

Refer:

Practice at:
http://jsbin.com

JavaScript - Object Creation - Techniques - 2 - using object Function

Below code demonstrates the technique of creating object using function constructor:

//blueprint object
function Person(){
this.name = "Cassandra"; // this sets to the object itself
this.age = 27;
this.greet = function () {
console.log("Hello, I am "+this.name);
};
}

Person.prototype.name = "Sandra";

Person.prototype.greetGeneral = function(){
console.log("Hello "+"there!");
}

// instance of the blueprint object
var person = new Person();
person.name = "Andra";
Person.prototype.name = "Sandra"; // this does not override
// as it sets at a higher level - at prototype level
// instead of setting it at object level

person.greet();

console.log(Person);
console.log(person.__proto__ == Person.prototype);
// We did not create Person1.prototype. JavaScript has created it for us
// The function here is a constructor function
// it is a normal function, but we use it as a constructor function
// by adding a new keyword here
console.log(person.__proto__ );

var person2 = new Person();
console.log(person2.greetGeneral());

Refer:

Practice at:
http://jsbin.com

JavaScript - Object - Prototype Chaining - Verifying

Below code demonstrates the verification of prototype chaining concept in JavaScript:

// create object first person
var person1 = {
name : "Diana",
age : 27,
};

console.log(person1.__proto__);

console.log(person1.toString());

//Adding the function greetings in the root prototype
// so that all lower objects are able to derive it
Object.prototype.greetings = function() {
console.log("Hello "+this.name+"!");
}

//greet first person
// Diana
person1.greetings();

// create second person
// this inherits attributes from first person
var person2 = Object.create(person1);
person2.name = "Saina";
console.log(person2.name);

//verifying the object inheritance
console.log(person2.__proto__ == person1);
console.log(person2.__proto__.__proto__ == Object.prototype);
console.log(Object.getPrototypeOf(person2) == person1);

Diagram:

Refer:

Practice at:
http://jsbin.com

Thursday, June 14, 2018

JavaScript - Object - Prototype Chaining

Below code demonstrates the prototype chaining concept in JavaScript:

// create object first person
var person1 = {
name : "Diana",
age : 27,
};

console.log(person1.__proto__);

console.log(person1.toString());

//Adding the function greetings in the root prototype
// so that all lower objects are able to derive it
Object.prototype.greetings = function() {
console.log("Hello "+this.name+"!");
}

//greet first person
// Diana
person1.greetings();

// create second person
// this inherits attributes from first person
var person2 = Object.create(person1);
person2.name = "Saina";
console.log(person2.name);

// greet second person
person2.greetings();

Diagram:

Refer:

Practice at:
http://jsbin.com

JavaScript - Object - Prototype

Below code demonstrates usage of Prototype in JavaScript:

var age = 30;

var person1 = {
name : "Diana",
age : 27,
};

console.log(person1.__proto__);

//console.log(person1.anything());

console.log(person1.toString());

Object.prototype.greetings = function() {
console.log("Hello there!");
}

person1.greetings();

Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

Practice at:
http://jsbin.com

JavaScript - Object Creation - Techniques - Object.create()

Below code demonstrates usage of Object.create() to create objects:

var age = 30;

var person1 = {
name : "Diana",
age : 27,
};

console.log(person1);

// using prototype as null - that means there is no prototype
var person2 = Object.create(null);
person2.name = "Sandra";
person2.age = "28";
console.log(person2);

// using prototype as person1
//that means inheriting from object - person1
var person3 = Object.create(person1);
person3.name = "Cassandra";
console.log(person3);

Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Practice at:
http://jsbin.com

Wednesday, June 13, 2018

JavaScript - use XMLHttpRequest

Below code demonstrates usage of XMLHttpRequest:

var http = new XMLHttpRequest();
var url = 'http://jsonplaceholder.typicode.com/posts';
var method = 'GET';

http.open(method,url);
http.onreadystatechange = function() {
if(http.readyState === XMLHttpRequest.DONE && http.status === 200) {
myJSON = JSON.parse(http.responseText)
console.log(myJSON[0].id);
} else if (http.readyState === XMLHttpRequest.DONE && http.status !== 200) {
console.log("Error!");
}
};

http.send();

Refer:

Practice at:

http://jsbin.com

JavaScript - Object Creation - Techniques

Below code demonstrates creation of objects using two techniques:

// object creation - Technique 1 - using JSON
var person1 = {
name: "MS Dhoni",
"firstName": "Mahendra",
city: "Ranchi",
team: "Chennai Super Kings",
details: {
hobbies: ["cooking","cricket","chess"],
location: "India"
},
greeting: function() {
console.log("welcome "+this.name);
}
}

// object creation - Technique 2 - using new Object()

var person2 = new Object();
person2.name = "V Kohli";
person2.firstName = "Virat";
person2.city = "Delhi";
person2.team = "Royal Challengers Bangalore";
person2.details = {
hobbies: ["sleeping","cricket","listening songs"],
location: "India"
};
person2.greeting = function() {
console.log("welcome "+this.name);
}

// Printing the person name to console
console.log(person1);

console.log(person2);

person1.greeting();
person2.greeting();

Refer:

Practice at:
http://jsbin.com

JavaScript - this keyword - usage within JSON

Below code demonstrates the usage of this key keyword within JSON:

// declaring a javascript object
var person = {
name: "MS Dhoni",
"firstName": "Mahendra",
city: "Ranchi",
team: "Chennai Super Kings",
details: {
hobbies: ["cooking","cricket","chess"],
location: "India"
},
greeting: function() {
console.log("welcome "+this.name);
}
}

// Printing the person object to console
//console.log(person);

// Printing the person name to console
console.log(person.name);

person.name = "Donald";

// Printing the person name to console
console.log(person.name);

person.greeting();

Refer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Practice at: http://jsbin.com

JavaScript - Object Notation - accessing values

Below code demonstrates usage of JavaScript Object Notation:

// declaring a javascript object

var person = {

name: "MS Dhoni",

city: "Ranchi",

team: "Chennai Super Kings",

details: {

hobbies: ["cooking","cricket","chess"],

location: "India"

greeting: function() {

console.log("welcome");

}

// Printing the person object to console

console.log(person);

// Printing the person name to console

console.log(person.name);

// Printing the person name using dictionary notation.

// This technique can be used to access the field name dynamically

field = "name"

console.log(person[field]);

//accessing deeper levels

console.log(person.details.hobbies);

// accessing deeper levels dynamically

console.log(person["details"]["hobbies"]);

// calling the function defined inside the object

person.greeting();

Refer: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics

Practice at: http://jsbin.com