How to blink web browser tab

#html #javascript #beginners #codenewbie

Hello, guys In this tutorial we will learn How to blink the web browser tab using JavaScript.

First of all, we have to understand what JavaScript is and how it works.

To blink the web browser tab, first of all, we need to add a library to our HTML file which is given below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

How to use it:

Include the titleEffect.jquery.js file
<script src="titleEffect.jquery.js"></script>
Initialize the plugin Fade through the document titles by using the ‘blink’ mode.

$(function(){
  $.titleEffect({
    effect: 'blink',
    titles: [
      'jQuery',
      'Script',
      'Net'
    ]
  });
});

Blink web browser tab Step by step

First, we need to create two files index.html and style.css then we need to do code for it.

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to blink browser tab</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="titleEffect.jquery.js"></script>
  </head>
  <body>
    <h1>How to blink browser tab</h1>

    <script>
      $(function(){
        $.titleEffect({
          effect: 'blink',
          titles: [
            'New Notification'
          ]
        });
      });
    </script>
  </body>
</html>

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Blink web browser tab Video Output:

Download titleEffect library

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.