馬克雜想...

參加過三次Google I/O, 但都沒有去過它的codelab, 現在回頭看一下他的教材, 還真是好物... 一個是用appengine把pipeline, log, google storage, big query, bootstrap, channel api全部串起來, 做一個log分析程式. 那個很有趣, 之後再另外寫心得. 另外一個是教CSS,  http://io12-css-codelab.appspot.com/lessons/index.html . 也不是頂難的東西, 但是一步一步這樣教, 好有FU喔. 其中換字型原來這麼簡單. 1. 去 http://www.google.com/webfonts/ 挑字型. 它已經有很多工具可以讓你看不同大小的字型, 或是該字型當標題或內文時的感覺. 2. 選定後可以按該字型下面的Quick-use, 它還會跟你說因為用了這個字型, 造成網頁loading overhead的高低. 如果是綠色的應該影響就很小吧... 3. 再往下面看有兩個簡單的code要copy & paste. 只要把 <link href='http://fonts.googleapis.com/css?family=Quando' rel='stylesheet' type='text/css'> 放在html的header裡. 然後就可以在後續的css style裡用font-family: 'Quando', serif;來指定該字型囉... 真是想不到的簡單.

因為需要用到Google的某個service, 而那個service需要用OAuth認證, 最近研究了一下OAuth2要如何在GAE上用. 身為OAuth2推手之一的Google, 在推廣OAuth2及提供對應的Tools來說, 盡了很大的心力. 以python來說, 它就提供了 google-api-python-client 這個library, 可以很容易的使用OAuth. 我參考了這份 文件 實驗成功使用OAuth2了, 特別記錄一下. 安裝 在Linux與MacOS下十分簡單, 只要'sudo easy_install --upgrade google-api-python-client'即可安裝完成. Windows下就哭哭了, 但是最後的成果是可以在Windows下的dev_appserver.py裡執行的. 在 Google APIs Console 裡註冊你的AP 在左邊的下拉選單裡新增一個Project. 在Service那欄裡找出對應的API, 把它切換成On. 點API Access. 點Create on OAuth 2.0 client ID. 因為是GAE, 選Web application. Hostname可以先打localhost. 點Create後, 會產生三個像密碼一樣的東西, 兩個link. 把它們抄寫到一個叫settings.py的檔裡. 等等會用到. CLIENT_ID='把那串密碼裡的Client ID填在這' CLIENT_SECRET='把那串密碼裡的Client secret填在這' SCOPE='' #這是要使用的API應該會提供的資訊, 從API的文件取得. 在安裝完 google-api-python-client 後, 會在/usr/local/bin裡裝一個enable-app-engine-project的script. 如果已經有把/usr/local/bin加入PATH的話, 直接執行後面加project目錄即可. e.g. enable-app-engine-project ./ 上面那段command會複製一大堆目錄檔案過來, 把你的目錄搞的亂七八糟, 不過就將就著用吧. ...

現在是個手機門號比人頭還多的年代. 簡訊幾乎是每個人都有"能力"收的一個媒介. 如果service有狀況, 用簡訊通知是最有效的! 之前在survey transcribe service時, 找到了一個叫 twilio 的網站. 它提供的服務可多了, 可以用程式打電話給使用者(1), 然後再唸一段文字給使用者聽(2), 可以錄下使用者的回話(3), 還可以把使用者的回話轉譯成文字(4). 手機的部份則可以送簡訊(5), 還可以收使用者送來的簡訊(6)當做request, 再另外做對應的事. 可以很簡單地把程式跟電話整合在一起. 價錢看起來不太貴(打電話一分鐘2 cents, 接電話一分鐘1 cent, 每送一個SMS 1cent). 我倒也沒比較過類似服務收費就是了... 註冊的方式很簡單, 只要在它的首頁上點 Try Twilio Free , 填上基本資料就可以使用他們的API了, 還有附送30 USD的credit可供試用. 之後它還會試著吸引你upgrade成正式用戶, 比如說再另外送25 USD的credit. 主要是要吸引你提供信用卡資料就是了... 之前帳號申請就放在那裡, 忘了! 今天剛好有一個場合可以試這個API. 主要是用crontab持續的去偵測目前server的狀況. 如果有需要注意的時候, 它會即時送SMS將當時的狀況送給能夠處理的人, 免得問題擴大. 它有提供各種不同語言的API, 最近都在用python, 所以就用它的python來達成目的. 真是無敵簡單的. 1. 安裝 在ubuntu上只要打sudo apt-get install pip, sudo pip install twilio, 基本上就將必需的python package裝好了. 2. 使用 在coding之前, 有兩個資訊是需要知道的, account id與token. 這兩個值可以在login後的dashboard上看到. 用了它,  twilio  才知道要跟誰收錢. 可以把這兩個值直接寫在程式碼裡, 或者是存成TWILIO_ACCOUND_SID與TWILIO_AUTH_TOKEN這兩個環境變數. 官方文件是建議存成環境變數, 這樣就不用擔心程式碼放到source...

http://plog.longwin.com.tw/document-ebook/2010/11/02/quick-python-script-learn-2010 雖然都會了, 但是超cool.

http://www.ourtuts.com/34-outstanding-admin-panels-for-your-web-applications/ admin panel都做這麼炫... 我真是太遜了...

唔, 為了省空間, 想把一些放在 app engine data store 裡的文字, 用 zlib 壓縮起來放到 blob 裡. 在壓的過程中發現一些exception. 找了一些方法, 現在大致可以運作了... 原本 import zlib compressed = zlib.compress(log)  # 這行就會發生exception 現在改成 compressed = zlib.compress(log.encode('utf-8'))  # 這樣就可以了 但是在unzip的時候, 也要decode回來. zlib.decompress(compress).decode('utf-8') 這樣內容才會對喔...

在 python 裡有時候我需要取得一個str的長度. len(a). 但是a有時候可能是None. 所以我就要 length = 0 if a:     length = len(a) 這樣子要三行吶. 後來得知可以這樣寫 length = len(a) if a else 0 cool!

在用ubuntu的時候, 下git command都可以按tab來自動補後面的參數. 甚至連branch或tag name都會自動幫忙找出來. 十分方便. 但是在MacOS下就沒那麼方便了, 雖然它的console環境一切都好, 但是就這個讓我覺得不是太方便. 忍耐了好一陣子, 終於決定一定要找出來為什麼. Link 比想像中簡單, download一個script, 固定在.bash_profile裡去source它. 就OK了!

以為把 W3C School CSS 看完, 而且考試考了95分, 就可以直接上寫幹活了. 結果才寫幾行就卡住又要查資料了. 問題在我的HTML長的像 <ul>  <li></li>  <li></li> </ul> 我不想把所有li的屬性都改掉, 但我又不知道要怎麼用CSS selector去選id是userinfo裡的ul tag裡的li tag. 只好查資料囉. 最好的來源自然是 w3.org 囉. Grouping h1 {xxxxx} h2 {xxxxx} h3 {xxxxx} 跟h1, h2, h3 {xxxxx}是一樣的. 逗號隔開代表同時指定這幾種tag的style.  Universal selector *, 代表任何一種在document tree裡的element.  Type selectors 這種最基本了, 任何一個HTML定義的基本tag. h1 {xxxx}  Descendant selectors 跟Grouping語法很像, 只是不用逗號, 改用空格. h1 {color: red} em {color: red} h1 em {color: blue} This is h1 here is em this is h1 again 會顯示成 This is h1 here is em this is h1 again Descendant selectors div * p代表div裡, 不管多深的p tag.  Child selectors body > p {line-height: 1.3} 代表body裡的第一層p child. 跟Descendant selectors很像, 差別是用>只會選到它的第一層直接child. Adjacent sibling selectors 這個一定很少用, 所以大多文章都沒有介紹到. h1 + h2 {margin-top: -5mm} 代表選h1之後的第一個h2 tag. h1.opener + h2 {margin-top: -5mm} 代表cla...

很多屬性都有分top, bottom, left, right. 通常可以合在一行寫, 有四種組合. padding: 25px 50px 75px 100px (上25, 右50, 下75, 左100) padding: 25px 50px 75px (上25, 左右50, 下75) padding: 25px 50px (上下25, 左右50) padding: 25px (上下左右都25) Grouping 可以用逗號隔開幾個selectors, 這幾個的效果是一樣的. h1,h2,p { color: green; } Nesting p { color: blue; text-align:center; } .marked { background-color: blue; } .marked p { color: white; } 要把某個東西隱藏起來. 用display: none; 或是visibility: hidden; 但是這兩個有點不同. display: none; (東西消失, 後面的東西擠過來) visibility: hidden; (東西消失, 但是還是會佔據一塊同樣大小的位置, 後面的東西不會擠過來) block element 像是<h1>, <p>, <div>這種, 它會把所有可用的寬度都佔掉. 而且在前後都換一行. inline element 像是<span>, <a>這些, 它只會用掉它自己需要的寬度. 以上這兩種屬性, 可以用display來改掉. li { display: inline; }

這個是我比較有興趣的地方. 有四種定位的方法 Static Positioning 預設的方法 不受top, bottom, left, right影響 Fixed Positioning (position: fixed;) 指定東西出現在某個相對於browser window的位置 即使window在捲動時, 它還留在原位, 不會跟著捲 example 它接下來的element會當它不存在一樣, 繼續往下排 Relative Positioning (position: relative;) 相對於它原本應該出現的位置, 另外加上一個offset ex. (left: -20px;) 雖然用了relative positioning的element的顯示位置會變, 但是接下來的element, 還是會用它用本應該存在的座標, 繼續畫下去 Absolute Positioning (position: absolute;) 相對於他的parent的位置. 如果沒有parent, 那就是<html> 它接下來的element會當它不存在一樣, 繼續往下排 z-index, 大的排前面, 小的排後面. 可以是負的. cursor , 有一大堆屬性, 可以改變cursor的外觀 overflow: scroll; 可以讓內容超出範圍時, 加上一個scroll bar

現在在施行混亂學習大法, 寫到哪裡卡到哪裡, 卡到哪裡學到哪裡. 今天是卡在CSS上. 有個簡單排版的效果我做不出來, 查了好一陣子. 最後還是在PTT上問到答案... 在這裡記錄一下CSS我在W3CSchool做了啥. CSS是Cascading Style Sheet的縮寫 (話說cascading出現在我的碩士論文裡很多次) HTML本來不是設計來做排版的, 而是設計來描述一篇文章的結構. 例如head, title, paragraph等等. 用font, color來做一些效果, 一直都是問題. 在HTML 4之後, 號稱可以把這些描述怎麼畫內容的方法, 都獨立於HTML之外, 寫在css檔裡. selector 跟 declarations selector有幾種方法, 最簡單的就是統html的tag, 像是p, h1等等. p { color: red; text-align: center; } css裡的註解寫法跟C的一樣, 用/* */包起來. 也可以設id的style, id就是某個element的特定的名字, 應該只能有一個. 要用#來指定. #para1 { color: red; text-align: center; } id不可以是數字開頭的! class是第三種, 跟id不同的是, 它是描述一"類", 而不只是特定一個tag. 它是用.來指定. .center { text-align: center; } class也可以特別指定要在哪一種tag上生效. 例如下面, 就只有<p class="center"></p>的會生效. p.center { text-align: center; } 加入CSS也有三種方法, external, internal, inline. external就是在HTML一開始include一個css檔進來. <head> <link rel="stylesheet" type="text/css" href="xxx.css" /> </head> internal則是在HTML一開始的hea...