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”

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);

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

UI usability solution I am especially proud of

February 4, 2016

Filed under: Design,Usability — Andrew @ 11:08 pm

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?

From Skeuomorph to Flat UI, evolution of one application

September 5, 2015

Filed under: Design,Sciter — Andrew @ 10:23 am

That’s Norton 360 of Symantec and its Sciter based UI in transition from 2007 to these days:

n360-0n360-1

n360-3n360-2

n360-4n360-5

They are updating UI and styles each year, some screenshots are not present.

Pixel Art at its best

July 12, 2015

Filed under: Design — Andrew @ 4:51 pm

Andrey Lyapichev ( Андрей Ляпичев ) AKA Weilard have started series of articles about Pixel Art on habrahabr.ru.
That’s about graphics in computer games, but not only. Composition, perspective, perspective simulation by color and contrast, etc.

Pixel Art

Part one, part two
That’s in Russian. If you cannot read Russian just look through images there to get an idea somehow.