:::

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

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

17-AdonisJs_Vue_Diary_about_AdonisJs.png

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

(more...)

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

布丁布丁吃布丁

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

16-Node_js_npm_link_How_to_Handle_Module.png

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>」更新全域目錄的套件、移除專案內的套件連結、最後再重新連結套件。

(more...)

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

布丁布丁吃布丁

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

15-Vue_js_vue_slim_tabs_How_to_use.png

嗨~呦~~ 這裡是煩惱要不要用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的使用者有所幫助。

(more...)

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

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

14-Node_js_CORS_AdonisJs_Practice_of.png

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

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

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

(more...)

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

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

13-NetBeans_Git_How_to_change_author.png

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

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

(more...)

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

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

12-Notepad_How_to_merge_plain_files.png

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

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

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

(more...)

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

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

11-Weka_Practice_Data_Mining_with_Weka.png

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

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

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

(more...)

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

布丁布丁吃布丁

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

10-KALS_PBL_IDSR_Introducing_to_KALS.png

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

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

(more...)

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

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

7-HTML_How_to_Create_a_Responsive.png

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

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

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

(more...)

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

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

6-Svelte_Preliminary_Study_of_Svelte.png

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

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

(more...)