如何不編譯直接在前端瀏覽器使用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做版本控制的話，非常推薦你試試看這個功能。讓我們來看看怎麽做吧。