tasks

Create a tasks application that is based on the gqueues app, but with some enhancements.

• better priority handling
• link to documentation directly
• faster reaction times
• ...

approach

I keep getting sidetracked so i think it would be best to chop it up in real small chunks that can be handled with in at least 1 day. Rather even an hour. At a certain point we should be able to maintain these chunks as tasks themselves. Let's call them tasks from now on.

tasks

note : see ./tasks/klopt.todo for a 'working' .todo file with vim(more up to date)

• get gulp up and running
• try to start up the app via gulp instead of npm run dev
• gulp does not start, Did you forget to signal async completion?
• make watch function for ui and for tasks
• disable expand on click
• show hamburger menu only when hovering
• even out background for menu and screen
• make highlight bar for topics list
• setup rollup and browsersync
• investigate esbuild (faster)
• investigate babel
• remove google login for now
• reinstate version without login
• attach database or some json based (free) database
  • investigate databases linux
• design iconbar
• make dropdown work ok
• add topic implementation
• make bar have the rounded end like gqueues
• add an coloured icon to the topic name
• make caption renamable 'in-place'
• add number of tasks after name (gqueues)
• create more icons on the icon bar (+ -, ...)
• live watch and run possible, browsersync ?
• hook up the menu un the ... icon
• fill the menu with viable options (expand,collapse,...)
• append topic
• delete topic
• make dragdrop only work on certain levels for topic tree
• select topic and fill task tree
• create sort list for tasks
• implement priority
• implement sorting on priority
• implement coloring for topics
• implement coloring for tasks
• add description field to tasks, resizable when typing
• add 'done' button
• make coloured header for task bars
• add icon bar visible when hovering over tasks
• populate top icon bar with actions
• sort button in top icon bar
• group button in top icon bar
• refresh button in top icon bar
• expand/collapse descriptions button in top icon bar
• create special queues dialog (general, next actions)
• implement next lists
• add documentation button to tasks
• find md editor for javascript ?
• add login mechanism via firebase
• make a postgres backend
• make a firebase backend
• make both switchable, and switch regularly !!
• add topic handling in database
• add task handling in database
• setup google login (moved all the way back for now)
• try with firebase CDN
• investigate oauth2
• try polyfill solutions
• differences between vue and vanilla versions (typescript !)

gulp

We still want to use gulp for creating the package files. At this moment we want the ui part to be reusable and so we also want a bundled.js file for that which we then include in tasks.

How to make that is kind of a mystery, but why not look at other node_modules that are similar.

Some candidates. Just see what packages in node_modules have a file called bundle.js

• ajv : a json schema validator : https://github.com/ajv-validator/ajv
• terser : an uglifier : https://github.com/terser/terser
• bootstrap : maybe a little too big ? : https://github.com/twbs/bootstrap
• crypto-browserify/example/bundle.js : look at this file

ajv

Ajv uses rollup as an ES bundler. Maybe not what we need.

terser

rollup again, maybe we should use it ?

bootstrap

bootstrap uses rollup also as an ES bundler, also note that you can combine scripts in package.json. See if this is of use later on ?

combining scripts

  "scripts": {
    "js": "npm-run-all js-compile js-minify",
    "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
    "js-compile-plugins": "node build/build-plugins.js",
    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
    "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
    "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
    "js-minify-bundle": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
  }

Also there is an exports file for .esm and for .umd

/**
 * --------------------------------------------------------------------------
 * Bootstrap (v5.2.0): index.esm.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 * --------------------------------------------------------------------------
 */

export { default as Alert } from './src/alert'
export { default as Button } from './src/button'
export { default as Carousel } from './src/carousel'
export { default as Collapse } from './src/collapse'
export { default as Dropdown } from './src/dropdown'
export { default as Modal } from './src/modal'
export { default as Offcanvas } from './src/offcanvas'
export { default as Popover } from './src/popover'
export { default as ScrollSpy } from './src/scrollspy'
export { default as Tab } from './src/tab'
export { default as Toast } from './src/toast'
export { default as Tooltip } from './src/tooltip'

/**
 * --------------------------------------------------------------------------
 * Bootstrap (v5.2.0): index.umd.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 * --------------------------------------------------------------------------
 */

import Alert from './src/alert'
import Button from './src/button'
import Carousel from './src/carousel'
import Collapse from './src/collapse'
import Dropdown from './src/dropdown'
import Modal from './src/modal'
import Offcanvas from './src/offcanvas'
import Popover from './src/popover'
import ScrollSpy from './src/scrollspy'
import Tab from './src/tab'
import Toast from './src/toast'
import Tooltip from './src/tooltip'

export default {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Offcanvas,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip
}

It seems you should try to use import / export syntax as much as possible. This is also called the future of modules plus it is typescript compliant.

So it had to change the requires and module.exports like this .

ui source file

class Tree extends Events {
...
}

export default Tree

app.js 'main' file

export { default as Tree } from './tree.js'

design

Some thing that need to be done through paper.

iconbar

dropdown

express

lets state here that express might not be needed at all. Start a chapter about trying without that.

disable express

First dissect the complete express app to see what everything does, then decide what to do with it.

to be done...

logger

Express uses morgan as logger for the console. This is the tool that prints these messages :

morgan debug output

GET /stylesheets/style.css 304 - - 2.676 ms
GET /stylesheets/dragula.min.css 304 - - 1.919 ms
GET /stylesheets/bootstrap.min.css 304 - - 1.993 ms
GET / 304 - - 9.102 ms
GET /stylesheets/style.css 304 - - 1.873 ms
GET /tasks.bundle.mjs 304 - - 1.938 ms
GET /stylesheets/dragula.min.css 304 - - 2.184 ms
GET /stylesheets/bootstrap.min.css 304 - - 2.428 ms
GET /stylesheets/style.css 304 - - 1.459 ms
GET /stylesheets/dragula.min.css 304 - - 1.556 ms
GET /stylesheets/bootstrap.min.css 304 - - 1.865 ms
GET /tasks.bundle.mjs 200 46336 - 0.874 ms
GET /tasks.bundle.mjs 200 46336 - 0.723 ms

This may be useful but it also means that the esbuild errors scroll out of view and you still think everything went well.

So to disable the simplest solution is to comment out this line in app.js

tasks/app.js

//app.use(logger('dev'));