Add requirements from https://gist.github.com/ai/e3683b03ba936ade91d33dbc721cd6d8

[ihorzenich]

Amplifr Landings Rules

Amplifr’s rules for landing pages created by outsource.

Requirements

The rules are mandatory for all new projects. However, if some rule objectively doesn’t work in your case ask Andrey Sitnik to ignore it.

1. All websites should have at least 80% for Performance and 90%
   for Accessibility, Best Practices, and SEO in Google Lighthouse.
   Both for Desktop and Mobile.
2. Default target browsers:
   last 2 versions, not dead, not ie 11, not ie_mob 11, not op_mob > 0.
   Only the main content should be accessible on Opera Mini.
   Some non-important features can be missed on Chinese browsers.
3. Static websites should not use SPA frameworks.
   This rule doesn’t apply to rich interactive applications.
4. All clickable elements must use <button> or <a> tag.
   <a> should not be used if click doesn’t change URL.
5. All clickable elements should have explicit :hover and :focus state.
6. In one hand, all important resources should be loaded by 2 round-trips
   (first round-trip to download HTML, second for all links from HTML).
   In another hand, we should avoid data:uri technique. We recommend
   <link rel="preload"> for assets from CSS and JS files.
   For dynamic URLs and analytics counter, use <link rel="preconnect">.
7. GIF files are strongly prohibited. Use AV1, H.264 (and optionally HEVC)
   for any video content.
8. All images should be optimized. We recommend using Squoosh for raster
   and SVGO for a vector images. WebP format must be available
   for raster images, which are smaller in WebP.
9. All non-binary resources should be precompressed
   with Zopfli during yarn build.
10. Links to the same page in another language should have
    <a rel="alternate" hreflang="ru"> attributes.

Recommendations

You could avoid this rule without any approval if you think it will be better
for the project.

1. CSS for the first visible screen should be inlined to <style> in HTML
   (“critical CSS” technique).
2. All animation should use only CSS transition or animation.
   Try to animate only opacity and transform.
3. We recommend using Parcel, Pug and SugarSS to have the same system
   in every project.
4. Do not afraid to ask questions. It is better to ask few obvious questions,
   than deploy bad UX or reduce code maintability.

Global Files

Spelling Check

We use Yaspeller script for spelling check in Markdown and Pug files.

yarn shell

If you got an error on a correct word (don’t forget to double check it),
add this word to .yaspellerrc → dictionary array.

Pre-Commit hooks

We have git pre-commit hooks to:

1. Optimize SVG files.
2. Sort properties in SugarSS files.
3. Lint JS files by ESLint and SugarSS files by Stylelint.
4. Run spelling check for Markdown and Pug templates.

Linters

Any ignore comment for linter is an extreme case. It is always better to create
some system and improve global config. Don’t afraid to ask
Andrey Sitnik how you should deal with linter error in your case.

yarn lint