2019-12-06-composer.md (4725B) - raw

      1 <!-- title: Designing a composing interface -->
      2 <!-- slug: composer -->
      3 <!-- categories: FOSS, Projects -->
      4 <!-- date: 2019-12-06T00:00:00Z -->
      5 <!-- lastmod: 2019-12-06T01:00:00Z -->
      7 To write my blog posts, I use Markdown, a useful language to write simple
      8 fragments of text. The text is then "compiled" into HTML, which is then served
      9 as a webpage. Since Markdown files are plain text files, I mostly have used
     10 plain text editors in the past to write my posts, and I have had a decent
     11 experience with them. A week ago I was trying [WriteFreely][wf] and the
     12 difference between their composing user interface and a text editor is very
     13 noticeable. I have read people say they love writing in Vim or Emacs, but for
     14 me, something more aesthetic is more suited.
     16 I looked around to see if I could find any text editor similar to [WriteFreely's
     17 composer][wfc] and found [Ghostwriter][gr] which looked exactly like what I was
     18 looking for. However, the installation process wasn't particularly smooth in
     19 Debian, and I also use computers where I don't have root privileges, so I
     20 decided that it wouldn't suit my needs. Inspired by WriteFreely's composer, I
     21 decided to make an HTML file that would do exactly what I wanted.
     23 ## Creating my own writing interface
     25 To create my composing interface, I started with WriteFreely's and edited it
     26 heavily. The original had a lot of features (including a publishing button), so
     27 I deleted most of the code and added some of my own. As of the time of writing,
     28 my composer doesn't have many features, because it is supposed to be a simple
     29 and distraction-free tool to write content, but I will talk about the couple I
     30 have added so far.
     32 ### Saving the content between sessions
     34 The content you write doesn't disappear when you close your browser—unless you
     35 clean the browser's data. I use local storage[^ls] to store the text written, so
     36 when the composer is opened again, you can continue writing where you left off.
     37 I have whitelisted my domain from [Cookie AutoDelete][cad], so I can start
     38 writing and get back to it and any point, just opening my browser. I also added
     39 a way to edit multiple "entries" at once using query strings to differentiate
     40 which one you want to retrieve/save the changes on.
     42 [^ls]: Wait! Local storage sounds like cookies, the ones that track you, right?!
     43   Well, in the first place, it is not the same. Local storage doesn't leave your
     44   computer (except through JavaScript, you [can check][jswl] it doesn't in the
     45   composer). On the other hand, cookies are just pieces of information stored on
     46   your computer which are sent to the server. Someone can store a unique ID, so
     47   when you visit a website, they know it's you, tracking you around the
     48   internet. But cookies are also useful when you log in to a website, so you
     49   don't have to do it every time you move around a webpage. Cookies are not
     50   inherently bad.
     52 ### Exporting the text
     54 I found myself pressing `Ctrl+s` pretty frequently when writing, a habit I have
     55 from coding (always save your changes!). If you do so on Firefox, a pop-up will
     56 appear offering you to save the page—the actual HTML page. I found it quite
     57 annoying and decided to assign the shortcut a different action. If you press
     58 `Ctrl+s`, it will seem like nothing happened, however, the composer will update
     59 the word count and save the text using the system mentioned previously (it also
     60 does all this after 0.2 seconds without typing, so the feature isn't
     61 super-useful, except for getting rid of the saving the HTML dialog).
     63 However, this gave me the idea to add an exporting feature. So, if you press
     64 `Ctrl+Shift+s`, you will download a Markdown file with the text written. I
     65 decided to make it specifically a Markdown file because it is what the composer
     66 is for, however, it can be used for any other language.
     68 ## Conclusion
     70 I can now write my posts on a very simple and minimalist interface, without
     71 distractions, but with a nice design. All this without the need of installing
     72 any software. Finally, I can also edit it to my needs, as I know exactly how it
     73 works and have learned basic notions of JavaScript.
     75 Some people have disagreed with making a webpage act like a piece of software,
     76 however, it is the most convenient method for me. You can also simply save the
     77 HTML file with the dependencies (the CSS and JavaScript files) and use it
     78 offline, so it shouldn't be that much of a problem.
     81 [wf]: <https://writefreely.org/> "WriteFreely"
     82 [wfc]: <https://write.as/new> "New Post — Write.as"
     83 [gr]: <https://github.com/wereturtle/ghostwriter> "Ghostwriter — GitHub"
     84 [cad]: <https://github.com/Cookie-AutoDelete/Cookie-AutoDelete> "Cookie AutoDelete"
     85 [jswl]: </jsweblabels/> "JavaScript Web Labels — Oscar Benedito"