Forem: Moises E Liria Rosario

CSS Filter Functions

Moises E Liria Rosario — Thu, 08 Sep 2022 20:29:19 +0000

In this tutorial we are going to learn about CSS Filter functions. At the end of this tutorial you will have enough knowledge on CSS filter functions and effects. Also, we are going to learn how to build a simple photo editor with CSS Filter Functions. For this tutorial you don't need to be an expert in HTML, CSS, and JavaScript. Although you need some knowledge in these three web development technologies. Let us start learning CSS Filter Functions.

Basic CSS Filter Functions

In this tutorial we assume that you have basic knowledge of HTML, CSS, and JavaScript. CSS filter functions cause really nice effect in HTML once we apply them. The effect is mostly in color; for that reason in this tutorial we are going to use many pictures to show you their effect. Below we list some of the most used CSS Filter Functions.

Blur
Brightness
Contrast
Drop Shadow
Gray Scale

Hue Rotate
Invert
Opacity
Saturate
Sepia

Syntax of CSS filter functions

The syntax of CSS filter functions is similar for most of them. We only add the filter property to the selector we desire. Then we add as value the function we need to apply. Most of the values are similar. In some of them the only thing that varies is the styling unit or the number of parameters. We show you below the syntax of CSS Filter functions.

#selector{
 filter: blur(3px);
}     /* Here we have  a 3px blur function*/

/* The code below shows the syntax for all the other functions */

filter: blur(3px);
filter: brightness(30%);
filter: contrast(70%);
filter: drop-shadow(3px 5px 2px blue);
filter: grayscale(75%);
filter: hue-rotate(30deg;) /* We can use rads or turns */
filter: invert(10%); 
filter: opacity(90%);
filter: saturate(125%);
filter: sepia( 30%);

As we stated before, the function and values are similar. The only thing that changes is the unit in some of them. If you carefully watch the code above, you will notice that blur, drop-shadow, and hue-rotate have different units. The rest of them use percentages.

Opacity as a Filter Function

As you may already know, opacity is a CSS Property that we can use without filters. The value of opacity is a number between 0 and 1. The 0 value is total opacity and the value of 1 is no Opacity. We can use opacity as a CSS Filter function. The code above shows you that instead of 0 and 1 we use percentages for opacity values.

Drop Shadow Filter

As you may know in CSS we can create a shadow for any element using the box-shadow or the text-shadow property. In order to create a different shadow effect for any HTML element we can use CSS Filter functions. The filter function we use is the drop-shadow() function. As you may notice, this function can contain three or four parameters. The first three parameters are for the offsets, and the fourth is for the color we desire for our shadow. The example below shows you the effect of drop-shadow function. As you can see that is different of box-shadow or text-shadow. You can see the effect in the image. As you may also see, we can use negative numbers to drop the shadow in the opposite direction.

Blur Effect

We also have the ability to add some blur effect to any HTML property using CSS Filter functions. As it implies; this effect is going to blur the property. The blur functions is one of the functions which doesn't use percentages. We can use pixels or any CSS measuring unit (em, rem). The example below shows how to blur an image with filter functions. As you can see we use an input type range and some JavaScript. in order to see the variation of blur. You can see that 0px is no effect, and we have a maximum blur of 10px. You can add the maximum and the unit you wish.

Hue Rotate and Invert

The hue-rotate and the invert functions have different effects in elements. I think you already noticed that hue-rotate function use angle units. That function is not literally going to rotate the element. It's going to rotate the hue of the color in a different angle. In other words, this function is going to cause a color turning effect. Also, the invert function is going to invert the color to the element using percentages. I mean it's going to invert the color only to the percentage we desire. In the example below we show you these two effects. We used some animation keyframes in this example. With animation keyframes you can see how the effect occurs in a some time.

Filter Function Effects

You can see some of the effects of CSS Filter functions in the previous examples. As you may notice most of the effects are in color. The value of the filter functions is straightforward. So in the example below we show you the effect of most CSS Filter functions. We use some JavaScript and range inputs. Once you change the range inputs you can see the effects on the image

Combining CSS Filter Functions

The example above shows you the effects of most CSS Filter functions. The only problem with that is that you can see only one effect on the image. Each time you apply one effect, the other one goes away. Using CSS Filter functions, we have the ability to combine all of them and produce all the effects in one element. It's very easy to combine CSS Filter functions. The example below shows you the syntax for combining CSS Filter functions

#selector{
   filter:  contrast(120%)  saturation(25%);  
}

The syntax example above shows how to combine only two filter functions. You can combine as many functions as you want; not only two.

Creating Your Own Photo Editor

In the previous section you could see how to apply each effect of CSS Filter functions. Then you saw that you have the ability to combine them and apply all the effects to one element. To provide you with an example, we created a simple photo editor with most of the CSS Filter functions effects. We also added some JavaScript and used many type range inputs. You can see that JavaScript code is a little bit wider. That is because we repeated some variables for each function. If you want to create a photo editor like this one, you only need to declare these variables as global variables. Also you cannot scale or rotate the image because we are only showing the CSS Filter functions.

In case you want to scale or rotate the image, we recommend you to see our CSS Transform Transitions and Animations Tutorial

CSS Filter functions global values

In the photo editor example above, you can see that we also added a button to reset the image. That button calls the revert value of CSS Filter functions. Besides revert, there are many other global values for filter functions. They are not functions. For that reason they don't need a parenthesis. Below we show you the syntax for them.

filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

Conclusion

This tutorial shows how to implement CSS Filter functions. You can see the effect they cause is really nice. You could see that we also used a lot of range type inputs. All the images we use in this tutorial can be found in Pixabay. In case you need more Information about CSS Filter functions, we encourage you to read the Filters MDN.

Thanks and we hope you learned a lot with this tutorial.

More at Moe's Link

Nodejs And Express CRUD

Moises E Liria Rosario — Thu, 25 Nov 2021 19:58:52 +0000

Now we are going to learn how to create a Nodejs and express CRUD application. A CRUD application is the simplest web application that we can create. The term CRUD comes from "Create," "Read," "Update", and "Delete." We create CRUDs Applications using the HTTP Verbs. In this tutorial we are also going to learn how to connect and use a MongoDB Database in a Nodejs application. In this tutorial we assume that you have some JavaScript knowledge. We also assume that you have read something about MongoDB. You can take this tutorial as a second part for our Nodejs and Express Tutorial. Now let us start learning.

What are we going to build?

In this tutorial we are going to build the simplest Nodejs and express application. Applications like this serve as part of more complex applications. The application will be a list of users where we can read the list, add users, update users, and delete users. Similar to the one below. Besides Nodejs and express, we are also using some Bootstrap for styling purposes. Let us start building our new application.

HTTP Verbs

GET	The `GET` Method redirects you to a new URL
POST	The `POST` Method Creates a new file
PUT	The PUT Method serves to update files
PATCH	The PATCH Method also serves to update files
DELETE	The DELETE Method deletes files

Setting Up our Application

As you may already know, we set up all Nodejs applications in our terminal. We can create our folder and name it as we want. After we create the folder we type the npm init command in order to create our package.json. Once we have our package.json we create our app.js or index.js file. Then we proceed to install our dependencies. The dependencies we are using in this tutorial are express, ejs, mongoose, and also nodemon as a development dependency.

The image above shows you the terminal after you type the npm init command. Once you follow the instructions, you can open the folder you just created in your favorite text editor. We are using Visual Studio Code. Then you can add dependencies to your package.json. After adding dependencies you proceed to create the app.js file. It's called index.js by default; but I prefer to call it app.js. As we stated before we are going to use three dependencies. they are express, mongoose, and ejs. We can place them in our package.json Then our package.json should look like the one we show you in the picture below.

Installing Dependencies

We just added three dependencies to our package.json; but they are not installed. If you recall the Introduction to Nodejs tutorial you know there are two ways to install them. We can install each one of them individually, or install all of them at once using the npm install command. As we are using the asterisk (*), After we install them they are going to be the latest version. We are also going to install another dependency individually. That dependency is nodemon. We are going to install it individually because we are going to install it as a dev dependency. The example below shows you how to install dependencies and "dev" dependencies.

npm install

npm install -D nodemon

You can see the commands that we can use to install dependencies and dev dependencies. There is also an image that shows you how to do it in real life. Now our package.json should look like the one we show you in the following image. You can also see that package.lock.json was created.

Creating Our Application

We just set up our application in the previous sections. Now we are going to creating our application. You know that we created the app.js file. In order to create our applications we need to put some code in it. As you should already know we first start the packages we installed in our app.js file. We add the following code to the file.


let express = require('express');
let mongoose = require('mongoose');

let app = express(); // The express application 

let PORT = process.env.PORT || 3000;

app.listen(PORT, ()=>{
    console.log(`Connected on ${PORT}`);
});

Connecting our application to Database

Before you saw that we installed three dependencies; but we are only requiring two. We required express because that is the framework for our application. Also, we are requiring mongoose. That is because we are going to use mongoose as our MongoDB ODM. In order to connect our application to our database, we only need to use the mongoose.connect() function. Then we use the default port of MongoDB that is 27017 along with our local host as connection string. We also add the name we want for our database. The code below shows you how to connect a MongoDB Database to your express application.

mongoose.connect('mongodb://localhost:27017/crud');    //crud is the name of the database 

let db = mongoose.connection;

db.on('connected', ()=>{
    console.log('connected to Database');
});

db.on('error', ()=>{
    console.log('Database error');
});

The code above shows you how to connect a MongoDB database to local installed MongoDB. You can also use any MongoDB Atlas string as your connection string. We show you in our MongoDB tutorial how to set up MongoDB Atlas. Examples in this tutorial only show the locally installed database. If you set a MongoDB Atlas environment, you can work with it. Now your app.js file should look like the one you see below.

Testing the application in the console

You can see that the application is still empty. We it's a good practice to start testing our application from the beginning. As we installed nodemon, we just need to type nodemon in our console and see the results. Remember that we still don't have any routes or views; but if your result is similar to the image below, you know that your application is running and ready to connect to your database.

Adding Scripts to our package.json file ###

The image above shows you how to test your application using the nodemon command. In the introduction tutorial we show you how to use scripts; so it's better to create some scripts for ease and deployment purposes. The two scripts we are going to add are the dev and start. After you add these scripts you only need to type npm run and the script name in your terminal. Then scripts will run. The dev script is going to start the application via nodemon; while the start script is going to start the application using node app. Once we add the scripts, our package.json should look like the following one.

Setting the View Engine

As you already know, the third dependency we added was ejs. From the Introduction tutorial we can see that ejs is used as a view engine. Now we can set up our view engine in our app.js file. We only need to add the following code to our file.

app.set('view engine', 'ejs');
app.set('views', 'views');

The code you just added to your app.js is to sett your view engine and views folder. After the creation of your view engine you proceed to create the folder.

Creating your public folder

Although we are using a view engine it's very good practice to set up a public folder. That is useful for adding scripts and stylesheets. Even though in this tutorial we are only going to use the "Bootstrap CDN," it's a good practice to have then public folder. In case you want to add more style or more features to your app, you can add some in your public folder. As you may know from the introduction tutorial; it's very good to add in our app.js express.json and also settings for url encoding. For that reason we add the following lines of code to our app.js.

// express.json() and url encoding
app.use(express.json());
app.use(express.urlencoded({extended: true}));


//static folder
app.use(express.static('public'));

After we add all these changes to our app.js our file should look like the one we show in the following picture. If you are using visual studio code, you can also see on the side the views and public folders that we recently created.

Creating Routes

The introduction tutorial also shows you how to create routes in express. Now we are going to add some routes for CRUD operations. We first need to add the routes in our app.js file. We are going to add a home route (/) and a (/users) route. Once we add the routes, we create the routes folder and its files. We are going to work more with the /users route in this tutorial. That is because we are going to create a "users list." We first need to add the following code to our app.js file. Then we create our routes folder and its files.

app.use('/', require('./routes/index')); //index route

app.use('/users', require('./routes/users')); //users route

The code above shows you the routes (/) That is the home route, and another route (/users) that is the users route. Now we create a folder called routes. In the folder we create two files; One of them called users.js and the other called index.js. You can create as many route files as you want; but in this tutorial we are only using two. You can also see that we use the require() function as callback function; requiring the files of the routes.

Using the express router

After the creation of routes and files for your app.js, we need to place some code in our files. We are going to start first with the index.js. In that file we are only going to create the home route (/). In order to create the home route, we first call express and the express.Router() then we create the route. After route has been created, we export the router as you can see in the following code.

let express = require('express');
let router = express.Router();

router.get('/', (req, res)=>{
    res.render('index');

});

module.exports = router;

You can see that we created the router and get the home route. The home route redirects you to a view called index.ejs. By now you can create that view and add the welcome message you want; that is your Home Screen. Now we are going to add some routes to our users.js file. We are going to add the users CRUD routes. Also we are going to create the CRUD views for our application. The code below shows you how we can add CRUD routes to the users.js file.

let express = require('express');
let router = express.Router();

//CRUD Routes

router.get('/create', (req, res)=>{
    res.render('users/create');   
});



router.get('/list', (req, res)=>{
    res.render('users/list');
});

router.get('/update', (req, res)=>{
    res.render('/users/update');
});



module.exports = router;

Now you created some of the CRUD routes and their views. By now you can add the basics HTML to your views. We are going to work with views in a few minutes. We created the CRUD views inside another folder called users that is inside the views. That is why we are rendering in the format ('/users/views') if you want to skip that folder is up to you. You can create your views right into your views folder. In case of that you only need to render the view itself res.render('view'). Now the order of your files should look like the image below. Note that we installed an icons theme in Visual Studio Code; with this theme it's easier to see every folder and file in our project.

Creating Database Schema

As you already know we are working with MongoDB. A very useful MongoDB ODM is mongoose. We already installed mongoose as an npm package. Now it's time to start working with mongoose. We are now going to create another folder called "models". Inside that folder we are going to create a file called "User.js". Take note that we are using a capital letter in the file. That is because we are going to use it as a User model. Now we need to create the mongoose schema in the new file. After we create the mongoose schema we are going to export it as a mongoose model. To accomplish this task we need to place the following code in our file.

let mongoose = require('mongoose');
let Schema = mongoose.Schema;

let userSchema = new Schema({

    firstName: String,
    lastName: String,
    age: Number,
    gender: String

});

let User = mongoose.model('User', userSchema);

module.exports = User;

The code above shows you how to create a simple schema. You can see in that we created many fields in the schema. These fields are the ones that MongoDB will have in a collection called users in our database. We called the model User because MongoDB is going to create a collection pluralizing the model.

Importing the model in our routes

Now it's time to import the model we just created into our routes. As you may guess, we are going to import the model into the users route. We only need a line of code to import the model into any route. For our model that would be the following line of code.

let User = require('../models/User');

Starting CRUD Operations

Once you import the model to your routes, it's time to start the CRUD operations. Now we are going to start creating users in the database using our routes. The system will automatically create the database and collection. We are only going to create the users in our application. Now it's time to work with the views we created before. In case you did not create them you can create them now. We are going to create a form in our users/create view. that form is going to create the user. So we need to type the following code in our create.ejs file.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create User</title>
</head>

<body>
    <h2> Add Users</h2>

    <form method="POST" action="/users/create">
        <input type="text" name="firstname" placeholder=" Enter First Name">
        <input type="text" name="lastname" placeholder=" Enter Last Name">
        <input type="text" name="gender" placeholder="Gender">
        <input type="number" name="age" placeholder="Your Age">
        <input type="submit" value ="submit">

    </form>
</body>
</html>

Now if you go to your browser and type localhost:3000/users/create you can see the following form. That is the form we are going to use to add users to our database. Make sure you have the name attribute for each input, and the action for the form. The action is the redirects to the function we are going to implement in the server side. In this case we are going to create a user.

Creating Users

Right now this form is not going to create anything. That is because we need to create the users on the server side. So we need to go back to our routes and add a method to create users. We are going to add a router.post method to create the user. The router.get method that we already have, is only going to redirect us to the form. Now we can go back to our users.js file and add the following code.

router.post('/create', (req, res)=>{

    let newUser = new User({

        firstName: req.body.firstname,
        lastName: req.body.lastname,
        age: req.body.age,
        gender: req.body.gender

    });

    newUser.save();
    res.redirect('/users/list');

});

The code we just added creates a new user newUser from the User Model. As you can see we used the post method to create the user. The previously created form has the method POST and its action redirects you to this function. You see that we use the req.body method to get the data from the form. The part before the req.body method is the field on the mongoose Schema. After getting data from the form, you can also see that we used the save() form to save the newUser. Then we use a res.redirect() method to redirect us to the users list. If you already created a users list by now it's going to be empty. In case you did not created the system will redirect you to a CANNOT GET page.

In case you need to confirm the user creation on MongoDB after the creation of a user, you can go to your mongo shell mongosh and confirm it. For this example we created a user with name John Smith using our form. If you have MongoDB installed on your system the result will be similar to the image below. In case you use a MongoDB Atlas cluster you can go to your cluster and confirm.

Reading the Users List

The previous section shows you how to create users in a MongoDB Database; but it redirects you to an empty list. You could confirm the creation of the user going to your database shell. The problem with it is that in the real world users do not have access to the database. For that reason we need to work on our list of users. In order to work on our users list we need to go back again to our routes and work on the /list route. We need to modify it in the following way.

router.get('/list', async (req, res)=>{

    let users =  await User.find();

    res.render('users/list', {
        users: users

    });

});

You can see that we modified our /list route. The code we just added declares a variable called users that is an object we get using the MongoDB find() function. After we created that variable we passed it to our render method as an object. That is going to result in an array of objects. That is because we. can create all the users we want using our form, and all of them will be passed through this object. You can also see that we used JavaScript promises words async that creates an asynchronous function, and the await that awaits for the results. Now it's time to create or modify our view.

Modifying our view

After we modified our route for the list of users we can modify our view. As you may already know, our view engine is ejs. Its's similar to HTML with the difference that we can embed JavaScript in it. We are going to create a table using the HTML table syntax. After the table creation we are going to embed every user on a table row

. We need to use some ejs embedding operators like <%=, or <% and %> to embed our data into HTML. We are not going to deep into ejs; but that is the syntax we most use to embed data using ejs. You can modify your view using the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users List</title>
</head>
<body>


  <h2>List of Users</h2>

    <table>
       <tr>
           <th>First Name</th>
           <th> Last Name</th>
           <th> Gender</th>
           <th>Age</th>

       </tr>

       <% users.forEach(function(user){ %>

        <tr>
            <td><%= user.firstName %></td>
            <td><%= user.lastName %></td>
            <td><%= user.gender %></td>
            <td><%= user.age %></td>
        </tr>

       <% });%>

    </table>

</body>
</html>

List Results

After you modify your view you can type the address localhost:3000/users/list in your browser. Then you are going to see the results. Note we are using the PORT 3000 and locally installed MongoDB. The result would be the same with a MongoDB Atlas cluster. The results would be similar to the following image.

Updating Users

At this time you have seen how to create users in the database and read them on your browser. We are going to learn how to update users using the updateOne() MongoDB function. That is an easy task. As you may already know we need to create a post route in order to update any user. We have the ability to create put routes in express; but update is easier with post routes because the method form of the view is a POST method. Now we can create a router.post('/update') route, and modify our router.get('/update') route.


router.get('/update/:id', async (req, res)=>{

    let user = await User.findById(req.params.id); 
    res.render('users/update', {
        user: user
    });


});



router.post('/update/:id', async (req, res)=>{

    let user = await User.findById(req.params.id); 
    await user.updateOne({
        firstName: req.body.firstname,
        lastName: req.body.lastname,
        gender: req.body.gender,
        age: req.body.age,
    });
    res.redirect('/users/list');


});

Creating the Update Form

In the code above you can see that we modified the get method and added the ID for the user. We also used the findByID() function from MongoDB to create a user variable. Then we added the variable to our render method. After that we created a post route to update our user. As you can see we also add the ID of the user and then we use the req.body method to get values from our ejs form. Now we can modify the views in order to update users. We first are going to modify the update view by creating an update form.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update User</title>
</head>
<body>
    <h2>Update User</h2>

<form method="POST" action="/users/update/<%=user.id %>">

<input type="text" placeholder="Update First Name" name="firstname" value="<%=user.firstName %>">
<input type="text" placeholder="Update Last Name" name="lastname" value="<%=user.lastName %>">
<input type="text" placeholder="Update Gender" name="gender" value="<%=user.gender %>">
<input type="text" placeholder="Update Age" name="age" value="<%=user.age %>">
<input type="submit" value="Update User" >


    </form>

</body>
</html>

You can see that in the update form we have the value attribute. That is the value of the field of the user that we are going to update. After the creation of the update form we can go back to our list view and add two links for each of the users we add. These two links are the "Update" and the "Delete" links. We are going to add both of them; but now we are working only with the update. The following code details how to add the two links.

<tr>
            <td><%= user.firstName %></td>
            <td><%= user.lastName %></td>
            <td><%= user.gender %></td>
            <td><%= user.age %></td>
            <td> <a href="/users/update/<%=user.id%>">Update</a></td>
            <td> <a href="">Delete</a></td>
 </tr>

Now if you go to your browser and type again localhost:3000/list the result is going to be similar to the one you see in the image below. If you click the update link, the link is going to redirect you to the update form and you can update the user.

Once you click on the link you can see the update form similar to the one below. After that you can modify the data and check your MongoDB Database again and see that your user was modified. In this example we are going to update the age to 35.

Deleting Users

By now you have seen how to create, read, and update users. In order to complete our CRUD Operations we are now going to learn to delete users from the database in your view. The delete method is not going to redirect you to any other view; that is only going to redirect you to the list view again. Once you see the list view again you can see that user will not be there. You can also check the database and see that user won't be in the database; it's going to be deleted. We only need to add one more route to the users routes. That is going to be a with the post method. You can use a delete method; but it's easier using a post method because we are going to be using a form to delete users.

router.post('/delete/:id', async (req, res)=>{

    await User.deleteOne({ _id: req.params.id });


    res.redirect('/users/list');

});

Once we add the above code we can go back to the users lists view and replace the delete link you just created with the following form. That form is an empty form; it only have the submit button. We changed the value of submit to delete. In the table that is only going to show you the delete button. We are also showing you a commented "delete" method in case you want to use a delete route instead of a post. That is up to you to use the method you want.

<form method="POST" action="/users/delete/<%= user.id %>" id="delete-form">

 <!--<input type="hidden" name="_method" value="DELETE"> -->

 <input type="submit" class="btn btn-danger btn-sm" value="Delete">
</form>

As we added some more users to the users list, the resulting list is as the following one. If you created the list you can now create, read, update, and delete users. Now we have a full CRUD application like the one you see below.

Adding Route Links and Styles

By now you completed a users list CRUD application. One extra thing is that you can add some links with your routes in order to avoid typing the routes every time. You can add some links to redirect you to the list of users and the index. You can also add the style you decide to your application. In a similar application we used some Bootstrap to style our application. You can see the screen shot of a styled application below. That is up to you to add the style and the links you wish.

Conclusion

We have just created a simple CRUD application using Nodejs and express. This application is only a simple list of users. By now you can see it as a simple list; but it serves as part for more complex applications you can create later. This is only part of the great things you create using Nodejs Express and MongoDB. We hope you learned a lot in this tutorial. You can find more information about express in their website. There is also an Express MDN that contains great information. You can also find information about Mongoose and EJS on their websites. If you need to get the source code for this application, feel free to download it from its GitHub Repository.

More at Moe's Link

Basics of MongoDB

Moises E Liria Rosario — Thu, 18 Nov 2021 15:29:53 +0000

As you may know, there are many databases that use the "Structure Query Language SQL" as their base language. Now we are going to learn about one database that is not based on SQL. That database is MongoDB. As we mentioned MongoDB is not based on SQL. It's more based on a syntax similar to "JavaScript Object Notation JSON." This tutorial is going to get you through the basics of MongoDB. We are going to learn all the necessary MongoDB to Implement on our applications. By now we assume that you have some JavaScript knowledge; especially some JSON. Let us start learning MongoDB; It's going to be fun.

Definition

As we stated before, MongoDB is a NoSQL database system. MongoDB Main purpose is to ease application development and scaling. There are many ways to run MongoDB; The two most used ones are "MongoDB Atlas," and Locally Installed MongoDB. Now We are going to show. you how to use MongoDB in both of these ways.

MongoDB Atlas

MongoDB Atlas is one way of implementing MongoDB. The main advantage of MongoDB Atlas is that we can create and use our databases in the cloud. We first need to create an account in MongoDB Atlas. Then we create organizations and clusters. Once we create a cluster in an organization we are ready to use our database. Most times they provide a unique string that serves to connect the database to our application. This tutorial is only about MongoDB. In some other tutorials we are going to create an application and connect it to MongoDB Atlas. Now we are only going to see how to create clusters in MongoDB Atlas.

Creating MongoDB Atlas Account

In order to create a MongoDB Atlas Account, We only need to go to their website and create the account. The image below shows you their home page. You can create an account in their web site just like in any other.

Creating a MongoDB Atlas Organization

Once we create an account on the MongoDB Atlas website, we can create an organization. That task is quite easy. There are many other images below that shows you how to create an organization in MongoDB Atlas. It also shows you a running cluster; but don't worry about that.

Creating a Cluster

The two previous images show you how to create an organization in MongoDB. Once you create an organization, you can create a database cluster in your organization. That cluster is the one that is going to hold your database. The following images show you the steps to create a database cluster.

Using Your Database Cluster

After you finish with all the steps shown in the images above. You can use your database. MongoDB Atlas provide you a string to use your database in your project. Another set of images below show you how to use your database cluster.

The images above show you how to use a MongoDB Atlas database in your application. As you could see there is a string that we can include in our application in order to use the database. If you followed the steps that we showed you in the images, you could also see some other methods to connect your database. You can choose the one you need.

Locally Installed MongoDB

We could see above that we can use MongoDB in the cloud. Although it's quite easy to MongoDB in the cloud, my preferred method is to locally install MongoDB. Maybe you occupy some storage in your computer; but you will have everything locally while working in your projects. We only need to install and initialize MongoDB to start using it locally. We can install mongoDB in Windows, MacOS, and Linux. As you should know these are the most used operating systems.

Installing MongoDB on Windows

Installing MongoDB on Windows is an easy task. That is because you only need to download the MongoDB installer from the MongoDB Download Center. After you download the installer, you install MongoDB following the instructions of the installer. For Most operating systems we use MongoDB Community Edition. It's free, and by now it's also all you need.

Installing MongoDB on MacOS

It's a little bit more tricky to install MongoDB in MacOS. That's because in MacOS you don't use an installer; you install MongoDB from the terminal. You also need to have in your system the Xcode command line tool and Homebrew. Once you have everything installed, you can install MongoDB by typing the following commands in your terminal.

brew tap mongodb/brew

The Command above is going to get the official MongoDB version from Homebrew. Then you can install MongoDB in your system with the following command.

brew install mongodb-community@5.0

As you can see this command is going to install MongoDB Community Version 5.0. That is the current version at the time of this tutorial. You can install the version you desire once a new version is available.

Initialize MongoDB

The commands you saw above show you how to install MongoDB in your system. After the installation you will not be able to use MongoDB unless you initialize it. Some people install MongoDB and spend time trying to use without initializing and not getting any results. To initialize MongoDB, you only need to type the following command in your terminal.

brew services start mongodb-community@5.0

That command is going to initialize MongoDB in your system, and you will be able to start working with MongoDB databases in your system.

MongoDB First Steps

The steps we mentioned above were all to set the MongoDB environment. After you set one of the two work environments, you can start working with MongoDB. The MongoDB shell mongosh is the one responsible for MongoDB database management. In order to start using MongoDB, we only need to type the mongosh command in our terminal. Once we type the mongosh command in our terminal we can see MongoDB environment and start working.

~ % mongosh
Current Mongosh Log ID: 6192ada3da035d7a9f0013b8
Connecting to:      mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000
Using MongoDB:      5.0.2
Using Mongosh:      1.0.6

For mongosh info see: https://docs.mongodb.com/mongodb-shell/

------
   The server generated these startup warnings when booting:
   2021-11-15T07:46:36.293-05:00: Access control is not enabled for the database. Read and write access to data and configuration is unrestricted
------

Warning: Found ~/.mongorc.js, but not ~/.mongoshrc.js. ~/.mongorc.js will not be loaded.
  You may want to copy or rename ~/.mongorc.js to ~/.mongoshrc.js.

>

Available Databases

In the section above you could start the MongoDB environment by only typing the mongosh command. By now you should ignore some warnings. Later you can update your system if required. Then you can start working on your MongoDB environment. The first thing we are going to do is seeing the already existing databases in the system. In order to see all databases in the system, we only need to type the show dbs command as you can see below.

> show dbs
admin    0.000GB
config   0.000GB
local    0.000GB
>

Some of the databases we can see after we type the command, are created by default in MongoDB. We are going to create our own databases and work with them. To create a database in MongoDB, we only need to type the use command followed by the database name we desire. In this case we are going to create a database called customers.

Take note that when we type the use command it's going to create a database with the name we typed if a database with that name does not exist. If there is a database with that name, the system will assume you want to use the existing database. To create the customers database we only need to type use customers. Then the system will create a database called customers as you can see in the following example.

> use customers
switched to db customers
>

Creating Database Collections

Once we create a MongoDB Database, you can start inserting data in your database. Data in MongoDB is stored in collections; not in tables as the SQL based databases. There are many ways of creating a collection. All these ways include the db.createCollection() function. Now we are going to show you the two most used ways of creating a collection.


customers> db.createCollection("domesticCustomers", {customerName: String, customerGender: String,
 customerCity: String, customerAge: Numbe}); 

{ ok: 1 }

customers> db.createCollection("foreignCustomers");
{ ok: 1 }
customers>

The example above shows you two ways of creating collections. In the first one you specified the fields and types of data to be used. The second one only creates a collection without any specified fields. Although you could see a confirmation that collection was created { ok: 1 }, you can also confirm the creation of your collections using the command show collections as you can see in the example below.

customers> show collections
domesticCustomers
foreignCustomers

JSON and BSON

Starting this tutorial we specified that data in MongoDB is stored in collections. We also specified that in MongoDB we use syntax similar to JSON. That syntax is called "Binary JSON" or BSON. BSON is similar to JSON; but it's more like an encoded serialization of JSON. We can find useful information in the BSON website.

Inserting Data into Collections

Now that we know that MongoDB data is stored in BSON, it's time to insert some data into our collections. The two most used functions to insert data into MongoDB are insertOne() and insertMany(). Previous versions of MongoDB used the insert() function. That function still work; but it's going to be deprecated soon. We can use the mentioned functions with the syntax db.collection.insertOne, or db.collection.insertMany(). Where db refers to database, and collection is the collection name. now let us insert some data into our collections.

customers> db.domesticCustomers.insertOne({ customerName: "John Smith", CustomerGender:"Male", CustomerCity: "Washington", customerAge: 35} );

{
  acknowledged: true,
  insertedId: ObjectId("6195101d4543a38e25ba68c3")
}


customers> db.domesticCustomers.insertMany([{customerName: "Jackeline Johnson", CustomerGender:"Female", CustomerCity: "Los Angeles", customerAge: 42},{customerName: "James Peterson", CustomerGender:"Male", CustomerCity: "New York", customerAge: 27}, {customerName: "Peter Parker", CustomerGender:"Male", CustomerCity: "Chicago", customerAge: 22}, {customerName: "Sarah Reynolds", CustomerGender:"Female", CustomerCity: "Detroit", customerAge: 30}]);

{
  acknowledged: true,
  insertedIds: {
    '0': ObjectId("619512824543a38e25ba68c4"),
    '1': ObjectId("619512824543a38e25ba68c5"),
    '2': ObjectId("619512824543a38e25ba68c6"),
    '3': ObjectId("619512824543a38e25ba68c7")
  }
}

Data ID

You could see in the example above that we inserted data using the two most used functions. We inserted only one record or object with the insertOne() function. After that we inserted an array of objects or records using the insertMany() function. Once you insert the objects into your collections, you can see that system returned their ID. In MongoDB all objects contain an unique ID auto assigned by the system. You don't have to worry about assigning a PRIMARY KEY as in SQL; In MongoDB you have it automatically.

Visualizing Data

After we insert data into any MongoDB collection, we can visualize it using the find() function. In case you have a lot of objects and want to find only one containing certain data, you can use the findOne() function. Also if you want to find many objects containing similar data you can use the findMany() function. As we have only two collections with only a few records, the example below is going to show you how to use the find() function. You can use these function with a syntax similar to the insert functions. db.collection.find(), db.collectionfindOne(), db.collection.findMany(). As you may already know collection is the collection name.

customers> db.domesticCustomers.find();
[
  {
    _id: ObjectId("6195101d4543a38e25ba68c3"),
    customerName: 'John Smith',
    CustomerGender: 'Male',
    CustomerCity: 'Washington',
    customerAge: 35
  },
  {
    _id: ObjectId("619512824543a38e25ba68c4"),
    customerName: 'Jackeline Johnson',
    CustomerGender: 'Female',
    CustomerCity: 'Los Angeles',
    customerAge: 42
  },
  {
    _id: ObjectId("619512824543a38e25ba68c5"),
    customerName: 'James Peterson',
    CustomerGender: 'Male',
    CustomerCity: 'New York',
    customerAge: 27
  },
  {
    _id: ObjectId("619512824543a38e25ba68c6"),
    customerName: 'Peter Parker',
    CustomerGender: 'Male',
    CustomerCity: 'Chicago',
    customerAge: 22
  },
  {
    _id: ObjectId("619512824543a38e25ba68c7"),
    customerName: 'Sarah Reynolds',
    CustomerGender: 'Female',
    CustomerCity: 'Detroit',
    customerAge: 30
  }
]

Find Functions with Parameters

We can also use some parameters to find a record. Most times we use the ID to find any specific record. That is because the ID is unique. The findOne() function is going to find the first object containing the specified information, while the findMany() function is going to find all the records with similar information in the specified fields. The example below is going to use the find function with the _id parameter. You will find a only one record with the specified ID. In case we use findOne() or findMany() even the find() function, we can use different parameters not only the _id.


customers> db.domesticCustomers.find({  _id: ObjectId("619512824543a38e25ba68c4")});
[
  {
    _id: ObjectId("619512824543a38e25ba68c4"),
    customerName: 'Jackeline Johnson',
    CustomerGender: 'Female',
    CustomerCity: 'Los Angeles',
    customerAge: 42
  }
]

Creating Objects differently

When we created the two collections in our database, you could see that we specified the fields in only one. The other collection we only specified the name. That is because we can insert as many fields as we want in any collection. Remember that MongoDB works with documents; not with tables as SQL. in the example below we are going to insert one object with one more field in the domesticCustomers collection. We are also going to insert some objects in the foreignCustomers collection.

customers> db.domesticCustomers.insertOne({customerName: "Jose Martinez", customerGender: "Male", customerCity: "Madison", customerAge: 33, customerEtnicy: "Hispanic" });
{
  acknowledged: true,
  insertedId: ObjectId("61953e0a4543a38e25ba68c8")
}

As you can see we successfully could enter another object containing an extra field. If we use the find() function for the collection, we are going to see another field similar to the one below.

{
    _id: ObjectId("61953e0a4543a38e25ba68c8"),
    customerName: 'Jose Martinez',
    customerGender: 'Male',
    customerCity: 'Madison',
    customerAge: 33,
    customerEtnicy: 'Hispanic'
  }

As you can see, we can insert as many fields as we want for any object in our collections. Now we are going to insert many records in the foreignCustomers collection.

customers> db.foreignCustomers.insertMany([{customerName: "Pedro Lopez",  customerCountry: "Mexico", customerPayment: 10000},{customerName: "Francois  Pierre",  customerCountry: "France", customerPayment: 50000},{customerName: "Mustafa Ali",  customerCountry: "Pakistan", customerPayment: 30000, customerPlaces: 7}]);
{
  acknowledged: true,
  insertedIds: {
    '0': ObjectId("619541e24543a38e25ba68c9"),
    '1': ObjectId("619541e24543a38e25ba68ca"),
    '2': ObjectId("619541e24543a38e25ba68cb")
  }
}

Now we can see the results using the find() function.

customers> db.foreignCustomers.find();
[
  {
    _id: ObjectId("619541e24543a38e25ba68c9"),
    customerName: 'Pedro Lopez',
    customerCountry: 'Mexico',
    customerPayment: 10000
  },
  {
    _id: ObjectId("619541e24543a38e25ba68ca"),
    customerName: 'Francois  Pierre',
    customerCountry: 'France',
    customerPayment: 50000
  },
  {
    _id: ObjectId("619541e24543a38e25ba68cb"),
    customerName: 'Mustafa Ali',
    customerCountry: 'Pakistan',
    customerPayment: 30000,
    customerPlaces: 7
  }
]

Another way of creating collections

The examples above show you how to insert data into collections already created. In case we want to insert data into another collection we can create a collection even without using the db.createCollection() function. We just need to specify the name of the collection we want to create while inserting the data. The example below is going to create a new collection called customerProducts and insert data at the same time.

customers> db.customerProducts.insertMany([{production:"rice", meat: "beef", quantityInPounds: 500},{production:" beans", meat: "chicken", quantityInPouns: 800}]);
{
  acknowledged: true,
  insertedIds: {
    '0': ObjectId("619544d84543a38e25ba68cc"),
    '1': ObjectId("619544d84543a38e25ba68cd")
  }
}

Now we can use the commands show collections and see there is a new collection; also we can use the find() function with the new collection as you can see below.

customers> show collections
customerProducts
domesticCustomers
foreignCustomers


customers> db.customerProducts.find();
[
  {
    _id: ObjectId("619544d84543a38e25ba68cc"),
    production: 'rice',
    meat: 'beef',
    quantityInPounds: 500
  },
  {
    _id: ObjectId("619544d84543a38e25ba68cd"),
    production: ' beans',
    meat: 'chicken',
    quantityInPouns: 800
  }
]

Updating Data in MongoDB

We can also update data in MongoDB using some functions. The functions we use to update data are the updateOne(), the updateMany() and we can also use the replaceOne() function. We use a syntax similar to the insert and find() functions. db.collection.updateOne(), db.collection.updateMany(), and db.collection.replaceOne(). Here we only show you the updateOne() function using the _id as parameter to update. The other functions work similar.

customers> db.domesticCustomers.updateOne({_id: ObjectId("619512824543a38e25ba68c5")},
 {$set: {customerName: "James Thomason", CustomerCity: "Boston"}});
{
  acknowledged: true,
  insertedId: null,
  matchedCount: 1,
  modifiedCount: 1,
  upsertedCount: 0
}

As you can see we could update one object in our collection using the updateOne() function. We first declared the id, and then we set the new values. If you type the find() function, you can see the new results.

Deleting Data in MongoDB

As in any other database we can delete data in MongoDB. We can delete any data by using the delete functions. These functions are deleteOne() and deleteMany(). The syntax is similar to the other functions we already used. Now we are going to show you how to delete any object using the deleteOne function. As you may think, we are going to delete the object by ID

customers> db.domesticCustomers.deleteOne({_id: ObjectId("6195101d4543a38e25ba68c3")});
{ acknowledged: true, deletedCount: 1 }
customers>

Now we deleted only one object. If you use the find() function, you won't see the John Smith field. As the _Id is an unique value, deleting and updating by ID is a good practice.

Deleting All Objects in a Collection

Before deleting all objects in a collection we need to know if the database have some important information. Now we can delete all objects in any collection because this practice data. Working in the field you would need to know if it's ok to delete all data in a collection. We can delete all data in a collection with only one function. That function is the remove() function. We only type empty braces {} as parameter in the remove() function in order remove everything from the collection. The example below shows you how to remove everything from the customerProducts collection.

customers> db.customerProducts.remove({});
{ acknowledged: true, deletedCount: 2 }

If you try to use the find() function in the collection, you will find nothing. The collection will be empty. This function still works; but you can get a deprecation warning and some other suggestions.

Deleting a Collection

The previous example shows you how to delete all data in a collection. We can also delete the whole collection and all the data in the collection is going to be deleted with it. In order to delete any collection we only need to use the drop() function. We can use this function as many other functions described above. db.collection.drop(). Now we are going to delete the foreignCustomer collection.

customers> db.foreignCustomers.drop();
true

As you can see once we drop the collection, it will return true. In case it returns false you did not delete any collection. Now if we use the show collections command, we can see the other collections. The one we deleted is not there.

Deleting a Database

Before deleting a database we need to know what information it has Now we can delete a practice database; in a professional environment you need to know before deleting. We can use the dropDatabase() function to delete any database. Now we can delete the same database we have been working with. The customers database. We use the dropDatabase() function in the following way.

customers> db.dropDatabase();

{ ok: 1, dropped: 'customers' }

Final Notes

By now you have seen the basics of MongoDB. This information is very useful for MongoDB database development. You saw that MongoDB works with documents not with tables; so it's very different than SQL. Also we need to be advised that MongoDB is case sensitive. In case you have any misspelled field, or any upper/lower case difference; MongoDB will automatically create a new one with the information we entered. In order to avoid that, we can use a MongoDB ODM. Mongoose and MongoClient are very popular MongoDB ODMs.

Although MongoDB can be used in many environments, it's widely used in Nodejs. This information is only the basics of MongoDB. There is a free MongoDB University website where we can learn with all of their free courses. Thanks for visiting our blog. We hope you learned a lot in this tutorial.

More at Moe's Link

Learning The Structure Query Language (SQL)

Moises E Liria Rosario — Thu, 04 Nov 2021 13:16:33 +0000

As you may already know, most applications need a database. The language implemented by most databases is the Structured Query Language (SQL). Although there are many other databases as "MongoDB", and "Cassandra" which don't require the SQL. Even that mentioned databases do not require SQL, databases like "mySQL," "MariaDB," "SQLite," "PostgreSQL," etc. need SQL. This tutorial is not going to dive v very deep into these databases. We are going to learn the language for these databases. Once we learn the language, to learn to manage the mentioned databases would be very easy. Let us start learning the Structured query language (SQL).

Setting a Work Environment

In order to start working with the SQL language we first need to set up a work environment. There are many work environments to work with databases. Environments like "Docker," "Xampp," "SQL Server," and many others, are ready for your database work. In this tutorial we are going to use the Online Docker Playground. Although it's a good practice to set up a local work environment.

Installing Necessary Files

As the Online Docker Playground is similar to locally used Docker. We need to first initialize the SQL environment. In this case we are using MariaDB to set our commands. Please note that this tutorial uses MariaDB; but it's not a MariaDB tutorial. This tutorial is about the SQL language. MariaDB is used only for showing purposes. We provide you some examples below that shows you how to initialize MariaDB in Docker or Docker playground. In case you use another work environment, you need to read their documentation on how to initialize MySQL or MariaDB.

We first need to install Get the necessary files for MariaDB using the following command.

docker pull mariadb

Starting the Installed Files

Once you pull MariaDB you are going to see a list of files loading to your computer or your playground. After the list completely loads, you continue by typing the following command.

docker run --name mycontainer -e MARIADB_ROOT_PASSWORD=password -d mariadb

The above command creates a container. You can call you container as you want; in this case we called it mycontainer. After the name of the container you can see that we created an environment using the -e keyword. The environment is MARIADB_ROOT_PASSWORD and the password is the word password. in case we want to know more environments for MariaDB, we need to see MariaDB documentation. Then we have the -d keyword to specify our database. Once we type the command we are going to get a encoded string. that means that everything is fine.

docker run --name mycontainer -e MARIADB_ROOT_PASSWORD=password -d mariadb

85375561b1e295c002db675cf849247f823a9ba229ead8c07b6a6b63a7d532c4

Initializing SQL

After your environment has been created, you are ready to start creating your databases. You can start MariaDB by typing the exec -it command and specifying the database; in this case we use mariadb. You can also use mysql. The example below shows how to initialize MariaDB. The -it keyword is for iteration. The -u is for the user; in this case our user is root. The -p keyword is for password; The example above set the password to password. You can use any word you want.

$ docker exec -it mycontainer  mariadb -u root -p

Enter password: 
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 3
Server version: 10.6.4-MariaDB-1:10.6.4+maria~focal mariadb.org binary distribution

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

First SQL steps

The steps above were only to initialize MariaDB in the Docker environment. Now it's time to dive into SQL by creating a database. Before creating a database let's follow one of the instructions we got when we started MariaDB. if you type \h or help you are going to see a list of useful commands for most SQL environments. The example below shows you some of these useful commands.

MariaDB [(none)]> \h

General information about MariaDB can be found at
http://mariadb.org

List of all client commands:
Note that all text commands must be first on line and end with ';'
?         (\?) Synonym for `help'.
clear     (\c) Clear the current input statement.
connect   (\r) Reconnect to the server. Optional arguments are db and host.
delimiter (\d) Set statement delimiter.
edit      (\e) Edit command with $EDITOR.
ego       (\G) Send command to MariaDB server, display result vertically.
exit      (\q) Exit mysql. Same as quit.
go        (\g) Send command to MariaDB server.
help      (\h) Display this help.
nopager   (\n) Disable pager, print to stdout.
notee     (\t) Don't write into outfile.
pager     (\P) Set PAGER [to_pager]. Print the query results via PAGER.
print     (\p) Print current command.
prompt    (\R) Change your mysql prompt.
quit      (\q) Quit mysql.
rehash    (\#) Rebuild completion hash.
source    (\.) Execute an SQL script file. Takes a file name as an argument.
status    (\s) Get status information from the server.
system    (\!) Execute a system shell command.
tee       (\T) Set outfile [to_outfile]. Append everything into given outfile.
use       (\u) Use another database. Takes database name as argument.
charset   (\C) Switch to another charset. Might be needed for processing binlog with multi-byte charsets.
warnings  (\W) Show warnings after every statement.
nowarning (\w) Don't show warnings after every statement.

For server side help, type 'help contents'

MariaDB [(none)]>

Creating a Database

The example above provide you with all the client commands in case you need any one of them. Now we are going to start creating our database using SQL. The sample database will be a customers database. By creating and working with this sample database we are going to learn about SQL. We first start with the command CREATE DATABASE CUSTOMERS. It does not matter if we use lower case or upper case, SQL is not case sensitive. Most times we use upper case because it's easier to identify commands in upper case.

MariaDB [(none)]> CREATE DATABASE CUSTOMERS;
Query OK, 1 row affected (0.000 sec)

Confirm Database Creation

The example above shows you how simple is to create a database in SQL. Just be aware that you need to end statements with semicolons. In case you miss it, the statement is going to remain open. You could see that once you created the database you get a confirmation of Query OK. That confirms that database was created. In case you really want to make sure you database is created, you may type the command SHOW DATABASES. that command is going to show you a list of the existent databases; including the one you just created. You can see below how the mentioned command works.

MariaDB [(none)]> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| CUSTOMERS          |
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.001 sec)

MariaDB [(none)]>

Using a Database

Once you confirmed that your database is created, you can use it. Using a database after its creation is a quite easy task. In order to start using the customers database you just created, you only need to type the command USE CUSTOMERS. the USE command is followed by the database name as you can see in the example below.

MariaDB [(none)]> USE CUSTOMERS;

Database changed

MariaDB [CUSTOMERS]>

Creating Database Tables

In the previous example you could see that now you started working on the database. That is a recently created database; as result database is empty. Now it's time to create a table in our database. In SQL Databases, we keep data in tables. In order to create a table in our database, we only need to type the command CREATE TABLE followed by the data names and types we want in a parentheses. The example below shows you how to create a table in the customers database.


MariaDB [CUSTOMERS]> CREATE TABLE usual_customers(
customer_name VARCHAR(100),
customer_city VARCHAR(20), 
customer_gender VARCHAR(10),
customer_id INT NOT NULL PRIMARY KEY AUTO_INCREMENT);

Query OK, 0 rows affected (0.008 sec)

SQL Data Types

In the example above you could see that we created a table in the previously created customers database. You could also see that fields for the table are followed by another keyword. That is the data type of the field. Below we show you a list with the description for the most used SQL Data types.

CHAR	One Single Character; can contain a letter, a number, or a special character
VARCHAR	A fixed set of Characters.
TEXT	It's a String with Maximum size of 65,535 Bytes
INT	Integer signed or unsigned
FLOAT	Floating point number
DOUBLE	Similar to floating number, values can be higher
BOOL	Boolean. True or False
DATE	Date in a format YYYY-MM-DD
DATETIME	Date and Time Combined YYYY-MM-DD hh : mm : ss
TIME	Time hh : mm : ss

The list above shows you some of the most used SQL Data types. There are even more; Here you have a reference of SQL Data Types. You could also see some other values as PRIMARY KEY and AUTO_INCREMENT. The PRIMARY KEY value is used as an unique value that identifies some data in a row. The AUTO_INCREMENT is self explanatory; it increases the value of the previous number or letter.

Seeing Your Table

When you created your table you could see that your query was OK. We can use the SHOW command to see our table and confirm its creation. The example below shows how you can see your table using the SHOW TABLES command.

MariaDB [CUSTOMERS]> SHOW TABLES ;
+---------------------+
| Tables_in_CUSTOMERS |
+---------------------+
| usual_customers     |
+---------------------+
1 row in set (0.001 sec)

Describing our Table

The example above shows that we can see the tables in a list of tables. We also have the ability to see a detailed description of the table using the DESCRIBE command. In this case we can type DESCRIBE usual_customers. The result will be similar to the one we show below.

MariaDB [customers]> DESCRIBE usual_customers;
+-----------------+--------------+------+-----+---------+----------------+
| Field           | Type         | Null | Key | Default | Extra          |
+-----------------+--------------+------+-----+---------+----------------+
| customer_name   | varchar(100) | YES  |     | NULL    |                |
| customer_city   | varchar(20)  | YES  |     | NULL    |                |
| customer_gender | varchar(10)  | YES  |     | NULL    |                |
| customer_id     | int(11)      | NO   | PRI | NULL    | auto_increment |
+-----------------+--------------+------+-----+---------+----------------+
4 rows in set (0.006 sec)

Inserting Data into Tables

Once we create a database and a table, it's time to put some data in our database. We only need the INSERT INTO operation in order to insert data in our database. As you may already know, we insert data into tables. Now Let us insert some data in our customers database, as you can see in the following example.

MariaDB [CUSTOMERS]> INSERT INTO usual_customers(customer_name, customer_city, customer_gender, customer_id)
    VALUES ('John Doe', 'Washington', 'Male', 1);
Query OK, 1 row affected (0.002 sec)

You could see that we could insert a row into our table. Now let us insert some more rows.

MariaDB [CUSTOMERS]> INSERT INTO usual_customers(customer_name, customer_city, customer_gender, customer_id) 
  VALUES('Sarah Parker', 'New York', 'Female', 2),
     ('Josh Perez', 'Chicago', 'Male', 3),
    ('William Johnson' , 'Los Angeles', 'Male', 4),
    ('Peter Parker' , 'San Francisco', 'Male', 5);
Query OK, 4 rows affected (0.004 sec)
Records: 4  Duplicates: 0  Warnings: 0

Visualize Data

You could see in the previous example that we could insert data into our table. The only result you could see was Query Ok, 1 row affected once we added one row to our database. When we added 4 you could see the same result with a number changed. You could not see the data you entered. In order to see the data entered we need to use the SELECT command. To see all the data we can use the SELECT * FROM table_name. In this case the table name is usual_customers. The following example shows you how to visualize data in our tables.

MariaDB [CUSTOMERS]> SELECT * FROM usual_customers;
+-----------------+---------------+-----------------+-------------+
| customer_name   | customer_city | customer_gender | customer_id |
+-----------------+---------------+-----------------+-------------+
| John Doe        | Washington    | Male            |           1 |
| Sarah Parker    | New York      | Female          |           2 |
| Josh Perez      | Chicago       | Male            |           3 |
| William Johnson | Los Angeles   | Male            |           4 |
| Peter Parker    | San Francisco | Male            |           5 |
+-----------------+---------------+-----------------+-------------+
5 rows in set (0.001 sec)

Auto Increment Values

As you can see we created a customers database with a usual_customers table. The last column of our table is the customer_id. As you could see that is the PRIMARY KEY for customers in the table. These values an AUTO_INCREMENT values. When we inserted data into our tables we also inserted the customer_id values. We can also insert data without that value, and the value will be placed automatically. You can se below how we can do it.

MariaDB [CUSTOMERS]> INSERT INTO usual_customers(customer_name, customer_city, customer_gender) VALUES ('Tiffany Clark', 'Richmond','Female');
Query OK, 1 row affected (0.002 sec)

MariaDB [CUSTOMERS]> SELECT * FROM  usual_customers;
+-----------------+---------------+-----------------+-------------+
| customer_name   | customer_city | customer_gender | customer_id |
+-----------------+---------------+-----------------+-------------+
| John Doe        | Washington    | Male            |           1 |
| Sarah Parker    | New York      | Female          |           2 |
| Josh Perez      | Chicago       | Male            |           3 |
| William Johnson | Los Angeles   | Male            |           4 |
| Peter Parker    | San Francisco | Male            |           5 |
| Tiffany Clark   | Richmond      | Female          |           6 |
+-----------------+---------------+-----------------+-------------+
6 rows in set (0.000 sec)

Selecting Only Certain Data

The previous examples shows you how to select all the data in a table. You have the ability to select only certain rows where data have similar values. In case data does not have similar values in a table, we can select only one. In order to select only a part of the data we use the WHERE keyword. Then we specify our data. We can use the statement SELECT customer_name FROM usual_customers WHERE customer_gender = 'Female'. Then we can see the result.

MariaDB [customers]> SELECT customer_name FROM usual_customers WHERE customer_gender = 'Female';
+---------------+
| customer_name |
+---------------+
| Sarah Parker  |
| Tiffany Clark |
+---------------+
2 rows in set (0.001 sec)

Using the AS keyword

We could see above that we can select only part of the database. Also, we can classify the part of the database we chose using the AS keyword. Now we are going to use the same example that we used above, and instead of customer_name, we are going to use the word women.

MariaDB [customers]> SELECT customer_name AS women FROM usual_customers WHERE customer_gender = 'Female';
+---------------+
| women         |
+---------------+
| Sarah Parker  |
| Tiffany Clark |
+---------------+
2 rows in set (0.001 sec)

Updating Data

In some cases like misspelling or entering wrong data, we have the ability to modify it. In SQL that is quite easy to modify data. We only need to use the UPDATE and SET keywords. We use the UPDATE for the old value, and the SET for the new value. The example below shows you how to modify data using the UPDATE SET keywords.

MariaDB [customers]> UPDATE usual_customers SET customer_name = 'Josh Lopez' WHERE customer_id = 3;
Query OK, 1 row affected (0.014 sec)
Rows matched: 1  Changed: 1  Warnings: 0

Now we can see the result by only typing SELECT * FROM usual_customers.

MariaDB [customers]> SELECT * FROM usual_customers;
+-----------------+---------------+-----------------+-------------+
| customer_name   | customer_city | customer_gender | customer_id |
+-----------------+---------------+-----------------+-------------+
| John Doe        | Washington    | Male            |           1 |
| Sarah Parker    | New York      | Female          |           2 |
| Josh Lopez      | Chicago       | Male            |           3 |
| William Johnson | Los Angeles   | Male            |           4 |
| Peter Parker    | San Francisco | Male            |           5 |
| Tiffany Clark   | Richmond      | Female          |           6 |
+-----------------+---------------+-----------------+-------------+
6 rows in set (0.001 sec)

Deleting Data

In case we entered some unnecessary data in our table, we can delete it. It's so simple to delete any row in a SQL table. We only need to use the DELETE FROM keywords followed by the statement we need to delete. In this case we are going to delete using the ID. The example below shows you how we delete one row of our customers database.

MariaDB [customers]> DELETE FROM usual_customers  WHERE customer_id = 4;
Query OK, 1 row affected (0.004 sec)

Using the SELECT * FROM usual_customers command we can see that one row was deleted.

MariaDB [customers]> SELECT * FROM usual_customers;
+---------------+---------------+-----------------+-------------+
| customer_name | customer_city | customer_gender | customer_id |
+---------------+---------------+-----------------+-------------+
| John Doe      | Washington    | Male            |           1 |
| Sarah Parker  | New York      | Female          |           2 |
| Josh Lopez    | Chicago       | Male            |           3 |
| Peter Parker  | San Francisco | Male            |           5 |
| Tiffany Clark | Richmond      | Female          |           6 |
+---------------+---------------+-----------------+-------

Some Notes

Although this tutorial used most MariaDB to show examples, it's about the SQL Language. By now we have seen most of the operations of SQL. In this tutorial we only created a database and a table. You can create as many tables as you need in any database. You should place your semicolon(;) at the end of each statement. In case you do not place the statement is going to remain open. We also need to be aware of commas and quotation marks. Also be advised that we typed our commands and keywords using upper case; it does not matter wether they are upper or lower case. Below we have a list of the documentation of many technologies that implement the SQL language to create Databases.

Conclusion

We could see that one language works very well to manage databases. Even we still have a lot to learn regarding databases, this is a great foundation for database development and maintenance. We use databases for our applications in all programming languages. We can choose what technology we used based on SQL. Thanks for reading our tutorial. Hopefully you got great knowledge in this tutorial.

Find More at Moe's Link

HTML Drawing With Canvas

Moises E Liria Rosario — Wed, 27 Oct 2021 19:27:15 +0000

As you may already know, there are two ways of creating graphics in HTML. One of them is Scalable Vector Graphics (SVG), and the other one is Canvas. We previously created a tutorial about SVG. Now we are going to learn about Canvas. In the SVG tutorial we learned how to draw some geometrical figures in HTML. Now we are going to learn how to draw using canvas. We can draw most graphics in SVG and canvas. Although in Canvas we need some JavaScript , there are many other things besides drawing that we can do with canvas. We are going to learn most of them in this tutorial. Let us start learning.

Drawing In the Browser

As we could see in the SVG tutorial, to Draw in the browser we implement the cartesian system. Although we use it in a different way. The cartesian system in the web uses the positive X axis and the negative Y axis as the screen. The point (0, 0) is the left top corner of the screen, and the numbers on the Y axis are not considered negatives. As we can see in the two images below. I assume you saw it in the SVG Tutorial. In case you did not see it, I show that to you again.

The Canvas HTML tag

In order to start drawing in HTML with canvas we need the HTML tag. This tag is compatible with most modern browsers. Once we place the canvas tag in our HTML we will not see any difference. That is because the canvas tag is the container for our graphics. We can use some attributes for the canvas tag. The most used attributes for canvas are the width, and height. That is because the width of a canvas is set by default to 300px, and the height is set at 150px. Besides the width and height attributes, we can also use attributes for styling like id and class We show you brief example below of an empty canvas. We added some style so you can see how it is. In case we would not add any style you would not be able to see it.

Canvas Context

Once we create an empty canvas and set their attributes, we need to add some scripting. We first start adding the canvas to our script using the document.getElementByID function. Then we get the canvas context as a new element. We make all changes to canvas through the context. We use the function getContext() in order to get our context. In this tutorial we will add the context for most examples as ctx. As Canvas is a 2d drawing environment we will add the 2d parameter to our function. The following example shows how to initialize canvas in JavaScript.

let myCanvas = document.getElementById('my-canvas'); // If the Id of the canvas is set to my-canvas

let ctx = myCanvas.getContext('2d');

We can also embed them into a function; but in this tutorial we are going to use straight into the script. It's up to you if you want to set up a function as a good practice. We are only going to show you how to embed the context into a function though we will barely use it.

function draw() {
  var canvas = document.getElementById('my-canvas');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');

     //Your Changes after getting the context
}

Drawing Rectangles with canvas

Although in canvas we can create a lot of shapes and figures, the only ones that we can create using a single function are the rectangles. There are three functions that we can use to draw rectangles in canvas. They are fillRect(), strokeRect(), and clearRect(). As you may see in the example below, the strokeRect() function draw a rectangle through a line. The fillRect() function fills a rectangle with the fillStyle color. The clearRect() function draws a rectangle with a clear background. We can see that we can also use th strokeStyle() function in order to get a color line.

The example above shows how the mentioned functions to draw rectangles work. We just need to call the function in our script, then we specify the points for our rectangles. As you may know the first point is where the rectangle starts; the left top corner. The last point is the length and the height of the rectangle where X is the width, and Y is the Height.

Drawing All Other Shapes

As you could previously see, in canvas we have three functions to draw a rectangle. By now you should be thinking about how to draw the other shapes. In SVG you can draw shapes using a tag and some attributes. in canvas we draw all the shapes using a scripting language (JavaScript). In order to draw all the other shapes in canvas, we need the canvas path functions. There are also SVG paths which are very useful for SVG Graphics. In canvas we have many path functions which help us to draw canvas graphics easier; even while using JavaScript. We describe below the functions needed to draw with canvas using path.

Begin Path Function beginPath()

As its name implies, this function initializes the path that we need for our shapes. In other words this function initializes the drawing pen. We use this function along the canvas context that we described above. Well, we implement most canvas functions along the context. We show you a brief example below of how initialize the path in canvas.

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.beginPath();  //Initializing the Path

Moving the Path Function moveTo(x, y)

We have the ability to move the initialized path to a (x, y) point using the moveTo() function. That is simple and straight forward. We show you another example below of how to move the path to a point.

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.beginPath(); 

ctx.movePath(50, 50);  // Moves the path to the point (50, 50)

Closing the Path closePath()

Once we draw any path, we have the ability to close it using the closePath() function. The closePath() function creates a straight line from the ending point to the starting point of our path. Sometimes we do not need this function; but some others times it's necessary.

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.beginPath(); 

ctx.movePath(50, 50); 

ctx.closePath(); // Closing our Path

Stroke Function stroke()

The stroke() function is one of the functions we use to draw our shapes. This function is going to trace a line through the created path. Once we create our path and establish its points, we call the stroke() function to get the results.

Fill Function fill()

The fill() function is similar to the stroke() function. The only difference is that fill() function is going to draw the shape filling that with a solid color.

Fill and Stroke Styling

We also have two values which are responsible for the color of our shapes. These two values are fillStyle and strokeStyle. These two values set the color style as a string. They work with the fill() and the stroke() functions. We can set the colors using the color names, the RGB, or Hexadecimal values of any color in the following way.

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.fillStyle = 'green' // Fill shapes with color green when we call the fill() function
ctx.strokeStyle = 'red'  // Stroke a red line when we call the stroke() function

Drawing Lines in Canvas

By now we have seen many functions to draw using canvas. While drawing rectangles you could see how many of them work. Now you are going to see how they work in all the other shapes. You are also going to learn a lot of new functions to draw with canvas. One of the functions you are going to learn is the lineTo() function. This function as its name implies, draws a line between the starting point of our path and the given point we set. This function have two parameters which are the X, and Y values of the point where we are drawing the line. The example below is the most simple example of drawing a line. You can also see that we use the moveTo function to set a starting point.

The Line Width Value

The example above shows you how to draw a single line. You could also see in that example that we can set the width of the line using a numeric value. we don't need to specify the unit; but the width is going to be in pixels. The line of the example above is a 10 pixels width line.

Drawing a Triangle

We can also draw triangles using some lineTo() functions. The following example shows you how to draw a triangle using two lineTo() functions and closing the path using the closePath() function. Now you can see how some of the functions we described above are implemented.

Drawing Circles with Canvas

There are two functions that we can use to draw arc in canvas. The same functions are used to draw circles because circles are arcs with a different ending angle. The two functions that we can use to draw arcs are the arc() function and the arcTo() function. In this tutorial we are going to use only the arc function. Although below we show you the description of both functions.

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

beginPath();

ctx.arc(x, y, radius, startAngle, endAngle,  [counterClockWise)); // Arc Function

ctx.arcTo(x1, y1, x2, y2,  radius);  // ArcTo Function.

You can see the description of the two functions to draw circles above. The parameters of these functions are different but they are straightforward. The arc function has six parameters. the first two values are the point (x, y) where the center of the arc is placed. The third parameter is the radius of the arc. The fourth and fifth values are the starting angle and the ending angle of the arc. Most times the starting angle is 0. If we are going to draw a whole circle the ending angle is 2π. As you may know in JavaScript we use Math.PI. The sixth Parameter is a boolean value. That value is clockWise or counterClockWise. That value is optional; but it denotes the direction of the arc. The arcTo function is clear. It draws an arc using an starting point, and ending point, and the radius. We provide an example below of a circle drawn using the arc() function.

The above example shows you how we could draw a circle using the arc() function. We could fill the circle and stroke it. The example below is going to show you how we can move the Path using the moveTo() function and create some more arcs. The following example is a happy face. In case you want to see the drawing lines you don't need to use the moveTo() function; you can only continue drawing the other circles.

Evenodd Parameter

The example above shows a happy face drawing several arcs using the moveTo() function. We still can see some of the remaining moving line because we did not use the exact point in the moveTo function. You can try to clear the remaining of the line by subtracting or adding some numbers to the point in the moveTo() function. Something else that you can see is that the fill() color is also in the eyes. While using a path the fill and stroke color are going to be the same for the whole path. In order to avoid that we can use the evenodd parameter in the fill function. Using the evenodd parameter we can set a new fill color to any closed part of the path. below we show you the same example with a different color in the eyes using the evenodd value as parameter for the fill() function.

Multiple Paths

Using the evenodd parameters sometimes can be tricky and cause you some confusion. In order to avoid that, in canvas we can begin the path multiple times to use different fillStyle and strokeStyle values. No matter if you are going to use one path inside the other; remember that canvas works with the points. The example below shows you that we can begin a path and draw inside the others using different colors.

Canvas Line Cap

A few examples above we could see how to draw lines using canvas. Once we draw a line we have the ability to set a line cap. A line cap is the ending point of the line. There are three values that we can set as a line cap. we have the square value, also the butt value, and the round value. The square and butt are similar, they will only increase or reduce the line cap. The rounded value is the most different one because that one is going to round de ending point of the line. The following example shows you what is the result of the three canvas line cap.

Canvas Join Line

One of the first shapes we created using canvas was the triangle. As you could see in the triangle there are three joining lines. In canvas we also have the ability to set line joins differently. There are also many types of line joins in canvas In order to add different line joins we only need to apply the lineJoin values for our lines. As the lineCap value, the lineJoin also has three different values. These three values are bevel this value fills an additional triangular area between segments. Another value is the mitter, this value extends the connecting edges of the line. The other value is the round value, this value rounds the corner of connecting segments. The following example only shows you the round value. You can try the others to see the difference. Only need to change the value.

Canvas Curves###

Although we have the arc function in canvas, we also have the possibility to draw only a curve. There are two types of curves in canvas They are the Bézier curve, and the quadratic curve. In order to draw these curves the only thing we need to do is to call their function and set the parameters. The only difference between quadratic curve and Bézier curve is that quadratic curves have only one control point, while Bezier curve have two. Their functions with parameters are quadraticCurveTo( cp1x, cp1y, x,y) and bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); where cp are the control points. We provide you another brief example below of a Bézier curve. (This example is only for showing purposes, In professional design you need to dive deeper in curves)

Canvas Shadow

We can also set a visual shadow to any canvas shape. There are many values that we can use to set the shadow inn canvas. These values are the shadowOffsetX, the shadowOffsetY, the shadowColor, and the shadowBlur. The shadowOffsetX and shadowOffsetY are numbers that take off a shadow from the original shape. They translate some units off their X and Y points. The shadowColor is straightforward; this value set the color of the shadow. We also have the shadowBlur value; this value sets a blur effect on the shadow.The example below shows the shadow of a rectangle using the mentioned values.

Canvas Gradients

Linear Gradient

In canvas we have the ability to fill our shapes with gradients. There are two types of gradients in canvas. The first type of gradient is the linear gradient. In order to create a linear gradient we only need to create a variable and implement the function createLinearGradient(). The function needs four parameters; these parameters are two (x, y) points. The function should be like createLinearGradient(x1, y1, x2, y2). Once we create the gradient we need to add color stops using the function addColorStop(). The addColorStop() function has two parameters. The first parameter is the position from 0 to 1 where we want to add the color stop. The second parameter is the color value. We can use color names, RGB values , or Hexadecimal values. We show you a brief example below about linear gradients.

Radial Gradient

Radial gradients are different than linear gradients. Their main difference is that radial gradient use two radiuses as reference, and the result is circular. The syntax for the function to create a radial gradient is createRadialGradient(x1,y1, r1, x2, y2, r2). You can also add the color stops with the addColorStop() function. The result would be similar to the one of the example below. In case you want to change the flow direction of the gradient, you need to change radius and points.

Canvas Image Patterns

We can also fill our content with patterns using canvas. To create a pattern is quite easy. We only need to create an image using the Image() function for javaScript. Then we create the pattern in canvas with the function createPattern(). After that we proceed to fill our context using the fill() function. The createPattern function has two parameters. The first parameter is the name of the image we are going to use. The second parameter is a string containing the pattern action. There are there actions for patterns. They are repeat, repeatX, and repeatY. The repeatX action is going to repeat the image horizontally, repeatY is going to repeat image vertically, and the repeat is going. to repeat the image horizontally and vertically. We show you another brief example for patterns. In case you want to see the image repeated more times, you need to resize using JavaScript.

Drawing Text with canvas

The term drawing text sometimes can be confusing. That is because we write text; no draw text. In canvas we can draw text by just setting a font to the context. Then we can call the function fillText() or strokeText(). These two functions have three parameters. The first parameter is the string of the text that we are drawing. The second and third parameters are the X and Y coordinates of the point where we are placing our text. The example below shows you how to draw text in canvas. That's really nice.

Conclusion

Here you got enough information about canvas drawing. Even though we have a lot more of things to do with canvas. I am not sure if you saw our CSS Animations tutorial ; In canvas we also have animations. We are working on a tutorial for more things that we can do with canvas including animations. Thanks for reading our post, We hope you enjoyed and learn a lot about canvas in this post. You can find a lot more of information about canvas in the Canvas MDN Tutorial . We also got some graphics from Pixabay.

More at Moe's Link

HTML Drawing With Canvas

Moises E Liria Rosario — Wed, 27 Oct 2021 18:36:38 +0000

Drawing In the Browser

The Canvas HTML tag

Canvas Context

let myCanvas = document.getElementById('my-canvas'); // If the Id of the canvas is set to my-canvas

let ctx = myCanvas.getContext('2d');

function draw() {
  var canvas = document.getElementById('my-canvas');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');

     //Your Changes after getting the context
}

Drawing Rectangles with canvas

Drawing All Other Shapes

Begin Path Function beginPath()

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.beginPath();  //Initializing the Path

Moving the Path Function moveTo(x, y)

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.beginPath(); 

ctx.movePath(50, 50);  // Moves the path to the point (50, 50)

Closing the Path closePath()

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.beginPath(); 

ctx.movePath(50, 50); 

ctx.closePath(); // Closing our Path

Stroke Function stroke()

Fill Function fill()

The fill() function is similar to the stroke() function. The only difference is that fill() function is going to draw the shape filling that with a solid color.

Fill and Stroke Styling

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.fillStyle = 'green' // Fill shapes with color green when we call the fill() function
ctx.strokeStyle = 'red'  // Stroke a red line when we call the stroke() function

Drawing Lines in Canvas

The Line Width Value

Drawing a Triangle

Drawing Circles with Canvas

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

beginPath();

ctx.arc(x, y, radius, startAngle, endAngle,  [counterClockWise)); // Arc Function

ctx.arcTo(x1, y1, x2, y2,  radius);  // ArcTo Function.

Evenodd Parameter

Multiple Paths

Canvas Line Cap

Canvas Join Line

Canvas Curves###

Canvas Shadow

Canvas Gradients

Linear Gradient

Radial Gradient

Canvas Image Patterns

Drawing Text with canvas

Conclusion

More at Moe's Link

Introduction to Nodejs and Express

Moises E Liria Rosario — Sun, 17 Oct 2021 17:46:20 +0000

We are going to learn some back end web development using JavaScript. The framework we are going to learn is very useful for back end web development. That framework is Nodejs. We are also going to use the most popular middleware for Nodejs. That middleware is "Express”. In this tutorial we expect you have some JavaScript knowledge. Also some HTML and CSS for templates and styling purposes. At the end of this tutorial you will have a great foundation to start creating your own applications.

Introduction

To start we first need to download Nodejs from its website. Then we proceed to install NodeJs. Once the software is installed, "The Node Package Manager" npm will also be installed.

Once we finish the installation we can check the version of the installed softwares in the terminal. We only need to type the command npm -v && node -v to get the result. If your result is similar to the one we show you below; that means you successfuly installed Nodejs and npm . Otherwise you need to check for installation errors.

node -v && npm -v
v16.9.1
7.21.1

Creating a Simple server

It's quite easy to create a simple server with Nodejs. As you may already know, you just need the terminal and a text editor. My favorite text editor is Visual Studio Code; but you can use your preferred one. The result is going to be the same. Once we choose our text editor we can create a file and name it app.js. After we create the file we can type the example we see below in our file. Then you will get a result of a route and a console log.


const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.send('Hello World!');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

The example above shows how to create a simple server using Nodejs. This example does not use npm. All the used packages are default node packages. As you can see we firstly required the http package to create the route. Then we created a host name and a port. After that we send the status codes and headers. Nodejs Applications listen the port and we get a "Hello World" result in our browser. If you want to see the result, you only need to type in your terminal node app . Then you can go to your favorite browser and type localhost:3000. The result will be similar to the one we show below.

Introduction to Express

The example above is the most basic example of a Nodejs server. We can create a lot of things by only using Nodejs; but sometimes it can be tricky. You can see the Nodejs Docs and explore all you can do by only using Nodejs without any additional package. Using only Nodejs can be confusing sometimes. For that reason we have the npm. One of the most popular packages is express, and we are going to learn a lot of express in this tutorial. Let us start learning the express package.

Installing Express

When we started this tutorial we set some instructions to install Nodejs and npm. After we installed these softwares we could check their version. In order to install any package we only need to type the command npm install followed by the package name. We can install express as any other package as you can see in the example below.

npm install express

Creating an Express Application

To create any Nodejs application using the npm, We first need to create our package.json file. In that package we specify our dependencies and scripts. We can. also specify our dependencies for development as we are going to see below. In order to create the package.json for our application, we need to create a folder with the name of the application we want. We can create the folder in our terminal or manually. After we the folder is created we go to the folder in our terminal and type the command npm init. We can also type the command npm init -y.The example below shows you how the package.json is created.


npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (sample)
version: (1.0.0)
description:
entry point: (index.js) app.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/moe/webapps/node/sample/package.json:

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) y

In the example above you can see how we create the package.json using npm init. We created it and specify everything in the terminal. In case we want to create everything automatically, and then modify it in our text editor. We only need to type the other command that is npm init -y.

Modifying our Package

Once we create our package we can modify it using our text editor. No matter if you created it using npm init or npm init -y, the result is similar. You name your application using the name you want. Most times you use the same name we used for our container folder. By default the version is 1.0.0; you are creating a new application. In the description you can add a brief description. The main part is the name of the main file of your application. By default it will be index.js; but I personally name it app.js. You can name it as you want. in the scripts you can type the scripts you are going to use. We are going to explain scripts below. In the author field you can put your name or the name or your company. The image below shows you the package.json using Visual Studio Code.

Setting Up The Express Application

As the package.json specified the name of our application, now we proceed to create it. We said above that default name for any Nodejs application in the package.json is index.js. We can name as we want, and I personally like to name it app.js. In the same folder we create an empty file and name app.js Now we have two files for our application. We also need to install express. We previously showed you how to install express. You only need to go to your terminal and type the command npm install express. That command is going to install the latest version of express in your application. Once express is installed we can check our package.json file and see that another field is added. that field is the dependencies field. and inside is the version of express installed. as we show in the picture below.

npm install express

Once we install the first package in this case express, another file will be generated. This file is the package.lock.json. That package describes the exact tree that was generated. That packages also modifies itself when we install more dependencies. We also can create the dependencies field manually in our text editor. We can specify the dependencies we need. Then we type in our terminal npm install. All dependencies will be installed. In case we don't. know the number version of the dependency and we want the latest one. We can type an asterisk * where the number of the version goes. The latest version of the dependency will be installed. Another image below shows you how to do it.

Creating The Express Application

After we set everything up in our package.json file and also create the app.js file we can start creating our application. In the app.js file we start importing our packages. As we only have the express package installed. We proceed to import it or required in our app.js creating a variable that import it. To import or require a package we can use the following syntax.

import express from 'express';  //ES6  syntax.

let express =  require('express');
 // Creating the Variable. That is the most used syntax and the one used in this tutorial.

After we create the express variable we can create the app. In order to create the app we only use the express variable that we created above as a function. Then we create a variable called app as the one we show below.

let app = express();

Adding a Port for our new Application

Once we create a new app the app needs to listen to a port. So we can create a variable called port and assign a port number. For development purposes we assign a number; but in order to deploy our application we use the process environment port. After the post creation we can use the listen function and add another callback function to get some results.The example below shows you how to use the process environment port and the number at the same time using a logic OR (||).

let PORT = process.env.PORT || 3000;

app.listen(PORT, function(){
    console.log(`App Started on ${PORT}`); 
// Using Back ticks  we can add the variable name to a string using "${}"
});

If we followed the same steps we explained here, we created our application. That is a simple application but that is the starting point. In order to run our applications we need to go to our terminal and type node app. Our application will run, and the result will be similar to the one showed in the images below.

Express Routing

Now that you successfully created your application you can open your browser and go to localhost:3000 and see some results. Well, you can see the application is running; but in the browser you don't have anything. The only result you see in your browser is that the browser cannot get the route. The result is similar to the image below. For that reason we are now going to learn some routing for express applications.

Now it's time to get some routes to our application. In order to add routes we need to apply the HTTP verbs. These verbs are get, post put and delete. In this introduction we are going to use only the get. in a further tutorial we are going to learn how to use all the others. The get method gets the route of the page. the slash symbol( / ) is the home page. We are also going to create some other routes; but let us start with the home route. Most times we start creating routes after the app declaration and before the PORT. If you add the following code to your app you are going to send a Hello World! to the browser.

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

       res.send("Hello World!");

});

You can see in the code we added above that we are using the get method as a function. Then we add the home route ('/'). After that we created a callback function with the parameters req and res. These parameters are also Nodejs built in functions. The req parameter requires information, and the res parameter can send information to your browser. You are going to learn deeper about these parameters in a further tutorial. If you added the code to your application your result will be similar to the one we show you below.

The Express static Public folder

Now you could send some information to your browser; but that is not the result you want in your application. We can create a static folder where we can put our HTML files. In that folder we can also put our CSS and Javascript files. We can name the folder as we want. Most times we name the folder the public folder. To add the public folder to your app you need to add the following code.

app.use(express.static('public')); // Using Express static. The name of the folder is public.

After we create the static folder we can create a file called index.html. By now we are only going to display a "Hello Guys" heading as the result. You can create the html file you want in your html. You only need to name it index.htm so express recognizes the file. now if you reset your application using CTRL+C, and restart it again. Then you go to your browser localhost:3000, and see the new result. ( Make sure you comment out the first route.)

Installing New Dependencies

In express applications we can install as many dependencies as we want. We only need to type in our terminal npm install followed by package name. Once we install the package, it will be added to de dependencies in your package.json file. Now let's install one package. In previous examples you saw that you had to reset terminal when you modified your code. This package is going to avoid the need of resetting your application as you add code. This package is Nodemon. You only need to type the following command, and your application will be ready.

npm install nodemon

After you installed nodemon, you only need to type nodemon in your terminal in order to use it. Nodemon will reset the application after you add some changes and saved them. In case it does not run on the first try, you need to install the package globally using the following command.

npm install -g  nodemon

OR 

sudo npm install -g nodemon

Working with Scripts

When you first saw your package.json you noted there is a field called scripts. In Nodejs these scripts refer to commands we type in our terminal. They are not like the regular JavaScript scripts. To run any script you created you only need to type the command npm run followed by your script name. When you first create the package.json you can see there is a test script automatically created. Now let us create some scripts for our package.json The first script we are going to create is the start script. Most deployment process environment use the start script by default to start any Nodejs Application. Then we are going to create a dev script in order to use nodemon. The image below shows the modified package.json

npm start    //starts the application

npm run dev // starts the application via nodemon

Express Template Engines

Besides using plain HTML in the public folder, we can use some view or template engines. That practice is very useful while creating express applications. Express has many view engines such as ejs, jade, handlebars, pug etc. You can see more information about view engines in their website. My Favorite one is ejs, because that one is similar to HTML. In order to add a view engine to our application, we first proceed to install the package. In this case we install ejs and then set the view engine in our app.js using the app.set() function. After that we can also set a views folder as you can see in the example below.

   npm install ejs

app.set('view engine', 'ejs'); //setting ejs as our view engine

app.set('views', 'views'); // setting the views folder

After you set the view engine and views folder to your application, you proceed to create the views folder. If you are using a view engine is because you are not going to use the index file that you created in the public folder. You can delete the file and keep the folder for styling and scripts. Now in your views folder you can create a new index file. In that file you use the file extension ejs. The syntax will be similar to HTML. In a further tutorial we are going to show you how to deal with forms and databases using Nodejs and template engines.

Routes to Views

The previous section shows how to set a view engine and create the views. In order to see the views in your browser, you need to add routes to your views. That is an easy task in express. When you used the app.get('/') function you also used the res.send() method. In order to display a view from your views folder, you need to change the method to the res.render method. That is going to render the view in your route. The example below shows you how to render a view called index to our home route.

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

  });

Using the Express Router

Imagine you have several routes in your app. In express we have pre build router that we can use for these cases. Even if you don't have too many routes, using the router is a good practice. Most times we create another folder called routes for our routes files. After we create the folder we can add as many files as we need. In this case we are creating a file called index.js. In this file we are going to use the pre built express router. Then we can export the file to our app.js file. The example below shows you how to use the express router.

let express = require('express');
let router = express.Router();

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

res.render('index');

});

module.exports  = router;

Now we can import the route in our app.js file. We need to make sure we delete the route we had before to avoid errors in our applications. Below you can see how to add the route to the app.js

let index = require('./routes/index');  // importing the route from the routes folder

app.use('/', index);  Implementing our route with the use() function.

As we said before you can use as many routes as you want. We can create another file in our routes folder similar to the one that we created before. We are going to call this file users.js. Then we can import it to our app.js as we can see the other example below.

let users = require('./routes/users'); // Importing the users route

app.use('/users', users); // Adding the route to our application.

If we add all the changes to the app.js file; the file will be similar to the one we show you in the following image.

Express Generator

There is a node package called express-generator. That package serves as a shortcut to create an express application. That package will create the package.json, the app.js , and many other required files. It will also add a view engine though we need to install all the dependencies using the npm install command. To use the express generator we first proceed to install it using npm install express-generator. Now we can create an application using express as a command as express app1. Then we install dependencies as we stated before. The application generated with express generator listen port 3000 by default. the image below shows you how to use the express generator.

Conclusion

This tutorial is an introduction to Nodejs and Express. We focused more on express because learning a package is a great way to start learning Nodejs and more of its packages. Express is a complete package that we can use to create any application. This is only an introduction to Nodejs and Express. At this time we are working on some others more advance tutorials. Thank you for reading our tutorials, and we hope you learn a lot in this tutorial.

You can find more information about Nodejs in their Documentation. Also you can find information about express in the Express Website. The Express MDN also

More at Moe's Link

CSS Transforms Transitions and Animations

Moises E Liria Rosario — Thu, 26 Aug 2021 18:35:52 +0000

I don’t know if you read our Scalable Vector Graphics Tutorial. If you have not read it, I encourage you to read it. That tutorial shows you how to learn to draw SVG graphics in HTML. In this tutorial we are going to learn how to transform and animate graphics using CSS. We are also going to show you how to animate text. Even though we recalled the SVG tutorial, we are not going to draw graphics at this time. All the graphics that we are going to use are from “Pixabay.” Let us start learning how to transform, and animate HTML Elements.

CSS Transforms

Firstly we are going to start with CSS Transforms. We can apply transform to most. HTML elements. CSS Transforms let rotate, skew, scale, or translate HTML elements. CSS Transforms also use the same cartesian system of SVG graphics. We mentioned above the most useful CSS transforms. We are also going to show you how to apply them to your code. Below we show you a description for all CSS transform properties.

Translate

As its name implies, translations move HTML items to a different position in the browser. It's very easy to apply translations in CSS. The only thing we need to do is to declare the transform, and them call the translate function. This function can contain one or two parameters. The first parameter is the translation for the X axis. The second one is for the Y axis. We can also work with the function translate 3d. That function contains a third parameter.

#selector{
  transform: translate(50px); /* One parameter only translate the x value */
}

#selector2{
   transform: translate(20px, 30px);

}

#selector3{
  transform: translate3d(15px, 30px 45px); /*transform 3d function */

}
/******************************************************************************/

Rotate

We can also rotate any HTML item using CSS transforms. It's very easy to rotate items. We only need to declare the transform property, then we call the rotate function. Once we call the rotate function, we set its only parameter that is the angle of rotation. We can use our preferred unit for angles. Most times we use degrees; but we can also use radians, turns etc.

#selector{
   transform: rotate(35deg);

}

/**********************************************************************/

Scale

The scale function is another CSS transform function. This function serves to resize HTML elements. This function also contains two parameters. These parameters don't specify any styling or angle; they are numbers. As you may already know, the first parameter indicates the X value as the second the Y value. We can also have a third parameter if we apply the function scale 3d.

#selector{
   transform: scale(0.5, 1);
}

#selector2{
    transform: scale3d( 0.2, 0.5, 2.1);   /*scale 3d  function */
}

/********************************************************************************/

Skew

Another CSS transform function is the skew function. This function distorts each point of any element with an angle. This function can contain one or two parameters. These parameters are the angles for the X values and the Y values. In the case it only contains one parameter that is the parameter for the X value. The effect this function causes is very nice. Once we get the correct angles we are going to see the result.

#selector{
   transform: skew( 70deg, 15deg);
}

#selector2{
   transform: skew(0.3turn, 0.7turn) /* We can use turns rads degrees and many angle units */

}

Using more than one transform function

It's possible to use more than one transform function in only one property. The only thing we need to do is to declare a function and then declare the other. We can use as many functions as we want. We show you an example below with all the transform functions we explained. Although it's not necessary, we added some JavaScript to the transforms. After we click on buttons we can see the transforms. As you can see in the example below, transforms are made using CSS classes.

CSS Transitions

CSS transitions define transition between two states of any HTML element. There are four basic properties for CSS Transitions. They are the "delay", "duration", "timing-function" and the "transition property". Their syntax is as we show you below.

#selector{
transition-property: margin-right;
transition-delay: 0.5s;
transition-timing-function: linear;
transition-duration: 3s;
}

transition-property	This is the property where transition would apply
transition-delay	This is the time that transition waits to start
transition-timing-function	Let us establish acceleration curve. (depends on duration)
transition-duration	This is the time the transition lasts

Transition shorthand

We can use all these properties at once with only one line of code. We can use the transition keyword and then specify all the other properties.

#sample{
   transition: property duration timing-function delay;

}

#selector{
   transition: margin-right 5s linear 0.5s;


}

/**********************************************************/

Using Transitions with transforms

We can use transitions with transforms. Even though we are not diving too deep into transitions, we can see their effect in transforms. The only two properties we are using in the following example are the transition delay and duration. The example below is similar too the example we previously saw. Its only difference is that we applied transitions. In the results you can see the how the transitions occurs. It's a nicer effect.

CSS Basic Animations

We can see that CSS transforms along with transitions works as regular CSS animations. Besides transforms and transitions we can use animation properties. They serve to animate elements from one style to another. There are many CSS Animation properties. The most used ones are "animation-name", "animation-duration", "animation-iteration-count", and "animation-delay". There are many others that we don't mention here. They can be found at the CSS Animations MDN We are going to see how some of these properties work along with CSS keyframes.

animation-name	This is the name of the animation specified by a keyframe
animation-duration	This property specifies the time the animation is going to last
animation-delay	This property specifies the time to start the animation
animation-iteration-count	This property specifies how many times the animation runs

CSS Keyframes

CSS keyframes specify the name, the starting, and the end of CSS Animations. Using keyframes we set the style that elements need to apply for animation. There are two types of keyframes. The first type is the one that set two functions. One of them is the function "from", and the other is the function "to". The other type of keyframe is the one that works with percentages. In that type of keyframe we can set as many functions as we want. We increase the percentage and apply the new style to the element.

@keyframes my-keyframe{

  from{
     /*code here

  }

   to {
        /*code here*/
      }
}


@keyframes percentages{
   0%{
       /*code here*/
        }

      50% {
       /*code here */

      }

     100%{
          /*code here */
         }
}

Animation Examples

Here we are going to show you some animation examples. They show how CSS keyframes work. They have really nice effects on HTML elements.

Animating Text

The first example we are going to see is animating text with keyframes. In this example we set the iteration count property to infinite. For that reason the animation won't stop. All these examples are only for showing the effect purposes. If you need some animations in your professional work you can apply properties differently.

Another Text Animation

There are endless possibilities to animate text using keyframes. The following example shows how to increase text size. It also shows how to bring a box to its place with some effect.

Appearing Text

Appearing text is somewhat more useful in animations. Here we show you how to make text appear with CSS animations. That is really nice.

Animating Graphics

Here we show you another example about how to animate graphics. In the following example you can see that we apply some rotation and translation to a graphic. We get a wonderful result.

From top to Bottom

The example below is similar to the one above. We use some rotation for the ball, and also use the translate "y" property. That property translates the Y axis while the translate "x" translates the X axis. See how the basketball dribble. This is wonderful!

Animating an SVG Graphic

We can create an animate SVG graphics. Most HTML elements can become animated elements. The following example shows a crazy ellipse. That ellipse moves all the way around changing its form.

Conclusion

This tutorial shows CSS transforms, transitions, and animations. It also shows how to deal. with them. They could be very useful depending on the task you want to perform You can find a lot more of information in the MDN Animations section. We hope you enjoyed and learn a lot with this tutorial

More at Moe's Link

Scalable Vector Graphics

Moises E Liria Rosario — Tue, 17 Aug 2021 13:30:18 +0000

There are two main ways to draw in HTML. One of them is canvas, and the other is scalable vector graphics (SVG). To draw with canvas we need to use some JavaScript to complete our code. While to draw with SVG we only need the HTML code. This tutorial only covers SVG. Although we are going to learn about canvas soon. Let us start learning.

To create graphics with both SVG and canvas we need a cartesian coordinates system. In SVG this system is going to be slightly different. As you may already know, in a regular system you have the X axis and the Y axis. The center is the point (0,0). In SVG we also start from the point (0,0). The X positive axis and the Y negative axis is going to be the left corner of the screen. For that reason the points of the Y axis are going to be to the lower part of the screen. They won't be negative.

Start Drawing with SVG

Scalable Vector Graphics are based on XML. We can use them in HTML by only creating an SVG tag. The SVG tag serves as container for SVG graphics. We use attributes to specify its heigh and width. As you may know there are many styling units In web development. SVG uses pixels as default; we don't need to specify pixels in the values because the system will read pixels if we don't specify any unit. The most used shapes in SVG are circles, ellipses, lines, rectangles, and polygons. Now let us start with some examples about SVG graphics. For all SVG graphics we can use the "stroke" attribute to draw the line. We specify a color for the line in the attribute. We can also use the "fill" attribute with a color value to fill the shape with the color.

Drawing Circles

We firstly will start drawing SVG circles. To draw any graphic in SVG is really simple and straightforward. As we said above the SVG tag is the container. Inside the SVG we create the graphic we desire. In this case we are going to create a circle using the circle tag as a child of the SVG tag. Then we can specify the attributes of a circle. The main attributes of a circle are the "CX" that is the center on the X axis, also the CY that is the center on the Y axis. In a circle we also have the radius "r" that is the size of the radius for the circle. The example below shows how to draw a circle in SVG.

Drawing an Ellipse

We can also create ellipses in SVG. They are similar to circles with the only difference that they need two radios. They need a radio for the X axis "rx", and a radio for the Y axis "ry". Below we show you an example of an ellipse using SVG. Also note that we have the "stroke-width" attribute; that is for the stroke line width.

Drawing Lines

It's also possible to trace a line using SVG graphics. We can trace a line with SVG by only using the line tag in the SVG. As you may know you need to set some attributes for a line in SVG. Attributes for lines are different. For lines we only need to set the X and Y values. X1 is the starting point for the X axis while X2 is the ending point. The same with the Y axis, Y1 the starting point, and Y2 the ending point. As you may already know, we use the stroke and stroke-width for the line color and width. We show you another brief example below about drawing lines in SVG.

Drawing Rectangles

We can also draw rectangles with SVG. To draw. a rectangle is very easy. We only need to apply the "rect" tag to SVG. After applying the tag we need to set several attributes. The "x" attribute is the X position of the rectangle while the "y" attribute is the Y position of the rectangle. We also need to specify the width and the height of the rectangle with the "width" and "height" attributes for rectangles. There is another example below showing you how to draw rectangles in SVG.

Rounded Corners

We can also add rounded corners to rectangles. It's very easy to do it. To add rounded cornes to rectangles we only need to add the "rx" attribute to the rect tag. The "rx" attribute is the radius of the X value. You can see the transform of a rectangle in the example below.

Drawing a Polyline

The term "Polyline" can be unknown for many people. A polyline in SVG is nothing else than a line created by a set of points. The polyline forms an open shape. The ending point does not need to be connected to the starting point. We can add as many points as we want. To create a polyline is very simple. We only need the "polyline" tag. Then we add the points attribute. After that we set as many points as we want. It could result in a weird shape. For that reason we should know where to set the points. Remember, points are in the form of (X, Y). You can see another example below about polylines.

Drawing Polygons

We can also draw polygons using SVG. Polygons and polylines are similar. Their only difference is that poly lines are open and polygons are closed. The first point of a polygon is connected to the last. Also, you need to know where to set your points, because you can create some weird shapes. There is a very useful online tool to create polygons in SVG. That tool is Clippy and is very useful to create the shape you want. Clippy works more with percentages instead of pixels, but the result is the one you want. Here we show you another example about polygons in SVG.

The View Box

In all the examples we created above we did not use the view box. In many cases is necessary to use the view box. To add the view box to SVG we only need to add the "viewBox" attribute to our SVG. The view box contains four values. They are the "min-x", "min-y", "width", and "height". Be aware they are in percentages not in pixels.They are also in the mentioned order.


<svg viewBox ="0 0 100 100">

<!-- Your Code Here -->

</svg>

The "g" Tag

The "g" tag serves as a container for many SVG Elements. If we want to add more than one SVG element to the same container we use the "g" tag in the SVG. Inside the "g" tag we can create as many "SVG elements as we desire. Here we got another example about the "g" tag.

Conclusion

Here we have the most basic shapes in SVG graphics. They are very useful while dealing with graphics in HTML. Also if you are. going to learn CSS Animations you could need a lot of SVG graphics. We are going to learn about animations in another tutorial. We can find more information about SVG Graphics in their MDN section. Thanks for visiting Moe's Link We hope you learn a lot in this tutorial.

JavaScript Array Methods

Moises E Liria Rosario — Thu, 12 Aug 2021 15:55:50 +0000

As you may know, Arrays in programming are sets of data. In many languages arrays only have one data type. In JavaScript Arrays are different. We can create an array which can contain many data types. There are also many methods that we use in JavaScript in order to work with arrays. Let's start with some of these methods.

Array Length

The array length is the method we use to know the size of length. This method is going to return a number that is the number of elements of the array. That is the array size or length. We can implement that method as any method in JavaScript. We only need to type the name of the array, then we type the method name after a dot. The example below shows how to find the length for any JavaScript array.

let fruits = ['mango', 'Apple', 'Orange', 'Pear'];  // Array Declaration

console.log(fruits.length); 

4 // Result
/***************************************************************************************************/

_The Push Method _

The next method we are going to see is the push method. This method adds a new element at the end of the array. I mean the new element will be the last element of the array. The array length also changes. That's because of the new element. You can see another example below.

let cars = ['Honda','Toyota', 'Ford', 'Chevrolet'];  // We declare an array of four elements

cars.push('kia');   //Push Method

console.log(cars);

  ["Honda", "Toyota", "Ford", "Chevrolet", "kia"] // Result of the new array. Length = 5

/*************************************************************************************************/

The Unshift Method

We can also add elements to the beginning of the array. The new element becomes the first of the array. That is possible using the "unshift" method. We have the same "fruits" example we used above. We now are going to use the unshift method, and you will see the changes.

let fruits = ['mango', 'Apple', 'Orange', 'Pear'];    // Array Declaration

fruits.unshift('Banana'); // Unshift Method

console.log(fruits);

["Banana", "mango", "Apple", "Orange", "Pear"] //Result

Removing Array Elements

Pop Method

As we can add elements to arrays, we can also remove elements. The method to remove the last element of the array is the "pop" method. Once we apply this method the array length will change. The result will be a new array with the last item removed. The example below shows how this method works.

let animals = ['dog','cat','horse', 'squirrel'];  // Declare  the array

animals.pop(); // Applying the pop method

console.log(animals);

["dog", "cat", "horse"] // Result Squirrel removed

Shift Method

The "shift" method is similar to "pop". Shift method removes the first element of the array instead of the last. This method also returns a new array with the length decreased by one. The example below shows how to implement the shift method.

let oddNumbers = [1,3,5,7,9];

oddNumbers.shift(); //removes 1

console.log(oddNumbers);

 [3, 5, 7, 9]  // New Result

Finding the index of an element

We can find the index of any array element using the "indexOf" method. As we also know the index of array elements start with 0 and then continues. We have a brief example below showing you how to find the index of any element of an array.

let cities = ['Boston', 'Chicago', 'New York', 'Washington', 'Miami', 'Los Angeles', 'San Antonio','Phoenix', 'Las Vegas' ,'Salt Lake City', 'Seattle','Portland'];

cities.indexOf('Washington'); // Applying method to find index 

3 // Result. As you may know arrays start with 0


/**************************************************************************************************************/

_Remove Elements by Index _

To Remove any element by index, we only need to use the "splice" method. This method is very useful to remove one or more elements. The splice method contains two parameters. The first parameter is the starting position; while the second is the ending position. In the case we only have one parameter that shows the starting position. Everything after that position will be removed. We show you many examples below about the splice method

let easternStates = ['Maine', 'Rhode Island', 'Massachusetts', 'Vermont', 'Connecticut', 'New York', 'New Jersey', 'Pennsylvania', 'Maryland', 'Virginia', 'North Carolina', 'South Carolina', 'Georgia', 'Florida'];
//We first declare the array

console.log(easternStates);

["Maine", "Rhode Island", "Maryland", "Virginia", "North Carolina", "South Carolina", "Georgia", "Florida"] // Result


/****************************************************************************************************************/

Creating a new array from removed items

We can also create a new array from the items we removed using the splice method. Let's use the same example we saw above to get the new array.

let easternStates = ['Maine', 'Rhode Island', 'Massachusetts', 'Vermont', 'Connecticut', 'New York', 'New Jersey', 'Pennsylvania', 'Maryland', 'Virginia', 'North Carolina', 'South Carolina', 'Georgia', 'Florida']; 
//Declare the Array

let statesRemoved = easternStates.splice(2,6);

console.log(statesRemoved);

["Massachusetts", "Vermont", "Connecticut", "New York", "New Jersey", "Pennsylvania"] //Result

/****************************************************************************************************************/

_The Slice Method _

The "slice" method for arrays, creates a copy of a portion of any array. It's similar to the splice method; but it creates a copy of the elements we specify in the parameters. If we only have one parameter, it's chosen as the starting point. Take note that last parameter is not included in the new array. Let's see a brief example.

let myFruits = ['Orange', 'Apple', 'Banana', 'Strawberry', 'Pear'];

console.log(myFruits.slice(2)); 
  ["Banana", "Strawberry", "Pear"]. // Only one Parameter  returns everything after the index

console.log(myFruits.slice(2, 4));

["Banana", "Strawberry"]. //  From parameter 2 to 4 where 4 is not included.

Looping through Arrays

Most JavaScript tutorials show how to loop through an array. Perhaps you have seen it before. Looping through an array is one of the most used methods in JavaScript arrays. You know in programming we have many loops. In my opinion the most useful loop for arrays is the "forEach" loop. As you may also know that we need a callback function to loop through an array with the forEach loop. Here we show you the most simple example of how to loop through an array.


 let myAnimals = ['dog', 'cat', 'horse','cow', 'goat'];

myAnimals.forEach(function(animal){ 

console.log(animal);

});

//Result
   dog
   cat
   horse
   cow
   goat

Advanced Methods for JavaScript Arrays

We could see above many useful methods for javaScript Arrays. The following methods for JavaScript Arrays are called advanced methods. Don't get confused; They are not hard to learn. They are called advanced methods because of the tasks they perform. Let us start. dealing with these methods.

Array Filter

The method of array "filter" is going to return a new array with the conditions we set on a function or another method. This method is very easy and useful. We show you a brief example of how it works.

let wildAnimals = ['lion', 'tiger','elephant','cheetah', 'gorilla', 'giraffe'];

let shorterNames = wildAnimals.filter(wildAnimal => wildAnimal.length < 6);

console.log(shorterNames);

["lion", "tiger"] //Result

Sort Array

The "sort" method for arrays sort the array as we instruct it. By default it's going to sort the array ascending. Then it returns a new array with elements sorted. In cases we have numbers in the array, it transform the numbers to strings. We need to be aware of that because if we have numbers like "25" and "3", "25" is going to be in a position before 3. That is because it's treated as string. Also if we have undefined elements any array, the "sort" This method is going leave them to the last positions. Here we show you another brief example of how this method works.

let myNumbers = [1, 5, 800, 3, 7, 9, 15, 27];

myNumbers.sort();

console.log(myNumbers);

 [1, 15, 27, 3, 5, 7, 800, 9] 
//Result Numbers converted to string and then sorted. That's why 800 is before 9. Also 15 and 27 before 3

let myCities = ['New York', 'Washington', 'Chicago', 'Seattle', 'Los Angeles']; //Array of Strings

myCities.sort();

console.log(myCities);

["Chicago", "Los Angeles", "New York", "Seattle", "Washington"] // Result Alphabetically

/******************************************************************************************************************/

Array Map Method

The "map" method for JavaScript array is going to return a new array that meets the conditions set on a function. It works with all types of arrays. Let's see another brief example about the array map method.


let myNumbers = [1,3,2,6,9];

 let myNumbers1 = myNumbers.map(x => x*2);

 console.log(myNumbers1);


[2, 6, 4, 12, 18] //Result

let myFruits = ['Orange', 'Apple', 'Banana', 'Strawberry', 'Pear']; //String 

let myFruits1 = myFruits.map(x => x.toUpperCase());

console.log(myFruits1);

["ORANGE", "APPLE", "BANANA", "STRAWBERRY", "PEAR"] // Result

/****************************************************************************************************************/

Conclusion

We explained above the most used array methods in JavaScript. Although all examples we showed only the console, we can apply these methods to the DOM. Most times we use these methods while working with JavaScript Frameworks. Frameworks like "Angular", "Vuejs", and "Reacts". In plain JavaScript we can also use them. In a later tutorial we are going to show you how to apply these methods to the DOM. Most of the examples in this tutorial were made using the "Google Chrome Console". There is also a JavaScript Console Online.

We can find more information about JavaScript Array Methods in the JavaScript MDN. You can find a lot of information there. Thanks, we hoped you learned a lot in this tutorial.

More at Moe's Link

Guide to CSS Grid Layout

Moises E Liria Rosario — Wed, 11 Aug 2021 18:19:40 +0000

I don't know if you read the tutorial about CSS Flexible Box Layout. In case you did not read it I encourage you to read it. There you can find a lot of useful information about Flexbox Layout. Now We are going to learn CSS Grid Layout. It's similar but completely different. This will be a quick guide to CSS Grid Layout.

As you may already know, CSS Flexbox Layout is only a one dimension layout system. CSS Grid Layout instead is a two-dimension layout system. In CSS Flexbox we are able to create one row or a column. While using the CSS Grid Layout system we can create sets of both rows and columns instead. For that reason, we call CSS Grid Layout "Two Dimensions Layout." Let's Dive into CSS Grid Layout.

Displaying Grid

Starting a grid layout system is similar to starting a flexbox. In our HTML we declare a division as the parent. Then we can place many block elements as the children. Most times we use other divisions as children in order to provide more clear examples. Once we have the parent "div" and their children, we assign the class name we desire to the parent class. In this case we call it the "wrapper" class. After we declare the parent div class in CSS we only need to use the "display" property. Then we assign the value of "grid." All the children of the "wrapper" class will become grid items. The example below shows how to display grid. We also applied some coloring and borders so you can see them in the most clear way.

Arrange Columns

The example above is the most basic grid layout. As you may see we have the parent division as the wrapper and six children as divisions as boxes. Once we display a parent grid the result is a column. All its children will be the grid items. We are able to specify the number of columns we want just by using the "grid-template-column" Property. After we declare the property we can set the values we desire. The example below shows three columns of 200 Pixels. The first three items are on the top and the rest on the second row. We are also able to rearrange the order of items. We will show you later in this tutorial how we can do that.

Grid Template Column Fractions

We were able to set three columns of 200 pixels in the previous example. There are many other ways to arrange columns and rows using the CSS Grid Layout. Using fractions is another way to create columns of equal size. Fractions are somewhat more accurate because there will be no more blank space in the parent division. The parent division will divide in as many fractions as we declare. To use fractions we only declare them as value of the grid template column. We declare them using the number and the abbreviation "fr". The example above also shows a parent with six children. We declare three columns with one fraction (1fr) each.

Using fractions of different size

In the example above we created three columns of equal size using fractions. Let's assume you want three columns but all of them of different sizes. We are also able to create columns of different sizes using fractions. The browser is going to resize them according to the number we specify. Below you can also see an example of different sizes of fractions.

Mixings Fractions with values

The three previous examples show how can we resize columns. They show that we are able to resize columns using pixels or fractions. In case we need a specific size of column and all the others cover the rest of the parent. We are able to mix values and fractions. As I mentioned the specific value is going to cover its area. Then the rest of the columns will distribute in the remaining part of the parent. The example below shows how we can mix fractions and values.

The shorthand repeat function

We are also able to specify the number of columns and sizes using the "repeat" function. Once we declare the "grid-template-column" property. Instead of assigning values, we can assign the "repeat" function. The function will contain two parameters. The first is the number of columns we wish to apply. The. second is the size of the columns we desire. Below we show you an example of the "repeat" function.

Mixing Values with the Repeat Function

There is also a possibility to mix values while using the repeat function. We can specify any size in a styling unit. Then we can use the repeat function with fractions. After that, we can also set some remaining space. The first value is going to be the first box. The repeat function is going to distribute equal fractions. Then we can specify some remaining space. If we don't specify the remaining space, the repeat function after the first box is going to occupy all remaining space with the other boxes. The following example shows how we can mix values with the repeat function.

Different Fractions in the repeat function

The two previous examples show the classical "repeat" form. Where the two parameters are the number of times to repeat and the second is fraction size. We are also able to add a third parameter. This parameter would be a second fraction or styling unit. The result would be a repetition of the two values we assign. The example below shows how we repeat three times one fraction along with two fractions.

The Grid Auto Rows Property

The grid auto rows property is very. useful to assign the height of the row. That property is very useful in overflow problems. To use the property we only need to declare it as "grid-auto-rows". Once we declare it we assign the value in the styling unit we desire. The following example also shows how to use the "Auto Rows" property.

Maximum and Minimun Row Height

As we could see in the example above, we are able to assign height to the rows. We also said that row sizing is very useful for overflowing problems. We can use a function as the value of the "Grid Auto Rows" Property. The function is the "minmax" function. This function contains two parameters. The first parameter is the initial value we want to assign to the row. The second parameter is the maximum size we want to avoid overflow. Most times we set the second parameter to auto. The example below also shows how to implement the "mixmax" function.

Grid Cells

Many examples above show that grids are similar to tables. The difference between grids and tables is that we can modify them the way we want. Some of the elements have similar names to the tables. A grid cell is the most basic value in the grid layout. The image you see below shows the grid cell.

Grid Areas

Grid areas are also similar to cells. The difference is that grid area can occupy multiple cells. A grid area can occupy multiple rows or columns or multiple rows and columns. There is another image below showing a grid area example.

Grid Lines

Grid lines are the lines that divide the grid. When we started the tutorial we applied borders to grid elements. With borders, you can see the lines of the grid. Many other times we do not set borders. Even without visual borders grid lines are present for each grid layout. We also show another image below explaining grid lines. As you can see there are three grid lines and four column lines. Lines are very useful to position elements.

Positioning Grid Elements

In all the examples you saw above, we only worked with the parent element (wrapper). Now it's time to work with the children elements. As we also mentioned, grid lines are very useful for grid items position. There are four main properties to position grid elements. They are "grid-row-start", "grid-row-end", "grid-column-start", and the "grid- column-end". We can specify what column or row grid items start or end. Below we show you a brief example of how to position grid items. There you can see how the "table" drastically change

Grid Row and Column Gap

We can create some spacing between items in CSS Grid Layout. All the other examples above show lines without spacing. We are able to set some spacing using the "row-gap" and the "column-gap" properties. They apply space to rows and columns respectively. The value of these properties should be in the styling unit we want. In case we want to set the same spacing for rows and columns, we can only use the "gap" property. The example below shows you the same example we saw above now using the gap.

Positioning Shorthand

A couple of examples above, we saw there are four main properties for positioning. We are able to reduce them to only two with the same results. We can start and finish a row or column using the same line of code. To accomplish that task we only need to use the "grid-row" or "grid-column" properties. Their value contains two numbers. The first number is the start of the row or column, and the second is the end. We type these numbers in the fraction format (1/2) Even they are not a fraction. We can position elements the way we desire. These properties are really good in order to reduce code. The following example shows how to implement shorthand in grid layouts.

Changing Item Position

We are also able to change the position of any item while using the CSS Grid Layout. In order to do that we only need to change the starting row or column of the item. Sometimes we change both of them. The example below also shows how we change one item from a position to another (Changing Position of Box 2).

Overlap Grid Items

Overlap items is also possible in CSS Grid Layout. We can easily overlap items by changing row or column positions. If we change the row or column position number of one item to the same of another, The items would overlap. There are many ways to overlap items in Grid Layout. Here we only show you a brief example of how to it. Carefully watch the positioning and the result.

Nested Grids

There is also a possibility to create nested grids. A nested grid is a grid inside another. In all the examples above we saw a parent div with many children divs. To create a nested grid we only need displays one of the children divs as grid. That div will become a new grid and we can performs all the grid actions to the new grid. The grid will not inherit anything from the parent grid unless we specify it. Here we show you another brief example of a nested grid. Remember all children of a grid are not divs. They can be any HTML Block element.

Applications of Grid Layout

In Web development, there are many applications of Grid Layout. We can divide the content in any way we want using a grid layout. One of the most useful applications of grid layouts is a photo grid gallery. Here we show you a sample of a grid gallery. There are too many styling possibilities with CSS Grid Layout. This is a simple one.

Conclusion

As we could see CSS Grid Layout is very useful in web development. We are able to create grid items, assign their position, and resize them. It's very easy to create a CSS Grid Layout. In order to become experts, we need to practice. Practicing is the best way to learn more every day. All the examples in this tutorial are created using Codepen . You can also find a lot of relevant information regarding CSS Grid Layouts on the MDN Website. Hope you
enjoy learning.

More at Moe's Link

Learn CSS Flexible Box Layout in 15 Minutes

Moises E Liria Rosario — Sun, 08 Aug 2021 16:28:34 +0000

As web developers all the time we need to continue learning. We should already know the basics of HTML CSS and some JavaScript. Although we can be experts sometimes there is something new that we can learn. One of the things very useful to learn is CSS Flexible Box Layout. We also commonly call it by the term of "CSS Flexbox". Let's start learning. As the title implies, 15 minutes is enough to learn CSS Flexbox.

Initialize Flexible Box

Let's create an HTML page. In that page we are going to create a "div". Once we create a div we can create some more inside the one created. As you may already know the outer div is the parent of all the others. Most times we call it the "Flex Container". We can add the class name we desire to the container. Then we apply CSS to our HTML page. The only property we need to initialize flexible box is the "display" property. The value for the property is flex as we show in the example below. Once we apply the display property to the container, every other element will become part of the Flexbox Layout. In the example below we have a flex container with four items.

Flex Direction

The example above is the most basic example of CSS flexible box. As we may see we have some blocks that we display in flex. Once we display the parent division in flex all the children by default are going to be in a row. The first children will be displays first and so on. We can change the flex direction as we also show in the example below. There are many directions available in the flexbox layout. They are Column, Column Reverse, Row Reverse, and Row as the default. Let's take a look to each one of them.

Flex Direction Column

To display items as column we only need to add "flex-direction" property to the container. The value is column as the following example. We also added some colors borders and margins. Adding these properties we show a clear result. You can add the style you want to any item in the flexbox.

Column Reverse

As we saw in the example above, we can display flexbox in columns. we are also able to reverse columns. In order to do that we only need to use the same property of "flex-direction." Then we apply the value of "reverse-column" as we may see in the example below.

Row Reverse

When we set the flexbox, all its items by default are in a row. For that reason is not necessary to apply "flex-direction" row. Although we don't need to display row, we are able to reverse the order of the row. By only adding the "row-reverse" value to the "flex-direction. The example below also shows how to accomplish that.

The Flex Basis Property

By now we have seen how to display any div using the flexbox layout. We saw that we can change the directions and apply style. Also we could see that size is automatic for each item inside any CSS Flexbox container. We are able to change the size for every item inside any box. There are many methods to change the size of items. One of them is the "Flex Basis Property. In order to use the "Flex Basis" method we only need to place the "flex-basis" property to the item we desire. The value of the flex-basis property can be in pixels. Also there are many others styling units; but pixels is most used.

The Flex Grow Property

The "Flex Grow" Property is similar to the Flex Basis Property. Their main difference is that we can specify the size of flex basis in pixels. For that reason flex basis could result in overflow. Instead of pixels, flex grow uses a positive integer value system in order to assign element size. Using flex grow property we avoid overflow. To apply the flex grow property we only need to type the "flex-grow" as we can see in the example below.

The Flex Shrink Property

The "Flex Shrink" property is similar to the "Flex Grow" Property. The main purpose of the flex shrink property is to reduce space in case we don't have enough space in the container. In order to implement the "flex shrink" property, we only need to type it as "flex-shrink". Its value will also be a positive integer. We can use it along the flex grow property. By now we are not showing an only flex shrink property because below we are going to show a short hand to use the three properties at once.

Flex Wrap

We saw above two main ways to resize flexbox. They are "flex basis" and "flex grow". Also we could see when we use the flex basis we could face overflow. To avoid issues with overflow we can use the "flex wrap" property. To implement it we only need to apply "flex-wrap" to our code. The property can have the values of "wrap" or "no wrap". By default it is set to "no wrap". Once we change it to the "wrap" value, all the overflow will continue in the next line. We also show a brief example below.

Flex Flow

Flex Flow is a combination to reduce code. As we could see above we have the "flex direction" property. Then we saw the "flex-wrap" property. We are able to combine them using only the "Flex Flow" Property. To implement it we only ned to type the "flex-flow" property. As you may assume it has two values. The first value is the "flex-direction" and the second value is the "flex-wrap". The example below is the same one from above using the flex-flow shorthand

The Flex Short Hand property

We are able to implement the"flex-grow", "flex-shrink", and "flex-basis" at once. That is possible by only using "flex" property for each flex item. The flex property is a short hand to apply all of them at once. As you also could assume now, flex property. contains three values. The first value is the value for the flex-grow property. The second value is the value for flex-shrink. Third value is the flex-basis. You can see in the following example how it works.

Aligning Flex Items

We are able to align items while using flexible box layout. Before showing you examples of how to align items, here we show two images. These two images detail the flexible layout configuration. After you carefully examine the images then proceed to the examples.

In the images above you can see how the cross axis differs in columns and rows. Now it's time to continue learning how to align flexible box items. In order to align items to the cross axis, we only need to apply the "align-items" property to the container. The value of this property can be "stretch", "flex-start", flex-end", or "center". Below we can see examples for each one of them

Align Items to Flex Start

The first example we are going to see shows how to align items to the flex start. In the example below we set height for the container so you can see easier the effects of aligning items to the flex start. As you may already know, we only need to apply the "align-items" property; then we add as value flex-start

Align Items to Center

We are also able to align items to the center of the cross axis. We only need to apply the value of center to the "align-items" property as you may see in the. following example.

Align Items to the Flex End

As you saw in the two previous examples we have the ability of aligning items on the cross axis. To align items to the end of the cross axis we only need to apply the "align-items" property to the container as we did above. The only difference will be the value. In this case the value is "flex-end"

The Stretch Value

We are also able to align flex items using the stretch value in the flex container. Now we are not showing you an example using the stretch value because that is the default for flex box layout. All the other examples you saw above have the stretch value as default; that's why it's not necessary.

Justify Content Property

As we could see above, the "align-items" property is able to align items on the cross axis of the container. We are also able to align items on the main axis of any flexible box container. To achieve that we only need to use the "justify-content" property. As you can imagine there are different values for that property. These values are "flex-start", "flex-end", "center", "space-around", "space-between", and "space-evenly." Now let us see some examples.

Justify content to the center

As you now may assume, to justify content to the center of the main axis we only need to apply the "justify-content property to the flex container. Its value is "center". The example below shows some content justified to the center of the main axis.

Justify Content to Flex End

We can also justify content to the end of the main axis just by applying the value of "flex-end" to the "justify-content" Property. We also show you a brief example below.

Justify Content to the Flex Start

We also can use the justify content property with a value of "flex-start". Although we can use it that is not necessary because that is the default of justify content. Therefore we are not showing that example now.

Justify Content Space Around

We can also add some space between flexbox items. That's possible by only adding the value of "space-around" to the "justify-content" property as we can also see in the example below.

Space Between Items

We saw above the space around value which adds space around each item. The "space-between" value is similar but different. It adds space between items not around them. We can also see another example below and note the difference between them.

Justify Content Space Evenly

As all the other types of "justify-content" We only need to add the value of "space-evenly" to have the content justified with a space equal on both sides. Also similar to the space around but not equal. The example below shows how to implement and the results of justifying content with space evenly.

Conclusion

By now we have learned the most necessary properties of CSS Flexbox Layout in a short time. As The title implies we only need 15 minutes to learn it. Although we can learn it in 15 minutes we need to review it every certain time to keep our minds refreshed.
Also we can get more information about Flexbox Layout in the MDN Flexbox Layouts website. Hopefully you enjoyed and learned a lot about CSS Flexbox.

More at Moe's Link
Guide to CSS Grid Layout