All posts

Demo of the Blog


Hello all! This is a demo post showing all the capabilities of the blog. This entire thing is built with pure vanilla HTML5, CSS and JavaScript. The server runs on Nginx and the blog is maintained with few simple UNIX tools. You can view the source code and duplicate it from the GitHub repository here. This post is a demo showing off all the stuff that can be done with just simple tools. This post can be used as a reference to write more posts.

Writing text

As you can see, this blog is built with simplicity and minimalism as the primary design goals. This also gives us great performance and security as well. Since the blog runs on just Nginx. There are no preprocessor vulnerabilities that can be exploited. It is also blazing fast! Nginx is good at serving static files and since we have to do everything by hand, the resources will never get out of hand. This results in websites that are really really tiny and blazing fast. We have to note that just because it is simple doesn't mean that it is outdated. We can do powerful responsive design and animations with just CSS and asynchronous processing with vanilla JavaScript. The server side automation is done via UNIX tools. RSS feed and the index page were generated periodically with crontab and the viewer counts were done by analysing Nginx logs with text processing tools. The scripts are included in the tools folder.

Code

The second most common thing I do in writing a blog is include code snippets. This is simple with the code tag in HTML5. Just wrap the code in the tag and add simple styling using CSS. There are some issues with line breaks and indenting but this is manageable.

const t = "bar";
let foo = [1, 2, 3];
for (i in foo) {
  console.log("bar" + foo[i]);
}

Images

Images are simple as well. I don't think I use any fancy carousels etc for my blog so there is no need for all that. Just plain img tags which have proper meta data on them.

This is a sample image. Images are formatted to have some space around them so that they get some emphasis.

Video

Of all the stuff, this surprised me the most. HTML5 makes streaming video as easy as embedding an image. The only extra thing we need to do is setting up the video formats properly so that the video is played in every possible platform. For example, I have encoded the video as mp4, ogv and webm and the browser picks out the format which it is comfortable with. There are also other features such as autoplay, muting the video on start etc which is as minimal as it gets.

All this just takes just 3 lines of code. That's it! The above video can be made to play automatically by adding autoplay="autoplay" in the tag and can be muted by default by adding muted="muted".

Maps

Using D3, we can even include interactive maps in the blog as well. This demo shows a simple interactive map of UK drawn using D3 and topo-json. The maps is drawn with SVG graphics and is usaully blazing fast. This is not "minimal" or "library free" but drawing maps from geographic data is not trivial.

That concludes our demo of the blog. We have covered almost everything needed from a simple blogging system. This page is also a reference with which new blog posts can be made.



Comments