Function currying

Given a function call sum(1)(2), write a function with currying and without currying.

With currying –

var sum = function(num1) {
  return function(num2) {
    return num1 + num2;
 }
}

Without currying, we can create a sum function on the prototype object of Function. Since we will be using apply function to provide argument to the sum function, we will have to convert ‘argument’ array(which is not actually an array) to array so that we would be able to use concat function to combine both the arguments(num1,num2).

So we write this toArray function as below.

var toArray = function(args) {
  Array.prototype.slice.call(args);
}

and we write sum function as below –

var sum = function(){
self = this;
var args = toArray(arguments);
 return function(){
  return self.apply(this, args.concat(toArray(arguments)))
 }
}

Using Object.assign

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

Ex.

var options = {animation: true; speed:'2s'};
var defaultOptions = {animation: false; speed: '2s'};
Object.assign(defaultOptions, options); // {animation: true, speed: "2s"};

We can merge multiple objects together using Object.assign.

var animation = {type: 'ease in', time: '2s'};
var size = {width:20, height:10};
var sprite = Object.assign(animation,size); //{type: "ease in", time: "2s", width: 20, height: 10}

Trip from Mumbai to Bali

I am writing this blog post three weeks after returning back from Bali. So I will try to recollect as much information as possible. We(I and my wife) planned this trip two weeks before the actual travel date. We planned the trip ourselves without going for any package tour. Since July-August is the peak season, we choose the same time for our holidays.

Air ticket
We booked Air Asia from Mumbai(from makeMyTrip.com website). This is the cheapest career from Mumbai to Bali. The airline by default allows the baggage of 9Kg. So I paid an additional amount(approx. ₹4000) which allow carrying 20Kg in check-in baggage. When I weight it was a 13Kg weight for our bag. So if there are two people traveling you would need to go for this option to avoid last minute hassle at the airport. The airline(XT853) does not have business class. It offers only premium and economy class.

Make sure you carry water and blanket because you will have to pay for it. Yes! you heard it right. It costs ₹ 100 for a water bottle and ₹ 1000 for a blanket(especially if you are traveling in an economy class). The airline will have a halt of 45 minutes at Kaula Lumpur. You won’t be allowed to alight here. The same flight carries you and the new passenger to Bali. So, you will have to kill some time(as there is no In-flight entertainment (IFE)).

Visa, SIM card, and currency
Indonesia provides Visa on arrival facility for Indian nationals which is valid for 30 days. You don’t need to pay any fee for it. Also, you need not buy expensive SIM cards and Indonesian currency(with the low conversion rate, I got from BookMyForex with 120 🙁 ) from India. So, you don’t need to follow the stupid way which I followed. You will get local SIM cards and currency(with a conversion rate of ₹150) at the airport(at the exit gate).

The Hotels
As we had just four days to spend in Bali we planned to stay two days in Ubud(central Bali) which is a hilly area with a lot of greenery and two days in Sanur. So, we booked Kupu Kupu Barong Villa(from makeMytrip.com) in Ubud and Puri Sanitarian(from Agoda.com) in Sanur.

From Airport to Hotel
How do you plan to reach to Hotel from Airport? Well, when I asked for pickup from Airport to the hotel I booked, they said it will charge me around 500,000 Rupiah(Indonesian not Indian and yes do not be afraid with the zeros). If you convert it to Indian Rupee it will be around ₹3000, which was expensive. The better option is to book Uber or pre-book from India.

At the Airport
“Good Morning this is your captain speaking, we will shortly land at Ngurah Rai International Airport, Denpasar”.  After a journey of eight hours, you will finally reach your destination in the morning.

You will have to walk to the immigration counter where your passport will be checked and stamped from where you will have to head to collect your check-in bag. At the exit gate buy currency and SIM cards if you need. You will find your driver holding placard of your name.

The resort – Kupu Kupu Barong Villa
Bali has 83% people who follow Balinese Hindu religion and people here are most hospitable. We were welcomed with the garland of the flowers with a welcome drink at our resort Kupu Kupu Barong Villa. If you really want to enjoy your holidays in peace, I recommend you to book the riverside villa.

Kupu Kupu Barong, River-side villa

The resort offers complimentary breakfast and afternoon tea(with their bakery products). You will get a lot of options for Indian breakfast such as Paratha as there is an Indian chef working in the kitchen. I enjoyed the Banana Pancake with Tea 🙂 If you are vegetarian, you may try Mi Goreng(Fried Rice) or Nasi Goreng(Fried Noodles) in your Lunch. You may try some Spa therapy in Mango tree spa in this resort. Since I had already booked at another hotel, I can’t say anything about the review.

The resort has their own paddy field adjacent to the river. You can visit it and enjoy the photography with the scenic background. They also organize a cultural program on each Tuesday(if I am not wrong). If you need ATM machine, it is just opposite side of the entrance on the main road. Opposite to ATM, there is a supermarket where you can buy eatables and other stuff.

The staff in Kupu Kupu Barong Villa are friendly and soft spoken people and you will be greeted by them each time they see you. I loved it. Here are some pics

With friendly staff in Kupu Kupu Barong Villa, While saying goodbye.

Ctd..

Starting with Angular2 project

Angular2 app demo

To start with Angular2, you will have to follow the guidelines given at the below location, I followed the same:

https://angular.io/docs/ts/latest/quickstart.html

I have created a small demo of People management application here.

The application has basic app component inside which we have imported components – header, member edit and member details. So assuming that the components are created in their respective typescript file. we will have following lines at the top of our app.component.ts file.

import { Component } from ‘@angular/core’;
import {SocMem} from ‘./member’;
import {MemberDetailsComponent} from ‘./member-details.component’;
import {Header} from ‘./header.component’;
import {MemberEditComponent} from ‘./member-edit.component’;

Above all lines import the components.

Then we will create a class AppComponent.

export class AppComponent {
members= MEMBERS;
selectedMember =  MEMBERS[0];
onselect(member){ console.log(member);this.selectedMember = member;}
}
In the class definition we have assigned MEMBER of const type to member property to be usable to display on the grid. Onselect method associated with this class is used to get the selected member from the grid.

Above this class definition we have decorator function for the class which decorates the class by adding the template in the defined selector which takes the following from:

@Component({
selector:[selector in the HTML file],
template:[template to add to the selector]
})

For our application we will have decorator in the following form:

@Component({ /* Component decorator*/
selector: ‘my-app’,
template: `<div class=”container”><app-header [titleapp]=”apptitle”></app-header>
<div class=”row”>
<div class=”col-md-6″>
<table class=”table-bordered table”>
<tr><th>Name</th><th>Flat</th><th>Contact</th></tr>
<tr *ngFor = “let member of members” (click)=”onselect(member)”  [class.warning]=”member==selectedMember” >
<td>{{member.name}}</td>
<td>{{member.Flat}}</td>
<td>{{member.contact}}</td>
</tr>
</table>
</div>
<div class=”col-md-6″>
<member-detail [member] = “selectedMember”></member-detail>
<edit-member [member] = “selectedMember”></edit-member>
</div></div></div>`,
directives: [Header,MemberDetailsComponent,MemberEditComponent]
})

In the above code snippet *ngFor is used to iterate over the objects, we used to have ng-repeat in the previous versions. The let keyword inside *ngFor is ES6 feature for scoping the variable.

my-app is the root component inside which we defined different components like header, member details and member edit. We are listing the directives to be included in the root component in the array.

The complete application code is available at the git repository here.

https://github.com/pravinvarma/people-management

3D animation with CSS3

In the post, 3D transformations with CSS3 we learned how to create 3D transformation. In this post we will animate this element in 3D by using the post, Animation with CSS3. We will be creating @keyframes rule to accomplish our goal. Our HTML would be

As we have learned, the parent div creates perspective for our element which is relatively positioned element.

.perCls{ width:300px; height:300px; border:1px solid #CCCCCC;}
#per{ perspective:400px; -webkit-perspective:400px; -webkit-transform:translate(200px,200px)}
#per .box{ width:300px; height:300px; margin:0 auto; position:relative; background:#009933; animation:my 2s;-webkit-animation:my 2s; }

@keyframes my{
from{ transform:rotateY(0deg); -webkit-transform:rotateY(0deg)}
to{ transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
}
@-webkit-keyframes my{
from{ transform:rotateY(0deg); -webkit-transform:rotateY(0deg)}
to{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg)}
}

So, we have created our animation name as ‘my’ and we are rotating the element along Y axis. You can check the demo(Apple Safari) here

3D transformations with CSS3

In the previous post we learned about rotate transformation method in 2D plane, also we learned how to animate in 2D plane. In this post I am going to explain how to rotate in 3D plane. In 3D space we have x and y axis like in 2D plane but with one more axis which is either going away from you or towards you. Please note that 3D transformation is currently implemented only in webkit browsers like Safari and Chrome, IE10 Platform Preview. The feature also works on iPad, iPhone and Android devices.  First of all we need to write markup for parent and child divs. The parent will act as a stage for the child which we are going to tranform in 3D space.

 

<div id=”per” class=”perCls”>
<div class=”box”>
</div>
</div>and CSS is.perCls
{
width:300px;

height:300px;
border:1px solid #CCCCCC;
}#per
{
perspective:400px;

-webkit-perspective:400px;
-webkit-transform:translate(200px,200px)
}#per .box
{
width:300px;

height:300px;
margin:0 auto;
position:relative;
background:#009933;
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg)
}

With #per id we are just creating a stage for the child element and the definition  of perspective property specifies how the child will render in 3D space. Higher value of the perspective gives an impression as if you are viewing the object from a long distance thereby creating a very subtle 3D effect. Lesser value of the perspective gives an impression as if you are viewing the object from very close distance which creates a strong 3D effect. After setting the stage for an object, we are now set for the transformation of the object which we are doing with with #per .box class. We need a position element to do transformation. We have applied some background color.  Note that transform:rotateY(60deg); means you are rotating the element along Y axis. So the element will rotate in x-axis. You can check the demo here

Animation with CSS3

After transforming objects in CSS we are now ready to learn animation. In CSS3, different properties of an object(An HTML element) can be animated by using animation property. There are different sub-properties of animation for specifying animation duration, animation name, animation delay, animation direction etc. For defining animation we use @keyframes rule. The rule describes how the element shall render at a given time in the animation sequence.  Lets check a simple code-

First, lets create a div with a header inside to name it.
<div id=”rotate”><h1>This is test</h1></div>

Next, will create a CSS rule for this div element and define the animation name and its duration.
div#rotate{
animation: rotateMe 1s;
-webkit-animation: rotateMe 1s;
width:200px;
height:100px;

background:yellow;
animation-timing-function:ease;
-webkit-animation-timing-function:ease;
}

We are specifying the animation properties with its name as rotateMe and of the duration of one second for webkit browsers. Then we have specified the height, width and background color, then in the last two lines we have defined the acceleration of the animation.

We have to define keyframes for this animation to work.

@keyframes changeColor
{
from{ transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
}
@-webkit-keyframes changeColor{
from { transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg),;-webkit-transform:rotateZ(360deg);}
}

We have specified the name of the animation as change Color which we have defined in the rotate id. Then we have specified the properties to animate with their start and end values, i.e. we are rotating the element along z-axis from 0 to 360 degree which is complete rotation. Here is the complete demo.