comparing the new-unfinished & old version (any missing code to migrate?)

[ImprovedTube]

1. Sep-2021 : 105kb JS + 22kb CSS

2. Now it is more CSS, less JS. Yet unfinished. This goes in hand with all known bugs:

( what we use live is from ImprovedTube 3.945 August 2022) - None of the bugs appeared before. (+ 2.1. just removed an old color-picker code, without reviewing changes: https://github.com/code-for-charity/SATUS/commit/f41670182aa43a54720100e15684f06cd7692826 )

8 bugs introduced in the live version: https://github.com/code-for-charity/SATUS/issues/3

• https://github.com/code-for-charity/ImprovedTube-for-YouTube/issues/1446 + https://github.com/code-for-charity/ImprovedTube-for-YouTube/issues/1171

history manager has a version from May 2021 with the mark up working! ( & ?)</h3> <ul> <li>Yet only 72 & 28 kb <a rel="noreferrer nofollow" target="_blank" href="https://github.com/code-charity/History-Manager-with-indexedDB/tree/main/assets/satus">https://github.com/code-charity/History-Manager-with-indexedDB/tree/main/assets/satus</a> so we just got to compare this too. <em>( text markup also works in <a rel="noreferrer nofollow" target="_blank" href="https://github.com/code-charity/ultimate-REGEX-extension/blob/master/satus.js">https://github.com/code-charity/ultimate-REGEX-extension/blob/master/satus.js</a> from september 2021, but there it is minified ...)</em></li> </ul> <hr /> <h3>More:</h3> <h4><a rel="noreferrer nofollow" target="_blank" href="https://github.com/code-for-charity/SATUS/files/11045244/satus.July18.from.ImprovedTube.Beta.3.1001.zip">satus July18 from ImprovedTube Beta 3.1001.zip</a></h4> <ul> <li>possible this has a relevant/most recent edit, if we compare</li> </ul> <hr /> <h3>( <em>Inbetween, still almost the same as current / 2023):</em></h3> <h4>( 2. <em>Jan-2022 87kb JS + 37kb CSS</em> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/code-for-charity/SATUS/files/11045239/Jan2022.zip">Jan2022.zip</a> )</h4> <p><br> Finally: [oct2022 but again MINIFIED unfortunately.zip] (<a rel="noreferrer nofollow" target="_blank" href="https://github.com/code-for-charity/SATUS/files/11045240/oct2022.but.MINIFIED.zip">https://github.com/code-for-charity/SATUS/files/11045240/oct2022.but.MINIFIED.zip</a>) - <em>possibly</em> could also have any good edit, but yet we need an automated way to compared, despite minified. how?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raszpl"><img src="https://avatars.githubusercontent.com/u/2623127?v=4" />raszpl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>holy 100KB batman some of the stuff in satus is redundant, like <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2879">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2879</a> <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2861">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2861</a> <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L3056">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L3056</a> <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2870">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2870</a> <a href="https://github.com/search?q=repo%3Acode-charity%2Fyoutube+camelize+&type=code">https://github.com/search?q=repo%3Acode-charity%2Fyoutube+camelize+&type=code</a> why even camelize anything?</p> <p>or unneeded <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2861">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2861</a> <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL2926C22-L2926C22">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL2926C22-L2926C22</a> <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2907">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2907</a> <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL3086C22-L3086C22">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL3086C22-L3086C22</a> <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL3065C21-L3065C21">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL3065C21-L3065C21</a></p> <p>etc etc</p> <p>missing mime types YT is specifically testing for when loading player <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2966">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2966</a> AV1 "video/mp4; codecs=av01.0.05M.08" H.264 "video/mp4; codecs="avc1.640028"; framerate=30"</p> <pre><code>How to decode H.264 name from numbers: Profile Level Constrained Baseline 2.1 avc1.42c015 Constrained Baseline 3.0 avc1.42c01e Main 3.0 avc1.4d401e Main 3.1 avc1.4d401f High 3.0 avc1.64001e High 3.1 avc1.64001f High 3.2 avc1.640020 High 4.0 avc1.640028</code></pre> <p>audio <a href="https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2939">https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2939</a> AAC low complexity (AAC-LC) "audio/mp4; codecs="mp4a.40.2"" opus "audio/webm; codecs="opus"" "audio/webm; codecs=\"opus\"; channels=2" "audio/webm; codecs=\"opus\"; channels=99"</p> <p>a lot of fat to trim and stuff to update. After reading the code I dont see ability to manipulate settings by other settings :( So its impossible to program one button to automatically switch another option off :(. Ill look into how easy it would be to add this functionality (maybe needed for overriding codecs).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raszpl"><img src="https://avatars.githubusercontent.com/u/2623127?v=4" />raszpl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Two days of staring at this code and its starting to make sense :) Its actually quite logical and pleasant to work with.</p> <blockquote> <p>I dont see ability to manipulate settings by other settings</p> </blockquote> <p>I found an indirect way by sending events, calling functions directly or directly manipulating .dataset.value/.storage.value</p> <p>I also found few bugs:</p> <ol> <li> <p><a href="https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L1177">https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L1177</a></p> <pre><code> this.modalProvider.dispatchEvent(new CustomEvent('cancel')); this.modalProvider.close();</code></pre> <p>this doesnt seem to work, looks like despite settimeout element is removed() before Event has a chance to reach it. I already have a patch for this almost ready.</p> </li> <li> <p>Too many verbose click listeners. Modal dialog (those with ok/cancel) has 3 simultaneous ones with two bubbling events per click screwing things up. Im testing the fix.</p> </li> <li> <p><a href="https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L491">https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L491</a></p> <pre><code>satus.events.trigger = function(type, data) { var handlers = this.data[type]; if (handlers) { for (var i = 0, l = handlers.length; i < l; i++) { try {handlers[i](data);} catch(err){console.log(err);} } } };</code></pre> <p>the reason for try/catch here is a bug where this function is being called with type = storage-set and data=unknown here <a href="https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#LL1004C1-L1004C45">https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#LL1004C1-L1004C45</a> <code>try {satus.events.trigger('storage-set');}</code> and this.data actually having bogus undefined storage-set element. Fix pending. EDIT: Ha, found it <a href="https://github.com/code-charity/youtube/blob/94bd68583408e5b20dba0315a9edefeb168723d2/menu/index.js#L49">https://github.com/code-charity/youtube/blob/94bd68583408e5b20dba0315a9edefeb168723d2/menu/index.js#L49</a> <code>satus.events.on('storage-set', extension.attributes);</code> this is never used anywhere and causes this problem together with satus.events.trigger('storage-set'); I think maybe someone was in the process of implementing new feature and didnt finish? </p> </li> <li> <p><a href="https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L968">https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L968</a> satus.storage.set overwrites whole config (chrome.storage.local.set) even if only one option is being changed. Not really a bug, but a weird undesirable action.</p> </li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raszpl"><img src="https://avatars.githubusercontent.com/u/2623127?v=4" />raszpl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>bug 3 fix <a href="https://github.com/code-charity/youtube/pull/1676">https://github.com/code-charity/youtube/pull/1676</a> Still no idea why this functionality is there (why call extension.attributes() every time some option is changed?) :) but at least now its working as it was intended.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>dont see ability to manipulate settings by other settings :( </p> </blockquote> <p><del>check </del> (yes, only this: <a href="https://github.com/code-charity/youtube/commit/76c91d43875737de1e2f6802b102b3ee681d7ff5">https://github.com/code-charity/youtube/commit/76c91d43875737de1e2f6802b102b3ee681d7ff5</a> )</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>why camelize </p> </blockquote> <p>just answered in <a href="https://github.com/code-charity/youtube/issues/1634">#1634</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I think maybe someone was in the process of implementing new feature and didnt finish?</p> </blockquote> <p>mostlikely, includes some unfinished plans worth noticing. Dont know if/when the architect will be back, all we have is public. Please make comments in code.<br /> Your effort can be our documentation. (Somebody can help also turn it into wiki pages etc. as said.)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raszpl"><img src="https://avatars.githubusercontent.com/u/2623127?v=4" />raszpl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>why camelize</p> </blockquote> <p>just answered in <a href="https://github.com/code-charity/youtube/issues/1634">#1634</a></p> </blockquote> <p>If you really want smaller js files (meaningless in case of menu for an extension) you can always minify the release package. Mixing naming conventions just makes code less readable. It adds noise for no gain whatsoever. This code doesnt live in a hot loop of some performance sensitive function, its extension menu - gets executed only when user wants to change options.</p> <blockquote> <blockquote> <p>dont see ability to manipulate settings by other settings :(</p> </blockquote> <p>check <a href="https://github.com/code-charity/youtube/commit/76c91d43875737de1e2f6802b102b3ee681d7ff5">code-charity/youtube@76c91d4</a></p> </blockquote> <p>1 "need 1ms since JS executes faster than firefox storage"</p> <p>Patch comment is not entirely accurate, settimeout is not a proper fix for race conditions. What is happening here is using async storage function (chrome.storage.local.set in onclick event) and expecting it to take immediate action (satus.storage.get('transcript')). settimeout will help in that case, but not the way one might expect. Its not that you need to wait some magic number of milliseconds for slow storage, its emptying event loop so async functions can complete What the heck is the event loop anyway? | Philip Roberts | JSConf EU <a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ">https://www.youtube.com/watch?v=8aGhZQkoFbQ</a></p> <p>The problem here is how Satus gui library handles clicking on elements in separate event. Here Appearance/Sidebar/Transcript element has two onclick handlers simultaneously (what I mentioned earlier as "2. Too many verbose click listeners") One is <a href="https://github.com/code-charity/youtube/blob/76c91d43875737de1e2f6802b102b3ee681d7ff5/menu/skeleton-parts/appearance.js#L814">https://github.com/code-charity/youtube/blob/76c91d43875737de1e2f6802b102b3ee681d7ff5/menu/skeleton-parts/appearance.js#L814</a> and the other <a href="https://github.com/code-charity/youtube/blob/76c91d43875737de1e2f6802b102b3ee681d7ff5/js%26css/satus.js#L2476">https://github.com/code-charity/youtube/blob/76c91d43875737de1e2f6802b102b3ee681d7ff5/js%26css/satus.js#L2476</a></p> <p>Im thinking on ways to rework whole thing into something less convoluted.</p> <p>2 nextSibling.click() is fragile code. Its meant to target "To the side! (No page margin)" and will break next time someone decides to move options around. Better to call by name.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>a lot of fat to trim </p> </blockquote> <p>yes, besides it could be an unlimited ordered collection, when a build script could generally include removal of unused functions. </p> <p>One original thought/reason for Satus was to keep different extension features & GUI maintainable efficiently. & keep moving code from all extensions to Satus. ( + then could add a template extension here with everything) For example it makes no sense that Frame by frame & Looper are standalone extensions, gotta copy them into ImprovedTube too with (optional) global permission.</p> <p>Thank you again @raszpl. Looking forward / excited. You probably already solved something else pending since <a href="https://github.com/code-charity/youtube/issues/1439">#1439</a> 🤩</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>If you really want smaller js files</p> </blockquote> <p>sorry, the cause was human eyes, not cpu. <a href="https://github.com/code-charity/youtube/issues/1634#issuecomment-1546827787">See here</a>. (The idea there was just to make collaborated code as short as possible. To reduce our (contributor's) time it takes to read it. Increasing cognitive efficency, decreasing overhead. (Underscores are considered overhead by a majority of JS developers. (Yet not for translators maybe. Thats why one <em>could maybe</em> reason to have both. But we dont need to )</p> <blockquote> <p>Patch comment is not entirely accurate,</p> </blockquote> <p>👍 good info. (just a hotfix & the intentional UX advantage (250ms delay) could rather be animated.)</p> <blockquote> <p>Im thinking on ways to rework whole thing into something less convoluted.</p> </blockquote> <p>🥳🎉 *hyperventilates*</p> <blockquote> <p>2 nextSibling.click() is fragile code. Its meant to target "To the side! (No page margin)" and will break next time someone decides to move options around. Better to call by name.</p> </blockquote> <p>👍 just to make sure you saw the current way this before possibly implementing it well. (Sometimes instead of "check" i should say "btw, just incase...)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>"shorter code for human readers"</p> </blockquote> <p>menu </p> </blockquote> <p>(we agree)</p> <p>the following is bloated to read&remember (3 different names) (in case of human editors & not generating the file somehow)</p> <pre><code>autopause_when_switching_tabs: { component: 'switch', text: 'autopauseWhenSwitchingTabs', storage: 'player_autopause_when_switching_tabs'</code></pre> <p>Same information, just shortest & logically ordered <code>switch:'PauseWhileInAnotherTab',</code></p> <p>Optionally another 1 character shorter&tidier for humans (if adhering/phrasing a html UI-templating-Syntax ) <code><Switch PauseWhileInAnotherTab></code> ? ( especially incase of: <code><Switch PauseWhileInAnotherTab disabledBy="PauseWhileA2ndPlayerStarts"></code> Etc... )</p> <p>(- And whle considering that we can assess/define why&how Satus might potentially be used combined with the predominant JS libs ..)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raszpl"><img src="https://avatars.githubusercontent.com/u/2623127?v=4" />raszpl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>(Underscores are considered overhead by a majority of JS developers.) answer based on google trends!?!?!</p> </blockquote> <p>Everything is overhead when performance is considered, but here we shouldnt care about absolute optimal code speed because this is not a critical function of this code. This code already works same way on 1GHz Atom laptop as it does on 4GHz desktop to human perception. No need for this obsession with removing characters from function names while at the same time you ship 0.5MB of fonts :) (which are absolutely fine btw).</p> <blockquote> <p>the following is bloated to read&remember</p> </blockquote> <p>Function names and labels <strong>arent bloat</strong>, there is no point making them smaller for the sake of making them smaller. On the other hand using two naming conventions at the same time is iffy. Finally mixing two naming conventions is bad <a href="https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/menu/skeleton-parts/appearance.js#L867">https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/menu/skeleton-parts/appearance.js#L867</a> compactSpacing satus.storage.data.compactSpacing Now we cant just fix rename the storage variable and forget about it, people using this option already had it stored under compactSpacing :) fix for section name (includes reformatting) <a href="https://github.com/code-charity/youtube/pull/1679">https://github.com/code-charity/youtube/pull/1679</a></p> <blockquote> <pre><code>autopause_when_switching_tabs: { component: 'switch', text: 'autopauseWhenSwitchingTabs', storage: 'player_autopause_when_switching_tabs'</code></pre> <p>Same information, just shortest & logically ordered <code>switch:'PauseWhileInAnotherTab',</code></p> </blockquote> <ol> <li> <p>autopause_when_switching_tabs is GUI section name</p> </li> <li> <p>text: 'autopauseWhenSwitchingTabs' is localization text name. This could be optimized by renaming autopauseWhenSwitchingTabs to autopause_when_switching_tabs in all locale files, and then we can delete text: 'autopauseWhenSwitchingTabs' line.</p> </li> <li> <p>storage: 'player_autopause_when_switching_tabs' finally this is needed because of backward compatibility, Im guessing autopause_when_switching_tabs used to be called player_autopause_when_switching_tabs :]. Hell, we could rewind back time and just go back to </p> <pre><code>player_autopause_when_switching_tabs: { component: 'switch',</code></pre> <p>with GUI section name matching storage variable name and being used directly as lookup to locale.json. This might require some code changes to <a href="https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/js%26css/satus.js#LL802C12-L802C12">https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/js%26css/satus.js#LL802C12-L802C12</a></p> </li> </ol> <p>here is one example where someone renamed GUI section without reason <a href="https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/menu/skeleton-parts/appearance.js#L215">https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/menu/skeleton-parts/appearance.js#L215</a> all this change did was the need to add another line <code>storage: "player_hide_controls",</code></p> <hr /> <p>btw what are tags ? <a href="https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/menu/skeleton-parts/appearance.js#L610">https://github.com/code-charity/youtube/blob/ee0de83adb8bc5b5385c9e0ae298a1595648575f/menu/skeleton-parts/appearance.js#L610</a> this looks like text that should display in a tooltip when user hovers mouse over option, but its not implemented anywhere. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Hi @raszpl, tags are for search / synonyms <a href="https://github.com/code-charity/youtube/discussions/748">#748</a> 1.1.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>cpu </p> </blockquote> <p>Sorry, while the thread #1211 about codec & dom is pinned, #1634 wasn't meant about computers, only humans. </p> <blockquote> <p>no point </p> </blockquote> <p>Humans count/quantify work. If a project will be X% shorter, without decreasing readbility, then editors will be Y% faster & happier. Even 1% matters with many users (+ planning for years, welcoming contributors, ...) </p> <blockquote> <blockquote> <p>camelCase </p> </blockquote> </blockquote> <p>No opinion, didnt start this in our code nor the world! Maybe rather read the idea /concept of deleting line breaks for human readers in permanent/immutable code. (Might be more inspiring - that's <strong>just in case you'd like</strong> any of #1634 😊 otherwise can ignore that issue-thread)</p> <blockquote> <p>camelCase</p> </blockquote> <p>just has the point of being distiguishable (nearly equally?) <code>aBC</code> vs. <code>a_b_c</code> , while understore is bigger to read (& type)</p> <ul> <li>Names make sense often to look like one unit (?) (~no spaces) (while underscore looks different visually more like a.b )</li> </ul> <blockquote> <p>google trends ?!?</p> </blockquote> <p>The mentioned point was, the average developer on github. (+the global trend, as around 43% of code on github seems to use camelCase but it is increasing since 2004 in global search interest too. We can repeat & filter GitHub by recent years, so that we assumably see camelCase as the bigger half in all recent code(>50%). (While in javascript it is around 94% allover already. Which is ~30% of all code and also more considering recent years & NPMs )</p> <blockquote> <blockquote> <p>3 names</p> </blockquote> </blockquote> <p>Consider the shortest versions i mentioned - Only these chars are required, when to be written by humans efficiently (+ most of all GUI templates /html start with mentioning GUI element types before their labels=values)</p> <p>(<strong>Not</strong> saying we should bother before important bugs 😅 & more urgent /interesting things. Just noting down this topic at all, here in this repo. )</p> <p>**2. Currently we only have names with underscore for values in GUI, this also appear when there is no translation. Since Users might be less used to camelCase. - i also thought of removing that /keeping one naming convention only. (We can always improve translation & locales later still. While our project might outgrow the rigid extension locales structure anytime like this: <a href="https://github.com/code-charity/youtube/pull/1539#issuecomment-1384677276">https://github.com/code-charity/youtube/pull/1539#issuecomment-1384677276</a> </p> <blockquote> <p>backwards compatibility </p> </blockquote> <p>(Can rename old storage names @update-installation in background.js)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raszpl"><img src="https://avatars.githubusercontent.com/u/2623127?v=4" />raszpl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Humans count/quantify work. If a project will be X% shorter, without decreasing readbility, then editors will be Y% faster & happier. </p> </blockquote> <p>Do you have any links/references to literature on this subject? Im not familiar with the concept. Iv been taught to make code readable and fast, not smaller by reducing size of variables.</p> <hr /> <p>Why is checkbox/switch .dataset.value a string ('true') while .storage.value a boolean? both represent same data and both should be boolean.</p> <hr /> <p>What is the relationship between</p> <ol> <li>Auto-pause while I'm not in the tab</li> <li>Pause while I watch a 2nd video</li> <li>autoPip</li> </ol> <p>I see enabling 1 will disable 2, enabling 2 will disable 1, but enabling 3 will disable 1 and enable 2?? I dont understand :) I most likely got the logic wrong in <a href="https://github.com/code-charity/youtube/pull/1681">https://github.com/code-charity/youtube/pull/1681</a>, but I reworked it so in no longer relies on previousSibling/nextSibling, now even moving options around wont break, and its clearer what is being changed by name. It should be trivial to set autoPip up in the way its supposed to interact.</p> <hr /> <p>optimize_codec_for_hardware_acceleration needs a list of GPUs with hardware video acceleration capabilities.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <blockquote> <p>consistency</p> </blockquote> </blockquote> </blockquote> <p>(As of now our code is *mostly using camelCase which is popular among [JS-]developers) (except for the GUI values, which might appear to users - if not yet translated) </p> <blockquote> <blockquote> <p>"Minification for Humans"</p> </blockquote> </blockquote> <p>Just a big topic yet (should be a discussion-thread, not an issue) Deleting line breaks reduces readability (until horizontalScrolling - pageLeft & pageRight are established) Besides <em> correctly predicting </em> what lines won't ever be edited will mean less scroll_height for free. Thus more readable, because a lot of scrollHeight is lenghty to read, not efficient, not fun, less readable,.</p> <blockquote> <p>fast</p> </blockquote> <p>If #1211 is done well, we might save the average user 3 minutes + $0.2 in electricity per year. just relevant on scale (+ the project is growing). Might also be able to save them some seconds per year if we werent bound to JS.</p> <blockquote> <p>reference ... readable ... not small</p> </blockquote> <p>mmm 🤔 - <code>small</code> & <code>readable</code> inevitably correlate. Together they are: "concise" ( Code should be editable_expandable_enhancable, no? ) ( While what should be pretty readable(+prouncable) is: Song lyrics, just like stories for kids & poems.) </p> <p>"editable is the new readable" (- this curriculum literature doesn't seem to be written yet (zero search results!!) - we'll have to start writing it.) ( justification for our PhD-topic: <a href="https://trends.google.com/trends/explore?date=all&q=editable,readable,expandable,enhanceable">https://trends.google.com/trends/explore?date=all&q=editable,readable,expandable,enhanceable</a> )</p> <p>White spaces are "cheap readablity" - at the expense of time. One word per line is always very_readable<br /> (at the expense of taking several times longer to read/scroll the whole & probably even losing context.) - (Longer_but_not_easier takes more time = Less_readable ) (Shorter_but_not_harder takes less time = More_readable ) Thus more_readable code is a bit of an oxymoron / paradox. Because more_readable usually also means less_readable. "More_readable" is convicing if it it takes every reader less time to read. Else it might be questionably overdone - or personal preference/taste. If it is taste, then we might want to chose personally, since possibly our style and thoughs might include more personal things (there might be types of programmers) or else, as a public project we could adjust to the most common way, or the growing one, which might be for a reason.</p> <p>One more test: According to this camelCase makes ~<code>12/13</code> in JS code </p> <img width="598" alt="the case of camelCase" src="https://github.com/code-charity/SATUS/assets/25022245/ff15e1af-7c10-4198-a21e-9db5039b49b0"> <img width="568" alt="the case of camelCase" src="https://github.com/code-charity/SATUS/assets/25022245/dd46f1f3-be1b-4d13-ac0d-336180adbd31"> <p>& <code>4/5</code> overall:</p> <img width="538" alt="the case of camelCase" src="https://github.com/code-charity/SATUS/assets/25022245/d3d9da87-3e62-487f-8ef7-31920d806573"> <img width="504" alt="the case of camelCase" src="https://github.com/code-charity/SATUS/assets/25022245/c377c472-cc02-4ae0-b389-fc8d17daa373"> <p>Also, kinda predictably we appear first here: </p> <img width="411" alt="the case of camelCase" src="https://github.com/code-charity/SATUS/assets/25022245/dce295f3-5351-4431-a4e9-597e131e8b0e"> <p>(where camelCase even is >82% overall:)</p> <img width="186" alt="the case of camelCase" src="https://github.com/code-charity/SATUS/assets/25022245/7a266a23-ccb7-47f9-b28d-c06f97d366e5"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Why is checkbox/switch .dataset.value a string ('true') while .storage.value a boolean? both represent same data and both should be boolean.</p> </blockquote> <p>Dont know!!</p> <p>BTW here is a slightly related Brainstorming: <a href="https://github.com/code-charity/youtube/issues/1685">https://github.com/code-charity/youtube/issues/1685</a></p> <hr /> <p>.. also since you analysed shortcuts issues earlier! :D ( <a href="https://github.com/code-charity/youtube/issues/1565">https://github.com/code-charity/youtube/issues/1565</a> - just sharing my latest thought-process for the project - hopefully not flooding you, but just adding some interesting /innovative perspective. extra motivation. Hopefully we can share some work once /based on special skills/experience (mine isn't JS 🤫😆just yet).</p> <p>...</p> <hr /> <blockquote> <p>optimize_codec_for_hardware_acceleration needs a list of GPUs with hardware video acceleration capabilities.</p> </blockquote> <p>Yay, let's go</p> <hr /> <blockquote> <p>What is the relationship between</p> <p>Auto-pause while I'm not in the tab Pause while I watch a 2nd video autoPip I see enabling 1 will disable 2, enabling 2 will disable 1, but enabling 3 will disable 1 and enable 2?? I dont understand :) I most likely got the logic wrong in <a href="https://github.com/code-charity/youtube/pull/1681">https://github.com/code-charity/youtube/pull/1681</a>, but I reworked it so in no longer relies on previousSibling/nextSibling, now even moving options around wont break, and its clearer what is being changed by name. It should be trivial to set autoPip up in the way its supposed to interact.</p> </blockquote> <ul> <li> <p>(1) Auto Pause, should auto pause & unpause when leaving a tab & coming back (includes all cases of 2. : </p> <ul> <li> <p>(2) "Pause while i watch a 2nd video", only runs more rarely than 1 (as the name sais. Can't cause it without leaving the tab, can only have one active tab) </p> <ul> <li><i> (and i currently might still has little issues. </i> @MohamedLebda had tried fixing after Victor had deleted tab monitoring from background.js, while trying to migrate to to mf3 in 2022 (which wasnt necessary yet afterall) <a href="https://github.com/code-charity/youtube/pulls?q=is%3Apr+sort%3Aupdated-desc+author%3AmohamedLebda">https://github.com/code-charity/youtube/pulls?q=is%3Apr+sort%3Aupdated-desc+author%3AmohamedLebda</a></li> </ul> </li> <li> <p>(3) autoPip isnt compatible with 1. because the PictureInPicture play would be autopaused because it is considered a tab. Yet then it is consequent to keep 2. instead </p> </li> </ul> </li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raszpl"><img src="https://avatars.githubusercontent.com/u/2623127?v=4" />raszpl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Seems consistent. (As of now our code is using camelCase which is popular among [JS-]developers) (except for the GUI values, which might appear to users - if not yet translated)</p> </blockquote> <p>so far my favorite <a href="https://github.com/code-charity/youtube/blob/9bc78806a04e2b4debf8ce46ce5c9d58db6d6aef/menu/skeleton-parts/active-features.js#L36">https://github.com/code-charity/youtube/blob/9bc78806a04e2b4debf8ce46ce5c9d58db6d6aef/menu/skeleton-parts/active-features.js#L36</a> <code>parent_object.parentObject && !parent_object.parentObject.category</code> :o despite mixed cases its quite readable code :)</p> <blockquote> <p>If #1211 is done well, we might save the average user 3 minutes + $0.2 in electricity per year. just relevant on scale (+ the project is growing). Might also be able to save them some seconds per year if we werent bound to JS.</p> </blockquote> <p>1 is very ambitious, difficult and fragile. YT changes the page often. I also really dislike convoluted heavy YT dynamic DOM with all those moving parts and everything done with javascript. Layout from before the 2020 change was mostly html, now everything is client side and slow :((((</p> <p>2 is ready, needs a list of GPUs with supported codecs.</p> <blockquote> <blockquote> <p>Why is checkbox/switch .dataset.value a string ('true') while .storage.value a boolean? both represent same data and both should be boolean.</p> </blockquote> <p>Dont know!!</p> </blockquote> <p>great :) so I can change it after verifying everything works?</p> <blockquote> <p>3. autoPip isnt compatible with 1. because the PictureInPicture play would be autopaused because it is considered a tab. Yet then it is consequent to keep 2. instead</p> </blockquote> <p>so autoPip should disable 1 and force enable 2?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>hi, are you on Discord? ( <a href="https://discord.gg/aHpjrhf">https://discord.gg/aHpjrhf</a> )</p> <blockquote> <p>is ready, needs a list of GPUs with supported codecs.</p> </blockquote> <p>👍👍</p> <blockquote> <p>parent_object.parentObject && !parent_object.parentObject.category</p> </blockquote> <p>😅</p> <blockquote> <p>DOM ... ambitious </p> </blockquote> <p>yes, (you might saw 😳 <a href="https://github.com/hackademix/noscript/issues/291">https://github.com/hackademix/noscript/issues/291</a>) (might start with Firefox & offering mobile youtube on desktop. (Also always wanted to bring the desktop sibling of "show desktop site"(mobile browser) as a single-click standalone extension "show mobile site" (no popup menu, just a checkup as extension icon, remembering per sub domain))</p> <blockquote> <p>... autoPiP ...</p> </blockquote> <p><a href="https://github.com/code-charity/youtube/commit/8bd2be2550241c1621b1861b324c3dbeefddc9b9">https://github.com/code-charity/youtube/commit/8bd2be2550241c1621b1861b324c3dbeefddc9b9</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ImprovedTube"><img src="https://avatars.githubusercontent.com/u/25022245?v=4" />ImprovedTube</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <ol start="4"> <li><a href="https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L968">code-charity/youtube@7e56c0c/js%26css/satus.js#L968</a> satus.storage.set overwrites whole config (chrome.storage.local.set) even if only one option is being changed. Not really a bug, but a weird undesirable action.</li> </ol> </blockquote> <p>👍♡</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>