[dbux-practice] Get dbux-projects ready for real-world practicing purposes

[Domiii]

re-design dbux-practice list

• new dbux practice list #603
• Introduce exercises: show stepsToReproduce in an intuitive and meaningful way (currently available for todomvc)
  • make sure, there is a button to review them, as well
  • consider showing them directly in the PracticeSession view?
• render user timer results somehow in ExerciseNode - if they solved it, did they time it? How long did it take?
  • maybe even summaries per chapter?
• render project-related information in ExerciseNode
  • (because in chapter view, the parent node is not the ProjectNode anymore)
  • -> added project name to description
• rename bug (and experiment) to exercise (continual WIP)

Misc

• when failing to tag a bug line, render some buttons in the notification
  • "That sucks!"
  • "Help" (does the same as "That Sucks!" iirc)
• add progress indicators(icon and description) to each ChapterNode`
• Can we have BaseGroupNode Expanded by default (see BaseGroupNode.constructor)?
  • does the constructor argument simply not work?
  • if it does not work, add reveal (related discussion here) API into our BaseTreeViewNode{,Provider} (at least add a BaseTreeViewNode.reveal method)
• visually differentiate between buggy and non-buggy exercise (with and without bugLocations)
  • or: bug and exploration (non-buggy)
• during switchToExercise (and related functions), make sure, all files inside the project folder are closed
  • -> else, there might be a chance that the user sees the patch applied before their eyes
• add previous and next exercise buttons, so one can quickly move between them
• When finishing a task, show a final modal that summarizes the results and shows the previous/next button
  • consider codesignal + leetcode
• allow user to review and reset all their own changes they have made for each exercise
  • Add new button review my changes.
  • When clicked, show a modal similar to the existing Show diff in new tab and cancel.
  • But instead of "ignore" add a "reset" option (with confirm modal)
• improve dbux-projects webpack'ing #615

More Complex Tasks

• explain why there is no leaderboard, even with a timer
• improve help menu
  • also add a button for a visual cheatsheet?
• more user configuration when running things
  • allow easily toggling all Dbux debug output via configuration (Domi)
  • add buttons to UI to change the config (Michael)
• re-enable and fix tutorial + introduction system
• add some type of clean-up operation for every bug
  • -> e.g. in todomvc, if the stored data in localStorage is corrupted, the next experiment will also be affected
  • -> easiest solution: produce an "initial localStorage" state when switching to each exercise
    • The project has a default async resetExercise(exercise) function, which can be overwritten or otherwise customized by each exercise.
    • NOTE: this might be annoying since the user might get a feeling that they lose their data, but its probably not quite worth trying to keep the user state for each exercise
• change the "reset progress" button to be dev-only (if (process.env.NODE_ENV === 'development') {)
• create a separate fork for each project
• when switching to a new project, consider adding optimizations to reduce time it takes to move between them (e.g. Webpack-related optimizations below)
• decide whether to use npm or yarn
  • Test with yarn@2
  • yarn is (currently) faster and more reliable than npm in most cases; probably prefer yarn, if it works
• make sure, dependencies are locked (should work with yarn and/or npm)
  • check in lock file
• deal with binary dependencies
  • generally avoid any binary building on the system, since it can go very wrong and is too far out of our control
  • make sure that pre-built binaries are always available
    • e.g. sequelize samples depend on sqlite3, but it appears that sqlite3 pre-built binaries of old versions are deleted from their official download link when a new version is released
    • -> we might have to consier removing sequelize from bug list as a result
• improve dbux-projects webpack'ing #615
• add a basic hint system? (some todomvc exercises already have hints)

[Domiii]

We are only going to move forward on this, once people actually start using Dbux + Dbux Practice, and there is a clear segment of people who want to train to toward becoming a debugging master.