Markdown

Markdown is a plain text formatting syntax designed so that it can optionally be converted to HTML using a tool by the same name. Markdown is popularly used as format for readme files.
- from wikipedia

Markdown syntax is very straightforward using few characters (# = - * `) to format plain text files. It supports headers, links, images, blockquotes, lists, paragraphs, italics and bold etc formats.

To make a phrase italic in Markdown, you can surround words with an underscore
To make a phrase bold in Markdown, you can surround words with two asterisks
To make headers in Markdown, you preface the phrase with a hash mark (#), up to 6 # for h1 to h6
To create a block quote, all you have to do is preface a line with the "greater than" caret (>).
Use new line for a hard break; and use two spaces for a soft break.

There are many “extended” implementations of Markdown that support formats like tables, definition lists, footnotes, and more. However, they’re non-standard, so they’re not essential to learning the basics

For learning markdown,  http://markdowntutorial.com/ is a very good online tutorial to learn the basics.

There are two online tools very useful to write markdown
http://www.markdownviewer.com/
http://hashify.me/

Favicon - adding badge

Adding notification count (badge) to favicon is a user-friendly design to show indicator of activities, allowing user to easily see if attention is required. There are quite a few open source implementations from github, after looking at following three libraries, I decide to use Tinycon which supports fallback (with page title update) and AMD usage. Its two sentences description is exactly what I am looking for. However, other two (favico and notify-better are great too).

http://lab.ejci.net/favico.js/
Make a use of your favicon with badges, images or videos. Animate your favicon with animated badges. You can customize type of animation, position, background color and text color. You need initialize it, e.g. var favico = new Favico()

http://blog.tommoor.com/tinycon/
Tinycon (object in global namespace) allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers (IE and Safari) that don't support canvas or dynamic favicons.

https://github.com/peachananr/notify-better
An all in one jQuery plugin that let you change your favicon, browser's title and more to reflect new notifications. It has ajax option support.

This is the first step to make browser tab active. Next, I will work on Web Notification (HTML5) and Push notification (Maverick/Safari already supports it as of today).

Favicon - Small icon big brand

What is favicon?
A favicon (favorite icon) is a small icon (usually 16x16 pixels) for website use. Most browsers display this icon in tab, bookmark, address bar. This icon is usually for branding purpose, and frequently it is created from company logo. For instance, www.google.com/favicon.ico.

How to use favicon?
Favicon is well supported across browsers. It can be ICO, PNG, JPEG, GIF or even animated GIF format. The list of HTML codes in head section usually look like below

<link rel="shortcut icon" href="http://example.com/myicon.ico" />
<link rel="icon" href="http://example.com/image.ico" />
<link rel="icon" type="image/gif" href="http://example.com/image.gif" />
<link rel="icon" type="image/png" href="http://example.com/image.png" />
<link rel="icon" type="image/x-icon" href="http://example.com/image.ico"/>
How to use the Animated FavIcon Gif?
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Reference
http://en.wikipedia.org/wiki/Favicon
http://lab.ejci.net/favico.js/
http://www.animatedfavicon.com/
https://gist.github.com/mathiasbynens/428626
http://stackoverflow.com/questions/5982282/my-animated-favicon-does-not-show-animation

WYSIWYG editor

A WYSIWYG editor uses clever Javascript to replace the textarea input field, on the fly, with an interactive editor interface that allows users to create and format their posts the same way you would in a typical word processor. No scary HTML required! Even HTML savvy types will find that good WYSIWYG editors offer a fast and convenient alternative to formatting HTML by hand.

The top two editors are TinyMCE and CKEditor
http://www.tinymce.com/tryit/full.php
http://ckeditor.com/demo#full

From Google trend CKEditor is surpassing TinyMCE. I am using TinyMCE now, but its documentation is too simple to say it is documented.

There are a couple of other editors:
fckeditor (CKeditor's parent, and performance is not good)
kindeditor
xheditor
aloha-editor

There is a blog http://www.1stwebdesigner.com/design/10-best-wysiwyg-text-and-html-editors-for-your-next-project/ lists out 10 WYSIWYG editors, and the standout two are still TinyMCE and CKEditor.