Skip to content

Frontend checklist#26

Open
ldanet wants to merge 364 commits into
masterfrom
main
Open

Frontend checklist#26
ldanet wants to merge 364 commits into
masterfrom
main

Conversation

@ldanet
Copy link
Copy Markdown

@ldanet ldanet commented Nov 3, 2020 •
edited
Loading

Frontend project checklist

Couldn't find issues so putting it as a dummy PR 🤷‍♀️

Launch approach

  • Have you considered a Soft Launch or Hard Launch? Often sites have a password on them until launch (Hard Launch), which means that testing favicons and social media integration may be difficult. Because of this we prefer a Soft Launch where the site is public before any announcement of the site launch. Not applicable

The project's README.md contains

  • Project installation instructions.
  • Links to all deploy environments and any associated Git branch names.
  • Links to CI, Jira/Trello, Harvest project, project run sheet, Google Drive folder, Figma/Zeplin, other.
  • Expected Browser support and accessibility support. Copy browser-device-support.md into your README.md and modify to suit.
  • Any debugging tricks or quirks that might be useful for future devs.

Project structure

Code quality

  • Try a fresh install of the project (preferably in a new VM or on a different machine) to ensure it can be installed from scratch... eg, that all dependencies are referenced and not implicit.
  • Clean up commented/unnecessary code.
  • Check all TODO and FIXME comments in the code are still relevant.
  • Unintentional console logs statements removed. All debugger statements removed.
  • Code comments to document quirks or odd workarounds / compromises as appropriate.

Testing

  • Site tested in all relevant browsers and devices.
  • Site works with adblocking software (ie, uBlock).
  • Site works with JavaScript turned off, or the sections that do not work are indicated to the user via messages in <noscript> tags or similar.
  • Site has a favicon.ico.

HTTP

  • HTTP to HTTPS redirect exists, with Strict-Transport-Security.
  • CSP
  • Static files are cache-busted with a unique hash (eg. main.4hjk54j6.js) in production JS/CSS/etc. and have HTTP headers to cache for a long time (exact length at your discretion). Check this with PageSpeed or GTmetrix) on the live site.

HTML

  • Page translation by Chrome is disabled if appropriate <meta name="google" content="notranslate"> (more). Sometimes clients take the blame for bad translations and it's better to just disable it, but this is a judgement call.
  • 404 page exists and is styled.
  • 500 page exists and is styled.
  • Maintenance page exists and is styled, if relevant.

CSS

  • Ensure form controls are dark theme compatible. Ie, that you don't rely on default background colours for form controls. Test this by setting input,select,textarea {background:black} as the first CSS rule and see if the rest of the site's styles override it correctly.
  • Print styles are defined and tested on all templates / pages (if relevant).
  • CSS classes use a consistent naming methodology (BEM).
  • No vendor prefixes or IE filters in Sass (autoprefixer should handle this).

JS

  • Polyfills are included if appropriate. Consider isolating polyfills from the rest of the codebase (ie, in a polyfills.tsx file) so that they're easier to remove in the future.

Accessibility

  • Make sure all pages, in all states, are keyboard navigable.
  • Body copy and visuals have enough contrast according to WCAG guidelines https://leaverou.github.io/contrast-ratio/ and http://lowvision.support/ .
  • <html> element has attribute lang="en-nz" or lang="mi" (not `lang="mi-nz"). Screen readers such as NVDA can pronounce Te Reo with these hints.
  • Current WCAG compliance if possible. The following list is not exhaustive and is only meant to prompt you to consider common issues (a full WCAG audit may be appropriate):
  • Pagination with rel=”next” and rel=”prev” attributes.

Fonts

  • All of the fonts used on the project are correctly licensed, at the appropriate license level (expected pageviews/month).
  • If relevant, Analytics email alerts are set up when audience levels go over the fonts' license thresholds.

Mobile

  • Site uses a mobile-friendly, zoomable viewport, if possible.
  • Platform-specific (Apple,Android, Windows, etc) meta tags and favicons are added and checked with the Favicon checker.

Performance

  • Test site in Chrome's Lighthouse (Devtools | Audits). While we don't have any specific targets (ie, 'must be above 90') across all projects use this tool to find areas for optimisation. Eg:
    • CSS/JS files are minified in production (bonus points for HTML too).
    • if images are unoptimised use ImageOptim/SVGOMG or similar to compress them.

Security

  • OWASP Top 10... see if anything there is relevant to your site.
  • Data is sanitised before display (ie, User generated content) to prevent exploits such as XSS.
  • Links with target="_blank" use rel="noopener noreferrer" to avoid security problems. More info.
  • Forms use CSRF tokens when they mutate state (POST/PUT/DELETE, eg. editing a user/booking/listing’s data). This is more a BED issue.
  • Form fields use the correct input types for the appropriate mobile keyboard.

SEO / SMO

  • Canonical URL redirect exists, if relevant (eg. example.com ➞ www.example.com).
  • Run site url through the Facebook debugger (https://developers.facebook.com/tools/debug/) to check it will appear correctly if shared.
  • Ensure that <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> is only on the correct pages.
  • Ensure meta tags, OpenGraph tags, Twitter card tags, and descriptions are set.
  • Ensure the social meta tags only use a default sharing image if there is no page-specific image to use.
  • Significant UI states (tabs, modals, etc) should be tracked in the URL via query parameter or the hash or else search engines might not index them.
  • Google Tag Manager or Google Analytics are loaded.
  • Check analytics are configured in development with a development property.
  • Check analytics are configured in production with the production property on the live site.
  • Check the relevant client-side interactions are tracked with events.
  • Page and event tracking is being displayed correctly in the GA dashboard.

Tickets

  • Appropriate labels set on GitHub or Jira.

Infra

  • CI runs tests
  • Production site has Sentry tracking.

You made it to the end! Whoo, high five my friend! Now go treat yourself to a drink 🍹, a hug, or whatever floats your waka 🌈. Don’t forget to let your team know that you’ve got this under control, and be proud of that top-notch site you just built.

liamjohnston and others added 30 commits October 22, 2020 13:18
@liamjohnston
Merge pull request #23 from springload/chore/filter-axe-testing-rules
406ef03 
Chore/filter axe testing rules
@liamjohnston
AXE fixes
2dbff22
@liamjohnston
Automated accessibility test fixes
07b3e32
Skip link
38000bc
Skip link
185255d
Merge pull request #24 from springload/feature/skip-link
5c5b721 
Skip link
Focus styling
b990608
Focus styling
ad60371
Focus styling
e755041
Focus styling
5664bef
Focus styling
8eec4ef
Jumbotron styling
d4e3b1d
Jumbotron styling
9685eef
Jumbotron styling
80ec11a
Jumbotron styling
5b78c6a
Switching to SVG logo
5978762
Setting SVG logo dimensions
4c3c904
Fixing broken image link
59fd9bc
Added auto_id in case id_for_label is empty
c3e87c8
Merge pull request #25 from springload/bugfix/IETF-78_empty_id_for_label
c512fb6 
IETF-78: Added auto_id in case id_for_label is empty
@ldanet
Fix duplicate label for multi checkbox or radio buttons
1163ac0
@ldanet
Fix form help text aria attribute
6157153
@ldanet
Fix multi checkbox and radio group spacing
9fe828c
@ldanet
Fix home page python test
56d56b4
@ldanet
Add basic wagtail test for form page
4fd6751
@ldanet
Add basic wagtail test for events pages
c5bc4ef
@ldanet
Remove redundant home page topic image backgrounds
08b03a2
@ldanet
Add basic wagtail test for glossary
645ef89
@ldanet
Add test for IESG statement index page
e0f85d2
Update readme.md
4642260
Matthew Holloway and others added 9 commits February 28, 2022 14:24
@kesara
feat: migrate theme to @ietf-tools/common-bootstrap-theme
76f8ea6
@kesara
ci: Add latest tag to the docker build/push (ietf-tools#169) (ietf-to…
4eb2ffd 
…ols#170)
@dependabot
chore(deps): bump minimist from 1.2.5 to 1.2.6 (ietf-tools#177)
2492c25 
Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@kesara
chore(deps): Update Python dependencies (ietf-tools#179)
c7f6375
@kesara
chore(deps): Update JavaScript dependencies (ietf-tools#178)
b1d60b7 
* chore(deps): Update JavaScript dependencies
* chore(deps): Bump up puppeteer version to 13.6.0
@kesara
fix: Add a missing menuitem migration (ietf-tools#184)
9dd3ace
@kesara
test: Check for missing migrations (ietf-tools#185)
79b214c
@kesara
test: Add dry run option to missing migration check (ietf-tools#187)
51ab132
@kesara
build: Update to Python 3.10 (ietf-tools#188)
dc25d05
Juliet-Brown and others added 9 commits June 21, 2022 16:09
@Juliet-Brown
fix: remove margin, width and add max width (ietf-tools#196)
1c20e44
@Juliet-Brown
fix: Make img caption smaller (ietf-tools#197)
993a45b
@Juliet-Brown
fix: Improve image captions (ietf-tools#232)
aa0f2a8 
* make img caption smaller
* update caption
@dependabot
chore(deps): bump jquery-ui from 1.13.1 to 1.13.2 (ietf-tools#233)
1ceb9a3 
Bumps [jquery-ui](https://github.com/jquery/jquery-ui) from 1.13.1 to 1.13.2.
- [Release notes](https://github.com/jquery/jquery-ui/releases)
- [Commits](jquery/jquery-ui@1.13.1...1.13.2)

---
updated-dependencies:
- dependency-name: jquery-ui
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@dependabot
chore(deps): bump terser from 4.8.0 to 4.8.1 (ietf-tools#235)
6e052f8 
Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](terser/terser@v4.8.0...v4.8.1)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@sephyhe @AndrewCalderSpringload @aaronhaslett
feat: Upgrade Wagtail to 3.0.1 (ietf-tools#237)
7b6ffce 
* Add a missing setting - DEFAULT_AUTO_FIELD, blacken settings

* Upgrade to wagtail 2.16

* Update requirements, resolve dependency conflicts

* Correct module imports, lint changed files

* Undo accidental change

* fix the test in the pipline related to search

* remove deprecated search module

* Add new migration files

* Convert the unicode to text

* Add the check before run the migration

* Removal of special-purpose field panel types and change base_url

* update the test for the blogpage

Co-authored-by: Andrew Calder <andrew.calder@springload.co.nz>
Co-authored-by: Andrew Calder <92233792+AndrewCalderSpringload@users.noreply.github.com>
Co-authored-by: aaronhaslett <aaron.haslett@springload.co.nz>
@kesara
chore: Remove cosign stage from Docker publish GHA (ietf-tools#239)
66aed04
@dependabot
chore(deps): bump loader-utils from 1.4.0 to 1.4.2 (ietf-tools#245)
23aed9c 
Bumps [loader-utils](https://github.com/webpack/loader-utils) from 1.4.0 to 1.4.2.
- [Release notes](https://github.com/webpack/loader-utils/releases)
- [Changelog](https://github.com/webpack/loader-utils/blob/v1.4.2/CHANGELOG.md)
- [Commits](webpack/loader-utils@v1.4.0...v1.4.2)

---
updated-dependencies:
- dependency-name: loader-utils
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@kesara @ghwood
fix: Update 404.html (ietf-tools#244)
a6563de 
Addresses Issue ietf-tools#193

Co-authored-by: Greg Wood <ghwood@ietf.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.