DEV Community: Salvietta150x40

How to upload files to the server using JavaScript

Salvietta150x40 — Wed, 14 Jun 2023 11:23:39 +0000

In this tutorial we are going to see how you can upload files to a server using Node.js using JavaScript, which is very common. For example, you might want to upload an avatar, a thumbnail, a PDF file or any other image or file in various formats.

We are going to structure this tutorial in several parts. First we will create the project, then we will create the frontend code and finally the backend code for the server.

To understand this tutorial you will need some basic knowledge of the command line. If you have never used the command line before, see the following command line tutorial, which explains some basic commands for the most commonly used operating systems. You will also need to have both Node.js and the npm package manager installed.

Creating the project

The first thing we are going to do is to configure and create the project. To do this, create an empty directory somewhere, access it via the command line and use the following command to create the project:

npm init

We only need to install two packages. First install express using the following command:

npm install express

Next we will also need a middleware for express called express-fileupload which we can use to manage the files that are sent to the server:

npm install express-fileupload

Next, configure the file that will create the express server. To do this, edit the package.json file, which should contain the line "start": "node index.js" in the scripts section to tell Node which file to run when we start the application:

{


"name": "ulpload-file-ajax",


"description": "Tutorial in which an ajax medium file is created",


"version": "1.0.0",


"dependencies": {


  "express": "4.16.2",


  "express-fileupload": "^1.1.7-alpha.3",


  "request": "^2.88.2"


},


"scripts": {


  "start": "node index.js"


 }


}

Next, we create the index.js file in the root folder of the project and we add the necessary code for the creation of a basic server:



const express = require('express');

const router = express.Router();

const bodyParser = require('body-parser');

const fileupload = require('express-fileupload');

const FileController = require('./controllers/FileController');

const app = express();

const fileController = new FileController();

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

app.use(fileupload());

router.post('/ulpload-file', fileController.uploadFile);

router.use(function(req, res) {

   res.status(404).json({

     error: true,

     message: 'Not Found'

   });

});

app.use('/api', router);

app.use(express.static(__dirname));

app.get('/', function (req, res) {

   res.render('index.html');

});

var port = 3000;

app.listen(port, function () {

   console.log('Server', process.pid, 'listening on port', port);

});

module.exports = app;

What we have done is to create the server. At the top of the file we have made a require of the express-fileupload module, which is essential for uploading files.

We have included the FileController class, located in the /controllers/FileController.js file, although we haven't created it yet. In the uploadFile function of this controller is where we will add the code in charge of uploading the file.

As for the path that will redirect the request to the controller, we have defined the path /api/upload-file using the following function:

router.post('/upload-file', fileController.uploadFile);

We have added the /api prefix to the path using the following statement:

app.use('/api', router);

Please have a look at this file, as we will be creating the frontend code next.

2. Frontend JavaScript code

In this section we will add the frontend code in charge of sending the file from the user's system to the server. To start, create the index.html file in the root folder of the project. Next, edit the file you just created and copy and paste the following code, which we will explain later:

<!DOCTYPE html>


<html lang="es">


 <head>


   <meta charset="utf-8" />


   <meta http-equiv="x-ua-compatible" content="ie=edge" />


   <meta name="viewport" content="width=device-width, initial-scale=1" />


   <title>Ajax Node File Upload Tutorial</title>


 </head>


 <body>


   <h1>Ajax Node File Upload Tutorial</h1>


   <p><label>Select a new file!</label></p>


   <input type="file" id="upload_file" />


   <div id="result"></div>


   <script type="text/javascript" src="resources/js/scripts.js"></script>


 </body>


</html>

What we have done is to add a basic HTML5 template. We have also added an HTML input field, which is the field that the user will interact with to upload the file:

<input type="file" id="upload_file" />

As you can see, we've linked to the /resources/js/scripts.js script just before the closing </body> tag. Let's add it, so first create the /resources/js directory and then create and edit the scripts.js file.

Now we are going to add the JavaScript code that will allow us to associate an event to the field we have created in order to upload the file to the server. First we will see the code and then we will explain it:



const uploadImage= event => {

 const files = event.target.files;

 const data = new FormData();

 data.append('file', files[0]);

 fetch('/api/upload-file', {

    method: 'POST',

    body: data

 })

 .then(response => response.json())

 .then(data => {

   document.getElementById('result').innerHTML = 'The file ' + data.path + ' has been successfully uploaded.';

 })

 .catch(error => {

    console.error(error);

 });

}

document.querySelector('#upload_file').addEventListener('change', event => {

   uploadImage(event);

});

In the last block of code we have registered a change event for the input we use to upload the file. In this event we execute the function uploadImage, which receives as parameter the click event itself, from where we will have access to the selected file.

What we do in the uploadImage function is to get the selected file, located in the event.target.files array. Then we create a FormData object and assign the selected file to it. Finally we use the fetch function to send a POST request to the /api/upload-file path we created on the server.

Then we check if the file upload has been completed successfully, printing in the result field the file path if it has been uploaded correctly, or displaying an error in the console otherwise. We return the path in the path property.

3. Node.js Backend Code

Now let's take a look at the process that is followed on the server to upload the file. The first thing you need to do is create the /uploads directory in the root folder of your project. This is the directory where we will upload the files.

We're going to create the /controllers/FileController.js file as a controller. As before, we'll first look at the code for this file and then explain how it works:

class FileController

{

  uploadFile = async (req, res, next) =>

  {

   const file = req.files.file;

   const fileName = file.name;

   const path = __dirname + '/../uploads/' + fileName;

try {

    file.mv(path, (error) => {

     if (error) {

     console.error(error);

     res.writeHead(500, {

       'Content-Type': 'application/json'

  });

   res.end(JSON.stringify({ status: 'error', message: error }));

     return;

   }

   return res.status(200).send({ status: 'success', path:'/uploads/' + fileName });

  });

  } catch (e) {

   res.status(500).json({

    error: true,

    message: e.toString()

   });

  }

 }

}

module.exports = FileController;

We have created a class called FileController as a controller, in which we have defined the uploadFile function.

The first thing we do is to get the file we have sent, which should be in the variable req.files.file, since file was the name we have given it in the frontend code. Now we can get the name of the file, which will be in the variable file.name.

Next, we have defined the path where we are going to copy the file and then, using the function file.mv, we copy the file to that path.

In case the file has been copied successfully, we will send the response back in JSON format:

return res.status(200).send({ status: 'success', path:'/uploads/' + fileName });

Otherwise, an error is returned.

4. Testing the app

Let's test the application to verify that everything works correctly. To do this, open a terminal window and go to the root folder of the project. Then run the following command to start the server:

npm start

Then go to the URL http://localhost:3000/ and try uploading a file, such as an image in .png or .jpg format.

And that is all.

How to Track Flight Status in real-time using the Flight Tracker API

Salvietta150x40 — Tue, 06 Jun 2023 09:21:00 +0000

The Flight Tracker API provides developers with the ability to access real-time flight status, which is extremely useful for integrating historical tracking or live queries of air traffic into your website.

With this API, you can easily track the status of a flight and access airport schedules.

There are several Flight Tracker APIs available to retrieve flight status, and one of the best options is aviationstack. This API offers a simple way to access aviation data globally, including real-time flight status and airport schedules.

Aviationstack tracks every flight worldwide at all times, storing the information in its database and providing real-time flight status through its API. It is a user-friendly REST API that returns responses in JSON format and is compatible with various programming languages such as PHP, Python, Ruby, Node.js, jQuery, Go, and more.

In this tutorial, we will show you how to obtain real-time flight status using the aviationstack Flight Tracker API with PHP.

Obtaining API Credentials

To get started, you need to create an account on aviationstack. Once you are in your dashboard, you can copy the API access key from the "Your API Access Key" section.

API Configuration

We will need the access key to authenticate and access the aviationstack API.

Next, we will build the query using the http_build_query() function to pass the necessary parameters to the aviationstack API.

Define the access key in the access_key parameter.

$queryString = http_build_query([
'access_key' => 'YOUR_ACCESS_KEY'
]);

HTTP GET Request

To retrieve flight data, we will make an HTTP GET request to the aviationstack API using cURL.

// API URL with the query string
$apiURL = sprintf('%s?%s', 'https://api.aviationstack.com/v1/flights', $queryString);
// Initialize cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiURL);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// Execute the API request
$api_response = curl_exec($ch);
// Close cURL
curl_close($ch);

It is important to ensure that the API call is secure, so we should use the URL with https:

https://api.aviationstack.com

Flight Status and General Information

After making the API call, we will receive the current flight status and related information in JSON format. Initially, the aviationstack API provides the following geolocation data:

- Flight date (flight_date)
- Flight status (flight_status)
- Departure and arrival information (departure/arrival)
- airport
- timezone
- iata
- icao
- terminal
- gate
- delay
- scheduled
- estimated
- actual
- estimated_runway
- actual_runway

- Airline information (airline)
- name
- iata
- icao

- Flight information (flight)
- number
- iata
- icao
- codeshared

- Aircraft information (aircraft)
- registration
- iata
- icao
- icao24

- Live data (live)
- updated
- latitude
- longitude
- altitude
- direction
- speed_horizontal
- speed_vertical
- is_ground

By using the json_decode() function, we can convert the obtained JSON data into a PHP array.

Here's an example of how to extract flight information using the aviationstack API:

$api_result = json_decode($api_response, true);

Below is the complete code to retrieve global flight information using the aviationstack API with PHP:


// Define the API access key
$queryString = http_build_query([
    'access_key' => 'YOUR_ACCESS_KEY',
    'limit' => 10
        ]);
// API URL with the query string
$apiURL = sprintf('%s?%s', 'https://api.aviationstack.com/v1/flights', $queryString);
// Initialize cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiURL);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// Execute the API request
$api_response = curl_exec($ch);
// Close cURL
curl_close($ch);
// Convert the JSON into an array
$api_result = json_decode($api_response, true);
// Display flight data
foreach ($api_result['data'] as $flight) {
  if (!$flight['live']['is_ground']) {
    echo sprintf("%s flight %s from %s (%s) to %s (%s) is in the air.",
            $flight['airline']['name'],
            $flight['flight']['iata'],
            $flight['departure']['airport'],
            $flight['departure']['iata'],
            $flight['arrival']['airport'],
            $flight['arrival']['iata']
    ), PHP_EOL;
    echo '<br/>';
  }
}
?>

This code allows you to retrieve updated flight information using the aviationstack API. Make sure to replace ' YOUR_ACCESS_KEY' with your provided personal access key from aviationstack.

You can integrate this code into your PHP application to display real-time flight status and related details on your website.

Note: It's important to handle error cases, such as when the API response is not successful or when there are no flight data available. You can add error handling and additional logic as per your application requirements.

Mastering array sorting in JavaScript: a guide to the sort() function

Salvietta150x40 — Mon, 05 Jun 2023 15:54:00 +0000

In this article, I will explain the usage and potential of the sort() function in JavaScript.

What does the sort() function do?

The sort() function allows you to sort the elements of an array object. It can sort the elements in either the default ascending order or according to a custom sorting function.

By default, the function sorts the elements in ascending order based on their string Unicode values. It converts the elements to strings and then arranges them using Unicode values.

What is Unicode?

Unicode is a standard that assigns a unique numeric value, known as a code point, to every character used in writing systems worldwide. It enables computers to handle and represent various languages, symbols, and tastes consistently.

For example, in the English Latin alphabet:

- U+0041 to U+005A represents the Latin capital letters (A-Z).
- U+0061 to U+007A represents the Latin small letters (a-z).

So, for instance, the word "Apple" in the Latin alphabet (English) is represented in Unicode as:

A: U+0041

p: U+0070

l: U+006C

e: U+0065

How does `sort()` utilize Unicode tastes?

The sort() function employs a sorting algorithm to sort the array. It can use various sorting algorithms such as bubble sort, quicksort, heapsort, or mergesort, depending on factors like array size, data types, and optimization strategies implemented by the JavaScript engine.

The JavaScript engine executes the code and is responsible for interpreting and running JavaScript programs. It can be part of web browsers, server-side JavaScript platforms, or standalone JavaScript runtime environments.

Among the sorting algorithms mentioned, quicksort or its variations are commonly used for sorting arrays in JavaScript.

If you're interested in learning more about the quicksort algorithm, you can check out resources like the W3Resource website.

How to use the sort() function in JavaScript
Now that we understand how sort() works internally, let's see how to use it.

To use the function, simply call {array}.sort(). This will sort the elements in the default ascending order, as described earlier.

javascript
const tastes = [
"Margherita",
"Napoletana",
"Quattro Formaggi",
"Primavera",
"Marinara",
"Boscaiola",
"Bufala",
];
const sortedArray = tastes.sort();
// Output:
["Boscaiola", "Bufala", "Primavera", "Margherita", "Marinara", "Quattro Formaggi", "Napoletana"];

As you can see in the example, the names of the tastes have been sorted in ascending order based on their Unicode representation.

If you want to have them sorted in descending alphabetical order, you can chain the reverse() function after sort(). This will reverse the order of the elements once they have been sorted.

What about sorting numbers?

Let's explore it:

const numbers = [9, 3, 12, 11, 40, 28, 5];
const sortedNumbers = numbers.sort();
console.log(sortedNumbers);
// Output:
[11, 12, 28, 3, 40, 5, 9];

Mmmmmmh ,the result is not sorted in the expected order. Why?

Well, remember when I mentioned that the default sorting method uses Unicode character sorting after converting the elements to strings? That's the reason. The numbers are converted to their string equivalents and then sorted based on Unicode values.

As a consequence, all the numbers starting with '1' come before any other numbers. Therefore, '11' is sorted before '3', and so on.

Let's examine the Unicode values for these numbers:

- 11: U+0031 U+0031
- 12: U+0031 U+0032
- 28: U+0032 U+0038
- 3: U+0033
- 40: U+3034 U+0030
- 5: U+3035
- 9: U+3039

As you can see, if we sort based on Unicode tastes, the comparison between '1' and '3' results in '0031' being less than '0033'. Consequently, the numbers starting with '1' will be pushed to the front of the array.

You might find this behavior annoying. But don't worry, there's a solution: using custom compare functions.

How to Use a Custom Sort Function

As mentioned earlier, the sort() function can accept a custom comparison function as an argument.

sort(compareFn?: ((a: never, b: never) => number) | undefined): never[]

The comparison function is used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they are equal, and a positive value otherwise. If the comparison function is omitted, the elements are sorted in ascending ASCII character order.

For example:

[11, 2, 22, 1].sort((a, b) => a - b);

This code sorts an array in place. The method mutates the array and returns a reference to the same array.

So, what does all of this mean?

The custom comparison function has specific expectations. It requires you to return certain values:

- -1: if the value on the left is less than the value on the right.
- 0: if the value on the left is equal to the value on the right.
- 1: if the value on the left is greater than the value on the right.

In simpler terms, returning -1 moves the item to the left (before the compared value), returning 0 keeps it in place, and returning 1 moves the item to the right (after the compared value).

Now let's explore some examples to understand how it works.

Referring to the previous example where we struggled to sort an array of numbers, we can fix this by using a custom comparison function:

const numberSortFn = (a, b) => {
if (a < b) {
return -1;
} else if (a === b) {
return 0;
} else {
return 1;
}
};
const numbers = [9, 3, 12, 11, 40, 28, 5];
const sortedNumbers = numbers.sort(numberSortFn);
console.log(sortedNumbers);
// Output:
[3, 5, 9, 11, 12, 28, 40];

As you can see, the array is now sorted in numerical ascending order as we expected. The reason it works differently is because the less than operator now compares the values as numbers rather than strings.

Other Uses of the Custom Comparison Function

In addition to sorting arrays of numbers, you can also utilize the custom comparison function to sort objects based on their properties. Let's explore an example of sorting an array of objects (books) based on their year of publication.

const books = [
{ title: "Book A", year: 2010 },
{ title: "Book B", year: 2005 },
{ title: "Book C", year: 2018 },
];
const booksSortedByYearAsc = books.sort((a, b) => a.year - b.year);
console.log(booksSortedByYearAsc);
// Output:
[
{ title: "Book B", year: 2005 },
{ title: "Book A", year: 2010 },
{ title: "Book C", year: 2018 },
];


```

In this example, we provide a custom comparison function that compares the objects based on their `.year` property. By subtracting `b.year` from `a.year`, we can achieve ascending order sorting based on the year of publication.

This technique allows you to sort objects in arrays based on any property you choose. You simply need to modify the comparison function accordingly to compare the desired properties.

By utilizing custom comparison functions, you gain flexibility in sorting arrays of various data types and objects based on specific criteria.

Sorting based on the content of the string

Let's take our sorting capabilities a step further. Imagine we have a list of attendees at a seminar, and we want to generate a register. However, we want to prioritize the doctors and have them listed at the top, as they are the keynote speakers.

We can achieve this using a custom comparison function:

const names = ["Mike Smith", "Dr. Johnson", "John Doe", "Dr. Williams"];
names.sort((a, b) => {
if (a.startsWith("Dr.") && !b.startsWith("Dr.")) {
return -1;
} else if (!a.startsWith("Dr.") && b.startsWith("Dr.")) {
return 1;
} else {
return a.localeCompare(b); // sort alphabetically
}
});
console.log(names);
// Output:
["Dr. Johnson", "Dr. Williams", "John Doe", "Mike Smith"];

In this example, we define a custom comparison function that checks if a string starts with "Dr." or not. If the first string starts with "Dr." and the second one does not, we return -1, indicating that the first string should be placed before the second string in the sorted array. Conversely, if the first string does not start with "Dr." and the second one does, we return 1 to indicate the opposite order.

For cases where neither string has "Dr." at the beginning, we resort to using the `localeCompare` function. This function performs an alphabetical comparison using Unicode values, similar to the default behavior discussed earlier in this article.

By incorporating custom comparison logic, you can prioritize specific patterns or values in your sorting process, enabling you to achieve more specialized sorting results based on the content of the strings.

Strings of Numbers and Letters

Suppose you have an array that contains a mixture of numbers and letters, and you want to sort it in a specific way. Your goal is to have the numbers appear before the letters, and within each group, you want the elements to be sorted numerically and alphabetically, respectively. Here's how you can achieve that using a custom comparison function:

const items = ["b", "3", "a", "2", "c", "1"];

items.sort((a, b) => { const aIsNumber = !isNaN(a); const bIsNumber = !isNaN(b); if (aIsNumber && !bIsNumber) { return -1; // Numbers should be sorted before letters } else if (!aIsNumber && bIsNumber) { return 1; // Letters should be sorted after numbers } else if (aIsNumber && bIsNumber) { return a - b; // Sort numbers numerically } else { return a.localeCompare(b); // Sort letters alphabetically } }); console.log(items) // Output: ["1", "2", "3", "a", "b", "c"];

In this example, we first determine whether each value is a number or not using the isNaN() function. By checking if the negation of isNaN() is `true`, we can identify if the value is a number.

Based on this information, we apply the following logic:

- If `a` is a number and `b` is not a number, we return -1 to indicate that numbers should be sorted before letters.
- If `a` is not a number and `b` is a number, we return 1 to indicate that letters should be sorted after numbers.
- If both `a` and `b` are numbers, we subtract `b` from `a` (`a - b`). This allows us to sort the numbers numerically by comparing the numeric values.
- If none of the above conditions are met, we resort to using `localeCompare()` to sort the letters alphabetically.

By incorporating this custom comparison logic, we can achieve the desired sorting order, where numbers appear before letters, and within each group, the elements are sorted numerically and alphabetically, respectively.

Strings of Numbers and Letters

const items = ["b", "3", "a", "2", "c", "1"];
items.sort((a, b) => {
const aIsNumber = !isNaN(a);
const bIsNumber = !isNaN(b);
if (aIsNumber && !bIsNumber) {
return -1; // Numbers should be sorted before letters
} else if (!aIsNumber && bIsNumber) {
return 1; // Letters should be sorted after numbers
} else if (aIsNumber && bIsNumber) {
return a - b; // Sort numbers numerically
} else {
return a.localeCompare(b); // Sort letters alphabetically
}
})
// Output:
["1", "2", "3", "a", "b", "c"];

In this example, we first determine whether each value is a number or not using the isNaN() function. By checking if the negation of isNaN() is `true`, we can identify if the value is a number.

Based on this information, we apply the following logic:

In the code snippet provided, there is a custom comparison function used to sort an array containing both numbers and letters. The logic is designed to prioritize sorting based on the type (number or letter) and then further refine the order within each group. Let's break down the logic step by step:

Checking if values are numbers: The isNaN() function is used to check if a value is not a number. By negating the result using the logical NOT operator (!), aIsNumber and bIsNumber are set to true if the corresponding value is a number and false otherwise.
Sorting numbers before letters: The first if statement checks if a is a number ( aIsNumber is true) and b is not a number ( bIsNumber is false). In this case, we return -1 to indicate that a should come before b in the sorted order.
Sorting letters after numbers: The second if statement checks if a is not a number ( aIsNumber is false) and b is a number ( bIsNumber is true). Here, we return 1 to indicate that b should come after a in the sorted order.
Sorting numbers numerically: The third if statement checks if both a and b are numbers (aIsNumber and bIsNumber are both true). In this case, we perform a numeric comparison by subtracting b from a. The result of this subtraction determines the relative order of the numbers.
Sorting letters alphabetically: If none of the previous conditions are met, it means both a and b are strings (letters). We then use the localeCompare() function to perform an alphabetical comparison and determine the order of the letters.

By applying this custom comparison logic, the array items is sorted in the desired order. Numbers appear before letters, and within each group, the elements are sorted numerically and alphabetically, respectively. The resulting sorted array is ["1", "2", "3", "a", "b", "c"].

Explanation of Sorting in Descending Order

In the code snippet provided, the goal is to sort an array of tastes in descending order. Instead of using the sort(compareFn) approach, the sort(compareFn) function is used with a custom comparison function to achieve the desired result. Let's break down the code:

javascript
const tastes = [
"Margherita",
"Napoletana",
"Quattro Formaggi",
"Primavera",
"Marinara",
"Boscaiola",
"Bufala",
];
const sortedArray = tastes.sort((a, b) => b.localeCompare(a));
console.log(sortedArray);
// Output:
["Quattro Formaggi", "Primavera", "Napoletana", "Margherita", "Marinara", "Bufala", "Boscaiola"]

The sort() function takes a comparison function as an argument, which defines the custom sorting logic. In this case, the comparison function (a, b) => b.localeCompare(a) is used.

By default, the localeCompare() function compares strings in ascending alphabetical order. However, to achieve descending order, the comparison is inverted by comparing `b` to `a` instead of the usual `a` to `b`. This reversal of the operands ensures that the comparison is performed in the desired descending order.

As a result, the array `tastes` is sorted in descending order, and the sorted array `sortedArray` contains the elements ["Napoletana", "Quattro Formaggi", "Marinara", "Margherita", "Primavera", "Bufala", "Boscaiola"]`.

It's worth noting that this approach works specifically for sorting an array of strings. If you're sorting numbers or objects based on a specific property, the comparison logic will differ.

When it comes to the performance of sorting arrays, there are several factors to consider, including the JavaScript engine, array size, and complexity of the custom sorting function. The performance can vary based on these factors.

In general, the built-in sort() method tends to be highly optimized by ECMAScript implementations, making it very efficient for most sorting scenarios. It utilizes internal algorithms that are designed to handle a wide range of use cases and perform well in various scenarios.

On the other hand, using a custom comparison function with the sort(compareFn) method introduces additional complexity to the sorting process. The execution time of the custom function can impact the overall performance, especially for large arrays or if the custom logic involves complex computations.

In the example you provided, sorting an array of 100 words in ascending order, the sort(compareFn) implementation was faster than the default sort() method. However, when sorting in descending order, the sort(compareFn) chaining was faster than the sort(compareFn) approach.

The difference in execution time between the two approaches may seem small (e.g., 6ms), but it can become more significant as the array size grows or when dealing with more complex sorting requirements.

As a general guideline, it's recommended to use the default sort() method whenever possible, as it is optimized and performs well for most use cases. Reserve the use of custom comparison functions for situations where you have specific and complex sorting requirements that cannot be achieved with the default sorting behavior.

Ultimately, it's important to consider the trade-off between customization and performance when deciding which approach to use for sorting arrays.

Conclusion

That concludes the discussion on the JavaScript sort() function. Throughout the article, we covered the basics of the sort() function, delved into its inner workings, and explored various use cases and examples to illustrate its versatility. We also discussed some considerations and performance implications when working with the sort() function.

I'm glad you found the article helpful in gaining a better understanding of the sort() function and its capabilities. If you have any more questions or need further assistance, feel free to ask. Additionally, you can follow me on Twitter at gWeaths to stay updated on any future articles or information.

Thank you for your engagement, and happy coding!

The Payment Request API: Revolutionizing Online Payments (Part 2)

Salvietta150x40 — Mon, 05 Jun 2023 15:31:00 +0000

our case, for testing purposes to simulate transactions without making real payments.

apiVersion: 2 and apiVersionMinor: 0 specify the version of the Google Pay API being used. In this case, we use version 2.0.

We proceed by adding the merchantInfo object specifying information about the merchant accepting the payment.

merchantIdentifier, which we specified earlier, is a unique identifier assigned to the merchant by Google Pay.

merchantName specifies the name of the merchant.

Here's the code:

{
supportedMethods: ['https://google.com/pay'],
        data: {
        environment: "TEST",
                apiVersion: 2,
                apiVersionMinor: 0,
                merchantInfo: {
                merchantIdentifier: '12345678901234567890',
                        merchantName: "Example Merchant"
                        },
                allowedPaymentMethods: ['TOKENIZED_CARD', 'CARD'],
                },
        },

In summary, this code block sets up the configuration for integrating Google Pay as a supported payment method. It includes specifying the environment, API version, merchant information, and allowed payment methods for Google Pay. This configuration enables users to choose Google Pay as a payment option when making a transaction on your web application.

The next step is the configuration of the paymentOptions object, with which you can customize the behavior and appearance of the payment request to suit your specific needs. These options allow you to collect the necessary information from the payer and facilitate the payment process.

The paymentOptions object is an object that contains various options or settings related to the payment request. It provides configuration for how the payment request should be displayed and what information it should collect from the payer. Let's go through each property of the paymentOptions object:

requestPayerName:

This property determines whether the payment request should prompt the user to provide their name.
If set to true, the payment sheet will include a field where the payer can enter their name.

requestPayerEmail:

This property specifies whether the payment request should prompt the user to enter their email address.
When set to true, the payment sheet will include a field where the payer can enter their email address.

requestPayerPhone:

This property indicates whether the payment request should ask the user to provide their phone number.
If set to true, the payment sheet will include a field for the payer to enter their phone number.

requestShipping:

This property determines whether the payment request should include a section for the payer to enter their shipping address.
If set to true, the payment sheet will prompt the user to enter their shipping address.

shippingType:

This property specifies the type of shipping requested from the user.
In this case, the value is set to "shipping", indicating that the requested shipping is for physical goods to be delivered to the payer's address.

The next major change to the previous code, is the addition of used to retrieve an HTML element from the DOM with the id attribute set to "response".

const response = document.getElementById("response");

The purpose of this line is to obtain a reference to an element in the HTML document where you want to display the response or status of the payment request. By using document.getElementById("response"), you can access and manipulate the content of that specific element.

After retrieving the element using document.getElementById("response"), the reference is stored in the response constant. Later in the code, the content of this element is updated based on the outcome of the payment request. For example, if the payment is successful, a text is displayed within the response element.

We are now going to modify the code that sets up an event listener for a button click and shows a payment request sheet to the user, handles the payment response, and provides appropriate feedback messages to the user based on the outcome of the payment process.

// Add an event listener to the paymentButton
paymentButton.addEventListener('click', async () => {
try {
// Show the payment request sheet to the user
const paymentResponse = await paymentRequest.show();

In this part, an event listener is added to the paymentButton element. It listens for a 'click' event and executes the callback function when the button is clicked. The callback function is defined as an asynchronous function, denoted by the async keyword. Inside the callback function, the code attempts to show the payment request sheet to the user by calling paymentRequest.show(). This function displays a sheet or dialog where the user can enter their payment information.

// Process the payment response
if (paymentResponse) {
// If a payment response is received
await paymentResponse.complete('success'); // Complete the payment
        await processPaymentResponse(paymentResponse); // Process the payment response
        response.innerText = 'thanks for your purchase'; // Display a success message
        } else {
// If the payment request is canceled
response.innerText = 'Payment request canceled.'; // Display a cancellation message
        }
} catch (error) {
// If an error occurs during the payment request
console.error('Payment request failed:', error); // Log the error to the console
        response.innerText = 'Sorry, something went wrong.'; // Display an error message
        }
});

After showing the payment request sheet, the code checks if a paymentResponse object is received. If a response is present, it means the user has completed the payment process.

In the case of a successful payment response, the code proceeds to complete the payment by calling paymentResponse.complete('success'). This informs the payment system that the payment was successful. Then, it calls the processPaymentResponse function, passing the paymentResponse object as an argument. This function is responsible for handling the payment response and performing any necessary actions based on the response.

Finally, it updates the response element with a success message.

If the payment request is canceled (no paymentResponse object), the code updates the response element with a cancellation message.

If an error occurs during the payment request, the code catches the error in the catch block. It logs the error message to the console using console.error and updates the response element with an error message.

// Define a function to process the payment response
async function processPaymentResponse(paymentResponse) {
// Handle the payment response here
// Implement the necessary logic based on the response
  console.log('Processing payment response:', paymentResponse);
// ...
}

The processPaymentResponse function is defined separately, outside the event listener. It is an asynchronous function that takes the paymentResponse object as an argument. This function can be implemented to handle the payment response as needed. In the code provided, it logs the paymentResponse object to the console.

Clearly, you can modify this function to perform any specific logic required for processing the payment response.

I am sure this is the part that many of you have been waiting for, a demo to try it out for yourself: feel free to try out this CodePen.

The Payment Request API: Revolutionizing Online Payments (Part 1)

Salvietta150x40 — Sun, 04 Jun 2023 13:15:00 +0000

The Payment Request API has emerged as the new standard for online payments, transforming the way transactions are conducted on the internet. In this two-part series, we will delve into the intricacies of this powerful API and explore how it simplifies the payment experience for both users and merchants.

The Payment Request API serves as a bridge between merchants and users, enabling seamless and secure payments. With its integration into modern browsers, the API allows websites to request payment information from users, such as credit card details or digital wallet credentials, in a standardized and user-friendly manner. By eliminating the need for manual form-filling and offering a consistent payment interface across different platforms, the API significantly enhances the checkout process.

To illustrate the simplicity of integrating the Payment Request API, let's consider an example. The following code demonstrates how to create a basic payment request:

THE HTML

<!--The button with the id paymentButton triggers the payment process when clicked.-->
<button id="paymentButton">Pay Now</button> 
<div id="response">We do not charge you anything, it is just a test!</div>

THE JAVASCRIPT

// Define the supported payment methods
const supportedPaymentMethods = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard'],
    },
  },
  {
    supportedMethods: ['https://google.com/pay'],
    data: {
      merchantIdentifier: '0123456789',
      allowedPaymentMethods: ['TOKENIZED_CARD', 'CARD'],
    },
  },
];
// Define the payment details
const paymentDetails = {
  total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: '100.00',
    },
  },
  displayItems: [
    {
      label: 'Product A',
      amount: {
        currency: 'USD',
        value: '50.00',
      },
    },
    {
      label: 'Product B',
      amount: {
        currency: 'USD',
        value: '50.00',
      },
    },
  ],
};
// Create a payment request
const paymentRequest = new PaymentRequest(supportedPaymentMethods, paymentDetails);
// Display the payment sheet when the user clicks a button
const paymentButton = document.getElementById('paymentButton');
paymentButton.addEventListener('click', async () => {
  try {
// Show the payment request sheet to the user
    const paymentResponse = await paymentRequest.show();
// Process the payment response
    await processPaymentResponse(paymentResponse);
  } catch (error) {
    console.error('Error processing payment:', error);
  }
});
// Process the payment response      
async function processPaymentResponse(paymentResponse) {
// Implement your logic to handle the payment response here        
// This function will be called when the user completes the payment      
}

And now, let's have a look at the last part of the code, explaining the code step by step.

First of all, we create a Payment Request Object using the PaymentRequest() constructor.

const paymentRequest = new PaymentRequest(supportedPaymentMethods, paymentDetails);

The PaymentRequest object is created with two parameters: supportedPaymentMethods and paymentDetails. The supportedPaymentMethods is an array that defines, as suggested, the supported payment methods, such as credit cards or third-party payment providers.

The paymentDetails object specifies the details of the payment, including the total amount and individual items.

Let's continue:

const paymentButton = document.getElementById('paymentButton');
// Display the payment sheet when the user clicks a button
paymentButton.addEventListener('click', async () => {
  try {
// Show the payment request sheet to the user
    const paymentResponse = await paymentRequest.show();
// Process the payment response
    await processPaymentResponse(paymentResponse);
  } catch (error) {
    console.error('Error processing payment:', error);
  }
});

In the first line, we define the paymentButton variable by retrieving the element using document.getElementById.

Then, an event listener is added to a button with the id paymentButton. When the button is clicked, the click event is triggered. Inside the event handler, the show() method of the paymentRequest object is called to display the payment sheet to the user. This method returns a promise that resolves with a PaymentResponse object when the user completes or cancels the payment.

If the payment is completed, the processPaymentResponse() function is called with the paymentResponse as an argument to handle the payment response. If an error occurs during the payment process, it is caught in the catch block, and an error message is logged to the console.

In the following code, we define the supported methods:

// Define the supported payment methods
const supportedPaymentMethods = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard'],
    },
  },
  {
    supportedMethods: ['https://google.com/pay'],
    data: {
      merchantIdentifier: '0123456789',
      allowedPaymentMethods: ['TOKENIZED_CARD', 'CARD'],
    },
  },
];

The supportedPaymentMethods variable is an array that defines the supported payment methods. In this example, two methods are defined: basic-card and https://google.com/pay. The basic-card method supports credit cards with the visa and mastercard networks. The https://google.com/pay method is a custom payment method provided by Google Pay, and it requires the merchant identifier and the allowed payment methods to be specified.

Clearly the choice of supported payment methods depends on your specific requirements and the target audience of your application or website. Here are some commonly used payment methods that you may consider adding to the supportedPaymentMethods array:

1. Credit Cards:
' basic-card': This method supports basic credit card payments. It is widely supported and allows users to enter their card details manually.

2. Digital Wallets:
https://google.com/pay: This method enables users to pay using Google Pay. It requires the merchant identifier and supports various payment methods provided by Google Pay.
https://apple.com/apple-pay: This method enables users to pay using Apple Pay. It requires additional configuration and supports Apple Pay as a payment method.
' https://www.paypal.com/webapps/mpp/paypal-checkout`: This method integrates PayPal Checkout, allowing users to pay with their PayPal accounts.

3. Bank Transfers:
https://secure.checkout.example/bank: This method allows users to initiate bank transfers directly from their bank accounts.

4. Cryptocurrencies:
https://example.com/bitcoin: This method supports payments using cryptocurrencies like Bitcoin or Ethereum. It requires integration with a cryptocurrency payment processor.

5. Local Payment Methods:
https://example.com/local-payment: This method represents a custom local payment method specific to your region or target audience. It would require integration with a local payment provider.

It's important to note that the availability and support for these payment methods may vary depending on the payment processor or platform you are using. You should consult the documentation of your payment provider or platform to identify the specific supported payment methods they offer.

Consistent with the choice to use https://google.com/pay, the allowedPaymentMethods property is set to ['TOKENIZED_CARD', 'CARD']. These values represent the specific payment methods allowed within the Google Pay integration.

The allowedPaymentMethods property helps define the available options within a payment method. For example, it could be used to differentiate between credit card payments and tokenized card payments (where the card details are stored securely by the payment provider).

By specifying the allowed payment methods, you can control the options presented to the user during the payment process. It allows you to tailor the payment experience based on your specific integration requirements and the capabilities of the payment provider or platform you are working with.

In the code that follows, we will define the payment details:

// Define the payment details
const paymentDetails = {
  total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: '100.00',
    },
  },
  displayItems: [
    {
      label: 'Product A',
      amount: {
        currency: 'USD',
        value: '50.00',
      },
    },
    {
      label: 'Product B',
      amount: {
        currency: 'USD',
        value: '50.00',
      },
    },
  ],
};

As the paymentDetails variable name suggested, it specifies the details of the payment. It includes a total object that defines the total amount to be paid. In this case, the total is $100.00 USD. The displayItems array contains individual items included in the payment, such as 'Product A' and 'Product B', each with a value of $50.00 USD.

Overall, this code sets up a payment request with supported payment methods and payment details, shows a payment sheet when a button is clicked, and handles the payment response.

When the paymentButton is clicked, the click event handler is triggered. It calls the show() method on the paymentRequest object, which displays the payment sheet to the user. The user will be presented with a UI to choose a payment method and enter payment details.

If the user completes the payment, the show() method will resolve with a PaymentResponse object, which represents the user's payment authorization. This response is then passed to the processPaymentResponse() function for further processing. The processPaymentResponse() function is not shown in the code snippet you provided, but it would typically handle the payment response by sending it to a server for verification and processing the payment on the server-side.

On the other hand, if the user cancels the payment or an error occurs during the payment process, the catch block will be executed, and an error message will be logged to the console.

Overall, this code demonstrates a basic implementation of the Payment Request API, where the user is presented with a payment sheet, and the payment response is processed asynchronously. The specific implementation of the processPaymentResponse() function and the subsequent steps for handling the payment will depend on the requirements of the application or website where this code is being used.

By utilizing the Payment Request API, websites can streamline the payment experience for users. It provides a standardized and user-friendly interface, supports multiple payment methods, and enhances security through tokenization.

In addiction, here are some useful links to the Mozilla Developer Network (MDN) documentation that provide more detailed information about the Payment Request API, including browser support:

Payment Request API - MDN Web Docs: This page provides an overview of the Payment Request API, including its purpose, browser compatibility, and key concepts. It covers the basic usage of the API and provides examples to help you get started.
PaymentRequest - MDN Web Docs: This is the specific documentation for the PaymentRequest interface. It explains the properties, methods, and events associated with the PaymentRequest object. It also provides examples and usage guidelines for creating payment requests.
PaymentResponse - MDN Web Docs: This page focuses on the PaymentResponse interface, which represents the user's response to a payment request. It explains the properties and methods available on the PaymentResponse object and provides examples of how to handle and process the payment response.

Additionally, you can refer to the Can I use website, which provides up-to-date information on browser support for the Payment Request API. It shows a detailed breakdown of support across different browsers and versions, helping you understand the compatibility of the API.

By referring to these resources, you'll be able to get a more comprehensive understanding of the Payment Request API, its usage, and the browser support you can expect.

In conclusion, the Payment Request API simplifies the payment process for users and merchants alike. By incorporating this API into their websites, businesses can create a seamless and secure payment experience, resulting in improved customer satisfaction and increased conversion rates.

In the next part of this series, we will explore advanced features and how to process the payment response.

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

Salvietta150x40 — Fri, 02 Jun 2023 11:25:00 +0000

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images and text, can be drawn and manipulated with great flexibility and control.

Here are some key concepts about HTML5 Canvas:

1. Canvas element: The <canvas> element is the base of the canvas on which the graphics are drawn. It is defined by HTML tags and can be sized using the `width` and `height` attributes. All graphic elements are drawn within this canvas.

2. Context: The context (`context`) is the object that provides methods and properties for drawing on the canvas. There are two types of context: 2D and WebGL. For 2D graphics, the 2D context (`context2d`) is used, which is more common. To access the 2D context, you use the getContext('2d') method on the <canvas> element.

3. Coordinates and coordinate system: The Canvas canvas uses a coordinate system in which `(0, 0)` represents the upper left corner of the canvas and positive coordinates increase downwards and to the right. This means that the highest values of `x` are to the right and the highest values of `y` are to the bottom.

4. Drawing methods: The 2D context provides a wide range of methods for drawing different graphical elements on the canvas, such as lines, rectangles, circles, curves, images and text. Some of the most common methods include fillRect(), strokeRect(), arc(), drawImage() y fillText().

5. Styles and attributes: The 2D context also allows you to set styles and attributes for graphic elements. You can set stroke and fill colours, line thickness, typography and other attributes that affect the visual appearance of graphics.

6. Animations: One of the advantages of HTML5 Canvas is its ability to create fluid and dynamic animations. This can be achieved by using techniques such as periodic updating of the canvas, the use of the requestAnimationFrame() and the manipulation of the graphic elements in each frame.

HTML5 Canvas offers a wide range of creative possibilities and is used in many areas, such as online games, data visualisations, interactive applications and generative graphics. It is a powerful tool for web development and gives developers complete control over the graphical representation in the browser.

In this tutorial we are going to explain how to use the Canvas element to create a simple colour picker.

We start with the basic HTML code of the page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Colorpicker demo</title>
</head>
<body>

We go on to define some CSS styles for the elements on the page. Styles are set for the body, a header (h2) and a Google Fonts font called "Open Sans" is imported.

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
h2 {
background-color: #dbdbdb;
margin: 0;
margin-bottom: 15px;
padding: 10px;
font-family: 'Open Sans';
}
/* Additional CSS for page elements */

We continue with our heading indicating the purpose of the colour picker.

<h2>Canvas Color Picker</h2>

Then we create the two elements that will display the selected colour in RGBA and HEX format: the identifiers txtRgba and txtHex will be used to update the values later from the JavaScript code.

<label for="color-input" id="color-label" style="background-color: red"></label>
<input type="checkbox" id="color-input" checked></input>

Aquí creamos una etiqueta <label> con el identificador color-label. Esta etiqueta se utiliza como muestra visual del color seleccionado. También hay un <input> de tipo checkbox con el identificador color-input, que se utiliza para controlar la visibilidad del selector de color.

Next we create a <div> container with the colour-picker identifier, which contains two <canvas> elements. The first <canvas> with the colour-block identifier is used as the main canvas where the colour is selected. The second <canvas> with the colour-strip identifier is used to display a colour strip to select the saturation component of the colour.

<div id="color-picker">
<canvas id="color-block" height="150" width="150"></canvas>
<canvas id="color-strip" height="150" width="30"></canvas>
</div>

Now the fun begins...
Let's see how our JavaScript works:

<script type="text/javascript">
// This is where the JavaScript code block begins
var colorBlock = document.getElementById('color-block');
var ctx1 = colorBlock.getContext('2d');
var width1 = colorBlock.width;
var height1 = colorBlock.height;

These lines of code get the main canvas element with the identifier "colour-block" from the HTML document. Then, the 2d context of the canvas is fetched using getContext('2d'). We also store the dimensions (width and height) of the canvas in the variables width1 and height1. We continue:

var colorStrip = document.getElementById('color-strip');
var ctx2 = colorStrip.getContext('2d');
var width2 = colorStrip.width;
var height2 = colorStrip.height;

As you can see, the code is similar to the previous one, but in this case they obtain the canvas element of the colour strip with the identifier "colour-strip". The 2d context of the canvas is obtained and the dimensions are stored in the variables width2 and height2.

Now we have to get the HTML document elements with the identifiers "colour-label", "txtRgba" and "txtHex" and we have to store them in corresponding variables. These elements are used to display and update the selected colour values.

var colorLabel = document.getElementById('color-label');
var txtRgba = document.getElementById('txtRgba');
var txtHex = document.getElementById('txtHex');

Let's add the variables needed to track the position of the mouse on the canvas to control whether it is dragging or not: x and y store the mouse coordinates, drag indicates whether the mouse is dragging and rgbaColor stores the initial value of the colour in RGBA format (red, green, blue and transparency).

var x = 0;
var y = 0;
var drag = false;
var rgbaColor = 'rgba(255,0,0,1)';

And now we define the colour gradients on the canvases. In the canvas colourBlock, we draw a rectangle that covers the whole canvas and then call the fill function

ctx1.rect(0, 0, width1, height1);
fillGradient();
ctx2.rect(0, 0, width2, height2);
var grd1 = ctx2.createLinearGradient(0, 0, 0, height1);
grd1.addColorStop(0, 'rgba(255, 0, 0, 1)');
grd1.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
grd1.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
grd1.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
grd1.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
grd1.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
grd1.addColorStop(1, 'rgba(255, 0, 0, 1)');
ctx2.fillStyle = grd1;
ctx2.fill();

We add the function that is executed when you click on the colour strip canvas (colourStrip) with the following characteristics: when you click, you have to get the coordinates (offsetX and offsetY) of the point where you clicked. Then, the pixel colour corresponding to those coordinates is obtained using getImageData(). The result is stored in imageData, which is an object containing information about the RGBA components of the pixel. An rgbaColor string is constructed using these values and the fillGradient() function is called to update the colour in the main canvas.

function click(e) {
x = e.offsetX;
y = e.offsetY;
var imageData = ctx2.getImageData(x, y, 1, 1).data;
rgbaColor = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';
fillGradient();
}

We create the function fillGradient() which draws the gradients on the main canvas (colourBlock) to represent the selected colour. First, the fill colour is set to ctx1 with the value of rgbaColor and a rectangle is drawn covering the whole canvas. Then, two linear gradients, grdWhite and grdBlack, are created using the canvas context of the colour strip (ctx2). These gradients are used to create a gradient effect on the main canvas, providing areas of black and white to adjust the brightness and contrast of the selected colour.

function fillGradient() {
ctx1.fillStyle = rgbaColor;
ctx1.fillRect(0, 0, width1, height1);
var grdWhite = ctx2.createLinearGradient(0, 0, width1, 0);
grdWhite.addColorStop(0, 'rgba(255,255,255,1)');
grdWhite.addColorStop(1, 'rgba(255,255,255,0)');
ctx1.fillStyle = grdWhite;
ctx1.fillRect(0, 0, width1, height1);
var grdBlack = ctx2.createLinearGradient(0, 0, 0, height1);
grdBlack.addColorStop(0, 'rgba(0,0,0,0)');
grdBlack.addColorStop(1, 'rgba(0,0,0,1)');
ctx1.fillStyle = grdBlack;
ctx1.fillRect(0, 0, width1, height1);
}

The following functions are used to control the user's interaction with the main canvas (colourBlock). When the user presses the mouse button inside the canvas (mousedown), drag is set to true to indicate dragging. The changeColor() function is called to update the selected colour.

During mousemove, if drag is true, changeColor()is called to update the selected colour while dragging the mouse.

When the mouse button is released inside the canvas (mouseup), drag is set to false to indicate that dragging is finished.

function mousedown(e) {
drag = true;
changeColor(e);
}
function mousemove(e) {
if (drag) {
changeColor(e);
}
}
function mouseup(e) {
drag = false;
}

Let's go ahead with the code for the changeColor() function used to update the selected colour when the user interacts with the main canvas. First, we get the coordinates of the point where the interaction occurred (offsetX and offsetY). Then, the corresponding pixel colour is obtained using getImageData()and the rgbaColor variable is updated.

After that, the background colour of the colourLabel element is updated with the selected colour, the colour value is displayed in RGBA format in the txtRgba element and the colour is converted from RGBA to hexadecimal format using the rgbaToHex() function. The result is displayed in the txtHex element and is also printed to the console.

function changeColor(e) {
x = e.offsetX;
y = e.offsetY;
var imageData = ctx1.getImageData(x, y, 1, 1).data;
rgbaColor = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';
colorLabel.style.backgroundColor = rgbaColor;
txtRgba.innerHTML = rgbaColor;
var hexColor = rgbaToHex(rgbaColor);
console.log(hexColor);
txtHex.innerHTML = hexColor;
}

These next lines of code assign the event handlers to the canvas elements and the colour strip element. When the colour strip is clicked, the click() function is executed. When the mouse is pressed, released or moved within the main canvas, the corresponding functions ( mousedown(), mouseup(), mousemove()) are executed to control the interaction and update the selected colour.

colorStrip.addEventListener("click", click, false);
colorBlock.addEventListener("mousedown", mousedown, false);
colorBlock.addEventListener("mouseup", mouseup, false);
colorBlock.addEventListener("mousemove", mousemove, false);

The rgbaToHex()function converts a colour in RGBA format to hexadecimal format. First, the R, G, B and A component values of the RGBA colour are extracted using regular expressions. Then, the R, G and B values are converted to hexadecimal format using toString(16) and padStart(2, '0')to make sure they have two digits. Finally, the hexadecimal values are combined and the colour is returned in hexadecimal format.

function rgbaToHex(rgbaColor) {
var values = rgbaColor.match(/d+/g);
var r = parseInt(values[0]);
var g = parseInt(values[1]);
var b = parseInt(values[2]);
var a = parseFloat(values[3]);
var hexR = r.toString(16).padStart(2, '0');
var hexG = g.toString(16).padStart(2, '0');
var hexB = b.toString(16).padStart(2, '0');
var hexColor = '#' + hexR + hexG + hexB;
return hexColor;
}

Here is all the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Colorpicker demo</title>
</head>
<body>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
h2 {
background-color: #dbdbdb;
margin: 0;
margin-bottom: 15px;
padding: 10px;
font-family: 'Open Sans';
}
#color-input {
display: none;
}
#color-label {
margin-left: 15px;
position: absolute;
height: 30px;
width: 50px;
} 
#color-input:checked ~ #color-picker {
opacity: 1;
}
#color-picker {
position: absolute;
left: 70px; 
background-color: white;
height: 150px;
width: 185px;
border: solid 1px #ccc;
opacity: 0;
padding: 5px;
}
canvas:hover {
cursor: crosshair;
}
</style>
<h2>Canvas Color Picker</h2>
<div><p>Color in RGBA is: <span id="txtRgba"></span> </p>
<div><p>Color in HEX is: <span id="txtHex"></span> </p>
</div>
<label for="color-input" id="color-label" style="background-color: red"></label>
<input type="checkbox" id="color-input" checked></input>
<div id="color-picker">
<canvas id="color-block" height="150" width="150"></canvas>
<canvas id="color-strip" height="150" width="30"></canvas>
</div>
<script type="text/javascript">
var colorBlock = document.getElementById('color-block');
var ctx1 = colorBlock.getContext('2d');
var width1 = colorBlock.width;
var height1 = colorBlock.height;
var colorStrip = document.getElementById('color-strip');
var ctx2 = colorStrip.getContext('2d');
var width2 = colorStrip.width;
var height2 = colorStrip.height;
var colorLabel = document.getElementById('color-label');
var txtRgba = document.getElementById('txtRgba');
var txtHex = document.getElementById('txtHex');
var x = 0;
var y = 0;
var drag = false;
var rgbaColor = 'rgba(255,0,0,1)';
ctx1.rect(0, 0, width1, height1);
fillGradient();
ctx2.rect(0, 0, width2, height2);
var grd1 = ctx2.createLinearGradient(0, 0, 0, height1);
grd1.addColorStop(0, 'rgba(255, 0, 0, 1)');
grd1.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
grd1.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
grd1.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
grd1.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
grd1.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
grd1.addColorStop(1, 'rgba(255, 0, 0, 1)');
ctx2.fillStyle = grd1;
ctx2.fill();
function click(e) {
x = e.offsetX;
y = e.offsetY;
var imageData = ctx2.getImageData(x, y, 1, 1).data;
rgbaColor = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';
fillGradient();
}
function fillGradient() {
ctx1.fillStyle = rgbaColor;
ctx1.fillRect(0, 0, width1, height1);
var grdWhite = ctx2.createLinearGradient(0, 0, width1, 0);
grdWhite.addColorStop(0, 'rgba(255,255,255,1)');
grdWhite.addColorStop(1, 'rgba(255,255,255,0)');
ctx1.fillStyle = grdWhite;
ctx1.fillRect(0, 0, width1, height1);
var grdBlack = ctx2.createLinearGradient(0, 0, 0, height1);
grdBlack.addColorStop(0, 'rgba(0,0,0,0)');
grdBlack.addColorStop(1, 'rgba(0,0,0,1)');
ctx1.fillStyle = grdBlack;
ctx1.fillRect(0, 0, width1, height1);
}
function mousedown(e) {
drag = true;
changeColor(e);
}
function mousemove(e) {
if (drag) {
changeColor(e);
}
}
function mouseup(e) {
drag = false;
}
function changeColor(e) {
x = e.offsetX;
y = e.offsetY;
var imageData = ctx1.getImageData(x, y, 1, 1).data;
rgbaColor = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';
colorLabel.style.backgroundColor = rgbaColor;
txtRgba.innerHTML = rgbaColor;
var hexColor = rgbaToHex(rgbaColor);
console.log(hexColor);
txtHex.innerHTML = hexColor;
}
colorStrip.addEventListener("click", click, false);
colorBlock.addEventListener("mousedown", mousedown, false);
colorBlock.addEventListener("mouseup", mouseup, false);
colorBlock.addEventListener("mousemove", mousemove, false);
function rgbaToHex(rgbaColor) {
var values = rgbaColor.match(/d+/g);
var r = parseInt(values[0]);
var g = parseInt(values[1]);
var b = parseInt(values[2]);
var a = parseFloat(values[3]);
var hexR = r.toString(16).padStart(2, '0');
var hexG = g.toString(16).padStart(2, '0');
var hexB = b.toString(16).padStart(2, '0');
var hexColor = '#' + hexR + hexG + hexB;
return hexColor;
}
</script>
</body>
</html>

I hope that this tutorial has demonstrated the great potential that exists in developing applications using Canvas. There are much more advanced applications, and even games are being developed using this technology. It is therefore a field worth exploring, as it offers the possibility to create amazing and surprising things.

How to connect to MySQL with Node.js

Salvietta150x40 — Thu, 04 Nov 2021 17:51:00 +0000

Let's see how you can connect to a MySQL database using Node.js, the popular JavaScript runtime environment.
Before we start, it is important to note that you must have Node.js installed on your system. Likewise, you must create a MySQL database.

Create a MySQL database

If you haven't already done so, you can create the database in any way you like. You can create it using applications such as phpMyAdmin or manually using the MySQL command line. To create it via the command line, follow these steps:
Connect to MySQL from the command line and enter the password when prompted:

mysql -u USER -p

Create a sample table, which in this case we will call employees:

CREATE DATABASE employees;

Select the database you have just created:

USE employees;

Create a table in the database:

CREATE TABLE IF NOT EXISTS employees (    
id int(11) NOT NULL AUTO_INCREMENT,    
name varchar(50),    
PRIMARY KEY (id)  
);

Insert some example data in the table:

INSERT INTO employees (nombre) VALUES ("Silvia");  
INSERT INTO employees (nombre) VALUES ("Luigi");  
INSERT INTO employees (nombre) VALUES ("Alejandro");

You can now run queries on the table.

Install node-mysql

You will need to have the node-mysql package installed, so if you don't have it installed, you will need to install it. To do this you must use the npm package manager:

npm install mysql

After installing node-mysql you will be able to connect to the database via Node.js.

Establish the MySQL connection

Create a Node.js script.
The first thing we do in this example is create a connection object to the MySQL database.
We use the table employees as an example, but replace it with the name of the database you want to use. Similarly, replace USER and PASS with the MySQL user data.

var mysql = require('mysql');  
var conexion= mysql.createConnection({      
   host : 'localhost',      
   database : 'employees',      
   user : 'USER',      
   password : 'PASS',  
});    
conexion.connect(function(err) {     
   if (err) {          
       console.error('Error de conexion: ' + err.stack);          
       return;      
   }      
   console.log('Connected to the identifier ' + conexion.threadId); 
});

Once the connection is established, you will be able to execute queries using the query method:

conexion.query('SELECT * FROM empleados', function (error, results, fields) {
      if (error)          
          throw error;        
      results.forEach(result => {          
      console.log(result);      
      });  
});

Finally, terminate the connection:

connection.end();

And that's it. If you want more information about node-mysql, we recommend you to consult this guide.

JavaScript Programming Styles: Best Practices

Salvietta150x40 — Thu, 28 Oct 2021 10:40:00 +0000

When programming with JavaScript there are certain conventions that you should
apply, especially when working in a team environment. In fact, it is common to
have meetings to discuss standards to follow. The reason is that code is much
more readable when certain standards are followed. We have already seen in
another article some of the worst JavaScript practices, explaining certain
things to avoid. But when we talk about good practices we are not only
referring to those that have a better performance, but also to the way you
program. In addition to making sure that the code is syntactically correct,
you should also be concerned about styles; that is, things like where you
place the opening and closing braces or the spaces you use as indentation or
indentation in the code.

What are programming styles

Programming styles are nothing more than an agreement you make with your team
and yourself about the styles and standards you will follow in a project. The
goal of following a style is to achieve a consistent result, with code that is
easy to understand and maintain. Even if you are working alone on a personal
project you should follow certain standards. You may not see why during its
initial release, but you will when you modify the code in a few months or when
another programmer starts working on the project as well.

The importance of styles

Programming is something similar to craftsmanship, where factors such as
creativity, perseverance and expertise come into play. For example, you can
paint a wall and leave it smooth, with everything perfectly clean around you,
or you can paint the wall with irregularities or hand marks, fill the floor
with paint, and leave it all over. The same thing happens with programming,
becoming even more important, because when many programmers modify the same
code over and over again, if each one applies his own rules, the result may
look more like the second case.

It is very common that some inexperienced programmers do not care about this,
since they have not yet been able to understand its importance. I was also one
of them and absolutely all programmers have been. Besides, it is in this kind
of little things where the team leaders will perceive your experience.

Sets of style standards

There are different sets of standards that you could follow. Each company has
its own, and that is what styles are all about, following the same ones within
the framework of a company or project, without there being a set that is
better or worse. Here are the two most famous sets of styles:

On the one hand you have the Google JavaScript styles.
On the other hand you have the AirBnb JavaScript styles.

In my case, the styles I follow are very similar to AirBnb's, as they are the
ones I've gotten used to in the companies I've worked for. If you prefer
another set use it, but don't change it until you finish the project.
You also have the option of using tools like ESLint or Prettier, which somehow
force you to use certain rules.

Method, function and variable notation

There are different types of notations that you could follow when defining the
names of functions and variables. The most famous are the following:

Camel Case: This style combines the words of the names you
define, setting the first letter of each word to be capitalized except for the
first word, with the rest of the letters being lowercase. If you wanted to
define an account management function using Camel Case, its name would be
accountManagement.

Pascal Case: This style combines the words of the names you
define, establishing that the first letter of each word is in upper case,
including the first word, the rest of the letters being in lower case. If you
wanted to define an account management function using Pascal Case its name
would be GestionDeCuentas.

Snake Case: This style combines the words of the names you
define, setting all letters to lower case and all words to be separated by an
underscore. If you wanted to define an account management function using Snake
Case its name would be account_management.

Kebab Case: This style combines the words of the names you
define, setting all letters to lower case and all words to be separated by a
hyphen. If you wanted to define an account management function using Snake
Case its name would be account-management.

There is no better method, although the truth is that in JavaScript the Kebab
Case would be practically discarded. The usual is to use Pascal Case for class
names and Pascal Case for almost everything else, although there are many
developers who prefer to define variable names with Snake Case. If you want
more examples, see the guide with the different types of notation for names.

Rules to use: Yours

That's the way it is and will be as long as you are consistent. Here are mine,
which although they are very similar to AirBnb's, they don't coincide 100%:

Semicolons: Many developers choose not to put them at the
end of each line, although in my case I use them religiously at the end of
each line to avoid possible problems that could occur in some cases.
¡
Spaces: I always prefer to use more spaces than less. I
usually use them whenever I close a parenthesis unless it is the end of a line
and also before and after the symbols of arithmetic operations such as +, -, /
or *, checks or conditions.

Blank lines: I use a line break to separate blocks of code
that deal with different logical operations. This way I think it is easier to
read the code.

Indenting: I use 4 spaces instead of pressing the tab key. It
is also common to use two spaces.

Line length: The length of my lines does not exceed 120
characters. Many developers opt for 80 characters, but I find it too short. I
have a bad habit of using lines that are too long.

Comments: I usually use comment blocks to document the code, and in case of commenting something, I write the comment in the line above the one I want to comment instead of writing it at the end of the line. In the same way, I only write the comments that are necessary. That is, I don't use comments when the code blocks that follow the JSDoc standard are sufficient or when the variable names make it very easy to understand what I want to do.

Variable declarations: I never declare variables with var. I use const when a value or reference is not going to change, and let when I want to declare a variable. I always declare constants first and then variables, being both at the beginning of the document in the case of global variables, or at the beginning of functions, in the case of local variables. This way we avoid the unwanted effects of JavaScript hoisting.

Function structure: I use arrow functions whenever possible because of the treatment of this. Sometimes, as in the case of constructors, it is not. Whenever I can, I define functions like this:

const miFuncion = (a, b) => a * b;

Variable names: I always use Camel Case, although until not too long ago I used Snake Case. This is an example of camelCase

Class names: In this case I use Pascal Case, both in the class name and in the name of the file that includes it. This is an example of PascalCase.

Single or double quotes: Whenever possible I use single quotes instead of double quotes. I usually reserve double quotes for HTML attribute tags, so that if I have to insert JavaScript inside them, I can do it with double quotes. I also apply this criterion with other programming languages such as PHP.

Template Literals: These are expressions that use inverted quotation marks to define strings. Whenever I have to insert variables in text strings, I use these quotes, inserting the variable in the middle. In the following tutorial you can find more information about template literals. Example:Here I am inserting a ${variable}` .

Function and method names: As in the case of variables, I use Camel Case for both functions and methods of classes. Example: CamelCase.

If statements: In this case I usually use two varieties, since I can place the statements in one or several lines depending on how long they are:

// If normal 
if (condition) {    
  // code
}
    
// If con un else 
if (condition) {    
  // código 
} else {    
  // code 
} 
   
// If with several else 
if (condition) {    
   // code 
} else if (condition) 
{    
  // code
} else {    
// code }

In the case of very short statements, I use a single line. This is something quite criticized by some developers but I find it very readable as long as the statements are very short, like when you make assignments to a variable. In any other case I use several lines:


// If normalif (statement) variable = true; 
   
// If with one else 
if (statement) variable = true;  
else variable = false;

Switch statements: In this case I always define a default condition and also use several lines:

switch (expression) {    
case expression:      
// code   
default:      
// code 
}

For loops: I always use several lines. In this case I always initialize the element defining the loop iterations in its own definition. I consider this better than inserting it in the condition. I separate the different elements of the loop definition by a ;:

for (initialization; condition; update) {    
// code
}

While loops: I always use several lines:

while (condition) {
  // code
  }

Do while loops: I don't usually use this loop too much. In several lines:

do {
  // code
  } while (condicion);```

Try/catch/finally statements: This is how I define them:

// try catch
  try {
  // code
  } catch (error) {
  // code
  }

// try catch finally
  try {
  // code
  } catch (error) {
  // code
  } finally {
  // code
  }

Whatever style you choose, remember that the important thing is to be consistent and maintain it throughout your project.

Validating Html Forms Using Bulma and Vanilla Javascript

Salvietta150x40 — Tue, 19 Jan 2021 11:23:00 +0000

Today we are going to write about contact forms and how to validate them using JavaScript.

The contact form seems to be one of the top features of every basic home page. It is a great way to encourage your visitors to make contact with you, by adding a form which is nice to look at, simple to use and easy to submit. A good web form should to some extent follow the well-known, popular usual style so that your users already have knowledge on how to fill out its input fields and never have to think twice about what kind of data is required and where. We mean the user should never wonder which field is required and which is optional and how to fill them out correctly and how to submit the form successfully.

Form creation rules

Before starting to create the form itself, it is a good practice to take the time and think about what kind of information you are going to ask your user. And also, which fields are going to be required and which can be submitted empty? Are there any restrictions when it comes to the format of the data that he/she enters?
A HTML form’s complexity may range from a plain and simple contact form where we only ask the user to fill out his name, email, phone and a message or it may be a more elaborate form as is the case with new user registration, for example.
We want to make our form better by giving the user interactive real time feedback about if he is filling out the input fields correctly, and let him know if there is a field missing or if it is incorrect

Data validation

Another aspect is the question of data validation. Every time you need to work with input generated by some user, you MUST validate that the data he is submitting is in accordance with your expectations. This means there are conditions, like for example an email input field should definitely contain the @ sign and then a . followed by the domain name. Or a phone number should consist of the + sign and numbers exclusively. Also, you might wish to check that the length of the word that the user has entered is greater than a certain number of characters, so for example you might not want people submitting words shorter than let’s say 3 characters as the message’s body.

Another interesting effect of validating your data in the front-end part of your website’s code is the added advantage of protection against cyber attacks. Always think that if there are input fields in your page, a malicious agent such as a bot might come and attack your site’s code, integrity or availability and thus try and hack your web. Best way of preventing things like this from happening is by double hacker-proofing your code by using front end validation mechanisms like JavaScript validation as well as back end, server-side data validation. These two should make a protection-duo to make it as much difficult as possible for attackers to infiltrate your site.

Contact form accessibility

When designing a contact form, it is of great usefulness to make use of special HTML attributes to make your form more accessible. By this we mean to assign correctly the order of the input fields so that the form can be easily navigated by using keyboard only. You can also improve the ease of use by using the label element, so that input fields are focused upon clicking on the title assigned in the label.

Bulma integration

How can we make use of BULMA in the case of designing html contact forms?
Bulma is a framework, a library similar to Bootstrap which if you learn to use can simplify the css part of your job when designing a web page. We will especially make use of the Bulma’s form section. It’s based on flexbox so we make use of it to position our elements on the screen - specifically our icons. In our little example, the classes will be the modifiers that will tell the icons where to shift or how to look like and that’ll make our life a bit easier.

Has-icons-right, has-icons-left, is-danger, is-small, is-right, etc.

We aim to create a simple contact form, in which will be using the following HTML mark-up:

<section class="section" id="contact">
 <div class="container is-max-desktop">
 <h2 class="title">CONTACT</h2>
 <h3>If you wish to get in touch with Majka, send her a message</h3>
 <form accept-charset="utf-8" action="sendmail.php" method="post" enctype="multipart/form-data">
 </form>
 </div>
</section>

Now this alone will not be sufficient, we also want to have input fields and some buttons, so we add inside element <form> the following - name, email, phone number and message fields and a submit button.

<!--Name field-->
<div class="field">
<label class="label" for="name">Your Name</label>
<div class="control has-icons-right">
 <input class="input needs-validation inputNameField" type="text" name="name" placeholder="name maximum 20 characters" value="" id='inputName' />
 <span class="icon is-small is-right">
 <i id='nameCheckIcon' class="fas fa-exclamation-triangle"></i>
 </span>
 </div>
</div>

<!--Email field-->
<div class="field">
 <label class="label" for="email">Email</label>
 <div class="control has-icons-left has-icons-right">
 <input class="input needs-validation inputEmailField" type="email" name="email" placeholder="your@email" value="" id='inputEmailField' />
 <span class="icon is-small is-left">
 <i class="fas fa-envelope"></i>
 </span>
 <span class="icon is-small is-right">
 <i id='emailCheckIcon' class="fas fa-exclamation-triangle"></i>
 </span>
 </div>
 <p id="emailActionHint" class="help is-danger nezobrazovat">Please enter a valid email so Majka can reach you</p>
</div>

<!--Phone number field-->
<div class="field">
 <label class="label" for="number">Phone Number</label>
 <div class="control has-icons-left has-icons-right">
 <input class="input is-warning" type="text" name="number" placeholder="" value="" />
 <span class="icon is-small is-left">
 <i class="fas fa-phone"></i>
 </span>
 <span class="icon is-small is-right">
 <i class="fas fa-exclamation-triangle"></i>
 </span>
 </div>
</div>

<!--Message field-->
<div class="field">
 <label class="label">Your Message</label>
 <div class="control">
 <textarea class="textarea" name="message" placeholder=""></textarea>
 </div>
</div>

<!--Submit checkbox-->
<div class="field">
 <div class="control">
 <label class="checkbox">
 <input type="checkbox" />
 I agree to the <a href="#">terms and conditions</a>
 </label>
</div>
</div>

<!--Submit button-->
<div class="field is-grouped">
 <div class="control">
 <button class="button is-light" id="submitButton" disabled="true">Submit</button>
 </div>
</div>

As you can see, we have four different input fields:

This line we add to the end of the body, but before closing element </body>. This will do that the javascript will be loaded after the HTML code is executed, or we can add “async defer” property to the <script>, which will do the trick and then your script could be placed anywhere on the page and still the script will run at the end like we want.

<script src="js/main.js?v6" async defer></script>

Note: If you're asking what is “?v6” behind the .js file, that's the version of the JS code, when you need your code editor would read the latest non cached code, you just raise the number of the version and it will load your latest changes to the code.

And now let’s set up the most interesting part – the JavaScript code to check the fields’ content and validate their state:
First we can define constants which will represent our elements we want to work with.

const ourParallax = document.getElementById('parallax')
const parallaxInstance = new Parallax(ourParallax)
const submit = document.getElementById('submitButton')
const inputName = document.getElementById('inputName')
const inputEmail = document.getElementById('inputEmailField')
const iconName = document.getElementById('nameCheckIcon')
const iconEmail = document.getElementById('emailCheckIcon')
const MAXCHARNAMEFIELD = 20
const MINCHARNAMEFIELD = 3

But let's continue. We now set up Event Listeners which will be waiting for some specific action to be happening.

// EVENT LISTENERS
document.addEventListener('change', event => { 

 if (event.target.matches('.inputNameField')) {
 validateName()
 } else if (event.target.matches('.inputEmailField')) {
 validateEmail(event.target.value)
 } else {
 //nothing
 }
}, false)

To describe it further - on the whole page we have one listener and when something will change - like its defined inside the parentheses is set on what event -> on ‘change’, it will execute the arrow function. Inside the arrow function we have an IF statement to resolve if the event happened on some of the next elements we have.
For example, if there is some ‘change’ event - we write something in the HTML element input field which has CSS class .inputNameField, IF statement will be true and the next code will be executed. And the code which we have on execution is function validateName() - it's time to describe its code now :

Name Validation

function validateName() {
 var regexString = /w?s?w/g; //words separated by space

 const iconName = document.getElementById('nameCheckIcon')
 const conditions =
 (inputName.value.length > MINCHARNAMEFIELD) &&
 (inputName.value.length < MAXCHARNAMEFIELD) &&
 (inputName.value != null) &&
 (regexString.test(inputName.value)) //test for regex string
 console.log(regexString.test(inputName.value))

 if (conditions) {
 // input box color
 inputName.classList.remove('is-danger')
 inputName.classList.add('is-success')
 // icon type
 iconName.classList.remove('fa-exclamation-triangle')
 iconName.classList.add('fa-check')
 // console.log("icon :" + icon.classList.value)

 //now we call submit button test
 nameValidated = true
 submitCheck()
 } else {
 // input box color
 inputName.classList.remove('is-sucess')
 inputName.classList.add('is-danger')
 // icon type
 iconName.classList.remove('fa-check')
 iconName.classList.add('fa-exclamation-triangle')

 nameValidated = false
 }
}

We define variable with regular expression first.
Also we add two constants to the definition of the variables at the start, which will represent the minimum and maximum characters we want our input field to have. This is the right way to do it, this way you won't have any undescribed constants in your conditionals, so called ‘magic numbers’.

const MAXCHARNAMEFIELD = 20
const MINCHARNAMEFIELD = 3

We make new variable to the icon we would be working with, so far the icon which belongs to the Name input field has Bulma class ‘fa-exclamation-triangle’, and we will change it when the input field is correctly filled.
Next we have series of conditions we want to be checked - input will be checked against all of them and when all are boolean true, for the element set to the variable inputName = document.getElementById('inputName') -declared earlier, we remove the class ‘is-danger’ and we add class ‘is-success’. This will change the color of the field to green. Similarly, to the icon we remove ‘fa-exclamation-triangle’ and add ‘fa-check’, which will make that check icon is displayed.
We declare new variables with default state = false ,added to the start of the file where we have other variables.

var nameValidated = false
var emailValidated = false

Also we want to set a new variable when the input field for the name is correctly filled to ‘true’. This will be useful when we come to the submit button later. The last thing is to call the function submitCheck() every time the change happens to the form. It will execute that function but so far we can ignore it until later. Allright, we should have this:

Email Validation

Next we have validateEmail(value) function, which will be called when some ‘change’ event happens on this HTML element, remember?

validateEmail(event.target.value)

function validateEmail(value) {
 const iconEmail = document.getElementById('emailCheckIcon')
 const emailParagraph = document.getElementById('emailActionHint')

 if (validateRegexString(value)) {
 // input box color
 inputEmail.classList.remove('is-danger')
 inputEmail.classList.add('is-success')
 // icon type
 iconEmail.classList.remove('fa-exclamation-triangle')
 iconEmail.classList.add('fa-check')
 emailParagraph.style = 'display:none'

 emailValidated = true
 submitCheck()
 } else {
 // input box color
 inputEmail.classList.remove('is-sucess')
 inputEmail.classList.add('is-danger')
 // icon type
 iconEmail.classList.remove('fa-check')
 iconEmail.classList.add('fa-exclamation-triangle')
 emailParagraph.style = 'display:block'

 emailValidated = false
 }
}

Let's describe the function.
We declare as variable two elements, icon and paragraph with text we want to show, this paragraph is momentarily hidden (CSS style display:none) so by the load of the page by default there is no text shown.
Next we have a condition where we have called yet another function added to the code - validateRegexString(value), which returns true when the string entered into the input is validated by this function.

function validateRegexString(email) {
 const regexString = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
 return regexString.test(String(email).toLowerCase()) // true|false
}

Well if the condition is fulfilled and we for example have a valid email, valid in the sense of the characters entered are looking as an email address, the code will remove red color from the input field, add green color (Bulma classes), from icon removes exclamation triangle and adds check pictogram. Also it keeps from displaying any warning text we have prepared in the element <p> with id = ‘emailParagraph’. ![Bulma form](https://www.ma-no.org/cache/galleries/contents-2114/input_email.jpg)

At the end like in the previous validateName() function we have added emailValidated = true and call to the submitCheck() function. ## Submit Button The next and the last element we will be showing is how to make the submit button disabled and only be enabled after the data we want are filled in. So for example we can make the button unclickable unless there is a filled input field name and email, but not the phone and text message, which could be empty. Let's get to the code. ![Bulma form](https://www.ma-no.org/cache/galleries/contents-2114/submit_disabled.jpg)

Remember that we have two variables defined by default, nameValidated and emailValidated, and we can use them in the condition to the function submitCheck() - it will be called every time when the input field for name and email is successfully validated. When both are validated and in our variables value is now set to true, the button would be unblocked by removing the attribute ‘disabled’ which has by default.

function submitCheck() {
 const emailParagraph = document.getElementById('emailActionHint')
 console.log(nameValidated, emailValidated)
 if (nameValidated && emailValidated) {

 submit.disabled = false; //button is no longer no-clickable
 submit.removeAttribute("disabled"); //detto
 } else {
 emailParagraph.style = 'display:block' //email warning shows up
 }
}

Conclusion

And that’s it! We successfully designed a simple contact form which can be (and in some form should be) used on any web page. The HTML markup makes correct use of accessibility enhancing attributes. Thanks to the Bulma CSS framework, our form has a neat and elegant look, with icons and colors providing the user with feedback on if the form is filled out correctly. The validation part is possible thanks to our simple vanilla JS script, which uses regular expressions and simple mathematical functions to confirm the data entered is valid.

What Is Django and What Is It Used For

Salvietta150x40 — Sat, 26 Dec 2020 11:23:00 +0000

An high-level Python Web framework that encourages rapid development and clean design

When we talk about Django, we refer to that framework that is used for any totally free and open source web application which is written in Python. Basically, it's a group of elements that will help you create web pages much more easily and quickly.

At the moment you are going to make a web page, you usually require several similar elements: a way to control all authentication by users such as their (registration, login, completion), the panel to manage the web page, the various forms, the ability to upload a document or file, etc.

There are several guys who realized that every web developer faces similar issues when making a site. That's why they have joined forces and developed frameworks (Django being part of one of these) which will provide you with the elements to build your website.

These framworks are there to speed up the web creation process and not to have to reinvent the wheel in general. That way, you will get support by relieving the weight when creating the web.

Why do I need a framework?

If you want to understand what Django is all about, you need to look a little closer at each server. The main thing is that a server needs to know what you want to make a website useful.

Let's imagine we have a mailbox where this would be the port. This is constantly monitored by letters that would come as requests. This is done by a web server. The moment you want to send something, you must load it with the appropriate content. Django is in charge of helping you create the content.

What's Django?

Django (gdh/ˈdʒæŋɡoʊ/jang-goh) is a free, open source web application framework written in Python. A web framework is a set of components that help you develop websites more easily and quickly.

What happens when someone requests a website from your server?

When a request arrives at the server, it is sent to Django. What he will try to do is find out what is really being requested. First you have to get the address of the site and try to find out how to proceed.

At this point, Django's urlresolver is in charge of solving it (keep in mind that the address of a page is designated as URL - Uniform Resource Locator), so urlresolver makes sense.

The truth is that we are talking about a function that is not so smart as it tries to look for patterns to find the URL. Django manages to corroborate each pattern from top to bottom and when it finds a match, Django passes each request to the function that is linked and called "view".

You can get an idea if you put a postman carrying a message or letter into context. He is walking around and seeks to corroborate each room or house number with that of the letter he is carrying. If there's a turnout, he leaves the message there - it works the same way url resolve!

With the view function there are several things to consider: you can look inside the database in order to find some information. Is it possible that someone has asked to modify some data? For example, the letter saying "Can you please modify the data in the job description? This is where the 'view' can check whether you have permission to do so, so the job description should be updated to say "Done! That's where the 'view' creates a response and Django seeks to forward it to the person's browser on the spot.

Of course, the description shown has been simplified, but for now it's not necessary to know all the modalities. Simply loading a general idea is more than enough.

That's why we won't go into so much detail, we'll just start with creating something in Django and you'll learn every relevant key along the way.

From Django's website we can see some highlights, in which we can observe some websites such as National Geografic, Disqus, Instagram, Mozilla Foundation and Pinterest, which are websites with a very high traffic and use Django.

In the next article, I will explain how to install Django.

But now let me explain the advantages of using Django.

Why use Django

The main reasons for using Django are:

It's very fast: If you have a startup, are in a hurry to finish your project or simply want to reduce costs, with Django you can build a very good application in a short time.
It comes well loaded: Whatever you need to do, it will already be implemented, you just have to adapt it to your needs. Whether it's because there are community modules, any Python package you find, or the applications Django comes with, they're very useful.
It's pretty safe: We can rest assured that Django implements some security measures by default, the most classic ones, so that there is no SQL Injection, no Cross site request forgery (CSRF) or JavaScript Clickjacking. Django handles all of this in a really simple way.
It's very scalable: we can go from very little to a huge application perfectly, an application that is modular, that works fast and is stable.
It's incredibly flexible: It's true that at first Django started out as a framework for storing news for press sites, blogs and this style of website, but over time it has gained so much popularity that it can be used for any purpose you want.

Other advantages offered by Django

Other benefits of Django that are not highlighted on the website are:

Its ORM, its interface for accessing the database, since making queries with it is a wonder, is a very good tool.

It comes standard with an administration panel, with which we can leave people without any technical knowledge handling important data in a very comfortable way.

Conclusions

In general, if you have used Symfony in PHP or Ruby on Rails, Django is similar. If you like the ones above, I'm sure this one will, and if you like them, you should give it a try.

Javascript: What are Callbacks and how to use them

Salvietta150x40 — Fri, 23 Oct 2020 08:02:00 +0000

Today we are going to learn about a concept that is widely used in javascript and that is used quite a lot by today's frameworks, libraries, especially NodeJS. This is the use of Callbacks.

What is a Callback?

Simplifying, it is to pass a function as a parameter so that this function runs our parameter. You may have already done it in C#, PHP or Java: make your function/method return something to perform the action.This is what we usually do as programmers.

In the following example, the function foo receives by parameter another function, which is the callback. The function foo is in responsible of executing the callback.

function foo(callback) { 
 //do something
  callback();
}

It is important to take into account that when we pass a callback we only pass the definition of the function and do not execute it in the parameter.

So, the container function chooses when to execute the callback.

A very common example of callback is as a listening function of an event.

function showAlert(){
   alert('Alerta');
}  
button.addEventListener('click', showAlert);

In this example, showAlert is a callback. We can also write the callback as an anonymous function:

button.addEventListener('click', function(){
  alert('Alerta');
});

Callbacks are also used to "warn" when a function has finished doing something:


function foo(callback) {
   console.log("hello")
   callback();
}foo(function(){console.log("finished")});
→ hello
  finished

The use of callback is also known as callback pattern, since it is essentially a pattern as it is a solution to common problems. In addition, the use of callbacks is related to functional programming, which specifies the use of functions as arguments.

Callbacks can help not to repeat code and its maintenance, to get more specific functions and, in some cases, to improve the level of abstraction and code reading.

Checking the asynchronous execution with callbacks

The callbacks themselves are synchronous. In the following example, it is the container function that chooses when the callback is executed, and it is executed without causing another execution flow.

function foo(val, callback){
 if(val == 1){
  callback(true);
}
 else{
  callback(false);
} 
}

Therefore, callbacks are very useful for handling asynchrony in JS. For example, they can be very useful when we are testing asynchronous elements.

Let's see an example.

Within a test, we create a setTimeOut (asynchronous method since it causes another execution flow). The test can work incorrectly because it does not wait for the asynchronous operation to be finished and it does not get executed.

To make sure that the content of the setTimeOut is always executed, we pass a callback to it. Until the callback has been called, JS will not leave the test (i.e. the function).

it("checks something of the DOM", function (done) {
foo1();
foo2();
foo3();
function onTimeout() {
  expect(parseInt(element.innerHTML)).toEqual(x);
done();
}
setTimeout(onTimeout, 1000);
});

Let's see what the order of execution is:

it("restart the counter time", function (done) {
  console.log(1);
  foo1();
  console.log(2);
  foo2();
  console.log(3);
  foo3();
  console.log(4);
function onTimeout() {
console.log(5);
expect(parseInt(element.innerHTML)).toEqual(x);
console.log(6);
 done();
console.log(7);
}
console.log(8);
setTimeout(onTimeout, 1000);
console.log(9);
});

El orden de ejecución, al pasar el test, es el siguiente:

With the done parameter we make sure that the number 5, 6 and 7 are always executed.
Let's see the case where we don't pass callback to the test:

it("restart the counter time", function () {
  console.log(1);
  foo1();
  console.log(2);
  foo2();
  console.log(3);
  foo3();
  console.log(4);
function onTimeout() {
console.log(5);
expect(parseInt(element.innerHTML)).toEqual(x);
console.log(6);
}
console.log(8);
setTimeout(onTimeout, 1000);
console.log(9);

});

The order of execution, when passing the test, is as follows:

Neither the 5th nor the 6th is ever executed.

Callbacks to eliminate knowledge on the dependencies

In a code, it is usual that there are functions that depend on other functions. When many parts of our code depend on other parts, it is easier for some methods to affect others without us having foreseen it or for any future change to be complex and laborious. In general, the less dependency, the better.

There are several ways to eliminate dependency and one of them is the use of callbacks. This is not a common solution nor can we use it in every situation, but it can help us in certain cases.

Through callbacks, we can reverse the dependency at the knowledge level and make one function unaware of the other function it is executing.

Let's look at an example with a countdown:

var seconds = 20;function startCountDown(){
  setInterval(function(){
    seconds--;
    showSeconds();
  }, 1000);
}function showSeconds(){
   console.log(seconds);
}startCountDown()

The startCountDown function depends on the showSeconds() function. Every second, startCountDown executes the showSeconds function. If we want to minimize this dependency, we can make the startCountDown function unaware of the showSeconds function by passing it a callback.

var seconds = 20;function startCountDown(onTimeChanged){
  setInterval(function(){
    seconds--;
    onTimeChanged();
  }, 1000);
}function showSeconds(){
  console.log(seconds);
}startCountDown(showSeconds);

How to Turn An Android Device Into a Retro Game Console

Salvietta150x40 — Wed, 14 Oct 2020 04:02:00 +0000

If you like retro games and you want to set up your own system at home, a good way to do it is using Android. From emulators for Mega Drive, N64, GBA, PS1 or Super Nintendo, to other systems such as MAME, all of them are available in Android app format. And the truth is that they are verry practical.

In addition, from some time to this part, we have also been able to see official relaunches of retro games in the Play Store, such as the Sega Forever classics, or the Final Fantasy and Dragon Quest sagas. Having said that, let's see how we can turn our phone, tablet or TV Box into a sort of Android console for retro games.

How to turn your old Android phone into a classic game console

The video games of the 80s and 90s are not usually very demanding, so if we have an old Android phone we can give it a new life if we decide to use it to connect to the TV and use it as a video console.

Things we will need

To assemble the complete system we will need the following elements:

An Android phone or tablet.
A USB C to HDMI adapter for the mobile phone and an HDMI cable to connect it to the TV.
If your mobile phone does not have a USB C port you will need to use another method to connect your mobile phone to the TV.
An emulator or retrogaming suite.
The ROMs of the games we are interested in.
A gamepad or controller for video games (Bluetooth).
A charger to keep the device always on and not to run out of battery.

If we have a TV Box it is even easier, as we will not need any additional cable or adapter to connect the Android device to the TV.

The emulators

Once we've got hold of all the components of our "Android console", it can take the longest time to find the right emulators. If you've heard of retro platforms, you'll probably have heard of the fabulous Recalbox. Unfortunately it is not a solution that is available on Android, although we can find multi-platform emulators such as RetroArch, which support several consoles at the same time.

The gamepad

To achieve a proper gaming experience we will need a Bluetooth gamepad. We can take advantage of the PS4 controllers -see HERE to see how- or buy an Android-compatible controller. Nowadays there are manufacturers such as 8Bitdo that do real wonders, with retro gamepads of the highest quality and aesthetics.

![How to Turn An Android Device Into a Retro Game Console](

The games

Now that we have the emulators and the gamepad, all we need to do is get hold of a few games. They are what is usually known as ROMs, which is basically the game compressed in a ZIP or RAR file.

It is worth remembering that making backup copies of games or ROMs is legal as long as we are in possession of the original cartridge or game. Likewise, downloading ROMs of games that we do not have in physical format is completely illegal.

Alternatively, we can also "rip" our own ROMs using a device such as Retrode, thanks to which we can extract the content of our cartridge and download it to a PC via a USB connection.

That said, there are also freeware ROMs from independent developers that also do not break any copyright, and in some cases are really good.

Retrogaming in Android through KODI

Another alternative to play video games on Android is KODI. From version 18 of the application, it incorporates a new tool called Retroplayer.

How to configure the RetroArch Android emulator suite

The idea of using RetroArch is to have a single central tool that allows us to emulate all the games. This way we can do everything from one place without having to constantly open and close apps.

There are currently 2 versions of RetroArch, a standard version for older devices and a 64-bit version for more modern Android terminals. Therefore, it is advisable to check which version we need before installing the app. Normally we will notice it right away, because if our device is not compatible, a clear message will appear when we try to download it from the Play Store.

Once we have the application installed, RetroArch will ask us for permission to scan our internal memory. In this way, it will detect the folders where the game ROMs are located.

Next, we will proceed to download the emulators that we will use. To do this, we will "Load core -> Download core" and select the emulators we are interested in. There are more than fifty to choose from.

Finally, return to the main menu and click on "Load content". We look for the ROM of the game we want to load with the corresponding emulator, and we will be ready for a good retrogaming session.

Among its various features, RetroArch has an online update tool, online multiplayer for those games that support it, and above all, the possibility of saving the game. This works even with games that originally did not have a save function, allowing us to stop and resume games when it is most convenient for us.

ClassicBoy as an alternative

Another emulation suite that is also available in Android is ClassicBoy. It supports up to 8 different emulators, and has customizable controls, although in its free version it does not give the option to save the game. Something we can solve if we get the premium version, which costs about 3.5 euros.

Personally I think that in general it is not as good as RetroArch, but it has some interesting things like support for up to 4 players, gesture control and accelerometer.

Dedicated Emulators: Citra, NES Nostalgia and MAME4droid

Finally, mention that there is also the possibility of installing specific system emulators. For example, in recent months Citra, the Android emulator for the classic Nintendo 3DS, has become really popular. On the other hand, if the only thing we are interested in is playing 8-bit NES titles then we should definitely install Nostalgia NES, an Android emulator that has been struggling for years and works really well. Likewise, if we prefer the old-fashioned arcade games, there is nothing like trying MAME4droid, another of those emulators that make school.

In short, Android has emulators for most of the classic systems, some better than others, but there is no doubt that there is a community that keeps bringing out new things to make the most of the playable part of our mobile devices.

DEV Community: Salvietta150x40

How to upload files to the server using JavaScript

Creating the project

2. Frontend JavaScript code

3. Node.js Backend Code

4. Testing the app

How to Track Flight Status in real-time using the Flight Tracker API

Obtaining API Credentials

API Configuration

HTTP GET Request

Flight Status and General Information

Mastering array sorting in JavaScript: a guide to the sort() function

How does sort() utilize Unicode tastes?

What about sorting numbers?

How to Use a Custom Sort Function

Other Uses of the Custom Comparison Function

Sorting based on the content of the string

Strings of Numbers and Letters

Strings of Numbers and Letters

Explanation of Sorting in Descending Order

The Payment Request API: Revolutionizing Online Payments (Part 2)

The Payment Request API: Revolutionizing Online Payments (Part 1)

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

How to connect to MySQL with Node.js

Create a MySQL database

Install node-mysql

Establish the MySQL connection

JavaScript Programming Styles: Best Practices

What are programming styles

The importance of styles

Sets of style standards

Method, function and variable notation

Rules to use: Yours

Validating Html Forms Using Bulma and Vanilla Javascript

Form creation rules

Data validation

Contact form accessibility

Bulma integration

Name Validation

Email Validation

Conclusion

What Is Django and What Is It Used For

An high-level Python Web framework that encourages rapid development and clean design

Why do I need a framework?

What happens when someone requests a website from your server?

Why use Django

Other advantages offered by Django

Conclusions

Javascript: What are Callbacks and how to use them

What is a Callback?

Checking the asynchronous execution with callbacks

Callbacks to eliminate knowledge on the dependencies

How to Turn An Android Device Into a Retro Game Console

How to turn your old Android phone into a classic game console

Things we will need

The emulators

The gamepad

The games

Retrogaming in Android through KODI

How to configure the RetroArch Android emulator suite

ClassicBoy as an alternative

Dedicated Emulators: Citra, NES Nostalgia and MAME4droid

How does `sort()` utilize Unicode tastes?