2020年臺灣工程師喜愛的程式語言與資料庫竟然跟全球流行不一樣 / The Popular Script Language and Database Technology in Taiwan in 2020

Pui Pui大家午安啊，我是在寒冷又溼漉漉的地方裡，期望下雨降在集水區的布丁。在這個寒冷的天氣裡，今天就跟大家聊聊臺灣工程師最受歡迎的程式語言跟資料庫技術吧！

全世界工程師最後的救星Stack Overflow在2020年二月發佈了2020年開發者調查結果。統計5萬多位工程師最喜歡的程式語言中，JavaScript以67.7%名列第一。年初時Easy Website的站長網站哥以這份開發者調查資料為基礎，將臺灣開發者所流行的程式語言與資料庫繪製成統計圖表，結果竟然跟世界潮流不太一樣。至於差異在哪裡，就讓我們看下去吧。

如何從句子中的單字搜尋詞典中符合的詞彙？ / How to search for the matching terms in the dictionary from a word in the sentence?

如果我想要以一個字搜尋字典裡面有的詞彙，而這個詞彙又需要符合該字在句子構成的詞彙時，要怎麼做呢？舉例來說，我想在「清晨時去游泳池」這個句子裡，用「泳」來找出「游泳池」、「泳池」、「游泳」，但要排除掉「晨泳」、「泳褲」等詞彙。我整理了一套搜尋演算法來實作這個目標，這套搜尋演算法包括了過濾出現字、過濾相連順序、過濾相符詞彙、排序詞彙長度、排序錨點字位置這五個步驟。以下我將以JavaScript程式碼來講解各步驟的做法，最後附上JavaScript跟PHP兩種版本的實作程式碼。

如何讓Google Chrome開啟時就佔滿整個螢幕並隱藏控制介面？ / How to make Google Chrome open to fill the entire screen and hide the control interface?

最近在展示網頁系統的時候，為了不讓使用者被瀏覽器的其他介面干擾，我在啟動Google Chrome的指令上加上指令列參數(Command Line Switches)，使得瀏覽器用新的帳號、隱藏控制介面的APP模式開啟，並讓整個瀏覽器的尺寸設為整個螢幕的大小。這篇就來講講這個指令內包含了什麼參數，以及為什麼我要這樣設定。

​如何在前端瀏覽器用JavaScript處理過長的字串變數？活用虛擬DOM作為快取 / How to use JavaScript to deal with long string variables in the front-end browser? Use Virtual DOM as cache

我會在網頁上使用SheetJS js-xlsx讀取ODS試算表檔案的內容，但最近發現檔案如果超過2.5MB，在載入檔案輸入到字串的時候，就會造成瀏覽器崩潰當機。

研究之後，我想到可以將字串建立成虛擬DOM上的節點，用來緩存過長的內容。在需要全部字串內容時，再一一從節點取得緩存即可。

以下我用兩個實際上的網頁作為例子，一個用來說明沒有緩存的過長字串導致瀏覽器當掉的情況，另一個是用虛擬DOM緩存，最後可以正常執行的情況。

跟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註冊處。來看看這要怎麼做吧。