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.