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
JAVASCRIPT STATIC WEBSITES TUTORIALS WEB BROWSER WEB DEVELOPMENT WEB SERVER

This one value in Javascript is not equal to itself!

We know that Javascript supports all kinds of values such as strings, numbers, constants etc. All these values are deterministic values in that their weights always remains the same. For example, an integer value of 25 is always equal to 25 in Javascript no matter what. Similarly a string value of “Hello” is also always equal to another string “Hello”.

In other words, these values in Javascript can always be compared with another value to determine if they are the same or different. To understand this better with an example, let us open up our browser console. In my case I am using Google Chrome browser console where we will create 3 variables with these values:

We can note from the above Javascript demo video that when the variable a and c are compared, since both their values are same holding a value of 2, they return true when compared with each other. On the other hand when variable a was compared with b, since their values were different, the comparison resulted in a return value of false.

This is true for all type of values present in Javascript – be it string, integers, floats, booleans anything you can think of.

However, there exists one special value in Javascript that is never equal to another variable having the same value. In other words its value is never equal to itself. This value is the NaN value!

NaN in Javascript stands for “Not a Number” and it is that one special value in Javascript which does not return true if it is compared with itself.

Why does NaN not equal to itself in Javascript?

Now you might be wondering why a NaN value does not equal to itself? The answer for this lies in the way Javascript language has been designed.

NaN or Not a Number is a special value in Javascript which is used to represent a nonsensical value – that is it is the value returned whenever a non sensical operation is performed. Now this is where it gets interesting. Why does a non sensical value not be the same all the time or at all the place? In other words, why is this happening here:

Why is it returning false?

The answer is that NaN as mentioned earlier is a value that is used to represent a non sensical values. So if the result of an operation performed is something that cannot be represented by ordinary or normal values, Javascript returns a value of NaN.

Now, if two operations results in non sensical values, they are not necessarily equal. Each of these operations can be returning two non sensical values of different weights. However, they both need to be represented by the value of NaN. Hence, the Javascript treats two NaNs as two different values and never equal to each other.

I learnt about this and many other similar anomalies in the book Eloquent Javascript. This is a very good book to learn and understand such interesting things about Javascript so I will definitely recommend this to anyone interesting in learning Javascript in depth.

If you are also aware of any other similar interesting things about Javascript do let me know in the comments below. Until then, happy coding! 🙂

Categories
100DaysOfCode BROWSER EXTENSION TUTORIALS WEB BROWSER

Use Your Web Browser As A Notepad

Did you know that you can turn your web browser into a notepad like text editor for quickly jotting down some notes while browsing the web?

Yes, it is possible to turn a new browser tab of your favorite browser such as Google Chrome, Firefox or Opera into a text editor in an instant. You do not need to have any programming experience to make this work. You will just need to remember the below little piece of string that you need to type into your favorite web browser to turn it quickly into a notepad.

Below are the steps you need to follow to turn your favorite web browser into a notepad like quick text editor:

  1. Open up a new tab in your web browser
  2. Type in the following piece of code into the URL bar (or the address bar) of your browser tab:
data:text/html, <html contenteditable>

Hit enter and voila! Your browser tab has turned into a notepad! You can now start typing anything you want in the browser tab window and verify that the browser has indeed turned into a note pad!

How does a web browser turn into a text editor?

By typing the above mentioned code into the URL of your web browser we were able to turn the browser tab/window into a text editor. But how did this work?

It works because the above mentioned code instructed the web browser that the current document’s content is of raw text data type – done through the use of keywords data:text/html

On the other hand, by typing in the markup code:

<html contenteditable>

We are instructing the web browser such as Google Chrome or Firefox or Opera to turn this web document into an editable HTML document. This results in browser allowing us to type in any kind of text we want into this browser window from now on!

Thus, we found that by simply typing a simple piece of code:

data:text/html, <html contenteditable>

into the address bar (URL bar) of our web browser, we were successfully able to turn the browser tab into a text editor.

However, it is a little bit difficult to remember this piece of code as it looks a bit cryptic. So to avoid having to remembering this, we will look at how we can create a new Google Chrome extension that can be used to open a browser tab as a notepad every time it is clicked. But that is a topic for my next article.

This article explained how and why typing in some magical code into the address bar of your web browser would convert it into a text editor. Hope it was informational and you learnt something new from it. There are many such simple tricks we can use to convert our web browser into a high performance tool by customizing it to our needs. We will decode each of these tricks as we go further, one step at a time.

Until next time, happy coding! 🙂