Great write up. However I don't think most people need to care about the performance part. Going with what you find most maintainable and readable is much more important. I find it rare to traverse an array with thousands of items, and any sort of operation on the inside of the loop would probably eclipse any difference in the loop mechanics. Also the fastest iteration could change in future browser versions, depending on varying implementations - when running jsperf in different browsers I sometimes get 90% slower, and sometimes 20% slower, and identical performance in other test suites (benchmark.js). Now all that being said, I'm a sucker for micro optimization, and I love reading about it and trying out stuff. So thanks for a good post.

I agree with the readability, especially if things start evolving into something more complex. I will always favor readability over micro optimization (at least in the initial part of development). That being said, I still think the example is wrong, there's no calculations moved outside the loop, it's moved to a temporary variable. In both examples one multiplication and one addition is performed every loop iteration.

Some good generalized tips, however the example in "Optimize Loops" section seems to be off. The two loops seems identical, except for the extra square variable. Maybe the wrong snippets have been pasted into the example, or maybe I'm missing something obvious?

Great writeup. With my primary focus being on websites, I tend to use modulos for zebra stripes with an even/odd class. Although I've used it for circular functionality in slides a couple of times as well.

Looking forward to following the journey. I'm the primary maintainer of an inhouse client-side framework, and have many of the same philosophies. Especially the pluggable, unopinionated and "no suprises". I feel magic is the #1 enemy of a good framework, and if I can't follow a logical path of how things work I'm quickly on to the next. When starting out I was also very into performance and size of things, but as the framework expands I'm leaning more on making it maintainable than performant. I rarely work on a performance critical project, and the few times I do I have used the "pluggability" of our framework to switch out specific parts of the framework that has held back performance. Anyway, great project, and like I said looking forward to reading more

I love reading about naming conventions, especially when it's about the multiple-word identifiers (and I also got a soft spot for a good tabs vs space drama). This was a refreshing take about how to switch it up, usually these posts tend to be about ease of writing, reading and following agreed upon standards (which I think is always the most important point, be consistent and choose a convention to follow as a team). A minor note is the the ScreamingSnakeCase, should be SCREAMING_SNAKE_CASE. Thanks for a good read!

I have the same philosophy when it comes to bundlers and transpilers. With the browsers developer tools being so awesome a debugging (and prototyping) environment, I feel having a 1:1 with what I write and the devtools is very strong. I know source maps can mitigate some of this, but for me it's more of a hassle than a benefit. Anyway, great write up! I have linked to this post in my own recent post (shameless plug incoming) about documenting a callback: https://blog.birk-jensen.dk/documenting-a-callback-function-in-jsdoc.

Love the approach, I didn't know about the StorageEvent, so I dived in (maybe to deep). Looking into it, it seems this is exactly the intended use of the StorageEvent (https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event#specifications: "it is really a way for other pages on the domain using the storage to sync any changes that are made"). -- A peculiar thing is this only works for the localStorage, even though it should work for both local and session (https://html.spec.whatwg.org/multipage/indices.html#event-storage). The reason for this seems to be a catch-22, looking at the rules for the event: https://html.spec.whatwg.org/multipage/webstorage.html#storage-2: "Dispatches a storage event on Window objects holding an equivalent Storage object". meaning it only fires on other windows (tabs), and not the instance making the changes. The sessionStorage has a different instance for each open window (https://html.spec.whatwg.org/multipage/webstorage.html#introduction-15: "If the user had multiple windows opened on the site, each one would have its own individual copy of the session storage object."). So even if the event is fired on the sessionStorage, that exact instance isn't available in any other window, so there's no instance to dispatch to. I have not looked into any actual implementation here, so I don't know exactly what happens behind the curtain. -- Sorry for hijacking the comments, I just found it funny reading through the specs, and thought maybe others would appreciate the trivia. Thanks for a great post!

Oh this is awesome, it'll be so much easier to make custom filtered RSS feeds!

Could you include the version of your copyTextToClipboard you pasted into GPT, and maybe the GPT response. It would help get a sense of how GPT can be helpful.