輕前端筆記 - Vue3 SFC(.vue) 元件打包
昨天分享透過 vue3-sfc-loader 載入 .vue 檔案的解決方案，讓輕前端也能輕鬆應用 SFC 元件實現氣刀體一致，但仍有美中不足之處。 首先，vue3-sfc-loader 的原理是把 Vue CLI 開發階段用的 SFC 編譯程式搬到瀏覽器端( vue3-sfc-loader.js ... Read More
View ArticleJavaScript 鄉巴佬筆記 - ?. 運算子與物件屬性名簡寫
自從宣告 IE 封印解除，我一改過去儘量用古老寫法以免惹 IE 生氣的保守心態，積極學習現代 JavaScript。猶如鄉巴佬進城，連看見自動販賣機也會大讚科技好進步。對專業前端開發人員來說，2022 年還在介紹這種基本常識簡直笑死，但心想「總有比我更晚解封的人」，還是拋開羞恥心(謎：不要提那種你沒... Read More
View ArticleJavaScript 物件複製方法比較
複製物件是 JavaScript 的實用技巧之一，十幾前我就學會用 jQuery.extend() 搞定，常見應用是結合參數預設值及函式傳入的設定值，例如： const defaults = { fontSize: '10pt', color: 'white', backgr... Read More
View ArticleJavaScript 快顯通知套件 - NOTY
當遇到狀況，網頁要顯示訊息的形式有很多種，最無腦最粗暴的做法是 alert()： 標題、位置、樣式沒得選，也談不上與網頁風格一致，但系統內建不必花腦筋，程式碼可中斷等使用者回應再繼續，用起來超簡單是它最大優點。 但如果你的網站要拿來換錢錢或分數，簡陋的 alert()/confirm() 很容易讓... Read More
View Article字型檔圖示黑魔法 - Ligatures
應用系統網站免不了會用到小圖示。早從 ASP/WebForm 時代，我就有四處蒐集 16x16、12x12 迷你 GIF 圖示的習慣，但檔案來自四面八方，很難要求配色、風格一致，所以認識 Font-Awesome，我如獲至寶。一套包含數百上千個圖示，用一個 woff/ttf 檔加 css 取代上千個... Read More
View Article【笨問題】命令列執行結果同時輸出到螢幕跟檔案
CLI 指令執行結果要存成檔案很簡單，加上 > filename 將 stdout 轉向檔案就可以了。(或是 2>&1 >filename 連錯誤訊息也一併寫入) 但這麼做有個缺點，導向檔案後螢幕完全看不到結果，遇到耗時較久的作業會無法掌握進度，連程式有沒有當掉都搞不清楚。... Read More
View Article簡介字型檔格式：TTF、EOT、WOFF、WOFF2
先前用 FontAwesome 時學到網頁字型檔格式是 woff/woff2，較早期 IIS 需加設 MIME Types 才能正確下載。前陣子查閱 Google Material Icons 文件，讀到一段字型檔放自家網站的 CSS 設定範例： @font-face { font-family... Read More
View Article好用的 Google Font 字型檔圖示：Material Symbols、Material Icons
前陣子驚喜發現 Google 有一套 Material 風格字型檔案圖示，數量超過 2500 個，開放原始碼，採 Apach V2 授權可免費用於個人及商業用途，還有友善的查詢介面： 使用方法跟 Font Awesome 一樣簡單，用 LINK 參照 CSS，在 HTML 插入 <span ... Read More
View ArticleJavaScript 快顯通知 NOTY 在 Github 被標為過時，還能用嗎？
前幾天分享我找到好用的快顯通知套件 - NOTY，當時從一堆套件選中 NOTY，它只需一個 js 一個 css 搞定，甚至支援 IE10+，在 Github 上獲得超過 6700 顆星算是主流選擇之一，而簡便性與擴充性感覺不錯，最吸引我的點 - 不依賴 jQuery。雖然我一定會靠 jQuery 再... Read More
View Article用 Roslyn APIs 解析 C# 實現程式碼產生器
我很愛用程式產生器節省無謂手工，其中有個經典應用是用程式產生器將服務元件轉成 WebAPI/MVC Controller + 客戶端呼叫程式庫，原理不難，程式產生器參照 C# DLL，用 Reflection 找出方法及所需參數，再從 XML Documentation 註解檔(.xml)取出對應說... Read More
View Article小試 SweetAlert2 快顯通知模式
前陣子找到 JavaScript 快顯通知套件 - NOTY，雖然原作者已不再維護，但評估它最符合我的需求，如要修改也在我的能力範圍，維持原判。但接二連三有讀者提到，老朋友 SweetAlert2 其實就有定時自動關閉及其他快顯通知所需功能，有「眾裡尋他千百度，驀然回首，那人卻在燈火闌珊處」的驚喜感... Read More
View ArticleFont Awesome 6 圖示還能免費用在商業用途嗎？
免費字型檔圖示 Font-Awesome 是我的主力圖示來源，至今已到 6.1.1 版，授權方案也有些改變。前幾天 Google Material 圖示一文提到 Font-Awesome 6 分為 Free、Pro、Pro Max 三種方案，當時的認知是只有 Free 可免費用於個人或中低量用途(每... Read More
View Article【笨問題】VSCode 無法編輯過長文字
發現 VSCode 有個問題，當一行文字過長，最尾端會變成 ... (刪節號)，水平捲軸即使移到最右側也不會展開，因此看不到後面的文字也無法編輯。(我最常遇到的狀況是 Data Uri) 爬文才知，VSCode 水平捲軸一直有 10,000 字元的限制，存在超過五年了，但解法很簡單，開啟自動換行就... Read More
View ArticleCSS 練習 - 翻牌動畫
想學會在網頁做出翻牌效果，自己訂了題目練功 - 用 CSS transform-style: preserve-3d; 實現翻牌的視覺效果，並以循環播放、滑鼠滑過、滑鼠點擊三種方式觸發。 找到 W3School 有篇教學 - How TO - Flip Card，是很好的學習範本。 不細說從頭了，簡... Read More
View Article.NET Core/.NET 6 .exe 取得執行檔路徑
從 .NET Framework 時代開始，我都用這招取得執行中的 EXE 路徑： Assembly.GetExecutingAssembly().Location 最近發現這做法在 .NET Core / .NET 6 可能會出問題。用以下範例程式重現問題： var execAsm = Syst... Read More
View Article打造優雅版 .NET 6 Console 桌面小工具
身為性急又沒耐心的現代王藍田，我習慣為日常作業寫小工具放在桌面，需要時點兩下，避免被瑣事影響心情。簡單作業會用 PowerShell 寫，邏雜複雜的則會開個 Console Application 專案用 C# 開發。 .NET 6 推出的 Top-Level Statements 神奇地簡化 Pr... Read More
View Article隨身碟格式 exFAT 與在 CentOS 7 掛載方式
我印象中 USB 隨身碟格式化選項還停留在 FAT、FAT32 跟 NTFS，但最近在 Windows 格式化隨身碟時發現沒有 FAT32 選項，發現我又落伍了。 這年頭已經沒人用 FAT 了，主流格式選擇是 FAT32、NTFS 跟 exFAT。三者比較如下： (參考：隨身碟格式化教學：FAT3... Read More
View ArticleCoding4Fun - 智慧插座用電量長期監測
前幾天看到朋友入手新玩具，剛好我也是無風扇迷你電腦愛好者，免不了交換點心得兼請益最新資訊，卻冷不防被推坑，說有款 WiFi 控制智慧插座 C/P 值不錯，六孔 110V 插座可獨立遙控，能定時開或關，還有耗電監測功能。我對耗電測量向來感興趣，之前買過單孔瓦特計(參考：電器耗電知多少？)，陽春款式只有... Read More
View Article登出 Linux 後繼續執行程式 - 使用 tmux
在 Linux 跑 ASP.NET Core 網站，我目前會用兩種做法：1) 包成服務用 systemctl 啟動 參考 2) 部署到 Docker 容器 參考。 兩種做法都需要額外的步驟，因此，臨時性程式我會直接 ssh 登入執行，不用時按 Ctrl-C 結束，但缺點是必須維持登入狀態，一旦 ss... Read More
View ArticleGit unsafe repository 錯誤與 Gitea 整合問題
有台 Gitea 私服最近要搬家，整個資料夾移到新主機，重新註冊成 Windows 服務，安裝好新版 Git for Windows 後，Gitea 順利啟動，但點進 Repository 爆炸噴出 HTTP 500，從 Log 看到錯誤訊息： ...ules/context/repo.go:853... Read More
View Article