Technical Debt tracker

[TheYuriG]

Listing here things I couldn't figure out and I'm open for external contributions to solve. Just like National Debt, this will persist until the end of time, all that can be done is to reduce the overall debt.

• [X] Syntax highlight: I've created /tools/syntax-highlight to combat this issue. Only option I could find with Deno was to use speed-highlight which is awfully documented. As of May 23rd, 2023, the only way I figured out to use this is to import the script tag and parse the document.body after it finishes loading, which causes issues with CLS. Affected file(s): /routes/[blog]/[post].tsx. Affects users? YES. (#63)
• [X] I ended up evolving my JSX so much that it superseded the need for this feature. No markdown parser to JSX: Not using .md files to save/read blog posts. Posts are manually created as .ts files instead, then dynamically imported as needed. Affected file(s): /routes/[blog]/[post].tsx. Affects users? NO.
• [x] Too much useless CSS is shipped. I need to figure out a way to ship only the required CSS that each component needs. Completed by importing custom classes to Twind, so it will only ship the necessary CSS for each page now. The Academind mentions that we can use .module.css files in React, but I don't know what's the Preact alternative to that. When inspecting the performance, I'm usually shipping 2kb to 8kb of unused CSS per page request. It's not a big deal yet, but eventually it might become and I rather fix this sooner rather than later. Affects users? YES. (#53)
• [ ] Preact doesn't natively support portals, which makes creating Modals worse for semantics than it should be. Ideally, modals and the backdrop overlay will sit on the top of the HTML tree, near the body (reminder: use <dialog> when creating this). Preact offers the preact/compat library, which we might be able to import in order to use portals. This needs to be looked into, to check if it's actually usable. Affects users? NO.

[TheYuriG]

• [ ] No markdown parser: Not using .md files to save/read blog posts.

There is the markdown parser, but that just converts to a HTML page on disk, but I want it on memory so I can use syntax highlight over it.

• [ ] Syntax highlight: Only option I could find with Deno was to use speed-highlight which is awfully documented.

It seems like the blog will do this, but I haven't found a way to decouple it from serving the blog. I just want the highlight, not the rest.

[TheYuriG]

Too much useless CSS is shipped. [...] The Academind mentions that we can use .module.css files in React [...].

This SO post seems to indicate that is possible to do it in Preact as well.

[TheYuriG]

Too much useless CSS is shipped. I need to figure out a way to ship only the required CSS that each component needs.

While working out at the gym today, I realized that I've self-inflicted this issue by not using twind which is built into Fresh by default. That would already manage all the classes for me, only ship the required CSS, and allow me to need no .css files in /static.

Guess a refactor is inbound soon...

[TheYuriG]

Too much useless CSS is shipped. [...] The Academind mentions that we can use .module.css files in React [...].

This SO post seems to indicate that is possible to do it in Preact as well. [...] While working out at the gym today, I realized that I've self-inflicted this issue by not using twind which is built into Fresh by default. That would already manage all the classes for me, only ship the required CSS, and allow me to need no .css files in /static.

Guess a refactor is inbound soon...

Completed with #53.

[TheYuriG]

• [ ] Syntax highlight: Only option I could find with Deno was to use speed-highlight which is awfully documented.

It seems like the blog will do this, but I haven't found a way to decouple it from serving the blog. I just want the highlight, not the rest.

Completed with the tool I've created in #66.

[TheYuriG]

• [x] No markdown parser to JSX: Not using .md files to save/read blog posts. Posts are manually created as .ts files instead, then dynamically imported as needed. Affected file(s): /routes/[blog]/[post].tsx. Affects users? NO.

No longer necessary as my current JSX implementation is far superior to what a simple markdown parser would be able to achieve, then I would inflict myself with additional pain to figure out how to create (Gradient|Dotted)Link elements out of the markdown.