Node.js – Lesson 5: Create Web-server application

First create file app.js:

const express = require("express");
const app = express();
const port = 8000;

app.listen(port, () => {
    console.log("Server work on "+port); 
});

In this code we require Express framework that provides a robust set of features for web and mobile applications. Define class app – our main application class and port – default server port.

We can start our server using command:

npm run start

But now our server can not do nothing, ot only write in console text: “Server work on port 8000“. Let’s create routing and say our server how to work with Url and write text to Web-browser.

First create folder “routes” and file “routes/index.js” with code:

const mainRoutes = require('./main');

module.exports = function(app) {
    mainRoutes(app);
}

Now create file “routes/main.js“:

module.exports = function(app) {
    app.get('/', (req, res) => {
        res.end('main');
    });
}

And the last – in file “app.js” require our routes – before app.listen insert this command: require(“./routes”)(app);

const express = require("express");
const app = express();
const port = 8000;

require("./routes")(app); // require /routes/index.js 

app.listen(port, () => {
    console.log("Server work on "+port); 
});

Start program in development mode:

npm run dev

Run Web-browser and open http://localhost:8000:

Similarly you can create /about, /contact or any other route on your NodeJS Web-site.

Apache Error .htaccess: RewriteEngine not allowed here

When you try to enable option RewriteEngine on in .htaccess file you can get error:

/var/www/html/.htaccess: RewriteEngine not allowed here

In this way you need to enable AllowOverride All option.

Go to /etc/apache2/sites-available and edit 000-default.conf (or other conf file of your website):

sudo nano /etc/apache2/sites-available/000-default.conf

Add next block to this file:

<Directory />
        AllowOverride All
</Directory>

Your config file will be look’s like this:

<VirtualHost *:80>
        DocumentRoot /var/www/html

        <Directory />
            AllowOverride All
        </Directory>
</VirtualHost>

Save configuration file and restart apache2

sudo systemctl restart apache2

Python Lesson 2 (Variables and types)

Python is completely object oriented, and not “statically typed”. You do not need to declare variables before using them, or declare their type. Every variable in Python is an object.

Numbers

Python supports two types of numbers – integers(whole numbers) and floating point numbers(decimals).

myint = 7
print(myint) # Print integer 7

myfloat = 7.0
print(myfloat) # Print float 7.0

myfloat = float(7)
print(myfloat) # Print float 7.0

Strings

Strings are defined either with a single quote or a double quotes.

mystring = 'hello'
print(mystring)

mystring = "hello"
print(mystring)

Assignment of variables

first = sec = third = 1 # All three variables will be assigned 1
first, sec, third = "Hi", 75, 23.1 # Variables will be assigned in turn

To assign variable value from keyboard use command:

# String from keyboard will be assigned to variable first_var
first_var = input("Enter text: ") 

Change type of variable:

int_var = int(input("Enter integer number: "))
float_var = float(input("Enter float number: "))
str_var = str(input("Enter integer number: "))

float_var = float(int_var) # Convert int to float
int_var = int(float_var) + int(float_var) # Convert float to int
str_var = str(25) # Convert number 25 to string

If you try to convert string to number you will get error.

You can do arithmetic operations width variables

# Assign integer value 10 to variable int_var
int_var = int(5.0) + int(5.0) 

# Add 2 to int_var
int_var += 2

# Multiply string
str_var = 'Test'
str_var *= 5 # assing string 'TestTestTestTestTest'

Python Lesson 1 (Hello World):

Python is a very simple language, and has a very straightforward syntax. The simplest directive in Python is the “print” directive. In our first lesson we create script hello.py that write phrase “Hello World“.

print("Hello World\n")

Symbol \n used to set cursor on new line. That’s all it is let’s start our script:

python3 hello.py

And we will see phrase “Hello World” on our display.

Install Composer and Laravel

First install Composer package manager on on your project:

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');"

Now install Composer global:

php composer.phar global require laravel/installer

Install Composer to your project (change site-name to your project name):

php composer.phar create-project --prefer-dist laravel/laravel site-name "8.*"

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.