As much as I’m enjoying the micro.blog platform it’s looking more & more like I may need to do it with a self hosted blog somewhere. I really like the idea of the hosted plan. $5 a month is a very reasonable fee to me and the system is really perfect for me in most ways. It’s based on open standards and specs. I can use great third party tools, like Mars Edit, to draft and post. The micro.blog iOS app is great for posting while I’m out on the go. Lastly I really don’t want to spend my time futzing with servers or Wordpress instances and themes while trying to keep it all secure and up to date so I don’t get hacked.
This system really is perfect for me except for when it isn’t. I’m starting to feel a little frustrated with the lack of control I get with the paid hosted plan. I spent a non trivial amount of time drafting my first Health Up Diaries post in mars edit today. I wrote it all up in markdown attached a few images and even included some carefully tailored code snippets. I was feeling quite pleased and excited when I published. A short time later I got out my iPad to see how the post looked and that’s when my frustrations began. First up I see my image of the Health Up Display icon I put at the top of the post. Great! Except that it’s Huge. Like really big.
Like This Big!
The problem is it shouldn’t be. It was supposed to look like this as rendered in the mars edit preview.
The funny thing is in RSS readers and when I later imported the post to medium, it looked like I expected it too. I’m sure It’s something to do with the css for my microblog theme or something. I’m sure I could also hack up some css to add to it to prevent this, but I chose micro.blog to avoid exactly these kinds of things. Ultimately I said screw it I’ll live with the jumbo icon image. It’s not worth the stress.
I start reading through the post, again feeling great and pleased with what I wrote. That feeling lasted long enough for me to reach the first code snippet. When I drafted the post I took the time to try and not make the code snippets excessively wide to try and reduce the horizontal scrolling a reader would need to do to view the code. I also took the time in my markdown to make sure the code indentation was right. This is what it looked like when I saw it on the blog for the first time.
First let me pay a compliment before I rant. The colors and theming on the page look great for the code. I don’t even care that it didn’t have syntax highlighting. I just can’t live with how unreadable the code in the snippet was though. I’ll play fair and take the heat for some of the indentation issues. Perhaps I missed a few lines or mixed up some spaces vs tabs when trying to correct the mess that perfectly lined up code from Xcode always seems to paste into another text editor. Fine I opened Mars Edit and began to fix this and push edits to the server. After some time I got the indentation straightened out. After I got the indentation situation fixed I was still however left with pretty unreadable code samples. Due to the narrow width of the content area of the blog style the code was wrapping and breaking all over the place. On mobile Safari the code stretched a little off screen to the side and you could do the side to side scrolling dance as you read it. It didn’t scroll over far enough to prevent line breaks in the wrong places from having a detrimental effect on the readability of the code though. On desktop safari the code snippet was confined to the main content width though. It didn’t offer any horizontal scrolling at all. Just completely butchered code with lines of code broken all over the place. I suppose a really determined reader could make sense of it, but they shouldn’t have to try. I as the creator shouldn’t have to try. I as the creator, I could probably once again, hack up some css overrides to try and fix this, but I signed up for micro.blog so I wouldn’t have to do that right?
Can we also take just a minute to discuss that narrow content width I just mentioned?
This is the content area as viewed on my 27 inch iMac. Naturally full screen width on this display would not be comfortable for reading, but that tiny column in the center doesn’t fill even a 3rd of the screen. This just seems crazy to me. I could probably do some css overriding again to widen it up…….
I’m sure by now you know where that sentence is going. At this point I’ve invested most of my day into this blog post and trying to get it presented the way I want. I needed to fix these code samples. I did some googling to see how other people are handling code samples in their blogs and thought I’d found a good solution.
I have updated my Health Up Diaries post to use embedded gist at Github for the code snippets. On the plus side they have syntax highlighting and you can actually read the code. You do have to do an excessive amount of horizontal scrolling due to the previously mentioned narrow content width, but you can read it. There is even a nifty button to view the raw code if you’d like. Pretty sweet! There are however a few down sides to this approach. First anyone subscribed via RSS reader won’t get the embedded code snippets at all, as they need to run a script to appear on the page. Also as great as the syntax high lighting in the embed looks, I really think the styling of the native theme for presenting them looked better with the page theme.
At this point I’m thoroughly frustrated don’t know what I want to do as the long term solution here. I really love micro.blog and the simplicity of the system, but if I have to start hacking away at the css to get the results I want through a web form editor, that will be pretty frustrating. I feel If I have to go to that extreme I obviously need to just host my own blog and have full control over it. I would also have the ability to preview the draft on the server before it goes live to see exactly how it would look before I hit publish. I just really don’t know what I want to do. I do know that I’ve spent enough time worrying about it today.