Overhaul

[Rudxain]

• Fixed inconsistent whitespace and indentation
• Added ESLint
• Refactoring
• Edited and added a few comments, also JSdoc type annotations
• Added "placeholder hint" for new users
• Made OOP class to abstract command history operations, including a feature that fixes "user-generated memory-leaks"
• Added automatic 🌙dark-theme support
• Using Sans-Serif font instead of default
• Declared all variables using let & const
• Converted fns to arrow syntax
• Replaced all querySelector calls by getElementById. This is better for readability (I guess?). However, performance is more unpredictable (it depends on some factors), and there's an important difference detail between both
• Fixes Command doesn't run if it's repeated #10
• Made UI more accessible to mobile users

[GoToLoop]

Declared all local variables using let.

When we know a variable isn't supposed to be re-assigned we should declare it w/ const instead:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

var drops = Array(n);

The constructor Array() creates a sparse array which is slower than a regular dense 1:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays

There's a belief that invoking method fill() might turn a sparse array into a dense 1:
const drops = Array(n).fill();
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

[Rudxain]

We should declare it w/ const instead

That's exactly what I was thinking, but I didn't want to be "intrusive". I'll replace to const when possible. Also, should the examples use let & const too? Or should I leave them intact with var?

The constructor Array() creates a sparse array which is slower than a regular dense.

That's true, but it doesn't matter if new is used or not, the result is exactly the same.

There's a belief that invoking method fill() might turn a sparse array into a dense

That's not a valid belief, because it's actually a fact. Array(len).fill(0) always returns a dense array (only from the POV of the caller). However, the internal implementation is another story: The array might still be sparse, until the engine realizes it's actually dense. Or, depending on engine, the array might get "stuck" as sparse for the entire runtime, until it gets replaced by a dense array object. I was thinking of using TypedArrays, but they have compatibility issues. A better solution is to manually create an empty array using the literal [], and then push values until it has the desired size

[Rudxain]

@GoToLoop Done. I edited the main comment to reflect the changes

[Rudxain]

Lol, I realized the Array(n) was totally unnecessary, I replaced it by []

[GoToLoop]

Or should I leave them intact with var?

If I can't change var to const I don't bother to change it to let. 😛

, but it doesn't matter if new is used or not, the result is exactly the same.

Yea, that Array(arrayLength) constructor call signature is sparse w/ or w/o keyword new: 😞
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array

The array might still be sparse, until the engine realizes it's actually dense.

My belief is that by now all modern JS engines should be smart enough to internally convert a sparse array to a dense 1 after a fill() method call. 🙏
const drops = Array(n).fill();

I was thinking of using TypedArrays, but they have compatibility issues.

Well, drops[] is an array of objects; therefore it can't be a typed array regardless. 🤷‍♂️

... create an empty array using the literal [], and then push() values until it has the desired size.

You've done that now. However, it's still adding objects using the [] notation instead of push()! 🤔

This is my push() take on init_drops(): 💧

function init_drops(n) {
   const drops = [];

   n = ~~Math.abs(n);
   
   while (n--)  drops.push({
      x: random(-150, 150),
      y: random(-150, 150),

      velocityX: random(-6, 6),
      velocityY: random(-6, 6),

      size: random(20, 300),
      width: random(1, 40),

      r: random(0, 255),
      g: random(0, 255),
      b: random(0, 255),
      a: Math.random()
   });

   return drops;
}

[Rudxain]

My belief is that by now all modern JS engines should be smart enough to internally convert a sparse array to a dense 1 after a fill() method call. 🙏 const drops = Array(n).fill();

I agree and I also hope that. There seems to be a lot of push (pun intended lol) for functional & declarative programming constructs optimization

Well, drops[] is an array of objects; therefore it can't be a typed array regardless. 🤷‍♂️

I focused so much on turtle.js that I completely overlooked that fact lmao. Thank you for making me notice.

... create an empty array using the literal [], and then push() values until it has the desired size.

You've done that now. However, it's still adding objects using the [] notation instead of push()! 🤔

True lol. I saw the i and the thought of using push didn't cross my mind, or maybe it did (subconsciously) but I was too lazy to realize and accept it 🤔

About your code: it looks so clean! I think I'll add it now

[Rudxain]

I'm still kinda hesitant of refactoring all examples to use let & const. I'll wait for approval by the owner

[Rudxain]

I think there should be a feature to allow users to manually force the code to remove old history cmds. This is good because it improves performance by avoiding automatic garbage collection, and users would no longer need to reload the page to lose their entire history.

A related feature would be to allow direct access to certain history entries, instead of sequential access. It seems simple to implement, just add a button that "teleports" back a number of entries specified in an input text-box.

I'll try implementing both later (maybe some hours or days), when I have enough time.

EDIT:
I realized those 2 features may be useless. Users shouldn't be given the cognitive load of manually deciding when to clear a slice of the history and how many entries to remove. That just adds unnecessary complexity to the site, and redirects the focus of some users to the wrong place. I haven't tested the code, but the hi-level GC should be fast enough that nobody would notice it exists (only if the browser has a dual-ended array to optimize shift to be as fast as pop)

Direct access is a feature that not even browser dev consoles, nor linux terminals have, and nobody has complained. I don't see any reason to add it

[bjpop]

Hi @Rudxain and @GoToLoop. Thank you for working on this code. I see a lot of activity here. Should I start looking at the pull request or should I wait until you've had more time?

[Rudxain]

Thank you for working on this code. I see a lot of activity here. Should I start looking at the pull request or should I wait until you've had more time?

You're welcome. I think I might need some more time to re-review some stuff. And I have a question about the examples directory: should all declarations use var? Or is it okay to replace by let & const (where possible)?

I replaced those declarations only in the main file because I saw a few let used there, but I didn't saw any let used in any of the examples, so I leave it untouched just-in-case

[Rudxain]

@bjpop the PR is ready. I don't know if @GoToLoop has something to say.

I kept using var for the examples, JIC. I also found that spiral accidentally declared globals because it assigned directly

[Rudxain]

Wait! I want to try to implement text rotation in write, I don't know if I can, but maybe it can happen.

I don't know if that should be a separate PR, or if I should do it in this PR.

Update: I gave up lol

[Rudxain]

I guess this is ready now 🤷‍♂️. I'm awaiting feedback

[bjpop]

Hi again Hi @Rudxain and @GoToLoop.

Is this PR ready for me to merge?

Is there a summary of all the main things that have been done?

Thanks heaps for all your work on this.

[Rudxain]

Hi

Is there a summary of all the main things that have been done?

I decided to edit the "main" comment everytime a "major" commit updates something. So everything should be there, unless I forgot something

Thanks heaps for all your work on this.

You're welcome!

[bjpop]

Thanks heaps @Rudxain and @GoToLoop for your work on this!