Refactor JS: Clean toolkit page script

[Aveline-art]

Overview

As a member of the website development team, Javascript code is much more maintainable and reusable if they exist in a separate folder rather than embedded with html. This issue is to clean up the script on the toolkit page.

Action Items

• [ ] Review the notes below to understand recent changes to our architecture
• [ ] The toolkit page contains 2 scripts. The top one will be called ST (for script top) and the bottom SB (for script bottom).
• [ ] ST is to be moved into the assets/js directory, in a js file named toolkit.js.
  • [ ] This script has a known bug in that if the nav bar links are entered through the url, the page does not show the associated filtered page. For example, this link will not lead to showing development only results, but all results.
  • [ ] Change the JS code to fix this bug. It should work similar to this.
• [ ] SB is to be deleted, and its function refactored into css or scss code instead.

Resources/Instructions

assets/js toolkit page toolkit.html toolkit/#Development page bug Github docs sample link.

Architecture Notes

The idea behind the refactor is to get all of our website's JS code into an organized, consolidated state. Currently, we want our JS files to exist in our assets/js directory with these specifications:

• In the main js directory, the js files should ideally have names corresponding to a related .html page (for example, updates.js should connect to updates.html).
• In the elements sub-directory, the js fjiles should correspond to code needed for our design system elements to function.
• In the utility sub-directory, the js files represent reusable code that can be used in multiple files. If any js code is reused, they belong in utility, and called in a separate file in the main directory.

That said, this structure is not set in stone. If any part of it feels strange, or you have questions, feel free to bring it up with the team so we can evolve this format!

[github-actions[bot]]

Hi @Aveline-art.

Good job adding the required labels to this issue.

Just a friendly reminder to also move the issue into the "New Issue Approval" column under the Project Board. For more info on that, check Github's documentation here. Thanks!

Additional Resources: Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done) Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[juliansmith0]

Availability for this week: 5 hours My estimated ETA for completing this issue: Sunday, June 5, 2022

[github-actions[bot]]

@juliansmith0

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, June 7, 2022 at 12:21 AM PST.}

[github-actions[bot]]

@juliansmith0

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, June 14, 2022 at 12:19 AM PST.}

[Sparky-code]

@juliansmith0 Checking in to see if you are still working on this issue or if your availability has changed. Please add your ETA and availability. Thanks!

[github-actions[bot]]

@juliansmith0

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, June 21, 2022 at 12:20 AM PST.}

[github-actions[bot]]

@juliansmith0

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, June 28, 2022 at 12:21 AM PST.}

[github-actions[bot]]

@juliansmith0

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, July 5, 2022 at 12:19 AM PST.}

[github-actions[bot]]

@juliansmith0

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, July 12, 2022 at 12:20 AM PST.}

[github-actions[bot]]

@juliansmith0

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, July 19, 2022 at 12:21 AM PST.}

[ExperimentsInHonesty]

@juliansmith0 I don't see any activity on this issue, so I am going to unassign and put back into the prioritized backlog. If you are still working on it, please reassign, move to in progress and update the issue

[github-actions[bot]]

Hi @ericvennemeyer, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[ericvennemeyer]

i. Availability: Weds 8/17 - 2hrs, Thurs 8/18 - 3hrs ii. ETA: EOD Thursday, 8/18

[ericvennemeyer]

Hey hey, I was unable to work on this as I'd hoped yesterday, so I'm running a little behind. I will also be offline from now until Monday morning. Please see below for update.

i. Progress: Fixed the bug in ST, page is now correctly filtered when navbar links are entered as hashes in the URL. However, with my current solution there is a visible flicker on the page when all cards are loaded before being filtered. Would ideally like to find a prettier way to do this. ii. Blockers: For SB, the issue requests refactoring into SCSS/CSS. Unfortunately, the style applied in SB is based on the conditional presence of a child element. Have done some research but there doesn't seem to be an easy way to select only a parent element that contains a specific child element in SCSS/CSS. Will research further next week. iii. Availability: Flexible; 2-3hrs in total. iv. ETA: EOD Friday 8/26

[ericvennemeyer]

Update:

All points in this issue have been addressed:

1. URL filtering bug has been fixed and ST refactored into it's own file in assets/js
2. Styling in SB has been refactored into _toolkit.scss

I did notice that there's an additional bug not mentioned in the original issue: when filtering the page via URL hash, the associated navbar link is not highlighted. For example, if I enter the URL with #Development at the end, the navbar link for All remains highlighted. Should I address this bug in this issue, or open a new issue?

[ExperimentsInHonesty]

There is a comment from Eric. Then some additional commits. Did Eric take care of it in the PR that closed this issue? If yes, please note that in a comment, and move this to the done column. If not, please create a new issue

[arpitapandya]

• Yes, #3483 closes this issue and is taken care of by Eric. The additional commits are because of the stale branch and later resolving merge conflicts. There is also another issue #3489 created (came up and discussed), and PR #3581 merged for that separately for removing the duplicate CSS selectors.