在Blogger中分享程式碼: 使用GitHub Gits

記得好久好久以前有寫過一篇: 在Blogger中加入程式碼顯示(利用Syntax highlighter)

Blogger改版以後, 再去修改Syntax highlighter怎麼樣都不成功,

找了一下GitHub有分享程式片段的功能,

使用也很簡單,

筆記: 使用 youtube-dl 下載影片擺在自行架設 Server

最近因為工作的關係，需要從 Youtube 下載影片到自己建構的 Server。確認影片的合法性之後，自己留存在本地端除了保存問題，也可以讓大陸地區可以觀看，這是最基本的需求。

神奇的DNS問題

DNS跟email阿~~

之前因為公司主機使用了舊版的Bind,
導致被導致被駭客破解, 導向釣魚網站,
後來想說交給PCHome代管DNS好了,
一切就這樣平靜了很久… 直到最近大陸同事一直抱怨無法連上公司網站,
連email都會有問題,

Log Day4 JSON

之前有聽過JSON的名詞,
當時的瞭解為跟XML一樣的資料儲存的格式,
主要特性: lightweight text-data interchange format, language independent, "self-describing"

其中language independent與self-describing是跟XML一樣的,
主要是因為用JavaScript的語法來描述文字資料,
所以才會稱之為"JavaScript Object Notation",
但事實上還是language independent.

Log Day3 REST

最近翻了一下REST,
才發現原來我以前有整理過Wiki上面的REST資料:
http://chip.twbbs.org/2010/12/rest-part-1.html
http://chip.twbbs.org/2010/12/rest-part-2.html
http://chip.twbbs.org/2010/12/rest-part-3.html

哈哈... 難怪這篇文章念起來有一點熟悉...

Log Day2 NoSQL

查了一下NoSQL,
本來以為是某種特殊的SQL,
結果並不是...

Log Day1 HTML5

最近翻了一下HTML5的書: OReilly.HTML5.Up.and.Running.2010
就我所了解的, 與HTML4比較, 較為不同的項目有:

1. Geolocation
2. Canvas
3. Video
4. Local Storage
5. Offline
6. Form: New Input Type
7. Extensibility: to Mark up some terms (or identity) for web browser or search engine

其中對於Local Storage, 蠻值得一看的文章是: An early walk-through of IndexedDB

Web中提到Local Storage主要是透過瀏覽器提供的, 簡單的key-value pair來存資料

有一些瀏覽器有實作Web SQL Database API, 以提供類似SQLite的介面,

Mozilla提出IndexedDB主要想提供有別於Web Database的SQL的支援,

以Object Store的物件存取資料庫設計,

來比較貼近DOM相關的程式設計.

另外發現原本之前做的研究, 也是一種NoSQL的資料庫,

多看一些NoSQL的資料再來做回顧.

在網頁中加入選單(JQuery&CSS方法)

在網路上找到兩個在網頁中加入類似選單的效果,
一個是利用JQuery製作,
會有"滑動"的動畫效果,
另外一個是利用CSS把選單"釘"在畫面上

在Blogger中加入程式碼顯示(利用Syntax highlighter)

Step 1. 在Blogger中打開設計->編輯HTML->找到</head>的標籤, 在</head>之前, 加入底下程式碼:

<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js" type="text/javascript">
</script>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

ps. 假如你喜歡像我顯示Flash的copy與顯示原始碼的功能, 就要使用2.0版的, 3.0版我測試怎樣都弄不出來那個功能.

Step 2: 在要顯示程式碼的程式前後加上<pre>標籤與要顯示程式碼的語言類別, 
如JavaScript就是:
 <pre class="brush: js"> ...你的程式碼... </pre>

如c語言就是:

 <pre class="brush: c"> ...你的程式碼... </pre>

範例如下:
<pre class="brush: js">
/**
 * SyntaxHighlighter
 */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
</pre>

執行結果:

/**
 * SyntaxHighlighter
 */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }

收工!

Facebook PHP SDK Test Drive 範例試驗

昨天正好跟學弟聊到Facebook上的應用程式開發,
今天來試試看安裝個範例程式瞭解一下其情況,
Facebook應該有支援多種語言的開發,
這邊先以PHP為例子. (配合Facebook網站上所提供的)

REST 閱讀心得 #3 核心原則

接續上篇: 花栗鼠柑仔店: REST閱讀心得 part 2

參考資料: Representational State Transfer - Wikipedia, the free encyclopedia

Blogger設定: Google搜尋不到與導覽列關閉

Blog搬移到Blogger這邊來,
發現了兩個小問題: Google搜尋不到跟導覽Bar想關閉.

REST 閱讀心得 #2 介面設計原則與目標

接續上篇: 花栗鼠柑仔店: REST閱讀心得 part 1

參考資料: Representational State Transfer - Wikipedia, the free encyclopedia

REST 閱讀心得 #1 歷史與限制

維基百科上面整理的資料都頗為精簡,
有一篇文章跟目前研究有很大的關係,
閱讀一下把心得與重點列在底下.

參考資料: Representational State Transfer - Wikipedia, the free encyclopedia

YUI 2: Rich Text Editor 修改支援Code編輯

之前有試過利用YUI來做出一個網頁內嵌的編輯器:
花栗鼠柑仔店: YUI 2: Rich Text Editor

最近有一個需求就是需要讓這編輯器可以顯示原始碼直接編輯,
查了一下YUI的範例: YUI Library Examples: Rich Text Editor: Code Editor

Google App Engine Test Drive: GAppProxy (利用Google App Engine架設HTTP代理伺服器)

最近新聞都在報"韓國事件",
朱大在Plurk貼了一篇: 朱小胖他爸 覺得 http://gordon168.tw/?p=432 (亞跆盟網站沒有掛，他只是刻意封鎖台灣IP！) 幹，這樣真是太機掰了！ - #92rqd0

Opera Unite的一些參考資料

Opera這瀏覽器的一些想法真的很創新:
1. Opera Unite developer's primer - Opera Developer Community
2. Opera 10.10瀏覽器加入Opera Unite功能，大玩雲端服務分享檔案、留言聊天!(上) | T客邦
3. Opera Unite：安裝及功能使用教學(下) | T客邦

原本我們都會以瀏覽器作為一個網路服務的存取客戶端(Client),
但這個功能把每個人的瀏覽器作為一個主動提供服務的伺服器端(Server),
任何使用者想分享的資訊可以透過最熟悉的瀏覽器來提供想提供的資訊,
使用者可以直接跨過架設Server的難題,
也更可讓Client與Server的界線不是那麼的明顯.

看過這個Opera的技術面與最近用過MacOS的一些想法:
未來應用程式應該要以解決使用者間的交流為導向, (User Communication oriented)
使用可攜帶性的資料(Portable Data)搭配跨平台的應用程式, 如:Web技術,
來達成長久的資訊保留/交流.

有趣的Verbatim記憶卡怪獸

真是有創意的flash遊戲

YUI 2: Rich Text Editor

很久以前就想試試看現有的Rich Text Editor如何programming,
結果比想像中簡單很多.

Stop php execution in Apache's directory

參考文件:

1. 精讚部落 不讓上傳的目錄執行PHP

有時讓使用者上傳圖片，會怕惡意的上傳可執行的php，雖然可以用改檔名來防止，就怕駭客使用非正規的方法上傳檔案，因此在上傳的目錄下，要設定不執行php的安全性設定。

httpd.conf 在網站的上傳目錄設定下：
<Directory "/home/axer/php/zdemo/upload">
AllowOverride None
php_flag engine off
Allow from all
</Directory>

2. 如何限制某個目錄不能執行PHP？
3. PHP File Upload Security