Simple accordion on your website

Hey guys! Do you know about details and summary HTML5 tags?

This creates a simple accordion on your website. It si simple and elegant, isn't it?

Example:

JavaScript

JavaScript (/ˈdʒɑːvəˌskrɪpt/),[10] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[11] JavaScript is high-level, often just-in-time compiled and multi-paradigm. It has dynamic typing, prototype-based object-orientation and first-class functions.

Node

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm,[6] unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts.

Lookup map in JavaScript

Hey guys! Do you know if statement? Of course yes! But do you know lookup map? It's an elegant way to solve a multiple conditions.

Instead of using if..else, switch, we can define in advance a lookup table of values based on certain key.

Let's look at an example:

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"
...