JavaScript – Page 10 – My Point of View

Overcoming browser throttling of setInterval executions

To preserve device battery and reduce unwanted CPU consumptions, browsers throttle the execution of callbacks passed to the setInterval method, whenever the webpage becomes hidden. This happens whenever the browser window is minimized, the browser tab is changed and in a few other special cases.

Javascript debugging doesn’t work in razor pages

Chrome (and Canary) used to be able to show javascript source which was embedded in aspx files.

Typically, I would add a debugger; statement, save, and then load my web page in Chrome with the developer tools window open. When Chrome hit the debugger; statement, it would stop and then show the javascript source, so that I could inspect variable or step through code.

A recent change has changed this so that now, when the debugger; statement is executed, Chrome dutifully stops execution but it is unable to show the source.

I had the same problem. When I clicked on the aspx page, under the Sources tab, I got a blank page. What worked for me was refreshing the page in Chrome. After that, the aspx code showed up in Developer Tools, and I was able to see , debug and search the code. This seems to be a Chrome bug.

Chrome Developer tool: html script is blank (in source) debugging tutorial

Bundling and Minification in ASP.NET Core

It is the dream of every web developer to build blazing fast and high-performance web applications but this is not easy to accomplish unless we implement some performance optimizations. Web pages have evolved from static HTML pages to complex and responsive pages with a lot of dynamic contents and plugins which require a large number of CSS and JavaScript files to be downloaded to the clients. To improve the initial page request load time, we normally apply two performance techniques called bundling and minification.

Arrow function in JavaScript

There’s an alternative way of writing anonymous functions, which we call an arrow function. An arrow function uses () => instead of function ():

function using function ();

document.querySelector("html").addEventListener("click", function () {
  alert("Ouch! Stop poking me!");
});

function using arrow function;

document.querySelector("html").addEventListener("click", () => {
  alert("Ouch! Stop poking me!");
});

Reference

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

Change visible status based on if array is empty or not in knockout.js

I want to be able to have a table show only if there are items in an array.

var view_model = {
    lines: ko.observableArray([
        {
        content: 'one'},
    {
        content: 'two'},
    {
        content: 'three'},
    {
        content: 'four'},
        ]),
    remove: function(data) {
        view_model.lines.remove(data);
    }
};

ko.applyBindings(view_model);

HTML

<span data-bind="visible:lines">Lines Exist</span> 
<ul data-bind='foreach:lines'>
    <li>
        <button data-bind="click:$parent.remove">
            Remove
        </button>
        <span data-bind="text:content"></span>
    </li>
</ul>

Here is one solution;

<span data-bind="visible:lines">Lines Exist</span> 
<!-- ko if: lines().length > 0-->
<p>Here is my table</p>
<ul data-bind='foreach:lines'>
    <li>
        <button data-bind="click:$parent.remove">
            Remove
        </button>
        <span data-bind="text:content"></span>
    </li>
</ul>
<!-- /ko -->

Refer to Stackoverflow