We recently launched Quack, a simple utility for you to share a beautifully rendered version of any Markdown text. This software is completely front-end based, and for me personally it was a bit of a challenging puzzle to implement. Thankfully we have genius hackers like Arun here at Good Enough!
Arun built the first cut of this browser-based Markdown editor as a purely personal editor that used browser local storage to keep what you've written from disappearing…assuming you were using the same computer and same browser as when you first did your writing.
(This version of Quack was called Ephemeral. We had in mind that an interesting feature of the editor could be that the beautiful page would expire after an allotted amount of time. Maybe we'll reconsider this feature if we build Quack into a full-fledged product. [Pun definitely intended.])
The primary discoveries with this iteration were around the use of CodeMirror. This code editor was a fairly easy drop-in for Arun because he has played with it before. We're not expecting most people to type code into Quack, but CodeMirror is working well so far as an editor for our purposes. We later also made use of the CodeMirror placeholder plug-in. For processing Markdown to HTML, Arun brought in Showdown.
From there Lettini, with input from Shawn, started iterating on the design of Quack. The yellow duck quickly arose as the muse for the design, leading to the implementation of various yellow and black looks. There were looks with and without nav bars and looks with left-hand and up-top toolbars. Minimal looks and heavier looks. What you see now is a fairly minimal design, intending to focus on the writing itself as that's the whole point of this exercise! There are also some nice design features in the editor, such as underlining and bolding things you've Markdown'ed to be formatted in those ways, with the help of CodeMirror's Markdown support.
Shawn also hand drew several duckies. He enjoyed this more than is reasonable. Reload the page to find them all!
While Quack (beta) is not a complicated thing, a few details still needed sorted. I, often with the help of Arun, worked on fixing and enhancing the implementation.
I wanted the person writing to be able to flip between a write mode and a preview mode, but when sharing that writing I preferred the recipient to be presented with only a view for reading. Arun and I paired on a URL-parameter-based way to detect state: a q parameter that can be set to either preview or quack. (The quack value means the shared, published view. Why? Because we're hilarious.) This is all implemented with a switch statement.
When we decided to launch this version of Quack with the written text compressed into the URL, I brought in lz-string. It appears this is a popular way to do such things because it sure seems that Numbr is using the same library. Compressing is as simple as calling LZString.compressToEncodedURIComponent on the content to compress, and LZString.decompressFromEncodedURIComponent on the compressed content to decompress.
Lettini discovered that, well, us programmers hadn't thought of sanitizing the things written into this little editor. Oops! All of the HTML tags were coming through, and even <script> tags didn't seem to be filtered out. I brought in the sanitize-html library to handle this for us, since the official Sanitizer API does not seem to be widely supported by browsers.
And there it is! While neither the code nor the idea is complex, it is surprising how long it takes to get things working just so. Certainly we'll find some bugs to squash along the way, but we're happy with this little utility for the moment. Since this is a front-end only project, you can just view source to see all of the details. There is no rocket science here, folks!