Forem: gyi2521

ES6 - Template Literals

gyi2521 — Tue, 27 Nov 2018 18:55:34 +0000

The one of my favorite features in ES6 or ECMAScript 2015 is 'Template Literals'. Before I learn about 'Template Literals' in my Coding Boot-camp recently, I used to use string concatenation in JavaScript as following:

 
var user = {
  name: 'Gina',
  hobby: 'Traveling',

};

console.log('Hi, I\'m ' + user.name + '! My hobby is "' + user.hobby + '".');

//Hi, I'm Gina! My hobby is "Traveling".

Now with template literals, I can write as following:

var user = {
  name: 'Gina',
  hobby: 'Traveling',

};

console.log(`Hi, I'm ${user.name}! My hobby is "${user.hobby}".`);

//Hi, I'm Gina! My hobby is "Traveling".

Both examples give the same result, but do you see how readable the second example is using the 'Template Literals'? When you are using string concatenation, you need to use the backslash(\) to escape special characters. Because of the duplicate usage of some of the characters, reading and understanding the text could be challenging. With Template Literals, you construct the string as you are writing a plain English sentence inside back-ticks(``). If you want to add variables, just use a dollar sign followed by curly brackets. You can even add a simple Javascript statement if it is necessary as following:

console.log(`Two times seven is ${2*7}.`);

// Two times seven is 14.

In addition the line breaks got much easier with Template Literals.

With Template Literals:

console.log(`Hi Gina,
Good luck with your presentation today!
                          -your friend`)

//Hi Gina,
Good luck with your presentation today!
                          -your friend

Without Template Literals:

console.log('Hi Gina, \n' +
'Good luck with your presentation today! \n' +
'\t\t\t\t\t\t   -your friend')

//Hi Gina,
Good luck with your presentation today!
                          -your friend

Do you see how easy it is to read? With template literals, you create text as you write a note to your friend without using new line characters(\n) or tabs(\t). I have not encountered any issues with this feature so far and I really enjoy using it. If you have not tried it yet, you should definitely give a try...

Thanks for reading!

MySQL vs. MongoDB

gyi2521 — Thu, 15 Nov 2018 21:20:22 +0000

Recently, I learned about MySQL from my Coding Boot Camp class in addition to MongoDB which has been the main database we used in the class. I wanted to share what I have learned so far about these two databases.

The main difference is that MySQL uses structured query language (SQL) while MongoDB uses NoSQL. What is the difference between SQL and NoSQL? In one of the blogs I read, it used an analogy as living in a town where everyone speaks the same language vs. a town where people speak different languages.

SQL databases use structured query language (SQL) for defining and manipulating data. This is extremely powerful, but it can be restrictive. SQL requires that you use predefined schema to determine the structure of your data before you work with it. In addition, all your data must follow the same structure.

A NoSQL database, on the other hand, has dynamic schema for unstructured data, and data is stored in many ways: it can be column-oriented, document-oriented, graph-based or organized as a Key Value store.

MySQL is an extremely established database, meaning that there’s a huge community, extensive testing and quite a bit of stability. It is open source and free. It is available for all major platforms, including Linux, Windows, Mac, BSD and Solaris.

MongoDB, on the other hand, is a non-relational database that stores data as ‘documents’ in a binary representation called BSON (Binary JSON). It gives you flexibility to change your data schema without modifying any of your existing data. MongoDB is horizontally scalable, which helps reduce the workload and scale your business with ease. It is flexible, so you can add new columns or fields on MongoDB without affecting existing rows or application performance.

I will wrap up with some query examples below.

Select/Get statement:

MySQL: SELECT * FROM inventory
MongoDB: db.inventory.find({})

Insert/Post statement:

MySQL : INSERT INTO inventory (item_id, type) VALUES ('ab123', ‘electronics’)
MongoDB: db.inventory.create({item_id: ‘ab123’, type: ‘electronics’})

Thanks for reading!

API == server?

gyi2521 — Thu, 08 Nov 2018 16:03:30 +0000

Recently, I ran into a YouTube video explaining API. The video used 'API is like a server in a restaurant' as an analogy, so I wanted to share that analogy here on my blog.

Have you ever wondered exactly how we get all the information that we ask for on internet? How we make a reservation or buy things with just a few clicks? The behind scene hero is API. It stands for Application Programming Interface.

API is the messenger that takes requests from us and tells a system what we want, and then returns the responses back to us, just like a server in a restaurant. We, the customers, order food from a menu to a server, and the server takes the order to the kitchen and then brings back what we ordered to the table.

If we apply this to a code, it will be like this:

    //api call - ordering food
     $.get('/api/order')
       .then(function (food) {
           `put on the table`;
     });


    //api - server taking order
    app.get('/api/order', function (req, res) {
        `make food`(kitchen)
        return food;
    });

Have you ever booked your flight using an online travel service? It's similar to ordering food in a sit down restaurant. We enter our desired criteria for our travel (like food order) on the travel service website, and then the travel service website calls available airlines' API (like a server) to search for the flight information that matches our criteria from their system (like kitchen). Once the matching flight information are found, API returns the information (like delivering food) back to the online travel service via response. The travel service website displays the flight information for us to compare and choose the best option.

So the next time you think of an API, just think of it as your server running back and forth between applications, databases, and devices to deliver data and fulfill your request.

By the way, I was once an API... back in college days... and it helped me pay my tuition...:-)

Thanks for reading!

AJAX - GET, POST, PUT,and DELETE

gyi2521 — Thu, 01 Nov 2018 20:06:53 +0000

Hi everyone, I've been thinking about writing on how to make AJAX call immediately after I wrote the blog, "What is AJAX" [https://dev.to/gyi2521/what-is-ajax-34c2], about a month ago; however, I've been busy with my first group project, "InstagramClone", from my Boot-camp class, so here I am.. writing the second part of AJAX a month later..;)
Good thing is that I can use the AJAX call examples from my project.

In our "InstagramClone" project, we used jQuery's AJAX "GET" method on the client side to retrieve photos from the back-end.

 $.ajax({ url: 'api/photos', method: 'GET' })
            .then(function (data) {
                let content = '';
                if (data != '') {
                   data.forEach(e => {
                   content += `some code`;
 code continues...

Our GET method starts with '$.ajax' followed by an object with two properties which are url and method. The Url field is populated with the API address that will provide the desired data from the back-end and the method field is populated with 'GET'. The next line, '.then(function(data))' is the process that executes once the data has been retrieved from the ajax call. In our case, we iterated through the data and displayed the photos on the screen.

Now, lets look at AJAX POST(=create new) method. The following is the code we used to add a comment to a photo.

$.ajax({ url: '/api/comments', method: 'POST', data:allComment})
            .then(function () {
                $(`#${photoid}_divForComments`).append($(`            
                Instagram_Clone ${theComment}`));
            });

The code is similar to GET method but we populated "POST" for the method field and also added the data that contains newly created user comment.

The PUT(=update) method, is really identical to POST method as you can see below:

$.ajax({ url: '/api/comments', method: 'PUT', data:likes})
            .then(function() {
                some code...
            });

For the DELETE method, we are passing in photoId to delete.

        $.ajax({ url: `/api/photo/${$(this).attr('photoId')}`, method: "DELETE" })
            .then(function (data) {
                some code...
            })
            .catch(function (err) {
                some code...
            });

In above example, we just added '.catch(function (err)' to get the error message if there is any, and you can add this to all other calls as well.

With AJAX, we can simply update the parts of a web page without reloading the whole page, and this makes the process much faster and responsive for users.

Thanks for reading!

What is Ajax?

gyi2521 — Tue, 25 Sep 2018 20:36:32 +0000

What is Ajax?

When the instructor asked "What is Ajax" in my coding boot-camp class, someone immediately answered, "A cleaning solution!". We all laughed but that's how people will answer outside the computer world. So, what is Ajax in the computer world?

AJAX stands for Asynchronous JavaScript and XML. It is a web development technique for creating interactive web applications. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page without reloading the whole page.

A great example would be the Google suggestion list you see in the Google search box. When you start typing something in the Google search box, the list in that drop-down box changes. The content on the page dynamically changes without refreshing the page. How cool!

So how does Ajax actually works? I got the following diagram and steps from w3schools.

How AJAX Works

An event occurs in a web page (the page is loaded, a button is clicked)
An HTTP Request object is created by JavaScript
The HTTP Request object sends a request to a web server
The server processes the request
The server sends a response back to the web page
The response is read by JavaScript
Proper action (like page update) is performed by JavaScript

I will explain how to create, add, update, and delete in my next blog, so stay tuned.

What is IIFE in JavaScript?

gyi2521 — Sat, 15 Sep 2018 13:18:11 +0000

The first time I heard 'IIFE' in my Coding Bootcamp class, it immediately reminded me of my sister's dog 'Yeffi' which means 'pretty' in some human language.

So what is IIFE in JavaScript language?

IIFE stands for Immediately Invoked Function Expression. It is a JavaScript function that runs as soon as it is defined.

Normally, when we create a function using 'Function Declaration' or 'Function Expression', we need to call the function in order to use it.

Function Declaration:

function myFunction(p1, p2) {
    return p1 * p2;
}
alert(myFunction(4, 3));
//12

Function Expression:

let myFunction = function(p1, p2){
    return p1 * p2;
}
alert(myFunction(4,3));
//12

However, in IIFE, the function is wrapped in a parenthesis which makes it a function expression followed by () which tells the JavasScript compiler to invoke or call immediately.

(function() {
   let dName = "Yeffi";
   alert(dName);
}
)();
//Yeffi

So why do we use IIFE?

Mainly because of privacy. Any variables declared inside the IIFE are not accessible from the outside world.

(function() {
   let dName = "Yeffi";
}
)();

console.log(dName);
//  Uncaught ReferenceError: dName is not defined

If you try to access the dName variable outside of the IIFE, you get the error message as you can see above. All the variables inside the IIFE stay within the scope of the function.
Also, it protects the global namespace by not creating a named function. When a named function lingers in the global namespace, it could accidentally be called again. However, since IIFE isn't a named function, it can't accidentally be called. This will avoid any potential security implications. Therefore, many JavaScript libraries use this technique nowadays.

Thanks for reading!