What's up, y'all? Long time, no... blog?
Hacktoberbest is almost upon us and this year I want to take things a little farther than just submitting a few pull requests. The event is meant to help people get more into open source development, and in that vein I wnat to treat October the same way authors treat National Novel Writing Month (NaNoWriMo).
I want to start and finish a useful project within those 31 days.
I owe a lot of my career to folks putting their open source projects, packages, and products on the internet for everyone to use and I want to pay part of that back to the community I've gained so much from.
In the past, I had a lot of success on DEV.to when writing my series on Learning DevOps In Public (which itself was inspired by Shawn Wang's post). Making sure I was able to write clearly about what I was learning and applying turned out to be an incrdible way to learn, and it turns out that people vibe with that content! That series had a cumulative 13,500 views!
After having a good cadence in getting posts up for a while, I got caught up in the busy season at work and then the world kind of... blew up. Kind of fell off the grid for a long time and missed out on a lot of moments of good community building and interaction.
Honestly, for a while I was doing my best just to keep my head above water. There were projects I wanted to hack on but between work, cooking, and trying to find new ways to spend time with my friends... I didn't have the energy. I've been wanting to get back into tech writing and project work but needed the right idea to come along and the right motivation to get back to it.
Finally found the next thing I'll learn in public, and just in time for Hacktoberfest:
Building a better markdown editor.
I know I'm one of thousands (likely more) developers to take a whack at making the "perfect markdown editor", but hear me out.
My buddy, Alex Trost (curator of the Frontend Horse newsletter - which you should all check out), and I have been trying out different markdown editors over the last year or so and while the 85% of their features have a solid overlap, it's often the other 15% that we love about each individual editor.
- Bear (what I currently use on my work MBP) has a fantastic layout and organizational system, but doesn't support anything other than macOS and iOS.
- Typora (what this post was written with) has solid cross platform support, but doesn't have any native cloud syncing functionality.
- Other editors have WYSIWYG bars (not really markdown), some are web based (not ideal for me), and still others cost money when they feel feature incomplete or have stale codebases.
After doing a survey of a ton of different options, I landed on my dream editor having three main features:
- Being cross platform (Linux/Mac/Windows and eventually Android/iOS)
- Ability to cloud sync data between those platforms
- Having one editor pane where markdown syntax is rendered on the spot (like Bear and Typora)
It seems odd to me that I didn't come across a mainstream markdown editor that covers all three of those points. Maybe I'm getting in over my head with this project, but I feel like this is a solvable proble, you know?
I've been wanting to dig into Electron for years now, and I'm sure plenty of other web application developers feel a similar trepidation of making the move over to desktop applications (even if it is the same technology in the background). There are a number of tools I've built with JavaScript for my job, and being able to wrap a GUI around them quickly would make it easier for me to share them with folks who feel less at home on a command line.
After running through a couple of Electron tutorials (which I'll write about early on in October), I found that it's a pretty simple technology to use if you already have some familiarity with Node projects. I hope that by writing about my development process I'll be able to help some of y'all make the jump from web to the desktop.
A good markdown editor obviously means more than those previous three bullet points to help boost productivity, though. I whittled my wishlist down to a "top 20" list of other features (in order of importance to me):
- Local storage in something like SQLite
- Left side bar for list of notes (title, first couple lines preview)
- Auto save
- Add todo's/task list with Bear's
-syntax - Code blocks (MarkText uses GFM code fence, syntax highlighting - PrismJS?, line numbers)
- Syntax support for popular programming languages
- Word count (word/characters/paragraph/read time)
- In-line styles (like strong, strikethrough, underline, comment, etc)
- Table of contents generated by headers
- Show creation/edit date and last editing device
- Full in-line image support
- Table blocks (MarkText uses GFM table block)
- Shortcut keys for styles
- Focus mode - new note in Bear
- Light/dark modes
- Project bundle support similar to FastAuthor (https://github.com/ExamProCo/fast-author#The-Anatomy-of-a-Project)
- Export as different file types (HTML/PDF/MD)
- Organize notes with hashtags?
- Ability to cross-link and reference other notes
- Encrypt individual notes and lock the app
It's an aggressive project to tackle in just a month, but I don't see myself getting too deep into my backlog of wishlist items. Figured that having a bigger project to tackle during the month of October would help keep me motivated and make it feel like I actually earn my t-shirt and sticker pack this year - and leave me plenty to do while I try to flesh this app out through the end of the year.
Plus, there's the added benefit of me being able to use a tool I've been wanting for a while and getting full creative control over it!
I plan on working throughout the month to get at least an MVP put together and want to get a post up every few days on what I've been doing. I learned in the last round of learning in public that posting daily was too lofty a goal.
But I'm hoping to use this opportunity to really dig into using Electron to build desktop apps, get back into writing, and hopefully become a better developer while taking y'all on this journey with me!
Here's to tackling something big in 2020, and I'll see y'all on October 1st!
Until then, stay frosty.
Top comments (7)
I worked on my first few desktop apps with Electron in my first job while also learning Node and NPM at the same time. 😅
There is definitely some code I would refactor now that I've learned a lot but it's really rewarding to see a program of yours sitting on your desktop with a custom icon. ❤️
Woof. That's a lot to take on for the first time all at once. Was that at the AR/VR shop?
Come across any resources that really made things click for you?
It was a while ago, but really I just remember heavily relying on the Electron docs. It took a while to understand the Main and Renderer Processes but was ecstatic to finally have them communicate with each other in my first app.
I learned all this in the company I joined that reached out to me on our graduation day at A100. I was never asked to use the tech really, there were a lot of tasks that desperately needed to be automated so I was tinkering with different apps so anyone can use it on their desktop.
That's kind of what got me started on this track. I'm building some CLI tools that are really helpful to my team, but would be pretty confusing for some other folks if I don't wrap a non-Jenkins GUI around it.
And the main vs renderer processes are tricky. I have a sense of how they interact from running through a couple tutorials, but I'll definitely read through what you posted since it hasn't REALLY clicked yet.
Hey Henry
In the context of Hacktoberfest and using Markdown I think you should take a look at Foam.
I found the project a while ago and I think it already hits the mark on some of the bullet points you listed there (of course you can still go the route of building the MD editor as part of the month challenge but I think your contribution to the project would be valuable.)
Hey Juan!
Foam is actually what kicked all this off. My buddy, mentioned in the article, showed it to me and it looked like it covered 80% of what we wanted out of a markdown editor. And they definitely have their own take on organization/visualization.
Finding another that that misses the mark for me is what kicked me to finally say "Screw it, I'm building my own!".
Personally, I want a small stand alone notes app. So that I don't have to shuffle between VS Code windows to get to my dedicated markdown one.
I'll definitely be checking Foam out and see if there's anything I might be able to contribute next month, but thanks for the recommendation!
Dude this is super exciting! Really looking forward to seeing the process and what you learn from this, plus the final product.
And thanks for the shoutout!