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.
Hi, is there an API to facilitate creation of articles without using UI, e.g. by uploading a markdown file?
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.
Why able instead of Notion? Because it seems that all the functionality in Able already exists in Notion.
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
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).
Thanks Tim, drop something into our suggestion box on GitHub and we can look into it at some point.
Good job Rhett :)
Thanks Zoran! 👊
Looks great. Thank you for building this!
Thank you Linghao! Hope you enjoy it 😀
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...
Thanks Joaquim!
I like it. Very nice to see alt concept.
Thanks Nick!
Looks great!
Thanks Dylan! Welcome! :)
great work bro paid for add custom domain will be great and place sponsor banner like Hackernoon will be helpful ads is not bad if they related content then bring revenue sharing will motivate the author to create the best content cheer