Web Technologies

Blockchain is a computer file used for storing data – information. Like any computer file (including the document you are reading now) it exists on a digital storage medium, such as a computer hard drive. And it takes the form of a string of binary “bits”, ones and zeros, which can be processed by computers to be made readable by humans.

Blockchains, however, have three properties which, while not unique individually, when put together mean they function very differently than other types of computer files.

The first is that they are distributed. The file containing this article can, in theory, simply be stored on one computer and accessed over the internet by however many people want to use (i.e read) it. A blockchain, on the other hand, is duplicated, in its entirety, across many computers.

This means that no one person, or entity (such as a corporation, or government) has control over the content of the file. While whoever is in control of the computer storing the file which you are reading now can edit it, to make whatever changes they like, that isn’t the case with a blockchain. Editing the blockchain is only possible if there is a consensus between the network of computers storing separate, but identical, versions of the blockchain. And this is made possible thanks to the second fundamental innovation of blockchain – cryptography.

How it works?

STEP 1

A trade is recorded. For example, let’s say Mr A is selling two of his coins to Mr B for Rs 100. The record lists the details, including a digital signature from each party.

STEP 2

The record is checked by the network. The computers in the network, called ‘nodes’, check the details of the trade to make sure it is valid.

STEP 3

The records that the network accepted are added to a block. Each block contains a unique code called a hash. It also contains the hash of the previous block in the chain

STEP 4

The block is added to the blockchain. The hash codes connect the blocks together in a specific order. Hash codes keep records safe

A hash code is created by a math function that takes digital information and generates a string of letters and numbers from it. Let’s take a closer look at two important characteristics of hash codes:

First, no matter what the size of the original file, a hash function will always generate a code of the same length.

Unlike traditional ledgers, a blockchain database is decentralized and has no “master.



Possible uses

There is a lot of hype about blockchain, but some promising uses are under development.

CRYPTOCURRENCY

Blockchains are the basis of bitcoin and other cryptocurrencies.

BANKING

Financial institutions have been investing in blockchains to simplify their record-keeping for payments.

SUPPLY CHAIN

Recording trades on a blockchain offers a way to check the history of a product. For example, jewelry companies hope it can assure customers that diamonds are not from places where they could finance war.

0

Web Technologies
Introduction

The Moment.js is an JavaScript library that helps you manage dates. Sometimes It is bit difficult to handle date and time.
Moment.js, the impressive JavaScript library for validating, parsing and manipulating dates and times,time zones.
The moment object in Moment.js is mutable.

Moment was designed to work both in the browser and in Node.js. Moment.js is available on cdnjs.com and on jsDelivr.

Moment.js has robust support for internationalization.


Installation
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (deprecated)

Get Current Date and Time

const currentdate = moment();


Manipulating Date 

We can achieve this manipulation via the add() and subtract() methods.

#Add Syntax

moment().add(Number, String);
moment().add(Duration);
moment().add(Object);

#Subtract Syntax

moment().subtract(Number, String);
moment().subtract(Duration);
moment().subtract(Object);

#Calculating the Difference Between Dates

const moment = require('moment');
const dateB = moment('1990-07-01');
const dateC = moment('2019-07-19');
console.log('Difference is ', dateB.diff(dateC, 'days'), 'days');
console.log('Difference is ', dateB.diff(dateC, 'months'), 'months');
console.log('Difference is ', dateB.diff(dateC, 'years'), 'years');


Format Dates
moment().format('MMMM DD YYYY, h:mm:ss a'); // July 14 2019, 12:18:13 pm
moment().format('dddd');                    // Sunday
moment().format("MMM DD YY");               // Jul 14 19
moment().format('YYYY [escaped] YYYY');     // 2019 escaped 2019
moment().format();                         // 2019-07-14T12:22:46+05:30

Date Comparison Methods

Comparison methods are isBefore(), isAfter(), and isSame(). These methods return boolean values that are indicating if one date is before, after, or equal to another date.

const moment = require('moment');
console.log(moment('2019-07-14').isAfter('2019-07-13')); // returns false
console.log(moment('2019-07-14').isAfter('2019-07-20')); // returns true


parseZone

moment.parseZone is equivalent to parsing the string and using moment#utcOffset to parse the zone.


Checking current moment.js locale

This is as simple as calling moment.locale without any parameters.

moment.locale(); // returns 'en'

UTC Offset

This function will return the current offset variation with respect to the system server timezone.

moment().utcOffset(); // (-240, -120, -60, 0, 60, 120, 240, etc.)

Changing locale globally

Moment.js has robust support for internationalization. We easily change the locale as required.

moment.locale('fr');

References

https://momentjs.com/docs/#/use-it/

0

Web Technologies
In many situations developers need to show the thumbnail images which are stored in the database. But they can’t do it like streaming the original image and resize it with applying CSS. It will cost lot of data and memory consumption. For the solution of that we are using thumbor.

Thumbor is a smart imaging service which provide cropping, resizing and flipping of images. It uses more advanced algorithms to detect the image parts to better cropping and resizing.

Prerequisite
The stable version of thumbor is associate with the Python Package Index. So that python needed to be installed before thumbor.For installing python first you have to get compressed file of python to your server.
wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz
Then decompress the file by using
tar xvzf Python-3.4.3.tgz
Now the python can be installed by going to the directory and using following commands.
cd Python-3.4.3
./configure --prefix=$HOME/.local
make
make install
Installation of thumbor
If you want thumbor to resize the image within the safe environment simply you can install it in your own server using following command
pip install thumbor
The thumbor service can be run just by typing
thumbor
For constant running of thumbor use
nohup thumbor &
Resize image
After the successful installation of the thumbor the image can be edited just by using the server url, port and the image url. For example

https://127.0.0.1:8888/unsafe/150×150/https://[email protected]/image.jpg

(replace 127.0.0.1 with server ip address)

By default the thumbor running in the port 8888.The 150×150 tells the thumbor that height and width of the image should be 150.And finally the url of the image.The thumbor will resize and will returns the image with given height and width.

Change background color


The thumbor can change the background color of the image just by giving the filters along with the url.

http://127.0.0.1:8888/unsafe/filters:background_color(blue)/https://[email protected]/image.jpg

Change RGB value


The image rgb value can be changed by providing the values with the url

http://127.0.0.1:8888/unsafe/filters:rgb(20,-20,40)/https://[email protected]/image.jpg

Conclusion


The thumbor can do more like change the image brightness, contrast, blur the image and a lot. For detail reference about thumbor please visit here.

0

Web Technologies

The backend web frameworks comprise of languages and tools utilized in server-side programming in a web application development condition. The way to the effective back end development of web applications is picking the right stack, adapting new databases and programming languages and understanding the server engineering too.

Express

Express.js, or simply Express, is a web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

Express prides itself as a minimal, fast and unopinionated frameworks. It provides some core framework functionalities without obscuring the features of Node and leverages the powerful performance of the asynchronous Node.js. It’s also quite flexible and supports full applications as well as REST API as well.

Features:

  1. Powerful routing API
  2. Good documentation
  3. Supportive community

Laravel

Laravel is a PHP based backend framework which prides itself on its beautiful syntax, ability to accommodate large teams, and the functionality of its modern toolkit. Laravel follows the MVC architectural pattern and was built to facilitate extensive backend development. Laravel also offers its own database migration system and has a robust ecosystem.

Features

  1. Simple and fast routing engine
  2. Comes with its own CLI
  3. Powerful template system (Blade)
  4. Good documentation

Django

A free, open-source backend web development framework, Django is widely used for the rapid development of APIs and high-end backend web applications. Named after the renowned guitarist, Django Reinhardt, this Python framework was created in 2003. The Django framework supports the quick development of backend web applications with very less coding. The efficiency of this Python web development framework is proved from the fact that it is used by some of the busiest applications on the web.

Besides taking off the web development hassles, Django has many other features that woo the developers across the world.

Features:

  1. Highly customizable
  2. Explained documentation
  3. The popular tool with extensive community
  4. Clear and defined MVC organization

Spring

Spring is a Model-View-Controller framework that uses Java, the all-time popular language. It’s used by websites like Wix, TicketMaster, and BillGuard. Spring possess a lot of sister projects that boost its performance and let you scale your business easily. The fact that it uses Java, a strongly typed language, is a serious pro for many web developers. The learning curve might be quite steep tho, especially if you don’t know Java.

Features

  1. Create stand-alone Spring applications
  2. Highly scalable
  3. Great documentation
  4. Built for large scale applications that use a cloud approach
  5. Extensive ecosystem

Ruby on Rails

Released in 2004, Ruby on Rails is a free, open-source MVC backend web development framework. Ruby has always been considered to be one of the most developer-friendly languages and the Rails framework combines the capabilities of Ruby language. This framework provides developers with pre-defined solutions to perform repetitive tasks. It supports super-fast development and offers almost every component that a developer looks for in an advanced framework. It has been used to build the backend of renowned applications such as GitHub, Airbnb, Shopify, and Zendesk.
Features:

  1. Good conventions
  2. A number of plugins available
  3. VPS hosting service
  4. Massive community

CakePHP

CakePHP is one of the first PHP frameworks to be released back in 2005. Since then, it has come a long way and is now known as a modern PHP framework made to allow developers to build quickly. CakePHP uses clean MVC conventions and is highly extensible making it a great choice for building both large and small applications.

Features

  1. Allows you to build rapidly
  2. Comes with “batteries included”
  3. Built with security in mind
  4. No complicated configuration required to get started

Microdot Framework
The Microdot framework is gradually gaining traction among developers worldwide as it helps in creating reliable, scalable microservices. An open-source .NET framework, Microdot allows developers to focus on coding as it offers well-written documents on microservices pattern and architecture. If your organization uses platforms developed by Microsoft and in case you plan to build microservices, Microdot is incontrovertibly the best option.

Features

  1. Interoperability
  2. Common Language Runtime engine (CLR)
  3. Language independence
  4. Base Class Library
  5. Simplified deployment
  6. Security
  7. Portability

Flask Framework

Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions. However, Flask supports extensions that can add application features as if they were implemented in Flask itself. Extensions exist for object-relational mappers, form validation, upload handling, various open authentication technologies and several common framework related tools. Extensions are updated far more regularly than the core Flask program.

Features

  1. Contains development server and debugger
  2. Integrated support for unit testing
  3. RESTful request dispatching
  4. Uses Jinja2 templating
  5. Support for secure cookies (client side sessions)
  6. 100% WSGI 1.0 compliant
  7. Unicode-based
  8. Extensive documentation
  9. Google App Engine compatibility
  10. Extensions available to enhance features desired



0

Web Technologies

ECMAScript (ES) is a standardized scripting language for JavaScript (JS). The first edition of the ECMA Script was published in June 1997. The sixth version of ECMA Script6 is known as ES6 (it is also called as ECMA Script 2015). ES6 vs ES5 are two of the important scripting languages in the Software Development industry. Both ES5 vs ES6 have some similarities in nature but at the same time, there are also many difference between each other. Here, we will have discussion on ES6 vs ES5.

Exporting & Importing Modules

Exporting and importing module syntax changed introduction of ES6 specification.

Here is the exporting and Importing syntax,

var sampleModule= { x: 1, y: function(){ console.log('This is ES5') }}

// ES5 Export
module.exports =  sampleModule; 

// ES6 Export 
export default sampleModule; 

// ES5 Import
var sampleModule = require('./sampleModule'); 

// ES6 import
import sampleModule from './sampleModule';

Spread operator (…)

Spread Operator is introduced in ES6, merging the objects and arrays made easier by this.

Follows the spread operator usage/syntax,

var obj1 = { x: 1, y: 2 };
var obj2 = { c: 3, d: 4 };

// ES5
var obj3 = Object.assign(obj1, obj2);

// ES6
var obj3 = { ...obj1, ...obj2 };

Template Literal (`)

Template Literals are a new ES2015 / ES6 feature that allows you to work with strings. Template literals provide an easy way to interpolate variables and expressions into strings.
You do so by using the ${...} syntax.,

const myVariable = 'test'
const newVariable = `something ${myVariable}`;

Arrow Function (=>)

Arrow functions is also called as “fat arrow” functions. Arrow functions make our code more concise, simplify function scoping.

// ES5
var multiply = function(x, y) {
  return x * y;
};

// ES6
const multiply = (x, y) => { return x * y };

Promises and Callbacks

Javascript is an Async language we all know that. This feature gives developers to code freely, meanwhile all often contains a lots of function and return keywords. When using promises, these function expressions will be used for chaining. ES6 code is quite simplified.

// ES5
aAsync().then(function() {
  return bAsync();
}).then(function() {
  return cAsync();
}).done(function() {
  finish();
});

// ES6
aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);

Performance and Support

With the help of newly implemented features and shorthand storage implementation, ES6 scores a higher performance rank than ES5, whereas ES5 has larger range of community supports than ES6.

0

Web Technologies

Angular 7 is actually a typescript based open source full-stack web application framework which makes you to create reactive single page applications (SPA). Angular 7 is completely based on components. Let see about Angular 7 installation and new features.


Installation

  1. Install the latest version of node.js (https://nodejs.org/en/download)
  2. Install visual studio code (https://code.visualstudio.com/download)

Steps to check the installation of Node and NPM

To verify the versions of Node and NPM, you have to execute the following 2 commands using the command prompt window.

node -v
npm –v


To install Angular 7 using npm,

npm install -g @angular/cli


For Linux or Mac, we should add sudo to grant the installation permission.

sudo npm i @angular/[email protected] -g


Install Angular 7 Beta globally on the machine. Open the terminal and type the below command.

Invoke the tool on the command line through the ng executable.


Examples

ng help
ng generate --help


To create, build, and serve a new basic Angular project. The following commands are:

ng new my-first-project
cd my-first-project
ng serve


A “production” configuration is created by default when you use the CLI to create the project and you can use that configuration by specifying the –-prod option.

Commands

ng build --prod


Angular 7 Components


The most basic building block of your Angular 7 application (and this is a concept that’s not new) is the component .

  1. The html template.
  2. The styling(SASS,CSS) etc..


Features of Angular 7

  1. Virtual Scrolling
  2. Drag and drop
  3. Improved accessibility of select


Virtual Scrolling

Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists.


Examples:

<cdk-virtual-scroll-viewport itemSize ="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>


Drag and Drop

Drag and drop support is now in the CDK and includes automatic rendering as the user moves items and helper methods for reordering lists.

(moveItemInArray) and transferring items between list (transferArrayItem).


For html,

<div cdkDropList class="list" (cdkDropListDropped)="drop($ event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>


For ts,

drop(event:cdkDragDrop<string[]>){
moveItemInArray(this.movies,event.previousIndex,event.currentIndex);
}


Improved accessibility of select

Improve the accessibility of your application by using a native select element inside of a mat-form-field. <mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element.


Performance Improvements

We inclued the reflect-metadata polyfill in production ,which is only needed in development. These default bundle size can be easily changed in your angular.json file


by changing the bundle size in the angular.json file.

"budgets":[{
"type":"initial",
"maximumwarning":"2mb",
"maximumerror":"5mb"
}]


Angular 7 Templating

<app-nav> is a component decorator , there’s a selector property bound to the value of app-nav.


Interpolation is executed by wrapping the name of a property that’s defined in the component between {{ }}.

<app-nav></app-nav>
<section>
<router-outlet></router-outlet>
</section>


Conclusion


With Angular 7, a new major release has come out, which is having many small improvements and designed by maintaining the dependencies and other performance improvements .

0

Web Technologies

This is the complete list, yet some of the best practices we follow when we code. Keep reading

Declarations
Declaration should ends with semicolons properly
Variable/function declarations should always with var keyword

var myfunction = function() {};


Linting

The best tool for linting your JavaScript code is JSHint.(https://jshint.com/)


Don’t Use Short-Hand

The curly braces should be omitted is with one-liners.
if(1 + 1 === 2) return 'correct'; // one-line
if(1 + 1 === 2) {x=true; anotherFunctionCall();};


Use
=== Instead of ==
Working with == and !=, leads into issues while using different types, so better way is to use === and !==


Avoid long argument list

Use a single object as parameter , it helps in handling optional parameters.

function getRegisteredUsers ({ fields, include, fromDate, toDate }) { // Implementation}

getRegisteredUsers({
fields: ['name','email'],
include: ['favorites'],
fromDate: '2019-05-05',
toDate: '2019-05-10'
});


Optimize loops

Loops may slow down and the most common mistake is to read the length attribute of an array at every iteration.


Avoid nesting

Nesting is hard to follow on complex logic, little bit confusing too.


Place Scripts at the Bottom of web Page

Always place the scripts at end bottom of the page, which helps to load the page as quick as possible.


Use {} Instead of New Object()

There are several ways available to create a object. Best way I suggest is to use {} instead of new Object();
var a = {}; // Correct
var a = new Object(); // wrong


Use [] Instead of New Array()

Best way to declare a array is to use [] instead of new Array();
var teams = ['a','b','c'];


Comment the Code

Comment or describe(shortly) the code for better understanding. It may helps while we visit the code later.

0

Web Technologies

jsreport is the open source platform for designing and rendering reports.It allows you to create various reports in various formats like PDF, Excel, HTML.  It also includes advanced reporting features like user management, REST API.


Installation:

The jsreport can be installed like other npm modules. You can run the npm command after the installation of Nodejs.

npm install -g jsreport-cli


The jsreport needs to be initialized and configured with the following commands.

jsreport init
jsreport configure

We need to configure the things like protocol, port, Authentication and permission for jsreport to access the local storage.


To start the jsreport server use the following command and point your browser to the specified port.The default port for the jsreport server is http://localhost:5488

 jsreport start 


How to define data ?

Before creating a pdf invoice layout, you should prepare some sample data that will be used later to preview. The sample data should be in the form of json object.


jsreport make the thing easy by providing a user interface for the developers. You can get sample report format at the user interface.



Defining report template
:

Template defines what the result report is going to be look like and is used together with the input data every time you render a new report. You can create a report template again from the entity tree panel on the top left.


For the invoice tutorial, the first thing you need to do is associate the sample data you previously defined with the newly created template.We can also define styling for the report like doing in the normal html page.


Recipes:

jsreport supports various reports and various output formats. To specify output format choose a jsreport recipe. Recipe doesn’t only define the output format, but also how it is produced. You can define an html template and then just by changing the recipe it will produce reports in the format of pdf, html or excel.


The easiest way to create a pdf invoice is to use html to pdf conversion provided by chrome-pdf recipe.You can find the recipes in the bottom left corner. jsreport uses javascript templating engines to define report layout. You can bind input data, use loops, conditions or javascript helpers.The template engines which are used in the jsreport are handlebars, jsrender, EJS,Pug.


Test the Report:

After defining the template, data and recipe you can test the jsreport by clicking the RUN . Now the template will provide the specified structure for the report along with the data. You can also download the data by clicking the download button.


For more reference please visit:

Learn jsreport 
jsreport playground

0

Web Technologies
<article>
This new HTML5 tag defines space for an article. It’s way easier to use this element instead of <p> if you need a specific formatting for a long text.
<article>
    <h1>HTML5 tags</h1>
    <p>HTML5 tags and their uses</p>
</article>
<dialog>
It defines the dialog box in your website. However, Microsoft Edge and Internet Explorer do not support this tag
<dialog open id=”DialogExample”>
     <p>Here is some text for example.</p>
</dialog>
<source>
The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on its media type, codec support or media query
<audio controls>
     <source src=”melody.mp3” type=”audio/mpeg”>
     <source src=”melody.ogg” type=”audio/ogg”>
</audio>
<nav>
It describes a special space for navigation links on your website
<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
</nav>
<svg>
Scaling a vector image preserves the quality of the shapes. HTML5 SVG tool is often used for defining graphics on the internet. There are different ways to draw boxes, circles, paths, texts and graphic images using SVG
<svg width=”100” height=”100”>
    <circle cx=”50” cy=”50” r=”40” stroke=”green” stroke-width=”4” fill=”yellow”/>
</svg>
<progress>
The <progress> tag represents the progress of a task
<progress value="30" max="100">
</progress>
<fieldset>
The <fieldset> tag is used to group related elements in a form.The <fieldset> tag draws a box around the related elements
<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

0