Improved data portability and markdown editor

TL;DR visit the able.md shortcut domain to try our updated markdown editor.


Able is an independent developer community for people to read and write about building things with technology. We’re building a clean place for high-quality technical knowledge sharing without the ad networks, dark patterns or data lock-in. You can read more about this in our manifesto.

As a website for people to write, we naturally want to have a great editor that makes writing feel enjoyable. We announced the initial version of our new markdown editor in October last year and since then we’ve been working on features to improve data portability and technical writing. We also wanted to do this in a way that allows most of the editor to be used by anyone who wants to write markdown, without requiring an account.

Here are some of the new features we’ve added. You can now:

  • visit the able.md shortcut domain to start a new markdown doc or post
  • use the editor to write and download markdown without an Able account
  • drag and drop a markdown file into the editor
  • import posts into your Able account from Medium, Markdown or your own RSS feed. You can preview imports for the latter two without signing up.
  • set up a webhook in your Able account to call any URL with your post’s data whenever you create, update or delete a post
  • use our Push to GitHub extension for relaying webhook calls to create, update or delete markdown files in a GitHub repo whenever you do the same on Able
  • toggle between rich text and Markdown mode in the editor, using the keyboard shortcut Ctrl/⌘ + M
  • write math equations, inline or as full-width content blocks, which are rendered using KaTeX
  • create and manage markdown compatible tables in the editor
  • share drafts saved in your account for others to review
  • toggle a table of contents for your post
  • export all of your posts from your Able account as a single JSON file, with content formatted as markdown and HTML, and images included in an accompanying folder
  • properly delete all of your data from Able when deleting your account
  • use a lot more keyboard shortcuts to write productively

All of the above features are responsive and work with mobile browsers, where applicable, and it’s about 920kB of data transfer when loading up for the first time.

We’ve also replaced Google Analytics with a more privacy-oriented, non-cookie based analytics service.

Read on if you’re interested in more details about some of the new features.


Importing

All imports can be started here.

RSS

If you write on your own blog, you can now syndicate your posts into Able by setting up imports from your RSS feed. We’ll check it for updates once a day and import any new posts as drafts into your Able account.

We’ll automatically set your original blog post as the canonical URL and we’ve added visual cues to posts so that you can display your own domain when posting on Able.

For example, if you look at Anson’s post or the screenshot below you’ll notice that the website domain he has set on his Able profile appears under his name at the top of the page and there is a link to the post’s canonical URL displayed under the post title.

Markdown

You can now import a zip file that contains one or many .md files. We also parse basic frontmatter like title and date. If you have a single markdown file, then you can just drag it directly into the markdown editor and start editing.

Medium

You can also import your Medium posts. Just export your data from Medium and upload the zip file. We’ll import your posts into drafts for you to review before publishing. You can also specify if you want embedded gists in your Medium posts to be converted to Markdown code blocks when they’re being imported.


Webhook

From the options sidebar (click ••• or press Ctrl/⌘ + O), you can click on Webhook to go to your account’s webhook settings page. You can set this up to call a URL with your post’s data any time you create, update or delete a post. You can use this for real-time back-ups to GitHub, pushing yours posts to other APIs or anything else you might want to point the editor at. You can also set whether the body of your content should be in Markdown or HTML format. Here’s what a typical request body looks like:

‌{
  "event": "post_update",
  "metadata": {
    "slug_id": "421c5845",
    "created_at": "2020-05-28T19:40:40.771527Z",
    "updated_at": "2020-05-28T19:41:19.721800Z",
    "body_type": "markdown"
  },
  "content": {
    "body": "Some **body** text goes here…",
    "title": "Example post",
    "topics": [
      "Able"
    ],
    "published": false
  }
}

Webhook requests include your webhook token in the header that you can use to verify requests when handling them and webhook calls are limited to 1 call per domain every second. If you want to try this out you can read our webhook documentation and use something like Webhook.site to set up a temporary handler to get familiar with requests.

When the webhook is enabled and you save an article, you’ll see a toast notification pop out to show the HTTP response code. This can be expanded to show the response body too, to help you with debugging integrations.


Markdown mode

You can now quickly toggle between rich text and Markdown mode with the keybord shortcut Ctrl/⌘ + M. It’s handy for toggling markdown mode when you want more control and back to rich text mode to preview your writing. The editor remembers your preferred writing format so if you just prefer writing in markdown mode then you can stick to that.


Math equations

You can now write inline math equations or math equation blocks in your posts. We use KaTeX to render them. To write an inline equation just enclose your text within single dollar signs followed by a space. So typing something like $-b \pm \sqrt{b^2 - 4ac} \over 2a$ into the editor followed by a space will render an inline equation that looks like this b±b24ac2a-b \pm \sqrt{b^2 - 4ac} \over 2a in your post.

For block equations, just enclose your text in double dollar signs, so typing $$-b \pm \sqrt{b^2 - 4ac} \over 2a$$ will give you a block-width equation like the one below.

b±b24ac2a-b \pm \sqrt{b^2 - 4ac} \over 2a

Check out Patrick’s post or Shon’s post to see some of these in action.


Tables

You can now easily create and manage markdown compatible tables in the editor. Here’s an example of a table that shows all of the shortcuts that can be used when writing in the Able editor.

Action

Shortcut

Save

Ctrl/⌘ + S

Toggle Options sidebar

Ctrl/⌘ + O

Toggle Markdown

Ctrl/⌘ + M

H1

# followed by a space on a new line

H2

## followed by a space on a new line

H3

### followed by a space on a new line

Bold text

Ctrl/⌘ + B

Italic text

Ctrl/⌘ + I

Link text

Ctrl/⌘ + K

Inline code

Enclose text in backticks `

Code block

``` on a new line

Inline math formula

Enclose text in single $ then tap space

Math formula block

Enclose text in double $$

Ordered list

1. followed by a space on a new line

Unordered list

- or * followed by a space on a new line

Blockquote

> followed by a space on a new line

Horizontal rule

=== on a new line (we’re working on ---)

Creating and managing tables is also possible on mobile devices.


Download your data

You can now export all of your post data from Able in a single JSON file under Settings > Account > Download your data. This will email you a zip file that contains a JSON file with all of your post objects. The zip file also includes images for all of your posts. This is what a typical extracted zip file looks like:

‌posts
├── images
│   ├── 33cacf41
│   │   └── image_name_b.jpg
│   │   └── image_name_a.jpg
│   ├── 21c76577
│   │   └── image_name_d.png
│   ├── 19b7ce11
│   │   └── image_name_k.jpg
│   │   └── image_name_s.jpg
│   │   └── image_name_w.jpg
│   ├── 421c5845
│   │   └── image_name_i.gif
└── posts.json

Images for your posts are saved in a folder named with the post’s ID. Image references inside the markdown and HTML content also have these relative references which should make it easy for you to find and replace the paths if you want to drop the images into another storage service somewhere.

This is what posts.json looks like inside:

‌[
  {
    "title": "My amazing post",
    "subtitle": "",
    "markdown": "Some **body** text goes here",
    "html": "<p>Some <b>body</b> text goes here</p>",
    "topics": ["Able"],
    "id": "33cacf41",
    "header_image": null,
    "slug": "my-amazing-post",
    "published": true,
    "canonical_url": null,
    "pub_date": "2020-05-30 11:47:23.267728+00:00",
    "updated": "2020-05-30 11:47:23.267728+00:00",
    "created": "2020-05-29 07:13:04.258707+00:00",
    "views": 657
  },
  {...},
  {...}
]

Deleting your account

Additionally, when deleting your account we’ve gone through a lot of care to make sure that all of your data actually gets deleted. This includes:

  • removing your profile, posts, comments from our production database. If some of your comments have replies then the comment will be dis-associated from your account and the comment text is replaced with the text ‘Deleted’, to preserve the comment thread.
  • all images you’ve ever uploaded to your account are deleted
  • all posts and images are purged from our edge cache
  • your data will roll out of our database backups within a few days

Aside from database backups, all of your data is typically deleted within 10 - 15 minutes.


There’s a lot more that we still want to do with Able, this includes support for post series, creating publications, custom domains and improving the Able job board. This is what we’ll be working on in the future.

Finally, a big thank you to Soumyajit once again for all of the outstanding JavaScript work and other bits along the way. Your contributions have been invaluable.

We’ve spent a fair amount of our spare time, effort and resources building Able because we want something like this to exist on the web. Just another place for knowledge to thrive without clutter. And by doing that we hope to build enough of a community to create and monetise a non-intrusive job board where companies can present their vacancies to great people who might be looking for new opportunities.

If you have any feedback or something isn’t working as expected then please create an issue in our suggestion box or contact us at hello@able.bio.



Kriss picture

thank you loving your editor give me feel comfortable then DEV