arkenfox gui - project direction

[icpantsparti2]

Continue discussion from arkenfox/user.js#608

[icpantsparti2]

host a copy here that autoloads AF
just hiding the UI options

from your earlier posts, now from your last post:

treat it as a separate project/code from the original tool
alter this in many subtle ways

so what you really want is a good forking?

of the table/gui code specifically 😆

[icpantsparti2]

How does this sound?

my easy first steps:

• (fork) copy single userjs-tool.html file to here as index.html
• add user.js (copied from main arkenfox repo)
• check it autoloads and just shows the table/gui
  • (and that the old tool ui parts are hidden)

• next, a quick chop out of any big code blocks (eg functions)
  that are nothing to do with the table/gui (without causing breakage)
• split .css .js parts into files
• then we have a functional table/gui code base to build on
• run away and hide :D

next (in no particular order, in multi-steps, whenever, whoever):

• we will have some leftover code/structure from the original tool,
  which can be ironed out eventually
  (and with care regarding dependencies of the table/gui functions).
• prototyping todo list in issue 1
• beer

---

PS If I am slow to respond/absent it's due to health reasons, I have been dormant here for some long stretches (luckily my tool project has not required much maintenance). So we'll take this steady and see how it goes.

[Thorin-Oakenpants]

so what you really want is a good forking

you've already done all the work to get the file, parse it, display it, filter it

what I want this to be is to remove (or disable/hide) the compare and load file parts, and simply be a tool that provides a filterable/searchable gui - you've done it all already, it just needs some "tweaks" which I laid out in #1

up to you if you want to chop out code blocks. If you just want to hide them behind an auto-determined global var to make the two projects easier to maintain as a set, then so be it

but yes, we are prototyping, so first order is add files, then make sure we trap any errors loading the file (e.g. maybe someone blocks fetch), etc

So we'll take this steady and see how it goes

no hurry, take your time

[icpantsparti2]

up to you if you want to chop out code blocks.

lets avoid that, for now anyway

If you just want to hide them behind an auto-determined global var to make the two projects easier to maintain as a set, then so be it

yes cool, that's what I coded for, and looking good so far

[Thorin-Oakenpants]

in my own little imperfect world, I would do this as a separate project/code and split out the css and js to files, and not have to worry about any other project. I'd even go so far as to do away with fetching the file and hardcode it in another js file (whatever format, e.g base64)

but for now, all I care about is that it works - and it does that

[icpantsparti2]

split out the css and js to files

I split my userjs-tool.html project into separate files, so the index.html here is a small different file now (ie not a copy of the tool). The files in the css and js folders here are still copies from my repo, but you only have the parts needed.

do away with fetching the file and hardcode it in another js file

Done this too! Optional https://arkenfox.github.io/gui/?b gives you the base64 to save (after fetching from main repo).

Also https://arkenfox.github.io/gui/?u displays a list of the URLs in the user.js file (the one saved as base64 here)

The table displays fast now, and I ticked off lots on the todo list.

[Thorin-Oakenpants]

it's going to be a little while til I get to this, just keep making changes as you see fit :)

can we make reading a base64 the default (and do away with fetch altogether) - i.e we'll need to recreate the base64 file each release, but totally worth it

[icpantsparti2]

It is indeed without fetching by default, from file userjs-base64.js which contains hardcoded const userjsbase64="...", which you need to manually update ;-)

EDIT: clarification:

• https://arkenfox.github.io/gui
  defaults to using const userjsbase64= in userjs-base64.js (without fetch)

• https://arkenfox.github.io/gui/?b
  hidden option - this is different, it forces a fetch from main repo user.js because it is a helper for updating, ie for creating a new base64 string that you then copy into userjs-base64.js (although I expect you will make the base64 by your own means and will not need this)

• https://arkenfox.github.io/gui/?u
  hidden option - shows list of URLs from the stored base64 version (without fetch)

[KOLANICH]

1. get rid of hardcoded HTML in the sources. If HTML has to be generated in JS, it must be generated via DOM API, not via innerHTML/insertAdjacentHTML. Using those concatenating strings can result in a code execution vulnerability, if it is possible to sneak a script tag or any other code-executing stuff like on* attributes.
2. get rid of js-inlined CSS, including the one in the form like

var e = document.getElementById("tview_buttons_div");
      e.style.backgroundColor="#000000";
      e.style.border="1px solid #b3b3b3";
e.style.borderWidth="0px 0px 1px 0px";

Styles must be defined in CSS files.

3. refactor userjsTableView into something more readable. Move the data dict out of the function. Maybe even into a separate file. Split into multiple functions. Get rid of else if ladders, use lookup tables instead.
4. get rid of function prefixes, use ECMAScript modules
5. utilize let and const instead of var, "use strict"; mode.

[KOLANICH]

var e = document.getElementsByClassName("secDet");
for (var i = 0, j = e.length; i < j; i++) {
    e[i].open = false;
}

is an antipattern,

for(let e of document.getElementsByClassName("secDet")) {
    e.open = false;
}

should be better. And even better:

[...document.getElementsByClassName("secDet")].forEach(e => {e.open = false;});

[icpantsparti2]

Hello again @KOLANICH

Thank you for your feedback, that helps me to see some things that I need to learn.

The code originates from my personal experimental userjs-tool, which is a project for my own self learning. I tried to keep my code tidy, and sure there is room for improvement in the code structure, especially considering that a few months ago the code was all in one HTML file. It slowly evolves as I learn.

As a hobbyist I am happy I created something that works.

I appreciate your tips.

[Thorin-Oakenpants]

Styles must be defined in CSS files

Indeed - #2 (comment)

Feel free to open issues, fork, provide patches. Getting all the looks and feel into a single css would be nice

Splitting the html into just a doc and then two js files (the main one and base64.js) would also be a start

[KOLANICH]

Is there any reason to use base64? Isn't base64 damn inefficient and hard to edit and read?

[Thorin-Oakenpants]

It's what's currently used. If there's a reason to change it, then sure

[icpantsparti2]

Closing, refer to ToDo (issue #1).