Monday, May 27, 2013

Web Micro Framework Battle

WSGI Micro Framworks

這陣子一直在找適合的Micro Framwork玩第一次的Web Application.
最後選擇用Bottle, 原因是:

  • Single file module, no dependencies with other library.
  • Document

但是好不好用又是另一回事, 用了就知道..XD

以下是由WSGI.org列出的Micro Framwork:

  • bobo
    Bobo is a light-weight framework. Its goal is to be easy to use and remember.

  • Bottle
    Bottle is a fast and simple micro-framework for small web-applications. It offers request dispatching (Routes) with url parameter support, Templates, key/value Databases, a build-in HTTP Server and adapters for many third party WSGI/HTTP-server and template engines. All in a single file and with no dependencies other than the Python Standard Library.

  • Flask
    Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions. It inherits its high WSGI usage and compliance from Werkzeug.

  • Pyramid
    Merger of the Pylons and repoze.bfg projects, Pyramid is a minimalist web framework aiming at composability and making developers paying only for what they use.

  • web.py
    Makes web apps. A small RESTful library.

Micro Framworks Battle

Rank Framwork Point
1 Bottle 7
2 pesto 6
3 itty 4
4 flask, cgi+wsgiref 3
5 werkzeug 2
6 web.py 1
7 cherrypy 0
8 bobo -7
9 aspen.io -5

Reference :
Web Micro Framework Battle 1
Web Micro Framework Battle 2

AWS S3 Download Bucket Folder

Currently, AWS web console not provide folder downloading. We can use s3cmd or s3Browser for this purpose.
s3Browser is a freeware Windows client for S3 and CloudFront.

s3cmd download Bucket folder:

s3cmd sync s3://bucketname/folder /local/folder  

For download files using s3Browser, here is a tutorial.
Uploading and Downloading Files to and from Amazon S3

Thursday, May 23, 2013

Pandoc's Markdown Reference

Pandoc's Markdown Reference

Pandoc實現了基本的Markdown語法外, 還加了一些extention.
細節可參考:
Pandoc's Markdown
Markdown語法
Markdown:Syntax
Pandoc Markdown and ReST Compared

Headers (Setext and atx)

Setext-style只有兩階也就是HTML語法裡的h1h2 tag,-=的個數沒有限制.

atx-style共有6階, h1~h6.

# This is H1.
## This is H2.
### This is H3.
#### ...  
###### This is H6.  

除了階層較多之外, atx-style還可以使用Markdown syntax.

###This is *H3* header.

Output:

This is H3 header.

Inline Formatting

Basic Emphasis

斜體字: *, _ , 粗體字: **, __,

*single asterisks*  
_single underscores_  
**double asterisks**  
__double underscores__  

Output:

single asterisks
single underscores
double asterisks
double underscores


Pandoc Inline

strikeout, superscript and subscript

~~~deleted text~~~  
H~2~O is a liquid.  
2^10^ is 1024.  

Output:

deleted text
H2O is a liquid.
210 is 1024.


Math

Pandoc可以使用LaTeX來表示數學式子, 可參考Getting Started with LaTeX

$a^2 = b^2 + c^2$  
$x^{17} - 1$  
$M^\bot = \{ f \in V' : f(m) = 0 \mbox{ for all } m \in M \}.$  
$\[ \cos(\theta + \phi) = \cos \theta \cos \phi - \sin \theta \sin \phi \]$  
$\[ |y - x| < \delta \]$ then $\[ |f(y) - f(x)| < \epsilon. \]$  
\newcommand{\tuple}[1]{\langle #1 \rangle}  
$\tuple{a, b, c}$  

output:

a2 = b2 + c2
x17 − 1
M = {f ∈ Vʹ: f(m) = 0for all m ∈ M}. 
[cos(θ + φ) = cosθcosφ − sinθsinφ]
[∣y − x∣ < δ] then [∣f(y) − f(x)∣ < ε. ]

a, b, c

This is an automatic link <http://www.google.com>.  
This is [inline link](http://example.com/ "Title") inline link with title.  
This is [inline link](http://example.com/ ) inline link without title attribute.  
This is [reference link ][ref] with ID.  
This is [reference link][] without ID.  
This is [Inline Internal link](#TOC).  
This is [Internal link].  

[ref]: http://example.com/  
[reference link]: http://www.google.com  
[Internal link]: #pandocs-markdown-reference  

Output:

This is an automatic link http://www.google.com.
This is inline link inline link with title.
This is inline link inline link without title attribute.
This is reference link with ID.
This is reference link without ID.
This is Inline Internal link.
This is Internal link.

Images

Markddown images sytax

![](http://3.bp.bloGspot.com/-BLhmfBdELH0/UBT3uUd7r5I/AAAAAAAAADw/-rnn2kz5vjY/s220/oops_monk01_120.jpg "OopsMonk")

![Alt text][pic2]

[pic2]: http://3.bp.bloGspot.com/-BLhmfBdELH0/UBT3uUd7r5I/AAAAAAAAADw/-rnn2kz5vjY/s220/oops_monk01_120.jpg  

Output:

Alt text

Alt text


Markdown的貼圖不能指定圖片大小, 可以用HTML來放圖片.

<img src="http://3.bp.bloGspot.com/-BLhmfBdELH0/UBT3uUd7r5I/AAAAAAAAADw/-rnn2kz5vjY/s220/oops_monk01_120.jpg" width="50">

Output:

Embedded Video

Markdown沒有嵌入影片的語法, 需要使用HTML.

<iframe src="http://embed.ted.com/talks/lang/zh-tw/ken_robinson_how_to_escape_education_s_death_valley.html"
width="560" height="315" frameborder="0" scrolling="no" 
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Output:

Code block

Basic Code block

This is one line code block `function()`   
``There is a literal backtick (`) here.``  
Bellow is a code block:  

    if(x == 0){
        printf("x = 0");
    else
        printf("x =/= 0");

Output:

This is one line code block function()
There is a literal backtick (`) here.
Bellow is a code block:

if(x == 0){
    printf("x = 0");
else
    printf("x =/= 0");

Pandoc Code Block

Force code block(more then three ~)

~~~~~~~
if (a > 3) {
  moveShip(5 * gravity, DOWN);
  }
~~~~~~~

Output

if (a > 3) {
  moveShip(5 * gravity, DOWN);
  }

Code Syntax highlight

```python
import os
import sys

def application(env, start_response):  
    start_response('200 OK', [('Content-Type','text/html')])  
    return "Hello WSGI!!"
```

Output:

import os
import sys

def application(env, start_response):  
    start_response('200 OK', [('Content-Type','text/html')])  
    return "Hello WSGI!!"

Line Number

~~~~ {#pycode .python .numberLines startFrom="10"}
import os
import sys

def application(env, start_response):  
    start_response('200 OK', [('Content-Type','text/html')])  
    return "Hello WSGI!!"
~~~~

Output:

10
11
12
13
14
15
import os
import sys

def application(env, start_response):  
    start_response('200 OK', [('Content-Type','text/html')])  
    return "Hello WSGI!!"

Blockquotes

> This is a block quote.
>
> > A block quote within a block quote.
> > 
> > > Nets.

Output:

This is a block quote.

A block quote within a block quote.

Nets.

Lists

Basic list

Unordered(Bulleted)

* fruits
    + apples
        - macintosh
        - red delicious
    + pears
    + peaches
* vegetables
    + brocolli
    + chard

Output:

  • fruits
    • apples
      • macintosh
      • red delicious
    • pears
    • peaches
  • vegetables
    • brocolli

Ordered (Numbered)

1. list1.
1. list2.
1. list3.
1. list4.

Output:

  1. list1.
  2. list2.
  3. list3.
  4. list4.

Pandoc List Extension

startnum

5) Five
    i. 5-1
    i. 5-2
5) Six
    iii. 6-1
        * 6-1-1
        * 6-1-2
    iii. 6-2
    iii. 6-3
5) Seven
    a. 7-1
    i. 7-2
        #. 7-2-1
        #. 7-2-2
    i. 7-3

<!-- -->

5) Five again.  

Output:

  1. Five
    1. 5-1
    2. 5-2
  2. Six
    1. 6-1
      • 6-1-1
      • 6-1-2
    2. 6-2
    3. 6-3
  3. Seven
    1. 7-1
    2. 7-2
      1. 7-2-1
      2. 7-2-2
    3. 7-3
  1. Five again.

Definition lists

語法中為:Definition之間為 TAB 鍵.

Term 1

:   Definition 1

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

Output:

Term 1

Definition 1

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.


另一種寫法, 裡面無法放入code block.

Term 1
  ~ Definition 1
Term 2
  ~ Definition 2a  
  ~ Definition 2b

Output:

Term 1
Definition 1
Term 2
Definition 2a
Definition 2b

Example lists

(@)  My first example will be numbered (1).
(@)  My second example will be numbered (2).

Explanation of examples.

(@)  My third example will be numbered (3).  

(@good)  This is a good example.

As (@good) illustrates, ...  

Output:

  1. My first example will be numbered (1).
  2. My second example will be numbered (2).

Explanation of examples.

  1. My third example will be numbered (3).

  2. This is a good example.

As (4) illustrates, ...

Pandoc Footnotes

註解會出現在文章的最後面.

Here is an inline note.^[Inlines notes are easier to write, since
you don't have to pick an identifier and move down to type the
note.]  

Here is a footnote reference,^[^[^1]^]^ and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

        { some.code }

    The whole paragraph can be indented, or just the first
    line.  In this way, multi-paragraph footnotes work like
    multi-paragraph list items.

This paragraph won't be part of the note, because it
isn't indented.

Output:

Here is an inline note.1

Here is a footnote reference,[2] and another.3

This paragraph won't be part of the note, because it isn't indented.

Pandoc Table

標準的Markdown沒有實現表格的標示.

Simple tables

  Right     Left     Center     Default
-------     ------ ----------   -------
     12     12        12            12
    123     123       123          123
      1     1          1             1

Output:

Right Left Center Default
12 12 12 12
123 123 123 123
1 1 1 1

Multiline tables

--------------------------
 Centered   Default           Right Left
  Header    Aligned         Aligned Aligned
----------- ------- --------------- -------------------------
   First    row                12.0 Example of a row that
                                    spans multiple lines.

  Second    row                 5.0 Here's another one. Note
                                    the blank line between
                                    rows.
--------------------------

Output:

Centered Header Default Aligned Right Aligned Left Aligned
First row 12.0 Example of a row that spans multiple lines.
Second row 5.0 Here's another one. Note the blank line between rows.

----------- ------- --------------- -------------------------
   First    row                12.0 Example of a row that
                                    spans multiple lines.

  Second    row                 5.0 Here's another one. Note
                                    the blank line between
                                    rows.
----------- ------- --------------- -------------------------

Output:

First row 12.0 Example of a row that spans multiple lines.
Second row 5.0 Here's another one. Note the blank line between rows.

This is end of article, show defined footnotes as below:


  1. Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.

  2. Here is the footnote.

  3. Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they belong to the previous footnote.

    { some.code }

    The whole paragraph can be indented, or just the first line. In this way, multi-paragraph footnotes work like multi-paragraph list items.

Tuesday, May 21, 2013

About Markup Language

Markup Language

寫文件或blog最困擾的就是排版, 大略看一下目前較流行的Markdown & reStructuredText, 決定用Markdown來寫, rst給我的感覺就是要再學另一種語言, 雖然強大, 但我只要夠用就好, 必竟都有人用Markdown寫書了 XD.

Markdown Setup

目前是用Vim + Pandoc來寫Markdown, 網路上也有Web editor, 或是windows平台的Markdownpad, 但Web用起來不順手, Markdownpad不能跨平台. 用Vim麻煩的是preview, 寫完要手動用Pandoc轉成html, 之後直接將轉出來的html, 直接貼到blogger.

一般沒有CSS的用法:

$ pandoc README.md -o out.html  

加入CSS依文件的方法是:

$ pandoc -c markdown.css README.md -o out.html  

但是會有一個問題, 貼上blogger時會無法正常顯示, 原因在於html裡是這樣寫的:

<link rel="stylesheet" href="markdown.css" type="text/css" />  

後來想到了一個workaround, 用-H參數將CSS放入Header, 但也不是直接帶入, 需要將一般的CSS file用style tag包起來, 如下:

<style type="text/css">  
Your CSS syntax....  
</style>  

另存成pandoc-markdown.css, 如此才是真正的fully standalone.

$ pandoc -H pandoc-markdown.css README.md -o out.html  

Vim Tips

修改vimrc將*.md標示為Markdown格式, 存檔自動產生HTML檔案.

" Markdown extention
autocmd BufRead,BufNewFile *.md set filetype=markdown
" Auto Pandoc function
function! AutoPandoc()
    "check if pandoc exist
    if filereadable("/usr/bin/pandoc")
        " get current directory path and append CSS file
        let l:csspath=expand("%:p:h")."/pandoc-markdownpad-github.css"
        let l:outPut=expand("%:p:h")."/out.html"
        if filereadable(l:csspath)
            "remove old output
            if filereadable(l:outPut)
                let l:rmOut="!rm -rf ".l:outPut." && sync"
                silent execute l:rmOut
            endif

            " run command
            let l:runCmd="!pandoc -H ".l:csspath." -s ".expand("%:p")." -o ".l:outPut
            echo "Auto generated HTML at ".l:outPut
            silent execute l:runCmd
        endif
    endif
endfunction

"Audo gen html for markdown
autocmd BufWritePost *.markdown,*md call AutoPandoc()

Conclusion

  • 不用煩惱排版的問題, Blogger與Evernote排版不會差太多.
  • 可以用Git來做version control 及 backup.
  • 簡潔有力, 語法簡單.
  • Vim也有人做realtime preview的plug-in: vim-instant-markdown, 但我覺得沒有即時preview的需求.
  • 圖片使用Markdown語法無法調整大小, 可以使用HTML來放圖片.

<img src="http://3.bp.bloGspot.com/-BLhmfBdELH0/UBT3uUd7r5I/AAAAAAAAADw/-rnn2kz5vjY/s220/oops_monk01_120.jpg" width="100">

  • 影片也是用HTML, 以TEDTalk為例:

<iframe src="http://embed.ted.com/talks/lang/zh-tw/ken_robinson_how_to_escape_education_s_death_valley.html"
width="560" height="315" frameborder="0" scrolling="no"
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

uWSGI & Nginx on Ubuntu

Install uWSGI

Configure uWSGI

$ sudo apt-get install python-dev python-pip  
$ sudo pip uwsgi  
################# uWSGI configuration #################  
pcre = False  
kernel = Linux  
malloc = libc  
execinfo = False  
ifaddrs = True  
ssl = True  
matheval = False  
zlib = True  
locking = pthread_mutex  
plugin_dir = .  
timer = timerfd  
yaml = True  
json = False  
filemonitor = inotify  
routing = False  
debug = False  
zeromq = False  
capabilities = False  
xml = expat  
event = epoll  
############## end of uWSGI configuration #############  
*** uWSGI is ready, launch it with /usr/local/bin/uwsgi ***  
Successfully installed uwsgi  
Cleaning up...  
$  

Test uWSGI

Create test file called hello.py:
def application(env, start_response):  
    start_response('200 OK', [('Content-Type','text/html')])  
    return "Hello WSGI!!"  
Run uWSGI:
uwsgi --http :8000 --wsgi-file hello.py  
Open browser connect on port 8000.
http://localhost:8000

Install Nginx

Configure nginx

$ sudo apt-get install nginx-full  
The configure file path : /etc/nginx/sites-enabled/default Add your site in nginx configure file.
    location /wsgi/ {
            uwsgi_pass 127.0.0.1:8001;
            include uwsgi_params;
    }  
Use localhost port 8001 for uwsgi protocol, and 80 port for nginx. Run uwsgi and start nginx.
$ uwsgi --socket :8001 --wsgi-file hello.py  
$ sudo service nginx start  
Test your web site:
http://your-ip/wsgi/  
or
http://localhost/wsgi/
Ref:
uWSGI Tutorial - Django and nginx
WSGI using uWSGI and nginx on Ubuntu 12.04 (Precise Pangolin)