• Set up config, possibly testing multiple Node versions

• Remove usage of parent selector: .slideshow__slide {} over .slideshow { &__slide {} } (way easier to find and source maps are more stable) → evaluate sass-lint and stylelint to do this automatically
• Evaluate combination of BEM and SMACSS/ITCSS for better structure / prefices @tobiasfrei
• …

In modules/.scaffold/{{fileName}}.hbs there is a missing space:
https://github.com/unic/estatico-nou/blob/develop/packages/estatico-boilerplate/src/modules/.scaffold/%7B%7BfileName%7D%7D.js#L16

domSelectors: {
        // item: '[data-$\{{{className}}.name}="item"]'
},

will not replace the className.

domSelectors: {
        // item: '[data-$\{ {{className}}.name}="item"]'
},

should do it...

• Make PostCSS plugins configurable
• Add optional dependency graph

Let's get rid of all master-slave terminology #BlackLivesMatter

More details on how and why we want this change https://www.hanselman.com/blog/EasilyRenameYourGitDefaultBranchFromMasterToMain.aspx

Updating local clones

If someone has a local clone, then can update their locals like this:

$ git checkout master
$ git branch -m master main
$ git fetch
$ git branch --unset-upstream
$ git branch -u origin/main
$ git symbolic-ref refs/remotes/origin/HEAD refs/remotes/origin/main

Changing target branch for open PRs according to https://stackoverflow.com/a/24159161/3768943

But still support LTS

• html task has a new clone option which will generate both dev and prod versions in one go

• Configure Stylelint to work with Airbnb's CSS styleguide
• Update boilerplate source code accordingly

• Refactor, i.e. use Array.forEach over _.each
• Document every function with JSDoc annotations and in README
• Improve performance and structure (consider https://github.com/unic/estatico/pulls?q=is%3Apr+is%3Aopen+label%3A%22data+layer%22, /cc @marbor3)

• Use in ongoing projects by replacing old tasks
• Add basic tests where missing and reasonable

BUGS TO FIX:

• Fix dependencyGraph to handle partials nesting themselves
• Find solution for changing module template
• Start watcher even when skipping build

• Check each package for reasonable debugging info
• Add debug logs if necessary
• Evaluate a switch to gulplog since it should already work gulp-cli's different logging levels. This should allow us to use npm run gulp html -- -LLLL instead of $ NODE_DEBUG=estatico-handlebars-extended npm run gulp html, e.g. → #20

The documentation for travis mentions a better way to install yarn that we are currently using.

before_install:
  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version version-number
  - export PATH="$HOME/.yarn/bin:$PATH"

https://docs.travis-ci.com/user/languages/javascript-with-nodejs/#using-yarn

• Figure out and document how to release with Lerna
• Publish

See gulplog and glogg, respectively.

Move Ajax loader from boilerplate source to estatico-svgsprite package and document usage.

LibSass will deprecate the import of CSS files. Further reading:

• https://github.com/sass/libsass/releases/tag/3.5.3
• https://github.com/sass/node-sass/releases/tag/v4.9.0

→ Evaluate https://github.com/fetch/node-sass-css-importer

• Maintainability (separation of concerns, replacement of custom approaches with de-factorstandards etc.)
• Flexibility (use only the tasks/helpers you want)
• Performance: ~50% speed improvement for initial build (boilerplate), ~90% speed improvement for incremental html rebuilds (large project), e.g.
• …

• Move as many dependencies from the top of gulpfile.js into task functions.
• Test via gulpt, use clean task since it has the least amount of dependencies: npx gulpt clean

• Establish the new way of writing JavaScript in collaboration with other Frontend Developers.
• Restructure the whole Estatico JS initiation logic into separate NPM packages.
• Add a more reusable way of writing JS (factory/composition).
• Give a good documentation on what changed in the architecture and how developers can adapt.
• Establish a checklist for JS Modules/Factories/Composites
• Establish backward-compatibility for at least IE(X)

Factory/Composition

Examples

• Factory: https://www.npmjs.com/package/@unic/factory-breakpoint-manager
• Composite: https://www.npmjs.com/package/@unic/composite-observer

Generators

• Composite: https://www.npmjs.com/package/generator-composite

TODO

• Use Apache license, Unic is the author
• Make a workshop and discuss the proposition of factory/composition

Components

• composite-logger
  https://github.com/unic/estatico/blob/develop/source/assets/js/helpers/helper.js#L18-L30
• ui-extend
  https://github.com/unic/estatico/blob/develop/source/assets/js/helpers/helper.js#L42-L56
• ui-pretty-events
  Completely new thingie

Notes

• Enable better debugging inside of Modules/Components Better debugging?
• Proper automatic documentation of components (JSdoc)
  https://github.com/jsdoc3/jsdoc

Tasks

• js: https://github.com/unic/estatico/blob/develop/gulp/js/default.js (include preset-env, check out HMR)
• js:lint (based on eslint, add fix option)
• js:modernizr: https://github.com/unic/estatico/blob/develop/gulp/js/modernizr.js (possibly replace with Webpack loader instead)
• js:test: Based on Puppeter and QUnit (for now): jonkemp/gulp-qunit#31 (comment)
• js:mocks: https://github.com/unic/estatico/blob/develop/gulp/js/mocks.js
• css: https://github.com/unic/estatico/blob/develop/gulp/css/default.js → compare to webpack afterwards @alinamelnyk
• css:lint (based on sass-lint or stylelint) @Wymowny
• css:colors: Probably replace with https://github.com/Updater/node-sass-json-importer
• css:fonts: https://github.com/unic/estatico/blob/develop/gulp/css/fonts.js @orioltf
• media:svgsprite: https://github.com/unic/estatico/blob/develop/gulp/media/svgsprite.js @drowka
• [low prio] media:iconfont: https://github.com/unic/estatico/blob/develop/gulp/media/iconfont.js
• [low prio] media:dataurls: Data URIs: https://github.com/unic/estatico/blob/develop/gulp/media/dataurls.js
• media:imageversions: https://github.com/unic/estatico/blob/develop/gulp/media/imageversions.js
• media:copy: Make more generic (not bound to media files): https://github.com/unic/estatico/blob/develop/gulp/media/copy.js
• scaffold: Evaluate https://github.com/amwmedia/plop and Yeoman, e.g.
• serve: Based on browsersync
• watch (with proper dependency graph)
• document: Replace with proper READMEs for every task

Examples:

• See existing packages

Criteria:

• Exporting plugin factory
  • Taking options overwriting defaults as argument. Defaults for a "standard" gulp task:
    • src: Which files to read
    • srcBase: See docs
    • dest: Where to write to
    • watch: Which files should trigger a rebuild
    • plugins: Passed to specific gulp plugins
    • logger: Used for infos, debugging and errors. Most probably an instance of estatico-utils's Logger
  • Exposing options for everything configurable. Setting plugin options to null should disable the corresponding step
  • Returning a gulp stream in case of "standard" gulp tasks. Most probably returning a promise otherwise since we don't want to deal with callbacks.
  • Using gulp-plumber to prevent stream from unpiping, adding .on('error', err => config.logger.error(err, env.dev)) to every step possibly throwing.
  • Using joi to validate options: https://github.com/unic/estatico-nou/blob/master/packages/estatico-handlebars/index.js#L9-L37
• Using gulp 4 (if using gulp). Probably not having an effect on "standard gulp tasks since they mostly use gulp.src and gulp.dest which should not break anything for us
• Not using gulp-util which will be deprecated. Rather rely on the underlying modules (plugin-error, fancy-log, chalk, minimist etc.
• Documenting usage and options in README.md
• Adding tests

The boilerplate was only tested as part of this monorepo. It will most probably fail when running isolated.

Reasons:

• It is a circular dependency
• Installing estatico-scaffold, e.g., relies on estatico-utils but definitely doesn't care about estatico-watch

Solution: Pass watcher as argument instead

Check what's already fixed and update accordingly:

• Issues: https://github.com/unic/estatico/issues
• PRs: https://github.com/unic/estatico/pulls