by cedric amaya

Improving the Medium Experience

One browser extension at a time.

I love Medium. As a consumer, it has provided me with countless articles that have helped me to better myself both personally and professionally. And as a producer, it has provided me a platform on which I can express myself as genuinely as possible through the written word.

Since using Medium, however, I have noticed some things about the publishing platform that I either found lacking or that have room for improvement. And as a web developer and tinkerer, I like to come up with the solutions for these problems myself. Here are a couple extensions I created to make your Medium experience even better.

Medium Bookmarklets ?

The first occasion of me trying to improve the Medium experience was with my Firefox WebExtension, Medium Bookmarklets (which, I found out after naming the product, aren’t actually bookmarklets).

This aimed to bring true bookmarking functionality, in the sense that you could save your spot in an article for later without the need to remember or scroll to that section. This solved a problem I constantly faced and thought others might as well.

How it Works

Since I knew that HTML elements in Medium articles contain a unique id attribute, I developed a solution that added a marker / highlighter on the selected element. This would correspond to a paragraph, heading, or quote in the article where the user wanted to save their spot which in turn saved that element’s id.

Navigating directly to that spot in the article is performed by using a fragment identifier of the saved id. For example, if this paragraph had an id of “3b75”, then to open this article with this specific paragraph at the top of the page, the URL would look something like https://blog.cedricamaya.me/improving-medium-experience-7df7e233c678#3b75 . Note the fragment identifier (#3b75) at the end.

This same functionality is usually used by writers / editors to include a table of contents in their articles on Medium. Here’s a great explanation and how-to guide that goes more into detail.

With that functionality in mind, I coded a Firefox add-on that created a sidebar of clickable cards which represented the user’s saved bookmarklets, as I called them. The click event handler on each card would navigate the current page to the bookmarklet’s URL. So if you placed a bookmarklet halfway in a long article, the need to scroll to that section where you last left off was completely eliminated.

There is more functionality included in Medium Bookmarklets, such as the need to whitelist the publications you’d like to save bookmarklets from (due to security reasons), as well as notifications when a bookmarklet it added or deleted. Other than that, it’s a pretty simple extension that aims to improve your bookmarking capabilities.

Check out Medium Bookmarklets from Mozilla Addons.

Signature ✍️

If Medium Bookmarklets was developed with the consumers of Medium in mind, then Signature was developed for those creating content on Medium.

Signature’s purpose is simple: provide writers and editors the ability to instantly add their blog’s signature / sign off with the click of a button—eliminating the need to copy and paste or retype it every time.

The idea for Signature originated after coming across numerous articles in a specific publication that all ended with the same text / copy. It was usually a call-to-action with hyperlinks, and was styled using bold or italicized text to make it stand out.

I thought to myself, “do people type that signature or copy and paste it from a previous article every time they’re writing a new blog post?” Regardless, retyping or copying and pasting takes time, and wanting to simplify the process, I developed another browser extension (this time for both Chrome and Firefox) to solve this problem.

How it Works

With Signature installed, users simply fill out their blog’s signature in the editor found in the extension’s settings page. This editor, an instance of Quill, is a rich text editor, meaning any formatting of text (i.e. bold, italics, quote, heading, code, and so on) can easily be transferred and applied to a Medium blog post draft, which also utilizes rich text capability.

Once a signature has been defined in the settings page, users will then be able to click the “signature” button (with the nib icon) located in the inline-tooltip, as shown below. Clicking that button then pastes the signature that was defined in the settings page in the draft.

Enough talking about how it works, though — let’s see it in action!

Check out Signature from Mozilla Addons and from the Chrome Webstore.

Takeaways

Like all products out there, Medium has its flaws. However, with the creative use of your imagination and a do-it-yourself attitude, you can greatly improve these issues with a little programming.

I now encourage you to improve the Medium experience in your own way and share the result using #MediumExperience. If you can’t think of your own idea or are just getting started with programming, feel free to implement a new feature or fix a bug in either Medium Bookmarklets or Signature — both are open-source and can be found on GitHub.

cedricium/medium-bookmarklets
? medium-bookmarklets - Easy way to save your place in Medium articles and return to them later.github.com cedricium/signature
✍️ Signature - Medium signatures, simplified.github.com

Thanks for reading and I look forward to seeing how you choose to improve the Medium experience!

~ cedric amaya
? wielder who loves to create things with code
GitHub | LinkedIn | Twitter