Category Archives: javascript

Simple way to detect browser’s FPS via JS

It’s dumb and dead simple but works. You can even track browser’s metrics with that.

(() => {
    const times = [];
    let fps;

    function refreshLoop() {
        window.requestAnimationFrame(() => {
            const now = performance.now();
        while (times.length > 0 && times[0] <= now - 1000) {
            times.shift();
        }
        times.push(now);
        fps = times.length;
        refreshLoop();
    });
    }
    refreshLoop();
    
    // output to console once per second
    setInterval(() => {console.log(fps);}, 1000)
})();

(() => {

const times = [];

let fps;

function refreshLoop() {

window.requestAnimationFrame(() => {

const now = performance.now();

while (times.length > 0 && times[0] <= now - 1000) {

times.shift();

}

times.push(now);

fps = times.length;

refreshLoop();

});

}

refreshLoop();

// output to console once per second

setInterval(() => {console.log(fps);}, 1000)

})();

Simple online editor for javascript

Just paste it into navigation bar:

data:text/html, <html><script>window.onbeforeunload = window.onunload = function(){return 'Confirm page reload';};</script><body><button onclick="console.log(eval(document.querySelector('textarea').value.replace('<div>', '\n').replace('</div>', '\n')))">run</button><br><textarea style="width:600px;height:400px"></textarea></body><script>document.querySelector('textarea').focus();</script>

data:text/html, <html><script>window.onbeforeunload = window.onunload = function(){return 'Confirm page reload';};</script><body><button onclick="console.log(eval(document.querySelector('textarea').value.replace('<div>', '\n').replace('</div>', '\n')))">run</button><br><textarea style="width:600px;height:400px"></textarea></body><script>document.querySelector('textarea').focus();</script>

It just outputs the result into console when you click run button. It’s simple and works. Because sometimes you just don’t need monsters like jsfiddle or jsbin.

Storybook for creating components library

It works with all popular frameworks like React, Angular, Vue, and others. https://github.com/storybooks/storybook

React, redux and redux-thunk with typescript

I tried it and it looks strange, verbose and painful. But if you want to try it, please take a look at: https://github.com/piotrwitek/react-redux-typescript-guide https://levelup.gitconnected.com/react-and-redux-with-typescript-da0c37537a79 (together with https://github.com/JonJam/react-redux-ts/tree/68e8cca4a6e6214b4acb030cf3fdb3321b636085/src)

Using npm registry from corporate network

In a company we have some kind of proxy that does not allow to install npm packages via npm or yarn. You can get rid of this problem using this addition to yarn add:

yarn add react-redux-form --registry="https://registry.npmjs.org"

1	yarn add react-redux-form --registry="https://registry.npmjs.org"

Or you can also replace global property with

npm config set registry https://registry.npmjs.org

1	npm config set registry https://registry.npmjs.org

https://stackoverflow.com/a/22390936/801426

Performance comparison table for javascript frameworks

http://www.stefankrause.net/js-frameworks-benchmark7/table.html Example results are as follows:

Execution context and activation object in details

There are many interesting articles both in Russian and English. You can start with this one — http://dmitrysoshnikov.com/ecmascript/javascript-the-core/#execution-context-stack. In Russian — http://dmitrysoshnikov.com/ecmascript/ru-javascript-the-core/#stek-kontekstov-ispolneniya The short summary Javascript runtime is synchronous and processes Execution Context Stack. It’s bottom Execution Context is global object as everything starts with this. When some function or eval is being called, runtime …

Multiple react applications on one page. Theory

Yes, it can be done. That’s how you render several react apps on one page:

Implementations of sort algorithms in javascript

Implementations of bubble, selection, merge, and quick sorts. https://gist.github.com/bullgare/0da3207aa55a200ce36837ff904962a2

Cool talk on js event loop and call stack

It’s junior-middle level, but animations are great. https://youtu.be/8aGhZQkoFbQ Here’s an article about almost the same but in more details about difference between tasks’ queue (timeouts) and microtasks’ queue (promises and DOM modifications). The main idea is that there are several queues that have different priorities. And microtasks are more important than tasks. https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/