Blog-plugin: Minimize ajax requests on markdown preview with debounce

[drmzio]

One thing I've noticed with the markdown editor is that every keystroke initiates an ajax request to the server. Now imagine typing 200 characters per minute, that's equivalent 200 ajax requests per minute. One way to minimize the unnecessary amount of requests is to debounce the markdown preview. I wrote a small plugin that adds a 250 millisecond cool-down before showing an updated preview and I'm using it on https://october-news.com.

Without debounce |
--- |

With debounce |
--- |

Debounce fix: https://github.com/ompmega/blog-preview-debounce-plugin

Discussion: Should this be a core feature in the blog plugin?

[bennothommo]

@drmzio I'd be happy to make it slightly debounced as a core feature (although it needs to still feel responsive when typing). I know that mass-spamming AJAX calls could be interpreted as a DDoS by some systems too, so someone typing up a big blog post could inadvertently fall afoul of their mitigation systems.

Would you be interested in providing the change as a PR?

[LukeTowers]

@bennothommo I don't suppose there's a client side implementation of the markdown renderer that we could use instead of having to make a AJAX request to re-render the preview continually?

[drmzio]

@bennothommo For sure! I was thinking about having a setting that lets users change the debounce delay if needed. I'll see what I can come up with.

@LukeTowers So far I haven't found a client-side markdown renderer in the October codebase, only in the backend https://octobercms.com/docs/services/parser#markdown-parser but I'm curious how the client-side renderer would turn out. Might test something like this too :P

[bennothommo]

@LukeTowers There's a few out there (eg. https://github.com/markedjs/marked), but I'd be concerned that there might be small subtle differences between them and Parsedown. At least with the way the widget works currently, it's "what you see is what you get".

@drmzio

@bennothommo For sure! I was thinking about having a setting that lets users change the debounce delay if needed. I'll see what I can come up with.

I'd probably just set a sensible middle-ground between responsiveness and spamming the crap out of a server. I doubt there'd be many people who would change it TBH.

[LukeTowers]

@drmzio note that this should probably be done to the core markdowneditor widget. @bennothommo what's the difference between the widget provided by this plugin and the core one?

[bennothommo]

@LukeTowers there's very little difference I believe - it just has some slight customisations to the preview and file upload aspects, and there's tweaks to the styling of it. Otherwise, functionally, they're identical.

The preview changes just do some custom tag handling for blog posts.

[drmzio]

I've decided that this isn't much of a big issue for most people. A debounce feature would be better at the October core level, rather than specifically for this plugin.

For anyone that needs this functionality, you can clone my plugin here https://github.com/ompmega/blog-preview-debounce-plugin

However, I will be testing out a client-side markdown editor and see how it turns out. Might start with the UIkit editor https://getuikit.com/v2/docs/htmleditor.html#markdown

[bennothommo]

@drmzio It appears UIKit uses the same library I posted above for Markdown parsing on the client side. I'd probably say if you wanted to use it, it would still need to be a plugin.