跟AdonisJs與Vue一起玩的那些事兒 / Diary about AdonisJs and Vue

繼上次的「AdonisJs聊天室」之後，AdonisJs框架 + Vue.js + Webpack組合看起來雖然很好，但實際使用還是有很多細節不盡人意。這邊繼續記錄一下開發系統的一些瑣碎事情。

Node.js找不到模組？在npm-link底下的處理方法 / How to Handle "Module not found" Error from Modules installed from npm-link?

Node.js的專案不可或缺的就是豐富的套件。為了避免各個專案重複安裝套件而佔用硬碟大量的空間，我會選擇將套件安裝在全域目錄(global)，然後用連結(symlink)的方式放到各自專案底下。這種安裝方式可以透過npm-link的「npm link <package-name>」或是@pulipuli.chen/npm-link-better套件的「nls <package-name>」來安裝。

然而，如果全域目錄的套件經過更新、移除、漏洞修復的話，很可能導致專案底下用npm-link連結的套件會發生「Module not found」錯誤。這時候要先用「npm -g i <package-name>」更新全域目錄的套件、移除專案內的套件連結、最後再重新連結套件。

如何不編譯直接在前端瀏覽器使用Vue.js插件？以vue-slim-tabs為例 / How to use Vue.js Plugins in Browser Without Module Bundler?

嗨~呦~~ 這裡是煩惱要不要用Vue.js插件的布丁。

說到網頁前端MVVM框架Vue.js，大部分時候都是以搭配後端編譯工具 (像是Webpack之類) 為前提來安裝、配置。不過實際上，很多時候Vue.js、單檔案組件(single file component)、以及它們的插件可以不需透過編譯，直接在網頁瀏覽器上執行。

這邊我以「vue-slim-tabs」為例子，它文件中的說明必須要靠編譯器才能運作。我分析vue-slim-tabs插件的原始碼，重新撰寫了使用該插件的index.html跟引用的單檔案組件vue-slim-tabs.vue。你可以點此看到實際運作的網頁。以下我來說明改寫的過程，希望對Vue.js的使用者有所幫助。

Node.js前後端CORS網頁應用試作：AdonisJs聊天室 / Practice of Build a CORS Full Stack Web Application in Node.js: AdonisJs Chat

啊囉哈~~這裡是寫程式寫到整個人都變得優雅起來的布丁。

作為網站工程師，用JavaScript開發前端就像是日常便飯一樣。但前端都用JavaScript開發了，那後端為何不用Node.js一起開發呢？這個想法是從兩年前開始，這期間跌跌撞撞不斷摸索，直到最近才找到比較理想的方案，那就是後端使用AdonisJS作為伺服器與保存資料、前端使用Vue.js控制介面與邏輯，最後搭配Webpack編譯。

為了測試我需要的功能都能正常運作，我試作了一個跨網域資源共用(Cross-Origin Resource Sharining, CORS)情境下使用的網站外掛：AdonisJS聊天室。我寫這篇，是為了將到目前為止開發的心得告一個段落。以下將說明AdonisJS聊天室的功能、系統架構與技術，最後講講開發時遭遇的問題與想法。希望能夠為其他開發者提供一些解決問題的線索。

如何在NetBeans中設定Git的遞交者？ / How to change author of Git commits in NetBeans

ALOHA~~這裡是灌新電腦後要重設設定就會非常苦惱的布丁。

NetBeans具備了版本控制工具Git的功能，不過預設Git在遞交的時候，它會用你電腦的使用者帳號名稱跟電腦名稱作為作者的資訊。這時候其實我們可以從「Open Global Configuration」來手動設定Git遞交的作者資訊喔。讓我們來看看怎麼操作吧。

如何合併多個純文字檔案並加上換行：使用Notepad++ / How to merge plain files in a single file with broken lines: Using Notepad++

ALOHA~~我是就算為了一個小小的合併檔案工作也不想寫程式的布丁。

我們很多時候需要將大量的純文字檔案合併成一個檔案，並且希望在各個檔案之間加上換行。單純將純文字檔案合併成一個檔案的做法很多，但是要能夠正確識別中文編碼，還要在合併的檔案之間加上斷行，那就不太容易了。

令人意外的是，Windows上好用的純文字編輯器Notepad++，它的Combine外掛居然有合併多個純文字檔案的功能。讓我們來看看怎麽操作吧。

Weka簡介與實作：資料探勘的分群、異常偵測、關聯規則探勘、分類 / Practice Data Mining with Weka: Clustering, Outlier Detection, Associations and Classification

啊囉哈~~這裡是整理投影片整理得超久的布丁。

今天要來談的Weka是知名的資料探勘自由軟體，它含括了資料探勘中的三大議題：分群(clustering)、關聯規則探勘(association rule mining)以及分類(classification)。想要學習資料探勘的基本概念，並快速開始進入資料探勘實作的話，Weka是個不需要寫程式也可以輕鬆上手的好方法。

這一篇是我在2019年研習班中講授的課程投影片。這篇的做法改進了我之前製作的「巨量資料探勘與統計應用」課程內容，不僅更加掌握Weka的功能與參數，也直接採用ODS開放文件格式試算表作為練習資料的格式。如果你對資料探勘有興趣的話，不妨也試著一起玩玩看吧。

數位學習平臺介紹：KALS和PBL / Introducing to Online Learning Environments: KALS and PBL

大家晚安，這裡是平安渡過颱風、但是學業上不太平安的布丁。

在2018年的一個工作坊中，我跟實驗室的同事們用英文做了閱讀知識合作標註學習系統KALS (Knowledge-based Annotation Learning System)以及問題導向學習環境PBL (Problem-based Learning)的介紹投影片。這篇文章是將這兩個投影片記錄一下，供有需要的人取用。

如何建構響應式的HTML表格：表格縮圖響應式設計方案 / How to Create a Responsive Table using Table Thumbnail

啊囉哈~~這裡是剛剛才發現在米塔颱風中曬衣服是不行的布丁。

為了因應大小不一的螢幕尺寸，現代的網頁都強調必須具備響應式設計(responsive web design)。響應式設計可以讓網頁在大螢幕上面看起來很自然，在小螢幕裡面也不會看起來太過彆扭。網頁上各種不同的元素都有其響應式設計的做法。其中最具爭議性的，就是表格元素<table>的響應式處理。

有別於主流的捲軸方案或是重新排版的CSS方案，這邊我要提出一種特別適合部落格文章的表格縮圖響應式設計方案。此做法是在小螢幕時以表格縮圖取代原本的表格，而使用者點選表格縮圖時，就會開啟一個新網頁，裡面呈現完整的表格內容。下面就讓我們來看看表格縮圖響應式設計方案怎麽運作的吧。

初探網頁前端框架Svelte / Preliminary Study of Svelte, a Front-end Framework

最近嘗試摸索了號稱簡短程式碼就能運作的網頁前端框架Svelte，一開始我的確為它的簡潔所吸引，嘗試架了一個Svelte專案來跑跑看。不過實際摸索後，若從開發大型複雜專案的角度來看，Svelte無法將腳本與樣式拆開成獨立檔案、也難以抽出額外的圖片檔案等不足，使得它仍然比不上Vue.js好用。

這篇先給大家準備一個我嘗試Svelte的試作專案，再來談談我對Svelte的使用感想。如果對Svelte有興趣的人，說不定也能基於我的試作專案再來改造，改善我對Svelte的批評呢。

打造獨特的EXE檔案：在AutoIt編譯時加上圖示 / Compile AutoIt into an EXE file with specific Icon

哈嚕~~我是非常喜歡為各個網站加入特製腳本跟樣式表、讓網站用起來更順手的布丁。今天要來介紹的是如何為AutoIt編譯的exe檔案指定特定圖示的做法。做法很簡單，只要在開頭加上「#pragma compile(Icon, 'icon.ico')」語法即可。讓我們以archive-util-7z.au3為例子，看看怎麽在AutoIt程式裡面加上指定圖示的語法吧。

NetBeans整合GitHub Issues / Integrate GitHub Issues into NetBeans Tasks

大家晚安，我是電腦重灌後很多設定一天沒還原到位，就一天覺得渾身不對勁的布丁。今天要跟大家介紹的是NetBeans跟GitHub Issues的整合：GitHub Issues外掛。NetBeans可以透過安裝GitHub Issues外掛，再並加上一些設定，就能讓GitHub Issues問題回報系統整合到NetBeans之中。如果你使用NetBeans做開發、也用GitHub做版本控制的話，非常推薦你試試看這個功能。讓我們來看看怎麽做吧。

工具開發閒聊：從AutoIT到Electron / DIY Tools: From AutoIT to Electron

最近在重灌電腦之後興起了使用AutoIT和Electron各種小工具的念頭。這篇並不是特別介紹或教學關於這些開發技術的方法，只是想要記錄一下我到底用AutoIT和Electron開發的過程，以及這些過程的想法。

這篇混雜了大量我的自言自語跟技術名詞，請不要勉強看懂，或著說，其實也沒什麼必要看吧？

用Weka找出最特別的文本：局部異數因素之異常偵測 / Mining the Special Text with Weka: Local Outlier Factors (LOF) for Anomaly Detection

我們要如何在大量文本當中，快速找出談論內容與眾不同、別有見地的文本呢？字數長短可能會被灌水，從字詞內容著手，也許是個合理的開始。本篇將應用資料探勘中異常偵測(anomaly detection)常見的演算法：局部異數因素(Local Outlier Factor, LOF)，在Weka中找出用詞最為與眾不同的文本。

研究生看過來！PDF論文閱讀神器 / Wrapped Text Formatter: Read Large Paragraph Text from PDF in Comfortable Way

每次看到PDF中有著一大段的文字時，你會不會感到腦袋跟這些文字一樣糊成一團呢？在讀英文論文的PDF檔案時，總是想把看不懂的段落複製、貼上到Google翻譯，但是你有遇過因為一句話被斷成兩到三行、APA引用的括號卡在中間，讓Google翻譯的結果看起來非常奇怪的窘境嗎？

放心，這些問題通通交給PDF論文閱讀神器來解決。它能將PDF複製的文字重整成一句話一個段落(中英文皆可)、自動翻譯成指定中文，快用它來加快你的論文閱讀速度吧！

如何將試算表裡面的換行和TAB等特殊字元換成空格？ / How to Replace Special Characters (Line Breaks and Horizontal Tabs) from Cells by Spaces in Spreadsheets?

我們時常使用LibreOffice Calc、Google試算表、以及Microsoft Excel等試算表工具來整理資料，但當資料裡面有些「換行」(new lines)、「Tab」(也就是製表鍵(tabulator key)或表格鍵(tabular key)的縮寫)、前後空白、中文空白時，常常會在轉換成CSV、輸入到Weka或其他工具時，造成解讀資料時發生錯誤。

要移除「換行」和「Tab」等特殊字元的話，難道還要寫Python程式嗎？不用，我們只要在試算表工具裡面加入一個函數，就可以輕鬆將「換行」和「Tab」等特殊字元轉換成空白字元囉。讓我們來看看怎麼做吧。

發掘文件中的主題：Weka分群應用於文本探勘 / Discover the Topic of Text Collection: Text Mining based on Weks's Clustering

在以文字撰寫的大量文件中發掘這些文件所共同描述的主題，這類型的技術稱之爲「主題塑模」(Topic Modeling)，而資料探勘中的分群就是實作主題塑模的其中一種做法。本篇就來說明如何用開放原始碼資料探勘工具Weka中的層疊式K平均法分群演算法來找出文件中的主題。

改善別人做好的輪子！從原始套件建立自己的NPM私領域套件 / How to create a NPM Scoped Package from an Original Pacakge?

在Node.js上開發專案的好處就是可以透過npm找到大量好用的套件。但有時候，你可能會發現某些套件的內容不合你的需求，或是程式運作上有錯誤。也許你可以到問題討論版(issues)提出修改請求、苦苦等待作者的回應，不過其實你也可以在授權條款允許的情況下，自行取得別人的程式碼，並以私領域套件(scoped pacakge)的形式發佈到npm註冊處。來看看這要怎麼做吧。

空間不足了！如何清理Crouton (Ubuntu)的儲存空間？ / How to Free Up Space on Crouton (Ubuntu)

大家好，我是持續跟Chromebook奮鬥的布丁。我這臺在2018年購買的Chromebook只有32GB的儲存空間，這個限制使得在Chromebook上裝了些APP、甚至是使用crouton的時候，很容易就用盡Chromebook的儲存空間。Chromebook裡面管理Chrome OS的檔案比較容易，但是在crouton這個Ubuntu作業系統環境裡，要找出大型檔案和已經安裝的套件，就需要仰賴一些工具和指令列命令。接下來就讓我們來看看要怎麼在crouton裡面清出更多空間吧。

Chromebook終於可以用Android輸入法了嗎？ / Could we use Android's Input Method APP in Chromebook now?

大家好，我是時時刻刻盼望Chromebook趕快長大的布丁。Chromebook之前一直主打可以安裝Android APP，但是Android最好用的各種輸入法，是直到Chromebook中的Android升級到第9版Pie之後，才能在一定條件下使用。我的ASUS C213最近獲得更新之後終於能開啟這個功能了，就讓我們來看看這是怎麼一回事吧。

NetBeans增加自訂標籤與屬性：能用在Vue.js上嗎？ / Customize HTML Element Tags and Attributes for Vue.js in NetBeans

大家好，我是下著大雨的悶熱週六躲到實驗室工作的布丁。NetBeans 8.2在檢查HTML格式的時候並沒有支援Vue.js的特殊標籤與屬性，不過還好我們可以手動為NetBeans的專案加入自訂設定，避免NetBeans顯示錯誤訊息。但是NetBeans的自訂標籤似乎不能接受「:」或「@」開頭的縮寫屬性(shorthands)，但「v-on:」或「v-bind:」就可以。使用的時候可能要注意這個差異。

Webpack引用方式對檔案大小的影響 / The Size of Webpack package files are different on Import from Files or Modules

在Webpack中引用其他程式碼的模組解析，可以是來自於獨立的JavaScript檔案，也可以是來自於Node.js中已安裝的模組，可以使用require，也可以使用import。我很好奇到底這兩種引用方式對於最後產生的檔案大小有何影響，在這篇中我以引用獨立檔案或是已安裝的模組、require或是import這四種組合來引用 jQuery 跟 JSZip 、 FileSaver 這三個模組，發現引用Node.js已安裝模組的方式產生的檔案較大，引用 獨立檔案所產生的檔案較小。而import產生的檔案比較大，require比較小。所以專案要選擇用require來引用獨立檔案會比較好嗎？我也不這樣認為。

用Chromebook寫程式是什麼感覺？ / Coding with Chromebook

哈囉，大家好。繼我之前寫的「Chromebook使用一個月的雜談」之後，這篇要來聊聊最近兩個月中，我使用Chromebook來開發網頁與Node.js應用程式的一些想法。結論說在前面：使用體驗並不流暢——畢竟ASUS Chromebook Flip C213NA只是一臺便宜的低配Chromebook，但在基本操作和續航力的表現仍然能夠滿足開發程式的大部分需求就是。

閒聊Blogger範本程式碼的管理 / How do I maintain Blogger's Template Code

有人發現到最近「布丁布丁吃什麼？」的網站有些微的改變嗎？應該沒什麼人會注意到吧，因爲主要的改變都是在後端：Blogger範本程式碼的管理。這篇就些微的改變嗎？應該沒什麼人會注意到吧，因爲主要的改變都是在後端：Blogger範本程式碼的管理。這篇就來聊聊我管理「布丁布丁吃什麼？」範本程式碼的一些歷程吧。必須先說明的是，這只是我個人的做法，應該不適合大部分的使用者喔。

製作向量化的手寫文字：Image Vectorizer + Inkscape / Turn a Hand Lettered Sketch into SVG Vector Format: Image Vectorizer + Inkscape

有時候我們想要在海報上加些手寫文字，但是手寫文字掃描後只是個點陣圖，放大到海報上就會出現鋸齒痕跡，不慎美觀。如果能將手寫文字轉換成向量圖，那向量圖不管放到多大，看起來都還是很清晰。這篇我要介紹如何將手寫文字的點陣圖轉換成SVG格式的向量圖，使用的工具都是免費的自由軟體或線上服務喔。

OneDrive雲端硬碟檔案直接下載連結產生器 / OneDrive File Download Link Generator

除了Google Drive雲端硬碟可以產生直接下載的連結之外，另一個知名的雲端硬碟OneDrive也能夠產生直接下載連結喔。我參考OneDrive 2017 Direct File Download URL Maker這篇的作法，把連結轉換的功能調整成比較順手的操作，並且加入TinyURL短網址功能。讓我們來看看怎麽做吧。

Chromebook使用一個月的雜談 / Chromebook Review: After 1 Month of Usage

在「Chromebook多重作業系統簡介」這篇之後，我又陸陸續續用了ASUS Chromebook Flip C213NA一個月的時間。現在我來補充一下現在對Chromebook的各種發現。

adb、fastboot在那裡？下載即用的Android SDK Platform Tools / Where is adb? Android SDK Platform Tools Location and Usage

Android的進階操作都會使用「adb」跟「fastboot」。例如手機進入Fastboot Mode了無法操作，你需要用「fastboot reboot」來強迫它重新開機。但是adb的位置到底在那裡呢？其實我們可以直接從Android Studio網頁上的SDK Platform Tools下載只含有adb跟fastbook的檔案，解壓縮後就能夠馬上使用，這樣子就不用再煩惱去哪裡找尋adb跟fastboot指令了。

簡單易用的中英文斷詞和詞性標註：Python-Jieba / Word Segmentation and Part of Speech Anlysis: Python-Jieba

要對非結構化的文字資料進行分析，第一件事情是對文字資料抽取結構化的量化數值特徵。除了用「文字探勘分析器」簡單分析字數、句數之外，最常見的分析方式就是斷詞和詞性分析，例如線上中文斷詞工具：Jieba-JS。但Jieba-JS並不能發揮Jieba斷詞器的全部功能，所以我以Python撰寫了簡單易用的斷詞和詞性分析工具Python-Jieba，讓大家不用撰寫程式碼，只要簡單的配置，就能進行中文斷詞和詞性分析，還能夠同時分析中英混雜文本中英文的詞性。

Python-Jieba不只可搭配「非結構化資料分析：文本分類」或「Weka的中文自動評分」等機器學習來使用，更可以用在質性研究的內容分析、文本分析或敘說分析上，先用Python-Jieba找出特定詞性的文本內容來分析。

線上檔案語音轉文字字幕：Web Speech to Text / Speech recognition with Google Chrome: Web Speech to Text

語音轉文字的技術已經存在多年，現在這個技術已經普遍到大家手上的智慧型手機都內建了語音辨識輸入系統。除了從麥克風辨識語音之外，我們也很常需要從錄下來的影片、聲音檔中辨識文字。意外的是，這樣的技術其實不需要仰賴什麼雲端科技技術，也不用付出高昂的成本，只需要用你現在瀏覽網頁的Google Chrome就可以開始語音轉文字了。

我參考了陳鍾誠所撰寫的「Google 的語音辨識 API 之使用」，利用瀏覽器內建的Web Speech API開發成網頁應用程式「Web Speech to Text」，搭配Virtual Audio Cable讓電腦的聲音輸出的聲音轉到麥克風輸入，就能讓播放影片或聲音檔案的同時語音辨識為文字，最後轉為字幕檔案格式srt輸出。讓我們來看看怎麼做吧。

拓展Android分享功能：分享建立行事曆事件、分享到導航、分享建立桌面捷徑 / Share in Android: Share to Event, to Navigation, to pin a Shortcut

要說我覺得Android最好用的特色，那就是可以自由在各個APP之間傳遞資訊的「分享功能」(share)。你可以分享照片給Facebook APP去發佈、你可以分享網頁到Evernote保存，但奇怪的是，Android上最常見的行事曆活動(event)、地圖導航、以及建立桌面捷徑，卻都沒有分享功能可以用。所以這篇我就要來介紹我自己用PhoneGap建立的三個分享功能APP：分享建立行事曆活動 ShareToEvent、分享開始導航 ShareToNavigation、分享建立桌面捷徑 ShareToShortcut。以下就是介紹這三個APP的安裝與使用方法，最後跟大家聊聊我對與分享和捷徑的看法。

網站負載測試器：Electron Web Speed Testing / Test Website Performance: Electron Web Speed Testing

我們所開發的網站應用大多時候都是預設給多人同時上線使用，但是你要怎麼確認這個網站能夠容納多少人同時上線呢？網站負載壓力測試(web performance testing, web speed testing, load testing)就是模擬許多使用者同時上線存取網站內容，並記錄網站的反應時間以及超出負荷而當機的上限。

網站負載壓力測試工具中較為知名的跨平台工具是Apache JMeter，但它的設定較為複雜，操作門檻高。所以我用Electron另外開發了一個簡單版的網站負載測試器Electron Web Speed Test ，希望讓大家更容易測試自己網站的負載容量。

混合應用程式框架試做：薑黃喵討摸摸 / Hyper APP Framework: Ginger Cat Touch

之前我介紹用HTML撰寫的混合應用程式框架點閱數意外的很高(本社比)，藉著2018年底停車場的薑黃喵被好心人收養之際，我用混合應用程式框架開發了「薑黃喵討摸摸」的APP，可以在網頁開啟、Windows直接執行、也已經在Google Play上架，可在Android上安裝。這篇就記錄一下這個「薑黃喵討摸摸」APP吧。

按照筆畫排序中文參考文獻：Zotero + Word / How to Create a Stroke Order Chinese Bibliography with Zotero and Word

之前我雖然寫過「Zotero如何產生按照筆畫排序的中文參考書目」，但其實那篇的方法最後還是不可行。目前能夠解決中文按照筆畫排序的最佳方法，還是得要仰賴Microsoft Office Word或LibreOffice Writer內建的排序功能。這篇我就用圖文介紹來說明如何讓Zotero的中文參考文獻搭配Word來按照筆畫排序吧。

自訂Zotero的引用格式：文獻引用格式編輯器 / Zotero Citation Style Editor Tutorial

很多人使用Zotero的時候，都希望根據自己投稿或系所要求的格式來調整引用樣式。我雖然是為了自己論文方便而開發了布丁版中英文APAP引用格式，但其實Zotero的文獻引用格式語言(Citation Style Language, CSL)還蠻複雜的，至少你得需要知道XML語言的標籤邏輯。儘管如此，若是只要改改一些小地方，或是摸索CSL語法的內容，Zotero內建的文獻格式編輯器可以幫你踏入這個門檻，讓你自訂你需要的引用格式。

Android適合生產力應用嗎？文字和圖片的操作分析 / Productivity in Android? Difference between Android and Windows in Text and Image Copy/Paste

在上次「閒聊智慧型手機上玩手遊用的鍵盤滑鼠遊戲控制器」的最後，我提到Android似乎逐漸朝向「行動辦公室」的方向發展。但就選取文字和圖片的這種基本操作來看，其實Android離真正的生產力應用似乎還有一段距離。這篇就讓我來說明一下為什麼會是如此吧。

GitHub來信警告：您的相依套件有安全性漏洞 / Alert from GitHub: One of your dependencies may have a security vulnerability

之前收到GitHub的警告來信，是說我的儲存庫中使用的相依套件「event-stream > 3.3.4」有安全性漏洞。如果不處理這個問題，GitHub的警告訊息會一直出現在儲存庫的上方。解決問題的方法也不難，就是修改相依套件的版本設定，避開有問題的版本即可。

如何調整NetBeans操作界面的文字大小？ / How to setup NetBeans’s UI Font Size

最近我在xfce桌面環境下安裝NetBeans 8.2，赫然發現到NetBeans操作界面使用的文字預設大小非常地小，難以閱讀。然而操作界面文字的大小設定，似乎並不能在NetBeans裡面調整。稍作研究之後，我發現NetBeans是以Qt框架開發的應用程式，所以可以從Qt設定(qtconfig)來調整它的字體大小。或是在啟動NetBeans時加上「--fontsize 14」(14表示字體大小)，才能讓NetBeans的操作界面用較大的文字來顯示。以下我們就來看看怎麼做吧。