css checkbox hack

我在製作一個公車到站時刻的 html 表格， 其中有兩個欄位顯示一些 x/y 座標數字。 多數訪客對這些數字可能沒興趣， 說不定看了還會頭昏嫌煩。 所以我想用一個 checkbox 讓訪客可以自行決定要顯示還是隱藏那兩個欄位。 可是我又希望我的網頁不需要啟用 javascript 也可以看。

每一句都可以讀得懂的最精簡 webpack 設定檔 + js toolchain 新手的行前說明

Javascript 語言本身已經 令程式設計師愛恨交織； 它的工具鏈 (toolchain) 更令人眼花撩亂。 去年 我很匆促地學了一點 webpack， 今年好像又不夠用了。 不同時期不同作者的設定檔都差好多， 其中很多也不適用於新版。 越爬文越迷惘， 覺得自己怎麼那麼弱， 都快要哭出來了... 偶然搜尋到這篇： A Crash Course in Modern JavaScript Tooling， 聽到作者安慰： "It's not your fault." 突然覺得獲得救贖， 原來很多 python 族都跟我有相同的感覺！ [2023/2 很多時候其實根本可以略過工具鏈啊！] 這次沒有時間壓力， 花了快一個月終於建立了一個最精簡的骨架程式 jstc-novice， package.json 跟 webpack.config.js 裡面的每一句話都看得懂， 可以作為 (已略熟 javascript， 包含會開啟 console 除錯的) webpack 初學者的出發點。 JS 的工具鏈有很多雷， 建議看程式碼之前先很快讀一下本文， 就像是旅遊之前的行前說明一樣， 對於避免踩雷很重要。

scatplot: 一張試算表， 散點圖畫到飽

大選過後， 一直想畫 「X黨 vs Y黨在各縣市得票比例對照圖」。 過年時節在家躲疫情， 終於有時間完成了一個小專案放到 github 上： scatplot 。 也請參考舊文 「三種方式產生 scatter plot / bubble chart」。 不只是程式宅， 我相信政黨智囊團、 財報型股民、 社會科學家、 自然科學家.. 任何需要以視覺化方式理解數值資料的朋友們也會喜歡這幾個 demo 網頁： 希臘式優格比較表、 揪出手機上的腫脹軟體、 LLM 比較表 br26、 LLM 比較表 aa25、 全球各國電價比較表、 陳時中團隊的 covid 19 防疫成績、 資料視覺化破解源自黃珊珊的假消息、 股票財報指標圖、 新聞頻道轉台運動、 2018 兩政黨各縣市得票比例對照圖、 太陽系天然衛星軌道常數、 [2022/12 後續有再補充與更新較新的圖片與文章連結]。

commento 幫任何靜態網頁加上留言/投票功能

想幫你的網站加上留言功能嗎？ 熱門的 disqus 有一些隱私疑慮； 於是我搜尋到 commento。 比較簡單的方法是 到官網註冊付費使用。 點 「Try the Demo」、 在文字輸入框打幾個字、 (不必登入) 勾選 「comment anonymously」、 點 「add comment」， 你的留言就出現了。 管理員也可以設定禁止 (或審查過才准發表) 匿名留言。 至於投票， 當然一定要登入， 算是簡單版的防止灌票。 畢竟我是因為官網強調尊重隱私而被吸引過來的， 當然就選擇自己架囉。 以下安裝設定筆記分別在 Debian 9 及 lubuntu 18.04 執行。 自己架的版本只成功了 http 而沒有 https。

DataTables 的固定表頭、 排名、 置中

先前寫的小程式 jesp 可以拿來把好幾個 csv 檔 join 在一起， 並且方便按照任何欄位排序。 其中表格資料好用的互動排序功能， 靠的就是 jQuery 的 DataTables 外掛。 兩年多前曾在 「jQuery 無痛讀檔」 裡初次使用； 現在重學一次， 並且選用幾個好用的效果。

批次編輯 html/svg/gpx/xml檔： xmlstarlet 與 xpath 初探

有時候會想要對網頁檔或 xml 檔 (例如 svg 或 gpx) 做批次編輯， 比方說想把一堆 <li> 元素變成表格的 <tr> 元素 (當然也要同時把每一條的內文拆好幾個 <td> 欄位等等)。 regexp 處理文字檔很方便； 但是遇到 xml/html 就弱掉了。 正確的做法是採用 xpath 跟 xslt。 如果想做的是比較簡單的處理， 那麼可以用 xmlstarlet 這個命令列工具。

[2024/5/20] 如果只是查詢某些欄位， 改推 xq 簡單很多!

網頁搜括小工具： 用 extract.php 擷取網頁當中的一小塊

用 php 的 querypath 或 javascript 的 jquery 可以擷取網頁的一小部分， 比方說部落格文章的正文部分。 但是每次都要寫一支用丟即棄的小程式也蠻沒效率的。 所以我寫了一支可以重複使用的小程式 extract.php， 以後只需要在命令列上用一個 css selector 語法就可以擷取網頁的一小塊了。 先前還沒有很好的 3G/4G 上網方案時， 我就是用這個工具下載一堆網頁以便離線瀏覽。 此外， 英文報讀軟體 coolreader 遇到太複雜的 html 檔也會掛掉， 所以就算數據上網不是問題， 這也很有幫助。 再比方說我 備份自己的部落格 (或別人的部落格也可以) 也是用這支小程式。

抄程式學 d3.js

需要將大量的數據變成會說故事的圖案嗎? 可以用 javascript 函式庫 d3.js 來實現。 想學嗎? 那就抄我的程式吧。 「以 D3.js 製作的臺灣人口互動統計圖及統計地圖」 是我自己學習 d3.js 的練習作業。 假設你己經思考過 「令開發者愛恨交織的 javascript」 裡面所提的問題， 覺得還是可以學 js。 那麼就從零開始， 逐步增加功能， 一小段一小段抄 我的程式。 每次請只抄看得懂的部分， 並且順手改一下 css 等等外觀版面設計。 配合以下的說明， 應該很快就可以進步到比完全新手還要再高兩級的程度 (大約是中二的概念)。 文中有一些官方文件的連結， 搭配著能動的範例程式來讀比較易懂。 而且先前我卡關的地方， 文中都已列出 (大量搜尋爬文後篩選出來的) 參考文件了， 你可以省下很多摸索的時間。 當然， 這篇文章的步調也會比較快、 省略很多 (你自己必須填入的) 細節。 所以我們先從預備閱讀開始。

cordova 讓網頁程式設計師半小時變身成手機 app 開發者； 順便學 docker

(對 android app 開發沒興趣的讀者還是可以把這篇當做 docker 的 「實用情境教學文」。 「試車」那一節可以只做前面一小段有感覺就好。)

如果你已熟悉 javascript/css/html， 那麼只需要學會操作 Apache cordova 就可以從一份原始碼產生多個標的 (target) 套件， 把你的 web 程式轉成 android/iOS/windows phone/... 等等 八九種手機平臺 的 apps， 一魚多吃! 雖然我目前只對 android 標的有興趣， 但以後如果 firefox OS 紅起來， 我可不想再把所有的 apps 重寫一次啊! 而且程式某些部分可以在網頁上免編譯直接測試， 這對我來說比 「從頭到尾被綁在 Android Studio」 要方便多了。 所以雖然 java 跟 javascript 我都不熟也都不是我的最愛， 但最後還是決定學 & 教 cordova。 這篇教你用偷吃步在 linux 上架快速備妥 cordova 的開發及 android 標的測試環境。

(當然， 如果你偏好 python、 想寫的程式很簡單， 那麼可以考慮 最低門檻的手機開發途徑： kivy。)

輕巧/安全/隱私的圖文瀏覽器 dillo

如果你 (1) 偏好輕薄短小的軟體 (2) 重視隱私 (3) 上網大半的時間只需要看靜態的圖文， 那麼 dillo 瀏覽器 可能很適合你。 它的 .deb 套件檔不到 500K、 啟動迅速、 不支援 javascript 及影片、 嚴格控管 cookies、 部分支援 css (所以排版經常會亂掉) 顯示跟輸入中文都正常。 (2015/4/7更正)

HTML 網頁內嵌 MathML 數學式及 SVG 向量圖

廿年前讀博士班時, 我那份有點像是數學系產品的論文是用 LaTeX 寫的。 LaTeX 的排版真的超讚; 不過它也很龐大。 相對地, 改用 HTML 製作講義, 就輕簡很多, 而且不論走到哪裡, 幾乎每一部電腦都可以讀寫。 至於數學式, 幾年前曾經試著把 MathML 內嵌到 HTML 裡面, 沒成功。 今年又教到微積分, 於是再試一下, 竟然就發現 firefox 支援 HTML 網頁內嵌 MathML 數學式及 SVG 向量圖! 真是太讚了! 我用的是 firefox 17; 讀者留言表示 opera 和 chromium 也可以; chrome 23 只能顯示 SVG 不能顯示 MathML; konqueror 4.9.2 則是兩者都無法顯示。

善用 Piwigo 的標籤功能組成 「虛擬相簿」

整理相片, 不需要花太多心思分相簿。 善用標籤, 標籤本身就可以定義出一本又一本的 「虛擬相簿」, 而且同一張相片可以出現在不只一本相簿當中。 這也是為什麼 檔名及目錄名稱不需要用中文。

混搭訂閱多個 rss

*** !!程式改寫; 本篇作廢!! ***
請見新版: 「multi-feeds : 手工自製 rss 過濾混搭器」

[2010/10/14 更新, 增加一個例子 "公民新聞", 並且將所有下載檔案合併在一起, 打包成一個壓縮檔。]

除了自己部落格的留言之外, 我一直沒有很認真地訂閱 rss。 新聞網站更新太快, 與其訂閱, 不如直接連到新聞網站首頁去看, 反正閒暇閱讀的時間通常都趕不上新聞推出的速度。 另一方面, 喜歡的部落格有好幾個, 每個部落格貼文頻率可能較低, 如果每個都訂閱, 一則太囉嗦, 二則多半時候看到的都是沒有動靜。 對於後者, 如果能把好幾個 (更新速率不太快的) rss 混搭起來聯合訂閱成一串, 就太完美了。 用 rss mix 搜尋, 找到 10 Tools to Combine, Mix, Blend Multiple RSS Feeds。 網路上有不少現成的混搭服務: 到這些網站上填入幾個你有興趣的 rss 來源, 及一些設定資料, 他就幫你產生一個單獨的混搭 rss, 不管來源, 全部按時間排序。 不過我沒看到任何一個允許你事後修改設定。 所以只好改找現成的 php 函式庫, 自己動手呼叫。

其實好一陣子以前就已經開始在自己的首頁採用 SimplePie 函式庫顯示部落格的最新文章, 只是先前一直懶得寫程式把幾個 rss 的內容混搭起來。 這個週末才發現: SimplePie 太強了, 不必自己動手, 它自動會幫你混搭。

1. 請先參考幾個成果示範: 「資訊人權貴之家」 的 「最新幾篇短文」﹑ 「阿貴訂閱清單」﹑ 「公民新聞」。 (最後這個的原始碼最簡單乾淨, 建議新手從這個改起。)
2. 下載上述幾個檔案的原始碼, 並解壓縮。 裡面已經包含 SimplePie。 因為配合整個網站的配置, 這幾個檔案被我分散放在各個子目錄下; 但其實你也可以把所有檔案放在同一個目錄下, 並且更正 php 檔裡面的 "require_once" (意思類似 "include") 把多餘的路徑去除掉。
3. 稍微修改我寫的小小副程式 multi-feeds.php: 這一段

   
           $feed = new SimplePie(
               $feeds,
               preg_replace('#/[^/]*/$#', '/php-cache', $top[fs]),
               3600
           );
   

   裡面最長的那一句 preg_...[fs]), 目的是要從一個全域變數 $top[fs] 開始做代換, 算出一個路徑。 太囉嗦, 可以刪掉。 把它改成 '/home/ckhung/php-cache' 之類的一個表示路徑的簡單字串, 讓 SimplePie 可以存放暫存檔。 該目錄權的限必須完全開放 (777)。
4. 把幾個範例檔裡面的 $feed_sources 和 $feed_titles 及前後那幾句, 貼到你的 php 網頁裡面, 並稍作修改:
   1. $feed_sources 填入你想訂閱的數個 rss 來源。
   2. $feed_titles 填入來源名稱 (全名若太長, 可以只截取獨特﹑ 可視別的連續一小段) 及你希望它顯示的簡稱。
   3. 呼叫 multi_feeds 時, 第一個參數是希望顯示的條目個數。 若你的輸出網頁不是採 utf8 編碼, 則必須在最後面多加一個參數, 例如 'big5'。

其實應該可以用 favicon 取代 「簡稱」 來顯示每個條目的來源。 不過... 以後有空再研究吧。