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

March 24, 2017

Filed under: Design,Web Application Techologies — Andrew @ 9:57 am

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”


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 …

October 17, 2016

Filed under: How-to,Philosophy — Andrew @ 11:54 am

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.

“Expert’s pyramid”

October 10, 2016

Filed under: Philosophy,Web Application Techologies — Andrew @ 11:15 am

Does front end developer need to know anything except of __HIS_FAVORITE_FRAMEWORK_HERE__ ?

From Dmitri’s Pavlutin “The path of software development craftsmanship”

Scalable Web Aplications

May 28, 2016

Filed under: HTML and CSS,Philosophy,Web Application Techologies — Andrew @ 3:40 pm

Nicholas Zakas is talking about basic principles of scalable [Web] application architectures:

While this talk was made in 2013 it is still 100% applicable to modern Web and Sciter (desktop) applications.

Web Frameworks: React vs Vue

Filed under: Philosophy,Web Application Techologies — Andrew @ 10:25 am

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

May 12, 2016

Filed under: Design,HTML and CSS,Web Application Techologies — Andrew @ 8:20 am

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

Next Page »