使用 「我的最愛」在 IE 實現 VIP 專屬客製功能
 |  | 4 |  | 1,211 |
開發網站有時會遇到一種狀況，某位使用者有個特殊需求，為一個人修改網頁設計正當性不足，但該功能確實可為他帶來可觀效益(我一直把增進人類全體之生活當成寫程式的核心價值呀)。因此，實務上偶爾會出現所謂 VIP 版，墮落自我要求不高的開發者會 Copy & Paste 改一版交差，認真精實的開發者會...
Git Diff 轉程式異動對照表(Compare List) - 互動版
| | | 0 | | 1,184 |
前陣子分享將 Git diff 文件轉成網頁版程式異動對照表(Compare List)的做法，上路沒多久便觸礁。原因是一次新增大量檔案(例如：網站新增內容，包含大量 HTML、CSS、JS 檔全文)的 diff 檔可能超過 10MB，轉換產生的 HTML DOM 過於龐大讓瀏覽器很卡。Chrome...
【笨問題】JavaScript 的多行字串常數寫法
| | | 7 | | 6,813 |
寫 JavaScript 遇到多行文字常數，我的直覺寫法是玩加號接接樂，像是這樣： <!DOCTYPE html> <html> <head> <style> fieldset { width: 17...
【茶包射手日記】jQuery.unique() 與用 JavaScript 排除重複陣列元素
| | | 4 | | 3,369 |
接獲 Bug 通報，某網頁下拉選單出現重複選項，追查資料來自兩段 jQuery.map() 吐回字串陣列，以 Array.concat() 合併後再以 jQuery.unique() 排除重複項目，乍看合理。過去沒聽過有 jQuery.unique() 這個函式，但望文生義應類似 LINQ 的 Di...
JavaScript 檔壓縮工具 - UglifyJS
| | | 3 | | 3,340 |
我有個特殊需求，需要一個壓縮(Minify) JavaScript 檔的指令列工具。JavaScript 壓縮工具多如牛毛，從線上轉換網站、Visual Studio 擴充套件，到 GUI 軟體工具都有，而 Gulp/Grunt 等打包工具也都有內建，由於每次只處理單一檔案，我希望安裝跟操作步驟愈簡...
關於 RegExp s (dotAll) 旗標
| | | 1 | | 784 |
寫了以下程式碼，想用 JavaScript RegExp 從一串文字擷取指定 JSON 內容： <!DOCTYPE html> <html> <body> <textarea id="t" cols="60" ro...
取代單調 window.alert() 的好選擇 - SweetAlert2
| | | 9 | | 14,387 |
嫌瀏覽器內建的 alert() / confirm() 太醜，Kendo UI 有 kendo.alert() 與 kendo.confirm() 可取代 window.alert()/confirm()，小缺點是標題列一律顯示網址難以調整，加上網頁未必就有引用 Kendo UI，為此下載龐大的 K...
【茶包射手日記】Libman 無法解析 jsDelivr/UNPKG 套件
| | | 0 | | 1,108 |
我目前開發網頁主要還是用 Visual Studio，採取 ASP.NET MVC cshtml 產生 HTML 主體並搭上 jQuery/Vue.js 處理 MVVM 的策略，力求專案架構簡潔，避免扯上 npm、webpack 等重量級工具(除非是要寫 SPA)，走一種「輕前端風格」。 既然採行這...
小把戲 - 讓 JSON.parse() 內建日期解析功能
| | | 0 | | 2,909 |
JSON.parse 時另外指定 Reviver 函式將 "yyyy-MM-ddTHH:mm:ssZ" 轉成 Date 型別，已是我用 JavaScript 解析 JSON 字串的SOP。參考：我慣用的標準做法 幾乎每次使用都要加工，一直抱怨為何瀏覽器不直接內建。先前寫 Knoc...
小技巧 - 運用 Form target 模擬 AJAX 表單傳送效果
| | | 0 | | 5,916 |
先定義我所謂的「AJAX 表單傳送」：意指撰寫 JavaScript 蒐集 HTML 表單欄位，再藉由 XHR 傳送到伺服器端，取代傳統的 Postback。其優點包含送單時畫面不閃動、沒有重新載入網頁的延遲以及傳輸運算成本、表單處理失敗使用者輸入狀態不變方便修改重送... 等等，近年來 AJA...
使用 Headless Chrome 擷圖、轉存PDF、爬資料
| | | 6 | | 18,585 |
Chrome 自 59 版起內建了 Headless 模式，允許透過命令列啟動 Chrome 以無 GUI 方式執行，具備與正常開啟完全相同的網頁渲染及 JavaScript 引擎，還可透過網路連線遙控。這個功能可以用於不少有趣應用，這裡列舉幾種實用情境。 註：Headless Chrome ...
網頁偵錯鬼問題 - 開了 F12 開發者工具就正常？
| | | 2 | | 10,958 |
分享今天卡到陰，耗掉我半小時青春的鬼問題。 有個待辦事項清單網頁，使用者可點選待辦項目以 Modal Dialog 連上位於其他主機的網頁執行作業，待 Modal Dialog 關閉，待辦清單需依據執行結果決定是否將該筆作業註記為已完成，避免重複處理。由於待辦清單與執行作業網站分處不同伺服器，...
JavaScript 將輸入欄位內容複製到剪貼簿
| | | 3 | | 8,452 |
部落格原本用的程式碼顏色標示(Syntax Highlight)套件是十年前的產物，早就跟不上程式語言演進腳步，上篇文章起網站悄悄改版，改用支援 176 種語法及 76 種樣式並持續更新的 highlight.js。(列入評估的另一選項 prism.js 也很出色，頗難抉擇，最後選定 Githu...
【茶包射手日記】Safari 回上頁時無法停用 Cache
| | | 1 | | 4,624 |
使用者報案，專案網站使用 Safari 檢視，在切換頁面時殘留載入中訊息，但使用 Chrome/IE 則一切正常。 專案網站有個主目錄網頁，點選切換其他功能網頁前會 $.blockUI 顯示"網頁載入中，請稍侯..."訊息，由於頁面很快會被新網頁取代，故沒必要關閉載入中訊息...
【茶包射手日記】網頁在某支手機無法使用
| | | 3 | | 7,519 |
同事貢獻新鮮茶包一枚。查到最後發現是低級錯誤，但念在用電話跟 LINE 遠端偵錯耗了三個小時，值得記錄並列為日後問題排除參考。 最初的報案內容是某位使用者剛換了 iPhone 8 新手機，要連上某個例行工作網站查資料，輸入帳號密碼卻無法登入。我們試了自己的手機及平板檢測正常，原以為是使用者個人...
JavaScript 中文排序問題
| | | 4 | | 14,036 |
今天才發現 JavaScript 中文字串排序有個大問題! 下圖是 KendoGrid 在 Chrome 使用 JavaScript 排序的結果，如圖所示，一到七由小到大排序結果為一、七、三、二、五、六、四，既不是依筆劃，也不是依注音: (SQL 的中文定序就區分筆劃跟注音，例如: Chines...