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