Blogging, or more specifically writing, is a daily routine for us, here in hongkiat.com. In the process, we’ve accumulated a lot of resources that would be real helpful in jumpstarting one’s blogging career. If you want to start writing your own blog, you can always check out the tons of materials we have on blogging, plus this amazing list of cheatsheets, infographics & resources you don’t want to miss.

The cheatsheets here help you write and promote your content, understand how to work better with free blogging services such as WordPress, Blogger and Tumblr, and we also have cheatsheets on basic HTML, CSS and Markdown to help you create beautiful blog themes. Now, let’s get started!

Recommended Reading: 13 Infographics To Understand The Blogosphere Better

The Brain Of A Blogger

8 Secrets To Writing Faster Blog Posts

22 Ways To Create Compelling Content

12 Things To Do After You’ve Written A New Blog Post

30 Ways To Promote Your Blog Posts

Beginners Guide To Guest Blogging

Blogging Checklist

Writing For Bloggers – A Quick Guide On Style, Substance And Strategy

Blueprint For The Perfect Blog Post

WordPress Most Popular Plugins

20 Most Effective Way Of Doing WordPress SEO For Small Business Site

WordPress Security Infographic

WordPress Cheatsheet

How To Speed Up WordPress And Boost Site Performance

WordPress SEO Cheatsheet

WordPress V3 Reference

The Anatomy Of A WordPress Theme

WordPress Cheatsheet

Markdown Cheatsheet

Basic CSS

Dreamweaver Keyboard Shortcuts

Basic HTML

Google Analytics Cheatsheet

Tumblr Cheatsheet

Blogger.com Template Cheatsheet

Unless you are really HTML-savvy, writing articles directly using HTML is not ideal. First, you have to wrap the content properly with the tags in order to format it, and secondly you will have to go back and forth from your code editor to the browser to see how it looks.

If you are a frequent web writer, I think it’s better for you to write using Markdown. Markdown allows you to write content in plain text that later can be translated into a valid HTML format, and with the help of a tool, you can instantly see the output.

Markdown Logo by Nocila Armellini

Furthermore, there seems to be a sort of trend for new publishing platforms to adopt Markdown as the primary way to write the content, for example Ghost, AnchorCMS and ScriptoGram. They allow the platform to stay simple and without being clogged up by a heavy WYSIWYG JavaScript library.

In this post, we are going show you how to write in Markdown format, and several tools that let you write with ease. Let’s check them out.

Recommended Reading: Desktop Blogging Software, The Ultimate List

Markdown Syntax Cheatsheet

Markdown is written with several notations to form the content. Let’s have a look.

Paragraph

To form a paragraph simply write it down, and hit enter to start a new paragraph. This example below:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Will be translated into.

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

Bold & Italic

You can use the asterisk mark to set Bold, or Italic. Technically, a single asterisk is for Italic and double asterisks are for Bold.

 *Lorem ipsum* **Lorem ipsum** 

The example above will form as follows.

 <em>Lorem ipsum</em> <strong>Lorem ipsum</strong> 

If you want to make the text both bold and italic, simply wrap them with triple asterisk, like so.

 ***Lorem ipsum*** 

Headings

In Markdown, Headings is marked with a hash tag. One hash tag means headings level 1, two hash tags mean heading level 2 and so forth.

 #Heading 1 ##Heading 2 ###Heading 3 ####Heading 4 #####Heading 5 ######Heading 6 

The example above will be translated into:

 <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> 

Ordered & Unordered List

To create an unordered list, initiate the line with an asterisk or a dash.

 * this is list * this is list * this is list - this is list - this is list - this is list 

To create an unordered list, initiate the line with number, as follows.

 1. this is list 1 2. this is list 2 3. this is list 3 4. this is list 4 5. this is list 5 

You can differentiate list level simply with spaces.

 1. Hello 2. Hello 3. Hello 

In HTML format, these will be translated into <ul> and <ol>.

Line

You can create lines, which is equal to <hr> by using dashes or equal signs. Here is an example.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. -------------------------------- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ================================ 

The output will look as shown in the following screenshot.

Blockquotes

To form blockquote, initiate the lines with a > sign, like so.

 > Duis aute irure dolor in reprehenderit in voluptate velit esse > cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non > proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

This example will be wrapped with a <blockquote> element

Link

To create a clickable text link, you can wrap the text with square brackets, with the URL in parentheses, like so.

 [Hongkiat.com](http://www.hongkiat.com/blog/) 

Image

Adding an image is similar to adding text link. In Markdown, an image, is initiated with an exclamation mark. Wrap the image alt text in a square bracket, and the image URL with parentheses, like so.

 ![image](http://imageurl.jpg) 

You can also insert image title in this way.

 ![image](http://imageurl.jpg "Image Title") 

Limitation

It is worth noting, as stated by the Markdown’s author that “Markdown’s formatting syntax only addresses issues that can be conveyed in plain text“. Thus, Markdown does not cover some HTML tags like table, pre, and div.

Markdown Editors

Below are several Markdown editors that help you write it easily.

Mou

Dillinger

Markable

Markdown Pad

TextDown

Want to remove the background from an image and just focus on the subject? That’s easy, just Photoshop it. Don’t know Photoshop? Well, that’s a problem now, isn’t it? Not with Clipping Magic, it’s not. In fact, by the end of this post, some of us who know Photoshop may even opt to use Clipping Magic instead.

Clipping Magic is an alpha-stage, free online tool which helps you to easily remove background from images. If you’re struggling with the lasso tool on Adobe Photoshop, you should definitely try this to ease your life.

Recommended Reading: 30+ Free Online Multimedia (Photo, Audio, Video) Editors

Remove Background From An Image

To start, browse to Clipping Magic and choose an image file that you want to work on. Depending on the image size, you may need to wait a few minutes.

You will now see two copies of your image: one is the ‘Original+Mask’ image and another is the ‘Result Preview’ image.

On the ‘Original+Mask’ image, there’s a green brush. The green brush is used to highlight the part of the image that you want to keep. For this guide, the part that we want to keep is the gun-wielding hero and the Android it is protecting.

Press Spacebar to change the brush to red and use this to highlight the area you want removed. You can instantly see on ‘Result Preview’ the outcome.

Made a mistake? Press Ctrl + Z to undo or you can press X to turn it to a blue brush then use it to highlight the mistake that you made. Press Ctrl + Y to redo what has been undone.

When you’re done, you can download the image by clicking on Download on the top bar.

Apart from downloading the result, you can also share the result with friends.

Limitation

Clipping Magic might come out as an intelligent web tool, but there’s one major problem: it doesn’t have brush size control. The default brush size is rather large and you might have problems which involve highlighting areas you don’t want highlighted. To compensate, try zooming in first before higlighting with the brush. The brush is relatively smaller in this zoomed mode.

Here is a tool that is all about making it easier for developers and website owners to have email integrated into their websites. PostMark is a web app which removes the headaches of delivering and parsing transactional email for web apps, all with minimal setup time and zero maintenance.

It is designed for web developers to integrate quality email functionality into their web apps easily without having to setup an SMTP server from nearly scratch. Let’s take a look at the features of PostMark, how to use it, the advantages and disadvantages of PostMark.

Recommended Reading: Beginners Guide to Setting Up Google Apps Email

Overview

It is built by the guys of WildBit, the same team that has brought us Beanstalk. So, you can say that they have some experience in this type of service. In general, the average web developer would use PostMark to send automated emails for verifying memberships, confirming emails and other similar notifications (so, if you’re looking for a service for sending out newsletters, this is not the service for you).

Setting up PostMark

The first step you want to do with PostMark is to get your account and server setup so, let’s get started on that! After you create your account it will redirect you to the server page, PostMark allows its users to have multiple different email servers in your account.

Ideally, if you are managing emails for multiple apps of yours, separate those by servers. All that is needed is for you to choose a name and color for the server to identify it from the other servers.

Before PostMark will allow you to start sending out emails it will require you to create a signature.

Sender Signatures are the ‘From’ addresses that your subscribers see when they receive any emails from you. They need to be confirmed to verify ownership, approve accounts, and to also prevent spam. After those simple steps, you have your server set up and ready for you to implement the API into your web app.

Statistics

Now, what would an email service be without statistics? PostMark’s statistics is a great way to see how many emails that were sent out by the server, how many emails bounced and how many spam complaints your server has received which is a great feature to utilize.

Pricing

PostMark’s pricing is a bit different (and better) than the ordinary web-based service. You pay for only what you use rather than an expensive monthly fee set for emails that go unused. PostMark allows you to buy credits which are priced at a mere $1.50/1,000 for every emails sent.

Should You Try it?

Here’s a recap of the advantages of PostMark and a few shortcomings (just a few) of the app.

Advantages

PostMark has some great advantages over other email server web apps and is by far a better option that setting up your very own server from scratch.

• The pricing is just right – priced at $1.50/1,000 emails.
• Setting up the servers on the PostMark app is easy and simple.
• Simple coded API with an easy-to-use documentation.
• Get weekly statistics every Monday morning. Here’s an example.

Disadvantages

Even though I give a huge thumbs up to PostMark, there are some disadvantages of the Web service.

• The dashboard can look better.
• Website is not as easy to use as it should be. At times and can be hard to find the documentation you need (but it’s there)!
• PostMark doesn’t explain their pricing (as simple as it could be).
• No ability to buy your PostMark credits with Paypal.

Conclusion

PostMark does have some great features and is really easy to use after all, and it’s the simplicity of it all that sold me! Tell us, would you try PostMark?