Project Dependency Clean-up

Some dependencies we should consider cutting, ordered in descending order of what is likely to be most valuable AND easy to remove:

• animejs, no longer needed (6.9kB, which is surprisingly light compared to svg.js which is 16.9kB)

• rich-markdown-editor, this is contributing to a really large build size at around 343.5kB, which is like 10x the size of React + React-Dom. We should drop this and find an alternative at a later point.

• slick-carousel, react-slick (25kB, together). We should consider using an alternative component entirely

• react-tsparticles (47kB), this has caused problems in the past with setting up the project. We should consider better choices for the background. Also, this is quite a large package (and also computationally expensive to render!)

• marked (15kB), the markdown to HTML ‘transpiler’

  • We can choose more lightweight alternatives as we don’t require anything more sophisticated than mapping markdown to raw HTML.

    • remarkable (14% smaller)

    • snarkdown (93% smaller) ← this might be good. It’s 1.06kB which is very smol

• react-youtube (6kB). This is light and handy, however we could just rely on the default HTML video instead.

• react-collapse-pane (66kB), this is a large, clumsy and poorly supported package. We should definitely replace this, and possibly even release a minimal component as a npm package ourselves (nice project potentially).

  • This would take quite a bit of effort though, so it’s a little lower in the list.

• date-fns (19.5kB), this is used to give you all the date functions you would ever need. It’s a large package, but it actually beats the competitors by a lot. Eg. people threw the ‘moment’ npm package into their projects without much care and that was around 80kB. We could drop this, but if ever want to work with times/dates, unfortunately date-fns is one of the best options

• cogo-toast (4kB), these are for those neat popup notifications you sometimes see

• axios (5kB), offers nice promise-based API consumption, but we could always fall back to using the default fetch

• prop-types (0.5kB), this is tiny and ships with React apps (at least up to ~v16), but we should phase out javascript prop validation in favour of typescript’s built in static type checking which is heaps better for developer experience

Some dependencies should be in dev-dependencies rather than dependencies, eg. typescript, source-map-explorer, web-vitals, sass, identity-obj-proxy. This shouldn’t matter too much, but it’s better for ‘documentation’ purposes in package.json.