5 Point Checklist for Setting Up a Programming Blog

The hardest part of starting a programming blog is writing all the content with high quality. You also have to code some things yourself to demonstrate the result of your works. But, before you even begin creating content, there’s some work to do to get your programming blog set up. It’s not same as any other blogs out there. You need special design and formatting so readers will enjoy all of your contents. Let’s get started to see checklist you need to start a programming blog.

Automatic syntax highlighting

A programming blog without code snippets is like a burger without beef, it doesn’t feel right and you won’t call it a burger. You will place some code snippets inside your article and they should be colorful. Colorful code snippet is not just make your code easy to read, but also it’ll look totally beautiful. Let’s take a look at this code snippet:

#include <cstdio>  
int fibonacci(int n)  
{  
  if(n<=0)  
    return 0;  
  if(n<=1)  
    return 1;  
  return fibonacci(n-1) + fibonacci(n-2);  
}

Now compare with this code snippet:

#include <cstdio>  
int fibonacci(int n)  
{  
  if(n<=0)  
    return 0;  
  if(n<=1)  
    return 1;  
  return fibonacci(n-1) + fibonacci(n-2);  
}

Which one is good? You can see it yourself. To make a colourful code snippet, we need to style it using CSS. Hardcoding the CSS of code snippet is not an option. It’s ineffective and not good for your blog design consistency. The only best option is to use a syntax highlighting library.

There are many syntax highlighting library out there, for example Google Code Prettify, Highlight.js, SyntaxHighlighter, and many more. You can use one of them to highlight your code snippets. I recommend you to use Google Code Prettify because it’s easy, simple to use, fast, and beautiful. I use it in this blog as the syntax highlighter.

Formatting HTML <code> tag

Sometimes, you need to mention a function or variable from your code snippet. It’s usually non-standard words like myAwesomeString or thisDoSomething(). To distinguish words from code snippets with your regular text, you should do some formatting. Yes you can do italic or bold or both with those words, but they still look ugly.

One solution you can do is to use HTML <code> tag. Just put your variable or function between <code> and </code>. Unfortunately, the default <code> tag isn’t looking good enough. Of course you can change the design by using CSS. This CSS below is one of the style you can use. I use it myself in this blog. Feel free to use and alter it.

code {  
  padding: 2px 4px;  
  color: #d14;  
  background-color: #f7f7f9;  
  border: 1px solid #e1e1e8;  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;  
  font-size: 75%;  
}

Formatting HTML <kbd> tag

Similar with <code>, sometimes you want to tell your readers to press some button on their keyboard. For example you want to tell reader how to build an iOS app by pressing ⌘ + B. In this case, we can use HTML <kbd> tag. The CSS below is the style you can use. It is based on what you see from StackOverflow.com. Feel free to use and alter this style.

kbd {  
  padding: .1em .6em;  
  border: 1px solid #ccc;  
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;  
  font-size: 75%;  
  background-color: #f7f7f7;  
  color: #333;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;  
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;  
  box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;  
  border-radius: 3px;  
  display: inline-block;  
  margin: 0 .1em;  
  text-shadow: 0 1px 0 #fff;  
  line-height: 1.4;  
  white-space: nowrap;  
}

Find a place to host demo projects

It’s great if you host your own blog, you don’t have to think the place to host your demonstration project. But if you use free blogging platform like Blogger.com you should find a good place to host your project.

There are many free cloud platforms out there you can use. Let’s say Dropbox, Google Drive, Google App Engine, Heroku, and many more. You can host you web-based app or game there. You can also put your desktop app or game to free file sharing.

The point is, you should have a place to host your demo project. It’s a programming blog, you have to show your reader how something works. Of course you can just show them the video, but it’ll be awesome if they can try it before reading your tutorial.

Find a place to host source code

The point of programming blog is to show readers how to code something. And of course, you tell them how to make something by showing some codes. Your readers will appreciate you very much if you provide them with the source code of completed project.

You can zip the completed project and upload it somewhere. Or you can also setup a public git repository so user can see the progress of your coding. If you choose to host a public git repository I recommend you to use Github or Bitbucket. They’re free and awesome. Give it a try.

Summary

That’s all I have to share today. If you need to add something, feel free to write your comment here. If you have anything to ask, feel free to ask via comment. Hope this article is useful for you.

See you on my next post.

Cover Photo by Glenn Carstens-Peters on Unsplash.