Understanding Noscript and Its Use on Websites

Understanding Noscript and Its Use on Websites

Maybe so far you haven't paid much attention to the existence of named tags <noscript>in the structure of your website or blog. This tag is almost always present in all templates but tends to be ignored. However, to build a good blog, you really need to pay attention to the possibility that JavaScript won't run.

Before discussing further about Definition and Function, <noscript>let's first review Javascript.

Understanding Javascript

JavaScript is a high-level and dynamic programming language. JavaScript is popular on the internet and can work in most popular web browsers such as Google Chrome, Internet Explorer (IE), Mozilla Firefox, Netscape and Opera. JavaScript code can be inserted into web pages using the <SCRIPT>.JavaScript tag is one of the core technologies of the World Wide Web besides HTML and CSS. JavaScript helps create interactive web pages and is an essential part of web applications.

source Wikipedia

From the definition above, we can conclude that JavaScript is almost mandatory to run on a website/blog. Without JavaScript, website interactions would not be as sophisticated as they are today. So what if the existing javascript doesn't run?

Without JavaScript

Users may disable JavaScript for a number of reasons. They might do this to overcome bandwidth limitations, to save their phone battery, perhaps also for privacy so they won't be tracked by analytical scripts. Some people even install browser extensions like NoScript to prevent the browser from running JavaScript. Suffice it to say, if JavaScript is disabled, many websites and apps fail to function; if not completely, then partially.

<noscript>is a fallback that will run if Javascript is disabled. Inside <noscript>you can save several elements, of course, apart from JavaScript, which will run/display if JavaScript is turned off. For example, the following are examples of several large websites if JavaScript is disabled.

WordPress.com

WordPress.com's new editor page relies heavily on JavaScript. As you can see from the following screenshot, it displays nothing but the WordPress "W" logo when JavaScript is disabled. Assuming most WordPress users are non-tech-savvy, they're probably aware of what's going on.

Trello

Most of Trello's features rely on JavaScript, unlike WP Trello which gives a message when JavaScript is disabled.

Facebook

Even better, Facebook displays a notification telling users if the feature doesn't work without JavaScript, and provides a link with instructions on how to re-enable JavaScript for users who might find it difficult.

Pengertian Element "noscript"

Tags <noscript>are used to display alternative content to users who have JavaScript disabled or whose browsers do not support scripts. The three examples of websites above show differences in the use of fallback <noscript>depending on how much or how Javascript is used. As a direct example, you can try disabling JavaScript on this blog.

I chose to block access to this blog out of consideration because some features will fail to run properly without Javascript. I do this to avoid giving visitors a bad impression which I fear will disturb comfort. This term is often referred to as Anti noscript . Even though I have installed several parts of the blog <noscript>as a fallback, it hasn't fully made this blog work.

Element didalam "noscript"

Elements <noscript>can be placed inside <head>and outside <body>. If used inside <head>, the element <noscript>can only contain elements <link>, <style>and <meta>. Meanwhile in all HTML<body> elements Global Attributes can be used.

Memasang Anti "noscript"

The use of anti-noscript is to block access to blog sites by displaying (custom) notifications. Before deciding to install anti-noscript on a website, you should analyze the impact it will have on visitors. If the website still runs normally without Javascript, then I suggest you don't need to install this anti-noscript.

How to Install Anti "noscript" on Blog

IMPORTANT!
Get into the habit of backing up your theme before editing.

On the Blogger Dashboard Temathen select Backup. If so, let's continue.

Step 1: Please enter your Blogger Dashboard . Then select TemathenEdit HTML

Step 2: Please paste the following CSS code above ]]></b:skin>or </style>.

/* Anti no-script by kuymase */
.fNtf>* :before{content:'';display:block;position:absolute;bottom:0;left:0;width:70px;height:70px;background:rgba(155,170,175,0.12);background-repeat:no-repeat;border-radius:0 120px 0 0;transition:opacity .3s;z-index:2}
.fNtf{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(0,0,0,.5);height:100%;left:0;position:fixed;top:0;width:100%;z-index:999}
.fNtf>*{-webkit-transition:all .3s ease;animation:fadeNtf 1s 0s;background:#fff;border-radius:10px;box-shadow:0 0 20px 2px #f2f2f2;display:block;left:50%;padding:30px;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;width:400px}
.fNtf>* svg{width:50px;height:50px;opacity:.8}.fNtf>* h5{margin:5px 0 10px}.fNtf>* p{margin:10px 0;line-height:1.6rem;font-size:15px}.fNtf>* p:last-child{margin-bottom:0}
.fNtf .cls{cursor:pointer;padding:5px 10px;position:absolute;right:0;top:0}
.fNtf .cls:after{content:'\2715';font-size:16px;opacity:.7}
@keyframes fadeNtf{0%{top:-20%;}100%{top:50%;}}

Step 3: Please paste the following HTML code above the closing tag </body>or &lt;/body&gt;.

  	<!--[ Anti no-script by Kuymase ]-->
  	<noscript>
      <div class='fNtf'>
        <div>
          <svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10' stroke='#D32F2F'/><line stroke='#D32F2F' x1='12' x2='12' y1='8' y2='12'/><line stroke='#D32F2F' x1='12' x2='12.01' y1='16' y2='16'/></svg>
          <h5>JavaScript Disabled!</h5>
          <p>We&#39;re sorry, but <data:blog.title/> doesn&#39;t work properly without <strong>Javascript</strong> enabled. Please <strong>Enable Javascript</strong> to continue browsing.</p>
          <a expr:href='data:blog.url.canonical' rel='canonical'>Reload</a>
        </div>
      </div>
    </noscript>

Step 4: Finally, please save.

To see the results. Please disable javascript via browser settings.

Closing

For those of you who are developing templates, it is highly recommended not to forget to use tags <noscript>to ensure the website continues to run well if the browser used by the user does not support scripts.

That's my review regarding the meaning of noscript and its use on websites . Hopefully it's useful for you.

Post a Comment

Thank you for visiting our Blogger Store! We value your feedback and comments. Please feel free to share your thoughts, suggestions, or any questions you may have about our Blogger templates, themes, or services. We're here to help and look forward to hearing from you! 😊

Previous Post Next Post