Category: WEB DEVELOPMENT

Categories
DATA SCIENCE JAVASCRIPT PYTHON TUTORIALS WEB DEVELOPMENT

Call Node.js Script From Python – How To Guide

So you have come across a situation where in you want to call a Node.js script from your Python code. But how do we go about doing that? Is there any package that we need to install in Python or Node.js that will help us with this? Or can we do it directly using basic Python and Node.js programming? What is the standard approach to solve this?

Call Node.js script from Python
Call Node.js script from Python

We will answer all the above questions in this article today. So, are you are ready to learn about it now? Cool, let us get started right away!

Setup Required To Call Node.js Script From Python

So to begin with, we will first take a look at what all needs to be installed in our computer to get this going. Alright?

Now as you know, to run any Javascript file on your computer, we need to have Node.js installed. This is the basic thing, right? So, make sure that you have installed Node.js in your computer where you want to call the Node.js script.

There are several tutorials available on the internet that can guide you in how to install Node.js on your computer. But let me give you a gist of the steps usually involved for a Linux computer:

Step 1 – Install Node Package Manager (NPM)

You can do this by running the command:

sudo apt install npm

Step 2 – Check which version of Node.js is installed

You can do this by running the command:

nodejs -v

How To Call Node.js Javascript File From Python

Now that you have your Node.js installed, we can run any Javascript file by issuing the command:

nodejs yourFile.js

That is it! It is as simple as that!

So with Node.js installation out of the way, we can now see how to call a Node.js script from a Python file.

A simple Javascript Hello World File To Run Using Node.js

To begin with, let us create a simple Node.js file that simply prints “Hello, World!” on our screen. So here is how the file looks like:

console.log("Hello, World!");

Save this as hello.js in your computer directory. To test that this file works, simply call the command:

nodejs hello.js

If the above command prints the “Hello, World!” string on your console screen, it means the script is good to run as Node.js script. Alright? So that is our basic Node.js script.

How To Call Node.js Script From Python?

Now, we want to call this hello.js script file from a Python file. But how do we go about doing that? Well, here is the process we are going to follow:

What happens under the hood

  1. We know that our application program – be it Python code or Node.js code runs on top of our Operating System (OS). Right?
  2. But how does an OS run both these programs simultaneously? Well the answer is that they both run as two separate processes in an OS.
  3. But why two separate processes, you ask? It is because it is the job of an OS to make sure both can run paralelly. And it is also the OS’s job to keep these programs separate. Meaning Python program will not be able to access, read or modify the memory of Node.js program and vice versa.
  4. So that is why OS runs them in a sandbox application process where one process is not aware or have access to other process’s resources.
  5. But then how can we now call Node.js script from Python script then? Well for that, we need to take help of the OS itself.
  6. We need to let the OS know that we intend to call Node.js script from our Python script.
  7. So to do that, we will make use of a special Python library module called “subprocess”.
  8. But how do we install this module? Well that’s the best thing about this. It is not an external module that needs to be installed separately. It already comes as part of the Python’s built-in packages.

So with this understanding, we will now write a simple Python script that calls the hello.js script written above using subprocess. Sounds good? Great! Let us check it out then!

A simple script to call Node.js script From Python

So create a file called hello_js.py and add the following code to it:

from subprocess import check_output
p = check_output(['node', '~/hello.js'])
print (p)

And that is it! With just these 3 lines of code shown above, we can call our Node.js script and print out the “Hello, World” string coming from our hello.js Javascript file! Quite simple right? But what is our Python code doing here?

Let me explain you briefly on the above Python code:

Line 1: Here we are importing a function from subprocess called check_output. We will use this function to get the console output coming in from our hello.js file.

Line 2: Here we are calling the imported check_output() and passing in a parameter list to it. This list consists of the console command line arguments we wish to execute. Now if you recall, to call our hello.js file using node, what command we used? So if you noticed, we are passing the same set of commands in this parameter list! Now it all makes sense right?

Line 3: Finally, we print the output we got from our check_output() function.

Conclusion

So this is how we can call a Node.js script from our Python code. We make use of the Python’s subprocess module and call Node.js command to run the javascript file through it. It will all become clear if you practice it further with few more variations around it. But this is the gist of how to run Node.js from Python.

So with this, I will end this article now. But if you have any questions around it, do let me know in the comment section below. I will be more than happy to help!

So until next time, take care!

Categories
JAVASCRIPT PROGRAMMING TUTORIALS WEB DEVELOPMENT

How To Enable Or Disable Console.log For Debugging

How to Enable or Disable console.log

So you are working on your Javascript project and you want to know how to enable or disable console.log messages? Then read on to learn how you can do it quite easily.

Whenever you are working with Javascript, be it on the front-end side with vanilla Javascript or frameworks like React, Vuejs etc. Or on the backend with Node JS, Express JS etc for your servers, you want a way to debug the code. Right?

One of the easiest way we try to debug our code is by using simple print statements. So on the Javascript end, this usually boils down to using console.log( ) messages.

But here is the thing. When you use a programming language that will be compiled – such as C, C++ or Java, we can use compiler flags to enable or disable debug messages.

However, for an interpreted language like Javascript, we dont have a built in method for how to Enable or Disable console.log( ) messages.

So what do we do in that case? Well, if we don’t have a built-in method to enable or disable Javascript console.log( ), then we need to create one!

And that is what we are going to do here. We will be writing a simple Javascript module that we can use to enable or disable Javascript’s console.log( ) messages.

So how do we design this piece of code?

Here is what we are going to do. Instead of using console.log( ) to print our debug messages, we will use our own custom function called debugLog( ). But within this debugLog( ) function, we will have a simple Debug Enable (or) Disable flag.

Now when this flag is set, we will call the console.log( ) in turn and if not set, we will skip printing the log messages. It is as simple as that!

Sounds good? Great! So here is the piece of code that does just that!

How to Enable or Disable console.log
How to Enable or Disable console.log using a switch?

Create a file called “utils.js” and add the following piece of code into it:

DEBUG = true;

function debugLog(msg) {
    if (DEBUG) {
        console.log(msg);
    }
}

//For express.js, we need to export this module
module.exports = debugLog;

So that is it! From now on, call debugLog( ) instead of console.log( ) to write your debug message. An example piece of such a debug message is shown below:

debugLog("[app] Connect to mongoDB...");

So whenever you want to switch on the debug logging, set the flag as below: 

DEBUG = true;

But the moment you want to turn these debug messages OFF, just set it to false:

DEBUG = false;

And that is all there is to it! This is how you can enable or disable console.log( ) messages for debugging!

Categories
HTML PROGRAMMING TUTORIALS WEB BROWSER WEB DEVELOPMENT

HTML Meter Tag Explained

HTML Meter Tag is a new type of HTML tag introduced in the HTML 5 specification. So chances are, you are not so familiar with it. Right? But do not worry, as we will start exploring everything there is to the HTML meter tag in this article. So you will soon be able to start using it in your websites and web apps.

Sounds good? Great! Then let us get started!

What Is An HTML Meter Tag?

So consider this situation. You are creating a dashboard in your web app that, among many other things, also shows the storage space left in your hard disk. Now how will you go about designing it?

So the chances are, you might create a custom HTML element that is styled using its CSS properties to display the storage space graphically. But even if it seems a valid solution, problem is you need to keep creating such custom HTML elements frequently. And if you are designing a web app having a dashboard showing multiple data, these custom elements will only increase. Right?

HTML5 Meter tag explained with example
HTML5 Meter tag explained

So then what is an easier solution for this problem than that? Well for one, would it not be easier if we had a built in HTML element to display such measurements? With the growing number of web apps with dashboards, having such a prebuilt HTML element makes sense, right?

Well, that is precisely what the HTML5 specification guys decided to do! And that is how the HTML Meter tag came into picture!

So What Does The Meter Tag Do?

The idea was to create an HTML element that can be used to display any measured values within it. So that is what a Meter tag does!

A Meter tag can be used to display a measured value within a given range of values.

Sounds good? Great! Then let us move on to take a look at an example piece of code that uses the Meter tag. Shall we?

HTML Meter Tag Example

So for this example, let us assume that we want to display the size of a cloud storage space. For brevity, let us say we want to display the size of our mail box which is currently at 66% full. Alright?

So how do we go about using the Meter tag to display this value? And how will the displayed result look like?

To answer these questions, let us start writing our code as shown below:

<!DOCTYLE html>

<html>
  <head>
  </head>
  <body>
    <label for="disk">Disk Usage: </label>
    <meter id="disk" value="0.7">70%</meter>
  </body>
</html>

Now, if you copy the above piece of coded into a new file and save it as meter.html, what do you see?

Go ahead and try it out! I want you to do it yourself so that you become familiar with how to use the HTML meter tags.

Did you try it? If you did, you should see that the result looks something like this:

70%

Conclusion

So that is it! That is how the Meter tag works! You just feed the right value into the “value” property of the Meter tag and it will display the meter gauge accordingly. Go ahead and test it out with few more different values and see how the gauge changes yourself.

Finally, if you have any questions or suggestions, let me know in the comment below! So until next time, take care!

Categories
DIGITAL MARKETING TUTORIALS WEB DEVELOPMENT WEB SERVER WORDPRESS

5 Best Domain Name Ideas For Food Blog

domain name ideas for food

Here is a list of domain name ideas you can use to start your own food blog. Now we know that if you are a food blogger looking to start your own blog, then finding a suitable name is a challenge. So to help you on this, we have come up with a short list of domain names that you can use for your blogs.

We will go through each of these blog domain names and discuss its advantages. These are all domain names best suitable for a food blog and available for registration. So, using one of these names should give a meaningful character to your blog.

5 best domain name ideas for food blog

What do we need to look for when coming up with a blog name?

There are lots of challenges we need to overcome when we are trying to come up with a name for a food blog. So let us discuss this first. Now since this is a new food blog, your visitors will be unfamiliar with it. Therefore, you need to have a brand name that is catchy, creative and easy to remember. In this way, when your visitor visits your website, it’s name will get registered in his mind.

Here is a little exercise for you

I want you to recollect how many brands and names you came across today? Every brand names you had come across the entire day, I want you to try and recollect them. Done? Now tell me, how many of those names were you already familiar with? And how many “new” brand names did you come across today?

Did you make a list of it?

So here is the thing. Most of the familiar names you recollected were because of their extensive marketing. They would have been promoting their brand names regularly and as a result, it has become a house hold name now. And that is the reason you were quickly able to recollect most of the well known brands. But you can’t take this path because you need to spend a lot of money for that. Because advertising needs money.

But on the other hand, let us look into your list of the new brand names you had came across. It might not be a long list. But it is still something you were able to recollect and write it down. So that is by itself surprising isn’t it?

But can you realize why you were able to recollect that new brand name? The answer will most likely be because it was easy, memorable and creative! So these are the same 3 things I had listed earlier that you need to use while coming up on your own food blog’s name! Correct?

So you saw the pattern here. You now know exactly what you need to do come up with a successful brand and domain name.

So with this in mind, let us start going through each one of the domain name ideas that you can use right away for your food blog.

Domain Name Idea For Food Blog #1

Buy Domain Name: Foodfossil.com

Now this is one of the interesting domain name ideas for food blog. Because it is simple, cheesy and easy to remember as well.

Also everyone who has been using an automobile will be very familiar with the term fossil. It is literally how the fuel is obtained for the said automobile.

Now, if we consider humans to be like automobile, what is the fuel we need? Yes, you got it right. It is the food!

So combining the word food with its intended activity as a fuel for body, foodfossil.com makes so much sense! Also, since this is a .com domain name, it is easy to remember!

Domain Name Idea For Food Blog #2

Buy Domain Name: foodassemble.com

Now this ia very unique domain name idea for a food blog to use. We are all familiar with how a car is made right? It is made up of individual parts that gets assembled in a factory. So the end product – the car is assembled in a factory. Now just like that, even we assemble our food by making use of its ingredients.

So when you use a name like foodassemble.com for your food blog, it signals the process of the preparation of food. So what do you guys think of this name? Doesn’t it sound cheeky, professional and still easy to remember? 😉

Food Blog Domain Name Idea #3

Buy Domain Name: platesofaroma.com

Now far some reason, you don’t want to use keyword like food for your domain name, we have an alternative for that. You can simply use this new domain name platesofaroma.com.

I think by now you are already able to figure out how this is a good name. If we simply break the domain name of this food blog, we get three words plates + of + aroma.

Aroma, if you are not a native English speaker simply means smell. So when I say plates of aroma, I simply mean delicious smelling food in a plate. See again, this domain name is very easy to remember. You are making your website’s visitor imagine a plate of food. And this food is something that is delicious and best smelling. And this food is served on a plate for you to eat up!

Now that is a sight to remember isn’t it. Also, everytime he comes into a similar kind of situation for real, he will remember youf blog!

Win-win for you if you use this domain name for your food blog, isn’t it? 😉

Food Blogger Domain Name Idea #4

Buy Domain Name: mealartist.com

Now this is a domain name that is on point! It clearly describes you, a food blogger’s mastery over your food art.

This domain name is simply a combination of two words meal and artist. Here, the word meal simply tells that the subject is about food. On the other hand, the word artist would mean that you are an expert in it.

Also, since this domain name uses two most familiar words, anyone will be able to remember it easily.

Domain Name Idea For A Food Blog #5

Buy Domain Name: Eggpotato.com

So this is an interesting domain name for a food blog, right? What we are doing here is to combine two food items. Eggs and Potatoes and forming a domain name out of it. Now since egg and potato scramble is a common food item everywhere, it is easier to remember.

Aslo, it comes as a surprise to us that this domain is still available in a .com extension!

So, if you are just starting out a new blog and unsure about a name, this is the one you should mostly be picking up!

Conclusion

So, these were the top 5 domain names you can use to create your food blog. As a food blogger, the domain name ideas you use should match the content you plan to post in the blog. So make sure that you pick the right name depending on what you plan to write.

Also as a food blogger, your reputation in the social media only increases if you can come up with innovative recipes. So, keep these things in mind when registering a domain name for your website.

So with that, I will end this article now. Hope you liked some of the domain names I have listed here. If you still have any questions or suggestions, do let me know in the comments below.

Categories
DATA SCIENCE EMBEDDED PROGRAMMING PROGRAMMING PYTHON TUTORIALS WEB DEVELOPMENT

What Are Python Reserved Keywords?

A very big sum python function
Writing a very big sum function in Python programming language

Python reserved keywords are those words in Python programming language that have a specific meaning in a program. These keywords have specific actionable functionalities defined to it in Python. We are not allowed to re-use these reserved keywords. It is also not possible to override the keywords in Python.

Why Do We Have Python Reserved Keywords?

A programming language is defined by a set of keywords that have specific functionalities attach to it. Python programming language is no different from this. There are a set of keywords defined in Python language that performs specific tasks within the program where they are used.

Python Logo For Reserved Keywords In Python

For example, print is a keyword in Python which instructs the Python interpreter (i.e. the Python environment where Python programs run) to print a string to the output terminal. So a Python program line like:

print('Hello, World!')

will print the string:

Hello, World!

to the computer output screen that its user can see. We as a programmer are never allowed to use same keyword “print” for any other purposes like variable name or function name. Thus, we say that it is a Python reserved keyword.

Similarly, the keyword input is used to receive input from the user of a Python program. So a line in the program like:

user_name = input('Enter your name')

will display the string:

Enter your name

on the user screen and wait until the user enters his name. Once he enters the name and hits the “Enter” key, the name gets stored in the variable “user_name“.

So as you can see here, each of these reserved keywords such as print, input etc. each have a very specific functionality attached to it in Python language. We cannot use these same keywords as a variable name or function names. Trying to do so will result in the interpreter throwing error at us!

So now that we understand about reserved keywords in Python, what can we do about them?

For one, we need to know about all the Python reserved keywords to avoid using them in other ways in our program. But in addition to this, knowing about these reserved keywords and their intended functionalities will also help us write useful programs.

Using Reserved Keywords In Python Programs

Python programs are nothing but a bunch of reserved keywords used upon a set of variables to perform certain operations. So we use these set of keywords to write our programs. For example, if we take a look at the below program:

user_name = input('Enter your name')
print('Hello, ' + user_name + '!')

This program simply prompts for an user to enter his name. When he does so, it will just wish Hello to him by addressing his name. So when I run this program, the output I get is something akin to this:

'Enter your name'
> Amar
> Hello, Amar!

Conclusion

So in short, we can say that reserved keywords are a set of words in Python that have pre-defined meaning and functionalities associated with them. We make use of these keywords to write our program and we are not allowed to re-use the same words in our variables or function names. In other words, we are not allowed to alter their pre-defined meaning.

Categories
DJANGO PYTHON TUTORIALS WEB DEVELOPMENT WEB SERVER

Django Web Framework Beginner Tutorial – Introduction

A very big sum python function
Writing a very big sum function in Python programming language

What is Python Django?

Django is a Python based web development framework. It is a collection of libraries and tools that can be used to develop websites and web applications. Django uses Python as its primary backend programming language.

Learn more about Frontend & Backend components of a web app here

Why use Django Web Development Framework for developing a web app?

In the early days of internet, not many programming languages or supporting libraries were available for the development of websites. So, every website developer was writing many frequently used components repeatedly.

Python Django Web Development Framework

These included features like user authentication, database read/write, Cross Site Scripting (XSS)/malware protection code, database injection prevention code etc.

Every time a new website was built, web developer had to rewrite these pieces of code over and over again. This results in an increase in time to complete the project. It also exposes the website to certain vulnerabilities due to bad testing or bad design.

In order to overcome these, developers started to create a common web development framework. This contained all the frequently used components like authentication, session management code etc. These were later made available to others as part of the web framework libraries.

Soon enough, these libraries started being developed in different programming languages as well. Django is one such web application development framework that was developed using the Python programming language.

Why Use A Web Development Framework Like Django?

The main advantage of using Django is the number of readily available components it comes with. All the bells and whistles required to develop a basic web application is present in Django. Module like user management, admin dashboard, session management component, protection against XSS, CORS support are all readily available. This makes Django one of the quickest web development framework to get started with. You can go live with a website in no time because of this.

In addition to this, Django also comes with framework extensions such as Django Rest Framework (DRF) that can be also used to enhance the capabilities of a Django Web Application.

All these features of Django makes it one of the most appealing “all batteries inclusive” web app development framework in the tech industry.

In addition to this, if you are already familiar with the Python programming, then using Django becomes very easy.

Django is not the only Python web development framework. There exists other Python based web development frameworks like Flask, web2py and many more. But what makes Django different and easier to get started with is its all inclusive battery modules we discussed earlier.

Who is currently using Python Django Web Framework in real world?

Some of the top tech companies using Python Django includes Instragram, Quora, Mozilla, Disqus, National Geographic, Last.fm etc.

This was a theoretical introduction of Django. In the upcoming articles, we will get our hands dirty by using Django to develop a few simple web apps. This should give you a clear idea on the advantages of Django and why it is extremely useful.

Categories
DATA MINING DATA SCIENCE HTML JAVASCRIPT PROGRAMMING PYTHON STATIC WEBSITES TUTORIALS WEB DEVELOPMENT WEB SCRAPING

How To Extract Data From A Website Using Python

Web scraper Illustrative picture

In this article, we are going to learn how to extract data from a website using Python. The term used for extracting data from a website is called “Web scraping” or “Data scraping”. We can write programs using languages such as Python to perform web scraping automatically.

In order to understand how to write a web scraper using Python, we first need to understand the basic structure of a website. We have already written an article about it here on our website. Take a quick look at it once before proceeding here to get a sense of it.

The way to scrape a webpage is to find specific HTML elements and extract its contents. So, to write a website scraper, you need to have good understanding of HTML elements and its syntax.

Assuming you have good understanding on these per-requisites, we will now proceed to learn how to extract data from website using Python.

Python logo on extracting data from a web page using Python
Python Web Scraper Development

How To Fetch A Web Page Using Python

The first step in writing a web scraper using Python is to fetch the web page from web server to our local computer. One can achieve this by making use of a readily available Python package called urllib.

We can install the Python package urllib using Python package manager pip. We just need to issue the following command to install urllib on our computer:

pip install urllib

Once we have urllib Python package installed, we can start using it to fetch the web page to scrape its data.

For the sake of this tutorial, we are going to extract data from a web page from Wikipedia on comet found here:

https://en.wikipedia.org/wiki/Comet

This wikipedia article contains a variety of HTML elements such as texts, images, tables, headings etc. We can extract each of these elements separately using Python.

How To Fetch A Web Page Using Urllib Python package.

Let us now fetch this web page using Python library urllib by issuing the following command:

import urllib.request
content = urllib.request.urlopen('https://en.wikipedia.org/wiki/Comet')

read_content = content.read()

The first line:

import urllib.request

will import the urllib package’s request function into our Python program. We will make use of this request function send an HTML GET request to Wikipedia server to render us the webpage. The URL of this web page is passed as the parameter to this request. 

content = urllib.request.urlopen('https://en.wikipedia.org/wiki/Comet')

As a result of this, the wikipedia server will respond back with the HTML content of this web page. It is this content that is stored in the Python program’s “content” variable.

The content variable will hold all the HTML content sent back by the Wikipedia server. This also includes certain HTML meta tags that are used as directives to web browser such as <meta> tags. However, as a web scraper we are mostly interested only in human readable content and not so much on meta content. Hence, we need extract only non meta HTML content from the “content” variable. We achieve this in the next line of the program by calling the read() function of urllib package.

read_content = content.read()

The above line of Python code will give us only those HTML elements which contain human readable contents.

At this point in our program we have extracted all the relevant HTML elements that we would be interested in. It is now time to extract individual data elements of the web page.

How To Extract Data From Individual HTML Elements Of The Web Page

In order to extract individual HTML elements from our read_content variable, we need to make use of another Python library called Beautifulsoup. Beautifulsoup is a Python package that can understand HTML syntax and elements. Using this library, we will be able to extract out the exact HTML element we are interested in.

We can install Python Beautifulsoup package into our local development system by issuing the command:

pip install bs4

Once Beautifulsoup Python package is installed, we can start using it to extract HTML elements from our web content. Hope you remember that we had earlier stored our web content in the Python variable “read_content“. We are now going to pass this variable along with the flag ‘html.parser’ to Beautifulsoup to extract html elements as shown below:

from bs4 import BeautifulSoup
soup = BeautifulSoup(read_content,'html.parser')

From this point on wards, our “soup” Python variable holds all the HTML elements of the webpage. So we can start accessing each of these HTML elements by using the find and find_all built-in functions.

How To Extract All The Paragraphs Of A Web Page

For example, if we want to extract the first paragraph of the wikipedia comet article, we can do so using the code:

pAll = soup.find_all('p')

Above code will extract all the paragraphs present in the article and assign it to the variable pAll. Now pAll contains a list of all paragraphs, so each individual paragraphs can be accessed through indexing. So in order to access the first paragraph, we issue the command:

pAll[0].text

The output we obtain is:

\n

So the first paragraph only contained a new line. What if we try the next index?

pAll[1].text
'\n'

We again get a newline! Now what about the third index?

pAll[2].text
"A comet is an icy, small Solar System body that..."

And now we get the text of the first paragraph of the article! If we continue further with indexing, we can see that we continue to get access to every other HTML <p> element of the article. In a similar way, we can extract other HTML elements too as shown in the next section.

How To Extract All The H2 Elements Of A Web Page

Extracting H2 elements of a web page can also be achieved in a similar way as how we did for the paragraphs earlier. By simply issuing the following command:

h2All = soup.find_all('h2')

we can filter and store all H2 elements into our h2All variable.

So with this we can now access each of the h2 element by indexing the h2All variable:

>>> h2All[0].text
'Contents'
>>> h2All[2].text
'Physical characteristics[edit]'

Conclusion

So there you have it. This is how we extract data from website using Python. By making use of the two important libraries – urllib and Beautifulsoup.

We first pull the web page content from the web server using urllib and then we use Beautifulsoup over the content. Beautifulsoup will then provides us with many useful functions (find_all, text etc) to extract individual HTML elements of the web page. By making use of these functions, we can address individual elements of the web page.

So far we have seen how we could extract paragraphs and h2 elements from our web page. But we do not stop there. We can extract any type of HTML elements using similar approach – be it images, links, tables etc. If you want to verify this, checkout this other article where we have taken similar approach to extract table elements from another wikipedia article.

How to scrape HTML tables using Python

Categories
TUTORIALS VPS WEB DEVELOPMENT

Tutorial – Setting up a Ubuntu 16.04 VPS Instance on Vultr

In this article, we will learn about how to create a simple Virtual Private Server (VPS) running 64-bit Ubuntu 16.04 Operating System.

In case you have not created an account yet on Vultr, you can do so by visiting the link in the next paragraph and get $50 worth FREE CREDITS that you can use to create and use your Vultr Ubuntu VPS instances

Get Vultr VPS Worth $50 FOR FREE If you too would like to use Vultr VPS instance (which I strongly advise) while following these tutorial series, you can use the following Link to create your Vultr account and get $50 Free Credit which is more than sufficient to use and learn all about Linux, Web Development and much more for FREE!

Once you have created your Vultr account using the link above, you log into your Vultr account by visiting the Vultr Web App. Once you have logged in, you should be in the Products tab which would list all the Vultr instances you have created until now. Since your Vultr account is new, you will not have any instances listed there.

Vultr Dashboard displaying list of active Vultr instances created until now.
Vultr Dashboard displaying list of active Vultr instances created until now

But do not worry, this is about to change now.

Create a new Vultr VPS by clicking on the link that read “deploy now” at the end of that Vultr dashboard web page. You will then be taken to a new web page as shown below:

Vultr Deployment screen where new VPS instance can be created and deployed.
Vultr Deployment screen where new VPS instance can be created and deployed

Do not get perplexed by such a long web page with numerous options. While they may look baffling at first, it is actually pretty easy to use to create your first Vultr VPS instance. We will go through each of these options in a step by step fashion so that it is easier for you to follow and replicate.

Step 1 – Choose Server: Vultr not just provides services to deploy a VPS server, but also many more other products including Bare Metal Machine, Dedicated Cloud etc. However, in our case, we are only interested in deploying a simple VPS server running 64-bit Ubuntu 16.04 OS. Hence, we will simply choose “Cloud Compute” option which is what creates a VPS server.

Step 2 – Server Location: Next, we need to select where we want our VPS server to reside at. Vultr has its data centers spread across the globe and hence we have option to choose our VPS servers from various cities across the world as listed in the option. Choose the one which is closest to your and your web app’s visitors location is. This is because you will get a quick turn around time (time taken by the server’s response to be received) from your server if it is closest to your own location.

Step 3 – Server Type: In this option, we need to choose the type of Operating System (OS) we need to use. If for example we want to install 64-bit Ubuntu 16.04 OS, we select it over here.

Step 4 – Server Size: Next comes the size of the VPS server you want to deploy. This depends on a number of factors such as the amount of data size your app is going to use, the amount of traffic it gets, the speed of the CPU and the number of cores it holds etc. For tutorials and experiments, I usually just use the default selection of $10 per month VPS instance which gives comfortable performance for my requirements.

Step 5 – Additional Features: These are some advanced options which are not selected by default. These includes option to select IPV6 network addresses, backups etc. which I usually leave at its default unchecked state (in other words, I do not use it).

Step 6 – Startup Scripts: This option is useful if you need to run any additional scripts at the startup of your VPS instance. I have never used it until now so I may not be the right person to comment much about it! Sorry!! 😛

Step 7 – SSH Keys: SSH keys are special software keys that are used to create a secured shell protocol connection between your laptop/computer to your Vultr VPS server. In this option, you can generate SSH keys (using this tutorial) for your laptop and take the public part of the SSH keys and paste it here on the Vultr dashboard under this option. This way, you would not need to type in login and password every time you want to connect to your Vultr VPS server from your laptop’s command prompt.

Step 8 – Server Hostname & Label: Finally, you can create a new Hostname and label for your VPS server. This will result in the Vultr dashboard displaying this instance of the VPS server using this Hostname & Label.

Once you are done with filling up with all the above details in your Vultr dashboard, you can click on the “Deploy Now” button to create and deploy your Vultr VPS server. It may take a few minutes since clicking on the button after which your Vultr VPS server should be ready for use!

Hope this article gave you an insight into how to create and deploy a new Vultr VPS instance using Vultr dashboard. If you have any queries or any feedback on this article, do let me know in the comments below. Until next time, happy coding! 🙂

Categories
TUTORIALS VPS WEB DEVELOPMENT WEB SERVER

Things To Consider When Designing & Developing A Website

So you have decided to design and develop your own website? Great! But are you aware of all the things that you need to keep in the back of your mind when designing and developing your website? In this article, we will list some of the most important thing you need to consider when developing your website in 2019 & 2020.

1. Domain Name

The internet today is made up of over a billion of websites and web applications. With so many options at the tip of their hand, your website visitors will not be able to remember your website until and unless its name stands out from the crowd. So, pick a catchy website domain name that is easier for your website visitors to recollect in the future. Use the Namecheap’s search bar extensively to identify an easy to remember and available domain name. Ideally, a .com domain name is preferable over other domain name extensions as most of the non technical visitors by default assume the domain name to end with a .COM extension. It is also advisable not to use a name that is too long to remember or too many non interpret able characters such as vooooooooz.com (Here, it will be very difficult for your users to remember how many o’s are there in the domain name).

2. Web Hosting

Web hosting is the web server provider where your website will reside or hosted finally after web development activity is done. Where you host your website is very important as that becomes an important criteria in determining your website visitors satisfaction! Confused? You see, your website visitors will be very happy when your websites loads as quickly as possible. If it takes more than 10 seconds to load a web page, your website visitors will get frustrated and might close your website rather than waiting for it to completely load. As a result, the speed at which your web server delivers your website to its visitors plays a vital role in determining the ultimate customer satisfaction.

So how to determine which is the best web server to use?

Ideally, your web server must be located as close to your website visitor as possible. So for example, if your website visitors are mostly from the United States (US), you should host your website in a server located within the US. If your website is located in a far away location such as Australia, the amount of time required to deliver the web pages of your website from the server ot your website visitor will increase a lot!

What if your website visitors are coming from all across the world?

If you have a very generic website that appeals to all the people across the world, chances are you will have visitors coming into your website from across the globe round the clock. In such a case, where should we host the website? Well, the answer for this is to host your webserver across the globe!

Wait…what???

Yeah, you heard it right. If you are getting visitors from across the world, you will still need to deliver your web pages from the web server closer to your user’s location! But how to do that? Allow me to introduce you to the “Content Delivery Network” or CDN for short.

What does a Content Delivery Network or CDN do?

Content Delivery Network or CDN is a type of web service provided by certain set of CDN service providers whose main job is to host copies of your website across multiple web servers around the world. They will take care of determining where your website visitors are coming from and decide upon which CDN web server to use to serve web pages to them. In that way, you are ensuring that all of your visitors coming from across the world will get the same quality of website access as every other user from any other location in the world.

If you are just beginning with your website, you dont normally need to go for a CDN until you are able to determine the geographical locations from where majority of your website user base is located at. So, we will revisit again regarding CDN in the future and ignore it for now.

So now that we understand that our web servers need to be very fast and located closer to the website’s userbase, where do we look for a web server and how to determine a web hosting provider?

How to choose a web hosting provider?

There are different types of web hosting providers in the market. Some of them provide us with a managed hosting where they will manage the entire web server related issues and you will only need to worry about your website related parts. They also usually host not just your website on their server, but many other websites from other website owners as well in the same server. So, in other words, you will be sharing your website’s web server with other websites and hence they are usually called as the Shared Web Hosting service providers. One of the best example of such a Shared Web Hosting provider is the Namecheap shared hosting provider as shown below.

Shared Hosting with Namecheap

Using a shared hosting provider has its own set of advantages and disadvantages. One of the main advantage of using a shared hosting provider is that in that case the webmaster (aka website owner or website maintainer) need not worry about maintaining the web server part as it will be taken care of by the shared hosting service provider. On the other hand, one of the main disadvantage of a shared hosting provider is that since the same web server will be shared with other websites as well, the speed of the web server will be nondeterministic and usually slower. If one of the website in that shared hosting server gets high traffic, the other websites in the same server will be affected with its response time, thereby frustrating its users.

If you do not want to go for shared hosting, there are other types of web servers available to you. One such option is the Virtual Private Server (VPS).

In case of a Virtual Private Server (VPS), you will be the sole person in control of an entire virtual private server and it will not be shared with anyone else. This results in an increase and deterministic response time, all the time by your website to your website visitors. The other advantage of a VPS server is that since you have access to the complete VPS computer, you can install any software that you choose to, something that may not be possible when using a shared web hosting service provider. The downside, however is that this VPS will not be managed by the service provider and you will be completely responsible for maintaining the VPS server. There are many Virtual Private Server (VPS) providers in the market that are highly competitive and cost effective. One such service provider is the Vultr VPS service provider which provides a VPS server for as low as $2.5 per month! We highly recommend this VPS server if you are looking in to a VPS server option.

3. Design A Responsive Website For Mobiles

Now that we have covered the infrastructure part of a website – domain name and the web server, let us now start looking into the design aspects of a website.

Over 70% of the website traffic these days come from smartphones and tablets. As the mobile data rates continue to fall along with the fall of smartphone prices with excellent technical specs, this number of mobile visitors is only going to increase in the future. So what does this mean to your website?

Make your website responsive and mobile friendly!

What do we mean by a responsive website?

In the early days of web development, where there were not many devices with varying form factor – that is the size of the screen did not vary a lot, designing a website for these computer devices where reasonably easy. But with the advent of smartphone since 2007 – the year iPhone was launched, most of the website traffic started coming from these smartphones and every year this is only increasing. With the introduction of smartphones, web developerf faced a new challenge – huge range of smartphone computing device screen sizes!

By default, what the operating system of these smartphones do – such as the iOS of iPhone or Android is to shrink the size of a website to just fit enough into the screen size of the smartphone.

However, problem with such a scheme is that many of the links and buttons of the websites where user was supposed to take action on, became extremely difficult to click on thereby reducing the user experience (UX) of the website. This can be extremely frustrating to your website visitors and hence, an alternative design had to be thought of to handle mobile visitors to the website. This is when the Responsive Website Design was born!

In a Responsive Web Design, the website is designed in such a way that the size of the buttons, links, texts or images and the overall layout of the web page are determined depending on the size of the device’s screen and rendering accordingly, automatically!

The advantage now is that the visitors of your website need not have to fight with their smartphones and tablets to interact with your website. So always build your website using responsive design strategy.

One of the easiest way to design a responsive website if you do not have the time to learn every aspect of a responsive design is to use a frontend website framework such as Twitter’s Bootstrap. Using Bootstrap framework while building the frontend of your website will ensure that your website is always responsive!

4. Search Engine Optimization (SEO)

Finally, we also need to ensure our website is optimized for search engines such as Google, Bing, Yahoo, DuckDuckGo etc.

What is Search Engine Optimization (SEO)?

Most of the people use search engines such as Google or Bing to find answers to their queries. In return, the search engine will display a list of websites that is expected to answer those queries. In the early days of our website, when not many people will know about its existence will mostly end up on our website mainly through these search engines. If our website has answers to the queries asked by the search engine’s users and the searach engine thinks our website’s answers are better than other websites’ answers, it will display our website link above other websites, there by increasing the probability of the search engine user to click our link and visit our website.

So then, what are the parameters that we need to take care of to ensure the search engine such as Google places our website at the top of the search result? It is these set of parameters that becomes the basis of Search Engine Optimization (SEO).

Search Engine Optimization (SEO) as the name suggests, is the optimization methodology used on our websites to ensure that the search engines can easily traverse throughout our website’s web pages, analyze the content of our website for quality and hopefully determine the best position of our website in its results displayed to its users. The position given to our website in the search result for a particular query is called the search engine ranking of our web page for that query.

Our aim hence, will always be to figure out a way to get our articles to the top of as many search query results as possible. This is usually achieved by ensuring quality of the content of the website, ease of navigation across the web pages throughout the website – both for search engine bots as well as our website users, proper use of appropriate HTML tags depending on the content, easy readable hyperlinks & URLs, good amount of highly authoritative websites linking back (aka backlinks) to our web pages there by signalling the search engines that our articles are highly recommended by them etc.

Categories
HTML JAVASCRIPT LAMP PHP STATIC WEBSITES TUTORIALS WEB DEVELOPMENT WEB SERVER

Beginners Tutorial – What Is A Website?

A website example

We have all heard about different websites present on the internet such as Google, Youtube, Facebook, Twitter etc. But what exactly is a website? What is it made up of?

Imagine you just found a 100 year old book in your attic that contains a wealth of information about the world wars. It also has a collection of photographs that revealed some secrets that are lesser known to the public. You wanted to share this information with the world, but how?

One way is to go to the newspapers and get it published, but it can still not reach all the people across the world. What would be an easy and best possible way to share this information to people around the world? Publish it on the internet!

When you publish it on the internet, anyone from around the world having a computer or a smartphone with an access to the internet will be able to consume your content.

You can publish this information on social networking websites such as Facebook, Twitter or Youtube or create your own website to publish it.

A website example

So, a website, simply put, is a collection of information present in different formats such as texts, images, videos, graphs that is published on the internet to helps its users consume them.

But just like you, there are millions of people who are sharing information on the internet, so how do you make your contents accessible from other people’s information? This problem is very similar to having thousands of building in a city and needing to find a particular building. How do we do that? We will discuss about this in the future articles