Website Checking Tools¶

Development process¶

There are two branches, "main" and "develop"

The "main" one is the main site. When it is pushed, the site is automatically redeployed.

The "develop" goes to the "dev" version of the site. We push to this when

To avoid a confusing edit history, we want "develop" and "main" to always share the same history, with "develop" having additional changes being previewed prior to merging. If we start merging "main" and "develop" back and forth we'll get spaghetti history and it'll be hard to keep track of which changes have been made, and where.

The process for making changes is:

1. create a new branch off of main
   1. git checkout main
   2. git branch my-branch
   3. git checkout my-branch
2. make changes and test locally on that branch
3. check if "develop" is even with "main" (meaning, they should have the exact same commit)
   1. git show-ref main develop (the branches should all have the same commit hash)
   2. if "develop" is ahead of "main" then someone else is working on previewing/merging a change (they're on step 5), check in with them
4. using "git rebase", apply your commits to the "develop" branch (this re-applies the changes you made in your branch, onto the develop branch)
   1. git checkout develop
   2. git rebase <my-branch>
5. push "develop" and confirm that the dev site is displaying properly, ask other people to review it, etc
6. fast-forward "main" to match "develop"
   1. git checkout main
   2. git merge --ff-only develop

Responsiveness/mobile¶

• Firefox Responsive Design Mode (CTRL + SHIFT + M shortcut on linux)
• Resize the window to really small (mobile, or xs- in bootstrap, then increase a little to about 400-800 px when the medium viewport must trigger, or md I think in bootstrap)

Accessibility¶

• WAVE - https://wave.webaim.org/
• Firefox - Right click anywhere on the screen and "Inspect Accessibility Properties"
• Accessi - https://www.accessi.org/
• pa11y.org - https://pa11y.org/
• For contrast, my favorite is squinting my eyes… similar to how you can do to simplify colors in a painting… I find that when the text color fades and almost disappears, that's normally because of bad contrast, and users with disabilities/diseases that cause blurred vision probably won't be comfortable reading it (I did that for Arvados.org and noticed some text that was hard to read, before testing with WAVE & accessi :joy: I just try never let anyone see me doing it) - https://www.sightsize.com/the-value-of-squinting/
• ORCA Linux screen reader - I find that these automated reports are useful for auditing, but for really confirm if a site is accessible, the best is always to ask a person with a disability to test it, or use a screen reader. Windows has a screen reader that's a lot better than ORCA.

Performance¶

• Chrome Lighthouse - https://developer.chrome.com/blog/lighthouse-load-performance/

Link Check¶

• W3C Link Checker - https://validator.w3.org/checklink

Typos & Grammar¶

• WebStorm (it has a "Inspect" feature that uses a dictionary for typos, and a mix of custom language-rules & LanguageTools for Grammar). Not perfect, and I only run it when I have the code (I didn't use it for Arvados.org)

SEO¶

• These two pages recommended by google, for schema.org tags - https://developers.google.com/search/docs/advanced/structured-data (e.g. https://validator.schema.org/#url=arvados.org)

JS/CSS¶

• Firefox console, checking for warnings/errors.