nkabrown / box-office

Box Office

Kick-off Product

Define tasks to deliver new features.

This repository is an implementation in web components of Ryan Singer's Systemizing kick-off article.

Quickstart

# test npm version, if version < 7 run 'npm install -g npm@latest'
npm --version

# install exact dependencies and set up git hooks
npm ci

# start watchers for file changes and run buildless development server
npm run dev

Supporting Documentation

Dependencies

• Lit - web component template rendering library

Development Dependencies

• browserslist - targeted browser list for tooling
• chai - make testing assertions
• concurrently - run multiple npm scripts simultaneously
• copyfiles - copy files with the command line
• ESLint - static analysis to find and fix JavaScript problems
• eslint-config-prettier - turn off linting rules that conflict with prettier
• eslint-plugin-compat - linting for browser compatible code patterns
• eslint-plugin-html - apply linting rules to inline scripts in html
• eslint-plugin-lit - linting rules for Lit templating library
• eslint-plugin-wc - linting rules for custom elements (web components)
• husky - easily setup git hooks
• lint-staged - execute scripts on staged files via git pre-commit hook
• prettier - low configuration opinionated code formatter
• rollup - tree-shaking ES6 module bundler for JavaScript
• rollup-plugin-copy - copy files and directories for distribution
• rollup-plugin-delete - delete files and directories of old distribution
• rollup-plugin-html-literals - minify html and css template literals in bundle
• @rollup/plugin-node-resolve - resolve paths to node modules in bundle
• rollup-plugin-scss-lit - import Sass files as constructable stylesheets in bundle
• rollup-plugin-summary - summarizes size of rollup build output
• @rollup/plugin-terser - parse, mangle, and minify JS with terser in bundle
• TypeScript - strongly typed superset of JavaScript that compiles down to working JavaScript
• typescript-lit-html-plugin - adds intelliSense to VS Code for Lit TypeScript projects
• web-dev-server - buildless development server
• web-test-runner - test runner for web applications
• wireit - additional performance and control for npm scripts

For an ever-developing account of why I make the decisions I make see my engineering philosophy statement.

Updating Dependencies

Regularly updating dependencies and dev dependencies is very beneficial for long lasting codebases.

• Run npm outdated to list dependencies in need of review.
• Review release notes and/or change logs for list of dependencies with new updates.
  • Is there new functionality this codebase can use?
  • Do changes need to be made to upgrade?
  • Are any problematic issues associated with these changes?
• Run npx update-browserslist-db to update caniuse-lite database.