The New Able Editor

Cleaner reading and writing for technical blog posts.

Able is a bootstrapped community for people to read and write about software engineering. We don’t want to replace your personal website and we won’t do ad networks or pop-ups. You can read more about our business model here.

For the past few months we’ve been building a markdown-based editor that we wanted to see on the web. The initial release is now live and you can try out the demo, watch the video below or scroll on for more detail.

https://www.youtube.com/watch?v=TAhI-LRArzQ

First up, let’s take a look at some of the features for writing posts in the editor.

Shortcuts

We’ve added a couple of shortcuts to help reduce the need to reach for a mouse or the trackpad while writing. Below is a brief list of the initial shortcuts you can use:

  • H2: # followed by a space

  • H3: ## followed by a space

  • Inline code: surround words with backticks (`)

  • New code block: Three backticks (```)

  • Exit code block: Shift + Enter

  • Link: Highlight text, then press Ctrl + K (Windows) or CMD + K (Mac)

Syntax highlighting

Code blocks in posts have automatic syntax highlighting. You can also add language tags (e.g. JavaScript) to your posts to limit the scope of languages that are automatically detected. Here’s an example:

export const getHostnameFromPath = () => {
  if (process.env.NODE_ENV === 'development') {
    window.cookies = cookies;
  }

  const { hostname, protocol, port } = window.location;

  if (port) {
    return `${protocol}//${hostname}:${port}`;
  } else {
    return `${protocol}//${hostname}`;
  }
};

Pasting text into code blocks or the editor is generally pretty robust.

Embedding media

Currently, you can paste Gist and YouTube URLs into the editor to automatically embed them. We plan to add support for other types of media like repl.it, CodeSandbox and Twitter soon.

https://gist.github.com/RhettTrickett/c1e4a23330a610890c4c5dd560105943

Images

Drop whatever loosley metaphorical Unsplash images you might like into the editor or add a header image using the Options menu at the top right.

Posts also look pretty decent without images too, so no pressure to find that perfect metaphor.

Browser support

Able is tested on Firefox, Chrome, Safari for MacOS and Safari for iOS. Firefox gets first-class support and is the primary browser we test in. If you come across any bugs please drop an issue into our suggestion box repo, the link is at the end of this post. You can also click the ‘Feedback’ link in the footer.

Mobile support

In 2019, we believe it’s time to have a decent mobile UI for a web-based rich-text editor so that you can write or edit posts while commuting or on the move. Here’s what the UI looked like on my phone while I was writing part of this post on a flight.


Those are some of the more notable features for writing posts using the editor. Next, let’s look at some of the other features we’ve added to Able to improve the reading experience. Obviously, what you are looking at right now is an example of what your posts will look like on Able, but let’s take a look at more detail.

Performance

Here is a screenshot of a Lighthouse audit performed on an Able post.

It was done on this post: How Mixcloud serves 15 million users a month. It’s approximately 4283 words with a header image. The audit was done in Incognito mode, to disable all extensions, with cache cleared over a 4G data connection in Copenhagen using an early 2015 Macbook Pro.

DOMContentLoaded took 1.39s. Total data transferred was 289KB, with total CSS size of 30.2KB and a total JS size of 96.7KB. There are further improvements we could make but this is good enough for now.

Accessibility

Post pages have been meticulously crafted to meet a high standard for accessibility, because as a community of developers we should be leading by example. This includes syntax highlighting with comments.

RSS

People can subscribe to your RSS feed using the icon in your author signature at the bottom of posts, or on your profile. RSS is awesome, we need more of it, and we’ll be looking to see where we can add more feeds where possible so that you can choose what content you’d like to subscribe to from Able.

Digest email

Every Friday, Able sends out a weekly digest email of new posts to people who have this enabled for their account. Your posts may be included in that email if they match topics that other developers have subscribed to.

View stats

See how many views your posts get overall and for the last 30 days. Bots and repeat views within 24 hours are excluded.

Note: The above image is not real data.

No interruptions

Finally, people who read your posts won’t be greeted with any of this…


Roadmap & Feedback

As for what’s coming next, this is what we’re currently working on:

  • Embed support for repl.it, CodeSandbox and Twitter.

  • Support for tables

  • Adding canonical URLs to posts. Cross-posting from your own blog is welcome to help you build your own audience.

  • Create publications for yourself or organizations.

  • Better support for organizations who want to use technical blogging to promote their job vacancies.

  • Co-authoring support

You can let us know about bugs, feature requests, suggestions or anything else by creating an issue in our suggestion box on Github.


All that’s left to say is that we’ve put a lot of personal time and effort into creating Able as a place for people to share their work, analysis, research, lessons learned, technical postmortems, technical opinions, discussions about software products or anything else like that and we’d love to see what you do with it.

So if you’re working on something that you think is interesting and you want to tell your other half or mother about it (knowing that while they want to care they probably don’t), remember that this is the place where you can share it.

We’re relatively new on the Internet and so everyone who joins and participates in Able will help motivate us to keep going. If you’d like to know more about Able, check out our manifesto.

Credits

We used the ProseMirror toolkit as the base for this new editor. Big shoutout to Soumyajit for all the JS work. Credit to Axel Ahoi for the shipping container picture.


marcin piczkowski picture

Hi, is there an API to facilitate creation of articles without using UI, e.g. by uploading a markdown file?

Rhett Trickett picture

Hi Marcin, we have an API but it's not public yet. We just need to add support for creating auth tokens and then it should be available. We're currently busy finishing RSS import support and refining a few other things (e.g. comment formatting) and then we can look at opening up the API. I'd estimate we'd probably have this ready in a month or two. In the meantime, our paste support for the editor is pretty decent. You can copy and paste the rendered HTML into it and it should come out pretty well. Might be a quicker option right now.

Caren Lai picture

Why able instead of Notion? Because it seems that all the functionality in Able already exists in Notion.

Soumyajit Pathak picture

Hey Caren, thanks for checking out Able. I use Notion myself, but I would like to point out that Able and Notion are meant for different use cases.

Notion is more for work and task management. More like internal documentation, wikis and task management.

Able is more like a social platform for developers to learn, connect and share in a community.

For more information, please feel free to check out - https://able.bio/about#business-model

Tim Raybould picture

Looks awesome. Kudos for prioritizing RSS. I'd love to see the RSS implementation setup to push content to a pubsubhubbub hub (such as Superfeedr's or Google's).

Rhett Trickett picture

Thanks Tim, drop something into our suggestion box on GitHub and we can look into it at some point.

Linghao Zhang picture

Looks great. Thank you for building this!

Rhett Trickett picture

Thank you Linghao! Hope you enjoy it 😀

joaquim sant picture

Like it. Hate when Medium shows with some delay the banner, when I already started reading. I could login with Facebook but developers work in incognito most of the time => no cookies => waste some time closing the banner...

Rhett Trickett picture

Thanks Joaquim!

Nick Kaufmann picture

I like it. Very nice to see alt concept.

Rhett Trickett picture

Thanks Dylan! Welcome! :)