HTML編輯器自己做！布丁版TinyMCE編緝器 / An Online HTML Editor: Customized TinyMCE Editor

說到編輯HTML的編輯器，你會想到那個工具呢？純寫程式碼用的Sublime Text、Notepad++？給不會程式碼用的Word轉存HTML格式？混合編輯的Dreamweaver？真要我說的話，目前我看過最好、最乾淨、各種編輯器之間轉換最漂亮的編輯器，就是TinyMCE。

TinyMCE一般只是作為網站裡面將<textarea>轉變為所見即得編輯器的小工具，能像是編輯Word一樣地編輯HTML網頁，最後產生的HTML程式碼又乾淨又漂亮。我因為太常使用TinyMCE來編輯HTML網頁程式碼，特別是表格的編輯，所以乾脆索性把TinyMCE做成獨立的布丁版TinyMCE編輯器，讓人需要的時候就直接打開網頁、使用TinyMCE編輯網頁吧。

• 布丁版TinyMCE編輯器：https://pulipulichen.github.io/TinyMCE-Online-Editor/

用網頁來做合併列印！HTML合併列印小工具 / Online HTML Mail Merger

如果要用試算表資料搭配有格式的文件，批次地產生大量檔案的話，要怎麼呢？Word為主的合併列印方案都只能在單一檔案中產生許多重複範本的內容，不符合我的需求。於是我乾脆重新寫一個能夠以CSV試算表檔案搭配HTML網頁範本產生合併列印效果的線上版合併列印小工具：HTML Mail Merger。它會讀取CSV中的欄位資料以及檔案名稱(filename)欄位，以此批次產生取代以大括弧「{}」夾住的佔位符號和指定檔案名稱的檔案。合併列印再也不用仰賴Word，直接線上就處理完成吧。

試作歷程序列資料的動態生成模型：結合多層次感知機與增強學習的應用 / Developing a Dynamic Path Generator base on Users’ Activity Logs: a MLP and Reinforcement Learning Approach

繼前一篇談完歷程資料的分析方式之後，本篇則是從機器學習的角度切入，藉由分析不同背景使用者的操作歷程序列資料，並將對歷程結果的評價作為輸入資料，以此訓練一套懂得不同特質使用者會如何操作的多層次感知機(MLP)預測模型。接著再以任意一位使用者為背景，用此模型來生成一套評價較好的操作序列路徑。為了避免模形產生的路徑陷入無限迴圈，本篇以增強學習(Reinforcement learning)來懲罰會走到迴圈的序列路徑。

結果最後產生的序列路徑過度受到增強學習的影響，使得使用者的背景因素與歷程評價的影響變得微乎其微。這篇是為了記錄這一連串開發的過程、思維，以及未來的改進方向。這整套系統皆以JavaScript網頁開發，全部原始碼與資料都放在GitHub上，線上展示網址為： https://pulipulichen.github.io/dynamic-generative-path/ 。

區間估計不用再查表了！信賴區間計算器 / Confidence Intervals Calculator

區間估計是學習推論統計的第一道關卡，但是計算區間的門檻卻相當的高。計算區間估計時，要知道資料適用的分佈、各種分佈對應的誤差範圍的計算公式、並搭配z分佈或t分佈的查表等技巧，儘管如此，這些步驟其實也只是機械化的動作已，用人腦來算其實是挺沒效率的一件事情。

因此，我參考深入淺出統計學的公式與範例，以JavaScript製作了一份純網頁版本的信賴區間計算器。當任何研究使用想要從樣本來推估母體參數時，都可以用這個信賴區間計算器來計算母體參數可能位於的區間。

用RSS訂閱YouTube：YouTube頻道網址轉RSS連結 / Get an RSS Feed for a YouTube Channel

想要追蹤YouTuber的最新影片一定要打開YouTube嗎？其實YouTube也提供了RSS連結的方式供人訂閱影片喔。我參考「How to Get an RSS Feed for a YouTube Channel」這篇的做法，製作了一個「YouTube頻道網址轉RSS連結」，這樣就能在自己喜歡的RSS閱讀器上追蹤YouTuber的最新影片了。

訂製Facebook分享連結：Facebook 分享連結產生器 / How to Share to Facebook with Custom Parameters: Facebook Share Link Builder

作為一位網站管理者，總是希望使用者可以更容易地將網站訊息分享到Facebook上。除了使用AddThis或SumoMe之外，我們也可以直接使用網址來開啟分享到Facebook的功能，還能夠客製化引言、圖片、網址標題、網址介紹、網站標題等資訊，讓使用者分享訊息更為搶眼喔！

我參考「Share to Facebook with custom parameters」這篇的做法，製作了一個「Facebook 分享連結產生器」供大家使用，讓大家也能夠提升社群媒體的整合力吧！

純文字的合併列印：CSV文字範本產生器 / Merge CSV into Plain Text: CSV Merge Generator

Word的合併列印可以讓我們用試算表資料來產生大量格式相同、只有指定欄位不一樣的文件，那純文字的文件檔案能不能這樣做呢？當我們需要將大量的CSV資料搭配特定指令來重複操作的時候，這個CSV文字範本產生機就可以派上用場了。

線上中文斷詞工具：Jieba-JS / Online Chinese Analyzer: Jieba-JS

現在最流行的中文斷詞工具結巴(jieba)原本是以Python開發，必須要有Python的環境才能運作。不過它也有很多不同程式語言的版本，其中最好用的就是不需要安裝、只要瀏覽器就能夠執行的JavaScript版本：Jieba-JS。我把Jeiba-JS專案fork了一份：jieba-js，並加入了可以讓其他程式碼直接引用的方法。這樣在任何網頁上都可以輕易實作斷詞功能了。

擷取AJAX動態產生的網頁內容：PhantomJS指令列工具 / Crawling AJAX Webpages with PhantomJS Command Line Utility

現在很多網頁內容都是以動態的方式產生，例如Facebook會在開啟網頁之後再來讀取網頁內容，就連「布丁布丁吃什麼？」也是在網頁開啟之後再來慢慢載入旁邊的小工具。這種使用AJAX技巧來調整畫面的網頁，雖然便於一般使用者用瀏覽器查看，但是卻會造成伺服器端用程式抓取網頁的困難。

還好，現在我們可以用Node.js寫成的虛擬瀏覽器PhantomJS來幫我們載入完整的網頁內容。為此我寫了一些搭配PhantomJS使用的命令列腳本，讓我們可以在Linux 32位元環境下以指令端擷取指定網址，並配合jQuery選取器抽取出需要的網頁元素，最後直接回傳顯示在螢幕上。

如何整理BBS的文字資料？文字檔案斷行連結工具 / Broken Lines Text Formatter

這是我為了文本探勘所撰寫的一個小工具。有些文字會在固定的寬度斷行，就像是BBS的畫面一樣。這樣文字探勘時會對句子、斷詞造成誤判。因此我寫了一個文字檔案斷行連結工具來將文字斷行的地方重新連接成一行。整理後的文本就比較容易進行後續的分析了。

怎麼把表格的行列資料互換？線上表格資料轉置工具 / Table Data Transposer: Rotate Table from Rows to Columns

將試算表表格的直行與橫列的資料彼此交換，這種操作叫做「轉置」(Transpose)。大多試算表都有提供資料轉置的功能，包括Excel、LibreOffice Calc或Google試算表。但只是為了做個簡單的轉置，每次都要開啟試算表這種大工具不免讓人麻煩，而且轉置指令也常常藏在深處，我每次都會忘記。所以我乾脆做一個線上轉置資料的工具，讓大家用網頁就能夠轉置純文字的資料！

• http://codepen.io/pulipuli/full/eBbMNx

不要其他文字！英文與數字過濾器 / English and Number Filter

在寫程式或是處理資料的時候，有時會需要文字資料限定只能為英文與數字，中文、空格等其他字元都要替換成「_」之類的符號。這可以用正規表達式來完成這個目的。所以我就寫了一個線上英文與數字過濾器，只要貼上文字或上傳純文字檔案，就能產生一個只剩下英文與數字的文字檔喔。

純文字檔案太大了？純文字線上分割器 / Large Plain Text Splitor

有時候文本探勘會需要比較文章前、中、後各個不同位置的寫作風格是否有所差異，所以我寫了一個純文字線上的分割器，可以將一篇很長的純文字檔案切割成多個小的文字檔。這個做法跟分割壓縮檔不太一樣，分割之後的個別檔案都是獨立的文字檔喔。

網頁上跨年！臺北101大樓互動煙火 / Taipei101 Interactive Firework

之前收到長輩傳來的一個外國煙火互動動畫網頁。我覺得蠻有意思的，就用臺北101官方網站提供的夜景照片作為背景，做成了一個臺灣版本的互動煙火網頁，可繼續供長輩們任意分享。之後我又加上了可以替換背景網頁的功能，大家就可以做一個在自己喜歡的地方放煙火的網頁了。

輕鬆調整網頁元素！在Chrome的Console使用jQuery / How to include jQuery in Chrome's Console

Google Chrome (Google瀏覽器)的Console (主控台)不僅可以顯示來自JavaScript的錯誤訊息，其實我們也可以用它直接執行JavaScript程式碼。不過如果我們想要在Console使用JavaScript最流行的函式庫jQuery，那就必須執行一段JavaScript程式碼來引用jQuery囉。我參考「Include jQuery in the JavaScript Console」這篇的作法，跟大家分享如何在Google Chrome使用jQuery。

試算表出現安全性警告？如何移除LibreOffice Calc的文件巨集 / How to remove ODS file’s macro in LibreOffice Calc

你開啟LibreOffice的Ods格式試算表時，會不會看到「該文件包含文件巨集。巨集可能包含病毒。」這樣的訊息呢？巨集可以幫助你在試算表裡面自動進行加總、參照等計算，但大多時候我們要用來列印手寫的試算表都不需要巨集功能，而這時候巨集就可能變成隱含病毒的駭客工具。我整理Removing macros這篇的做法，用這篇教大家如何移除Ods試算表的巨集功能，讓其實不需要巨集的試算表關閉巨集吧。

這樣記日曆最快！Google日曆建立活動網址產生器 / Google Calendar New Event URL Generator

我可以用更快的速度在Google日曆建立新的活動嗎？請用這個Google日曆建立活動網址產生器吧。這是參考「Link to add to google calendar」這篇所做的一個簡單的小工具。大家可以用它產生一個連到Google日曆建立事件的網址，可以用在舉辦活動、研討會、邀請大家參加派對等網頁上喔。

Google日曆建立活動網址產生器 / Google Calendar New Event URL Generator

• 開新視窗

說明 / Instruction

這裡面要填寫的欄位有6個，各別對應到上圖Google日曆建立活動的欄位。在這裡面任何欄位都可以省略。

• TITLE：活動名稱。
• START DATE：開始時間。
• END DATE：結束時間，但沒有開始時間就不會有結束時間。
• LOCATION：活動地點。
• DETAILS：活動內容說明。
• INVITATION EMAIL ADDRESSES：新增邀請對象，請輸入電子郵件地址(email addresses)，每一行一個地址。

這樣就會產生一個連結，這個連結就會直接跳到Google日曆建立活動囉。

這次順便練習剪貼簿控制器clipboard.js的使用，還不錯用啦。

試做Electron桌面應用程式：webapp-wrapper / Try Electron: webapp-wrapper

繼前一篇在講怎麼使用Chrome命令列選項app來製作網頁應用程式之後，我還是覺得app模式有很多限制。後來索性摸摸看最近很流行的跨平臺桌面作業系統應用程式的開發框架Electron，然後作出一個用Electron開啟網頁的應用程式：webapp-wrapper。

Google分析的行為事件追蹤：使用jQuery加入事件 / Add Google Analytics Event Tracking by jQuery

繼前一篇介紹如何在Google分析中加入使用者ID之後，這篇要講的則是Google分析的基本用法之一：事件記錄(Event Tracking)。網路上已經有許多關於事件記錄的做法，不過大多都是寫在標籤的onclick屬性中。這就篇簡單介紹使用jQuery來加入事件記錄的做法吧。

單機版簡易網頁標註外掛：Rangy Highlighter Cookie / Standalone Web Annotation Pluing: Rangy Highlighter Cookie

很多人會希望在閱讀網頁的時候也能像是紙本一樣畫重點。雖然我以前做過閱讀知識合作標註學習系統KALS可以做到這功能，但它太過龐大、老舊，而且畫重點前還需要註冊，使用上諸多不便。我後來發現AnnotateIt之類的新形態網頁標註工具開始採用了Rangy選取函式庫，它使用現代瀏覽器支援的選擇功能，能夠從根本上改善KALS的問題。所以我就用Rangy做了一個簡易的單機版網頁標註外掛：Rangy Highlighter Cookie。網站架設者只要在HTML程式碼中嵌入JavaScript就能夠使用。標註的資料直接儲存在使用者個人的Cookie中，不需要登入或仰賴其他伺服器。雖然功能簡單，但這可以解決大多人在網頁上畫重點的需求，也是為了未來發展複雜功能所做的一個基石。