Code Monkey home page Code Monkey logo

alpha's Introduction

Alpha

Alpha.CA.gov is no longer being updated.

This was a 12-week pilot project in 2019-20 that explored new approaches for state websites.

If you need the current state homepage, visit CA.gov.

Fellow Californians,

We're reimagining CA.gov with and for the people of California.

Our first step: Make CA.gov easier for Californians to use. We're working to help you access the services and information you need.

And we invite you to join us.

Follow our progress

We're sharing our work and insights on our blog and GitHub.

Share your feedback

Please take our five-minute survey to help improve CA.gov. Thanks in advance for sharing your thoughts.

We're excited to work with you.

Team Alpha.CA.gov

Interested in how we got started? Learn more.

Building

Prerequisites

Build command

npm run build

Concatenates, minifies and removes unused CSS.

Translations

We are using a google spreadsheet as the datasource for our content strings because it has a cool integrated formula to provide automatic translation values we can use while we wait for our human translators to review. The spreadsheet is at https://docs.google.com/spreadsheets/d/1pjhiNZQtlb1KCrkdMTbYcvzhZkffNQpG5ekpmAU_SkM/edit#gid=0 and is accessible to alpha members. We publish the strings publicly when the spreadsheet is changed. To pull in new translations:

  • Add your new strings to the google spreadsheet
  • Run the command: npm run gimmetranslations to pull the latest translation strings into the local file system
  • Run the build command to regenerate the site with latest translations: npm run build
  • Checkin the updated src/lang-global.csv along with your file updates so the builds run on the server which do not pull latest translation strings will run with latest content.

Files only in /public

Some static files are only present in the public folder and are set to be ignored by the webpack clean plugin which deletes stuff in there with every build:

  • web.config (webserver configuration)
  • robots.txt
  • sitemap.xml

Concatenates, minifies and removes unused CSS, builds template partials.

Class event triggers

Please follow the convention of using classnames with a js- prefix when using a selector in javascript to interact with an element. We should not allow any CSS attributes to be added to the js- classnames so these will be used only by javascript and can be safely removed if a listener is changed.

alpha's People

Contributors

aaronhans avatar artuoma avatar carterm avatar chadabratton avatar dependabot[bot] avatar humancenteredhuman avatar jbum avatar lukefretwell avatar m-sullivan7 avatar mark-tyler avatar orielgomez avatar ssiwan avatar xjensen avatar zakiya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

alpha's Issues

What is the best way for us to make sure static assets are compressed in azure

Could we check in with other teams or do our own research and come up with a deployment process we should follow that will make sure our static assets are compressed (gzipped or brotli'd) when delivered to end users.

We can put them in blog storage or pre compress as part of the build process and deliver directly from our server, I don't have an opinion on the best way to accomplish this, we can use whatever process is easiest in our azure environment

Fix CI-CD Deployment Process

PR from any branch should NOT deploy to staging. It should be for specific branches such as "master" or "staging" only.

Migration for Alpha.Ca.Gov Production Server

Alpha.ca.gov is currently running on an app service with limited resources and no CDN.
Task: Migrate to new app service, app gateway, and implement CDN

  • Determine requirements for DNS request
  • Submit DNS Request to point alpha.ca.gov to new CDN endpoint
  • Create new CDN endpoint and custom domain to point to App Gateway
  • Create new App gateway rules, listeners, http settings, and health probes to properly monitor and direct incoming traffic to alpha.ca.gov from the CDN
  • Upload cert/pfx to Azure Portal - Vault for alpha.ca.gov
  • Staging / Prod Swap process tested

css cleanup

  • remove unused css (run uncss or similar tool to strip out unused rules from bootstrap)
  • combine remaining css (combine current multiple css files into a single one with build tool)
  • if uncss step is effective we can look into how to make that an automatic part of the build process

Implement Strict Transport Security (HSTS)

Describe the bug
We should implement Strict Transport Security (HSTS) in order to prevent man-in-the-middle attacks where people specifying the HTTP address can be redirected to a malicious site.

More information here...
https://hstspreload.org/

To Reproduce

  1. Open Chrome Developer Tools -> Network
  2. In Chrome Browse to "http://alpha.ca.gov" (not HTTPS)
    First value for "alpha.ca.gov" shows the following

Request URL: http://alpha.ca.gov/
Request Method: GET
Status Code: 301 Moved Permanently (from disk cache)
Location: https://alpha.ca.gov/

Expected behavior
The browser should automatically go the the HTTPS site without triggering a redirect.

related to...
#13

Update homepage: Add sprint 1-2 user needs to live site: alpha.ca.gov

We need to update our "homepage" to add the prototypes we have "shipped" and add to the "live" alpha.ca.gov site.

This will require:

  • Update content type in design system homepage
  • Document/create process to go from "shipped" to "live" and in production.
  • User stories ready for posting: minimum wage, state holidays, birth certificate (someone please add the correct links)
  • Clean up prototypes
  • Finalize #48 (this is an experiment and feedback)
  • @jpetrucione to think through release Social media messaging

build process updates

remove gzip junk, handled on server
document prerequisites and build steps in repository readme
streamline build steps to remove temp generated files
move all files to be deployed into new public directory

Design system font clean-up

  • Make sure 'Public Sans' is the default font for all styles
  • Any font designated at '300' should be '400' (@artuoma I think this is what we should do - on the Cal grant prototype, the .lead class looks thin)

Create Feedback form (content + API)

We will be initially using SurveyMonkey to collect feedback on each form. (It's the most efficient method we have right now). Plus Hilary is already using this.

Prior issue/draft content: #48

automated perf/accessibility checks in deploy pipeline CI/CD

Use this tool https://github.com/treosh/lighthouse-ci-action as part of our build/deploy process

Right now there is an azure pipeline process which is deploying every branch to staging. That could be modified to only deploy the staging branch to staging, then this github action can run and audit the site there. Going to be some discovery and learning during this process and we should distribute the knowledge gained throughout the team.

High level goal:
Use an automated tool which generates reports against a running version of the site using branch which we want to deploy and gives us:

  • Performance measurements
  • Accessibility measurements

Regressions in these scores should block promotion to production
Scores should be able to be tracked over time, ideally reports from each build would be viewable with the cute score dial graphics

cache busting on static assets

Integrate dynamic file naming for static assets like js and css which update often

this can be done along with other developer experience upgrades like adding watch process to rebuild automatically

Create State Holiday ICAL service

Create a service that returns state holidays in ical format.

  • Create Google Calendar
  • Enter Google Calendar dates
  • Service Hello World connection to Google Calendar
  • Final product that returns completed ICAL file

Continuation of...#63

review font integration

  • do we have latest version of open sans
  • is the font integrated in the most performant manner possible

Redirection to canonical domain name

Assuming the official domain for the alpha site is alpha.ca.gov (recommended) then www.alpha.ca.gov should eventually (but quickly) become a 301 (permanent) redirect to alpha.ca.gov.

https://www.alpha.ca.gov should not be marketed but will then work just in case someone mistakenly believes the www is necessary.

How the redirect is configured/created depends on the domain registry and/or hosting environment used.

Additionally, you might plan for a sequential release plan that allows you to maintain alpha.ca.gov as the bleeding edge experimental version when www.ca.gov is replaced by the new site.

Cheers!

Allow all file types on website

The web config only allows specific file types currently. As we solution forward, we are only going to host static content, so there is no reason to limit file types. It could create issues in the future if file types are not allowed.

Allow all file types on the server.

Create sample "Function as a Service"

Creating a working Function As A Service prototype will make sure we have data options should our alpha want access to anything other than static data.

Recommend we make an offering that returns state holidays as a JSON result, which could feed other services that return HTML or ICAL.

Develop how best to serve up and manage news content type

Is your feature request related to a problem? Please describe.
We discussed ways to serve up blog/news content types.

Describe the solution you'd like
We can do static or using a lightweight content management system (a la Gatsby).

Describe alternatives you've considered
@aaronhans?

Google Analytics

  • setup account
  • add permissions
  • add to website Done, #5 (comment)
  • Draft summary of what we do have access to DRI- @carterm
  • Close out ask with departments we reached out to

component library v0.1

Create at least 3 components based on widgets we are already using in our current content:

  • tiny ca.gov top bar
  • jumbotron
  • accordions
  • autocomplete
  • footer

Review how these look when integrated in storybook vs other ways of presenting a "design system"

Add feedback option

As a visitor/user of Alpha.CA.gov, I would like to have the option to submit feedback so I can share my ideas or issues I'm having while using Alpha.CA.gov.

  • create /feedback page
  • add form to page
  • add text to page template footer (cc @humancenteredhuman for text)
  • form runs over the bottom 'Alpha' banner.
  • The double scroll on the form embed and page is not great UX, especially on mobile.
  • Make form text and button background #000000.

Launch 'Hello world'

  • finalize content/call-to-action (Document)
    Survey link: https://www.surveymonkey.com/r/AlphaCAgov
  • update Public Sans files (#17)
  • finalize/set-up hosting
  • clean up code/design (#11)
  • add analytics (#5)
  • publish files
  • submit DNS request
  • map DNS
  • Make sure the meta description is what we want it to say (see below what it currently is).
  • Remove the commented code that's not being used.
  • Alphabar should be #000000. OK for the official bar to be like it is in the comp (or just make it #000000).
  • The state in between the 'Hello' and 'California' isn't working on mobile, but we should really keep it above and not insert images in between structured mark-up.
  • Remove the space between paragraphs and 'Team Alpha.CA.gov.' If we feel like there needs to be more paragraph space, add it to the CSS.
  • Apply user feedback in next iteration, experimental language, (along with minimum wage page live).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.