Roles tab going over current positions and who they are and open positions.

Since many people are experiencing dependency issues while trying to spin up local copies of the current project, and the site looks a little dated, we've been looking at a redesign and rebuild using either vanilla HTML/CSS/JS or maybe React/Gatsby.

This issue serves as a start point for the redesign process.

Join us on Github and Checkout Project Ideasbuttons are not aligned.

Perhaps we can have the "Events" tab not redirect to the Meetup page. Maybe we can embed some of the information on Meetup using the Meetup API.

https://www.meetup.com/meetup_api/

Feature photos in a carousel on the landing page (include captions to highlight venues)

Performance

• Eliminate render-blocking resources
• Preconnect to required origins
• Properly size images
• Serve images in next-gen formats
• Ensure text remains visible during webfont load
• Serve static assets with an efficient cache policy
• Minimize main-thread work
• Avoid chaining critical requests
• Keep request counts low and transfer sizes small

Best Practices

• Links to cross-origin destinations are unsafe
• Browser errors were logged to the console
• Add favicon

Accessibility

• Background and foreground colors do not have a sufficient contrast ratio.
• or <iframe> elements do not have a title

Manually check these for a11y:

• The page has a logical tab order
• Interactive controls are keyboard focusable
• Interactive elements indicate their true purpose and state
• The user's focus is directed to new content added to the page
• User focus is not accidentally trapped in a region
• Custom controls have associated labels
• Custom controls have ARIA roles
• Visual order on the page follows DOM order
• Offscreen content is hidden from assistive technology
• Headings don't skip levels
• HTML5 landmark elements are used to improve navigation

Currently the list of projects in the page is embedded as a Google Docs. It would be nice if we could make that page very seamless without windows in that page.

help with onboarding

Update the Readme to have some more detailed instructions on how to run/contribute, some directory structure, and proper handoff notes in case someone else needs to pick it up

Sync with Meetup

URL should redirect to https

Add license for open source project

Not a high priority since the page load time is already sub 3 seconds, which is already within typical user expectation times for a fast site. Still nice to do just for continual improvement.

We're serving several resources that could have way longer expiration dates like most of the images and js. We could set some longer expires headers in the nginx configuration so user browsers cache resources and faster subsequent loads. Should also reduce bandwidth usage. This seems to be the relevant config:

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
    }

    location ~*  \.(pdf)$ {
        expires 30d;
    }
}

The other page speed issue we could be working on is scaling and optimizing images for the size they'll actually be in the page, instead of putting full resolution images there and scaling them down in the css. That should improve speed and also save on bandwidth usage.

https://www.codeforsanjose.com/img/cfsj_withcfa_at_bowersinstitute.jpeg is resized in HTML or CSS from 4032x2281 to 350x198. Serving a scaled image could save 1.6MiB (99% reduction).
https://www.codeforsanjose.com/img/cfsj_oct2017_rrg.jpg is resized in HTML or CSS from 1194x723 to 350x212. Serving a scaled image could save 151.3KiB (91% reduction).
https://www.codeforsanjose.com/img/bg.jpg is resized in HTML or CSS from 1200x675 to 555x312. Serving a scaled image could save 143.3KiB (78% reduction).
https://www.codeforsanjose.com/img/cfsj_ndoch_vbansal.jpg is resized in HTML or CSS from 1200x675 to 350x197. Serving a scaled image could save 132.5KiB (91% reduction).
https://www.codeforsanjose.com/img/logonav.png is resized in HTML or CSS from 300x300 to 44x44. Serving a scaled image could save 15.5KiB (97% reduction).

We could also be using a free CDN like Cloudflare to serve resources from geographically closer locations to requestors. Could also reduce bandwidth usage/provide a shield against DDoS attacks (not really likely, but doesn't hurt to be prepared).

There's some simple stuff that could improve the on page SEO of the main site.

• The main value proposition should be in an <h1> tag since it's effectively the most important piece of content on the page: "Where makers, designers, developers, and subject matter experts come together to use technology to solve civic problems." That also means "Code for San Jose" doesn't need to be there in the <h2> tag, so I'd just remove it completely since the site title is already in the top nav, making that redundant
• The meta description tags (both normal and open graph) should have an actual real description of the organization and work.
• <title> tag should have a short description coming after Code for San Jose, with a title ~ 50-60 characters for best display in SERPs (search engine results pages)
• There's one image that's 1.6 mb and unoptimized dropping the page speed
• <img> elements could be using srcset attributes for improved page speed
• URL structure could be a little more directly descriptive for the About and Projects pages (currently /docs/home and /docs/projects respectively, should be /about and /projects to match anchor text)

Silicon Valley Strong is listed 2 times on the Projects page.

It should only be listed once.

Sync blog with Medium by adding old blog posts on Medium, then linking or embedding Medium... or somehow incorporate Medium posts into the existing Blog infrastructure.

In the bottom of the page with the pictures, the boxes are not even.

The buttons at the bottom of each div are not evenly sized or space across each of the divs. Perhaps it's worth centering those bottons?

The link to to donate to Code for San Jose is now:
http://codeforamerica.org/donate-to-a-brigade

• Update the link in the index.html#donate section
• Add a reminder to donors to select your Brigade’s name from the dropdown.

Visiting http://codeforsanjose.com/data/ returns web page with the following text

Cannot GET /data/

Maybe instead of having the blog tab redirect to our Medium page, we can perhaps embed snippets of the blog into the site using the Medium API?

https://developers.medium.com/

Include some photos from Actionspot hack nights

If you hover over the Discord icon on the homepage, a tooltip pops up saying “Slack”:

Currently points to https://www.codeforsanjose.com/assets/html/volunteer.html

Should point to https://www.codeforsanjose.com/volunteer

Maybe we should add a projects tab that goes to /docs/projects

Images are currently just plain img tags ie
<img src="source.jpg" >

For full responsiveness, all images should be utilizing srcset and sizes attributes to do responsive image scaling so it loads the appropriate resolution image for the size of space it will be occupying. That also impacts page speed, since the browser no longer needs to download a higher resolution image than necessary for the fetching screen size.

<img src="one.png"
     srcset="two.png 100w, three.png 500w, four.png 1000w"

     sizes="<media condition> <width>,
            <media condition> <width>,
            <optional default image width>">

I believe the C4SJ site uses jekyll, which has a plugin to autogenerate the necessary markup:
https://github.com/wildlyinaccurate/jekyll-responsive-image

Tutorial to implement here:
https://medium.com/ivo-valchev/jekyll-responsive-images-with-srcset-5da131415d0f

We should link to the @[email protected] Mastodon account anywhere we’re currently linking to our other social network profiles. This profile has a link to the website that Mastodon will mark as “verified” as soon as the website links back to the profile:

<a rel="me" href="https://sfba.social/@opensourcesanjose">Mastodon</a>

(For free!)

View https://www.codeforsanjose.org/events

The subtitle text and the body text for the first section titled "New to CFSJ" is generated placeholder text.

Scroll down and the subtitle text right under "Frequently Asked Questions" also has placeholder text. FAQ answers are also placeholder text.

I'm assuming that should be actual content.

The CfSJ site (currently using WordPress) has a static page [1] listing projects. This issue is to dynamically build that page by extracting metadata from the CfSJ projects on GitHub.

The dynamic page uses the Code for America API [4], primarily its projects endpoint [2]. That API returns JSON. Examples of brigade project pages built with the API: San Francisco [5] and BetaNYC [6].

This dynamic page will be maintained in this GitHub project. A read-only copy will be copied/published to the CfSJ WordPress site. The HTML-rendered URL for the master page in this GitHub project is [3].

[1] http://codeforsanjose.com/projects/
NOTE: This page was changed from static to dynamic in August, 2015 by Anusuya. This page is now the [8] with the C4SJ Wordpress and styling merged in.
[2] http://codeforamerica.org/api/#api-projects
[3] http://codeforsanjose.github.io/projects/ (i.e., the rendering of GitHub file in [8].
[4] http://codeforamerica.org/api/
[5] http://codeforsanfrancisco.org/projects/
[6] http://betanyc.github.io/betanyc-projects-list/#/
[7] Brigades Projects Page discussion: codeforamerica/brigade-alpha#89
[8] source in GitHub for proposed dynamic page: https://github.com/codeforsanjose/codeforsanjose.github.io/tree/master/projects

Anytime we link out to the code of conduct page on the codeforsanjose.org website, it's a broken link

That's because there is no codeofconduct.html file in the repo.

We need to add one.

How to Replicate:

1. Got to http://www.codeforsanjose.com/codeofconduct.html
2. You are redirected due to page missing
3. Check the code for san jose website repo
4. Observe: no codeofconduct.html file

The mailto: anchor has the incorrect email address.

It currently points to: [email protected]

This seems to be the old version of the site, do we want to mark this repo as retired or have some kind of integration to reflect that it's up on Webflow (a CMS solution)?

Photos aren’t showing up on the blog posts

Alison Requested that we add some promotional info about Bowers to our website. Sounds reasonable given how generous they are in proving us with a space!

The Projects menu item in the nav menu is not highlighted as active when a user is on the Projects page.

Instead, the About page is highlighted active. This might be because both pages are based on the docs page, so might need more specific route checking for highlighting the active navigation tab.

The page build completed successfully, but returned the following warning for the master branch:

Your site's DNS settings are using a custom subdomain, www.codeforsanjose.com, that's set up as an A record.

We recommend you change this to a CNAME record pointing at codeforsanjose.github.io.

For more information, see https://help.github.com/articles/using-a-custom-domain-with-github-pages/.

I just opened the code for san jose website on a 13 or 14 in laptop and the top nav bar doesnt have enough space for all the menu items at a width of below 1200px so the search bar and social icons move down into the nextrow, making the top nav bar extra large heightwise.

This causes the top bar to cover some of the top of the main hero image area and main value proposition text. Probably need to add another breakpoint on there for 768 to 1200px or extend the 768 px breakpoint to cover to 1200px.

The Favicon isn't loading, with a 404 response when it tries to fetch that resource.

The line loading the resource is in the <head> and it reads: <link rel="shortcut icon" href="/favicon.ico?1">.

We should double check the path and the existence of the icon file. Another note, we don't have to convert the icon file into an .ico file, .png files are also valid in HTML5, just need to specify the correct type and sizes attribute.

Donate page body text is placeholder text.

That should be content.

Leadership team page: https://www.codeforsanjose.com/about

New Executive Team

American Factfinder
Fremont Open GIS Data Portal
Oakland Open Data Portal

Give community partners / non-profit groups the ability to suggest a project and connect with the CFSJ team through the website.

Add this site. Prominently :P

https://github.com/vta/GIS-Resources-Santa-Clara-County

Embed tweets from @codeforsanjose on homepage