When I was working on the my new blog layout, I had two primary goals in mind:
- Cleaner feel with better functionality
- Seamlessly integrate with the tools I enjoy
Tidy up the Mess
I think I've captured #1 well enough, for my tastes anyhow. I know that there are bugs in the site layout1, but in the spirit of my "ship early and ship often mantra", I think it's more important for me to get the results that are "good enough" out there so that I can improve the things that matter and to catch issues that I simply will not run into2.
Another way to capture this is: "quality of life improvements".
My writing tool of choice is Ulysses. I think it's great. It offers nearly everything I want in a Markdown editor. However, I write technical content with code snippets. My previous workflow was a bit terrible:
- Write the initial post in Ulysses
- Apply the kramdown syntax using Brackets
jekyll serve -wto view my blog update
- Go back to step 2 for any edits
You see, once I move from step 1 to step 2, I cannot actually use Ulysses to do the editing anymore. Some of this is because of quirks with the app, others because of limitations of not supporting the kramdown syntax, or fenced blocks well.
But here's the thing: I really like Ulysses and using that tool is more important.
So, with the new blog design, I set out on how I can remove step 2 from the process. It's going to be just me and my editor. I know exactly what the markdown should look like in Ulysses, so there is no need to "preview" the pages anymore. Simply write, edit, and push. Done.
Optimize for You
The moral of the story is quite simple: optimize for the things that are important for you. When you do that, realize that you need to make compromises in other areas.
Here's a sample of what my new layout should look like for a full content blog post: https://owensd.io/sample.html.
With one exception, I am able to achieve all of what I want with standard markdown3. I find that very liberating4.
- Especially in IE11… oh man is that a train wreck. It's probably just some CSS prefix I forgot, I'll get to to it. =) ↩
- I run with the OS X setting of "Show scroll bars: When scrolling" option. This means I never see those large fat scroll bars, even when I have an external mouse plugged in. Of course, others run with a different option and that exposed some bugs in my design. ↩
- The actual standard… http://daringfireball.net/projects/markdown/ ↩
- If you're interested, the exception is the need to apply a specific class to the
blockquoteI use for image captions. I cannot figure out how, with CSS only, to select that nested
blockquoteand style it how I want. ↩