Live Tile on Ghost

Microsoft Edge and Internet Explorer 11 support live tile in Windows 8/8.1 and 10. This means any user/visitor who pinned your website or web application to their Start can receive notification on an update like publishing new posts and pages. It is driven with the help of RSS feed, the polling or updating of the tile happens every 30 minutes, you can get this working with your Ghost blog by simply adding this line in your themes head tag which in most themes is located in default.hbs

After adding this meta restart Ghost, if everything goes right you should able to pin your Ghost blog to you start and see it display your latest post and update on the new post being published. Thank you for reading,

Good Bootstrap practices

Bootstrap is a CSS(Cascading Style Sheets) library developed by Twitter that lets you create responsive websites with easy to understand naming convention and well-designed grid system.

It has gained popularity due to its easy of use and pre-processor support, here are some good practices that will make your Bootstrap powered environment clean and easy to manage and maintain.

Use PreProcessors

Bootstrap offers Less based builds, these builds let you choose what modules you require and are needed to be enabled and helps you override the style sheets with writing lesser lines of the stylesheet.

Things like colors of text and background color of elements classes like navbar can be changed by changing the information stored in the variables.

Use of PreProcessors can make your Bootstrap lighter and have a cleaner code base, that is not bloated by the defaults.

Use scripts depending on the structure and modules

What I mean to say is if you website does not contain large amount of Bootstrap, then don’t use the bootstrap.min.js instead use the individual module files in development and later minify them to one file in production, so if you have a bootstrap based drop-down menu, you don’t have to use the complete bootstrap javascript library and only use the dropdown.js with its helper files.

This will make your website lighter and less bloated with things that are not going to be used and the client has a smaller file to render.

These are all the major steps I take while developing a website with Bootstrap.

Thank you for reading,

If you have any question feel free to leave a comment below.

CSS: Social share buttons

I designed social share buttons for Twitter, Facebook and Google Plus, all these buttons are written in pure CSS and part of a project I have been working on.

It’s clean and simple, you can add them to your website, it’s hosted on my CDN.

The CDN is not longer available 

Markup of square buttons.

Markup for curved buttons.

Jade users can use it too:

The CDN is not longer available 

Square:"#") Twitter"#") Facebook"#") Google +  

Curved:"#") Twitter"#") Facebook"#") Google +  

Have a question? leave a comment below

Custom permalinks in Ghost

Ghost by default only lets you have dated permalink :year/:month/:day/:slug or title :title based with is set by default.

You can change this by editing the Sqlite Database and updating the the permalink column, this will let you have custom url for your posts, this will only affect urls of your posts and not pages.

Backup the Database before making any changes to it.

You need stop Ghost, than access the Database using Sqlite CLI.

sqlite3 content/data/ghost.db  

In development mode the Database will be ghost-dev.db.

sqlite3 content/data/ghost-dev.db  

Use the query below.

UPDATE settings SET value = ‘/journal/:slug/` WHERE key = 'permalinks'  

Now your permalink will be, you can set journal to anything you like.

After this step you can start Ghost.

If you visit the settings panel in your Ghost admin, you will see. that the dated permalink has been tick(turned on), this is because Ghost believes that you are using dated permalinks.

If you want to revert back, you can tick the dated permalink under settings panel in Ghost admin, this will set the url back to the default :slug, you can re tick the dated permalink and enable the actual dated permalink.

Happy Blogging.

Have a question? leave a comment below.

Why comment your code?

It lets other know why that piece of code needs to be there in the first place.

While learning programming most of us forget how important it is to comment as you are writing code and over time we ignore it. At first, it might not seem to be a very important step, but as you start writing code that contains a lot of function, or while working on a project that contains several lines of code and multiple files, It gets harder to track why a certain block of code needs to be there. The code explains itself but the comment lets the reader know why it needs to be there.

You comment does not need to be a few paragraphs to explain what a specific block of code does, It can just be one line that lets you know what your code does.

Most of the programmers only comment large blocks of code to explain why it needs to be there, But over time it is important to known what those small blocks of code do.

It is very important to comment code that is being viewed by others, specially when the project is open source or when you are working in a team. A comment will be like a short explanation over what your code did overall and why it needs to be there, to another person who is reading the code.

I never gave commenting code importance because my code was too small or was never going to be read my someone else, and I thought that I will always remember what I have written, even if I look back at the code after several days or months, I was proved wrong, It became harder for me to understand why a certain block of code was needed in my project, when I read my code of my project after a few months. It took me a little time to understand why a certain block of code. I had written was there going there, It might be because, I am not a great programmer or maybe because I don’t code daily or have a coding job to do, but it was mainly because I never commented my code.

It is also a good practice when It comes to writing maintainable code.

To fix this problem, I decided that ever block of code I write, will have at least single line comment, after doing this it helped me understand what I had written and why I had written in over there, It helped me know what I did a few days or months back, especially when I had to refer to smaller blocks of code and implement them in my other projects.

Thanks for reading, feel free to leave a comment below.

How to create a MD5 generator in PHP

Let’s create an MD5 generator, If you don’t known what MD5 is you can visit read this Wikipedia article over MD5.


PHP 5.

Web server (Apache, Nginx, Lighttpd).

Writable web root.

First create a new file, you can name it what ever you want but to keep it simple I am naming it index.php.

We now have to write some HTML that would have an input and a submit button, lets do that.

     MD5 Generator 

MD5 Generator

Once you have written the basic HTML we require, you can add the PHP below in the top of the page that we will be using to check if the input isset or empty and hash the text.

The code below check if the input isset and checks if the input is left blank before the text is submitted , if not then the md5 function will continue and process the text and convert it into md5 hash

Now we need to echo the hash by adding these lines.


We can add the line above to the

that we had left empty, it should look something like this.

Now the code should look something like this.

     MD5 Generator 

MD5 Generator

We can now style the web page using CSS.


Now that we have our page styled the code should look something like this.


     MD5 Generator 

MD5 Generator

You can find the [source on GitHib


Now we have successfully created an md5 generator. If you have any questions feel free to leave a comment below