Javascript: Closures, callback, context

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

window.onload = function(){
    var item = document.querySelector(".items .item");
    item onClick = activeItem;

    function activeItem() {
        console.log(item);
    }
}

In this example inner function activeItem() have access to global variable item. This called closure – when inner function have access to all variables, defined in global function.

JavaScript: Type conversion

To show variable type use typeof:

let value = true;
console.log(typeof value); // boolean

Let’s convert our variable to string:

value = String(value); // now value is a string "true"
console.log(typeof value); // string

Numeric Conversion

Numeric conversion happens in mathematical functions and expressions automatically.

For example, when division / is applied to non-numbers:

console.log( "6" / "2" ); // 3, strings are converted to numbers

We can use the Number(value) function to explicitly convert a value to a number:

let str = "123";
console.log(typeof str); // string

let num = Number(str); // becomes a number 123
console.log(typeof num); // number

Explicit conversion is usually required when we read a value from a string-based source like a text form but expect a number to be entered.

If the string is not a valid number, the result of such a conversion is NaN. For instance:

let age = Number("an arbitrary string instead of a number");
console.log(age); // NaN, conversion failed

Examples of numeric conversion:

console.log( Number(" 123 ") ); // 123
console.log( Number("123z") );  // NaN (error reading a number at "z")
console.log( Number(true) );    // 1
console.log( Number(false) );   // 0

Please note that null and undefined behave differently here: null becomes zero while undefined becomes NaN.

Boolean Conversion

The conversion rule:

Values that are intuitively “empty”, like 0, an empty string, null, undefined, and NaN, become false.
Other values become true.

For instance:

console.log( Boolean(1) ); // true
console.log( Boolean(0) ); // false

console.log( Boolean("hello") ); // true
console.log( Boolean("") ); // false

Summary

The three most widely used type conversions are to string, to number, and to boolean.

String Conversion – Occurs when we output something. Can be performed with String(value). The conversion to string is usually obvious for primitive values.

Numeric Conversion– Occurs in math operations. Can be performed with Number(value).

Boolean Conversion – Occurs in logical operations. Can be performed with Boolean(value).

How to install Composer on Linux server

Composer is a most popular PHP package manager, let’s install composer on website and watch how it works.

You can download Composer from official site: https://getcomposer.org/

Connect to your server via SSH client and run this commands:

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

php composer-setup.php

php -r "unlink('composer-setup.php');"

Best JavaScript libraries

Lodash (https://lodash.com/)

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc. Lodash’s modular methods are great for:

  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions

Quill Text Editor (https://quilljs.com/)

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.


Leaflet (https://leafletjs.com/)

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.


Best Bootstrap alternatives in 2021

Bootstrap is the most popular CSS front-end framework. It is amazing in its capabilities, but there are other frameworks that might be good enough for you. Here are 10 of the best alternatives that you should definitely try.


1. Foundation

A Foundation framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. You cat get templates for your website: https://get.foundation/templates.html


2. Uikit (getuikit.com)

A lightweight and modular front-end framework for developing fast and powerful web interfaces.

This framework contains hundreds of components, buttons, forms, icons, modals and other UI components for your website. Full documentation of this framework You can see on this website: https://getuikit.com/docs/introduction


3. Materialize (materializecss.com)

A modern responsive front-end framework based on Material Design. Material design is a language created by Google that combines traditional design methods with innovation and technology.

You can simple start using Materialize, just go to the page: https://materializecss.com/getting-started.html and download Materialize framework to your project.


4. Metro (themes.org.ua)

Metro 4 is a component library for developing sites with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins.

Metro 4 developed to build websites in Windows Metro Style and include general styles, grid, layouts, typography, 100+ components and routines, 600+ built-in icons.

Metro 4 is an open-source and has an free dual licensing model.

Node.js – Lesson 4: Deploy application on server using git, configure Nginx and pm2

To deploy Node.js application in Internet we need server and domain name. We will use Ubuntu 18.04. On server install Node.js using commands:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs

Also we need to install Nginx web server to proxy http and https requests (from 80, 443 ports) to node application port.

sudo apt-get install nginx

We need to install Git if we want to deploy our application from git repository:

sudo apt-get install git

Next go to /home directory and use command:

git clone repositury_url

This command will clone all files from your git repository to server.

Next we need to install all dependencies from package.json:

npm install

And now we can run our application using command:

node index.js

But this command will stop work if our server will restart or if we close SSH connection to server. To run our application as daemon on server startm use special command pm2. Install it globally with Npm package manager:

sudo npm install pm2 -g

This program will run our node.js application in background:

pm2 start index.js

TO automatic start pm2 on system boot – generate startup script using command:

pm2 startup

And save configuration using command:

pm2 save

Node.js – Lesson 2: Start server, install dependencies

Next step of creating Node.js application is installing additional frameworks and dependencies that facilitate work with the project.

In our lesson we will use popular web framework “Express” and utility “Nodemon”, that will monitor for any changes in your source and automatically restart your server.

To install this dependencies in console write commands:

npm install express
npm install -D nodemon

Flag -D means that this is developer dependency and it not used in production project.

In section “scripts” write create script “start” and “dev”:

"start": "node index.js",
"dev": "nodemon index.js"

Node.js – Lesson 1: Create first application

First of all You need to install Node.js. On Windows computers go to https://nodejs.org/en/ website, download latest version and install it.

On Linux (Debian, Ubuntu Mint) add PPA repository of Node.js:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

And install nodejs package

sudo apt-get install nodejs

To check Node.js version use command:

node -v
v12.18.3

Now let’s create new application. We will use Visual Studio Code editor. Open terminal and initialize NPM by command:

npm init

This command will create package.json configuration file. This file contains information about all packages, used in application.

Send Passwords and Restricted Data Securely

Never send your passwords and restricted data openly to other people! All social networks and messengers always save your data on servers and some third persons possibly can read your messages.

If you need to send secret data – send encrypted link that can only be viewed once. Don’t write from which service is this password, tell it to other person by phone or in other messenger.

In this case, the connection between the service and the password is broken and no one will be able to get the password, except to whom you sent the message.

One of such service, that encrypt your messages and delete it immediately after reading is: One Time Self Destructing Links (https://note.uax.cloud/en)

This service with open source and MIT license encrypt your message and generate special URL link, that you can send in social network or messenger to other people, after reading your message it will be automatically destroyed and no one will be able to read your message again.