Project

General

Profile

Website Checking Tools » History » Version 5

Peter Amstutz, 08/11/2022 07:00 PM

1 1 Sarah Zaranek
h1. Website Checking Tools
2
3 5 Peter Amstutz
h2. Development process
4
5
There are two branches, "main" and "develop"
6
7
The "main" one is the main site.  When it is pushed, the site is automatically redeployed.
8
9
The "develop" goes to the "dev" version of the site.  We push to this when 
10
11
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._
12
13
The process for making changes is:
14
15
# create a new branch off of main
16
## git checkout main
17
## git branch my-branch
18
## git checkout my-branch
19
# make changes and test locally on that branch
20
# check if "develop" is even with "main" (meaning, they should have the exact same commit)
21
## git show-ref main develop   (the branches should all have the same commit hash)
22
## 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
23
# using "git rebase", apply your commits to the "develop" branch (this re-applies the changes you made in your branch, onto the develop branch)
24
## git checkout develop
25
## git rebase <my-branch>    
26
# push "develop" and confirm that the dev site is displaying properly, ask other people to review it, etc
27
# fast-forward "main" to match "develop"
28
## git checkout main
29
## git merge --ff-only develop
30
31 1 Sarah Zaranek
h2.    Responsiveness/mobile
32
33 2 Sarah Zaranek
* Firefox Responsive Design Mode (CTRL + SHIFT + M shortcut on linux)
34
* 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)
35 1 Sarah Zaranek
36 3 Sarah Zaranek
h2.  Accessibility
37
38 2 Sarah Zaranek
* WAVE - https://wave.webaim.org/
39
* Firefox - Right click anywhere on the screen and "Inspect Accessibility Properties"
40
* Accessi - https://www.accessi.org/
41
* pa11y.org - https://pa11y.org/
42
* 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/
43
* 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.
44 1 Sarah Zaranek
45 2 Sarah Zaranek
h2. Performance
46 1 Sarah Zaranek
47
* Chrome Lighthouse - https://developer.chrome.com/blog/lighthouse-load-performance/
48
49 3 Sarah Zaranek
h2. Link Check
50 4 Sarah Zaranek
51 1 Sarah Zaranek
* W3C Link Checker - https://validator.w3.org/checklink
52
53 3 Sarah Zaranek
h2. Typos & Grammar
54 1 Sarah Zaranek
55 3 Sarah Zaranek
* 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)
56 1 Sarah Zaranek
57 3 Sarah Zaranek
h2. SEO
58 1 Sarah Zaranek
59 3 Sarah Zaranek
* 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)
60 1 Sarah Zaranek
61 3 Sarah Zaranek
h2. JS/CSS
62 1 Sarah Zaranek
63 3 Sarah Zaranek
* Firefox console, checking for warnings/errors.