Exilesoft magazine

bolivialodgeInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 5 μήνες)

165 εμφανίσεις

EXPRESSI ONS OF EXPERI MENTED KNOWLEDGE EXPOSED
EXILESOFT IT MAGAZINE
DECEMBER 2012
6 MONTHS I SSUE
02|Exilee www.exilesoft.com
Dec 2012
Knowledge
Culture
Exile
Cover: Photograph by Chaminda Sooriyapperuma
www.exilesoft.com Exilee|03
CONTENTS
December 2012
E D I T I O N 0 2
05
07
09
11
14
18
21




22
28
30
35
37
40
43
45
49
50
52
SPA
Backbone of Future Web:
Backbone.js
Velocity is a Great
Equalizer
MVVM with Knockout.js
Web Development to the
Next Level
REST as a WEB API
LINQ Method Queries
Too Busy Chopping Wood
to Sharpen the Axe?
Talking Beyond Borders
360 Perspective
(Feature Article)
Version Control
for an Agile Team
Beyond F10 & F11 Exilesoft
Photographic Club
Becoming a Better
Programmer by Mastering
Test Driven Development
Functional Programming
with Clojure
Web Application Security
Automation Made Easy
with CodedUI
From the Research Lab...
The Power of E￿ective
Communication
04|Exilee www.exilesoft.com
Dec 2012
Editorial
O
n behalf of the Exilee
steering committee, we are
pleased to write a brief note
on the 2nd release of Exilee
Magazine. The 1st release,
which was a great success
generated lot of feedback
from our readers. The
suggestions and criticisms
received, gave us strength to
deliver more value in this
edition.
In Exilee 1st release, our
focus was more centric towards internal knowledge sharing. However we have taken it a
step further in the 2nd release and offering it as a technical magazine for those who are
passionate about emerging software technologies and for those who desire to become
future Exilees. Technical topics discussed are selected based on current software
industry demands and trends. In addition there are many articles covering areas such as
Software Engineering, Agile Practices, Test Automation, Effective Communication and
many more.

Exilesoft is a learning organization. We value ideas and suggestions from different
sectors to incorporate their experiences to fuel our growth and learning. This edition
includes two interviews. An interview with Dr. Chandana Gamage, Head of the
Department of Computer Science and Engineering at the University of Moratuwa
focusing on his views about the software industry and the other with Jim Benson (Author
of Personal KANBAN) offering tips and tricks on how to manage your personal and
professional life.
Being “Everything Agile” we believe, we can create the synergy needed to provide the
best opportunities to succeed for all our employees with cross functional knowledge. To
get the best out of the magazine we encourage you to read the articles regardless of
your field of specialization.
In addition to these editorial highlights, we would also like to recognize the people who
assisted in many invaluable ways: the management, each individuals who contributed to
this magazine—by writing an article, sending a quick comment by e-mail, the
photography club, GUI team for toiling over the puzzle of a layout and the technical
writers for their patience in reviewing multiple revisions. Without all of you, this
semiannual release would not be a reality.
Sugandika Jayasinghe
Cornelius Dickson
www.exilesoft.com Exilee|05
Dec 2012
SPA
Once you get there, it will be …..
More responsive,
Comfortable,
Reliable and
Available Forever...

Yes it is SPA, Single-Page Architecture also known as
Single-Page Application which supports future web
technologies to satisfy the user, in other words
giving them a great user experience.
During the last couple of years I have been working with many
mobile and web applications. One common observation made
throughout all these projects was that, application developers
need to implement the same or somewhat similar business
functionalities for many web and mobile platforms according to
its nativity (desktop, web, tablet, mobile). It is widely accepted
that desktop or native apps are fast and ￿uid while web
applications are more powerful in aspects such as distribution.
By considering the advantages and disadvantages of both, we
should focus on building a new architecture that enhances the
positive features of both Desktop Applications (i.e. O￿ine
availability, Rich responsiveness, Navigation without backend
calls) and Web Applications ( i.e. Device independent, Free of
client installations, Avoid running any untrusted code,
Linking/Book marking and Navigational support).
In my opinion, SPA has utilized the best of Next Generation Web
and Desktop Technologies to come up with a new architecture
that provides a greater user experience in future applications’
eco system.
It can also be considered as Transmedia app that can be
deployed to many devices regardless of the platforms or device.
SPA is treated as a kind of MEAP (Mobile Enterprise Application
Platform) which provides a comprehensive environment for
mobile development.
Let’s stop talking and see why we need SPA
Reliable
Runs under the client
machine like a native app.
Available
Even if you are o￿ine you
can still function with your
SPA application by using
local storage.
Mobility
ESPA can be deployed on any
mobile device by using
responsive web UI
capabilities.
Great Responsiveness
The user can quickly use
application features and
navigate smoothly around
the application (very fast and
￿uid)
Persisting important state
on the client
Recover from total
disconnection or sudden
crashes and continue from
where you left o￿.
Support for the Real Time
Web
Asynchronous calls to web
applications with real-time
connections using Web
Sockets, Server – Sent events
Forever frames or long polling
App Store deployable
Use third party tools like
Phone Gap to deploy SPA
apps in to App stores.
06|Exilee www.exilesoft.com
Dec 2012
As you imagine, some challenges remains – (SPA – snags)
Search Engine Optimization - JavaScript Hashed URLs are not
supported on existing crawlers on web search engines, whereas
Google has already started on those implementations.
Development Environments are being built –Supportive tools and
technologies for SPA has drastically improved within the last 3
months but certain areas need to be resolved by groups and
communities.
(Core Mobile - http://www.w3.org/community/coremob)
Browser Support - Especially, in-memory Management and DOM
Manipulation requires more support. W3C and organizations like
Microsoft, Google are not concentrating on this aspect (ex: - Web
Platform - http://www.webplatform.org ).
We’ve discussed about the good and the bad. Now let’s dive into
the architecture of SPA, especially the di￿erence between
Conventional Web and SPA Architecture.
Standard Web Architecture
Each and every round trip to the server downloads the entire web
content (HTML, JavaScript, and CSS) to the client which a￿ects the
user experience and the responsiveness adversely.
SPA Architecture - it’s di￿erent
Single Page Architecture consists of Data Endpoints on the server
to communicate with Client JavaScript APIs. These Data Services
will return mainly JSON or XML based data objects on demand
without continually returning the entire web content from the
server.
Navigation and most of the business logics will be handled on the
client side.
Let’s take a brief overview about the technology stack in SPA
architecture.
When it’s comes to Server Technologies it only focuses on Data
Service applications, preferably RESTful Services - Ex- ASP.Net Web
API, Nancy etc. (Thin Server), whereas Client Technologies in SPA
plays the main role with HTML5, JavaScript, and CSS (Thick client).
Consequently it is very di￿cult to choose client technologies that
supports for these needs. It is not a problem that is faced by a
limited group but a￿ecting worldwide developers. To overcome
these issues many communities are being formed and several
conferences are also under way.
Ex:
Throne Of JS – Toronto, Canada - http://throneo￿s.com
Google Octane – JavaScript Benchmark - https://developers.goo-
gle.com/octane
D3JS - Data-Driven Documents - http://d3js.org
Type Script – http://www.typescriptlang.org
Finally I would like to share my own experience with a SPA applica-
tion developed recently. I found this architecture to be more
powerful than I thought in terms of concepts like Separation of
Concerns, and Thick Client with proper Structuring, Functional
Programming with JavaScript, Responsive UI, Test Driven Develop-
ment, and Security etc. Also I was able to utilize most of the JavaS-
cript frameworks and technologies i.e. Knockout, Amplify, Sammy,
Require, Underscore, Qunit, HTML5, Boiler plates, Media Queries,
LESS, etc. If you want to start developing SPA and simultaneously
have a "Zero Code” Syndrome, you’ll be inspired by the SPA
Template under MVC Project Templates in Visual Studio 2012.
Happy development with SPA!!!
For More Information about SPA
http://akasharchy.blogspot.com &
http://www.akashtechy.blogspot.com
Web UI
HTML/CSS/JS
Visible UI
HTML/CSS
Application Layer
Java Scripts
Server Client
Web UI
HTML/CSS/JS
Visible UI
HTML/CSS
Application Layer
Java Scripts
Server Client
DAL Java Script
Local Storage
Navigation/
History
“If you are heading in
the right direction you
will get sufficient end
to end help from the
community while on
the fly”
-- Prabath Randeniya
Data Services
JSON/XML
www.exilesoft.com Exilee|07
Dec 2012
Backbone.js
Backbone of Future Web
--Sugandika Jayasinghe
Backbone.js is a MVC JavaScript framework. MVC can
simply be described as an architecture which sepa-
rates the concerns in an application into three parts:
model, view and controller. The model represents the
domain knowledge and data in the application. The
view is considered as the user interface of the applica-
tion; although it doesn’t directly communicate with
the model, it knows about the existence of models in
order to observe them. The controller handles the
inputs in an application and views handles the
output. When a controller updates a state of a
particular model, it doesn’t directly tell the view. This
is observing nature of the view and model relation-
ship.
Backbone.js provides a structure for models and collections,
manages views which are populated and updated by events.
Those events are raised by models, so Backbone.js can be
considered an event-driven architecture. In Backbone’s point of
view the controller logic is shared between Backbone.View and
Backbone.Router. When connecting to a data source on the
server side or local storage, it supports REST-like adaptors as the
persistence mechanism through JSON connectors, which is able
to transfer the JSON strings from the server side to client side
scripts. It listens for the changes in the window’s hash and
determines the next hop for messages on the transfer path or
remote destinations: Hash-Routing engine. It also contains a
light weight dynamic rendering engine.
There are certain things which Backbone.js doesn’t do.
Backbone.js doesn’t access the DOM (Document Object Model)
speci￿cation; only the view accesses it. There is neither an
animation toolkit nor a control suite.
Backbone.js is illustrated with a simple example application that
implements a sample shopping cart. The shopping cart contains
a collection of items. Creating a Model object for the shopping
cart application with Backbone is as follows.

var Item = Backbone.Model.extend({
defaults: {
title: "Whiteboard Marker Pen",
price: 35,
code: "WM-25"
}
});
By extending Backbone.Model, the Item objects get a series of useful
functions and attributes. The function toJSON allows for serialization
and functions such as isValid and validate are used for validating
objects. Backbone collections can be used for managing the sets of
data. A new collection can be created to store data and tell which
model to be used. It can be initialized by either passing a single object
or an array of objects.
var Cart = Backbone.Collection.extend({
model: Item
});
The at() method gets an object in a given index and returns it as
follows.
var collection = new Cart({ title:"MacBook Pro"});
collection.at(0).get("price");
Now both the model and the collection are available; the “MC” bit of
MVC is almost done. It has to be connected to the view. Backbone
views are used to re￿ect what the applications’ data models look like.
When using Backbone.js in web applications, they rely on Under-
score.js which is a set of utility functions. Views can be used alone
with Underscore.js. Backbone doesn’t access the DOM, instead, the
developer must to use jQuery to manipulate the DO. Before creating
the view some sample data is created as follows.
var items = [
{ title:"MacBook Air", price:799, code:"MA-07"},
{ title:"MacBook Pro", price:999, code:"MA-08"},
{ title:"The new iPad",price:399, code:"NI-07"},
{ title:"Magic Mouse", price: 50, code:"MM-34"},
{ title:"Cinema Display",price:799,code:"CD-17"}
];
var cartCollection = new Cart(items);
Each view created is responsible for a small part of the application.
Here the ￿rst view is a template for an individual item and the second
one shows the entire list of items. A quick HTML template can be
created for the view using the library Underscore.js. The code comes
under script tags as shown below.
<div id="yourcart"></div>
<script id="itemTemplate" type="text/template">
<div>
<h2><%= title %></h2>
<h2><%= code %></h2>
<h4>&pound;<%= price %></h4>
</div>
</script>
08|Exilee www.exilesoft.com
Dec 2012

$(function () {
var cart = new CartCollectionView();
});
Backbone view for a single item can be written as follows.
var ItemView = Backbone.View.extend({
tagName: "div",
className: "item-wrap",
template: $("#itemTemplate").html(),
render: function () {
var templ = _.template(this.template);
this.$el.html(templ(this.model.toJSON()));
return this;
}
});
In this code, “tagName” and “className” tell Backbone to wrap the
template which is within the div tag with a class of “item-wrap”.
The template is provided grabbing the code from the script tag. The
template() method of Underscore.js is used by the “render” method,
to parse the template. After that the “render” method is called with
the JSON representation of the current model, which for this view is
an individual item. The variable “$el” which is set automatically,
stores a jQuery reference to the current object. In the “render”
method, “this” is returned: therefore the method can be called from
another view and get access to the returned data. When a view is
rendered the $el property is set to the template with all “<%= title
%>” tags replaced by their values in the model. As described earlier,
the second view which shows the complete list of items is as
follows.
var CartCollectionView = Backbone.View.extend({
el: $("#yourcart"),
initialize: function () {
this.collection = cartCollection;
this.render();
},
render: function () {
this.collection.each(function (item) {
this.renderItem(item);
}, this);
},
renderItem: function (item) {
var itemView = new ItemView({ model: item });
this.$el.append(itemView.render().el);
}
});
Here the id “yourcart” is hardcoded; its reference is given to
Backbone. From this reference, Backbone creates “this.$el” which is
a jQuery reference to the element. Actually “$el” is already set to be
“yourcart”. The initialize() method tells the view which collection to
be used: here it’s “cartCollection”. Its own “render()” method is
called: it takes the collection and use “each” to loop through each
item in the collection. The ￿rst argument of the “each” method is
the iterator function; the “renderItem” function is called there
passing the item in. the second argument is “this”; here it refers to
the CartCollectionView object. The method renderItem() takes an
item, create a new ItemView() for the particular item passing the
model property. The compiled ItemView() template is appended to
“this.$el”, which contains the value, “$(#yourcart)”. Finally when the
DOM is ready, a new instance of the main view is instantiated as
follows.
After adding a little bit of CSS, the appearance of the item collec-
tion in the web browser is shown above. Still it is a collection of
already added or hard coded items. The shopping cart application
needs a functionality of adding new items to its item collection.
Therefore a simple form is included which allows to add items. The
sample code which is added just after the <body> tag of the page
is as follows.
<form id="add">
<label>Title</label>
<input id="title" type="text" />
<label>Item Code</label>
<input id="code" type="text" />
<label>Price</label>
<input id="price" type="text" />
<input type="submit" value="save" />
</form>
Backbone allows us to bind events for an element to a function. It
can be any element which resides within the View’s objects; i.e. all
the elements which are speci￿ed as “el” when declaring the view.
The view “CartCollectionView” is used in the entire application and
a separate view is created to deal with HTML for listing all the
items, called “ItemCollectionView”. Existing source code is
changed as follows.
var CartCollectionView = Backbone.View.extend({
el: "body",
events: {
"submit #add": "addItem"
},
initialize: function () {
this.itemView = new ItemCollectionView();
},
addItem: function (e) {
e.preventDefault();
this.itemView.addItem();
}
});
In this code the value of “el” is set to page body; it encompasses
everything. In the events object declaration, it simply says when a
submit event is triggered on “add” form, the method “addItem” has
to be called.
What is MVVM? MVVM is the Model-View-ViewModel Pattern [1] that
originated from Microsoft with WPF and Silverlight. It’s a clear separa-
tion of UI from the business logic. This separation helps to unit test
the business logic of your application independent of the display
logic in the UI layer. This allows the developer to clearly identify
whether errors are coming from the UI or the application logic as well
as, allow the UI designers focus on styles separately and
independently while developers can work on the application logic.
In this pattern,
• View - encapsulates UI and UI logic.
• Model - encapsulates business logic and data.
• ViewModel - encapsulates presentation logic and state.
Image: MVVM Pattern [1]
As shown in the image above, the View and the View model needs to
communicate with each other and this is achieved through a
functionality called ‘Data binding’. Data binding takes care of retriev-
ing state from the ViewModel for presentation in the View, and for
updating state in the ViewModel as a result of the user’s interaction
with the View.
Let’s see how this can be implemented in web applications.
Just like in any other web application, we implement the View using
Html (Html5 if you are a modern developer :) ).
Let’s assume a simple view as given below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtm-
l">
<body>
Hello! <strong>Lasantha</strong>
<strong> Bandara</strong>
<br /><br />
First Name : <input type="text" /><br />
Last Name : <input type="text" />
</body>
</html>
www.exilesoft.com Exilee|09
Dec 2012
A new “ItemCollectionView” object is created at initialize. The
new method “addItem” uses jQuery method “PreventDefault()”
to stop the form from being submitted to the server. Then the
method “addItem()” in the “itemView” is called. What is remain-
ing is to implement the “ItemCollectionView”. Its “addItem()”
method loops through all the text ￿elds in the form and stores
the values to a new data object, using each input’s id as the key.
When naming the text ￿eld ids, the property names of the Item
(model) are used. It is possible to create a simple object which
can be used to generate an Item using “new Item(data)”. After
that it is added to the cart collection and renderItem() method is
called; it creates the HTML for an item and it is added to
“#yourcart” wrapper. The implementation of “ItemCollection-
View” is shown below.
var ItemCollectionView = Backbone.View.ex-
tend({
el: '#yourcart',
initialize: function () {
this.collection = cartCollection;
this.render();
}, render: function () {
this.$el.html("");
this.collection.each(function
(item) {
this.renderItem(item);
}, this);
},
renderItem: function (item) {
var itemView = new ItemView({ model: item
});
this.$el.append(itemView.render().el);
},
addItem: function () {
var data = {};
$("#add").children("input[-
type='text']").each(function (i, el) {
data[el.id] = $(el).val();
});
var newItem = new Item(data);
this.collection.add(newItem);
this.renderItem(newItem);
}
});
In this article, a complete minimal application is created with
Backbone.js. The application shows the contents of a shopping
cart and allows the user to insert new items.
Building Single Page Applications (SPA) or complicated user
interfaces will be extremely di￿cult simply using jQuery or
MooTools. It is possible to build up the applications without any
formal structure using standard JavaScript libraries; which ends
up the application a nested pile of jQuery callbacks, tied to
concrete DOM elements. But there will be problems when
something is built without a proper structure. It is quite easy to
implement SPA with Backbone.js and ASP.Net Web API, because
they are based on RESTful convention. As the future of web
applications leads towards SPA, the number of commercial
applications using Backbone will grow higher and higher.
Reference
http://backbonejs.org/
MVVM
with Knockout.js
10|Exilee www.exilesoft.com
Dec 2012
“Web interfaces are also moving
into a different era with rich
functionalities that give the look
and feel of a desktop applica-
tion. MVVM is a pattern that
enhances the capabilities of
web development to support
the modern UI trend”
We can use plain old JavaScript objects as our ViewModel. As an
example:
var MyViewModel = function(){
var self = this;
self.firstName = 'Lasantha';
self.lastName = 'Bandara';
};
var viewModel = new MyViewModel();
Now we have View and ViewModel. Where is the Data binding? In
comes Knockout.js [2]. You can bind View and ViewModel using
features provided by Knockout.js as follows:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/x
html">
<body>
Hello!
<strong data-bind=”text:firstName”> </strong>
<strong data-bind=”text:lastName”></strong>
<br/><br/>
First Name :
<input type="text" data-bind=”value:firstName”/>
<br/>Last Name :
<input type="text" data-bind=”value:lastName”/>
</body>
<script type="text/javascript"
src="scripts/knockout-2.1.0.js" ></script>
<script type="text/javascript">
var MyViewModel = function(){
var self = this;
self.firstName = ko.observable('Lasantha');
self.lastName = ko.observable('Bandara');
};
var viewModel = new MyViewModel();
ko.applyBindings(viewModel);
</script>
</html>
The beauty of data biding is that as you edit the names in text
boxes, it is re￿ected on the heading.
Now we can bring the Model into the scene. Model represents
server side objects. Therefore you need to send an Ajax request to
the server to get the object in Json format and update the
ViewModel in the callback. Knockout will take care of the rest.
<script type="text/javascript">
var MyViewModel = function(){
var self = this;
self.firstName = ko.observable('Lasantha');
self.lastName = ko.observable('Bandara');
};
var viewModel = new MyViewModel();
ko.applyBindings(viewModel);
$.get('/api/person', function (items) {
$.each(items, function(index, item) {
viewModel.add(item.firstName, item.lastName);
});
},"json");
</script>
Here the back-end is developed with a Web API. You can use MVC,
Php, Ruby or any server side technology to implement the
back-end.
References:
http://blogs.msdn.com/b/dphill/archive/2009/01/31/the-viewmod-
el-pattern.aspx.
http://knockoutjs.com/.
Hello! Lasantha Bandara
First Name:
Last Name:
Hello! LasanthaBBB BandaraAAA
First Name:
Last Name:
LasanthaBBB
BandaraAAA
--Lasantha Bandara
Web Development to the Next Level
Rough Timeline of Web Technologies [1]
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Table less Web Design
2005 AJAX

2009 HTML 5
HTML5 = HTML + CSS + JS
HTML5 is a markup language for structuring and presenting
content for the World Wide Web, and is a core technology of
the Internet originally proposed by Opera Software. It is the
￿fth revision of the HTML standard (created in 1991 and
standardized as HTML4 as of 1997) and, as of August 2012, is
still under development. Its core aims have been to improve
the language with support for the latest multimedia while
keeping it easily readable by humans and consistently under-
stood by computers and devices (web browsers, parsers, etc.).
HTML5 is intended to subsume not only HTML 4, but XHTML 1
and DOM Level 2 HTML as well.
Following its immediate predecessors HTML 4.01 and XHTML
1.1, HTML5 is a response to the observation that the HTML and
XHTML is commonly used in the World Wide Web.
It is a mixture of features introduced by various speci￿cations, along
with those introduced by software products such as web browsers,
those established by common practice, and the many syntax errors in
existing web documents. It is also an attempt to de￿ne a single
markup language that can be written in either HTML or XHTML
syntax.
It includes detailed processing models to encourage more interoperable
implementations; it extends, improves and rationalizes the markup
available for documents, and introduces markup and application
programming interfaces (APIs) for complex web applications. For the
same reasons, HTML5 is also a potential candidate for cross-platform
mobile applications. Many features of HTML5 have been built with the
consideration of being able to run on low-powered devices such as
smartphones and tablets. In December 2011 research ￿rm Strategy
Analytics forecast sales of HTML5 compatible phones will top 1 billion in
2013.
JS for HTML 5
O￿ine / Storage
Realtime / Communication
File / Hardware Access
- Native Drag & Drop
- Desktop Drag-In (File API) - Drag ￿les in from the
desktop
- Desktop Drag-Out - Drag ￿les out onto the desktop:
- Geolocation
--Prasad Sandamal
www.exilesoft.com Exilee|11
Dec 2012
HTML for HTML 5
Speech Input

Google Chrome with the --enable-speech-input ￿ag
x-webkit-speech=“speech text"
New form types

- <input type="text" required />
- <input type="email" value="some@email.com" />
- <input type="date" min="2010-08-14"
max="2011-08-14" value="2010-08-14"/>
- <input type="range" min="0"max="50"value="10" />
- <input type="search"results="10"
placeholder="Search..." />
- <input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$"/>
- <input type="color"placeholder="e.g. #bbbbbb" />
- <input type="number" step="1" min="-5" max="10"
value="0" />
Form ￿eld types on mobile
- type="text"
- type="number"
- type="email"
- type="tel"
Audio + Video

- <audio id="audio" src="sound.mp3" controls>
</audio>
- <video id="video" src="movie.webm"
autoplay controls></video>
Canvas 2D/3D

- <canvas id="canvas" width="838"height="220">
</canvas>
Inline SVG

<svg>
<circle id="myCircle" class="important"
cx="50%" cy="50%" r="100"
fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</svg>
CSS3 for HTML 5
Selectors

- .row:nth-child(even) {background: #dde;}
- .row:nth-child(odd) {background: white;}
Speci￿c Attributes

- input[type="text"] {background: #eee;}
Webfonts

- @font-face {font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);}
Text Wrapping

-text-overflow: ellipsis;
Columns

-webkit-column-count: 5;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
Text Stroke
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 7.50px;
Opacity

color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);
Hue-Saturation-Lightness-Alpha

color: hsla( 255, 75%, 33%, 1.00);
Rounded Corners

border-radius: 10px;
Gradients

-webkit-gradient(linear, left top, left
bottom,from(#00abeb), to(white),
color-stop(0.5, white),
color-stop(0.5, #66cc00))
Shadows

text-shadow: rgba(64, 64, 64, 0.5)
box-shadow: rgba(0, 0, 128, 0.25)
Re￿ect

-webkit-box-reflect: below 0
-webkit-gradient(linear, left top,left bottom,
from(transparent), color-stop(0.5,
transparent), to(white));
12|Exilee www.exilesoft.com
Dec 2012
Background Sizing

background-size: contain;
Multiple Backgrounds

background: url(src/zippy-plus.png) 10px
center no-repeat, url(s-
rc/gray_lines_bg.png) 0 center repeat-x;
Border Image

-webkit-border-image: url(border_im
age_2.png) 40% round stretch ;
border-width: 50px;
Flexible Box Model

-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
Transitions

-webkit-transition: margin-left 1s
ease-in-out;
Transforms

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px);
Animations
@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
Why HTML5
How is HTML5 di￿erent than HTML as we currently know it?
- It's really the HTML we're all used to plus more elements.
- HTML5 has these really long algorithms that say: "Do this,
then this, then this, then this. And if you hit a problem,
here, do this other thing.“
What skills do developers need to take full advantage of HTML5?
- Developers need to know HTML5. They need to know
HTML + JavaScript + CSS.
How about designers?
- Designers need to know mark-up. They need to be able to
write CSS and understand web layout. And they need to
have at least a decent grasp of what JavaScript does.
HTML5 vs. Flash
- HTML5 itself and Flash are vastly di￿erent. They have
di￿erent things that they're trying to do. But the HTML5
plus CSS plus JavaScript package is more.
- Flash supports total environment. You can put things
on the screen and you can script it and you can de￿ne
interaction. And HTML5-CSS-JavaScript lets you do that as
well.
HTML5 capabilities in mobile devices
- GeolocationAPI, O￿ine web application support,
WebStorage, CSS3 Selectors and 2D animations are the
top ￿ve supported HTML5 features in mobile devices
- Misc. Element types and attributes, extended user
interaction concept, CSS3 in General, extended form
concept, and extended video / audio support are the top
￿ve partially supported HTML5 features in mobile devices
- Microdata, 3D animation rendering, FileReader API,
IndexedDB, and Local Device support or the WebWork
ers feature respectively are the top ￿ve HTML5 features
in mobile devices
- HTML5 compatibility on mobile and tablet browsers
HTML5 & CSS3 Cross Browser Support
www.exilesoft.com Exilee|13
Dec 2012
Your modern, popular browsers all support HTML5 (Chrome,
Firefox, Safari, IE9 and Opera)
HTML5 is being built to make things easier and more cross
browser friendly. In the older IE browsers that don’t support new
tags we can just simply add a JavaScript shiv that will allow them
to use the new elements:
Minimal e￿ort for bringing IE6, 7 and 8 up to the latest HTML5
technologies
Two ways to get your websites ready for Chrome Frame:
- Client side:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
- Server side:
X-UA-Compatible: chrome=1
Some resources worth checking out
http://www.html5rocks.com
http://html5doctor.com/
http://html5now.com/
http://en.wikipedia.org/wiki/HTML5
Some awesome HTML5 Demos
http://html5example.net/entry/examples/html5-exam-
ples-and-demos-collection-1
http://www.hongkiat.com/blog/48-excellent-html5-demos/
http://html￿ve.appspot.com/
http://html5demo.momac.net/
http://www.designer-daily.com/5-awesome-html5-dem-
os-6715
2022, or when will HTML5
be ready?
HTML5 is ready
Today
It's not 100% complete, but 99% of the elements
are in place.
HTML5 =Next Generation Features for
Modern Web Development

REST
as a WEB API
REST, yes most of us are aware of the term REST
(Representational State Transfer) and it is not a
latest technology that came in to the industry.
Most of us might say it’s a mode of communication
that happens between client and server in the
form of text. Is that it, No! There’s more to it. There
are Content negotiations, Caching, REST Usage
patterns, security etc. This article will discuss some
of the theoretical characteristics and key developer
considerations when it comes to REST. Those who
are novice to REST, this article will be a good start-
ing point and for the rest will be a good article to
consolidate their knowledge.
REST architecture has become a signi￿cant consideration as a WEB-API
in the industry. Most of the dominating giants in the industry (Google,
Amazon and Yahoo) depend on REST. REST is built on top of typical
client server architecture: The Client initiates a request to the server, the
server processes the request and sends a response to the client.
Requests and Responses enable to transfer the representation of the
resources over the wire. Representation of a resource portrays a
document which captures the intended state of a resource. Resource
state can be transferred across a wide range of clients.
From the developer perspective a REST WEB-API is an easy to use,
resource oriented model to expose services over the web. It is a simpler
alternative to SOAP and there is enough evidence to prove the
widespread acceptance in the industry. It has become an integral part
of Java™ 6 through JSR-311 even though it was introduced way back in
year 2000 by Roy Fielding.
REST relies on HTTP Methods
One of the key characteristic of REST services is that it relies on HTTP
methods explicitly. As a general design principle in REST, it uses nouns
in URI’s instead of verbs. Verbs are de￿ned by the HTTP protocol itself,
Namely GET, POST, PUT and DELETE. There is one to one mapping with
CRUD operations for each HTTP method. According to this mapping,
Create a resource on the server - POST
Retrieve a resource - GET
Change the state of the resource or update a resource – PUT
Remove or delete a resource – DELETE
14|Exilee www.exilesoft.com
Dec 2012
--Lahiru Perera
REST exposes resources via URI’s
Another main characteristic of REST is to expose services as URI’s. It
is a self-documented interface which requires less explanation to
developers and is easier to work with. To achieve this level of usabil-
ity you have to structure your resources in a directory hierarchy.
For example if it is required to extract the details of order items of a
particular order,
http://{host}/{context}/order/items/{order-id}
The root order has its items under itself, with item description,
quantity, unit price etc. In some cases URI can be altered to serve the
purpose. For example, if it is required to extract all the orders took
place on a particular day, URI may be altered as below.
http://{host}/{context}/order/orders/{year}/{month}/{day}
REST Response/Status codes
REST API communicates on HTTP explicitly. Clients consuming the
REST APIs should handle HTTP response codes. The response status
code indicates the success / failure of the HTTP request, and client
should handle the included response data. These are some of the
most common response status codes.
Success response codes
200 The request succeeded.
201 The resource was created.
202 The request has been accepted for processing.
204 The request has been processed and no content was
returned.
Redirect response code
301 Resource is moved permanently (New URI for the
resource will be sent in the Location ￿eld in the
response).
304 The resource was not modi￿ed. (Returned for conditional
GET when resource is not modi￿ed.)
Client error response codes
400 Invalid request. The request may be incorrect or bad
request, correct the request data, and try the invocation
again.
404 Resource not found for given request URI.
REST is stateless
To meet the high demand on performance in client server archi-
tecture, di￿erent service topologies come in to play, for example,
clusters of servers with load-balancing and failover capabilities,
proxies, and gateways etc. This will make a request to be forward-
ed from one server to another which is required to keep the state
of the request to response a consumer in a typical scenario.
State-full service design requires a lot of upfront consideration
because it introduces addition complexity and reduces perfor-
mance when synchronizing data and session across clustered
containers.
REST requests are independent and it includes HTTP headers,
body, request parameters, context and data needed by the server
component. Therefore intermediate servers may forward, route,
and load-balance without keeping state among servers. Design
and construction of REST services are less complex and perform
better. Also it gives more responsibility to the client to maintain
the state of the application of its own.
REST Resource Representations
Resource representation on REST architecture could be a typical
record in database or a XML Node in a XML document. One of the
design considerations of REST services is what format the data
should be communicated between the client and the server.
Client application has the ability to request its preferred content
type, by using the HTTP request header Accept with a list of
content types. These are some of the most common MIME types
and its corresponding Content types.
MIME Type Content-Type
JSON application/json
XML application/xml
HTML text/html
TEXT text/plain
Clients written in di￿erent languages and running in di￿erent
platforms can communicate with the server requesting di￿er-
ent Content-Type in the Accept header, in what is known as
“content-negotiation”. It will reduce the data type coupling
between the server and the consuming clients.
This characteristic of being dependent on HTTP methods not only
makes developer life easy but also brings lot of responsibility of
making use of these methods for correct purpose. HTTP GET is to
identify and retrieve a speci￿c resource or set of resources. But
there are instances it is used for unintended purposes, for
instance to trigger a transaction on the server (add / update
records), which leads will lead to lot of data inconsistencies.
Search engines and caching tools (crawlers) crawls links to
optimize the throughput of searching. This behavior will make
unintentional server side changes. Therefore GET is an operation
that should be free of side e￿ects, this property is also known as
“idempotence”.
www.exilesoft.com Exilee|15
Dec 2012
16|Exilee www.exilesoft.com
Dec 2012
Caching with REST
One of the signi￿cant bene￿ts of REST is the possibility of cach-
ing. Caching will reduce the bandwidth utilization and unneces-
sary IO for both client and server. Client side caching could be
achieved by either from “Expires” response header or Conditional
GET. Data cached using the “Expires” response header can be
used until the duration or the date expires. Conditional GET is for
more volatile data, Data which could change its state within a
short period of time. Conditional GET will obtain the payload if
the date is cached in the client is stale. If cached data is in the
same state, Client will be noti￿ed with response status code 304
by the server.
This will make less network bandwidth utilization. Caching related
(Conditional GET) example is included in “Scenario 2” under REST usage
patterns.
REST Usage Patterns
REST has a pattern when communicating with the server and perform-
ing CRUD operations, developers must adhere to these patterns to get
the maximum out of REST. Below example implementation is on JAX-RS.
You can simply create a JAX-RS project by executing the following
maven command in interactive mode.
mvn archetype:generate -D￿lter=org.apache.cxf.archetype:
For the example, content negotiation could be done by either JSON or
XML, to demonstrate this example patterns, JSON is considered. Let’s
take an “Order processing scenario” to elaborate more,
Scenario 1: Persist an order instance
Domain:
public class Order {
private String orderId;
private String customer;
private List<OrderItem> items;
private OrderStatus status;
private Date lastModified;

}
public enum OrderStatus {
CREATED,
ACTIVE,
CANCEL
}
The following diagram depicts the proper use and the sequence of the
communication that happens between client and server.


Client
Server
http://{host}/{context}/
{resource}

[HTTP/POST]

[HTTP Response Headers]

Status code: 201
Location: http://{host}/{context}/{resource}/###

http://{host}/{context}/{resource}/###

[HTTP/PUT]
Payload: Resource
[HTTP Response Headers]

Status code: 200


[
Order status
: CREATED]

[
Order status
:
ACTIVE
]

- Upon successful resource creation, client sends the payload to the server
as a PUT Request which updates the resource.
- Finally the server responds with the response code 200, on a successful
scenario.
Let’s experience the above REST pattern in reality,
- Client initiation
- Server Implementation for the POST handler and the server
response
@POST
@Path("/")
public Response createOder() {
/* Create an order instance and persist it in
database with CREATED status will not get
exposed to GET this instance until it get
ACTIVE status from HTTP PUT */

final Order order = createOrder();
try {
URI uri = new URI("http://localhost:8080/rest-ex
ample/order/" + order.getOrderId());
return Response.created(uri).build();
}
catch (URISyntaxException e) {
Response.serverError().build();
}
return Response.noContent().build();
}
Scenario 2: Query order instance (Conditional GET)
The above diagram depicts the communication that happens
between client and server on a conditional GET.
- Client initiates communication by requesting a resource by GET,
requests the URI which represent the resource and resource id.
- Server responds with the requested resource and Etag response
header. That is the unique identi￿er of the representing resource, the
client keeps track and use it when requesting the same resource next
time.
- When client request the same resource again, the server should send
the Etag as part of the request header under “If-None- Match” header.







Client

Server
http://{host}/{context}
/{resource}/###

[HTTP/GET]

[HTTP Response
Headers]

Etag: #########

http://{host}/{context}/{resource}/###

[HTTP /GET]

[Request Headers]
If
-
None
-
Match: #########


[
Payload
:
Resource
]

[Evaluate Etag]

If Match [RC: 304] Else [Payload]


[HTTP
Response Headers]

Status Code: 304


[HTTP Response Headers]

Etag: ######### (New Etag)


[
Payload
:

New Resource
]

www.exilesoft.com Exilee|17
Dec 2012
Status Code: 201
Date: Wed, 07 Nov 2012 06:31:05 GMT
Content-Length: 0
Server: Apache-Coyote/1.1
Location: http://localhost:8080/rest-exam
ple/order/4bf0f045-64b5-4f4f-b7b7-d82d52e520a4
- Client updates resource with the JSON payload
- Server Implementation for the PUT handler and the server
response
@PUT
@Path("/{orderId}")
@Consumes({MediaType.APPLICATION_JSON,
MediaType.APPLICATION_XML})
@Produces({MediaType.APPLICATION_JSON,
MediaType.APPLICATION_XML})
public Response updateOrders(Order jsonOrder,
@PathParam("orderId") String orderId) {
Order domainOrder = orderDao.get(orderId);
if (domainOrder == null) {
return Response.status(Status.NOT_-
FOUND).build();
}
/* Update the Order instance and change its
status to ACTIVE */
updateOrder(domainOrder, jsonOrder);
return Response.ok().entity(domainOrder).build();
}
Status Code: 200
Date: Wed, 07 Nov 2012 06:40:13 GMT
Transfer-Encoding: chunked
Server: Apache-Coyote/1.1
Content-Type: application/json
{
“lastModified”: 1352270413324,
“status”: “ACTIVE”,
“orderId” :
“4bf0f045-64b5-4f4f-b7b7-d82d52e520a4”,
“customer” : “Jhon Kent”,
“items”[{
“lastModified”: 1352270413324,
“description”: “new item”,
“itemId” : “1”,
“qty” : 5,
}, {
“lastModified”: 1352270413324,
“description”: “old item”,
“itemId” : “2”,
“qty” : 7,
}]
}
- Server evaluates the Etag and if matched (resource state has not
changed) responds with the response status code 304, if not
responds with the resource in new state along with the new Etag.
Let’s experience the above REST pattern in reality,
- Client initiates GET
- Server Implementation of HTTP GET and server response
@GET
@Path("/{orderId}")
@Produces({MediaType.APPLICATION_JSON, Media-
Type.APPLICATION_XML})
public Response getOders(@PathParam("orderId")
String orderId, @Context UriInfo uri, @Context
Request request) {
final Order order = orderDao.get(orderId);
/* Etag to identify the cache entity -
[order-id]-[last-modified-date] */
final EntityTag tag = getEntityTag(order);
final ResponseBuilder responseBuilder =
request.evaluatePreconditions(tag);
if (responseBuilder != null) {
return responseBuilder.build();
}
return Response.ok(order).tag(tag).build();
}

Status Code: 200
Date: Wed, 07 Nov 2012 10:03:34 GMT
Transfer-Encoding: chunked
Server: Apache-Coyote/1.1
ETag: “4bf0f045-64b5-4f4f-b7b7-d82d52e520a4-
1352270413324”
Content-Type: application/json
- Client initiates the subsequent GET
- Server response if resource state has not changed
Status Code: 304
Date: Wed, 07 Nov 2012 10:48:05 GMT
Server: Apache-Coyote/1.1
ETag: “4bf0f045-64b5-4f4f-b7b7-d82d52e520a4-
1352270413324”
References
http://docs.oracle.com/cd/E24329_01/web.1211/e24983/develop.htm
http://docs.oracle.com/javaee/6/tutorial/doc/gkqda.html
http://www.ibm.com/developerworks/webservices/library/ws-restful
LINQ
Microsoft introduced LINQ with.NET 3.5 in 2007. At this time I
was developing an algorithmically intense astrology application
for a local client. I had a hard time on implementing some of the
logic. Luckily I got some hints about LINQ while during a tea
break chat. That made me curious to explore LINQ. The number
of lines to implement some algorithm quickly, shrank
dramatically with the use of LINQ. LINQ made my life easier while
developing the astrology application and helped me deliver the
product on time.
As of now it has been 5 years since the introduction of LINQ.
Despite the length of time, programmers have not taken advan-
tage of this method to spend more time in the hammock and
less time behind the keyboard. But LINQ remains one of the less
used features in .NET. The objective of this article is to revisit
some of the interesting sides of LINQ and revitalize the use of
LINQ by.NET developers. Figure 1 shows a bird’s eye view of
LINQ. This article only focuses on LINQ to objects. For the best
use of this article you should try all the examples in Visual Studio.
Method Queries
18|Exilee www.exilesoft.com
Dec 2012

Figure 1
Why you should learn LINQ?
It’s all about getting work done with fewer lines of code. Hide
the internal complexity of your problems. Let’s write syntax
which is friendlier towards human users. Finally it’s all about
productivity.
How simple is to learn LINQ?
LINQ was introduced to make our coding e￿ort much easier.
Why is it still not more popular? One reason I can see, the syntax
is very di￿erent from conventional C# or VB.NET coding. For me
it took few hours of coding to get my ￿rst Method Queries to
work on object collections. Let’s examine Method Queries and
Query expressions.
Query Expression and Method Query
You can write LINQ queries primarily in two ways, using Query
Expressions and Method Queries. Query expressions are much
similar to SQL statements and the learning curve is not steep.
For example if you wanted to ￿nd the user whose email address
is dco@exilesoft.com, and to select the Mobile number, you
could write the following Query Expression.

DataTable userDataTable = new DataTable();
userDataTable.Columns.Add("ID", typeof(int));
userDataTable.Columns.Add("Name",
typeof(string));
userDataTable.Columns.Add("Email",
typeof(string));
userDataTable.Columns.Add("MobileNumber",
typeof(string));

userDataTable.Rows.Add(1, "Petter Andersson",
"pan@exilesoft.com", "0112 222222");
userDataTable.Rows.Add(1, "Cornelius Dickson",
"dco@exilesoft.com", "0112 111111");
userDataTable.Rows.Add(1, " Johan Eriksson",
"ejo@exilesoft.com", "0112 333333");
userDataTable.Rows.Add(1, "Julia Galming",
"jga@exilesoft.com", "0112 555555");
This is how we would ￿nd “dco@exilesoft.com” with query syntax:

var queryExpression =
from r in userDataTable.AsEnumerable()
where r.Field<string>("Email") ==
"dco@exilesoft.com"
select r.Field<string>("MobileNumber");

Alternatively, we can use method syntax to achieve the same thing:
var methodExpression =
userDataTable.AsEnumerable()
.Where(dr => dr.Field<string>("Email") == "dco@ex-
ilesoft.com")
.Select(dr => dr.Field<string>("MobileNumber"));
There is no semantic di￿erence between method syntax and query
syntax. Some queries, such as those that retrieve the number of
elements that match a speci￿ed condition, or that retrieve the
element with the maximum value in a source sequence can only be
expressed as method calls. I personally recommend using Method
query because it’s easier to write with the help of intellisense.
Here are a few examples you can try out yourself. Make sure you have
included the following libraries.
using System;
using System.Linq;
Zip
Associate an array of consulting companies with their rank in a paral-
lel array. In order to spice it up the following example blends
Test-Driven Development approach with Fluent Assertions.
using System;
using System.Linq;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using FluentAssertions;
[TestClass]
public class LinqDemoTest
{
[TestMethod]
public void Intersection()
{
string[] consultingFirms = { "McKinsey &
Company", "A.T. Kearney", "KPMG LLP", "Accenture",
"Capgemini" };
int[] ranks = { 1, 16, 13, 11, 23 };
var consultingFirmsRanks = consulting-
Firms.Zip(ranks,(company, rank) => company + " "
+
rank);
//Fluent Assertion
consultingFirms.Zip(ranks,(company,
rank) => company + " " + rank).Should().ContainInOr-
der(
new string[] { "McKinsey & Company 1",
"A.T. Kearney 16","KPMG LLP 13", "Accenture 11",
"Capgemini 23" });
}
}
Dec 2012
www.exilesoft.com Exilee|19
--Cornelius Dickson
Intersect

Find objects present in both collections.
var firstList = new string[] {"Java", "Python",
"C#", "VB.net", "Lisp" };
var secondList = new string[] { "Java","JavaS-
cript", "Perl","VB.net", "Ruby " };
var intersectResults = firstList.Intersect(secon-
dList);
foreach (var item in intersectResults)
Console.WriteLine(item);
SkipWhile
Find the rest of the collection after a condition has been ful￿lled
string[] names = { "Jackson", "Judeson",
"Dickson", "Samson", "Johnson", "Robinson" };
foreach (var name in names.SkipWhile(s =>
s.ToLower().StartsWith("j")))
Console.WriteLine(name);
//Dickson
//Samson
//Johnson
//Robinson
Except
Remove from a collection the objects in another collection.

int[] numbersA = { 0, 2, 4, 5, 6, 8, 9 };
int[] numbersB = { 1, 3, 5, 7, 8 };
var OnlyFromA = numbersA.Except(numbersB);
foreach (var n in OnlyFromA)
Console.WriteLine(n);

//0
//2
//4
//6
//9
Join
Connect two objects together based on a “foreign key”.
using System;
using System.Linq;
class Program
{
static void Main()
{
var orders = new[]
{
20|Exilee www.exilesoft.com
Dec 2012
new {ID = 5, Product = "Book",CustomerId=1},
new {ID = 6, Product = "Game",CustomerId=2},
new {ID = 7, Product = "Computer",CustomerId=3},
new {ID = 8, Product = "Shirt",CustomerId=4}
};
var customers = new[]
{
new {ID = 1, Name = "Iresh"},
new {ID = 2, Name = "Adipa"},
new {ID = 3, Name = "Julian"},
new {ID = 4, Name = "Shihan"}
};
var customerOrders =
customers.Join(orders,
customer =>customer.ID,
order => order.CustomerId ,
(customer, order) =>
new { Name = customer.Name, Product =
order.Product });
foreach (var item in customerOrders)
Console.WriteLine("{0} bought
{1}", item.Name, item.Product);

//Iresh bought Book
//Adipa bought Game
//Julian bought Computer
//Shihan bought Shirt
}
Are you comfortable with the lastMethod Query to obtain the
result for customerOrders?
“Join” method joins the orders collection with customers collec-
tion based on keys CustomerId, ID of the orders, customers anony-
mous types. The “new” keyword after “Join” method is used to
create an anonymous type object with properties Name, Product.
Above sample code only shows a few methods exposed in the
IQueryable Interface provided by the System.Linq. If you familiar-
ize yourself with the IQueryable interface you will ￿nd many tricks
that will make your coding more sweet, brilliant, fun, easy and
productive!.
References:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=727
http://www.dotnetperls.com/
http://￿uentassertions.codeplex.com/
He, who wanted to star� his life as a wood cutter, bought an axe
and went to the jungle. He ear�ed money by selling t�ees that he
cuts. He wanted to be rich, so he worked hard to achieve his goal.
When days t�r�ed to weeks and weeks to months, his productivit�
went down. The amount of wood he collected each day star�ed to
decrease day by day. But he worked more hours till his hands hur�
but he was barely able to achieve his margin. He couldn’t collect as
much wood as he did in the beginning.
One day he thought, “If I continue like this, I won’t be able to
achieve my goal”. Then he sat on a fallen t�ee and wondered what
had gone wrong. Aha… His enemy was right in front of him. His
productivit� was low due to his own fault. He realized that he was
only concer�ed about his out�ut. He hadn’t spared a thought for
the tools he used in his work. He quickly shar�ened the axe and
star�ed to cut the t�ees. He realized that productivit� was not based
on his effor� alone but also on the improvement he made.
You may have heard of this stor� but have you taken this lesson to
hear�? Do you act in a similar manner in your own career? Think
about it.
1. Are you always busy with your job, completing your tasks?
2. Do you also complain you don’t have time to improve your
career?
If so you could end up being less productive. It’s t��e we all have plent�
of work each and ever� day. But be wise enough to manage your work
while spending few minutes to develop your skills. If not you will
become a person with obsolete knowledge. On that day even your
employer will not acknowledge the work you did. They will blame you
for your redundant knowledge.
Let’s say you are given 86 400 r�pees ever� day. If you spend it all
without saving any, at the end you will have nothing leſt. Imagine this
86 400 as seconds you are blessed with ever� day. If you just waste it
without doing any�hing for your career, you are not investing in your
f�t�re.
Just think about it and spare few minutes ever� day to enhance yourself.
Be a person who cont�ibutes something towards your career ever� day.

Too Busy Chopping
Wood to Sharpen
the Axe?
Ovini Poor�ima
the Stor��eller
www.exilesoft.com Exilee|21
Dec 2012
Talking Beyond Borders
Online Interview with Jim Benson by Thushara Wijewardena
Either we are Plain busy or Super busy, it’s important to get our day
to day work organized in such a manner that we will be able to
ful￿ll our most prioritized commitments in our personal lives
without disturbing the other priorities in our professional lives.
Having a 5-year-old kid and working in a demanding profession,
which includes frequent travelling, I always ￿nd myself getting
messed up with many tasks that I have to ful￿ll based on its real
sense of priorities.
Usually, I ￿nd myself committing to many things without consider-
ing my capacity to deliver, either it is an invitation to talk at a
conference or even a simple help to a friend or a relative. I found
myself getting over stressed at times due to these extra commit-
ments I’ve made without thinking too much about my priorities
and capacities.
So its no secret that I need to be more organized. My tasks need to
be prioritized; they should be visible to me all the time so I know
my capacity. Sometimes they need to be shared among my family
members too. One thing was clear., I need to be more methodical.
But should I practice a method like KANBAN in order to get my
day-to-day life organized?
I didn’t think of “Personal KANBAN” that seriously until I found
many people talking about Personal KANBAN at many confer-
ences I travelled to. Then I realized that some of my colleagues at
Exilesoft have read the book “Personal KANBAN” by Jim Benson
and applied such concepts in their day-to-day lives.
which made me to read the book and try it out to get my work organized a bit.
After reading the book, Personal KANBAN, I thought of interviewing its author Jim Benson on behalf of my colleagues at Exilesoft. So
here is the Interview with Jim Benson (Author of Personal KANBAN) by Thushara Wijewardena.
My colleague, Shamira had an interesting discussion
with me over a co￿ee about how he implemented
personal KANBAN to organize his domestic activities,


     
     
   , , 
.     ,
      
.    
   . 
      
      
     
.
    , 
     .
 , ’     
  .    
,   “ ” 
     
. , ’    
       
.
  ,      ,
     
  
22|Exilee www.exilesoft.com
Dec 2012
REST is stateless
To meet the high demand on performance in client server archi-
tecture, di￿erent service topologies come in to play, for example,
clusters of servers with load-balancing and failover capabilities,
proxies, and gateways etc. This will make a request to be forward-
ed from one server to another which is required to keep the state
of the request to response a consumer in a typical scenario.
State-full service design requires a lot of upfront consideration
because it introduces addition complexity and reduces perfor-
mance when synchronizing data and session across clustered
containers.
REST requests are independent and it includes HTTP headers,
body, request parameters, context and data needed by the server
component. Therefore intermediate servers may forward, route,
and load-balance without keeping state among servers. Design
and construction of REST services are less complex and perform
better. Also it gives more responsibility to the client to maintain
the state of the application of its own.
REST Resource Representations
Resource representation on REST architecture could be a typical
record in database or a XML Node in a XML document. One of the
design considerations of REST services is what format the data
should be communicated between the client and the server.
Client application has the ability to request its preferred content
type, by using the HTTP request header Accept with a list of
content types. These are some of the most common MIME types
and its corresponding Content types.
MIME Type Content-Type
JSON application/json
XML application/xml
HTML text/html
TEXT text/plain
Clients written in di￿erent languages and running in di￿erent
platforms can communicate with the server requesting di￿er-
ent Content-Type in the Accept header, in what is known as
“content-negotiation”. It will reduce the data type coupling
between the server and the consuming clients.

.    
  
  
.   

           -- 
  .  2005,         
 . ’           
        .
 ,         ,    
.            , 
  ,     ,      .
        .

! ,             
  ;          ,  
      -- .
     

 !

,          . 
         
         
“”  ’   .  ’
      ’ 
-     .  
 ’       

      .     
     , .   
 -- ()  –     
   .

   !.    -
  .    
   ().   
      “”
  .
(     . 
   9  :) ).
   

,   “     ” ,    
 ’          . ’ 
    . ,        ’ 
        ’  
,           .   
    .
,      –        .         :


–      ()       


–       (              
)   .    ,            
’       .


–         .            ’
 –           .
• Kill it
–             ’    .
www.exilesoft.com Exilee|23
Dec 2012

.       
     . ..
.      
       
        :)

’           . 
      ,          
 .      –   
 .       ,    .
       .   
    .        –
  ,     .
    –       ,
        .

     
,      
;     
    
  . 
     
      
  .  .
’    
   
 

       .   
, ,        
 .            ,
        .    , 
           
.
   ,  -,     ,    ,    ,   
,      - ,     ,     ,  
,   .          -.
                .    
         .             
      .        ,    ,
       .      , 24   .
,       ,  ’  –   .

 ..     
.
    
     
   
 ,     
    

!
24|Exilee www.exilesoft.com
De c 2012

     -
  ,   
   .  , 
      
 .   ,  
 ; ’    
     .
        
     
  ’  
   

    .         
 --   .   ,    
 , ’       –  
 –          
.
       .   ,
     .       
    100%     . “”
        .
 ,        ,           .  
         ’       .    
      ’     .         
                 .
      .          
      .         
  .
         ,            -
   –       ,   .
 ,       – ’ .

   .  
    .  
      
  

,       .  , ,  
’          .      
   .
  , ’         – 
    .         
    .

!      :)
        
.    
    
. ’  
    

     
    
   .  
 :
www.exilesoft.com Exilee|25
Dec 2012
1. Set up a Personal KANBAN

Ready | Doing | Done -> The simplest Personal Kanban
In this Personal Kanban we have the items to discuss, what we are
currently discussing, and the discussed columns.
This provides a structure for the conversation. Next we populate it
[1]
People all gets pads of post-it notes and a pen. They then start to
add their topics for conversation into the “to discuss” column.
These can be literally whatever people want to discuss or follow a
theme. Right now, we want to encourage as many unique ideas as
we can. When the ideas start to reach a certain point (and you’ll be
the best judge of when that is), each topic gets a 1 to 2 sentence
introduction. This way, people know what to vote for. [1]
2. What to Discuss
People add in their own topics
Each participant gets two votes. You can vote twice for the same
thing or for two di￿erent topics. Simple put a dot on the sticky you
are interested in. Tally the dots. Then you are ready to have a
conversation.[1]
3. Vote and Talk
A Late Night Lean Co￿ee in Stockholm

  -
   
.  
 


          2009.     
       –   ’    
         .   
      .
    ,     100   . 
       .
26|Exilee www.exilesoft.com
Dec 2012
This is how we would ￿nd “dco@exilesoft.com” with query syntax:

var queryExpression =
from r in userDataTable.AsEnumerable()
where r.Field<string>("Email") ==
"dco@exilesoft.com"
select r.Field<string>("MobileNumber");

Alternatively, we can use method syntax to achieve the same thing:
var methodExpression =
userDataTable.AsEnumerable()
.Where(dr => dr.Field<string>("Email") == "dco@ex-
ilesoft.com")
.Select(dr => dr.Field<string>("MobileNumber"));
There is no semantic di￿erence between method syntax and query
syntax. Some queries, such as those that retrieve the number of
elements that match a speci￿ed condition, or that retrieve the
element with the maximum value in a source sequence can only be
expressed as method calls. I personally recommend using Method
query because it’s easier to write with the help of intellisense.
Here are a few examples you can try out yourself. Make sure you have
included the following libraries.
using System;
using System.Linq;
Zip
Associate an array of consulting companies with their rank in a paral-
lel array. In order to spice it up the following example blends
Test-Driven Development approach with Fluent Assertions.
using System;
using System.Linq;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using FluentAssertions;
[TestClass]
public class LinqDemoTest
{
[TestMethod]
public void Intersection()
{
string[] consultingFirms = { "McKinsey &
Company", "A.T. Kearney", "KPMG LLP", "Accenture",
"Capgemini" };
int[] ranks = { 1, 16, 13, 11, 23 };
var consultingFirmsRanks = consulting-
Firms.Zip(ranks,(company, rank) => company + " " +
rank);
//Fluent Assertion
consultingFirms.Zip(ranks,(company,
rank) => company + " " + rank).Should().ContainInOr-
der(
new string[] { "McKinsey & Company 1",
"A.T. Kearney 16","KPMG LLP 13", "Accenture 11",
"Capgemini 23" });
}
}


’ !     !         ,        
  . ’ !
       .  , ’             
.            ,       ,  
   
                 .     
  ’          . ,       
               .
 ,               .      
        .
 ,                   :
•General Lean Coffee
–      -.     ,        
 ,          .

•Lean Coffee Working Sessions
–            .    
   “    .”              
.             , ,      
.
’            ’  ,     . 
            ,    .       
   .

  
!    
  . 
    

    , .    
, ’    .
 2011    250,000  . 
     . ,   
      .
, ’       ‘ 
’ :)
References:
[1] Lean Co￿ee - http://leanco￿ee.org/

  .    
   !   
       
    .  
     
.      
 !

 , 
  .
www.exilesoft.com Exilee|27
Dec 2012
360
HR Head
Interviewee
Interviewer
Perspective
Academic Head
"There’s an insatiable need for more and better software around the
world. Our customers desire smart people who care both about the
business of the customer and about the technical details of the
software. As a software professional from Sri Lanka, you have a unique
opportunity to participate in this field which touches all aspects of
people’s lives”
- Johannes Brodwall (Chief Scientist, Exilesoft)
Dec 2012
What I think about Interviews
There are lots of job opportunities, but still getting one is not so
easy. Only around 5% of people get through interviews. Why
some make through while others don’t, what are the companies
looking out for?
Well, an interview is a most important phase of our job seeking
process. Resume is the ￿rst document which helps the applicant
to get into the interview process. At the interview, the panel
clari￿es information provided by the applicant in the resume
and asses the suitability of the applicant for the job. Once
satis￿ed the validity and truthfulness of information provided is
veri￿ed. However, even though you have lot of quali￿cations, if
you can’t convince that to the interview panel, you will fail :( . So
communication is the most important part in an interview. In
this article, most of your questions about interviews will be
discussed. So ￿rst let’s dig deep into it with our interview experi-
ence at Exilesoft :) .
Sharing my Experience
On the day of my interview, I made it a little early to Exilesoft.
Even though I have gone to several interviews, I was little bit
nervous that day. There were also several batch mates of mine
who have come for the interview to be interviewed by di￿erent
interview panels and we were all warmly welcomed by Exilees.
Waiting for your turn was increasing the nervousness and the
refreshments served at this time was ideal at a situation like this.
It was my turn and the panel welcomed me with smile on their
faces and that helped me to be a little relaxed. Then they asked
me to tell about myself. As I talked, my nervousness faded away.
Thereafter, they questioned about my skills and competency
into projects and technical areas.
I have been to several companies for interviews and had a lot of
experience in this subject. However it is very sad to say that in
some companies, when the interview panel gets a point where
we do not have much knowledge in that area and fail to answer,
they try to let us down by questioning more and more on that
area. In my opinion, in such situations interviewers must be
knowledgeable about the level of stress the candidate is going
through and help the candidate to ease the situation and
answer well rather than making it an experience of failure. I
appreciate Exilesoft interview panel for not doing such things,
at least when I was interviewed :) .
After ￿nishing my interview and when looking at the faces of
my interview panel, I was very much con￿dent that I would be
selected for the job. They were really happy to have me and so
was I. At the end of the interview they mentioned some points
which were very useful to my career. They mentioned what I was
really good at, and things I should improve on which was
valuable feedback for me.
Some of my thoughts
We hear applicants saying…“Oh my god, I have an interview this
Friday. I’m not prepared yet.” “I was so excited on my ￿rst
interview and failed to answer so many questions which I could
have easily answered”. There were many tips that I followed
when I was preparing myself for interviews.
This actually worked for me, and it helped me to get the job at
Exilesoft :) . So I think this is probably going to help you too.
What should I wear?
“I have a white, ocean blue, light green long sleeve shirts and black
and brown trousers. What should I wear for my interview? Or does it
matter since I am a guru?” You may have all these questions like I had,
when I was preparing for my ￿rst interview. Remember whether you
like it or not, your personal out￿t will counts, as this is the ￿rst impres-
sion you make. Therefore select your out￿t carefully.
How should I prepare?
First thing you should do in preparation for your interview is to go
through your resume and make a note of the projects and technolo-
gies that you have mentioned there. Then you should get prepared to
explain any part related to those projects very well. If you can explain
them using concepts like OOP and design patterns you get some
extra points. Always be prepared with some example while you
explain them, this will convince the interviewer that you truly under-
stand the concept. If you are unable to explain what you have done in
projects that you have mentioned in your resume, then it will be a
negative mark on you.
Do some online research on technologies you have mentioned in the
resume. You can search for interview questions from speci￿c areas
and ￿nd out many answers there.
What to DO and what NOT to do?
Con￿dence in yourself is a key to every interview you face. You have
to convince that you have a great potential and you are the most right
candidate for this job.
• The common question you face it to express about yout self. Reveal
some facts which are not in your resume without repeating what is
already there. Adding something interesting that will make them
smile will give you a good start.
• Another common but harder question is telling about your
long-term goal. Even if you are not sure about your long term goal at
this point, make sure you answer this in your career oriented way.
• Listen well to the interview panel.
• Use correct language with professional jargon, which will convince
the interviewer about your communication skills.
• Keep the right attitude in mind. Don’t sound desperate. Be confi-
dent but not overcon￿dent.
• Be tactful when you answer. For an example, if you are asked to
explain about a project, ￿rst give an overview of the project. Stress on