Thursday, December 30, 2021

Playing with async function

 Async/ await is cool feature in JavaScript. Much has been written about it. In this post I would like to show how to resolve more independent async functions calls.

Let's have a simple promise call. It takes 1 second.

Now we will call the function multiple times using await. It takes aproximately 10 seconds.

When our asynchronous function is independent, it is useful to use Promise.all() instead of await. It fulfilled all promises in time approximately 1 second.

Thursday, December 23, 2021

Javascript closures and recursion

What is a closure?

A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables.

I think, that closures are very handy for recursive call.

What is a recursion?

Simply said, the process in which a function calls itself.

When you create a recursive function, keep in mind that there must be an escape from the recursive function, otherwise you will get into an infinite loop.

Below I created a function, which call yourself. Recursion can be very complex, but the principle is the same.

Try it yourself:

Sunday, December 5, 2021

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:

Friday, December 25, 2020

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.

Saturday, November 28, 2020

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. 

Friday, November 28, 2014

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