Frontend checklist #26

ldanet · 2020-11-03T03:39:19Z

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

Project has an .nvmrc file (bonus points for an LTS version of Node)
A prettier config file is available
ES lint configuration is available

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

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 from user-submitted (untrusted) content use rel="nofollow noreferrer"
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

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.

Chore/filter axe testing rules

Skip link

IETF-78: Added auto_id in case id_for_label is empty

…ols#170)

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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): Update JavaScript dependencies * chore(deps): Bump up puppeteer version to 13.6.0

* make img caption smaller * update caption

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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* 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 <[email protected]> Co-authored-by: Andrew Calder <[email protected]> Co-authored-by: aaronhaslett <[email protected]>

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] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Addresses Issue ietf-tools#193 Co-authored-by: Greg Wood <[email protected]>

…on_field argument to True/False instead of None.

Wagtail 4.1 upgrade

Fix db_restore script for newer Postgres versions

liamjohnston and others added 30 commits October 22, 2020 13:18

Merge pull request #23 from springload/chore/filter-axe-testing-rules

406ef03

Chore/filter axe testing rules

AXE fixes

2dbff22

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

Fix duplicate label for multi checkbox or radio buttons

1163ac0

Fix form help text aria attribute

6157153

Fix multi checkbox and radio group spacing

9fe828c

Fix home page python test

56d56b4

Add basic wagtail test for form page

4fd6751

Add basic wagtail test for events pages

c5bc4ef

Remove redundant home page topic image backgrounds

08b03a2

Add basic wagtail test for glossary

645ef89

Add test for IESG statement index page

e0f85d2

Update readme.md

4642260

Matthew Holloway and others added 9 commits February 28, 2022 14:24

feat: migrate theme to @ietf-tools/common-bootstrap-theme

76f8ea6

ci: Add latest tag to the docker build/push (ietf-tools#169) (ietf-to…

4eb2ffd

…ols#170)

chore(deps): Update Python dependencies (ietf-tools#179)

c7f6375

chore(deps): Update JavaScript dependencies (ietf-tools#178)

b1d60b7

* chore(deps): Update JavaScript dependencies * chore(deps): Bump up puppeteer version to 13.6.0

fix: Add a missing menuitem migration (ietf-tools#184)

9dd3ace

test: Check for missing migrations (ietf-tools#185)

79b214c

test: Add dry run option to missing migration check (ietf-tools#187)

51ab132

build: Update to Python 3.10 (ietf-tools#188)

dc25d05

AndrewCalderSpringload force-pushed the main branch from b6eacc9 to dc25d05 Compare May 22, 2022 23:16

Juliet-Brown and others added 9 commits June 21, 2022 16:09

fix: remove margin, width and add max width (ietf-tools#196)

1c20e44

fix: Make img caption smaller (ietf-tools#197)

993a45b

fix: Improve image captions (ietf-tools#232)

aa0f2a8

* make img caption smaller * update caption

chore: Remove cosign stage from Docker publish GHA (ietf-tools#239)

66aed04

fix: Update 404.html (ietf-tools#244)

a6563de

Addresses Issue ietf-tools#193 Co-authored-by: Greg Wood <[email protected]>

AndrewCalderSpringload force-pushed the main branch from c7ca1a8 to a6563de Compare November 29, 2022 20:56

AndrewCalderSpringload and others added 10 commits December 1, 2022 11:58

Update requirements & constraints

34a90f2

Wagtail 4.0 upgrade - links in preview panel

6c50a30

Update URL route name

a191884

Panel customisations - remove 'classname="full"' from panels.

5c4b0c3

BaseSetting model replaced by BaseSiteSetting

44ca575

Upgrade dependencies for wagtail 4.1

e8ee293

Fix RemovedInWagtail50Warning: StreamField must explicitly set use_js…

fd7d971

…on_field argument to True/False instead of None.

Merge pull request #46 from springload/feature/wagtail-4-upgrade

3454578

Wagtail 4.1 upgrade

Fix db_restore script for newer Postgres versions

6ab8601

Merge pull request #47 from springload/feature/db_restore

1f996f1

Fix db_restore script for newer Postgres versions

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend checklist #26

Frontend checklist #26

ldanet commented Nov 3, 2020 •

edited

Loading

Frontend checklist #26

Are you sure you want to change the base?

Frontend checklist #26

Conversation

ldanet commented Nov 3, 2020 • edited Loading

Frontend project checklist

Launch approach

The project's README.md contains

Project structure

Code quality

Testing

HTTP

HTML

CSS

JS

Accessibility

Fonts

Mobile

Performance

Security

SEO / SMO

Tickets

Infra

ldanet commented Nov 3, 2020 •

edited

Loading

The project's `README.md` contains