search

BrandonArmand / Binari

Interactive code editor with a live binary tree visual designed to teach new developers the fundamentals of Data Structures.
https://binari.dev
MIT License
181 stars 113 forks source link

Cleanup warnings #53

Closed NKaty closed 4 years ago

NKaty commented 4 years ago

Fixed warnings in the terminal, Chrome console, Firefox console.

At present, several warnings are remaining in Firefox console for various reasons:

  1. Feature Policy: Skipping unsupported feature name “accelerometer”. (“autoplay”, “encrypted-media”...) The YouTube video causes the warning. There is no support for these features in Firefox (and in some other browsers too).
  2. MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. The YouTube video causes the warning. The script causing the warning is https://www.youtube-nocookie.com/s/player/8786a07b/player_ias.vflset/en_GB/base.js.
  3. Some cookies are misusing the recommended “sameSite“ attribute The YouTube video causes the warning. yotube-nocookie.com is not absolutely cookie-less. Their “remote_sid” cookies have incorrect sameSite and secure attributes.
  4. Use of the orientation sensor is deprecated. Use of the motion sensor is deprecated. The warnings come from p5 library. Their response to the reported issue: These are just warnings and should not cause any problem regarding its usage. In any case, this is not something we can fix or get around.
  5. This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning. The Parallax component causes the warning (setting css transform property on scroll). The Parallax component works fine for me, so I don't see the point to try to get rid of the warning.
  6. Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (441522 px). Occurrences of will-change over the budget will be ignored. The warning comes from Ace library. There is a similar reported issue in react-ace with a possible solution to get rid of the warning (but I don't see the point): 
    .ace_hidpi .ace_text-layer, .ace_hidpi .ace_gutter-layer, .ace_hidpi .ace_content, .ace_hidpi .ace_gutter {
will-change: auto !important;
}

In addition, some thoughts regarding the problem with Ace syntax highlighting (worker-javascript.js issue): The problem is fixed and syntax highlighting works now. But the solution is not pretty, as it includes disabling several eslint rules (in the Playground component). There is an alternative solution:

import "ace-builds";
import "ace-builds/webpack-resolver";

But it leads to an increase in compile time, and adds hundreds of files to the build directory (over 10MB). So I decided in favour of the less pretty but more efficient solution for now.

BrandonArmand commented 4 years ago

Nice changes, and thanks for the very thorough details. I always appreciate your changes (: