99 votes

Markdown preview is now available when writing topics/comments/etc.

Tags: changelog

Continuing to work my way through (long overdue) merging of open-source contributions, today we've got another much-requested one that was implemented by @wirelyre: a preview function for markdown.

Anywhere that you're writing markdown now (comments, topics, messages, user bio), there will be two "tabs" above the text field for "Edit" and "Preview". You can flip back and forth between them to see what the result of your markdown will be while you're writing, which should make it a lot easier to work on some of the tricky formatting like tables.

Like so many other features, there are still a few little weird interface oddities with it, but I wanted to get it live on the site and will probably do a few more minor tweaks to it today. Let me know if you notice anything particularly strange or broken with it.

And thanks again, @wirelyre!

49 comments

  1. [14]
    wirelyre
    Link
    I don't think people give enough credit to the difficulty of accepting open source contributions. It's hard enough keeping track of code you wrote; taking what someone else wrote and even just...
    • Exemplary

    I don't think people give enough credit to the difficulty of accepting open source contributions. It's hard enough keeping track of code you wrote; taking what someone else wrote and even just making sure it works is much harder!

    Now a call to action:

    If you're at all interested in making a contribution to Tildes, please go ahead. I'd never done any kind of web framework stuff before, but the Tildes codebase is exceptionally well organised and easy to read.

    42 votes
    1. [13]
      Grzmot
      Link Parent
      As someone familiar with tech (4th semester computer science student) but completely unfamiliar with web dev, do you have a good point to start?

      As someone familiar with tech (4th semester computer science student) but completely unfamiliar with web dev, do you have a good point to start?

      6 votes
      1. [12]
        cfabbro
        Link Parent
        https://docs.tildes.net/development-setup is a good place to start for Tildes specifically. It walks you through forking the repo, getting the prerequisites installed and setting up the Dev...

        https://docs.tildes.net/development-setup is a good place to start for Tildes specifically. It walks you through forking the repo, getting the prerequisites installed and setting up the Dev environment using vagrant so you can play around with it.

        But if you're talking about a good place to start for webdev in general, then it really depends on what tech stack you plan on working with or want to learn.

        E.g. AFAIK Tildes stack is (might get some of this wrong since I am still learning it myself):

        scripting = Python 3.7, javascript + intercooler + jquery
        server = nginx, gunicorn
        templating = jinja2, pyramid
        database = PostgreSQL, Redis, SQLalchemy + alembic + webargs
        CSS = spectre.css, Sass

        8 votes
        1. wirelyre
          (edited )
          Link Parent
          Although this is a fine description of the tech stack, it's kind of overwhelming. I spent a lot of time skimming through all that documentation and frankly most of it was unnecessary. The code is...
          • Exemplary

          Although this is a fine description of the tech stack, it's kind of overwhelming. I spent a lot of time skimming through all that documentation and frankly most of it was unnecessary. The code is all right there after all — you can just read it and see what it's doing!

          So here's where I'd start:

          1. Get the dev environment running.
          2. Find a place on a page.
          3. Change the text using a Jinja template. (Just edit the template, save, and reload the page. Magic!)
          4. Change the text using a new Python function.
          5. Change the text using JavaScript (hint: might require a terminal command if you make a new file).
          6. Change the text using Sass (CSS).
          7. Now skim through the frontend code.

          This way you won't get bogged down in APIs and reading technical documentation. If you need to write more code, open the file where it's going to go; there's probably hints for where to start just a few lines up!

          This might sound like a hacky or shallow way of working with the code, but it's not. You're observing the subset of the API which is actually used in this project, and also accurately reproducing the house style.

          9 votes
        2. [10]
          unknown user
          Link Parent
          @Deimos, is there anything particular you are doing with jQuery that can't just be done with native Javascript in the browser? I haven't really needed to use jQuery for any clientside development...

          @Deimos, is there anything particular you are doing with jQuery that can't just be done with native Javascript in the browser? I haven't really needed to use jQuery for any clientside development for a while because browsers are at that point where features like .querySelector and such are so widely supported.

          3 votes
          1. [9]
            Deimos
            (edited )
            Link Parent
            Intercooler (which handles all the ajax-y stuff on the site) has it as a dependency, and I think some other things I'm using depend on it as well (like "areyousure", which adds the confirmations...

            Intercooler (which handles all the ajax-y stuff on the site) has it as a dependency, and I think some other things I'm using depend on it as well (like "areyousure", which adds the confirmations when you try to leave a page with a modified, unsubmitted form).

            Honestly, people worry way too much about jQuery. It's tiny, can be cached indefinitely outside of version updates, and does a lot of things well. It's a tempting target and eliminating it feels good, but it accomplishes very little overall.

            4 votes
            1. [8]
              Wes
              Link Parent
              I don't know about others, but I'm not a fan of this feature. It might be the one thing I dislike about Tildes. Sometimes I decide to abandon comments when I think they're non-contributing or...

              like "areyousure", which adds the confirmations when you try to leave a page with a modified, unsubmitted form

              I don't know about others, but I'm not a fan of this feature. It might be the one thing I dislike about Tildes. Sometimes I decide to abandon comments when I think they're non-contributing or maybe overly-aggressive. Getting a prompt when trying to close the tab is really frustrating. I was annoyed when reddit added the same feature a few years back.

              I understand the idea is to prevent accidental page closes, but that's just never been an issue for me.

              2 votes
              1. [7]
                cfabbro
                Link Parent
                IMO accidentally leaving a page when you were in the middle of typing a huge comment with tons of markdown in it and having to start over as a result is far, far more frustrating than only...

                Getting a prompt when trying to close the tab is really frustrating.

                IMO accidentally leaving a page when you were in the middle of typing a huge comment with tons of markdown in it and having to start over as a result is far, far more frustrating than only occasionally having to hit the confirmation to leave the page intentionally every once in a while.

                6 votes
                1. [6]
                  Wes
                  Link Parent
                  I'm sure that's true in a general sense - I'm just giving my personal preference. I almost never lose comments, and I can't remember a time I've ever been saved by this feature. I am however...

                  I'm sure that's true in a general sense - I'm just giving my personal preference. I almost never lose comments, and I can't remember a time I've ever been saved by this feature. I am however frequently interrupted by it. For that reason I wish I could disable it.

                  3 votes
                  1. [5]
                    cfabbro
                    Link Parent
                    Fair enough. Added it as a suggestion to Gitlab: https://gitlab.com/tildes/tildes/issues/449

                    Fair enough. Added it as a suggestion to Gitlab:
                    https://gitlab.com/tildes/tildes/issues/449

                    3 votes
                    1. [4]
                      Wes
                      Link Parent
                      Ah cheers. I wouldn't be too surprised (or upset) if it's closed in an effort to prevent settings page overload, but I appreciate you submitting the suggestion. We'll see what Chad thinks.

                      Ah cheers. I wouldn't be too surprised (or upset) if it's closed in an effort to prevent settings page overload, but I appreciate you submitting the suggestion. We'll see what Chad thinks.

                      3 votes
                      1. [3]
                        Deimos
                        Link Parent
                        Yeah, I think I'll close it, but to explain my reasoning a little: I understand why it's annoying. It is, by nature, something that gets in your way. When you've already decided that you want to...
                        • Exemplary

                        Yeah, I think I'll close it, but to explain my reasoning a little:

                        I understand why it's annoying. It is, by nature, something that gets in your way. When you've already decided that you want to leave the page, that's frustrating. You were trying to do something, and it made that harder for you. That's not what it's trying to do though, it's basically a side effect. It's trying to prevent accidentally leaving the page, and there isn't really any way to distinguish between leaving deliberately or accidentally.

                        Personally, I know that it's saved me multiple times from losing a post when I do something like accidentally push a hotkey or misclick when I'm trying to open something in a new tab, and I think that's worth the minor inconvenience of needing to push Enter or click one more time when I abandon something deliberately (which really isn't that common).

                        If you want to avoid it, you can always just click the "Cancel" button to discard your partial reply first (assuming it's a reply to another comment), or do a quick Ctrl-A, Backspace to delete the whole post - it won't pop up if the form is empty. It's about the same amount of work anyway, but maybe it feels better because the discarding becomes a deliberate action as well.

                        6 votes
                        1. [2]
                          Wes
                          Link Parent
                          Updating my muscle memory to delete the text seems like a good suggestion, and I'll see if I can work on that. Thank you for the explanation. Bit of a side note, but this is similar to a problem...

                          Updating my muscle memory to delete the text seems like a good suggestion, and I'll see if I can work on that. Thank you for the explanation.

                          Bit of a side note, but this is similar to a problem that Google Chrome solved some ten years ago. Browsers used to ask you to confirm when you'd close a tab, just in case there was something important there. Google took the approach instead to always close the tab immediately, but to build in a "restore tabs" feature to make it easy to undo the action. They had found an alternative solution to reduce friction.

                          Other tools seem to have embraced this idea as well. Sublime Text and VS Code will store unsaved documents and open them back to where you were last time. No more "You have unsaved changes" prompts.

                          I wouldn't actually suggest Tildes implement something like this. Such a feature unfortunately doesn't jive with Tildes' philosophies (as I understand them). It introduces complexity, adds more reliance on fancy scripting, and may have privacy implications.

                          I really just bring up these examples as I think they provide some clever outside-of-the-box thinking, and it seemed relevant enough. Sometimes it's nice to appreciate just how much better software has gotten in the last 15 years, too.

                          6 votes
                          1. DrStone
                            Link Parent
                            If privacy is the biggest of the concerns, maybe the comment-in-progress could be saved in the browser's localStorage when the window/tab is closed that can be restored later. Comment wouldn't...
                            • Exemplary

                            If privacy is the biggest of the concerns, maybe the comment-in-progress could be saved in the browser's localStorage when the window/tab is closed that can be restored later. Comment wouldn't leave the user's machine. You could even use it to provide a Local Drafts user page. Could make it a user setting and gracefully fall back to the confirm-leave-alert if turned off or JS is disabled.

                            7 votes
  2. [16]
    Algernon_Asimov
    Link
    Ooh! Fancy stuff! It's nice to see something like this. There's: An Edit tab. A Preview tab. And when I click between them, I see the different formats (like this) in my comments, so I don't have...

    Ooh! Fancy stuff! It's nice to see something like this. There's:

    • An Edit tab.

    • A Preview tab.

    And when I click between them, I see the different formats (like this) in my comments, so I don't have to save my comment to see if I got the formatting wrong right, and then ninja-edit it.

    Nice!

    It would be better to see a live preview below the text field as I type, rather than having to click back and forth between tags, but this is definitely an improvement. Thanks, @wirelyre!

    13 votes
    1. [11]
      Deimos
      Link Parent
      Live preview isn't very feasible, unfortunately. To make it work you need to either: Maintain a second, client-side (Javascript) version of the markdown parser that behaves exactly the same as the...

      Live preview isn't very feasible, unfortunately. To make it work you need to either:

      • Maintain a second, client-side (Javascript) version of the markdown parser that behaves exactly the same as the server-side one, which is difficult. (Or switch the server-side version to Javascript so you can use the same one in both places)
      • Do a ton of network requests whenever a user is writing anything to send the markdown/results back and forth whenever the text they're writing changes.

      Both of those options aren't very good. They both add a lot of overheard (of one type or another) for something that's unnecessary the large majority of the time, since most comments only include straightforward formatting.

      17 votes
      1. Algernon_Asimov
        Link Parent
        Understood. Thanks for the explanation.

        Understood. Thanks for the explanation.

        7 votes
      2. [9]
        Adys
        Link Parent
        Dynamically loading a clientside markdown editor when clicking "Preview" doesn't seem too crazy to me?

        Dynamically loading a clientside markdown editor when clicking "Preview" doesn't seem too crazy to me?

        1 vote
        1. [2]
          Deimos
          Link Parent
          The markdown on Tildes isn't completely standard. There are a number of behavior changes (of varying significance) that would all need to be re-implemented into the editor to make it match up with...

          The markdown on Tildes isn't completely standard. There are a number of behavior changes (of varying significance) that would all need to be re-implemented into the editor to make it match up with the actual result you'll get when you submit the post. Depending on the editor, it may not even end up being possible to implement some of the changes without major rewriting. Some parts (like the sanitization of HTML that happens after the markdown is processed) would be extremely difficult to duplicate.

          It would be a ton of effort for something that's only particularly useful in niche cases.

          9 votes
          1. DrStone
            Link Parent
            I wonder how people would handle a split, with a live preview based on the core markdown engine displayed somewhere near the input, plus the tab for the proper preview. We’d have to think of some...

            I wonder how people would handle a split, with a live preview based on the core markdown engine displayed somewhere near the input, plus the tab for the proper preview. We’d have to think of some good terms to distinguish the approximate preview from the full preview. I think it would be useful to get people close enough as they type for the most commonly used markdown, then they can check the final proper render with the tag before submitting. I do see how it could be a bit misleading if we can’t find a way to convey the difference clearly.

        2. [6]
          wirelyre
          Link Parent
          Yes, but it's a lot of extra code that Is independent of all the current Tildes rendering (lots of work and maintenance). Would bloat page sizes.

          Yes, but it's a lot of extra code that

          1. Is independent of all the current Tildes rendering (lots of work and maintenance).
          2. Would bloat page sizes.
          4 votes
          1. [5]
            Adys
            Link Parent
            It wouldn't bloat page sizes if it were dynamically loaded. I hear you on #1 though, this is one of the reasons why I have a lot more appreciation for SPAs with the ability of reusing the exact...

            It wouldn't bloat page sizes if it were dynamically loaded. I hear you on #1 though, this is one of the reasons why I have a lot more appreciation for SPAs with the ability of reusing the exact same code paths when rendering things serverside.

            3 votes
            1. [4]
              unknown user
              Link Parent
              My life circumstances have changed significantly since I joined Tildes, and I am now dependent on (relatively fast) wireless broadband with a data cap each month. It's enough for me to do my job...

              My life circumstances have changed significantly since I joined Tildes, and I am now dependent on (relatively fast) wireless broadband with a data cap each month. It's enough for me to do my job and use the internet, but, I've come to appreciate Tildes' small size and lightweightness.

              Let's not change that too much.

              4 votes
              1. [3]
                Adys
                Link Parent
                I feel like you're not hearing the fact that it wouldn't bloat page sizes if it were dynamically loaded.

                I feel like you're not hearing the fact that it wouldn't bloat page sizes if it were dynamically loaded.

                1. [2]
                  unknown user
                  Link Parent
                  If it's dynamically loaded, it's still coming down the wire. Just asynchronously. So there's still a net increase in xfer size. Sure, you can cache it, but caches are unreliable (busting, user...

                  If it's dynamically loaded, it's still coming down the wire. Just asynchronously. So there's still a net increase in xfer size. Sure, you can cache it, but caches are unreliable (busting, user clearing rules, etc).

                  6 votes
                  1. Adys
                    Link Parent
                    So you're getting a markdown engine, which you will load once and which will allow you to do live previews etc; as opposed to getting the entire HTML payload every single time you want to do a...

                    So you're getting a markdown engine, which you will load once and which will allow you to do live previews etc; as opposed to getting the entire HTML payload every single time you want to do a preview.

                    The ROI on it is ridiculously fast. If you care about your data cap, you'll much rather have the JS engine than the serverside HTML one.

                    1 vote
    2. [4]
      frickindeal
      Link Parent
      Tildes Extended offers that, and it was co-written by @Bauke, so I'm surprised it hasn't be implemented here. This version is nice though, and may be better for mobile.

      Tildes Extended offers that, and it was co-written by @Bauke, so I'm surprised it hasn't be implemented here. This version is nice though, and may be better for mobile.

      5 votes
      1. [2]
        Comment deleted by author
        Link Parent
        1. Algernon_Asimov
          Link Parent
          It helps to have instant feedback as you're typing. A preview on an alternate screen is still helpful, as I said, but a live preview can let you know instantly when you've done something wrong, so...

          I don't think a live preview is necessary though, do you really need to see every letter update as you type it?

          It helps to have instant feedback as you're typing. A preview on an alternate screen is still helpful, as I said, but a live preview can let you know instantly when you've done something wrong, so you can fix it before you make more mistakes.

          8 votes
      2. [3]
        Comment deleted by author
        Link Parent
        1. [3]
          Comment deleted by author
          Link Parent
          1. Apos
            Link Parent
            Don't remove the live markdown preview please. It might not be as accurate as the Tildes one, but at least leave it as an option. Live preview is way nicer in most cases.

            Don't remove the live markdown preview please. It might not be as accurate as the Tildes one, but at least leave it as an option. Live preview is way nicer in most cases.

            7 votes
          2. frickindeal
            Link Parent
            I don't. I haven't even loaded it on this machine, so obviously I didn't need it that badly. Agreed with your other comment on the current version here being just fine.

            I don't. I haven't even loaded it on this machine, so obviously I didn't need it that badly.

            Agreed with your other comment on the current version here being just fine.

            4 votes
  3. [8]
    Comment deleted by author
    Link
    1. [7]
      Deimos
      Link Parent
      Whoops, thanks. That part should be fixed now. Good feedback about the textarea/preview sizes too. I'll tinker with that a bit and see if I can figure out something that works well, thanks!

      Just a heads up, automatically quoting highlighted text when a user clicks the Reply button seems to be broken.

      Whoops, thanks. That part should be fixed now.

      Good feedback about the textarea/preview sizes too. I'll tinker with that a bit and see if I can figure out something that works well, thanks!

      8 votes
      1. [7]
        Comment deleted by author
        Link Parent
        1. [5]
          Deimos
          (edited )
          Link Parent
          Haha, well, I'm not sure you're a very typical case. I generally don't change the textarea size most of the time, usually only when I'm writing longer posts like the ~tildes.official...

          Haha, well, I'm not sure you're a very typical case. I generally don't change the textarea size most of the time, usually only when I'm writing longer posts like the ~tildes.official announcements.

          Just for fun:

          • Average length of a @hungariantoast comment: 1251 characters
          • Average length of everyone else's comments: 441 characters

          It might be possible to make it bigger, but I don't want it to be too huge either. You could also use Stylus or a similar extension to be able to set the size to start out larger on your end as well (I can tell you how to do that if you want).

          8 votes
          1. [2]
            Comment deleted by author
            Link Parent
            1. Deimos
              Link Parent
              Yep, that's exactly it. If you want to make sure it only affects the markdown ones specifically you could change it to .form-markdown textarea.form-input instead.

              Yep, that's exactly it. If you want to make sure it only affects the markdown ones specifically you could change it to .form-markdown textarea.form-input instead.

              3 votes
          2. [3]
            Algernon_Asimov
            Link Parent
            Now do me! :P

            Just for fun:

            • Average length...

            Now do me! :P

            3 votes
            1. [2]
              Deimos
              Link Parent
              582 for you.

              582 for you.

              6 votes
              1. Algernon_Asimov
                Link Parent
                Thanks! (And to @Bauke as well.) At least I found one thing I'm above average at... ;)

                Thanks! (And to @Bauke as well.)

                At least I found one thing I'm above average at... ;)

                2 votes
        2. Algernon_Asimov
          Link Parent
          I did not even know this could be done until this very minute. You learn something every day. Thanks for that! And, now that I now about this feature, I may use it... but only very occasionally.

          I'd be willing to bet (but could totally be wrong) that most users manually click, drag, and expand the textarea anyways

          I did not even know this could be done until this very minute. You learn something every day. Thanks for that!

          And, now that I now about this feature, I may use it... but only very occasionally.

          4 votes
  4. [4]
    Apos
    Link
    I found a bug. Let's say I: Write the text Hello World in a comment. Remove it. -> [Ctrl + A] + Delete Swap to Preview Hello World will still be written in the preview. Edit: To make this clearer....

    I found a bug. Let's say I:

    1. Write the text Hello World in a comment.
    2. Remove it. -> [Ctrl + A] + Delete
    3. Swap to Preview

    Hello World will still be written in the preview.

    Edit: To make this clearer. You can also remove by pressing Backspace a couple times. In that case, only the H will remain in the preview.

    5 votes
    1. [3]
      Algernon_Asimov
      Link Parent
      Just to clarify this scenario, based on my quick testing of @Apos' description: this happens only if you delete all the text in the comment field. If you delete only part of the text, or delete...

      Just to clarify this scenario, based on my quick testing of @Apos' description: this happens only if you delete all the text in the comment field. If you delete only part of the text, or delete all the text and type something new, the preview updates correctly. It's only if you delete all the text and leave the text field blank that the preview doesn't update correctly.

      6 votes
      1. [3]
        Comment deleted by author
        Link Parent
        1. Deimos
          (edited )
          Link Parent
          Thanks, I'll fix that. (@Algernon_Asimov and @Apos as well) Edit: should be fixed now.

          Thanks, I'll fix that. (@Algernon_Asimov and @Apos as well)

          Edit: should be fixed now.

          8 votes
        2. Apos
          Link Parent
          Now that was some solid teamwork.

          Now that was some solid teamwork.

          5 votes
  5. unknown user
    Link
    Ohhhh, bitchin'! Thanks, @wirelyre!

    Ohhhh, bitchin'! Thanks, @wirelyre!

    3 votes
  6. [5]
    Amarok
    Link
    Aaand now I've disabled Tildes Extended. <3 We need a trophy case and a code monkey trophy to hand out to contributors. Let's just not make the trophy case as lame as reddit's has become. :P

    Aaand now I've disabled Tildes Extended. <3

    We need a trophy case and a code monkey trophy to hand out to contributors. Let's just not make the trophy case as lame as reddit's has become. :P

    3 votes
    1. [4]
      EightRoundsRapid
      Link Parent
      Maybe a ~contributors or something instead of a trophy cabinet? So you can see who did what without cluttering the user profile page. I really like how unfussy it is at the moment. Don't know how...

      Maybe a ~contributors or something instead of a trophy cabinet? So you can see who did what without cluttering the user profile page. I really like how unfussy it is at the moment. Don't know how feasible that would be if tildes gets big though.

      1 vote
      1. [3]
        cfabbro
        Link Parent
        Tildes Gitlab - Repository - Contributors
        1 vote
        1. [2]
          EightRoundsRapid
          Link Parent
          Yeah, but it'd be nice if that was somewhere on Tildes itself, I think.

          Yeah, but it'd be nice if that was somewhere on Tildes itself, I think.

          1 vote
          1. cfabbro
            Link Parent
            Yeah, sorry, I wasn't trying to poo-poo your idea... and I think it would also be nice to visibly reward people for contributions on Tildes itself somehow too. I was just trying to point out there...

            Yeah, sorry, I wasn't trying to poo-poo your idea... and I think it would also be nice to visibly reward people for contributions on Tildes itself somehow too. I was just trying to point out there is a place on Gitlab with that information, for anyone curious.

            1 vote
  7. duality
    Link
    Fantastic contribution @wirelyre, I was just wishing for this yesterday. :-)

    Fantastic contribution @wirelyre, I was just wishing for this yesterday. :-)

    3 votes
  8. CrazyOtter
    Link
    Really happy to see this implemented, thanks @wirelyre!

    Really happy to see this implemented, thanks @wirelyre!

    2 votes