Epic discussion: VS Code Uses 13% CPU When Idle Due to Blinking Cursor Rendering

VS Code Uses 13% CPU When Idle Due to Blinking Cursor Rendering

Discussions: Reddit and Hacker News

Couple of citations:

Assuming 1 million users of VS Code This blinking cursor will waste $3 million per year in electricity costs, and output 32,000 tons of c02 per year.

2150: “Grandpa, why did the ocean’s dry up?”
“well sonny, long ago, Microsoft didn’t optimize their code for a code editor’s cursor and pushed earth’s climate over the edge”

TL;DR:

All this is about Microsoft Visual Code editor that is Electron application — Chromium based.

They blink cursor by this CSS declaration:

@keyframes monaco-cursor-blink {
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.cursor-blink {
    animation: monaco-cursor-blink 1s step-start 0s infinite;
}

Problems with this solution:

  • In chromium / webkit this animation runs with animation frame rate — each 16ms — 60 FPS.
  • As Chromium (WebKit with Skia backend) uses mostly CPU rasterization than simple task of filling 1px rectangle eats CPU (and so drains batteries). On each frame rate whole window gets updated.

In principle all this can be solved by something simple as:

setTimer(function() { caret.toggleClass("visible") }, 1000);

When you want to ask for help in programming …

then use the following template:

  • Explain details that you see as much as possible. Environment, problem, etc.
  • Explain exactly what you want – what you think should be happening.
  • Explain what is actually happening.
  • Explain why you think it should be working differently.

By walking through all these steps you may find answer by yourself. In any case this will greatly increase a chance of getting adequate answer fast.

Web Frameworks: React vs Vue

Practical investigation on effectiveness of Virtual DOM (React) updates versus direct DOM updates (Vue).

Stats of list update having 100 items.
Stats of list update having 100 items.

Clearly React takes significantly more CPU time for the task of updating 100 items list.

That proves once again that there is no silver bullet in Web Front End design. Each task has its own optimal framework/architecture.
“Ideal framework” should allow to use multiple paradigms – list-of-items view should use virtual list, it could be one-way bound with data [model] and item-details may or may not be data bound – depends on its structure.

What if just start from our old friend jQuery with its system of plugins and/or components/modules architecture of Twitter’s Flight.
Where you can add view routing, data bound lists and other plugins of your choice? Only when and where they are needed …

Is it close to that optimal, flexible and stable architecture web applications we are dreaming of?

Maintainable CSS

I have found Maintainable CSS site exceptionally useful for designing maintainable CSS systems.

Modular and encapsulated: Styles don’t bleed or cascade without your permission.

Any design requirements: Completely flexible to your needs.

No tooling required: But you can use tooling if you want to.

Easy to learn: Read the guides and see.

Any size project: Whatever size project you have, MaintainableCSS will help.

Upgrade in your own time: You can start applying the approach today, bit by bit. You don’t need to upgrade the whole

Russian Roulette game, .JS style.

Disclaimer: the game is quite dangerous and may lead to alcoholism of participants even after first game. Play responsibly!

Idea of the game:

Players, in their turn, name random English word. To this word they add “JS” or “.JS” suffix and go google for it.
If google will give JS library or framework with that name – you won and drink one Vodka shot.

You’ll be surprised… and read disclaimer above.

Studies show that a TODO list is the most complex JavaScript app you can build before a newer, better framework is invented.

Allen Pike: “A JS framework on every table”

UI usability solution I am especially proud of

25 or so years ago we were designing one accounting application that required intensive input of numbers by operators.
That was in Russia at the time when personal computers were just appearing in offices massively.

Amount of numeric data that operators needed to input was enormous and as in any financial institution the requirement for correct input was very high.

Operators were quite professional and were doing very fast blind input by hands at the time when their eyes were focused on paper sheets with data.

In order to help them to verify their input I invented and implemented “musical” verification. When focus lefts numeric field, the application is playing melody where each digit has its own tone. I was surprises how effective it happened to be. At the end of first day operators were able to determine at least number of digits filled and after some time some of girls were even able to tell exact number by only hearing the melody.

Cool, eh?

SCITER.COM

After 6 years Sciter Engine finally got its own home : sciter.com.

The site is not complete though, I am still working on content, documentation in particular. The plan is to combine in one place stuff that was spread across many sites and blog articles.

Forum users are advised to re-register on Sciter’s new forum at sciter.com/forums/ hope you will find it more comfortable.

Note #1: we have changed Sciter prices.

Note #2: Sciter’s versions RSS channel is here, please update your links.