Work flow for guides to appear on the website

[ExperimentsInHonesty]

Dependency

• [x] Waiting for a PM to get assigned to Guides (ask Bonnie or Olivia for status if necessary)
• [x] ~Waiting until PMs have identified all guides that are ready (at least 5 are needed for this test)~

Overview

As PMs we need guides to be easy and fast to add to the website so that we have our guides appear on the website as soon as possible.

Action Items

• [x] Define the prototype
  • [x] Document what did not work
• [ ] Define MVP
• [ ] Define stages post MVP
• [ ] Convert issue to epic with small issues: Add credits for photos and icons for redesigned homepage #2528
• [ ] Once the pull request associated with this issue is approved and merged
  • [ ] Please update and edit issue #1515 by
  • [ ] Checking off the dependency for this issue
  • [ ] If all dependencies are checked off, please move issue #1515 to the New Issue Approval column and remove the Dependency label
  • [ ] Please update and edit issue #3170 by
  • [ ] Checking off the dependency for this issue
  • [ ] If all dependencies are checked off, please move issue #3170 to the New Issue Approval column and remove the Dependency label

Resources/Instructions

Here is what we will post on the a guide issue when we assign an image to it

Here is the image that will show up when people go to hackforla.org/toolkit and see this guide
[INSERT IMAGE HERE]

Here are the details for the credits page
Name: Meetup (this needs to link to the original image location)
Used in: Toolkit
Artist: _______
Provider: _____

• Guide: How to Write a Guide

• Template: Guide

• How to Set Reminders in Slack v4

• Figma

• Sample Documentation from GitHub as Reference

• emojiterra

• Figma / Type Space Figma Youtube Video

• Tool researched by 100Automations

• https://github.com/hackforla/guides/issues/10#issuecomment-896934745

• Guide Pages Design System - https://github.com/hackforla/website/issues/1630#issuecomment-954330264

[ExperimentsInHonesty]

proposed work flow a guide gets assigned in the CoP assignee reaches out to HfLA design team to ask for an image via a template issue on hfla github designer posts back on the guide issue with image details new issue on hfla github with finished guide pdf url and image details previously provided - issue is auto labeled to development

[ExperimentsInHonesty]

we need to make it so that the pdfs load in the browser window using github.

[github-actions[bot]]

@ExperimentsInHonesty, @alyssabenipayo

Please add update using this template (even if you have a pull request)

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) ask for help at a Tuesday or Sunday 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, August 10, 2021 at 12:10 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[abenipa3]

Progress: Testing markdown converter. Updating prototype so that front matter locates image path so that we can achieve the format we want for markdown file.

Blockers: Learning more about liquid so that we can achieve the format as mentioned earlier.

Availability: 8-10 hours

ETA: 8/16/21

[abenipa3]

Action Items from 8/18/21 Meeting

In addition to the checklist mentioned in #1515:

• [x] Add the Slack Reminders Guide V4 into the prototype. (Issue for this guide also viewed here.)

Update 8/19/21

- _How to Set a Reminder in Slack_ Guide Page Added. - Preview [here]( https://alyssabenipayo.github.io/guidepages-prototype/how-to-set-reminders-in-slack).

• [x] Test to see how emojis work in the headings.

Update 8/19/21

This is possible by adding a "-" at the end of the `href` in the front matter. Example: ``` - title: "When to Use Reminders ⏰" href: "#when-to-use-reminders-" ```

• [x] Test to see how cropped images turn out after downloading from Google Docs. (Will the edits/crop apply to the images when we download them?)

Update 8/19/21

- After downloading the images (by downloading the Web Pages (HTML, zipped folder), images would be saved as original - any edits made (such as cropping, resizing) would not be applied. - ~Alternative option is the following: - Select File > Publish to the Web - Go to the Link provided by Google Docs. - Save Image As all the images. (I initially downloaded the zipped Web Pages folder, which included the images folder, so I would replace all the images with the edited ones from Publish to the Web. - When done, will need to unpublish the document by selecting File > Publish to the Web > Under "Publish content & setting", click on Stop Publishing.~

• [x] Test to see if the indentation works design- and development-wise. (See image below for context.)

Update 8/19/21

Will meet with Design Team later today. Development-wise, yes, with the following: `      `

Questions So Far (for Friday's Meeting)

• Do we want to add emojis to the section title in the navbar, too?
• Will the guides contain an overview?
• If so, how do we want to create the preview section that's viewable on the toolkit page?
• Alternatives for downloading (edited) images?

[abenipa3]

Action Items from 8/20/21 Meeting

• [x] Create mock-ups of Guide Page before Sunday.
  Update 8/22/21

Created these mockups so far.

Figma FIle

• [ ] Edit the indentation of the subsections (See JavaScript).
• [ ] Bold "When", "How" - Refer to changes made in Slack Reminders Guide V4.

[abenipa3]

Feedback from 8/22/21 Meeting

• Navbar: Team voted for navbar with bolded title:

• Title: No capitalization for titles (header and section titles).

Action Items from 8/22/21 Meeting

• [x] Create a full mock-up (including subsections) of Slack Reminders Guide V4.

Update 8/23/21

Created these mockups so far. [Figma FIle](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=14374%3A93547)

• [x] Make a mock-up where the subsections in the navbar are not indented.

[abenipa3]

Action Items from 8/25/21 Meeting

• [x] Consult with @hackforla/website-design: What is the hero section for our Guide Page? We want our guide pages to show that we can help readers from all over the globe through our hero section.

Update from 8/26/21: Meeting with Design Team re: What is the Header?

- Our team suggested that we either change the image or edit the current header as seen below.  - If anything, I created new mockups that suggests new images that may replace the current header.

• [x] Add Credits at the end of the mock-up.
• [x] Update Guide Page Team with Design Team's response on 8/27/21.
• [x] Consult with the website team and cast votes, regarding subsections format on Sunday. (More details under Feedback.)

With Indentation for Subsections


Without Indentation for Subsections


Feedback from 8/25/21 Meeting

• Discussed how to format the subsections for navbar: Without Indentation vs. With Indentation.
  • Action Item for Sunday Consult with the website team and cast votes.
• Discussed if we want the overview portion of the guide to be titled "Overview" or "What is _____?"
  • Decided vote for "What is ___?" - We want the guides to be open to everyone around the globe.
  • "What is___?" would be clickable than having the section titled "Overview."

Mock-Ups with New Image Headers (Created on 8/26/21)

Same Header, but Zoomed In


"Document Concept Illustration" Header

 

"Completed Steps Illustration" Header

 

"Publish Article Illustration" Header

 

Link to New Mock-Ups

Questions for 8/27/21

• How do we want to update status for https://github.com/hackforla/website/issues/1515
  Update 8/27/21

Moved issue back to the icebox. More details here https://github.com/hackforla/website/issues/1515#issuecomment-907387135

[abenipa3]

Minutes from 8/27/21

• Reviewed new mockups.
  • We agreed to include the parallelogram in our hero section; it brings out more color. Preview below this section.
  • We voted on mock-ups. Preview below. Will need to redesign.
    Mock-Up Hero Section (With Parallelograms) Previews

Mock-Up Voted

 

Action Items

• [x] Add credits section title to the mockups: "Guide Authors"
• [x] Make edits to the image as follows:
  • Replace the bar graph with the map.
  • Replace first page with a how-to image.
  • See site component audit for references.
• [x] Consult with the website team and cast votes, regarding subsections format, color vs. no-color (hero section) on Sunday.

Mock-Ups for Hero Section

[Mock-Up without Color](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=14845%3A95568)  [Mock-Up with Color](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=14849%3A97440) 

[abenipa3]

Minutes for 8/29/21

• Mock-Ups for Hero Section Feedback

  • Bring more color accent to the hero section.
  • Color the chart green in the third page
  • Add yellow to the image, either to the character's pants, shoes, or box image box in the first page.
  • Add a gradient to half of the side of the hero section.

• Casted votes on Subsection formats. [Option 1] [Option 2]

  • The website team voted for Option 1. 🔥 🔥 🔥

Side-Notes

• 1407 Mentioned: FAQ Accordion

  • Reviewed 2FA page and on the Getting Started Page as we may want to incorporate them in our Guide Template.

Action Item

• [x] Redesign hero image per today's feedback.

New Redesigns for Hero Image

[Version 1](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=14872%3A98550)  [Version 2](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=14916%3A96253)  [Version 3](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=14911%3A95413)  [Version 4](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=14916%3A96685) 

[abenipa3]

Minutes 8/30/21

• Voted on the new hero image. More details on the next post.
• Discussed how to automatically get the navigation bar collect sections and subsections (and skip the manual process in adding the titles and hrefs to the front matter.)
  • Decided to reach out to 100automations Team.
• Discussed how the Doc to Markdown works using this example.

Action Items

• [x] Add the indentation of the mockup (missed it previously).
• [x] Reach out to 100automations (Carlos and Dean) in regards to their table of contents/navigation bar, and share info on how to get the navigation to follow the readers when they scroll through the pages.
• [x] Create a mobile version of the mockup.
• [x] Add redesigns to this issue.

[abenipa3]

Guide Page's New Hero Image

The winner is Version 1. Please click the arrows below to see the final redesigns for both Desktop and Mobile.

Mock-Up for Desktop


Mock-Up for Mobile


Mockups for both Desktop and Mobile available on Figma here.

[ExperimentsInHonesty]

@alyssabenipayo What font choices do we have on the website? I looked in the design system pages and didn't see a font specified.

We also did some testing (which you can find at the bottom of the figma page). Here is what we found. The reason for our testing is that the titles seem a bit large, and not as sophisticated as the current Google Guides.

[abenipa3]

@alyssabenipayo What font choices do we have on the website? I looked in the design system pages and didn't see a font specified.

We also did some testing (which you can find at the bottom of the figma page). Here is what we found. The reason for our testing is that the titles seem a bit large, and not as sophisticated as the current Google Guides.

Hi Bonnie, these are the font choices that we have in our design system - I used Headings-Title 1 for the Heading-1 (48px for Desktop Size), Headings-Title 2 (36px Desktop) for the Subheadings, and the paragraphs are 20px. Just in case, I also referred to this font choice for our nav-bar here from our design system.

[ExperimentsInHonesty]

@alyssabenipayo Thank you for pointing out where the typography sizes were. We made some mockups in the same figma page (it has a blue line around it). When you are able to join us, let's discuss. No need to make any global changes now.

[abenipa3]

Minutes 9/3/21

• Reviewed mockups from figma page
• Discussed new tool (toc.html, which automatically pulls headings without needing to add the sections, titles, and hrefs in front matter.
• Reviewed font sizes for section and sub-section titles on navbar.
  • Learned that there is a 22 character limit for one line.
• Reviewed sample from GitHub to discuss how they treated left and right margins on their page. (Article added as Resources for this issue.)

Action Items

• [x] Create a new mockup that shrinking the max-width of the page cards. (708px)
  • [x] Discuss with the Design Team on Sunday in regards to new mockup.
• [x] Note any new changes (font, page card sizes) that will be added to the Design System.
• [x] Cast votes on Sunday with Website Team for the following:
  • [x] The Section/Subsections of the Navbar (Option 1 - Tool pulls the headings as it is including the emoji or Option 2 - Customized Headings)
• [x] Update on new mockup with the Design Team on Sunday.
• [x] Work with the Design Team to find out the size of the space between the heading and the paragraph in the design system.

Additional Updates

• Added the following links to this issue under Resources/Instructions for our ease:
  • Template: Guide (Google Docs)
  • Documentation from GitHub (Sample to Review/Use for our Guide)
  • Guide: How to Write a Guide
  • emojiterra

[abenipa3]

Feedback from 9/5/21

• Font Discussion:
  • Oswald will be for the heading.
  • Roboto for the paragraph.
• Website Team Vote Discussion:
  • Fully Bolded (Option 2)
  • Without the Emoji (Option 2)

Action Item

• [x] Update the paragraph size to 16px. [Design System-Typography]
• [x] Customize the navbar section/subsection titles. Team voted for Option 2
• [x] Update Font for Headings to Oswald.

[abenipa3]

Redesign Updates 9/8/21

Note: Won’t be able to attend the meeting today (Wednesday). Please see the following updates:

• Applied the following feedback from Sunday:
  • Updated Fonts for Heading to Oswald.
  • Updated paragraph sizes from 20px to 16px as seen in the design system.
  • Updated navbar section and subsection titles to reflect Option 2.
• Mockups for both Desktop and Mobile available on Figma for both Desktop and Mobile.

Mock-Up for Desktop


Mock-Up for Mobile


[abenipa3]

Update: Implementing Links to Social Media Icons

• We wanted to see how the converter would work when implementing a link to social media icons as seen below.

• I used the Google Docs to Markdown Add-on to convert and this was the result: (without any changes):

  • This error means that it does not locate the image used, so we will need to add the icons' images to the assets folder.

• Downloaded the icons from the Google Docs and added it to the assets folder.

  • Had to resize the icons to width:16px and height:16px since it came out large after downloading.

• Deleted the notes/codes generated by the converter and added incorporated image with the link.

How to add a image with links in markdown?

Image with link: `[](https://www.linkedin.com/) ` `[](https://github.com/)`

TLDR

• Able to implement image with links.
• Will require a little bit of work on the users' end by adding the Social Media icons to the assets folder, and deleting the notes/codes provided by the Add-On.

[abenipa3]

Minutes 9/13/21

• Discussed how we want allow edits to our Guide.
  • Decided to use Github's New Issue Template and Google Forms.
• Discussed if we could add Slack icon image to Heading in What is Slack's Doc.
• Discussed Redesign: Font and Spaces between paragraphs
  • Voted on font sizes.
  • Our team decided to use When (36px - H1), Type (24px - H2), Type (20px - H3)

Action Items

• [x] Add Slack icon image to Heading in What is Slack?
  • [x] Mockup
  • [x] Development
• [x] Adjust Font Size and Spaces (32px) of Mockup accordingly.
• [x] Consult with Design Team to see if the Font Size and Spaces are agreeable.

[github-actions[bot]]

@alyssabenipayo

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) 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, September 14, 2021 at 12:02 AM PST.}

[abenipa3]

• Progress:
  • Completed
    • Adjusted font sizes and spaces (32px) of Mockup accordingly, [Figma Mockup Before Consulting with Design]
    • Consult with Design Team to see if the Font Size and Spaces are agreeable.
    • Created a new mock-up with feedback provided by Design.
      • Adjusted spaces by 16px for Option 1.
      • Added numbers to steps under Option 1.
    • Added Slack Icon to the Heading in What is Slack?
  • What is left to do?
    • Meet with Guides Team for feedback.
    • If all is well, will proceed with development.
    • Continue testing how to customize titles in toc.html (the file that automatically pulls Section/Subsection titles).
    • How to have front matter automatically pull from assets/images to a specific guide page?
• Blockers: None
• Availability: 8-10
• ETA: 9/25/21
• Pictures: [Figma Link]

Screenshot of Updated Mockup


[abenipa3]

Minutes 9/22/21

• Reviewed new formatting suggestions on design.
  • Feedback:
    • Bring back font for headings (Bold and Regular) as seen in the previous design.
    • Figma / Type Space Figma Youtube Video Recommendation
• Feedback on Development (Prototype):
  • Slack Emoji in What is Slack? - Although the emoji is slightly not inline as the emojis, our Guides Team is okay with it.
  • Images came out larger. Discussed how it would be styled.
    • Concluded that our CSS styling will auto-adjust to a specific size.
  • Discussed how to apply padding to the numbered lists. Currently looks congested.
• Discussed if we could find another image for Projects. Current idea is to use this.
• Added to the Guides Team Figma.
  • Current Best Page - Page the displays our chosen design.
  • Designs as of 9/22/21 (or MM/DD/2021) - Page for WIPs.

Action Items

Design

• [x] Adjust changes to the Mockup and add it to the Guides Team Figma.
• [x] Create mockups with different designs under Guide Authors (including the icons of social media links.
  • Possibly in adding the author's profile pictures?
• [x] See how the image for content would look with either a black line or shadow. We want to indicate that it's a screenshot.
  • [x] Collect feedback from Design Team.

Development

• [x] Create Separate Page Card for Guide Authors.
• [x] Research how to customize sections and subsections (by removing the emojis from the nav-bar).

[abenipa3]

9/23/21 Updates

Design

• Updated mock-up with Guide Authors' social media icons.
• Added two more mock-ups displaying shadow and an orange border around images.
  • Note: Some images were dark to see the black line, so decided to use orange to match the selected color box.
  • Design Team voted for the Drop Shadow for the images.
• Design Team Feedback:
  • Team agreed to add Bold and Regular styles to the headings.
  • Add 48px to the corners in the second page card.
  • Add more space in between numbers and images/subheadings and text.
  • Indent the images under the numbered list and descriptions.
  • Guide Authors Section:
    • See if we could use a bigger font size for “this guide..”
    • Decrease the spacing between the names
  • Create a hierarchy list for spaces between items and a description
• Added new mockups to Guides Team Figma

New Mockups

[Figma Link](https://www.figma.com/file/Jz8KoGTBIxdx9jRxBWrEsF/Guides-Team-Figma?node-id=26%3A6759) added to Guides Team. 

Questions/Comments

• Will the bold to regular styling for headers be included in the workflow when we create new guides?
  • Bold Who? What? When? Where? Why? or first word of the section title?

[abenipa3]

Minutes 9/24/21

• Reviewed mockups. Figma Link
  • Feedback:
    • Design Team and Guides Team prefer shadow background borders around images.
    • Spaces: Images must show that they are associated with a specific step. Experimented with sizes.
      • First Attempt: 32px size for space between Step # and image. 48px size between image and the next step.
      • Second Attempt (Team Preferred): 24px size for space between Step # and image. 48px size between image and the next step.
    • Guide Authors: Excellent Level (Plan for after publishing our MVP)
      • Have two columns with the Name of the Authors and their Profile Picture from LinkedIn
      • New section for Editing.
        • "Help contribute to the Guide by giving edits. Here's a form."
      • New section for sharing the Guide.
        • Team agreed to have the section between the content (second page card) and Guide Authors.
        • Tool researched by 100Automations for reference to use to share the Guide.
• Discussed how the URL would look for guides.
  • Current idea is hackforla.org/guides/name-of-guide
  • Ideal idea is to shorten the URL to consider character count from Social Media like Twitter.
    • Example: civictechguides.org/slackreminders

Action Items

Design

• [x] Adjust hierarchy for spaces with new mockups and annotate on Figma.
  • [x] Reach out to Design Team for feedback.

Misc. Updates

• Added Tool researched by 100Automations and Figma / Type Space Figma Youtube Video to this issue under Resources/Instructions

[abenipa3]

Update 9/27/21

• Adjusted hierarchy for spaces with two new mockups and annotated on Figma. (Our team wanted to add more breathing room between the Steps and Images.)
  • Mockup 1 [Figma Link] [Image Preview]
    • Between Step # and Image - 32px
    • Between Image and Next Step - 48px
    • Between Sections - 48px
    • Between Sections and Subsections - 40px
    • Between Section and Sentence/Paragraph - 20px
  • Mockup 2 (Guides Team Preference) [Figma Link] [Image Preview]
    • Between Step # and Image - 24px
    • Between Image and Next Step - 48px
    • Between Sections - 48px
    • Between Sections and Subsections - 40px (except between the end of option 1 and beginning of option 2)
    • Between Section and Sentence/Paragraph - 20px

Action Items

• [x] Consult with the Design Team. (In Progress)

[github-actions[bot]]

@alyssabenipayo

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, September 28, 2021 at 12:02 AM PST.}

[abenipa3]

Progress:

• Annotated hierarchy for spaces between text and images. [Link]
• Consulted with Design Team today regarding design. Design Team voted on mockup as seen below.

Blockers: N/A Availability: 6 ETA: Completed - Just want to follow up with Guides Team before we begin the development phase. Pictures: [Figma Link]

[abenipa3]

Minutes 10/7/21

• Reviewed updated mockup. [Figma Link]
  • Feedback:
    • Design Team and Guides Team agree with the changes.

Action Items

Design

• [x] Issue about using strong vs bold and em vs italics https://help.siteimprove.com/support/solutions/articles/80000448460-accessibility-bold-vs-strong-and-italic-vs-emphasis - please discuss with design and potentially the developers on Sunday.
  • To be sure to provide the same experience to all users, strong and emphasis tags need to be used instead of the bold and italic tags.
  • The bold tag <b> versus the strong tag <strong> will look exactly the same when viewing the content in a browser but provide a different experience to screen reader users.
  • If you want to make your online content accessible to those using a screen reader:
  • Avoid from using style tags such as <b> and <i>
  • Use semantic tags <strong> and <em> (italics)
  • Use heading levels to break up content and make it more scannable
  • [Source]
  • Update: Design Team is up for discussion on Sunday!
• [x] Ask Kristine if the copy bits in the design system pages have been accessibility tested. If no one has tested it, find the url for the pages and test it hackforla/website#1927 (comment)
  • https://www.hackforla.org/design-system
  • Update: Not that she's aware of - it is something we can do. We could create an issue with it.

Development

• [x] Find out how to convert words in double-quotes into backticks (copy-text).
  • [x] Please review this hackforla/UI-UX#16 (comment)
  • [x] Please review this https://github.com/hackforla/guides/issues/10#issuecomment-936572293

[abenipa3]

Minutes 10/8/21

• Updated team with Design Team's responses regarding font-weights.
  • Will discuss this with the entire team on Sunday.
• Updated team with Design Team's responses regarding Accessibility Test for Design System.
  • [x] Look into Figma Plug-In that helps test accessibility. Reach out to UI-UX Channel.

Action Items

• [x] Create mock-ups with different styles for Guide Authors
  • [x] Desktop
  • [x] Mobile
  • Note for future reference: Profile Pictures will be taken from GitHub.
• [x] Find out how to convert words in double-quotes into backticks.
  • [x] Please review this hackforla/UI-UX#16 (comment)
  • [x] Please review this Test of Markdown converter guides#10 (comment)

[abenipa3]

Sunday Meeting Minutes (10/10/21)

• Discussed mock-ups with different styles for Guide Authors
  • Feedback: Adjust font size for "Peer Created" and "The guide..."
  • Updated font size. [New Mockup Link]
  • Question: Is there a way to copy presets (Font Type Sizes) from Hack for LA's Figma to Guides Team?
  • Need to research.
  • Share this Guide Option:
  • Our Guides planned to have the page card above the Guides Page. (Look for notes to see if we apply to mvp)
  • Update: This option will be after MVP https://github.com/hackforla/website/issues/1630#issuecomment-926832458
• Discussed Accessibility Issue regarding using <strong> </strong> rather than <b> </b> with Dev, Design, PM Teams.
  • Dev Team: There will be an audit of the website to ensure that the bolds are using <strong> </strong> .
• Discussed UX/UI Accessibility (https://github.com/hackforla/UI-UX/issues/16#issuecomment-939553531)

  Text or buttons that should be clicked/selected (e.g., Sign-In) Choose the Confirm button.

  Text that the user enters word-for-word (e.g., user is instructed to enter xyz into this field) Enter "/Remind" into the field

  Text that refers to something on the page Their name and email will appear in the Waiting to be Confirmed header.

Action Items

• [x] Find out how to convert words in double-quotes into backticks.
  • [x] Please review this Test of Markdown converter guides#10 (comment)

[abenipa3]

Mockup Updates - Guide Authors

Made updates to mockups from the Sunday meeting's feedback.

• The first mockup has "Peer created" and "This guide..." both with font-size: 18px
• The second mockup has "Peer created" with font-size: 18px and "This guide.." 16px

Please see the [link] for the updated mockup! Feel free to send me feedback. Thanks.

Other Updates

Reached out to UI-UX Channel to inquire about Figma Plug-In that helps testing accessibility.

• Waiting for response.

[github-actions[bot]]

@alyssabenipayo

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, October 12, 2021 at 12:02 AM PST.}

[abenipa3]

Update

Progress:

• Reached out to UI-UX Channel to inquire about Figma Plug-In that helps testing accessibility.
  • No response, but read from Figma's article that recommended some plug-ins we can look into.
  • [Article Link]
• Updated Mockups as seen in this comment.
• Created documentation for Doc to Markdown Converter for our team's references. [Link]
• Able to find out how to replace double-quotes with backticks. Applied it to the layout, but need to make it work.
  • Included links under this comment that provided ideas on how to do this with liquid.

Blockers:

• Found out there are texts that have "double quotes" that is not a code copy block like /remind
  • Will need to find a method that will only focus on specific strings with double quotes

Example

 

• It's been a busy week. Will be busy next week as well so hope to get more coding done during the weekend before then.

Availability: 3

• Only free on Monday.
• Will be away from Tuesday through Friday.

ETA: 10/18/21

Note: We discussed the addition of the Share Page Card last Sunday (whether or not it will be included in MVP). According to https://github.com/hackforla/website/issues/1630#issuecomment-926832458, it is our plan to add it after publishing our MVP.

Resources

How do I escape quotation marks in liquid? Liquid - Replace Share Page Card Discussion

[ExperimentsInHonesty]

@alyssabenipayo

Figma

We liked the same size font for each set of words in the Authors section. I also changed the wording a little bit.

I noticed on the mobile that the font size is 15, I thought that the minimum font size for accessibility was 16. Is 15 being used across our site on mobile?

Markdown Converter Documentation

Is is not possible to delete or fix some automatically some recurring errors. Could we build a GHA to do that?

Given that the converter throws some errors when the images are not in a path that it recognizes, would it work to download the images first, then put the file and the google doc and the images in the same folder, then run the converter. Would it see the images?

Re adding extra spaces. When is this necessary? Is this not going to be handled by the CSS? For instance spacing before and after headings and subheadings?

Double Quotes

Found out there are texts that have "double quotes" that is not a code copy block like /remind Will need to find a method that will only focus on specific strings with double quotes

Can you provide an example

Share Page

Note: We discussed the addition of the Share Page Card last Sunday (whether or not it will be included in MVP). According to #1630 (comment), it is our plan to add it after publishing our MVP.

Yes, we will not be using the section, but I would prefer to have the design now, so that we don't end up with another designer , designing it. However we can leave it out of the build.

[abenipa3]

Things Discussed on 10/15/21

Markdown Converter Documentation

• Could we build a GHA to minimize the errors?
• How about converting the google doc to word have it local into images?
  • See if Markdown converter that's desktop or not web-based?
  • Something in our own server?
• CSS will control the spaces between the headings/subheadings.
  • If there is anything that needs editing in the Guides, let the team know.
  • Ideally, we want the Guide to automatically apply the spaces/format without needing to code directly into the Markdown.

Double Quotes

• We are currently going through the Guides to apply this https://github.com/hackforla/UI-UX/issues/16#issuecomment-939553531

Share Page and Contribution Section

• Reviewed and edited How to Set Reminders in Slack v4 (See for example)
• Both will not be in MVP but will be in the Design
• Contribution Section
  • There will be links (Google Doc and Google Form)
  • Design
    • Show Google Doc and Google Form
    • Without icons
  • Since it will not be MVP, we could hide it with div.
• Share Page
  • Will still appear above the Guide Pages Card.

Future of Guide Pages Discussion

• Creating Guides through CMS
  • Similar to academia, would be nice to have a CMS for the team to create Guides (Markdowns).
• How do we envision our Google Forms be created?
  • Two Directional:
    • How to improve?
    • How did it help you?
  • Have the Google Form prefilled based on the Guide that the user interacted with.

Action Items

• [x] Create Design including the following:
  • [x] Contribution paragraph under Guide Authors.
  • [x] Share this Guide

Moved the following action items to the latest update:

• Research how to minimize errors with GHA.
  • Alternatively, look for other Markdown converters.
• See if we could provide an example of an area where we need extra spaces.

[abenipa3]

Update as of 10/17/21

Created two new mock-ups, including Contribution Page under Guide Authors and a page card called Share this Guide.

Figma Link [here]

[ExperimentsInHonesty]

@alyssabenipayo please add the links to the text at the bottom of the figma page. See the Slack Reminder google docs guide for appearance of sample text

Please also move the Share this Guide section to the bottom.

Also we changed the text above the pictures of the authors (in the slack reminder google doc and the last version of the figma), however it seems like a old version of the text has returned. It currently says

Peer-created guides are an important part of Hack for LA’s Culture. Help us to make it better by posting any comments directly next to the content.

and it should say

Peer-created guides are an important part of Hack for LA’s Culture.  They are created by our Volunteer Members based on effective processes developed on our projects.

[abenipa3]

New Guide Design Updates

MVP

Desktop


Mobile


Post-MVP

Desktop


Mobile


Action Items

- [ ] See if we could implement Components to Guides' Figma

• [x] Add HfLA's Design System to Guides - [ ] Research how to minimize errors with GHA. ~~ - [ ] Alternatively, look for other Markdown converters.~~ - [ ] See if we could provide an example of an area where we need extra spaces. Moved to the latest update. [10/25/21]

Resources/References

How do I escape quotation marks in liquid? Liquid - Replace Excellent Level Discussion Share Page Discussion Spaces between Images and Steps Discussion (Desktop) Spaces Hierarchy Discussion (Desktop)

[ExperimentsInHonesty]

@alyssabenipayo

• [x] MVP desktop, the icons for the users are not lining up together. please make it look like the MVP mobile

• [x] The authors names and links should be followed by more space between it and the next line (just like in the guide itself where we are using more space between step1 and step 2 or a paragraph with a heading and the next heading. I have put a screen from the MVP mobile. Please also check the desktop. What we are most looking for is consistency about the design rules across the whole guide.

• [x] Post MVP mobile, the space is missing and the text "if you would like to contribute..." is not bold. Please make it consistent.

[github-actions[bot]]

@alyssabenipayo

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, October 19, 2021 at 12:03 AM PST.}

[abenipa3]

Update: Not much to update while I'm away this past week, except:

• Started making adjustments according to https://github.com/hackforla/website/issues/1630#issuecomment-947748753.
• Added design system to Guides Figma.
• Found this article that shows how to add components from HfLA Figma to Guides Team. (Need read through it again and figure out how to apply it with the instructions provided.)

Will also review the desktop and mobile mockups again to ensure that they follow the design system. Thanks!

[abenipa3]

New Guide Design Updates (10/25/21)

MVP

Desktop


Mobile


Post-MVP

Desktop


Mobile


Action Items

• [x] See if we could implement Components to Guides' Figma
  • [x] Add HfLA's Design System to Guides
• [x] Research how to minimize errors with GHA.
  • [x] Alternatively, look for other Markdown converters.
• [x] See if we could provide an example of an area where we need extra spaces.

Resources/References

How do I escape quotation marks in liquid? Liquid - Replace Excellent Level Discussion Share Page Discussion Spaces between Images and Steps Discussion (Desktop) Spaces Hierarchy Discussion (Desktop)

Possible Discussion with Design Team

• Revamping Guide Design System to include new spaces hierarchy.
• Copying Components from Hack for LA website to Guides Team with Master Plug-In [Youtube Link]

[abenipa3]

Guide Pages Design System Update

The following notes will be used as a reference for our Design Team in updating our Guides Pages Design System:

• Font Size Hierarchy

  • Heading 1 - 36px
  • Heading 2 - 24px
  • Heading 3 - 20px

• Space Hierarchy

  • Between Step # and Image - 24px
  • Between Image and Next Step - 48px
  • Between Sections - 48px
  • Between Sections and Subsections - 40px (except between the end of option 1 and beginning of option 2)
  • Between Section and Sentence/Paragraph - 20px

• Images

  • Add Drop Shadow to the images according to this format:

Resources

Font Size Discussion Spaces between Images and Steps Discussion (Desktop) Spaces Hierarchy Discussion (Desktop)

[abenipa3]

10/28/2021

Progress:

• Edited CSS to match space hierarchy from design
• Added a new hero section to the guide page.
• Doing research on alternative Doc to Markdown converters.

Blockers:

• Figuring out how to extract Guide Authors section from content to place it in its own page card.
• Need to edit JavaScript to have arrow follow the user as they scroll.

Availability: Open

ETA: 11/6/21 - 2FA Page For Now

Other Updates

• Discussed with Design Team in regards to revamping the Design System for the Guides.
  • Kristine will create a new issue for designers to take on.

[abenipa3]

11/3/2021

Progress:

• Updated CSS to apply font hierarchy.
• Found possible solutions for extracting "Guide Authors" section from content.
  • Working on updating liquid code for guide page layout to be able to extract the "Guide Authors" section

Blockers:

• Learning more about Liquid.
• Need to edit JavaScript to have arrow follow the user as they scroll.

Availability: Open

ETA: 11/6/21 - 2FA Page For Now

Will be attending Guide Teams meeting on Friday (11/5/21)

Inquiry for this Friday

https://github.com/hackforla/website/issues/1407#issuecomment-907718418

[abenipa3]

11/5/2021

Progress:

• Figured out how to split the Guide Authors from the content and place it in it's own page card.
  • Updated liquid code.

Before Updating


After Updating

 Will add the LinkedIn and GitHub icons next.

Blockers:

• Figuring out how to create an image folder path with liquid to address this https://github.com/hackforla/guides/issues/10#issuecomment-896934745
  • Will most likely reach out to Developers from our team to help if I don't figure something out by Sunday.

Availability: 5-8

ETA: 11/6/21 - 2FA Page For Now

Inquiry for this Friday

• Clarify if we want to keep the FAQ in a regular format as mentioned in here https://github.com/hackforla/website/issues/1407#issuecomment-907718418
• Who are the Guide Authors for the 2FA Guide?

[abenipa3]

Things Discussed 11/5/21

• Reviewed prototype so far.

Action Items

• Test on How to Set Up Slack Reminders.
• Learn how to write a script for the following:
  • Delete error messages after using the Doc to Markdown Conversion
  • Find section: Guide Authors and create a new page card for it.
  • Script that takes the first paragraph as the Overview (What's in the Guide?)
  • Script that adds front matter to the page (and front matter would have display:false, if needed)
• Ask developers if I can't figure out the previously mentioned bullets along with:
  • A way to call the image folder path.

[github-actions[bot]]

@alyssabenipayo

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 Monday, November 8, 2021 at 11:03 PM PST.}

[abenipa3]

11/11/2021

Progress:

• Unfortunately, I was sick this past week, so I was not able to make much progress.
• Doing better now, so planning to make progress this weekend and create an update.
• Reached out to our Dev Team to see when we could collab so that we could resolve the image folder path issue.
• Will be able to attend the Guides Meeting next Wednesday on 11/16.

Blockers:

• Mentioned under Progress.

Availability: 5-8

ETA: 11/30/21