Improve Code Quality

[maxpatiiuk]

Some of these are pretty big, so feel free to create separate issues for them when you start working on them

• Run Pre-commit hooks on all front-end files
• Fix console warnings and errors
• Add more unit tests
• Reorder the function in files
  Entrypoint/main function first
  All other functions below it in order they are called
  This way, code is ordered in the direction it is executed - easier to read and reason about
• Get rid of usages of "null"
  Use just "undefined" wherever possible for consistency and to avoid the need to constantly check for both ===undefined and ===null
• Go though lighthouse, performance and other audits
• Look for useful tags
  - [ ] Add social media optimization https://socialsharepreview.com/ (i.e, when a link to specify is shared with someone in slack)
• Add security meta tags and HTTP headers. Also, security attributes for iframe (i.e, [sandbox])
• Improve code documentation and add more inline documentation (before function or at the top of the file)
• Try out .ts config files for different plugins (instead of .js) - depending on which tools support it (i.e, ESLint, Prettier, StyleLint, Postcss, Tailwind, ...)
• Update dependencies - npm outdated or https://www.npmjs.com/package/npm-check-updates
• Try out module:true in package.json OR Try out .tsm config files and https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#ecmascript-module-support-in-nodejs
• Create a remap utility for cases where code like Object.fromEntries(Object.entries().map(([key,value])=>[key, remap(key,value)] as const)) is used (i.e, values in an object are changed, but keys remain the same)
• Search for unused exports. Maybe there is a way to automate them? This would be good as that will speed up IDE and improve auto import
• Create an React component that lets set an event listener?
• Begin outsourcing undifferentiated common lifting. Don't try to solve again the problems that have already been solved and whose solutions works for us
• Use Typed CSS. Use it instead of element.styles. https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API
• Use named regex capture groups (for readability and avoiding bugs)
• Replace all usages of dataset with dataSet in the code
• Don't use while (true) {...} or for (;;){...} as they cause optimizer to bail out thus bad for performance
• Use promise .finally() instead of long .then().catch() chains
• When calling fetchCollection, use filters like { id__in: ids.join(',') } instead of separate request for each ID
• Remove or simplify usages of .reduce - https://www.youtube.com/watch?v=qaGjS7-qWzg
• Don't use shorthand arguments. Inspect Dockerfile, docker-compose, Makefile, *.sh for usages of shorthand arguments and replace with full arguments for clarity. Can also add comments. Shorthand arguments are useful to speed up typing, but aren't self-documenting and are error prone
• Replace custom utilities with existing utilities (from d3 or etc)
• Remove reliance on jQuery (Rewrite Business rules, resourceApi.js and collectionApi.js to TypeScript #2621)
• Remove reliance on Backbone.js (Rewrite Business rules, resourceApi.js and collectionApi.js to TypeScript #2621)
• Remove reliance on underscore.js (Rewrite Business rules, resourceApi.js and collectionApi.js to TypeScript #2621)
• Run npm install on dependency changes