Rollout Plan: Refactor code with img HTML tags to end without a slash

[JessicaLucindaCheng]

Dependency

• [x] #4922
• [x] #5040
• [ ] #6453

Overview

We want to change img HTML tags ending with a slash (<img.../>) to an img tag without an ending slash (<img...>) so that the codebase is consistent with how we use img HTML tags.

Details

• See the write-up for the DR: img tag documentation comment [^1]
• Read the roll out plan [^2]
• See the already started but not completed spreadsheet: HfLA-Website: img Tag Audit spreadsheet [^3]
• To understand the Issue Making labels, see 4 in the Resources/Instructions section below [^4]

Action Items

• [x] Write epic 1 as outlined in the roll out plan
  • [x] Add a link to the epic in the Dependency section above
• [x] Write epic 2 as outlined in the roll out plan
  • [x] Add a link to the epic in the Dependency section above
• [ ] Once all the issues are closed in the Dependency section, delete the following issue template(s):
  • [ ] .github/ISSUE_TEMPLATE/img-tag-refactor-on-website.md [^5]

Resources/Instructions

[^1]: DR: img tag documentation comment

[^2]: Roll out plan

[^3]: HfLA-Website: img Tag Audit spreadsheet

[^4]: To understand the Issue Making labels, refer to the Resources section of this ER: #4678

[^5]: Issue Template 1: img Tag Refactor on Website and its associated Markdown file .github/ISSUE_TEMPLATE/img-tag-refactor-on-website.md. This template works for any pages that are marked with Template 1 in the Template to use if <img.../> found column on the Page Audit tab. Template 1 works if the img tag is on the website.

[JessicaLucindaCheng]

Awaiting approval before writing more issues: https://github.com/hackforla/website/issues/4366#issuecomment-1493273041

[JessicaLucindaCheng]

• Notes to be added to a new wiki page about the issue making ladder. (Note: #4678 was made for adding this info.)

Issue making ladder

• Issue Making: Level 1 - Make issues from a template and a spreadsheet
• Issue Making: Level 2 - Make an issue template and level 1 issue to use it
• Issue Making: Level 3 - Epic
• Issue Making: Level 4 - Make a Roll Out Plan that has >1 epics to achieve and timelines for interdependencies

[JessicaLucindaCheng]

Original content of issue before changing it to a roll out plan

Overview

We want to change img HTML tags ending with a slash (<img.../>) to an img tag without an ending slash (<img...>) so that the codebase is consistent with how we use img HTML tags.

Details

See the write-up for DR: img tag documentation comment {See 1 in Resources/Instructions below}

Action Items

Audit

• [ ] Search for and find all the instances in our codebase with img HTML tags ending with a slash (<img.../>) and document them in the HfLA-Website: img Tag Audit spreadsheet. For detailed instructions follow the "Instructions for auditors" in the Instructions tab of the HfLA-Website: img Tag Audit spreadsheet. (See 2 in Resources/Instructions below.)

Write issues

Instructions for issue writers if "Link to page on website (if applicable)" column is filled out

• [ ] Write good first issues to change each instance of the img HTML tags ending with a slash (<img.../>) to an img tag without an ending slash (<img...>). For detailed instructions follow the "Instructions for issue writers if "Link to page on website (if applicable)" column is filled out" in the Instructions tab of the HfLA-Website: img Tag Audit spreadsheet. (See 2 in Resources/Instructions below.)

Instructions for issue writers if "Link to page on website (if applicable)" column is not filled out

• [ ] [DEV LEAD: Add Action Items here based on the audit]

Dev Lead

• [ ] Once all the issues are made, delete the following issue templates:
  • [ ] img Tag Refactor
  • [ ] [DEV LEAD: Add any other templates you created for this epic that can be deleted once all the issues for this epic are written]

Resources/Instructions

1. DR: img tag documentation comment
2. HfLA-Website: img Tag Audit spreadsheet

For issues where "Link to page on website (if applicable)" column is filled out

4. img Tag Refactor issue template
5. Example issue: https://github.com/hackforla/website/issues/4445

[JessicaLucindaCheng]

Notes for dev lead picking up this epic (OUTDATED)

Progress

I audited some of the pages and wrote some of the issues.

Audit

• [ ] Epic of Epics: Make a template with Complexity: Small issue to audit each page
• [ ] Then, hand this off to someone else to use the template to make issue to audit each page

Write issues

• [ ] Once the pages are all audited, then the issues need to be written that are indicated in the img with Ending Slash tab depends on
  • [ ] If the image tag is for something on the website (so the Link to page on website (if applicable) column is filled out), follow the Instructions for issue writers where "Link to page on website (if applicable)" column is filled out on the Instructions tab
  • [ ] If the image is for something not on the website (so the Link to page on website (if applicable) column is not filled out), determine how to write the issues for those.
    • For example, CONTRIBUTING.md and .github/pull_request_template.md are not files for the website and will not have Link to page on website (if applicable) column filled out. Thus, if they have img tags with an ending slash <img.../>, then you'll need to figure out how to write the issues for those.

[JessicaLucindaCheng]

Notes for dev lead picking up this epic

• Progress: I audited some of the pages and wrote some of the good first issues to change <img.../> to <img...>.
• I started the HfLA-Website: img Tag Audit spreadsheet with an Instructions tab.
  • Feel free to edit, delete, or add whatever you want anything in the Google Sheet. It's all yours now.
  • The instructions in the Instructions tab may not be necessary since epics and issues will be written with instructions in them.
• I created a img Tag Refactor issue template feel free to edit or modify it.

[JessicaLucindaCheng]

@hackforla/website-pm

• I edited the roll out plan. Could someone take a look to see if there is anything I should change? It's my first time writing a roll out plan.
• Also, I wasn't sure about how to label this roll out plan. Please check the labels.
• I wasn't sure what to do with this spreadsheet: HfLA-Website: img Tag Audit spreadsheet. Should I
  • completely remove the instructions since those will be in the other epics and issues that will be written as a result of this roll out plan
  • Or should I let the dev lead(s) that are assigned to this roll out plan decide what to do with it?
• Also, I made this diagram of the roll out plan in terms of issue writing levels. The editable version is currently saved in my personal FigJam file. Let me know if you want me to copy the editable version somewhere else so it is available for future editing.

[JessicaLucindaCheng]

To Dos

• [x] Redo the diagram
  • [x] Remove Action Items in the first epic square
  • [x] Make duplicate issues stacked like pieces of paper offset a little
  • [x] Break down the second epic into two issues
  • [x] Make a generic good first issue template that will work for any good first issue (separate from this roll out plan) -> Made an ER for it: #4362
• [x] Add to next Dev/PM issue:
  • [x] Is this level correct for the issue: Issue Making Level 3: Epic? Reason: The person working on this issue to make epics is at a level 3. Already answered.
  • [x] I used last FigJam file.

[ExperimentsInHonesty]

@JessicaLucindaCheng I took off the ready for product label because I think you got the feedback you needed from me last Monday

[jiyanpatil07]

Hello @JessicaLucindaCheng , I would like to work on the issue mentioned above.

[JessicaLucindaCheng]

@jiyanpatil07 In order to work on an issue, you need to be a member of Hack for LA. (There are no fees to join.) Please follow the steps on our Getting Started page and attend an onboarding session.

[JessicaLucindaCheng]

Roll Out Plan

Epic 1

• Audit, find, and document all the instances in our codebase with img HTML tags ending with a slash (<img.../>) in the HfLA-Website: img Tag Audit spreadsheet [^1]. This epic will include an "Issue Making: Level 2" label. This epic will include the following action items:

1A: Template for auditing

• Make an issue template to audit, find, and document <img.../> in a file in a spreadsheet.
  • This issue template will include a "Complexity: Small" label and a "ready for dev lead" label along with all the other needed labels.
• Review and (if needed) edit the following in the HfLA-Website: img Tag Audit spreadsheet:
  • "Instructions for Page Audit Issue Writers" section on the Instructions tab [^1]
  • Page Audit tab [^2]. All the files that still need to be audited are already listed in the Page Audit tab.
  • img with Ending Slash tab [^3]. This tab contains the lines of code with <img.../> that have been found so far. This tab will also be where developers auditing the files add their findings.
• Use the template to make 1 issue as an example
• Get approval from a PM on the template.

1B: Audit issue writing session

• After approval is given, ask a dev lead (a Merge Team member or Technical Lead) if you can do an issue writing session during one of the meetings so that other developers on the team can help with writing the issues using the template.

Epic 2

• Dependency: Epic 1 and its issues being completed
• Change img HTML tags ending with a slash (<img.../>) to an img tag without an ending slash (<img...>).This epic will include an "Issue Making: Level 2" label. This epic will include the following action items:

2A: Template(s) for good first issues to change the img tag

• Determine if we need multiple templates. These templates will include a "good first issue" label and a "ready for dev lead" label along with all the other needed labels.
  • For removing the ending slash in img tags on the website, there is a template called "img Tag Refactor on Website" [^4] already. This template works for img tags on the website. This template can be modified or edited if needed.
  • Other templates may need to be made, such as for editing the img tags in the CONTRIBUTING.md or other files,
• Review and (if needed) edit the following in the HfLA-Website: img Tag Audit spreadsheet:
  • img with Ending Slash tab [^3]. This tab contains the lines of code with <img.../> that have been found.
  • The "Instructions for img with Ending Slash Issue Writers" section on the Instructions tab [^1]
  • Add additional sections or instructions as needed to the Instructions tab if needed
• Make issue template(s) for writing good first issues to change <img.../> to <img...> and use each template to make 1 issue as an example
• Get approval from a PM on the template(s).

2B: Good first issue writing session

• After approval is given, ask a dev lead (a Merge Team member or Technical Lead) if you can do an issue writing session (or more than one session) during one of the meetings so that other developers on the team can help with writing the issues using the template(s).

Resources/Instructions

[^1]: HfLA-Website: img Tag Audit spreadsheet [^2]: HfLA-Website: img Tag Audit spreadsheet's Page Audit tab [^3]: HfLA-Website: img Tag Audit spreadsheet's img with Ending Slash tab [^4]: Issue Template 1: img Tag Refactor on Website and its associated Markdown file .github/ISSUE_TEMPLATE/img-tag-refactor-on-website.md. This template works for any pages that is marked with Template 1 in the Template to use if <img.../> found column on the Page Audit tab . Template 1 works if the img tag is on the website.

[JessicaLucindaCheng]

• [x] Archive the FigJam: https://www.figma.com/file/n4yjpWUuLI1eOxL3wJp7yq/Roll-out-plan-%234362?type=whiteboard&node-id=0-1&t=5QWmxgUaE96UPfAW-0

[JessicaLucindaCheng]

@hackforla/website-merge Can someone read through and review this issue and its roll out plan to see if it is ready for prioritization? If you are interested, please leave your issue review availability and ETA in a new comment below. Thank you.

[roslynwythe]

@JessicaLucindaCheng Availability: 5/26 1 hr, 5/27 1 hr, 5/28 1 hr ETA 5/28 EOD

Is there any documentation I could reference to understand the meaning of the various "Issue Making" labels?

[JessicaLucindaCheng]

@roslynwythe Thanks for reviewing this roll out plan!

Is there any documentation I could reference to understand the meaning of the various "Issue Making" labels?

• No but you can refer to the resources section of this issue: #4678, which sort of defines the labels

[roslynwythe]

Hi @JessicaLucindaCheng This looks good and it was interesting to see how you structured this Roll Out Plan into two child Epics. Your instructions are quite clear and I would feel comfortable working on this epic (or the child epics).

[JessicaLucindaCheng]

@roslynwythe Thanks for reviewing the roll out plan!

[JessicaLucindaCheng]

Questions for PM(s) and the answers:

Since Issue Making and Complexity issues are done in intertwined, parallel growth paths:

• Issue Making: Level 1 --> Level 2 --> Level 3 --> Level 4
• Complexity: 2 Good First --> Small --> Medium --> Large

1. Since this issue is for any front-end or back-end dev, will putting an existing Complexity label (good first, small, medium, or large) on this be confusing?
   Ans: Yes, it is confusing using those labels.

Click here to see an example of how it can be confusing:

• Let's say this rollout plan has a Complexity: Large.
• Let's say a junior front-end developer is looking for a Large issue to work on.
• They have finished working on 2 good first issues, Small, and Medium issues.
• They have never written any issues, so they haven't completed an Issue Making Level 1 nor Level 2.
• They filter the issues by complexity (Large) and roles (front end), and they see this issue fits the criteria. They may choose it without ever having written an issue.

3. If we are adding a complexity label, I suggest we make a new label Complexity: Issue Making to indicate to look at the Issue Making labels. Is that okay? Ans: Bonnie said yes, but word it Complexity: See issue making label

[ExperimentsInHonesty]

@JessicaLucindaCheng that seems like a reasonable suggestion

[github-actions[bot]]

Hi @roslynwythe, 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 :)

[github-actions[bot]]

@roslynwythe

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' 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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

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

[roslynwythe]

Update:

This Roll Out plan is in progress, and will remain open until all of the issues created as a result of #4922 and #5040 are closed.

[github-actions[bot]]

@roslynwythe

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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, August 8, 2023 at 12:06 AM PST.}

[fyliu]

@roslynwythe Someone was asking about one of the issues that came out of this issue and I was thinking this could be done with a processing script.

Anyway, it seems like an opportunity for me to work on my commandline tools skills so I came up with this one-liner that runs from the project root.

It’s not entirely correct but I guess I don’t want to spend more time on it right now. It does what it’s supposed to but also has the side effect of removing extra spaces in all tags.

find . -name "*.html" -exec sed -i -e "s/<img\(.*\)\/>/<img\1>/g" -e "s/\s*>/>/g" {} +

1. find all the html files and pass their paths to sed to process them
2. sed edit files in-place (-i flag) with 2 edit commands. {} is a placeholder for the file path and + is the ending
3. remove slash from closing bracket in img tags
4. remove spaces before closing brackets in all tags

Here is the one to process just one file that I originally worked on.

sed -i -e "s/<img\(.*\)\/>/<img\1>/g" -e "s/\s*>/>/g" ./_includes/about-page/about-card-executive-letter.html

Another major problem is it doesn't match img tags spread across multiple lines. So it didn't catch this file, which I used the "/>" regex to find all self-closing tags and manually went through the results.

• _includes/join-donate-card.html

Anyway, the commands might be good for checking purposes or if you ever need to remove extra spaces in all tags. I just want to leave this here since it's related to this issue.

[roslynwythe]

Hi @fyliu that sed command is really impressive!! As you may know, we are always looking for good first issues for our junior developers on the website project. So I'd like to generate a list of files with html tags with extra spaces that I could use for creating good first issues. If you have a suggestion for that, please let me know. If you would like, I'll create an issue..

[github-actions[bot]]

@roslynwythe

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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, August 22, 2023 at 12:06 AM PST.}

[fyliu]

@roslynwythe Here's some commands to find extra spaces within tag brackets.

Run these from the project root:

1. This one finds tags that have extra ending spaces

   find . -name "*.html" -exec grep -lrP "<[^>]+\s+>" {} + | sort -u
   find . -name "*.html" -exec grep -nrP --color=always "<[^>]+\s+>" {} + | sort -u | less -r
   

   • That's matching both the < and the >, with the middle having characters that are not the closing bracket ([^>]) and having at least one space character (\s).
   • It returns false positives for cases where the > is used as a less-than operator.
   • The --color option is just to highlight the match within a line.
   • It sorts the lines and filters for uniqueness (| sort -u).
   • The | less -r displays the results in a scrollable buffer. You can do page-scroll forward and back as well as use arrow keys for single lines. q to quit
   • Change the -l (show filenames only) flag into -n (show line numbers) to check manually for false positives.
   • You can also redirect the output to a file by adding > extra-spaces.txt at the end of the command. The color might show up as code so it's best to not have colors when saving to file.

2. Here's another one that finds multiple consecutive spaces inside tags

   find . -name "*.html" -exec grep -lrP "<[^>]+\s{2,}[^>]+>" {} + | grep -v -e "-->" | sort -u
   find . -name "*.html" -exec grep -nrP --color=always "<[^>]+\s{2,}[^>]+>" {} + | grep -v -e "-->" | less -r
   

   • It finds multiple whitespaces (\s{2,})
   • Then it filters out html comment tags in the second grep command (-->)

[github-actions[bot]]

@roslynwythe

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' 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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, August 29, 2023 at 12:06 AM PST.}

[github-actions[bot]]

@roslynwythe

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' 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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, September 5, 2023 at 12:05 AM PST.}

[github-actions[bot]]

@roslynwythe

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' 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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, September 12, 2023 at 12:06 AM PST.}