Scalable authentication service

Modern applications should be vertically scalable. In this case, we use a load balancer, which forwards requests to individual nodes. Each node can be one application. The data is stored in a database that replicates between nodes. Almost any database engine - SQL and NoSQL - allows you to replicate a database. However, the most suitable for replication are modern NoSQL databases such as Redis, Amazon SimpleDB, MongoDB.

If your application uses Sessions stored in a database, you will need to share the database between nodes. For applications that will scale vertically, it is better to use a different way of holding user information.  For example, a JSON Web Tokens.

JWT have been introduced as a method of communicating between two parties securely. Even though you can use JWT with any type of communication method, today JWT is very popular for handling authentication and authorization via HTTP.

How JSON Web Tokens work

Simply put, you take the data and create a fingerprint from it. You attach the fingerprint to the data and send the data. The recipient receives the data, creates a fingerprint from it and compares it with your fingerprint. If the fingerprints are the same, the data are valid.

There are more details. The token is divided into three blocks: header, payload and signature. The header contains information about the encryption algorithm used. Payload may contain additional information, such as creation time and expiration time. But it mainly contains data.In the case of authentication service, the data is about a user. For example email, name, id. The last part contains the signature. The entire token is base64 encoded.

Token

Pimp

The Pimp is lightweight authentication server based on JSON Web Token under the MIT licence. It is written in JavaScript on the NodeJS engine. It uses MongoDB to store data. In addition to the public API, it includes user management, token management, and event logging.

Public API

• POST /api/v1/login 
• POST /api/v1/refresh

For more details, please visit the project at the Github.

How to use Flexbox in Bootstrap

As I wrote earlier a flexbox is a toll for building layouts with CSS. It is one-dimensional layout compared to CSS Grid. Bootstrap v.4 used flexbox for building layout too. Therefore, if you use the Bootstrap grid in your projects, it is good to know the basic concepts of this tool.

The main element is refered as flex container, and the elements inside it are flex items. 

Applying clipping to elements in CSS

The clip property is deprecated now. The new, recommend version of applying clipping to elements in CSS is clip-path.

Clip property has two significant weaknesses:

1. Element has to be positioned as absolute.
2. Clip can only do rectangles.

The clip-path property solves the weaknesses. The clip-path property can be applied to all HTML elements and SVG container elements. The clip-path property takes any graphical element from SVG or basic shapes from CSS and uses them as clipping region.

The clip-path property do not require any SVG markup. You can use basic shapes from CSS. They were added to clip-path to provide easy shorthand functions for simple clipping operations.

• inset(top right bottom left [ round border-radius ]?)
• circle(r? [ at position ]?)
• ellipse(rx ry? [ at position ]?)
• polygon(x1 y1, x2 y2, ..., xn yn)

Animating/Transitioning clip-path

Basic shapes can be animated. The following example uses hover effect. Animation of basic shapes works fine when it is applied to the same shape.

Resources

Clippy - CSS clip-path maker

Iterator methods of Array in JavaScript

In this post I will summarize iterator methods of Array in JavaScript. Programmers often forget that these useful functions are part of the language and mindlessly connect third-party libraries.

Iterator methods apply a function to each element of an array, either returning a value, a set of values, or a new array after applying the function to each element of an array.

---

Non Array generating iterator methods

forEach()

The forEach() method takes a function as an argument and applies the called function to each element of an array.

function square(num) {

print(num, num * num);

}

var nums = [1,2,3,4,5,6,7,8,9,10];

nums.forEach(square);

every()

The every() method applies a Boolean function to an array and returns true if the function can return true for every element in the array.

function isEven(num) {

return num % 2 == 0;

}

var nums = [2,4,6,8,10];

var even = nums.every(isEven);

if (even) {

print("all numbers are even");

}

else {

print("not all numbers are even");

}

some()

The some() method will take a Boolean function and return true if at least one of the elements in the array satisfies the condition of the Boolean function.

function isEven(num) {

return num % 2 == 0;

}

var nums = [1,2,3,4,5];

var someEven = nums.some(isEven);

if (someEven) {

print("some numbers are even");

}

else {

print("no numbers are even");

}

reduce()

The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) has to reduce it to a single value.

function add(previousValue, currentValue) {

return previousValue + currentValue;

}

var nums = [1,2,3,4,5,6,7,8,9,10];

var sum = nums.reduce(add);

print(sum); // displays 55

reduceRight()

The reduceRight() method which works similarly to reduce(), only working from the righthand side of the array to the left, instead of from left to right.

function concat(accumulatedString, item) {

return accumulatedString + item;

}

var words = ["the ", "quick ","brown ", "fox "];

var sentence = words.reduceRight(concat);

print(sentence); // displays "fox brown quick the"

---

Iterator methods that return a new Array

map()

The map() method works like the forEach() method, applying a function to each element of an array. The difference between the two methods is that map() returns a new array with the results of the function application.

var numbers = [1, 4, 9];

var doubles = numbers.map(function(num) {

return num * 2;

});

// doubles is now [2, 8, 18]. numbers is still [1, 4, 9]

filter()

The filter() method works similarly to every(), but instead of returning true if all

the elements of an array satisfy a Boolean function, the method returns a new array

consisting of those elements that satisfy the Boolean function.

function isBigEnough(element) {

 return element >= 10;

}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]

Passing Environment Variables

In this blog I show you how to set ssh and sudoers for passing environment variables on Linux machines. We use it to set the name of the administrator who commits the changes to the repository (see gitkeeper).

Example

Client side

~/.bashrc
...
export GIT_AUTHOR_NAME="Tomas Jurman"
...

~/.ssh/config
...
SendEnv GIT_*
...

Server side

/etc/SSHD_HOME/sshd_config
...
AcceptEnv GIT_*
...

/etc/sudoers
...
Defaults        env_reset
Defaults        env_keep +="GIT_AUTHOR_NAME"
...

Responsive images

In this post I summarize the techniques used for a responsive images. None of the existing techniques are not perfect. On the client side was released a new specification which combines together all the previous techniques.On the server side are arising new techniques and solutions of third parties.

Client side

• srcset attribute
• src-N attribute
• picture element

Server side

• Based on HTTP headers (User agent, ...) server sends the correct version of the image. (see src.sencha.io, Adaptive Images, ... )

Curent state (september 2014)

• srcset + src-N + picture = new specification based on Picture element

Example

Browser support for Picture element is weak, but you can use the polyfill. Picture Fill has recently been updated to 2.0. and you can use the actual syntax.

Grunt Responsive Images

If you are using Grunt certainly appreciate grunt-responsive-images plugin.

Git - post commit hook

Git Hooks is powerful tool for customizing Git. In this post we created custom post-commit hook, that send email after every new commit.

Client side hooks

• pre-commit is called before a commit occurs.
• prepare-commit-msg lets you edit the default message before the editor is fired up; it's useful in automated commits to add some context.
• commit-msg is the last step where you can interrupt a commit.
• post-commit is executed after a commit is completed, for notification purposes.
• post-checkout you can use it to set up your working directory properly for your project environment.
• post-merge you can use it to restore data in the working tree that Git can’t track, such as permissions data.

Server side hooks

• pre-receive can be used to check and interrupt the receival of the new commits, if it is the case.
• post-receive notifies that commits have been published on this repository.
• update is a version of pre-receive that is run once per each different branch.
• post-update is a notification activated after all references have been updated; the default hook updates some metadata to let the repository be published via HTTP.

For detailed description and other not mentioned hooks go to git documentation.

There are already published some post-receive hook for sending email after push new data to server (1, 2, 3).  

Send emails after commit on the client side is not typical use case. On Linux servers we let store the /etc in a Git. After changing the configuration we commit changes to ( for the server local ) git repository. After every configuration changing we want to notify the other administrators. We use the following post-commit hook:

After copy a new post-commit file to .git/hooks don’t remember reinit git:

#git init