Improving my blog post publishing tool


The publishing process for my blog posts is as follows:

  1. I write a blog post in a tool called Typora;
  2. I paste the blog post into a web tool I made that has various utilities to help me format my page;
  3. The web tool creates a markdown file with my blog post, and;
  4. 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:

My old blog post publishing tool

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:

My whiteboard sketch of a new publishing tool, featuring 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:

My new blog post publishing 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.



Source link

Visited 3 times, 1 visit(s) today

Related Article

Coffee Mate’s “Freaky” Tongue Commercial Is Sending Twitter Into A Spiral

If you’re tuned in for the Super Bowl (read: glancing up from your buffalo chicken dip when the commercials start), you likely caught Coffee Mate’s 30-second ad spot—and are now traumatized/confused/questioning everything along with us. The creamer brand decided to go big or go home for its first-ever Super Bowl commercial with a Shania Twain

Canucks Coffee: The Elias Pettersson vibes are good

Breadcrumb Trail Links Sports Hockey NHL Vancouver Canucks The Canucks’ No. 1 centre was impactful Saturday. And his post-game demeanour said everything. Get the latest from Patrick Johnston straight to your inbox Sign Up Published Feb 09, 2025  •  3 minute read You can save this article by registering for free here. Or sign-in if

Starbucks Giving Free Coffee To Santa Clarita Residents On Monday

Starbucks is giving away free coffee Monday to recharge you from all the Super Bowl snacking and partying. With the Big Game on Sunday, Feb. 9, many Americans will spend the day going big – which may lead to a long Monday and the need for free Starbucks. “That’s why on Monday, Feb. 10, your

Co-fermentation can create wild fruit flavors. Are they any good?

Sign up for the Slatest to get the most insightful analysis, criticism, and advice out there, delivered to your inbox daily. The weirdest coffee I’ve ever tasted is one I found at a coffee shop in Portland, Oregon, last fall. Like many coffee enthusiasts, I usually buy beans based on the country of origin or

Here’s how to get free coffee the Monday after Super Bowl LIX

Starbucks will be providing free coffee the Monday after the Super Bowl, Feb. 10, the Seattle-based company announced. “With the big game on Sunday, Feb. 9, many Americans will spend the day going big – which may lead to a long Monday,” an announcement on the Starbucks website said. “That’s why on Monday, Feb. 10,

Reborn Coffee Announces Financing Commitments of up to $60.0 Million

Reborn Coffee, Inc. Financing Provides Operating Liquidity and Positions Reborn Coffee for Expansive Growth, Flagship Openings, and Industry Innovation BREA, Calif., Feb. 07, 2025 (GLOBE NEWSWIRE) — Reborn Coffee Inc. (Nasdaq: REBN), a leader in the specialty coffee market, today announced has entered into a securities purchase agreement and a common stock purchase agreement for

ProCook Barista Bean to Cup Espresso Coffee Machine review

ProCook Barista Bean to Cup Espresso Machine: two-minute review The ProCook Barista Bean to Cup Espresso Machine is a semi-automatic coffee maker sporting a smart design, a beginner-friendly interface, and an impressive set of features that belie its entry-level price. At £399 (about $500 / AU$800), it’s one of the most affordable bean-to-cup coffee makers

Kaiyden’s serves up coffee named after regulars, community

Owner and founder Chidi Onukwugha has offered the Wooster Square neighborhood an ever-expanding menu with a personal touch for over three years. Nicolas Ciminiello 12:37 am, Feb 06, 2025 Ethan Wolin, Contributing Photographer Kaiyden’s, a coffee shop located in Wooster Square, has quickly grown into a neighborhood fixture in only three years since it opened

Coffee Linked to Improved Cognitive Function in Patients with Atrial FibrillationDaily Coffee News by Roast Magazine

A new study highlights the potential cognitive benefits of regular coffee consumption for patients with atrial fibrillation (AF), a common heart arrhythmia that significantly increases the risk of stroke, cognitive impairment and dementia. The research, involving more than 2,400 participants, found a dose-dependent association between daily coffee intake and enhanced cognitive performance, with as little

Coffee Shop Market Statistics 2032

Coffee Shop Market 𝐂𝐨𝐟𝐟𝐞𝐞 𝐒𝐡𝐨𝐩 𝐌𝐚𝐫𝐤𝐞𝐭 𝐎𝐯𝐞𝐫𝐯𝐢𝐞𝐰 Coffee shops have evolved from simple beverage-serving establishments into social hubs that cater to various consumer needs. These include places for relaxation, work, and informal gatherings. Coffee shops offer an environment conducive to meetings and discussions, making them integral to urban life. With global coffee consumption growing, coffee

Hot or Not? – Wacaco Picopresso manual espresso machine in review

If good coffee is your lifeline, you need solutions on the go. After all, if you’re out enjoying nature, it would be a shame to ruin the moment with bad coffee. We want great coffee, no matter where we are! Here’s how you can create the perfect coffee moment

How to craft the perfect espresso

Franke Coffee Systems reveals its technical solution to produce signature espresso profiles with consistent results every time. Crafting an excellent espresso is no easy feat. Like cooking the perfect steak, timing is everything: not enough and it will be undercooked, too much and it will be inedible. The same goes for espresso. Too little time

Latest global coffee and hospitality industry news

The US drive-thru coffee chain will no longer charge $0.80 for oat, almond and coconut dairy alternatives, with four of the five largest branded coffee chains in the US now offering non-dairy free of charge Nine in 10 US industry leaders believe it is important for coffee shops to offer dairy alternatives | Photo credit:

0
Would love your thoughts, please comment.x
()
x