HTML Roadmap

1. HTML main level tags

• Doctype
• title tag
• meta tags
• link tag,
• script tag
• body tag
• HTML comments
• adding a favicon
• og:image tag

2. HTML semantic elements

• header
• footer
• section
• aside
• nav
• article
• main

3. List of other most commonly used HTML tags

• div
  • paragraph tag
  • span
  • anchor tag
  • list, ordered list, unordered list
  • iframes
  • heading tags
  • dl /dt, datalist
  • br, hr

4. table elements

• thead
• tbody
• td
• tr
• tfoot
• th

5. Form elements

• form
• different input types (text, email, phone, color, date, URL, radio, checkbox,etc)
• textarea
• select
• button
• label

6. Multimedia tags

• canvas
• video
• audio
• svg
• progress
• img

7. HTML events -[Good to know when using JavaScript]

Mostly used

• window events
• keyboard events
• mouse events Used if using the specific tags like form/media tags etc
• form events
• media events
• drag events
• clipboard events

8. HTML global attributes on elements

• class
• id
• data-* (custom attribute)
• tabindex
• lang

The above is a list of items one should know as a beginner to get started with web development. Do you have more suggestions on few other things one should learn when starting with HTML? Let me know in the comments below.

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Are you more of a Twitter person?. Then check out the short version of this blog in the below thread.

Let's dive right in!!!

1) Add all files

The below line can be used to select all files such as

• newly created files

• deleted files

• modified files

git add .

2) Add just a specified file

Lets assume that you edited multiple files, but you want to add just a specific file to the commit, then use the below command

git add < path-to-file >

//eg: add just the CSS file from the specified path
git add apps/project-structure/styles.css

3) Add files with a specific extension

Using the below command one can choose a specific type of file, e.g: One can choose to add just HTML files, CSS files or JavaScript files, etc.

git add *.< file-extension >

//eg: add all files with extension scss
git add *.scss

4) Add all files under a particular directory

Using the below command one can add all the files under a particular directory path

git add < directory >

//eg: add all files under the folder project-test
git add apps/project-test/

5) Add all files which are usually ignored via gitignore

Using the below command one can add all the files which are generally ignored via gitignore

git add -f

or

git add --force

6) Add all files except deleted files

Using the below command one can add all the files i.e newly created files and modified files, but this command will ignore the deleted files

git add --ignore-removal

7) Add all files except new files

Using the below command one can add all the files i.e modified files and deleted files, but this command will ignore newly created files

git add -u

or

git add --update

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Are you more of a Twitter person? Then check out the short version of this blog in the below thread.

As part of this blog let us see how one can create a download link or button which lets you download an asset (e.g. image, pdf, files, etc.). Do you know what is even more interesting?. This can be done with just a single line of HTML.

How to create a download link or button in HTML

The simple way to achieve this is

• create an anchor tag with the text of your choice e.g "Click to download"
• to the href attribute add the path to the URL of the asset you want to be downloaded. In the below example, I have added a path to an image.
• next comes the more important part, add the download attribute to the anchor tag.

Yay!!! You have created your download link now.

How do I make this look like a button?.

Simply add some CSS to make the anchor tag look like a button.

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download>Click to download</a>

Save the file using a custom name

In the above-given example, when the user clicks on download, it will save the file as "click-me.jpg", since that is the file name specified in the href attribute.

What about if you want to give it a different name?.

Simply add the name as a value for the download attribute. For example in the below code, I have added download = test, hence when the user clicks on download the file will be saved as test.jpg

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download="test">Click to download</a>

Can the asset/href value be of a different domain?

NO, they cannot. Download attribute works only for files from the same Origin URL's (i.e the file should be hosted on the same origin as the site you are trying to implement it in) or blob or data URL files.

In the below example, href value is from twitter.com whereas my site is blog.kritikapattalam.com. In this case, the download button will not work.

<!--- Site origin - https://blog.kritikapattalam.com --->
<a href="https://twitter.com/images/click-me.jpg" download="test">Click to download</a>

Well, that is it for this blog, and by now you should know how to create a download on your website.

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Are you more of a Twitter person?. Then check out the short version of this blog in the below thread.

Project Structure

• index.html
• script.js

index.html

There are 3 things that need to be done, in order to get our HTML running

1. Include the VUE-JS package
2. Add a div placeholder to display our static message "Hello World"
3. Include our custom Vue JS script which is going to hold our "Hello World" message

1. Include the Vue Js package

The first step to starting with a Vue project is including the Vue package. As part of this simple project I am going to include the below script tag in the head section of the HTML. If you are planning to use it in production, probably would want to consider using versioned resources.

<script src="https://unpkg.com/vue@next"></script>

2. Add a placeholder div

Include a div with the id "hello". This id will be used in our custom script and inside this is where you will display the message from the custom script

<div id="hello">
     <h1> Display my message here</h1>
</div>

3. Include the custom Vue JS script

Create a file called script.js inside which we will write our script to display our static message, and this file should be included as the last thing in the body section. The main reason to include this as the last item is, the script gets included in the sequential order.

<body>
        <div id="hello">
          <h1> Display my message here</h1>
        </div>
        <script src="script.js"></script>
 </body>

Why should the script be included at the end of the body?

So let's assume if this script was added in the head section, what happens is, the Vue js package script first gets executed, and the next script to execute will be the script.js. Script.js has code that looks for the div with id=hello and it will throw an error. This is because, the div hello is added after the script in the body section, hence it will not be available yet for the script to push the custom message into that div.

Hence include the script.js as the last file in the body, so that the DOM is available when our custom script executes.

script.js

In the below script

• Create helloWorld, which when called will return the message "Hello World - This is Vue 3"
• Next create a Vue App, which calls the helloWorld which in turn will return the message and insert it inside the div with the id hello.

## Final Script
const helloWorld = {
  data() {
    return {
        message: "Hello World - This is Vue 3"
    }
  }
}

Vue.createApp(helloWorld).mount('#hello');

Now save the above script file and what do you see?. Nothing yet, you will still be seeing the h1 with the value "Display my message here" that is because we need to access the message in the HTML. This can be done using text interpolation. Replace the dummy message with {{message}}

 <div id="hello">
         <h1>{{ message }}</h1>
  </div>

Final HTML

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello World Vue - 3</title>
        <script src="https://unpkg.com/vue@next"></script>

    </head>
    <body>
        <div id="hello">
          <h1>{{ message }}</h1>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Now save the above Final HTML and Final Javascript, when you open the HTML in the browser you should be seeing the below output

Bonus

Well, we saw how to display a static message, how about trying to get the input from the user and display that message instead.

I am going to include a v-model directive, which accepts input from the user, and as and when the user types, the message gets displayed on the page. This is called two-way data binding, this can be done by just updating the HTML as below

<div id="hello">
     <h1>{{ message }}</h1>
     <input type="text" v-model=message  />
 </div>

Output

References - Vue JS Docs

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML
• CSS
• JavaScript
• Web Development

I thought let me take this one step above and show how one can create a similar random quote generator using an API, and I am going to be using the famous Chuck Norris API for this.

Let's get started.

What will we learn as part of this blog

• function declaration vs function expression
• window.onload function
• Fetch() method
• attaching onclick eventlistener to an element

What will be the end result

• Create random quotes on button click. The quotes are going to be from the Chuck Norris API
• Add a dropdown category filter that will display random quotes from the category chosen.

Project structure

Create the list of files as listed below

1. index.html
2. script.js
3. style.css [ styles if we have any. As part of this blog, I am not going to add any styles.].

HTML

HTML is going to be very simple

1. Select field for the category- A simple select field with a list of all categories available in the Chuck Norris API. The options from inside the select field are created by the retrieved list from here Retrieve the categories https://api.chucknorris.io/jokes/categories

2. Section to display Quotes - A div "display_facts", is going to have the img tag which is going to have the chuck Norris icon from the API, and a p tag which will be populated with the quote from the API

3. Generate Quote button - This is the button onclick of which we will generate/retrieve a new quote from the API.

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Random Quote Generator</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
       <div class="outer-container">
           <div class="heading">
                   <h3>Chuck Norris Facts - Select category from the dropdown</h3>
                       <select id="category">
                            <option value="all">All</option>
                            <option value="animal">Animal</option>
                            <option value="career">Career</option>
                            <option value="celebrity">Celebrity</option>
                            <option value="explicit">Explicit</option>
                            <option value="fashion">Fashion</option>
                            <option value="food">Food</option>
                            <option value="history">History</option>
                            <option value="money">Money</option>
                            <option value="movie">Movie</option>
                            <option value="music">Money</option>
                            <option value="political">Political</option>
                            <option value="religion">Religion</option>
                            <option value="science">Science</option>
                            <option value="sport">Sport</option>
                            <option value="travel">Travel</option>
                        </select>
           </div>
           <div class="display_facts">
                <img src="" id="icon" />
                <p id="quote">Author</p>
           </div>
            <button id="generate">Generate</button>
       </div>
    </body>
</html>

JavaScript

Let's break this down into four steps

1. Create an array inside a function and call that function on window load.
2. Check what is Chuch Norris API capable of.
3. Using fetch method retrieve all the results
4. Generate quote on button click
5. Let's generate quotes based on the category selected.

1) Create an array inside a function and call that function on window load.

This can be done in two ways using function expression or vs function declaration. Read more about it here . The main difference with function expression is they are not hoisted, you cannot call the function expression before they are declared.

• In the below example, I created a function called generateQuote, which contains a console.log hi.
• Next inside window.onload function I call the function generateQuote.

Now save this file, and open index.html in your browser. In the chrome developer tool console, you should see the text "hi". What happens here is, once the entire window including the DOM & assets is loaded, generateQuote function is called.

As per MDN docs, The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links, and sub-frames have finished loading.

const generateQuote = function() {
     console.log("Hi");
}
window.onload = function() {
    generateQuote();
 }

2. Check what is Chuch Norris API capable of.

As part of this step, we are going to retrieve the results from the Chuck Norris API

Let's first see go check out the API

ChuckNorris API

An important tip for anyone trying to use an API is to read the documentation of the API, they usually have answers to all your questions as to how to use them and what is the API capable of doing.

When reading the API docs, what we concur is that the API is capable of doing the following things

• Retrieve random quotes
• Retrieve a list of random quotes based on a list of categories
• Retrieve the list of category
• Retrieve quotes based on the text entered by the user.

3. Using fetch method retrieve all the results

As per the docs, the URL to fetch the results in a JSON format is to use the below URL

//Retrieve a random chuck joke in JSON format.
GET https://api.chucknorris.io/jokes/random

Just try opening this URL https://api.chucknorris.io/jokes/random in a browser window, you should see a similar response that is a single random quote with below details

• The time when the random joke was created
• an icon image of Chuck Norris
• id for that particular quote
• the updated date
• a URL to the quote on the Chuck Norris API page
• value - which is actually the quote that will be displayed on our page.

//The result has been formatted for a better view
{
   "categories":[

   ],
   "created_at":"2020-01-05 13:42:24.142371",
   "icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png",
   "id":"DciuboTEQxqEaVG0Qd2T2w",
   "updated_at":"2020-01-05 13:42:24.142371",
   "url":"https://api.chucknorris.io/jokes/DciuboTEQxqEaVG0Qd2T2w",
   "value":"Chuck Norris flashes the peace sign a lot because it's the easiest way to go for the eyes."
}

Now try refreshing the API URL and you should see a different response. Let's go ahead and see how to add this via code and display it on the page.

The fetch method accepts one parameter which is the URL and returns a promise, hence we can use "then" which will return as a raw JSON first, and then once that raw JSON retrieve is successful,

• we then retrieve the icon

this.data.icon_url

• and the value(which is the quote here)

this.data.value

and display it into the respective DOMS using their HTML id.

If at all there is an error, then the promise will return the console.log inside the catch statement.

const generateQuote = function() {
   let url ="https://api.chucknorris.io/jokes/random";

    fetch(url)
    .then(function(response) {
        return response.json(); 
    }) // Getting the raw JSON data
    .then(function(data) {

        // Storing the quotes internally upon 
        // successful completion of request
        this.data = data; 

        // Displaying the quote When the Webpage loads
        console.log(this.data);
        document.getElementById("icon").src = this.data.icon_url;
        document.getElementById("quote").innerHTML = this.data.value;
}).catch(function() {
   console.log("error");
});

}
window.onload = function() {
    generateQuote();
}

Now, let's run the above piece of code and you should be seeing different quotes every single time you refresh your index.html. When you refresh the page, generateQuote a function inside the window.load gets executed, trying to fetch the new quote every refresh.

4. Generate quote on button click

This can easily be done by adding a click event listener, which calls the generateQuote function onclick.

window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}

5. Let's generate quotes based on the category selected.

To retrieve random quotes the API URL to be used is below

GET https://api.chucknorris.io/jokes/random?category={category}

In this URL, {category} will be the value chosen from the dropdown .e

eg: https://api.chucknorris.io/jokes/random?category=movie

So in order to retrieve the results based on category is going to be done in just a few steps

1. Retrieve the chosen category value from the dropdown

   let category = document.getElementById("category").value;

2. Pass the value of the category to the URL. The URL to use if you see below is decided based on an if/else condition. On the initial page load or if the user decides to view quotes from all the categories then we use the URL from the else condition, if the category chosen is something other than the option "all" eg. movie or sports then we use the URL inside the "if" condition.

 let url;
   let category =  document.getElementById("category").value;

   if(category !== "all") {
     url ="https://api.chucknorris.io/jokes/random?category=" + category;
   } else {
        url ="https://api.chucknorris.io/jokes/random";
   }

Final JavaScript

const generateQuote = function() {
   let url;
   let category =  document.getElementById("category").value;

   if(category !== "all") {
     url ="https://api.chucknorris.io/jokes/random?category=" + category;
   } else {
        url ="https://api.chucknorris.io/jokes/random";
   }

    fetch(url)
    .then(function(response) {
        return response.json(); 
    }) // Getting the raw JSON data
    .then(function(data) {

        // Storing the quotes internally upon 
        // successful completion of request
        this.data = data; 

        // Displaying the quote When the Webpage loads
        console.log(this.data);
        document.getElementById("icon").src = this.data.icon_url;
        document.getElementById("quote").innerHTML = this.data.value;
}).catch(function() {
   console.log("error");
});

}
window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}

Output - Working Demo

References

• Function declaration vs Function expression
• addEventListener
• [Fetch Method] (https://developer.mozilla.org/en-US/docs/Web/API/fetch)

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML
• CSS
• JavaScript
• Web Development

Check out my previous blog post Build a Simple Clock using JavaScript.

What will we learn as part of this blog

• function declaration vs function expression
• window.onload function
• Math.random()
• Math.floor
• attaching onclick eventlistener to an element

Let's get started!!!.

Project structure

Create the list of files as listed below

1. index.html
2. script.js
3. style.css [ styles if we have any. As part of this blog, I am not going to add any styles.].

HTML Structure - index.html

HTML is going to be very simple, nothing fancy here. In the below HTML,

• link the stylesheet inside the head tag
• link the javascript file inside the head tag
• Inside the body tag we are going to have

     A main outer container div which is going to hold the below elements
     - a paragraph tag to display the quote
     - a paragraph tag to display the author
     - a button - onclick of which we will generate random quotes
  

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Random Quote Generator</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
       <div class="outer-container">
            <p id="quotes"></p>
            <p id="author"></p>
            <button id="generate">Generate</button>
       </div>
    </body>
</html>

JavaScript

Let's break this down into four steps

1. Create an array inside a function and call that function on window load.
2. Retrieve the quotes/author from the array.
3. Onclick of the button, pick a random quote(index) from the array to display.
4. Use the index generated to display the quotes and author into the paragraph tag using innerHTML.
5. Call the function onclick

1) Create an array inside a function and call that function on window load.

This can be done in two ways using function expression or vs function declaration. Read more about it here . The main difference with function expression is they are not hoisted, you cannot call the function expression before they are declared.

• In the below example, I created a function called generateQuote, which contains an array called quotes and a console.log hi. I have declared quotes as a const variable because the value of the array is going to be always constant and will never change throughout this project.
• Next inside window.onload function I call the function generateQuote.

Now save this file, and open index.html in your browser. In the chrome developer tool console, you should see the text "hi". What happens here is, once the entire window including the DOM & assets is loaded, generateQuote function is called.

As per MDN docs, The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links, and sub-frames have finished loading.

const generateQuote = function() {
    const quotes = [
    {
        quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
        author: "Albus Dumbledore"
    },
    {
        quote: "It is impossible to manufacture or imitate love",
        author: "Horace Slughorn"
    },
    {
        quote: "Being different isn't a bad thing. I mean that you are brave enough to be yourself.",
        author: "Luna Lovegood"
    },
    {
        quote: "If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.",
        author: "Sirius Black"
    },
    {
        quote: "Never trust anything that can think for itself if you can’t see where it keeps its brain.",
        author: "Arthur Weasley"
    },
    {
        quote: "Every human life is worth the same, and worth saving.",
        author: "Kingsley Shacklebolt"
    },
    {
        quote: "Have a biscuit, Potter.",
        author: "Minerva McGonagall"
    },
    {
        quote: "Happiness can be found even in the darkest of times if one only remembers to turn on the light.",
        author: "Albus Dumbledore"
    },
    {
        quote: "Socks are Dobby’s favorite, favorite clothes, sir!",
        author: "Dobby"
    }
];
console.log("Hi");
}
window.onload = function() {
    generateQuote();
 }

2. Let's see how to retrieve the quotes/author from the array

First, let's see how to get the array values. Array values can be retrieved by their indexes. The index of an array starts from 0 to arraylength - 1. This means array index 0 will have the below values

 {
    quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
     author: "Albus Dumbledore"
  }

So if you want to print the fourth value, our index would be 3 [Remeber the index starts from 0 ] , so let's try to access the values for quotes and author using the index

//Syntax : arrayVariableName[index]
console.log(quotes[3].quote); // If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.
console.log(quotes[3].author); // Sirius Black

3. Onclick of the button, pick a random quote(index) from the array to display.

The next thing we want to do is pick a random quote from the array. In the previous step we saw that we can access the quote using the index number, so we are going to need a random number to pick the quote.

As per MDN Docs, Math.random() returns a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive).

Since math.random returns a floating-point number eg: 0.65 and in order to access the array values we need an integer so let's use math.floor which will give us an integer

As per MDN Docs, Math.floor() returns a number representing the largest integer less than or equal to the specified number.

in order to return a more efficient number let's multiply the random number with the array length and use math.floor which will return us an integer and save that value in a variable.

 let arrayIndex = Math.floor(Math.random() * quotes.length);

4. Use the index generated to display the quotes and author into the paragraph tag using innerHTML

document.getElementById("quotes").innerHTML = quotes[arrayIndex].quote;
document.getElementById("author").innerHTML = quotes[arrayIndex].author;

Now try saving the file, and when you open the index.html in the browser you should see a quote and author being displayed. When you refresh the browser, you should see a different quote

5. Call the function onclick

In the previous step, we were able to see different quotes being displayed every time when we refresh the browser because for every refresh the function gets called, which returns a random index number, displaying a random quote.

So now let's attach a eventlistener onclick to the button, which when clicked will call the generateQuote function

As per MDN docs, The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target.

//Final JavaScript
const generateQuote = function() {
    const quotes = [
    {
        quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
        author: "Albus Dumbledore"
    },
    {
        quote: "It is impossible to manufacture or imitate love",
        author: "Horace Slughorn"
    },
    {
        quote: "Being different isn't a bad thing. I means that you are brave enough to be yourself.",
        author: "Luna Lovegood"
    },
    {
        quote: "If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.",
        author: "Sirius Black"
    },
    {
        quote: "Never trust anything that can think for itself if you can’t see where it keeps its brain.",
        author: "Arthur Weasley"
    },
    {
        quote: "Every human life is worth the same, and worth saving.",
        author: "Kingsley Shacklebolt"
    },
    {
        quote: "Have a biscuit, Potter.",
        author: "Minerva McGonagall"
    },
    {
        quote: "Happiness can be found even in the darkest of times, if one only remembers to turn on the light.",
        author: "Albus Dumbledore"
    },
    {
        quote: "Socks are Dobby’s favorite, favorite clothes, sir!",
        author: "Dobby"
    }
];

    let arrayIndex = Math.floor(Math.random() * quotes.length);
    document.getElementById("quotes").innerHTML = quotes[arrayIndex].quote;
    document.getElementById("author").innerHTML = quotes[arrayIndex].author;

}
window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}

Output - Working Demo

Conclusion

Now you should have a working random quote generator, which generates random quotes onclick of a button. Now go ahead and try to load different quotes every few minutes or an hour. [Tip: Call the function inside setInterval, instead of onclick]

References

• Function declaration vs Function expression
• addEventListener
• [Math random] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
• [Math floor] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML
• CSS
• JavaScript
• Web Development

What will we learn as part of this blog?

1. Defining a function using function expression vs function declaration

2. document.getElementById

3. setInterval

4. Element.innerHTML

5. Date.prototype.toLocaleDateString()

Let's get started!!!.

Project structure

Create the list of files as listed below

1. index.html

2. script.js

3. style.css [ styles if we have any. As part of this blog, I am not going to add any styles as such.].

HTML Structure - index.html

In the below HTML,

• link the stylesheet inside the head tag

• link the javascript file inside the head tag what will be present in those two files we will see later in the post.

The next step is, inside the body tag add an element of your choice with an id attribute. I have added a paragraph as the element with the id value as a clock. This paragraph is where we are going to display our time.

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple Clock using JavaScript</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Simple Clock - Current Time</h1>
        <p id="clock"></p>
    </body>
</html>

Script - script.js

Let's break this down into steps

1. Create a function called clock and call the function.

2. Create a date object and retrieve the local time.

3. Call the function clock every second so that the clock gets updated with the new value.

1. Create a function called clock and call the function.

This can be done in two ways using function expression or vs function declaration. Read more about it here . The main difference with function expression is they are not hoisted, you cannot call the function expression before they are declared.

In the below example, I have defined a function called clock which has console.log, and then I call the function at the end of the script. Save the script file and when you open the index.html, you should see "Hi" in the developer tool.

//function expression
const clock = function() {
   console.log("Hi");
}
// or
//function declaration
function clock() {
  console.log("Hi");
}
clock();

2. Create a date object and retrieve the local time.

new Date() When called as a constructor, returns a new Date object.

• toLocaleTimeString returns the current local time in a string format.

const clock = function() {
    let getDate = new Date();
    console.log(getDate.toLocaleTimeString());
}

3. Display the time inside the paragraph tag

• In the previous step, we retrieved the value of the time, now we should display that value inside the paragraph tag.

• First, let's grab the element using its ID "clock"

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string.

• Into that element let's insert the time value returned by the date object. Using innerHTML we can set the value.

Now let's view this in the browser, what you should be seeing is, the current local time when the browser loaded for the first time. If you refresh the browser, you will see that it updates the time to the current minute. So every single time you want to see the current time, you will have to refresh the browser.

const clock = function() {
    let getDate = new Date();
    document.getElementById('clock').innerHTML = getDate.toLocaleTimeString();
}

4. Call the function using setInterval, every few seconds.

With the last update, in order to see the current time, we had to refresh the browser every time so that the function gets called on refresh/page load and retrieves the current time. But a clock is supposed to update on its own, which means we will need the clock function to be executed every second to retrieve the current value. This is where we use the setInterval function.

setInterval executes a function continuously for the given milliseconds.

Let's add the clock function inside the setInterval, now the clock function is repeatedly called every 1000 seconds.

const clock = function() {
    let getDate = new Date();
    document.getElementById('clock').innerHTML = getDate.toLocaleTimeString();
}
setInterval(function() { clock();}, 1000);

Output

References

• Function declaration vs Function expression

• date object

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML

• CSS

• JavaScript

• Web Development

What is a strict mode?

JavaScript's strict mode makes JS be executed in strict mode, which helps identify common mistakes in coding practices which might lead to potential bugs.

Syntax

"use strict;"

As part of this blog, let's see a list of things to remember while using strict mode in JavaScript

1. Declaring strict mode

2. Declaring a variable/object in strict mode

3. Deleting a variable/object in strict mode

4. Naming variables in strict mode

5. Duplicating a parameter in a function

6. Octal numeric literals are not allowed

7. Eval function to create a variable

8. Writing to a read-only property is not allowed

9. Writing to a get-only property is not allowed

10. 'this' in strict mode

Below is the list of few things which are identified as issues in strict mode vs without one

1. Declaring strict mode

The "use strict" directive/expression is only recognized at the beginning of a script or a function.

Declare strict mode at the top of the file

Strict mode can be declared at the top of the file as the first thing. When declared at the top it takes a global scope. In the below piece of code, use strict is declared as the first thing on the script file, making it a global scope, causing the strict mode feature to be enabled for the whole file.

"use strict";
alert("I am part of the file");

function test() {
   console.log("javascript use strict is declared at the top of the file");
}
test();

What happens when strict mode is declared inside a function and not at the top?

When used inside a function it has local scope and only that function will execute in strict mode. In the example below, the strict mode will be enabled only inside the function(local scope), and the code outside it will not follow the strict rules.

function log(x) {
    "use strict;"
    console.log(x);
}
log(5);

What to avoid?

In the example below, use strict is not the first line & should be avoided. Preferably it's better to declare it on the top of the file due to global scope, instead of declaring it inside a function.

alert("I am inside this file");

"use strict;" //not declared as the first line
console.log("javascript use strict is not declared at the first thing");

2. Variable/Object declaring in strict mode

Using a variable/object without declaring it is not allowed in strict mode. In the example below, myVar variable is assigned a value before declaring, this will throw an error.

What happens if strict mode is not enabled? - myVar will just be created as a global variable in that scenario.

"use strict;"
myVar = 5; // This will throw an error
function log(x) {
    console.log(x);
}
log(5);

3. Deleting a variable/object/function

Deleting a variable or object or function when in strict mode enabled is not possible.

use strict;
let myVar = 5; // This will throw an error
function log(x) {
    console.log(x);
}
log(6);
delete log; //throws an error
delete myVar; //throws an error

4. Naming variables in strict mode

When learning JS for the first time, the thing which we are sure often would have read is "Do not use reserved words as variable names".

But at times people do tend to use reserved words without realizing it, in such cases strict mode helps by throwing an error. Just try it out in a chrome developer tool console and one should be able to see the difference.

"use strict;"
var static = "hello";
//static is a reserved word, hence when using strict mode, it will throw below error
// Uncaught SyntaxError: Unexpected strict mode reserved word

5. Duplicating a parameter in a function

The example below shows that the x parameter in the function log has been duplicated. This is not allowed in strict mode.

use strict;
// This will throw an error because "x" parameter is duplicated
function log(x,y,x) {
    console.log(x);
}
log(6,10);

6. Octal numeric literals are not allowed

In the example below, one might assume a preceding zero before 1 does nothing and the value might just be 12, but in JavaScript preceding zero before a number means its Octal numeric. Strict mode does not allow octal numeric.

'use strict';
 // Will throw an error
 let x = 012;

7. Eval function to create a variable is not allowed

"use strict";
eval("var x = 1");// error

8. Writing to a read-only property is not allowed.

In the example below, we define an object, and in the configurable property, we set the writable value to false, which means that a particular object is read-only. So when you try to assign a new value to that object, the strict mode will throw an error.

'use strict';
let obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
// Will throw an error
obj.x = 25;

9. Writing to a get-only property is not allowed

In the example below, trying to write to a get-only property throws an error.

'use strict';
let obj = {get x() {return 0} };
// Will throw an error
obj.x = 25;

10. 'this' in strict mode

In non-strict mode, when you call a function that isn't bound to any object "this" will refer to the global window object, whereas in strict mode it returns undefined.

'use strict';
const foo = function() {
  console.log(this); // undefined in strict mode
foo();

Conclusion

The concludes what is strict mode is, how/where to declare it, and the list of few items to keep in mind/expect while using "use strict" in JavaScript.

References

• strict

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML

• CSS

• JavaScript

• Web Development

But do you really know what is the difference between the both?. Well, you have come to the right place. Keep reading!!!

As part of this blog, we are going to see

1. What is delete operator?
2. What is splice?
3. What is the difference between splice and delete?
4. What is the best way to delete an element?.

Define delete operator

According to MDN docs,

The JavaScript delete operator removes a property from an object.

Syntax : delete expression

where expression should evaluate to

delete object.property
delete object['property']

Lets see an example

let items_delete = [1,2,3,4,5];
items_delete.length; //Returns 5
delete items_delete[3];
items_delete.length; //Returns 5
console.log(items_delete); // Returns [1,2,empty,4,5]

In the above example,

• lets declare and initialize an array with 5 items, whose length is returned as 5.
• In the next step using delete operator delete the third item in the array.
• When you check the length of the array after deletion it will still return as 5.
• As a final step when you try to print the array again you will see that in the position of third key, the value will be seen as empty.

Define splice operator

According to MDN docs

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

let items_splice = [1,2,3,4,5];
items_splice.length; //Returns 5
items_splice.splice(3,1);
items_splice.length; //Returns 4
console.log(items_delete); // Returns [1,2,4,5]

In the above example,

• let's declare and initialize an array with 5 items, whose length is returned as 5.
• In the next step using splice method delete the third item in the array.
• When you check the length of the array after deletion it will still return as 4.
• As a final step when you try to print the array again you will see that only 4 items are present in the array.

Difference between delete and splice

So by the example what we see is

• Delete - will delete the element and replace it with empty/defined, which means the length of the array always remains the same.
• Whereas when you use splice to delete an element, it removes the value or the index associated with it, which means the length of the array also changes.

What is the preferred method?.

Based on the example we have seen above, when you want to delete an element in the array it is best to use splice, since delete will result in an empty placeholder.

Conclusion

Now you should know the difference between splice and delete and which one to use during development.

References

• splice
• delete

Are you more of a Twitter person?. Then you can read the same thing in the below thread

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML
• CSS
• JavaScript
• Web Development

But do we really know what is the difference between them both and why should one consider using let?. Let's find out.

Here are a few of the things which differentiate var from let

1. Global Object
2. Re-declaration
3. Hoisting
4. Scoping

1. Creating global object

When using var at the top of the file, it creates a **global property object which is windows, which does not apply when using let instead.

var counter = 0;
let counter2 = 0;
console.log(window.counter); //  0
console.log(window.counter2); //  undefined

In the above example, both counter and counter2 are global objects created at the top, but when trying to access as via window.variableName let results in undefined error.

2. Re-declaration

In strict mode, let cannot be redeclared and if done it will throw an error, whereas var can be redeclared.

'use strict';
var string1= "hello";
var string1= "hi"; // "hello" will be replaced without any errors

let string2= "world"; 
let string2= "hello"; // SyntaxError: Identifier 'string2' has already been declared

3. Hoisting

Hoisting is when variables can be used even before they are declared. In the below example the variable string1is used, here it saves space for foo with the value undefined and the declaration/initialization follows later in the code. But whereas with let, this is not possible it will hit a temporal dead zone resulting in a reference error

console.log(string1); // undefined
var string1= "hello";
console.log(string1); // hello

console.log(string2); // ReferenceError
let string2= "world";
console.log(string2); // world

4. Scoping

The main difference between let and var is scoping of the variables. In the below example, Var string3 inside Level-enclosed brackets are available even outside the level when inside a function, whereas let is block-level scoped or enclosing brackets scoped.

function run() {
  var string1= "Hello1";
  let string2= "World1";

  console.log(string1, string2); // Hello1 World1
 //Level - enclosed brackets
  {
    var string3= "Hello2"
    let string4= "World2";
    console.log(string3, string4); // Hello2 World2
  }

  console.log(string3); // Hello2
  console.log(string4); // ReferenceError
}

In the above example, since let is scoped to block or enclosing brackets, when you try accessing string4 outside of the braces block it will not be available and throw an reference error.

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

• HTML
• CSS
• JavaScript
• Web Development

Have you ever wondered what that small icon next to the browser title called is?

Well, that is the favicon.

As part of this blog, we are going to see,

1. What is a favicon?

2. How to identify a favicon on a webpage?

3. How to add a favicon to a website with just a single line of HTML?.

4. Does favicon help with SEO?

What is a favicon?

A favicon is a small icon associated with a website/page/application which is present next to the webpage title in a browser.

It helps users visually identify websites more easily within browser tabs, bookmarks, shortcuts, and address bars. Example - When more browser tabs are open by the favicon user can quickly identify the tab and click on it to view the webpage or the same goes for when there are more bookmarks present etc. With so many tabs/bookmarks open favicon makes it easier for users to identify the site by the image.

How to identify a favicon on a webpage?

• The highlighted icon in a circle is how it shows on the browser when the tabs are open.

• The highlighted icon in the rectangle below is how it shows when the website is bookmarked. You can see a list of favicons for websites bookmarked here eg: google, Facebook, Gmail, etc

How to add a favicon to a website?

<head>
    <title> My test site </title>
    <link rel="shortcut icon" type="image/jpg" href="images/favicon.png"/>
    .....
</head>

• add a link tag in the head section of your webpage. [Refer to the above code piece.].

link tag should have the rel attribute value as

• icon if just using it for a favicon next to the browser title/bookmarks/address bars etc.

• the same icon will be used when the webpage is saved as a shortcut to your desktop/laptop.

href="images/favicon.png"

• add the path to the favicon as the href value

• Square icons are expected to be used as favicons. Most used sizes are - 16x16, 32x32, or 48x48.

• Back in the day, the image extension for favicon was .ico for old browsers, but in recent times mostly .png or svg type images are used.

Does favicon help with SEO?

The more important question to ask does favicon helps with search engine optimization(SEO). No, it directly does not influence SEO, but it does help in creating brand awareness among the users visiting the site because most favicons are logos of the particular brand. Users are mostly seen to revisit pages that have the favicon present compared to the ones which does not. Because when people see a website without one, they tend to feel that it's not a genuine site.

Well, that is it for this blog, and by now you should know how to add a favicon to a website and its uses.

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Are you more of a Twitter person? Then check out the short version of this blog in the below thread.

How to style the first letter in a paragraph

::first letter is a pseudo element which will apply styles just to the first letter of the first line of any block level element.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<style>
    p::first-letter {
       font-size: 40px;
       color: orange;
    }
</style>

In the above piece of code, paragraph tag is a block level element. To the first letter of the paragraph tag which is "L" font-size 40px and color orange would be applied.

Now let's see how we can make a dropcap effect i.e the same first letter big enough such that it as long as three or so lines, and the remaining content just flows around it. This can be done in two ways.

1. Using CSS initial-letter property
2. Adding some customization to the first-letter by adding float, adjusting the line-height and font-size of the letter.

1. CSS initial-letter

• Using css initial-letter property - you can produce a drop cap effect i.e make the letter occupy specified number of lines in a paragraph.
• This accepts only a positive integer. Eg: In the below snippet, letter "L" will span/sink four lines.
• Note - This is only supported by safari at the moment.

p::first-letter {
   -webkit-initial-letter: 4;
   initial-letter: 4;
   font-size: 40px;
   color: orange;
}

2. Customize the font of the first-letter

p::first-letter {
   float: left;
   font-size: 75px;
   line-height: 60px;
   padding: 3px;
   color: orange;
}

In the above piece of code, to the first letter of the paragraph increase the font-size, line-height and float it in such a way that it spans to the number of lines you required. And by adding padding you can adjust the spacing of the first-letter as well

Are you more of a Twitter person?. Then you can read the same thing in the below thread

Conclusion

Now you should know how to

1. Add styles to just the first letter of a paragraph
2. Add a drop cap effect to the first letter using CSS initial property or by customizing the fonts of the first letter.

For browser compatability , check canisuse.com

References

• first letter
• initial letter

Follow me on Twitter | LinkedIn for more web development related tips and posts.

1. reduce the length of the array
2. using Array.prototype.pop() method
3. using Array.prototype.splice() method.

What is an Array

Array is an ordered set of list of values, where each value is specified by an index. And a single array can hold different types of values. eg, a single array can hold both strings and integers.

Lets consider the below set of array, with length 6.

let arrayExample = [1, 2, 3 ,4, 5, 6]

Lets reduce see how we can remove the last element in the array

1) Remove by reducing the length of the array.

By explicitly setting the length of the array to be less, will delete the last value automatically

let arrayExample = [1, 2, 3 ,4, 5, 6];
arrayExample.length = 5; // Changing the length of the array 
console.log(arrayExample); //Output : [1,2,3,4,5];

2) Remove using Array.prototype.pop() method.

As per MDN docs, "The pop() method removes the last element from an array and returns that element. This method changes the length of the array".

let arrayExample = [1, 2, 3 ,4, 5, 6];
arrayExample.pop(); // removes the element 6
console.log(arrayExample); //Output : [1,2,3,4,5];

In the above example , the last element in the array is "6". As per pop() method the last element in the array is removed.

3) Remove using Array.prototype.splice() method.

As per MDN docs, " The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place."

let arrayExample = [1, 2, 3 ,4, 5, 6];
arrayExample.splice(arrayExample.length - 1); // returns elements up until 5
console.log(arrayExample); //Output : [1,2,3,4,5];

In the above example, we specify the index value as array length -1 which is 5. Hence it returns the array up until 5 array elements.

References

• Array.prototype.pop()
• Array.prototype.splice()

Check out my other blog posts

• 10 things you can do in chrome developer tools
• 2 Simple ways you can truncate text using CSS
• Create a GitHub Profile README.md with widgets

Lets connect on Twitter | LinkedIn for more web development related tips.

Yes, it can be disabled. What's more interesting is that it can be done by just a single line of code in HTML.

How to disable zoom on pinch

• On the head section of the HTML, include the following piece of line which is a meta tag that tells the browser the details of what should happen on a device's viewport

<!doctype html>
<html lang="en">
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0 ,
    maximum-scale=1.0 , user-scalable=no"/>
   ...
 </head>
 <body>...</body>
</html>

name="viewport"

this means that this meta tag is used for device viewport

width=device-width

assigns the width of the device as the viewport width

initial-scale and maximum-scale is set to 1 -

which means it occupies the full 100% of the viewport on page load

user-scalable=no,

setting the value to no or 0 is what tells the browser to prevent the page from scaling(zoom) in/out

Things to keep in mind while using this

• This can affect accessibility, people with poor vision will have concerns when visiting the page, since it will prevent them for zooming/out and viewing content closely when required. So use wisely.
• iOS or safari still lets the users zoom for the above mentioned accessibility reason, so this fix might not work in those platform.

Check out my other blog posts

• 10 things you can do in chrome developer tools
• 2 Simple ways you can truncate text using CSS

Lets connect on Twitter | LinkedIn for more web development related chats.

Accessibility

As per w3.org

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web contribute to the Web

For a normal user when he visits a page, he/she directly jumps to the section of the page where they want to read. But if we consider visually impaired users or someone who uses screen reader, the assistive device has to read through the entire page before they can reach a point which interests them.

Let's assume when a user lands on the page , the screen reader will read the entire navigation/header and then goes to the actual content of the page. The user reads through the first page of your website once, now he/she goes to the second page and the screen reader will again start reading the entire navigation for them before they can go to the main content. This is where "SKIP TO MAIN CONTENT" link comes in handy for them.

How to add "SKIP TO MAIN CONTENT" on the page

HTML

• Inside the body tag add an anchor tag as the first element.
• Add an id to the content you want the screenreader to jump/skip to. eg: 'main-content'
• Add the same id as the href value to the anchor tag eg: 'main-content'

<body>
    <a class="skip-link" href="#main-content">SKIP TO MAIN CONTENT</a>
    <header> .....</header>
    <main id="main-content">
         Main Body Content .....
    </main>
    <footer>......</footer>
</body>

CSS

• Add CSS to the link to hide it from view. [P.S Do not use display:none or visibility hidden because screen readers will not read the element. Our main focus is for the screen reader to read the link]
• When the screenreader focuses on that element, make the element visible and also the screen reader will read the content inside the anchor tag . i.e "SKIP TO MAIN CONTENT" in our example.

.skip-link {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

.skip-link:active, .skip-link:focus {
    color: #000;
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto
}

References

• Accessibility

Checkout my other blog posts

• Getting Started with JavaScript - Ultimate Free Resources
• 10 Things you can do in Chrome Developer Tools
• 2 Simple ways you can truncate text using CSS

Please share your feedbacks and suggestions in the comments below.

Lets connect on Twitter | LinkedIn for more web development related chats.

1) Merging two or more arrays

Let's now see how we can use the concat method to merge two given arrays, array 1 and array 2

const array1 = [1,2,3,4];
const array2 = [5,6,7];
// merge array 1 into array 2 and store it in a new variable 
const newMergedArray = [].concat(array1, array2);
console.log(newMergedArray); // [1, 2, 3, 4, 5, 6, 7]
console.log(array1); // [1, 2, 3, 4]
console.log(array2); // [5,6,7]

const newMergedArray = [].concat(array1, array2);

In the above line [] creates a new array and the concat methods combine both array1, array2. This can also accept more than 2 arrays for concatenation by just adding them one next to the other

const newMergedArray = [].concat(array1, array2, array 3, arrayN);

Another alternative for merging two arrays is below

const newMergedArray = array1.concat(array2, array 3, arrayN);

2) Flatten single level nested arrays

Let's assume there is a nested array as below, and we would want to flatten it in such a way that the output is [1,2,3,4,5,6,7,8], this can be achieved by using concat() method with the help of spread operator.

const array1 = [1,2,[3,4],[5,6], 7, 8];
const flattened = [].concat(...array1);
console.log(flattened); // [1,2,3,4,5,6,7,8]

P.S. The above code flattens just a single-level nested array.

References

• concat()
• spread operator

Check out my other blog posts

• Getting Started with JavaScript - Ultimate Free Resources
• 10 Things you can do in Chrome Developer Tools
• 2 Simple ways you can truncate text using CSS

Lets connect on Twitter | LinkedIn for more web development related chats.

[P.S : Refer the codepen given below to see visually how each property behaves]

Consider that you have a list of paragraphs and you want to show it in 3 or 4 columns and also decide where or how the content can break. Let's see the first step on how you can split the content in a simple way.

Simple steps on how to show content into multiple columns.

• Create a div with multiple paragraph tags or a ul with multiple li tags
• Add the below code snippet

columns: 3 // should be a positive integer. Here the paragraph will be split into 3 columns.

.split-3-columns {
  display: block;
  columns: 3; // value based on how many columns you want the content to split
  height: 250px; // height of the div as per your need
}

In the above example, columns property accepts a positive integer value.Eg: value 3 means, the paragraphs will be split into 3 columns in the browser. When the content is split into multiple columns at times the layout or the paragraph might not look as expected.

Eg: You might end up seeing something below, where in the second column, the column begins with the last line of the paragraph and seeing it in just two line looks weird. In this case you might wish that when the content does break you might want to show the last three lines of a paragraph at the start of the column instead of just two lines. This is where widows come into the picture. The same goes for the paragraph for "It was popularised..." the first lines of the paragraph at the bottom of the column is in 2 lines, but you want to change how many lines of a paragraph are shown at the bottom of the column, this can be done using orphans.

Orphans

The orphans property sets the minimum number of lines that can stay by themselves at the bottom of a fragment(columns) before a fragmentation(column) break. The value must be positive and applies to block level container elements. This value typically affects the first line of the paragraph

• In the below codepen example , orphan value has been set to 1. Hence if you check the paragraph "It was popularised in the 1960s", it breaks as a single line i.e if the paragraph at the bottom of the column is expected to break at the first few lines then it will make sure that atleast 1 line of paragraph is seen at the bottom of the column(fragment), if there is no enough space to break based on the orphan value then it will rather start in the next column.

.split-3-columns {
  display: block;
  orphans: 1; 
  columns: 3; // value based on how many columns you want the content to split
  height: 250px; // height of the div as per your need
}

Widows

The widow property sets the minimum number of lines that can stay by themselves at the top of a new fragment(column) after a fragmentation(column) break. The value must be positive and applies to block level container elements. This value is typically for the last line of a paragraph

• In the below codepen example , widows value has been set to 5. Hence if you check the paragraph "Lorem Ipsum is simply dummy " you would see atleast there are 5 lines of text from the end of the parapgraph is shown at the top of the second new column/fragment.

.split-3-columns {
  display: block;
  widows: 5; 
  columns: 3; // value based on how many columns you want the content to split
  height: 250px; // height of the div as per your need
}

Browser support:

This is supported in all major browsers except for firefox in desktop and android firefox in mobile. For more details refer the MDN docs given below in the references section.

References

• Widows - MDN docs
• Orphans - MDN docs

Lets connect on Twitter | LinkedIn for more web development related chats.

1) Refresh the browser or redirect the page

Did you know that you can refresh the browser automatically every few seconds with just a single line of code?.

Yes, this can be done using the http-equiv="refresh" attribute on the meta tag.

<meta http-equiv="refresh" content="30">

• content value for 30 here means , the page will refresh every 30 seconds. Enter the value you want and see the page refresh every few seconds.
• if you add a url value followed by the integer, the page will redirect to the given url after the specified time. eg:

<meta http-equiv="refresh" content="3;url=https://hashnode.com">

Note: Refresh might have accessibility concerns so use with caution.*

2) Calculating with output tag

Output tag is used to represent the result of a calculation. In the below example we can calculate sum of two input fields and display it in the output field directly.

• for attribute eg: for="a b" is used to tell the output tag, which fields are used for the manipulation. In the below code pen for attribute value is the id of the two input fields.

• using the name attribute value, the results from the oninput javascript is populated into the output tag. eg: output tag name value is result hence in javascript you can pass the result after calculation using result.value

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50"> +
    <input type="number" id="b" value="100"> =
    <output name="result" for="a b"></output>
</form>

3) base tag

This tag is very useful when your entire webpage points to the same base URL

The base HTML element specifies the base URL to use for all relative URLs in a document. There can be only one element in a document.

<head>
     <base href="https://kritika-pattalam.hashnode.dev/" target="_blank">
</head>
<body>
      <a href="2-simple-ways-you-can-truncate-text-using-css">Click on this url</a>
</body>

How to use it ?.

• In the below codepen, I have specified the base href attribute to my hashnode main blog page. eg: https://kritika-pattalam.hashnode.dev/
• In the anchor tag instead of specifying the absolute URL, I have used the relative URL of my blog post eg : 2-simple-ways-you-can-truncate-text-using-css And the entire blog URL is : https://kritika-pattalam.hashnode.dev/2-simple-ways-you-can-truncate-text-using-css

4) Template tag in HTML - The Content Template element

• The HTML template tag permits you to declare pieces of HTML sections that can be cloned and embedded into the DOM using script.
• The contents of the template tag are not added to the DOM on page load, they are only inserted based on some user interaction. Eg: Lets say there is an image inside the template tag, the image does not get downloaded until the template is cloned and inserted into the DOM structure.

Leave me a comment below if you know about other rarely used HTML tags.

References - mdn docs

• Base Tag
• http-equiv="refresh"
• output tag
• template tag

Lets connect on Twitter | LinkedIn for more web development related chats.

1) Truncate a single line text using ellipsis

.truncate-ellipsis {
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

With text-overflow , ellipsis can be applied to single line of text, provided the following conditions are met. [ For truncating after multiple lines, keep reading 😉 ].

• the element must have

  width , max-width or flex-basis(if using flex)

• the element must have property

  word-wrap: nowrap

• overflow property should have value other than visible .

  eg: overflow: hidden;

• must have display value as block, inline-block or any other equivalent such as flex item etc. display:inline will not work here.

  eg: display: inline-block;

Did you know that you can reverse the direction of the truncation using the CSS direction property?

direction: rtl; //show from right to left

The direction property will truncate the text in the start of the line and show the end of the paragraph instead.

2) Truncate text after multiple lines using line-clamp

.truncate-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; 
  width: 250px;
  overflow: hidden;
}

With line-clamp text can be truncated after multiple lines, whats even more interesting is you can truncate it by specifying the line number where you want to truncate it. eg: -webkit-line-clamp: 3; will truncate start truncating the text from the third line.

Below are the list of conditions which should be met in order to make this work.

• display property should be webkit-box

  eg: display: -webkit-box;

• webkit-line-clamp value should be specified , value should be greater than 0.

  eg: webkit-line-clamp: 3;

• box-orient should be set to vertical

  eg: -webkit-box-orient: vertical;

• overflow property should have value hidden .

  eg: overflow: hidden;

Browser Compatability: webkit-line-clamp at the moment is not supported in IE. For detailed information refer: caniuse.com

Codepen:

The below codepen will show you a live preview of the above two methods will look.

References - MDN docs

• webkit-line-clamp
• white-space: nowrap
• text-overflow

Lets connect on Twitter | LinkedIn for more web development related chats.

1) Edit the Box Model directly

When you inspect an element, if you look into the computed section of the styles tab you will see the box model representation of the element. Did you know that you can edit the values in the box model directly?.

2) Color Palette & Contrast Ratio

When you see styles with color, you can click on the swatch which will open the color palette for you. Open the contrast ratio , green ticks means the color is in the acceptable contrast ratio, red means it does not meet the standard. The colors within the curved white spectrum are the ones which have a better color contrast ratio, if you choose colors outside of it you will notice that the contrast ratio check mark turns to red. Try adjusting the colors accordingly using the color picker to see what works best.

3) Changing color value syntax between hex, rgb and hsa

By default the color value seen in the styles tab is the one written in the css file, but this can be changed to show either hex or RGBA or HSA on the fly. This can be done by pressing Shift + clicking on the color value , it will change the values like seen in the below screen capture.

4) CSS shadows

Most times we use text shadows or box shadows during development. When in doubt or still trying to figure out the best values to use, you can use the developer tools to test out what works for you best.

5) Angle Clock

You would have used transform : rotate degree in css, by clicking on the icon next to the degree you can rotate the degree and see what works best for you.

6) Grid & Flex Layout

By clicking on the layout section, now you can find all the list of elements on the page which use display: flex or grid property. When you check the checkbox the element gets highlighted with dotted lines

7) Flexbox debugging tool

Flexbox has variety of options, and if you would like to test them out , the new feature in dev tool has an icon next to the display:flex property using which you can try out all the options and see how the content/layout behaves.

8) Badge settings

In the elements tab you can see the list of elements which use flex, grid, scroll-snap or ads. Right click on the elements(eg: div, p , span etc) and select badge settings. You can choose the badges you think will be most required for your debugging. In the below screenshot, you can see that the moment i check scroll-snap , the badges showed up next to the div which had scroll snap enabled.

9) Visualize CSS scroll snap

CSS scroll snap lets you set the scroll offset position of a scroll container to be at a preferred snap position once the scroll operation is finished. Visualizing this can be difficult, and using the developer tool, you can see how/where your scroll position ends.

In the elements tab, you will find the list of elements which currently use scroll-snap. Click on it, and it will highlight the element to show you its position.

10) Grouping CSS properties in the Computed pane

On the computed section of the styles pane usually we see all the styles which are applied on a particular element. By clicking on group they are grouped together by category and you can focus just on the ones which are required for your debugging.

Let me know in the comments below your favorite among these and if there are others which you use.

Check out my other blog posts:

• Create a GitHub Profile README.md with widgets
• Getting Started with JavaScript - Ultimate Free Resources

Lets connect on Twitter | LinkedIn for more web development related chats.