Overview

To determine if there is a way to replicate obfuscation available in frameworks like react and vue, with a combination of environment variables and storing secrets

resources:

• https://gist.github.com/nicolashery/5756478
• https://developer.github.com/actions/managing-workflows/storing-secrets/

This is a tracking issue for the steps to take to make the cut-over from Netlify to gh-pages official.

These steps more-or-less have to happen at the same time/close together.

1. GitHub

• fix #106 (proposed solution in #107)
• update the site URL in _config.yml
• make gh-pages the default branch
• remove Netlify webhook
• remove Netlify service integration
• remove Netlify deploy keys
• add a custom domain pointing to www.hackforla.org

2. DNS provider (Aplus)

• [x] configure a CNAME in DNS to point to the hackforla.github.io domain
• remove CNAME from Aplus because it is not authoritative

3. (The authoritative) DNS provider (CloudFlare)

• modify CNAME for www from hackforla.netlify.com to hackforla.github.io
• enable auto-HTTPS forwarding.

4. Netlify

• remove hackforla.org and www.hackforla.org domains from Netlify site
• delete the DNS zone in Netlify

5. GitHub (again)

• remove and then add back the custom domain to trigger HTTPS
• create a branch from master called netlify, push it, and delete master.
• release 2.0.0

/cc @abregorivas @ddrosario @ExperimentsInHonesty @jjandoc

Add Open Graph Markup tags to header.html in the _includes folder of the gh-pages branch

Guide: https://developers.facebook.com/docs/sharing/webmasters#markup

This is to ensure that when the website is shared on slack, facebook, twitter, etc. It automatically displays with an image and Title instead of just the URL.

Feel free to ask for more information if you don't know what text to put into the tags.

This is the new site in development: https://hackforla.github.io/website/
the files are in the gh-pages branch.

Here is the new standard: https://ben.balter.com/jekyll-style-guide/config/#url

The files that will need to be edited are any .html files in the _includes folder that reference images.

Footer icons are dark grey/black. They need to be white. Site can be previewed here: https://h4la.netlify.com/

Overview

Currently the response from the auto invite shows that it comes from Viky but it should come from Nina.

Action Item

We need to find out how configure slack to set which slack owner email is used to send the welcome response email.

We have a few redirects currently active on the Netlify site. We need to support these in the new gh-pages site as well.

Right now the code is set up to filter out the calendar items referencing our normal hack nights. However, because it's looking for an exact match using "!==", it is allowing the "Canceled" events to still show. The comparison needs to look for "Westside Hack Night" or "DTLA Hack Night" within the event name string instead of an exact match.

Under Projects
CurbMap Project Description
Links: Site link pushes to potential malicious path

Overview

Nina & Bonnie will setup a role email account in our hackforla.org gmail suite to host the new calendar and provide new API keys

On Hold

• Pending completion of #98 - Research issue
• And a future issue which will be the actual steps and implementation of the method designed in the research

Action Items

Nina & Bonnie will setup a role email account in our hackforla.org gmail suite
A new calendar will be setup with all the same dates as the current calendar
Generate new calendar keys

Dependency

Tabling for now due to lift required and release of VRMS 0.4 - you can check vrms by opening in a browser window https://vrms.io

Overview

We want to add people seeing / agreeing with the code of conduct before they can get a slack invite, without making it prone to breaking if CfA changes code of conduct that we are forking.

Background

HFLA code of conduct is located at https://github.com/hackforla/codeofconduct

Original ask

- but we have revised since then - see comments below in issue:
We need to add this to a page on the website.
This issue is site page called that holds our code of conduct.
The page should have an an accept / decline button at the bottom.
Accept button redirects to https://hackforla-slack.herokuapp.com/
Decline button redirects back to home page

Overview

We want to change it so you can't self invite to the slack channel without accepting the code of conduct.

Details

Right now if you go to http://hackforla.org/slack it redirects to https://hackforla-slack.herokuapp.com/

If you go to http http://hackforla.org/conduct it takes you here: https://github.com/hackforla/codeofconduct

Action item

???????????

Calendar API requests are getting blocked. I assume it's just a matter of white-listing the domain at h4la.netlify.com. We should also ensure that localhost and *.hackforla.org are white-listed.

Overview

There are different methodologies for determining site requirements. If we pick which type we want to use we can keep the team engaged.

Options

• In person Design sprint
• online survey of members
• Website User Behavior Modeling #128
• Other: ____________(please add other options to this document, or to comments).

Action Item

Please add your notes to this document.

The current project listing design and implementation worked well for the smaller number of projects that we started with.

We have a bit of a "good" problem now, in that both DTLA and Westside are going strong (and with the forthcoming South LA night, and maybe others in the future -- LA is quite large), so new project teams are spinning up left and right.

https://hackforla.org should be the preeminent showcase of our projects to the broader community.

Finding a project to join that interests you and matches your skill-set (existing or desired) should be easy.

Getting your new project listed should also be relatively straightforward. We'll probably need some governance to figure out when a project gets listed, and if/when/how it comes off.

Dependency

• Homepage launch

Overview:

Professionalize the HfLA website development environment by using appropriate versioning, setting milestones and releases.

resources:

• https://semver.org
• Engineering guide hackforla/engineering#16

examples:

https://github.com/CityOfLosAngeles/mobility-data-specification/releases

Include location as downtown

examples: api-calendar

Overview

We need a survey to evaluate the current user experience on the website and help guide the next phase of development

Action items

1. add a redirect from hackforla.org/survey to https://docs.google.com/forms/d/e/1FAIpQLSeaYOBwNdXnOErDcjN44D_e-95vulfEpvg0_2n4CTGZlZuUuA/viewform

Overview

Discussion about using branches to store approved pull requests, until we are ready to push a version update or pushing each version to gh-pages, as we are now, but then retroactively assigning version tag.

Action Item

Discussion

I believe the issue is that in assets/css/main.scss line 5 should be $absolute_url: "{{site.url}}"

Should just be a matter of copying over the CMS files (https://github.com/hackforla/website-redesign/tree/master/app/admin) to the static directory and updating configs as necessary.

Light house test shows that we could improve our performance by not using babel CDN.
Need the following:

• Refactor the following two files to only use vanilla javascript. No Babel
  "api-actionnetwork.js", "api-calendar.js"
• Update the head.html _include file to remove the Babel CDN script tag.
• Move issue #117 from icebox once this issue is completed

From @matikin9 in #17.

Icon should link to the HfLA Medium blog: https://medium.com/hack-for-la

Steps:

1. add WAVE chrome extension: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

2. visit gh-page live site https://hackforla.github.io/website/

3. click the extension and review the red flags.

4. Run the same steps for the development site (localhost). Ensure that the chrome extension has the "Allow access to file URLs" enabled.

5. Fix each issue and rerun test until no red flags appear.

6. Commit your changes and make a pull request.

After hitting submit the message shows that a valid email is required even though an email has been provided.

I was trying to contact HackforLA via the contact form on the website for the potential volunteering opportunity. Interestingly, my email address was sent to api.actionnetwork.org.

https://github.com/hackforla/website/blob/master/pages/index.vue#L201

I guess I will just reach out to someone here via opening issue 😃

Ref for debugging:

Overview

It looks like there are commits after the 2.0 tag was applied. Is there a way to fix that?

Action Item

Discussion Can and should we update 2.0 to commit to 74778e6e which seems to be the end of the CNAME edits. vs where it is now with 0f5c466.

The two forms should be broken out to individual components. Action Network API communication should be abstracted out to a service so that it can be shared between the two form components. Axios is the ajax library we're using. Quick sign up only needs to submit to Action Network, then can show a confirmation. Suggestion box first submits to Action Network, then submits to the Netlify form. See old JS here: https://github.com/hackforla/website-redesign/blob/master/app/scripts/main.js#L114-L160.

Dependency

#1898

Overview

We need to have our website be consistent on all browsers including government issued browsers so that our stakeholders can see our site.

Action Items

• ask the research lead to put a link to this issue on Bonnie's agenda with Julien with the following note: ready for contact with ITA regarding browser usage
• Identify current browsers being used by city stakeholders #19 (comment)
• Test website against the browsers
• Determine what we will fix/change if anything

Original issue text

Some ahem government entities ahem are forced to use IE in their offices. It was brought to my attention that the page does not fail gracefully in IE 11. We should look into whether or not there is a simple fix.

Overview

We need the next tag to assign to the next release

Action Item

Create the tag 2.0.1

Title: Clean Air LA
Description:
Partner/Stakeholder:
Looking For:
Links:

• Github?
• Social Media?

Needs an image too :)

This issue is being held until some other open issues are closed, and the site is ready to be reviewed.

WCAG 2 Checklist (https://webaim.org/standards/wcag/checklist).

Document what changes, according to the checklist, need to be made and submit as a reply to this issue or in a google doc.

The website to view is: https://hackforla.github.io/website/

The 3 events shown in the screenshot below take place 1 day after it is shown in the widget. For Example, Emily Uyeda is marked as visiting on Tuesday, but it is listed as Monday.

Here is the content to be added to master static/content/index.md

  - dek: >-
      Heart is a project working directly with the LA City Attorney’s Homeless Engagement and Response Team. The HEART program helps homeless individuals resolve eligible traffic and pedestrian infractions and related warrants and fines by engaging with relevant services. Hack for LA is helping them build a database and case management system to streamline their workflow and enable them to scale their program.
    image: /images/uploads/heart.png
    links:
      - name: Github
        url: 'https://github.com/hackforla/heart'
      - name: Slack channel
        url: 'https://hackforla.slack.com/messages/CDWKEBYBB'
    looking: >-
      Experienced full-stack developer, node.js / react
    title: Heart
    location: Santa Monica
    Partner: LA City Attorney’s Homeless Engagement and Response Team

This is the image that needs to be called heart.png and put into the folder master static/images/uploads/

Overview

Light house test shows that we could improve our performance by having a single js file.

On Hold

Reason: pending issue #112 completion

Discussion Item

• Check to see if Performance is above 80% and determine if it is necessary to do this step
  If it is, discuss with tech lead if its worth the hit to site maintainability .

Action items - on hold

• Combine the two files into one file called "index.js"
• Update the default.html script tags to pull in the new index.js file

Title: Spare
Description: Connecting people in need of clothing and other essentials with people in the community who have things to spare. Like one on one Goodwill. The main objective is to foster interactions between the housed and un-housed. The donation is the vehicle for building these connections throughout our community.
Partner/Stakeholder:
Looking For:
Links:

• Github - https://github.com/hackforla/spare
• Social Media?

Needs an image too :)

Here is the content for the file to be called heart.md.
This file needs to go into the gh-pages _projects folder

---
title: Heart
description: Heart is a project working directly with the LA City Attorney’s Homeless Engagement and Response Team. The HEART program helps homeless individuals resolve eligible traffic and pedestrian infractions and related warrants and fines by engaging with relevant services. Hack for LA is helping them build a database and case management system to streamline their workflow and enable them to scale their program.
image: /assets/images/projects/heart.png
links:
  - name: Github
    url: https://github.com/hackforla/heart
 #  - name: Site
 #    url:
 - name: Slack channel
    url: https://hackforla.slack.com/messages/CDWKEBYBB
looking: experienced full-stack developer, node.js / react
location: Santa Monica
partner: LA City Attorney’s Homeless Engagement and Response Team
---

This is the image that needs to be called heart.png and put into the gh-pages folder /assets/images/projects

Adding direct CTA elements to the website

The primary goal of the website being to have people attend a first meeting, to meet the group and understand what this is all about, helpful modifications would be:

• Replacing the top page newsletter subscription CTA by a direct, welcoming, invitation to attend next meetup.

• Adding precise information about next meetups (place and date) on the top of the page would also be helpful for users.

On Project Cards

• Adding clickable information regarding next meeting on each specific project card.

• Adding clickable buttons in place of a text list of skills on each project. Clicking on a skill button would open a module with a list of all projects in need of that specific skill.

• Adding a list of the civic topics targeted - as clickable buttons, on each specific project card. Clicking on that link would open a module showing a list of all the projects working on the same civic topic.

Showcasing finished projects: motivates newcomers

• Finished projects should be showcased higher on the page, as it demonstrates clear results of the work accomplished by the teams. It's very positive!

• Clicking on the card of the finished project could open a module with further details. It could show a video of the project, even a simple video with someone taking us through the different steps. (Also, video has a big impact on increasing traffic on the website (SEO))

Showcasing members: also motivates newcomers

• It would be useful to have a small presentation of members (a different one every week/month/quarter), just by giving a little testimony on what they worked on since they are part of HackforLA, what they enjoyed, learned, and accomplished. If members don't want to put up their picture, we can just use the first name as personification.

From @joshuazrobins:

not that this is a big deal, but can our contact form incorporate some sort of CAPTCHA system? while i enjoy getting contact form submissions to my inbox.. i’m afraid with so many bots coming through we might actually miss a real person’s submission

A lighthouse audit test recommended converting images to a next gen image and or to optimize images. We need to review our png and jpg images and improve the performance on our images.

Follow the guide at the following site.
https://developers.google.com/web/tools/lighthouse/audits/webp
https://developers.google.com/web/tools/lighthouse/audits/optimize-images

Need the following:

• An explanation of the process taken to convert existing images to new format and the savings in image size.
• The tool that was used
• The new images should be uploaded and the old ones should be removed.

There's a preview panel in the Netlify CMS. The preview panel is essentially a React component that provides an instant live preview. Would be great to get that working by anyone who has some React experience.

Still in planning mode. Need volunteer(s) willing to write posts.

Content ideas:

• Hack night recaps.
• One-time event recaps.
• Upcoming events - more frequently than our monthly newsletter.
• Calls for resources (SaMo space, SouthLA space, volunteers for events)
• Feature projects, a la CodeForPhilly:
  • https://codeforphilly.org/blog/not_in_philly--a_shared_call_to_serve
  • https://codeforphilly.org/blog/the_growth_of_greenstem
  • https://codeforphilly.org/blog/the_shared_values_that_built_cyclephilly
• Organizational information (Code For America updates, NAC updates, HFLA governance, project frameworks, etc.)

The gh-pages version of the site is missing its favicon. The code from master needs to be reviewed to see/replicate the favicons inclusion into the gh-pages version on the head.html page in the _includes folder.

The image may or may not need to be copied over depending on if it uses a unique image that is not already being used on the site.

The Code that Bonnie, Drew and Roland wrote needs to be integrated with the current version of the new website and then get the Google Calendar API working properly.