Category: JavaScript

In this post we will be learning about redirects. And see how you can redirect your web-page.

We will see two ways to redirect web-pages:

Through your registrars’ Cpanel.

Right into your code.

Through cPanel redirect feature

You can easily redirect your visitors from one page to another with the help of the Redirects feature.

To setup a redirection, access your website’s Control Panel and locate the Redirects menu.

In the Create a Redirect section. You can set up a redirection from one page of your website to another. This also works for subdomains or completely different websites.

If you choose to use HTTPS, make sure the redirected page has a certificate first, because redirecting to a website without an SSL certificate but using the HTTPS protocol for it, will most likely land your visitor to an error page

Now let’s see how you can set redirection by including few lines in your code.

HTML redirects:

The simplest way to redirect to another URL is with the Meta Refresh tag. We can place this meta tag inside the <head> at the top of any HTML page like this:

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. NodeJS is a JavaScript engine that you can install in your own system.

Also, NodeJs makes it possible to use JavaScript in backend development as a backend programming language. (Cool! isn’t it.)

You need to know this.

Node isn’t a program that you simply launch like Word or Photoshop: you won’t find it pinned to the taskbar or in your list of Apps. To use Node you must type command-line instructions, so you need to be comfortable with (or at least know how to start) a command-line tool like the Windows Command Prompt, PowerShell, or the Git shell.

In this article, we are about to discuss ‘this’ keyword in JavaScript. It is a very important part of object-oriented JS programming. Hence it becomes crucial for serious developers to understand ‘this’ keyword.

It is also one of the most confused concepts of JavaScript.

What is ‘this’?

Understanding 'this':

To be able to understand what I am about to talk, you should be familiar with the basics of JavaScript. e.x – Variables, Objects, Functions, etc…

There isn’t a single word that describes ‘this' well, so I just think of it as a special variable that changes depending on the situation. Those different situations are captured below.

case 1:

In a regular function (or if you’re not in a function at all), 'this' points to'window' This is the default case.

Case 2:

When a function is called as a method, 'this' points to the object that’s on the left side of the dot.

/*
* You can also think of this as the "left of the dot" rule.
* For example, in myObject.myMethod(), `this` will be myObject
* because myObject is to the left of the dot.
*
* Of course, if you're using this syntax myObject['myMethod'](),
* technically it would be the "left of the dot or bracket" rule,
* but that sounds clumsy and generally terrible.
*
* If you have multiple dots, the relevant dot is the one closest
* to the method call. For example, if you have one.two.hi();
* `this` inside of hi will be two.
*/
var myObject = {
myMethod: function() {
console.log(this);
}
};
myObject.myMethod(); // myObject

Case 3:

In a function that’s being called as a constructor, 'this' points to the object that the constructor is creating.

Today’s topic might not be clear from the heading, so let me make it clear over here. This post is a bit different so brace your self to think a bit.

In the field of programming, it is very important to understand the fundamentals and core concepts of programming. This field requires you to think differently.

Most people find coding quite tough and the reason being the way they think about web-applications. Anyone can learn the syntax of a computer language, and print ‘Hello World’.

But to literally build something you got to Think Differently…

And that’s what we are going to do today. Don’t go to the different purposes of these web-applications, instead try to see the common pattern that I am trying to point out.

Everything is a todo list.

Every web-application is a kind of todo list app. Let us see how.

ToDo List app:

The picture below is from a todo list web app.

Enter your task to be done and it will add it to the list.

Google is a kind of ToDo List app:

Google is a kind of todo list app, instead of tasks in the list there are the search results.

Enter your query and it gives you the list of search results.

E-commerce(Amazon) shopping cart:

A shopping cart is also a kind of todo list app. Instead of tasks, there are products and items on the list that you saved.

Select your product and it will be added to the list of the cart.

In fact, messaging apps are a kind of ToDo list.

All messaging apps are also a kind of todo list. the only difference is that the text input bar is at the bottom.

See the first image of todo list app, I am about to convert it to a messaging app. Here we go.

conclusion:

Every web-application is a kind of todo list app. Very rarely you would found an application that does not fits into this pattern.

Once again (Don’t consider the functionality of these sites, instead try to see the pattern, I am trying to point out.)

Hence,

A todo list app is a great place to start for beginners. Walk your way through an advance todo list app (like the one shown in the image above.) to get familiar with concepts used in almost all web applications.

Errors can and will happen every time you write some new computer code.

Programming code might contain syntax errors or logical errors. Many of these errors are difficult to diagnose.

Often, when programming code contains errors, nothing will happen. There are no error messages, and you will get no indications where to search for errors.

Searching for (and fixing) errors in programming code is called code debugging. And believe me, that’s not easy but the most valuable skill a developer could have.

Hence, here I am with top JavaScript debugging tools.

Chrome DevTools:

Google Chrome DevTools is a set of debugging tools that can be used to debug JavaScript code right from the Chrome browser as they are inbuilt. You can get to interact with HTML, CSS and JavaScript all from the browser simply by clicking the inspect element button.

It has the resources panel for inspecting the storage of web pages such as the HTML5 database, cookies, local storage etc.

You may have been using Chrome all these years without knowing that it has a debugging tool with so much power.

Sublime Web Inspector:

The sublime web inspector is a javascript debugging tools. The sublime web inspector allows you to debug, whatever you edit in your programs. It works on top of Web Inspector Protocol.

If you use Sublime Text Editor for your JavaScript editing, then Sublime Web Inspector allows you to debug from the same program you edit with. It works on top of WebInspectorProtocol, with all information displayed in console and text files.

Node.js Inspector for Debugging Requests to Node Apps

Debugging the Node.js on your application’s backend can be challenging. The following tools take advantage of the capabilities of the Node.js Inspector to assist you:

React Developer Tools

IN THE BROWSER: The React tab shows props and state values if they exist for the selected elements.So, these were the four debugger tools that can make debugging easier for you. You can learn to use them through the tutorials available online for free. Hope you liked the article.

Read the previous^ part to get introduction about how it works. you will have to use browser console (ctrl + shift +j in Google chrome)

First of all initialize the array mimim with the final set of values you want to see in backend. The script then automatically removes the extra options first(values which are not in mimim but in present in backend), then it adds the remaining values from mimim (which are in mimim but not at backend)