The publishing process for my blog posts is as follows:
- I write a blog post in a tool called Typora;
- I paste the blog post into a web tool I made that has various utilities to help me format my page;
- The web tool creates a markdown file with my blog post, and;
- I publish the blog post through GitHub.
I designed my web tool for publishing blog posts, called Create, after noticing how much friction there was in publishing a blog post. I had to click through several pages on GitHub, find metadata values, copy-paste information, and more. Sometimes I made mistakes which were subtle in the publishing process, until I noticed a blog post was not published.
Create lets me prepare a blog post for publishing on the web. I started with a two-column layout. In column one, there is a list of required and optional web forms for supplying metadata about a post. This includes the title for a post, a slug, a category, and more. In designing this tool, I want to have to fill out as few fields as possible. Thus, the title is automatically filled out by extracting the markdown from a blog post. Fields that I use less often are hidden behind an accordion, too, to help mitigate information overload.
In the second column, there was a plain text area in which I could put the contents of a post.
Here is what the tool looked like until recently:
This tool suited me well but, with use, I started to see some details that could be improved. I designed the page using my typical layout, which meant I didn’t have as much room on the page as I would like. Thus, there was no preview window, a feature I started to seek. Thus, I went to my white board with the question what is the ideal layout for this page? I disregarded my existing blog format and let myself start with a blank canvas. I ended up with three columns:
In the first column, I could have the metadata for a post. I wanted this information on the left, as it feels more natural to have those fields on the left of the page. I then decided that I wanted two columns for content: one in which to edit, and the other to preview my changes.
After drawing out the sketch, I started to put together the pieces of how the page should work. I knew CSS grid would be ideal in creating the layout I wanted. I also started to think about how a preview feature would work. The TinyMDE markdown editor was recommended, which provides an interface with which you can author and preview markdown in the browser.
With some experimentation, I ended up with this tool:
The full page is used for the tool, without a navigation bar, footer, etc. I wanted to have as much space as possible to author a blog post, since that is the intent of the page. I implemented the three column layout, using TinyMDE to add a rich preview feature. I also added my blog mascot in the bottom left corner of the page, to give the page more personality.
In experimenting with the tool, I found that there was friction in editing longer blog posts since I had to scroll. If I scrolled, different columns would be offset. For example, if a blog post was long, when I scrolled all of the metadata field would stay at the top of the page. To solve this problem, I set a maximum height for the content containers and an overflow-y: scroll CSS attribute. This let me scroll each column individually, and ensure that the page itself doesn’t scroll. There may be more elegant ways to implement this: if there are, let me know!
My new tool is visually simpler than the old one. There are fewer elements on the page. Everything that is on the page is something I need or that is handy. With that said, I still see opportunities for improvement. I would love a tool that automatically generates a slug, or that automatically picks a category from my list. I have been unable to come up with good heuristics for these challenges, but the topic is still on my mind. I would like to use a statistical approach for both problems.
Most important of all, the tool serves my needs. I can format content as necessary, then press the publish button to generate a markdown file that I can publish on my website. I can publish content without worrying about making small errors in markup that cause problems. I think there is great potential in the web form -> markdown pipeline.
