I spend most of my time in a code editor. It's where I feel most at home. I maintain the content for this site in Markdown files, and I store them in GitHub with the rest of my website.
I like WYSIWYG editing experiences; after all, I am a front end developer, great UX and UI is my thing. On the other hand, I genuinely dislike most implementations of WYSIWYG, because they often store HTML markup with what I consider to be data. Over the years, I have seen some pretty awful problems arise when people store HTML with their data, in my opinion storing HTML with data, makes that data almost worthless.
That's why I love Markdown as a presentation language; it offers stricter control over content but allows you to have some form of structure in your text documents. With Markdown, you can easily update designs later or extract the content to share in other platforms or mediums.
Plugins for working with Front Matter content
Recently I replaced some of my plugins for a single plugin which helps keep my Front Matter content up to date.
The Front Matter: VS Code plugin replaced the following plugins which I was using before:
- Insert Date String, which I was using to insert the current date and time.
- Selected Character Count, which I was using to count the length of my title and description. (For SEO purposes it's generally accepted that titles should be between 50-60 characters and descriptions should be no more than 160 characters.
- slugify, which I was using to generate my URL slugs. The Front Matter slugify command is also better because it removes known stop words, punctuations, and special characters.
The Front Matter plugin helps keep content formatted and has support for storing lists of tags and categories.
More plugins? Yes, please!
The next plugin I recommend is Markdown All in One. Markdown All in One comes with a bunch of helpful features, below are the ones I use most, but it's worth checking it out to see what other features it has.
- Auto-generate link syntax - highlight a sentence and past a URL on top of it and it will auto-generate the Markdown link syntax.
- Keyboard shortcuts - highlight words and make them bold or emphasized by pressing CTRL/CMD + B or CTRL/CMD + I.
- Table of Contents - adding a TOC is a one-click affair, and it stays up to date as you work with your content.
Two more, less crucial, but worth a mention
To focus when writing, I wear a pair of noise-cancelling headphones and throw on some soft music to block out the background distractions. I use Spotify, so I installed vscode-spotify which provides an integration with the Spotify desktop client.
I also use WordCounter which adds a word count, character count, paragraph count, line count and approximate reading time to my status bar.
Adding a live Markdown editing experience, So much wow!
When editing my blog posts, I like to see how the article is evolving as I type, it feels more comfortable to me. I added a live Browser Preview to Visual Studio Code which allows me to load my Gatsby development site next to my Markdown editing window and it updates as I type.
BTW, that awesome theme you see on the left was developed by me, designed specifically for Coding in the Sun!
First, I launch my Gatsby project using gatsby develop. I take the URL http://localhost:8000 and place it in the live browser preview window then I enable autosave. Press CMD + P and choose File: Toggle Auto Save. You can adjust the autosave delay, the default is 1000 milliseconds. That means one second after you stop typing the editor will autosave the changes.
Unfortunately lowering the delay time does not give me a faster update experience, it tends to do the opposite. That's because each time I save the document, Gatsby still has to process the change, and that typically takes 1-2 seconds. Saving more often than once per second makes the CPU work harder and does not bring any advantage to the live editing experience.
Editing GitHub README.md files
I also contribute to several open-source and private projects on GitHub, where I have to maintain README.md files. Visual Studio Code has a built-in Markdown viewer which you can launch with CTRL/CMD + P and select Markdown: Open Preview. I use Markdown Preview Github Styling so that I can see the GitHub CSS style in my editor regardless of what theme I am currently using. It's not perfect, but it's pretty close.
That's a Wrap!
I hope you enjoyed reading this post, and I appreciate the time you took today to interact with my content. Hopefully, you discovered something interesting. Please leave me a comment if you have any questions or other plugin suggestions which you think I should check out.