chaos-boilerplate-front

Front-end boilerplate, to suit my needs.

Gulp heavy

Numerous optimisations are done automattically thanks to gulp.

More details in /gulp.

Here are the main commands.

gulp

Copy /src & selected vendors to /watch

gulp watch

Html, css, js HMR

gulp prod

Concat, minify & inline inject of css & js

Before prod Checklist

Various recommandations, you can also directly run online validators

Online validators

• Geekflare tools > Website performance audit & other usefull tools
• w3c
• Pagespeed insight
• Dareboost / Limited use per day in free version !
• Webpage test
• Ace Accessibe > accessibilité
• CSP check
• Test responsive
• Test mobile load time
• How's your website impacting the planet + web recos
• Find & remove unused code

Html

• Meta tags

• Open graph tags

• Favicon, pref SVG

• itemprop attribute

• Linted

• Minified

• Remove css & js tags if inline injection

Css

• Linted
• Concat external librairies
• Minified
• Inline injection
• .htaccess inline security (SHA-256) (XSS prevention)
• Remove unused CSS

JS

• Linted
• Concat external librairies
• Minified
• Inline injection
• .htaccess inline security (SHA-256) (XSS prevention)
• Remove unused JS

Misc

• Clean unused files
• .htaccess configuration
• Images minification (.webp & webm, cf. /src/assets/images)
  • Or best, AVIF when it'll be more compatible
• Security loopholes prevention / https://www.hacksplaining.com/lessons
• Add google analytics / https://analytics.google.com/analytics/web/
• Minify SVG
• Legal stuff > gouv.fr
• RGPD stuff > gouv.fr

TODO

• Pretty cool article on website optimisations

• Add accessibility checks & resources from this article

• +1

• Get back tool box & reimplant with css/js injection

  • and add new html stuff :

  https://developer.mozilla.org/fr/docs/Web/HTML/Element

  https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemid

  https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemprop

  https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemref

  https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemscope

  https://developer.mozilla.org/fr/docs/Web/HTML/Element/details

  • and add complex elements can do w html/css only and it also contains ellipsis and stuff

• seo stuff

• Add basic PWA and add it to end checklist

• html dl dt https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl