海外自助單車旅遊 Part 2 - MT 16 Fuji Hill climp 心得
海外自助單車旅遊 Part 2 - MT 16 Fuji Hill climp 心得 注意事項 機票最好提前四個月前訂，會比較便宜 單車廂攜帶注意事項，華航長榮都有30kg的免費行李，但華航目前只支持硬殼行李箱，並請提前向航空公司報備需要攜帶大件行李。 組車很花時間請在家練習熟，否則時間都花在坐車組車和拆車 五六月是梅雨季，河口湖天氣變化很大...
標籤:
海外自助單車旅遊 Part 1 - 單車環沖繩心得
海外自助單車旅遊 Part 1 - 單車環沖繩心得 出國環島，聽起來很熱血，但是對沒有訓練的人騎起來可能就是有點辛苦的旅程 最好事先掌握地形，是否有許多爬坡，平常不擅爬坡的人，騎起來可能就是夢魘。 時速規劃最好能運動均速在18-25km間，一天騎3-5小時就好，因為是去玩不需要騎的太快，也不能騎的太慢會影響checkin 及其他可以去的行程，最好多安排...
首登!人生第一座百岳
首登!人生第一座百岳 完成人生中第一座百岳，平安登出，比想像中還不輕鬆，背著7-8斤，兩天走了5萬多步，相當爬三座101，還好有原住民朋友一路講幹話，不然這山路真的挺不容易走的。
首登!人生第一座百岳
首登!人生第一座百岳 完成人生中第一座百岳，平安登出，比想像中還不輕鬆，背著7-8斤，兩天走了5萬多步，相當爬三座101，還好有原住民朋友一路講幹話，不然這山路真的挺不容易走的。
給想去嘉明湖的一些事項參考事項
給想去嘉明湖的一些事項參考事項 前言 全員安全登出-嘉明湖（順便撿了個百岳-三叉山） 同一天遇上日出、暴雪（冰霰）、東西南北吹的狂風、大霧、低溫，終於在寒風中等了半小時，嘉明湖終於矜持的露出30秒。 參考事項 到嘉明湖警察小隊辦理入山證前會經過幾個道路管制區（修路），因此一天能開車到辦理入山證警察小隊通行的時間有限，一錯過要等3-5小時才會放行。 ...
面試官筆記
Front-end-interview 開場 可以請你自我介紹，並用偏技術角度，介紹這幾年做過了什麼，盡在以五分鐘內說完。 暖身： 面試官自我介紹，負責工作介紹，職缺期待介紹 請面試者針對剛剛的內容自我推薦或是介紹相關經驗 前份工作負責什麼角色？可以介紹一個你最有成就感的專案嗎？ 你的期待？你今年最想學會甚麼？ 最近有看...
防範WebShell Attack
資安問題處理 在調查某次資安的事件中，發現駭客在伺服器留下了後門腳本，網站的js也被竄改過，導到假的flash 網站，經調查，我懷疑遭到Web shell attack。 什麼是Web shell attack 接著參考封面這張圖，這些駭客可能透過， 微軟產品的漏洞(Windows 、IIS 、Net Framework)或是員工電腦中毒被當跳版等等方式，...
SameSite Issue
關於SameSite Cookie Issue 起緣 因為GDPR法規關係，各大瀏覽器會限縮網頁的第三方網站，去寫入Cookie，對使用者進行廣告追蹤， 而我們的產品端常常會被客戶鑲嵌(iframe) 在網站中，因此踩到此限制。 曾經發生的問題 Windwos update IIS 將預設的Cookie 嚴格模式改成Lax (後來產品端透過Ur...
實作JWT驗證所遇到的問題
實作JWT驗證所遇到的問題 對JWT TOKEN 的理解 JWT當初的設計是為了確保在跨組織間安全互相傳遞資料所存在。 但因為JWT無法確保安全性，後來延伸的JWE，但JWE的標準，定義了很多我們不必要的屬性及命名規範，我在想我們應該是可以學精神就好。 目的 開發手機APP 不用有兩套驗證及API。 無狀態的API,伺服器更容易水平擴展。 ex:每...
超省錢架站法，透過 GitHub Pages + JeKyll，搭建自己免費 Blog 空間
問題 因為身邊很多，想和我一樣，擁有一個個人的網站，但架一個網站，光是放在雲端空間，至少費用4000元 以上，但也不是每個人都像我有自己的伺服器，因此，今天我想來寫一篇超省錢的架站法。 架站費用 網站空間 4000 以上 / 年 域名 680 元 / 年 Jeklly 是什麼 Jekyll是一個簡單的靜態網站生成器，用於生成個人，專案或組織的網站。 它由Gi...
用Qnap Nas 的 Container Station 架設自己的 Jekyll Markdown Blog
用Qnap Nas Container Station 架設自己的 Jekyll Markdown Blog 問題 現行團隊中每個人都有自己的Markdown 文件，久而久之，文件一多時，無法有效管理。 因為現行的 Hackmd 連結很多，新進同仁，都額外花時整理連結。 無法對文件的歸類及搜尋。 為何要使用 Jekyll ? 幫助團隊...
Nuget CLI 常用指令
Nuget CLI 常用指令 自動化更新nuget 將目前專案檔的 nuget 還原 nuget restore Build.sln 將目 Nuget update 到Nuget 網站下載nuget.exe ，並指定 MsBuild 路徑 vs 2017 nuget update .\Test\Test.AP.Site.Test.csproj -msbu...
優化開發流程系列，再也不用人工撰寫 Release Notes，本篇用Powershell 搭配 git log
優化開發流程系列，再也不用人工撰寫 Release Notes，本篇用Powershell 及 git log 問題 在功能開發完成，要準備部署到下一個環境時，目前都需要『人工記錄』異動了什麼項目，好讓功能在下一個環境發生問題時，可以快速追朔釋出那些功能所造成;為了讓開發人員專注在開發，我這邊用了Power Shell ，做了一個自動化腳本 在產生 Git t...
優化開發流程系列，再也不用人工撰寫 Release Notes，本篇用Powershell 搭配 git log
優化開發流程系列，再也不用人工撰寫 Release Notes，本篇用Powershell 及 git log 問題 在功能開發完成，要準備部署到下一個環境時，目前都需要『人工記錄』異動了什麼項目，好讓功能在下一個環境發生問題時，可以快速追朔釋出那些功能所造成;為了讓開發人員專注在開發，我這邊用了Power Shell ，做了一個自動化腳本 在產生 Git t...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
透過 PowerShell 製作 JPG/ PNG 轉 webp 小工具 (使用 Google webp converter lib)
Webp 起緣 WebP圖像格式 起緣，由Google開發，它的主要優點是：使您獲得出色的清晰度而又不會增加網路傳輸的負擔。 這對於頁面加載速度至關重要。 為何要用 Webp 大多數網站，圖片佔網路加載的 60％ 以上，然而 webp 格式的的出現，可以將 JPEG 圖像尺寸減小35％，將PNG圖像尺寸減小50％，並保留了其畫質和透明度，採用 webp 圖片...
透過 PowerShell 製作 JPG/ PNG 轉 webp 小工具 (使用 Google webp converter lib)
Webp 起緣 WebP圖像格式 起緣，由Google開發，它的主要優點是：使您獲得出色的清晰度而又不會增加網路傳輸的負擔。 這對於頁面加載速度至關重要。 為何要用 Webp 大多數網站，圖片佔網路加載的 60％ 以上，然而 webp 格式的的出現，可以將 JPEG 圖像尺寸減小35％，將PNG圖像尺寸減小50％，並保留了其畫質和透明度，採用 webp 圖片...
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔 解決問題 隨著企業系統架構越來越複雜，為解決開發過程中，不同角色或應用程式，需要維護同一份語系翻譯檔。 實作原理 透過 Google sheet 機制就可以達到多人同時維護一份翻譯檔，並透過匯出 csv 檔的功能，將檔案下載到本地，透過 Powershell...
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔 解決問題 隨著企業系統架構越來越複雜，為解決開發過程中，不同角色或應用程式，需要維護同一份語系翻譯檔。 實作原理 透過 Google sheet 機制就可以達到多人同時維護一份翻譯檔，並透過匯出 csv 檔的功能，將檔案下載到本地，透過 Powershell...
透過 Powershell 部署 SQL 腳本到多個網站的資料庫
問題 有一套系統，卻克隆 ( Clone )了很多個網站，每個站都是獨立的資料庫，因此部署資料庫時，過去需要人工去每一部部署腳本，此篇則要透過 Powershell 將一個週期開發的 sql 腳本，部署到多個網站的資料庫中。 作法 透過powershell 讀取資料庫設定檔( site.json ) 及 部署的資料庫腳本清單設定的 ( sql.json ) ，...
用Power shell 及 chocolatey 撰寫自動化安裝應用程式及工具腳本
用Power shell 安裝 Docker with chocolatey 為什麼要用 chocolatey Chocolatey 提供快速安裝應用程式與工具的雲端服務，並提供指令化的方式，搜尋、安裝、更新、移除應用程式或工具等。 https://chocolatey.org/install 安裝 chocolatey 用系統管理員帳號執行 Powe...
用Power shell 及 chocolatey 撰寫自動化安裝應用程式及工具腳本
用Power shell 安裝 Docker with chocolatey 為什麼要用 chocolatey Chocolatey 提供快速安裝應用程式與工具的雲端服務，並提供指令化的方式，搜尋、安裝、更新、移除應用程式或工具等。 https://chocolatey.org/install 安裝 chocolatey 用系統管理員帳號執行 Powe...
用 Power shell 跳窗指定複製的資料夾
用 Power shell 跳窗指定複製的資料夾 問題 目在開發階段，不同網站的樣式 ( Theme )資料夾，經常需要手動覆蓋，用Powershell 將其自動化。 作法 複製採用 windows 內建強大的 robocopy 指令。 預設資料夾目錄，透過 net framework 跳窗元件，仍可以選擇想要複製的資料夾目錄。 使用方式 ...
優化開發流程系列，再也不用人工撰寫 Release Notes，本篇用Powershell 搭配 git log
優化開發流程系列，再也不用人工撰寫 Release Notes，本篇用Powershell 及 git log 問題 在功能開發完成，要準備部署到下一個環境時，目前都需要『人工記錄』異動了什麼項目，好讓功能在下一個環境發生問題時，可以快速追朔釋出那些功能所造成;為了讓開發人員專注在開發，我這邊用了Power Shell ，做了一個自動化腳本 在產生 Git t...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 1 準備心歷路程
我的澎湖大鐵記實 - IRONMAN PENHU 226 - Part’s 1 準備心歷路程 緣起 我是一位網頁軟體開發工程師，因工作關係，常時間久坐，壓力大就亂吃，剛接觸鐵人三項時，曾經最胖時達到 96kg，體力也不是特別的好，游泳還游不超過25公尺，跑步3km 就喘的不行，過去當兵還是在國防部，所以這輩子也沒什麼機會操到，但就在4年前，參加前主管推坑的鐵人說...
IRonman Kenting 70.3 2021 賽事補給策略及風險應對
IRonman 70.3 Kenting 前言 玩鐵人第三年了，前兩場的賽事都是台東，這次墾丁的賽事相較台東，更具有挑戰性，也是第一次挑戰海泳賽事。 風險 海浪及水母 -> 防寒衣 落山風 -> 重心壓低 天氣熱、曝曬 -> 防曬乳、跑帽、水袋 抽筋 -> 前兩年都敗在抽筋上，這次打算騎單車時就穿上腿套來應對。 ...
IRonman Kenting 70.3 2021 賽事補給策略及風險應對
IRonman 70.3 Kenting 前言 玩鐵人第三年了，前兩場的賽事都是台東，這次墾丁的賽事相較台東，更具有挑戰性，也是第一次挑戰海泳賽事。 風險 海浪及水母 -> 防寒衣 落山風 -> 重心壓低 天氣熱、曝曬 -> 防曬乳、跑帽、水袋 抽筋 -> 前兩年都敗在抽筋上，這次打算騎單車時就穿上腿套來應對。 ...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 1 準備心歷路程
我的澎湖大鐵記實 - IRONMAN PENHU 226 - Part’s 1 準備心歷路程 緣起 我是一位網頁軟體開發工程師，因工作關係，常時間久坐，壓力大就亂吃，剛接觸鐵人三項時，曾經最胖時達到 96kg，體力也不是特別的好，游泳還游不超過25公尺，跑步3km 就喘的不行，過去當兵還是在國防部，所以這輩子也沒什麼機會操到，但就在4年前，參加前主管推坑的鐵人說...
IRonman Kenting 70.3 2021 賽事補給策略及風險應對
IRonman 70.3 Kenting 前言 玩鐵人第三年了，前兩場的賽事都是台東，這次墾丁的賽事相較台東，更具有挑戰性，也是第一次挑戰海泳賽事。 風險 海浪及水母 -> 防寒衣 落山風 -> 重心壓低 天氣熱、曝曬 -> 防曬乳、跑帽、水袋 抽筋 -> 前兩年都敗在抽筋上，這次打算騎單車時就穿上腿套來應對。 ...
IRonman Kenting 70.3 2021 賽事補給策略及風險應對
IRonman 70.3 Kenting 前言 玩鐵人第三年了，前兩場的賽事都是台東，這次墾丁的賽事相較台東，更具有挑戰性，也是第一次挑戰海泳賽事。 風險 海浪及水母 -> 防寒衣 落山風 -> 重心壓低 天氣熱、曝曬 -> 防曬乳、跑帽、水袋 抽筋 -> 前兩年都敗在抽筋上，這次打算騎單車時就穿上腿套來應對。 ...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 1 準備心歷路程
我的澎湖大鐵記實 - IRONMAN PENHU 226 - Part’s 1 準備心歷路程 緣起 我是一位網頁軟體開發工程師，因工作關係，常時間久坐，壓力大就亂吃，剛接觸鐵人三項時，曾經最胖時達到 96kg，體力也不是特別的好，游泳還游不超過25公尺，跑步3km 就喘的不行，過去當兵還是在國防部，所以這輩子也沒什麼機會操到，但就在4年前，參加前主管推坑的鐵人說...
IRonman Kenting 70.3 2021 賽事補給策略及風險應對
IRonman 70.3 Kenting 前言 玩鐵人第三年了，前兩場的賽事都是台東，這次墾丁的賽事相較台東，更具有挑戰性，也是第一次挑戰海泳賽事。 風險 海浪及水母 -> 防寒衣 落山風 -> 重心壓低 天氣熱、曝曬 -> 防曬乳、跑帽、水袋 抽筋 -> 前兩年都敗在抽筋上，這次打算騎單車時就穿上腿套來應對。 ...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 1 準備心歷路程
我的澎湖大鐵記實 - IRONMAN PENHU 226 - Part’s 1 準備心歷路程 緣起 我是一位網頁軟體開發工程師，因工作關係，常時間久坐，壓力大就亂吃，剛接觸鐵人三項時，曾經最胖時達到 96kg，體力也不是特別的好，游泳還游不超過25公尺，跑步3km 就喘的不行，過去當兵還是在國防部，所以這輩子也沒什麼機會操到，但就在4年前，參加前主管推坑的鐵人說...
IRonman Kenting 70.3 2021 賽事補給策略及風險應對
IRonman 70.3 Kenting 前言 玩鐵人第三年了，前兩場的賽事都是台東，這次墾丁的賽事相較台東，更具有挑戰性，也是第一次挑戰海泳賽事。 風險 海浪及水母 -> 防寒衣 落山風 -> 重心壓低 天氣熱、曝曬 -> 防曬乳、跑帽、水袋 抽筋 -> 前兩年都敗在抽筋上，這次打算騎單車時就穿上腿套來應對。 ...
用 Power shell 跳窗指定複製的資料夾
用 Power shell 跳窗指定複製的資料夾 問題 目在開發階段，不同網站的樣式 ( Theme )資料夾，經常需要手動覆蓋，用Powershell 將其自動化。 作法 複製採用 windows 內建強大的 robocopy 指令。 預設資料夾目錄，透過 net framework 跳窗元件，仍可以選擇想要複製的資料夾目錄。 使用方式 ...
用 Power shell 跳窗指定複製的資料夾
用 Power shell 跳窗指定複製的資料夾 問題 目在開發階段，不同網站的樣式 ( Theme )資料夾，經常需要手動覆蓋，用Powershell 將其自動化。 作法 複製採用 windows 內建強大的 robocopy 指令。 預設資料夾目錄，透過 net framework 跳窗元件，仍可以選擇想要複製的資料夾目錄。 使用方式 ...
樹莓派安裝 FRP SERVER
樹莓派安裝 FRP SERVER 解決問題 先前一篇文章介紹過如何透過 Google cloud 架設 Frps 反向代理伺服器，將內網網站經過映射出去，但因為網站越來越多，費用隨著而來也越來越高，一個月200~300，最後透過樹莓派自架 FRP SERVER。 首先，下載最新版的 frps wget https://github.com/fatedier/f...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
用 Google Cloud Platform 搭建內網穿透伺服器 ( Frp Server )
反向代理之 Part2 - 用 Google cloud platform 搭建內網穿透反向代理伺服器 ( Frp Server ) 解決問題 先前一篇文章介紹過如何透過免費的 Frps 反向代理伺服器，將內網網站經過映射出去，但因為免費的真的太不穩定，BLOG 和 DEMO 網站，常常服務會掛掉，後來經網友推薦，Google 有免費體驗90天，並給予 300 ...
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務 解決問題 因為是租屋處，想要架站，房東不方便提供給我 IP 分享器的權限，試過第三方主機，都很慢也很貴，且ngrok 又有流量限制，而 ngrok 其實就是一種反向代理的應用。 何謂反向代理 反向代理 - 其實是”代理伺服器”代理了”目標伺服器”，去和”客戶端”進行資料交換。 其目的是 隱藏伺服器真實...
樹莓派安裝 FRP SERVER
樹莓派安裝 FRP SERVER 解決問題 先前一篇文章介紹過如何透過 Google cloud 架設 Frps 反向代理伺服器，將內網網站經過映射出去，但因為網站越來越多，費用隨著而來也越來越高，一個月200~300，最後透過樹莓派自架 FRP SERVER。 首先，下載最新版的 frps wget https://github.com/fatedier/f...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
用 Google Cloud Platform 搭建內網穿透伺服器 ( Frp Server )
反向代理之 Part2 - 用 Google cloud platform 搭建內網穿透反向代理伺服器 ( Frp Server ) 解決問題 先前一篇文章介紹過如何透過免費的 Frps 反向代理伺服器，將內網網站經過映射出去，但因為免費的真的太不穩定，BLOG 和 DEMO 網站，常常服務會掛掉，後來經網友推薦，Google 有免費體驗90天，並給予 300 ...
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務 解決問題 因為是租屋處，想要架站，房東不方便提供給我 IP 分享器的權限，試過第三方主機，都很慢也很貴，且ngrok 又有流量限制，而 ngrok 其實就是一種反向代理的應用。 何謂反向代理 反向代理 - 其實是”代理伺服器”代理了”目標伺服器”，去和”客戶端”進行資料交換。 其目的是 隱藏伺服器真實...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
樹莓派安裝 FRP SERVER
樹莓派安裝 FRP SERVER 解決問題 先前一篇文章介紹過如何透過 Google cloud 架設 Frps 反向代理伺服器，將內網網站經過映射出去，但因為網站越來越多，費用隨著而來也越來越高，一個月200~300，最後透過樹莓派自架 FRP SERVER。 首先，下載最新版的 frps wget https://github.com/fatedier/f...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關 前言 有用過負載平衡器，應該多多少少都有聽過業界知名的 F5 Networks 公司的 F5 的負載平衡器，但一台要價將近 20~30萬，對於中小型企業來說，這是不小的費用，如果你想導入負載平衡器，但預算又沒這麼寬裕，可以考慮微軟的開源 YARP 來實作軟體負載平衡。 軟體負載平衡優點有 ...
用 Google Cloud Platform 搭建內網穿透伺服器 ( Frp Server )
反向代理之 Part2 - 用 Google cloud platform 搭建內網穿透反向代理伺服器 ( Frp Server ) 解決問題 先前一篇文章介紹過如何透過免費的 Frps 反向代理伺服器，將內網網站經過映射出去，但因為免費的真的太不穩定，BLOG 和 DEMO 網站，常常服務會掛掉，後來經網友推薦，Google 有免費體驗90天，並給予 300 ...
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務 解決問題 因為是租屋處，想要架站，房東不方便提供給我 IP 分享器的權限，試過第三方主機，都很慢也很貴，且ngrok 又有流量限制，而 ngrok 其實就是一種反向代理的應用。 何謂反向代理 反向代理 - 其實是”代理伺服器”代理了”目標伺服器”，去和”客戶端”進行資料交換。 其目的是 隱藏伺服器真實...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
樹莓派安裝 FRP SERVER
樹莓派安裝 FRP SERVER 解決問題 先前一篇文章介紹過如何透過 Google cloud 架設 Frps 反向代理伺服器，將內網網站經過映射出去，但因為網站越來越多，費用隨著而來也越來越高，一個月200~300，最後透過樹莓派自架 FRP SERVER。 首先，下載最新版的 frps wget https://github.com/fatedier/f...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關 前言 有用過負載平衡器，應該多多少少都有聽過業界知名的 F5 Networks 公司的 F5 的負載平衡器，但一台要價將近 20~30萬，對於中小型企業來說，這是不小的費用，如果你想導入負載平衡器，但預算又沒這麼寬裕，可以考慮微軟的開源 YARP 來實作軟體負載平衡。 軟體負載平衡優點有 ...
用 Google Cloud Platform 搭建內網穿透伺服器 ( Frp Server )
反向代理之 Part2 - 用 Google cloud platform 搭建內網穿透反向代理伺服器 ( Frp Server ) 解決問題 先前一篇文章介紹過如何透過免費的 Frps 反向代理伺服器，將內網網站經過映射出去，但因為免費的真的太不穩定，BLOG 和 DEMO 網站，常常服務會掛掉，後來經網友推薦，Google 有免費體驗90天，並給予 300 ...
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務
透過frp-c 容器應用，簡單建立、高效能的內網穿透服務 解決問題 因為是租屋處，想要架站，房東不方便提供給我 IP 分享器的權限，試過第三方主機，都很慢也很貴，且ngrok 又有流量限制，而 ngrok 其實就是一種反向代理的應用。 何謂反向代理 反向代理 - 其實是”代理伺服器”代理了”目標伺服器”，去和”客戶端”進行資料交換。 其目的是 隱藏伺服器真實...
用Power shell 及 chocolatey 撰寫自動化安裝應用程式及工具腳本
用Power shell 安裝 Docker with chocolatey 為什麼要用 chocolatey Chocolatey 提供快速安裝應用程式與工具的雲端服務，並提供指令化的方式，搜尋、安裝、更新、移除應用程式或工具等。 https://chocolatey.org/install 安裝 chocolatey 用系統管理員帳號執行 Powe...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
使用 Windows Docker 來建立ASP.NET 網站容器
安裝 windows Docker 相關軟體 1.power shell 安裝 docker 需要的相關軟體 (需系統管理員方式執行) function Install-Chocolatey { try { Invoke-Expression ((New-Object System.Net.WebClient).DownloadStri...
用Power shell 及 chocolatey 撰寫自動化安裝應用程式及工具腳本
用Power shell 安裝 Docker with chocolatey 為什麼要用 chocolatey Chocolatey 提供快速安裝應用程式與工具的雲端服務，並提供指令化的方式，搜尋、安裝、更新、移除應用程式或工具等。 https://chocolatey.org/install 安裝 chocolatey 用系統管理員帳號執行 Powe...
Windows Certbot 自動申請 Let’s Encrypt 免費的 SSL憑證筆記
Windows Certbot 自動申請 Let’s Encrypt SSL憑證筆記 解決問題 let’s encrypt 是一套老牌，免費的 SSL 憑證申請服務，但每一次只能申請三個月，所以每三個月要手動在申請一次憑證，這樣的操作很麻煩，透過 certbot 則可以透過指令化及自動排程去申請 let’s encrypt 的 SSL 免費憑證。 申請憑證 ...
使用 Windows Docker 來建立ASP.NET 網站容器
安裝 windows Docker 相關軟體 1.power shell 安裝 docker 需要的相關軟體 (需系統管理員方式執行) function Install-Chocolatey { try { Invoke-Expression ((New-Object System.Net.WebClient).DownloadStri...
使用 Windows Docker 來建立ASP.NET 網站容器
安裝 windows Docker 相關軟體 1.power shell 安裝 docker 需要的相關軟體 (需系統管理員方式執行) function Install-Chocolatey { try { Invoke-Expression ((New-Object System.Net.WebClient).DownloadStri...
使用 Windows Docker 來建立ASP.NET 網站容器
安裝 windows Docker 相關軟體 1.power shell 安裝 docker 需要的相關軟體 (需系統管理員方式執行) function Install-Chocolatey { try { Invoke-Expression ((New-Object System.Net.WebClient).DownloadStri...
透過 Powershell 部署 SQL 腳本到多個網站的資料庫
問題 有一套系統，卻克隆 ( Clone )了很多個網站，每個站都是獨立的資料庫，因此部署資料庫時，過去需要人工去每一部部署腳本，此篇則要透過 Powershell 將一個週期開發的 sql 腳本，部署到多個網站的資料庫中。 作法 透過powershell 讀取資料庫設定檔( site.json ) 及 部署的資料庫腳本清單設定的 ( sql.json ) ，...
透過 Powershell 部署 SQL 腳本到多個網站的資料庫
問題 有一套系統，卻克隆 ( Clone )了很多個網站，每個站都是獨立的資料庫，因此部署資料庫時，過去需要人工去每一部部署腳本，此篇則要透過 Powershell 將一個週期開發的 sql 腳本，部署到多個網站的資料庫中。 作法 透過powershell 讀取資料庫設定檔( site.json ) 及 部署的資料庫腳本清單設定的 ( sql.json ) ，...
透過 Powershell 部署 SQL 腳本到多個網站的資料庫
問題 有一套系統，卻克隆 ( Clone )了很多個網站，每個站都是獨立的資料庫，因此部署資料庫時，過去需要人工去每一部部署腳本，此篇則要透過 Powershell 將一個週期開發的 sql 腳本，部署到多個網站的資料庫中。 作法 透過powershell 讀取資料庫設定檔( site.json ) 及 部署的資料庫腳本清單設定的 ( sql.json ) ，...
透過 Powershell 部署 SQL 腳本到多個網站的資料庫
問題 有一套系統，卻克隆 ( Clone )了很多個網站，每個站都是獨立的資料庫，因此部署資料庫時，過去需要人工去每一部部署腳本，此篇則要透過 Powershell 將一個週期開發的 sql 腳本，部署到多個網站的資料庫中。 作法 透過powershell 讀取資料庫設定檔( site.json ) 及 部署的資料庫腳本清單設定的 ( sql.json ) ，...
透過 Powershell 部署 SQL 腳本到多個網站的資料庫
問題 有一套系統，卻克隆 ( Clone )了很多個網站，每個站都是獨立的資料庫，因此部署資料庫時，過去需要人工去每一部部署腳本，此篇則要透過 Powershell 將一個週期開發的 sql 腳本，部署到多個網站的資料庫中。 作法 透過powershell 讀取資料庫設定檔( site.json ) 及 部署的資料庫腳本清單設定的 ( sql.json ) ，...
Net core 容器化部署
首先開啟 Visual Studio ，對要佈署的專案右鍵 > 加入 > 容器化支援(此時就會在 該專案檔目錄產生一個 DockerFile) 建置階段需要引入 node js ，否則會報錯 在 FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build ，後面加入以下程式碼 # Ins...
Net core 容器化部署
首先開啟 Visual Studio ，對要佈署的專案右鍵 > 加入 > 容器化支援(此時就會在 該專案檔目錄產生一個 DockerFile) 建置階段需要引入 node js ，否則會報錯 在 FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build ，後面加入以下程式碼 # Ins...
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔 解決問題 隨著企業系統架構越來越複雜，為解決開發過程中，不同角色或應用程式，需要維護同一份語系翻譯檔。 實作原理 透過 Google sheet 機制就可以達到多人同時維護一份翻譯檔，並透過匯出 csv 檔的功能，將檔案下載到本地，透過 Powershell...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...
捲起袖子動手做 SEO Part's 3 - 來自 Google 的動態渲染工具 Rendertron for SEO
捲起袖子動手做 SEO Part’s 3 - 來自 Google 的動態渲染工具 Rendertron for SEO 先前提到 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Jav...
捲起袖子動手做 SEO Part's 2 - 優化動態網站對 Google 搜尋引擎的爬蟲友善度
SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度 動態網站對 SEO 的影響 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax ...
捲起袖子動手做 SEO Part's 1 - 開始優化你的網站的 SEO
SEO - 捲起袖子動手做 - 優化網站的 SEO - Get Started Part’s 1 為何要做 SEO 提高網站在互聯網的能見度，優化網站對搜索引擎友善度，籍此提昇搜索時的排名，達到不花錢增加網站(自然)流量，讓潛在用戶在搜索時關鍵字時，更能找到我們的網站。 SEO 原理 索引擎網站背後擁有著是非常龐大的資料庫，裡面存著巨量的關鍵字，而每個關鍵字存...
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔 解決問題 隨著企業系統架構越來越複雜，為解決開發過程中，不同角色或應用程式，需要維護同一份語系翻譯檔。 實作原理 透過 Google sheet 機制就可以達到多人同時維護一份翻譯檔，並透過匯出 csv 檔的功能，將檔案下載到本地，透過 Powershell...
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔
透過 PowerShell 下載 google sheet，產生 i18n 多語系翻譯 Json 檔 解決問題 隨著企業系統架構越來越複雜，為解決開發過程中，不同角色或應用程式，需要維護同一份語系翻譯檔。 實作原理 透過 Google sheet 機制就可以達到多人同時維護一份翻譯檔，並透過匯出 csv 檔的功能，將檔案下載到本地，透過 Powershell...
直播網站實戰開發筆記 - 使用阿里雲
直播網站實戰開發筆記 - 使用阿里雲 談到直播就必需先了解推流與拉流 推流 - 其實就是將現場的影片串流傳到 Midia Server 的一個過程 拉流 - 拉流是指伺服器已有直播內容，根據協議類型（如RTMP、RTP、RTSP、HTTP等），與伺服器建立連接並接收數據，進行拉取的過程。 建立阿里雲推流和拉流的伺服器 登入阿里云後台 >...
直播網站實戰開發筆記 Part's 2 - 打造自己的直播播放器
用 Vue 動手打造個人專屬的前端直播播放器的採用( hls.js ) 前言 上一篇，談到用阿里雲來搭建直播伺服器，這篇我要來談前端直播放器，前端直播技術，最常見的有 HLS 、DASH 這兩種直播協定，本篇就主要會以這兩個進行探究 科技公司的分庭抗禮 早期的直播協議會讓人想到 Flash(FLV)協議，蘋果公司為了代替 Flash 與 RTMP與，推出了 H...
直播網站實戰開發筆記 - 使用阿里雲
直播網站實戰開發筆記 - 使用阿里雲 談到直播就必需先了解推流與拉流 推流 - 其實就是將現場的影片串流傳到 Midia Server 的一個過程 拉流 - 拉流是指伺服器已有直播內容，根據協議類型（如RTMP、RTP、RTSP、HTTP等），與伺服器建立連接並接收數據，進行拉取的過程。 建立阿里雲推流和拉流的伺服器 登入阿里云後台 >...
透過 PowerShell 製作 JPG/ PNG 轉 webp 小工具 (使用 Google webp converter lib)
Webp 起緣 WebP圖像格式 起緣，由Google開發，它的主要優點是：使您獲得出色的清晰度而又不會增加網路傳輸的負擔。 這對於頁面加載速度至關重要。 為何要用 Webp 大多數網站，圖片佔網路加載的 60％ 以上，然而 webp 格式的的出現，可以將 JPEG 圖像尺寸減小35％，將PNG圖像尺寸減小50％，並保留了其畫質和透明度，採用 webp 圖片...
透過 PowerShell 製作 JPG/ PNG 轉 webp 小工具 (使用 Google webp converter lib)
Webp 起緣 WebP圖像格式 起緣，由Google開發，它的主要優點是：使您獲得出色的清晰度而又不會增加網路傳輸的負擔。 這對於頁面加載速度至關重要。 為何要用 Webp 大多數網站，圖片佔網路加載的 60％ 以上，然而 webp 格式的的出現，可以將 JPEG 圖像尺寸減小35％，將PNG圖像尺寸減小50％，並保留了其畫質和透明度，採用 webp 圖片...
驗證 SSR 或 Pre render SEO 是否正常運行的幾種方式
前言 最近發現有些網站有做 SEO，但都沒正常運行，所以就順手寫了一篇筆記，記錄如何驗證 SEO 功能面有辦法被 Google 爬蟲所收納。 方法一、最即時的方式，就是模擬爬蟲訪問網站 到 Chrome 市集安裝 user-agent-switch 套件 參考 Google Doc，得知 Google搜尋引擎的爬蟲，是採用什麼 useragent 來收錄你的...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
捲起袖子動手做 SEO Part's 3 - 來自 Google 的動態渲染工具 Rendertron for SEO
捲起袖子動手做 SEO Part’s 3 - 來自 Google 的動態渲染工具 Rendertron for SEO 先前提到 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Jav...
捲起袖子動手做 SEO Part's 2 - 優化動態網站對 Google 搜尋引擎的爬蟲友善度
SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度 動態網站對 SEO 的影響 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax ...
捲起袖子動手做 SEO Part's 1 - 開始優化你的網站的 SEO
SEO - 捲起袖子動手做 - 優化網站的 SEO - Get Started Part’s 1 為何要做 SEO 提高網站在互聯網的能見度，優化網站對搜索引擎友善度，籍此提昇搜索時的排名，達到不花錢增加網站(自然)流量，讓潛在用戶在搜索時關鍵字時，更能找到我們的網站。 SEO 原理 索引擎網站背後擁有著是非常龐大的資料庫，裡面存著巨量的關鍵字，而每個關鍵字存...
Vue Cli 專案透過 chinese-language-loader 解決繁體自動轉換簡體問題
Vue Cli 透過 chinese-language-loader 解決忘了繁體轉換簡體問題 問題 中國的用戶，很在意看到繁體，而有時候在開發前端頁面時，有時候會忽略了做繁簡體的文字轉換，直接寫進了 html 或 js 中。 套件評估 該套件雖，在 synk 分數不高，可能和使用量有關，但我看過原始碼，運作原理，是透過繁簡對照達成繁簡互換，覺得沒太大的問...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
修正 Visaul Studio Code 的 Stylelint auto fix 功能失效 & 安裝舊版 vscode 插件
問題 在某次 visual Studio code 插件自動昇級後，發現 stylelint 的自動修復樣式功能壞了。 解決方法 關閉 Vscode 自動更新 及 安裝舊版 stylelint 插件就能修復了。 什麼是StyleLint 參考先前的文件 安裝舊版 vscode 插件 1. 下載舊版插件 0.87.6 (搭配 stylelint”: “13...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
VUE 框架導入 SVG & SVG Sprite 實戰筆記
為什麼要導入 SVG & SVG Sprite 瀏覽器因圖片縮放比例，圖片會呈現模糊失針問題，產生馬賽克。 一堆小 ICON 載入，每個很小的圖片，卻分開去請求，造成伺服器的壓力，同時減少 request 數量，優關網站存取速度。 了解什麼是 SVG 透過文字編輯器打開 SVG 圖檔 ，我們會發文件裡裡存放圖片的路徑顏色，結構很像Html，...
Vue 全域 / 非全域 Loading 的等待特效 ( 支援多個併發請求 )
Vue 全域 / 非全域 Loading 的等待特效 ( 支援多個併發請求 ) 解決問題 在前端工程中，常常會透過 ajax 向後端做非同步資料交換，但api 可能會因各種因素延遲回應，為提昇更好的使用者體驗，通常都會做一個過場的動畫，讓使用者得知正在加載資料。 而大多數套件設計的相當簡易，背後可能只是一個 boolean 值，在多個併發的非同步的ajax ...
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤 前言 您是否也有在開發 Vue 的 CSS 或 SCSS 檔案時，是不是也有這個困擾，常常為了加了外層一個 Class ，又得手動重新調整縮排，團隊開發時，每個成員的撰寫風格都不一樣，Stylelint 則就是為了解決上述的問題而存在。 什麼是StyleLin...
Vue(Non Type Script) 搭配 VsCode 配置，像 Typescript 般，在專案開發時擁有自動智慧提示
Vue(Non Type Script) 搭配 VsCode 配置，像 Typescript 般，在專案開發時擁有自動智慧提示 問題 使用過 Type script 開發後，都會愛上有自動提示的好處，但 Vue 有些沒有 Type script 舊專案，預設就沒辦法在 VS CODE 中使用自動提示的功能，但其實透過vs code 配置並搭配 Vetur 的套件...
Vue(Non Type Script) 搭配 VsCode 配置，像 Typescript 般，在專案開發時擁有自動智慧提示
Vue(Non Type Script) 搭配 VsCode 配置，像 Typescript 般，在專案開發時擁有自動智慧提示 問題 使用過 Type script 開發後，都會愛上有自動提示的好處，但 Vue 有些沒有 Type script 舊專案，預設就沒辦法在 VS CODE 中使用自動提示的功能，但其實透過vs code 配置並搭配 Vetur 的套件...
捲起袖子動手做 SEO Part's 2 - 優化動態網站對 Google 搜尋引擎的爬蟲友善度
SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度 動態網站對 SEO 的影響 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax ...
捲起袖子動手做 SEO Part's 2 - 優化動態網站對 Google 搜尋引擎的爬蟲友善度
SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度 動態網站對 SEO 的影響 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax ...
捲起袖子動手做 SEO Part's 3 - 來自 Google 的動態渲染工具 Rendertron for SEO
捲起袖子動手做 SEO Part’s 3 - 來自 Google 的動態渲染工具 Rendertron for SEO 先前提到 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Jav...
捲起袖子動手做 SEO Part's 2 - 優化動態網站對 Google 搜尋引擎的爬蟲友善度
SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度 動態網站對 SEO 的影響 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax ...
捲起袖子動手做 SEO Part's 3 - 來自 Google 的動態渲染工具 Rendertron for SEO
捲起袖子動手做 SEO Part’s 3 - 來自 Google 的動態渲染工具 Rendertron for SEO 先前提到 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Jav...
捲起袖子動手做 SEO Part's 2 - 優化動態網站對 Google 搜尋引擎的爬蟲友善度
SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度 動態網站對 SEO 的影響 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax ...
捲起袖子動手做 SEO Part's 2 - 優化動態網站對 Google 搜尋引擎的爬蟲友善度
SEO Part 2 優化動態網站對 Google 搜尋引擎的爬蟲友善度 動態網站對 SEO 的影響 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Javascript 及 Ajax ...
修正 Visaul Studio Code 的 Stylelint auto fix 功能失效 & 安裝舊版 vscode 插件
問題 在某次 visual Studio code 插件自動昇級後，發現 stylelint 的自動修復樣式功能壞了。 解決方法 關閉 Vscode 自動更新 及 安裝舊版 stylelint 插件就能修復了。 什麼是StyleLint 參考先前的文件 安裝舊版 vscode 插件 1. 下載舊版插件 0.87.6 (搭配 stylelint”: “13...
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤 前言 您是否也有在開發 Vue 的 CSS 或 SCSS 檔案時，是不是也有這個困擾，常常為了加了外層一個 Class ，又得手動重新調整縮排，團隊開發時，每個成員的撰寫風格都不一樣，Stylelint 則就是為了解決上述的問題而存在。 什麼是StyleLin...
修正 Visaul Studio Code 的 Stylelint auto fix 功能失效 & 安裝舊版 vscode 插件
問題 在某次 visual Studio code 插件自動昇級後，發現 stylelint 的自動修復樣式功能壞了。 解決方法 關閉 Vscode 自動更新 及 安裝舊版 stylelint 插件就能修復了。 什麼是StyleLint 參考先前的文件 安裝舊版 vscode 插件 1. 下載舊版插件 0.87.6 (搭配 stylelint”: “13...
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤 前言 您是否也有在開發 Vue 的 CSS 或 SCSS 檔案時，是不是也有這個困擾，常常為了加了外層一個 Class ，又得手動重新調整縮排，團隊開發時，每個成員的撰寫風格都不一樣，Stylelint 則就是為了解決上述的問題而存在。 什麼是StyleLin...
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤
Stylelint - 提昇讓你的專案中的 CSS 樣式，擁有像 Eslint 的自動排版及檢查錯誤 前言 您是否也有在開發 Vue 的 CSS 或 SCSS 檔案時，是不是也有這個困擾，常常為了加了外層一個 Class ，又得手動重新調整縮排，團隊開發時，每個成員的撰寫風格都不一樣，Stylelint 則就是為了解決上述的問題而存在。 什麼是StyleLin...
Vue 全域 / 非全域 Loading 的等待特效 ( 支援多個併發請求 )
Vue 全域 / 非全域 Loading 的等待特效 ( 支援多個併發請求 ) 解決問題 在前端工程中，常常會透過 ajax 向後端做非同步資料交換，但api 可能會因各種因素延遲回應，為提昇更好的使用者體驗，通常都會做一個過場的動畫，讓使用者得知正在加載資料。 而大多數套件設計的相當簡易，背後可能只是一個 boolean 值，在多個併發的非同步的ajax ...
Vue 透過 include 及 Vuex 解決 keepAlive 難解的記憶體釋放問題
問題 在 Vue 生態中，切換元件時，不希望元件重新渲染，並且記住元件原本的狀態及不希望重新呼叫 api 時，基於上述理由，我們會使用 keepAlive 來保留狀態，但 keepAlive 雙面刃一樣，除了你重新整理頁面前，時間越久，記憶體可能不斷的成長，最後導致記憶體洩漏 ( memory leak )。 舉一個常見使用者體驗的例子，在分頁清單元件，第 2...
Vue 全域 / 非全域 Loading 的等待特效 ( 支援多個併發請求 )
Vue 全域 / 非全域 Loading 的等待特效 ( 支援多個併發請求 ) 解決問題 在前端工程中，常常會透過 ajax 向後端做非同步資料交換，但api 可能會因各種因素延遲回應，為提昇更好的使用者體驗，通常都會做一個過場的動畫，讓使用者得知正在加載資料。 而大多數套件設計的相當簡易，背後可能只是一個 boolean 值，在多個併發的非同步的ajax ...
解決前端渲染大量資料渲染效能問題 Part's 2- 虛擬捲軸 && 分段渲染
定義問題 先前有對大資料渲染進行調察研究，得知瞬間大資料的渲染，會造成瀏覽器卡頓不回應，並得出可以透過分時渲染、捲動式渲染、虛擬列表，解決高併發渲染的問題。 而籃足球比賽比分列表，一遇假日就會有1000~2000 筆的比賽需要同時顯示，且依使用者需求，不能分頁顯示。 虛擬捲軸 VS 分段渲染 虛擬捲軸概念 設計概念，一開始先傳入高度，並將每一筆 item...
解決前端渲染大量資料渲染效能問題
問題 在某些情況下，有些頁面需要顯示大量的資料 ，但因為資料量大太，渲染及執行過程中，瞬間造成瀏覽器卡頓或不回應。 主因 從上面的例子，經過反覆調查研究得知 頁面的卡頓是由於同時渲染大量DOM所引起的。 過多的 DOM 同時出現在一個頁面，電腦或手機效能不好時，也會卡頓。 因為我們前端框架採用 Vue ，渲染越多的元件，則會產生越多的 Virtu...
VUE 框架導入 SVG & SVG Sprite 實戰筆記
為什麼要導入 SVG & SVG Sprite 瀏覽器因圖片縮放比例，圖片會呈現模糊失針問題，產生馬賽克。 一堆小 ICON 載入，每個很小的圖片，卻分開去請求，造成伺服器的壓力，同時減少 request 數量，優關網站存取速度。 了解什麼是 SVG 透過文字編輯器打開 SVG 圖檔 ，我們會發文件裡裡存放圖片的路徑顏色，結構很像Html，...
VUE 框架導入 SVG & SVG Sprite 實戰筆記
為什麼要導入 SVG & SVG Sprite 瀏覽器因圖片縮放比例，圖片會呈現模糊失針問題，產生馬賽克。 一堆小 ICON 載入，每個很小的圖片，卻分開去請求，造成伺服器的壓力，同時減少 request 數量，優關網站存取速度。 了解什麼是 SVG 透過文字編輯器打開 SVG 圖檔 ，我們會發文件裡裡存放圖片的路徑顏色，結構很像Html，...
網站網路封包錄製筆記 - fiddler
解決問題 為了查出網站伺服器發出的請求是不是正確，我們通常會用抓包軟體，看對方傳了什麼或是站台做了什麼額外的請求，久久使用一次，常常忘了怎麼設定，想說寫篇筆記幫助回憶。 安裝步驟 下載並安裝 fiddler-classic 免費版下載連結 Tool > Options 切到 Https tab > Actions 安裝憑證 > ok ...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
網站網路封包錄製筆記 - fiddler
解決問題 為了查出網站伺服器發出的請求是不是正確，我們通常會用抓包軟體，看對方傳了什麼或是站台做了什麼額外的請求，久久使用一次，常常忘了怎麼設定，想說寫篇筆記幫助回憶。 安裝步驟 下載並安裝 fiddler-classic 免費版下載連結 Tool > Options 切到 Https tab > Actions 安裝憑證 > ok ...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
Node Js / Vue cli / Webpack plugin Vscode 除錯筆記
Node Js / Vue cli / Webpack plugin Vscode除錯筆記 問題 越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。 一、對 node js 偵錯 1. node 在欲執行 的 js 加上 –inspect 參...
將你的網站，配置 Could Flare 國際級 CDN
將你的網站，配置 Could Flare 國際級 CDN 為什麼要使用 Could Flare CDN Could Flare 擁有著覆蓋全球的線路，通過和當地 ISP 運營商合作，部署IDC資源，在全球骨幹節點商，合理部署CDN邊緣分發存儲節點，擁有較好的帶寬資源，平衡源站流量。 分攤網站的流量及伺服器 IO ，讓靜態檔案由 Could Flare ...
驗證 SSR 或 Pre render SEO 是否正常運行的幾種方式
前言 最近發現有些網站有做 SEO，但都沒正常運行，所以就順手寫了一篇筆記，記錄如何驗證 SEO 功能面有辦法被 Google 爬蟲所收納。 方法一、最即時的方式，就是模擬爬蟲訪問網站 到 Chrome 市集安裝 user-agent-switch 套件 參考 Google Doc，得知 Google搜尋引擎的爬蟲，是採用什麼 useragent 來收錄你的...
將你的網站，配置 Could Flare 國際級 CDN
將你的網站，配置 Could Flare 國際級 CDN 為什麼要使用 Could Flare CDN Could Flare 擁有著覆蓋全球的線路，通過和當地 ISP 運營商合作，部署IDC資源，在全球骨幹節點商，合理部署CDN邊緣分發存儲節點，擁有較好的帶寬資源，平衡源站流量。 分攤網站的流量及伺服器 IO ，讓靜態檔案由 Could Flare ...
將你的網站，配置 Could Flare 國際級 CDN
將你的網站，配置 Could Flare 國際級 CDN 為什麼要使用 Could Flare CDN Could Flare 擁有著覆蓋全球的線路，通過和當地 ISP 運營商合作，部署IDC資源，在全球骨幹節點商，合理部署CDN邊緣分發存儲節點，擁有較好的帶寬資源，平衡源站流量。 分攤網站的流量及伺服器 IO ，讓靜態檔案由 Could Flare ...
修正 Visaul Studio Code 的 Stylelint auto fix 功能失效 & 安裝舊版 vscode 插件
問題 在某次 visual Studio code 插件自動昇級後，發現 stylelint 的自動修復樣式功能壞了。 解決方法 關閉 Vscode 自動更新 及 安裝舊版 stylelint 插件就能修復了。 什麼是StyleLint 參考先前的文件 安裝舊版 vscode 插件 1. 下載舊版插件 0.87.6 (搭配 stylelint”: “13...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記 問題起緣 許多網站都會串接第三方的JS，但在某次串接完 Facebook Chat SDK 後，發現首頁的載入變得非常的慢，並決定著手優化。 身為軟體開發人員的我，又打開了開發者工具，做了對比。 從 Network Tab 中，我們可以得知來自 fbcdn 的...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
開源易用的網站監控工具 - uptime-kuma ，並支援多種方式發送通知
uptime-kuma 監控應用工具 uptime-kuma 是 node js 及 vue 所開發的監控網站應用程式，是一個類似於 “Uptime Robot” 的管網站監控工具。其具有下功能： 優點 UI操作簡單易用 可以於偵測 HTTP(s)/TCP/Ping/DNS 支援主流的聊天系統通知 Telegram、Discord、Gotif...
捲起袖子動手做 SEO Part's 3 - 來自 Google 的動態渲染工具 Rendertron for SEO
捲起袖子動手做 SEO Part’s 3 - 來自 Google 的動態渲染工具 Rendertron for SEO 先前提到 現今的動態網站，廣泛的應用到 Javascript 及 Ajax 相關技術，但這些技術對 Google 搜尋引擎的爬蟲並不是這麼的友善，從Google 官方文件指南得知，Google 爬蟲是非常了解 HTML 結構，但在爬取 Jav...
擴充 inobounce.js 套件，支援橫向滑動，處理 iOS 橡皮筋行為
一、橡皮筋行為造成的問題 在開發 Mobile Web 時，經常碰到的 iOS 系統上的橡皮筋效果，這個效果搭配上拉刷新，下拉取得資料時，使用者體驗還是挺不錯的，但是實際上，每一個捲軸都擁有這效果，可能會額外造成滑動卡死及不流暢。 捲軸捲最上方，會有彈簧的行為 捲動到最下方，會有彈簧的行為 在多個侷部捲動，捲動溢出時會捲動不流暢，甚置造成捲動...
擴充 inobounce.js 套件，支援橫向滑動，處理 iOS 橡皮筋行為
一、橡皮筋行為造成的問題 在開發 Mobile Web 時，經常碰到的 iOS 系統上的橡皮筋效果，這個效果搭配上拉刷新，下拉取得資料時，使用者體驗還是挺不錯的，但是實際上，每一個捲軸都擁有這效果，可能會額外造成滑動卡死及不流暢。 捲軸捲最上方，會有彈簧的行為 捲動到最下方，會有彈簧的行為 在多個侷部捲動，捲動溢出時會捲動不流暢，甚置造成捲動...
擴充 inobounce.js 套件，支援橫向滑動，處理 iOS 橡皮筋行為
一、橡皮筋行為造成的問題 在開發 Mobile Web 時，經常碰到的 iOS 系統上的橡皮筋效果，這個效果搭配上拉刷新，下拉取得資料時，使用者體驗還是挺不錯的，但是實際上，每一個捲軸都擁有這效果，可能會額外造成滑動卡死及不流暢。 捲軸捲最上方，會有彈簧的行為 捲動到最下方，會有彈簧的行為 在多個侷部捲動，捲動溢出時會捲動不流暢，甚置造成捲動...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用 前言 前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字 前言 公司想製作猴子上樹的小遊戲，起因是原本專案有用到 Lottie 動畫，覺得動畫流暢度及體驗感很好，就深入研究了一下，如何用 Adobe After Effect 製作 Lottie 小遊戲動畫，並與 Vue 前端框架做互...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用 前言 前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字 前言 公司想製作猴子上樹的小遊戲，起因是原本專案有用到 Lottie 動畫，覺得動畫流暢度及體驗感很好，就深入研究了一下，如何用 Adobe After Effect 製作 Lottie 小遊戲動畫，並與 Vue 前端框架做互...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用 前言 前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字 前言 公司想製作猴子上樹的小遊戲，起因是原本專案有用到 Lottie 動畫，覺得動畫流暢度及體驗感很好，就深入研究了一下，如何用 Adobe After Effect 製作 Lottie 小遊戲動畫，並與 Vue 前端框架做互...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用 前言 前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字 前言 公司想製作猴子上樹的小遊戲，起因是原本專案有用到 Lottie 動畫，覺得動畫流暢度及體驗感很好，就深入研究了一下，如何用 Adobe After Effect 製作 Lottie 小遊戲動畫，並與 Vue 前端框架做互...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用 前言 前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字 前言 公司想製作猴子上樹的小遊戲，起因是原本專案有用到 Lottie 動畫，覺得動畫流暢度及體驗感很好，就深入研究了一下，如何用 Adobe After Effect 製作 Lottie 小遊戲動畫，並與 Vue 前端框架做互...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用 前言 前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字 前言 公司想製作猴子上樹的小遊戲，起因是原本專案有用到 Lottie 動畫，覺得動畫流暢度及體驗感很好，就深入研究了一下，如何用 Adobe After Effect 製作 Lottie 小遊戲動畫，並與 Vue 前端框架做互...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用 前言 前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫...
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字
透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 1 - 動態替換文字 前言 公司想製作猴子上樹的小遊戲，起因是原本專案有用到 Lottie 動畫，覺得動畫流暢度及體驗感很好，就深入研究了一下，如何用 Adobe After Effect 製作 Lottie 小遊戲動畫，並與 Vue 前端框架做互...
Vue Cli 專案透過 chinese-language-loader 解決繁體自動轉換簡體問題
Vue Cli 透過 chinese-language-loader 解決忘了繁體轉換簡體問題 問題 中國的用戶，很在意看到繁體，而有時候在開發前端頁面時，有時候會忽略了做繁簡體的文字轉換，直接寫進了 html 或 js 中。 套件評估 該套件雖，在 synk 分數不高，可能和使用量有關，但我看過原始碼，運作原理，是透過繁簡對照達成繁簡互換，覺得沒太大的問...
Vue Cli 專案透過 chinese-language-loader 解決繁體自動轉換簡體問題
Vue Cli 透過 chinese-language-loader 解決忘了繁體轉換簡體問題 問題 中國的用戶，很在意看到繁體，而有時候在開發前端頁面時，有時候會忽略了做繁簡體的文字轉換，直接寫進了 html 或 js 中。 套件評估 該套件雖，在 synk 分數不高，可能和使用量有關，但我看過原始碼，運作原理，是透過繁簡對照達成繁簡互換，覺得沒太大的問...
Vue Cli 專案透過 chinese-language-loader 解決繁體自動轉換簡體問題
Vue Cli 透過 chinese-language-loader 解決忘了繁體轉換簡體問題 問題 中國的用戶，很在意看到繁體，而有時候在開發前端頁面時，有時候會忽略了做繁簡體的文字轉換，直接寫進了 html 或 js 中。 套件評估 該套件雖，在 synk 分數不高，可能和使用量有關，但我看過原始碼，運作原理，是透過繁簡對照達成繁簡互換，覺得沒太大的問...
Vue Cli 專案透過 chinese-language-loader 解決繁體自動轉換簡體問題
Vue Cli 透過 chinese-language-loader 解決忘了繁體轉換簡體問題 問題 中國的用戶，很在意看到繁體，而有時候在開發前端頁面時，有時候會忽略了做繁簡體的文字轉換，直接寫進了 html 或 js 中。 套件評估 該套件雖，在 synk 分數不高，可能和使用量有關，但我看過原始碼，運作原理，是透過繁簡對照達成繁簡互換，覺得沒太大的問...
Vue Cli 專案透過 chinese-language-loader 解決繁體自動轉換簡體問題
Vue Cli 透過 chinese-language-loader 解決忘了繁體轉換簡體問題 問題 中國的用戶，很在意看到繁體，而有時候在開發前端頁面時，有時候會忽略了做繁簡體的文字轉換，直接寫進了 html 或 js 中。 套件評估 該套件雖，在 synk 分數不高，可能和使用量有關，但我看過原始碼，運作原理，是透過繁簡對照達成繁簡互換，覺得沒太大的問...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例
Qnap Docker Station 架設 輕量級日誌儲存、查詢、分析 日誌服務(Seq log server) - 本篇以 Net Core + Nlog 為例 問題 隨著網站及分散架構服務越來越多，當我們在排查問題時，若日誌分散在各自的伺服器及容器中，變得不好追蹤，更不容易查出關鍵問題，因此導入日誌聚合服務就很重要。 評估 常見日誌聚合的服務有 ELK...
Windows Certbot 自動申請 Let’s Encrypt 免費的 SSL憑證筆記
Windows Certbot 自動申請 Let’s Encrypt SSL憑證筆記 解決問題 let’s encrypt 是一套老牌，免費的 SSL 憑證申請服務，但每一次只能申請三個月，所以每三個月要手動在申請一次憑證，這樣的操作很麻煩，透過 certbot 則可以透過指令化及自動排程去申請 let’s encrypt 的 SSL 免費憑證。 申請憑證 ...
Windows Certbot 自動申請 Let’s Encrypt 免費的 SSL憑證筆記
Windows Certbot 自動申請 Let’s Encrypt SSL憑證筆記 解決問題 let’s encrypt 是一套老牌，免費的 SSL 憑證申請服務，但每一次只能申請三個月，所以每三個月要手動在申請一次憑證，這樣的操作很麻煩，透過 certbot 則可以透過指令化及自動排程去申請 let’s encrypt 的 SSL 免費憑證。 申請憑證 ...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station
Powershell 一鍵遠端部署容器應用 - NET CORE 建置部署至Qnap Docker Container Station 解決問題 過去在 PC 端開發容器應用程式時，要將容器應用部署到遠端 Nas Docker 主機時，有太多手動繁瑣作業，因此我用 Powershell 寫了一個自動建置部署的腳本工具。 開發環境 Windows 10 X6...
申請 Line messaging api for uptime-kuma 服務監控異常通知
申請 Line messaging api for uptime-kuma 服務監控異常通知 解決問題 先前有撰寫一篇透過uptime-kuma 來監控站台服務是不是正常運作的文章，後來發現他有支援 line message 通知，此篇順便將申請的過程記錄一下。 那麼，如果要在 uptime-kum 使用 line 通知，我們需要申請，line messag...
申請 Line messaging api for uptime-kuma 服務監控異常通知
申請 Line messaging api for uptime-kuma 服務監控異常通知 解決問題 先前有撰寫一篇透過uptime-kuma 來監控站台服務是不是正常運作的文章，後來發現他有支援 line message 通知，此篇順便將申請的過程記錄一下。 那麼，如果要在 uptime-kum 使用 line 通知，我們需要申請，line messag...
申請 Line messaging api for uptime-kuma 服務監控異常通知
申請 Line messaging api for uptime-kuma 服務監控異常通知 解決問題 先前有撰寫一篇透過uptime-kuma 來監控站台服務是不是正常運作的文章，後來發現他有支援 line message 通知，此篇順便將申請的過程記錄一下。 那麼，如果要在 uptime-kum 使用 line 通知，我們需要申請，line messag...
申請 Line messaging api for uptime-kuma 服務監控異常通知
申請 Line messaging api for uptime-kuma 服務監控異常通知 解決問題 先前有撰寫一篇透過uptime-kuma 來監控站台服務是不是正常運作的文章，後來發現他有支援 line message 通知，此篇順便將申請的過程記錄一下。 那麼，如果要在 uptime-kum 使用 line 通知，我們需要申請，line messag...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
申請 Line messaging api for uptime-kuma 服務監控異常通知
申請 Line messaging api for uptime-kuma 服務監控異常通知 解決問題 先前有撰寫一篇透過uptime-kuma 來監控站台服務是不是正常運作的文章，後來發現他有支援 line message 通知，此篇順便將申請的過程記錄一下。 那麼，如果要在 uptime-kum 使用 line 通知，我們需要申請，line messag...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關 前言 有用過負載平衡器，應該多多少少都有聽過業界知名的 F5 Networks 公司的 F5 的負載平衡器，但一台要價將近 20~30萬，對於中小型企業來說，這是不小的費用，如果你想導入負載平衡器，但預算又沒這麼寬裕，可以考慮微軟的開源 YARP 來實作軟體負載平衡。 軟體負載平衡優點有 ...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關 前言 有用過負載平衡器，應該多多少少都有聽過業界知名的 F5 Networks 公司的 F5 的負載平衡器，但一台要價將近 20~30萬，對於中小型企業來說，這是不小的費用，如果你想導入負載平衡器，但預算又沒這麼寬裕，可以考慮微軟的開源 YARP 來實作軟體負載平衡。 軟體負載平衡優點有 ...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關
用微軟的開源的 YARP 反向代理打造專屬的負載平衡軟體及多功能網關 前言 有用過負載平衡器，應該多多少少都有聽過業界知名的 F5 Networks 公司的 F5 的負載平衡器，但一台要價將近 20~30萬，對於中小型企業來說，這是不小的費用，如果你想導入負載平衡器，但預算又沒這麼寬裕，可以考慮微軟的開源 YARP 來實作軟體負載平衡。 軟體負載平衡優點有 ...
DDOS 防禦筆記
解決問題 在網站上線後，多多少少都會遇到 DDOS 攻擊，整理了一些常見防範 DDOS 的方式，可以在 PROXY SERVER 或 API Gateway 實作，以下這些防範 DDOS 的邏輯。 限區域 依據 請求 IP 轉 Region ，只允許特定國家訪問。 限流 當有相同 IP 請求一分鐘超過 150 次，只要在請求就延長時間 請求加密 請求時在 ...
DDOS 防禦筆記
解決問題 在網站上線後，多多少少都會遇到 DDOS 攻擊，整理了一些常見防範 DDOS 的方式，可以在 PROXY SERVER 或 API Gateway 實作，以下這些防範 DDOS 的邏輯。 限區域 依據 請求 IP 轉 Region ，只允許特定國家訪問。 限流 當有相同 IP 請求一分鐘超過 150 次，只要在請求就延長時間 請求加密 請求時在 ...
DDOS 防禦筆記
解決問題 在網站上線後，多多少少都會遇到 DDOS 攻擊，整理了一些常見防範 DDOS 的方式，可以在 PROXY SERVER 或 API Gateway 實作，以下這些防範 DDOS 的邏輯。 限區域 依據 請求 IP 轉 Region ，只允許特定國家訪問。 限流 當有相同 IP 請求一分鐘超過 150 次，只要在請求就延長時間 請求加密 請求時在 ...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
Net core 應用程式，透過 Frpc 內網穿透時，取得用戶端真實 IP
問題 大型網站架構，通常會使用負載平衡或反向代理，通常都是 透過 X-Forwarded-For 取得用戶端 Ip，但因為 Frpc 的 https模式只能透過 proxy tocol 協定才能取得真實 IP，但是微軟的網頁伺服器，內建不支援這個協定，因此需要透過 nginx 轉發才能獲得真實用戶端的 IP。 何謂 Proxy protocol 當 Prox...
Qnap Docker Station 建立 nginx-certbot 容器應用，幫您自動延展 letsencrypt 免費 https 憑證
解決問題 先前有透過 windows certbot 申請免費的 https 憑證，但每三個月都要手動延展一次，很不方便，但透過 nginx-certbot 容器應用，可以自動延展 https 憑證。 開發環境 採用 QNAP TS-253D 的 Container Station 安裝方式 1. 建立 > 搜尋 採用docker hub 上...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
Qnap Docker Station 建立 nginx-certbot 容器應用，幫您自動延展 letsencrypt 免費 https 憑證
解決問題 先前有透過 windows certbot 申請免費的 https 憑證，但每三個月都要手動延展一次，很不方便，但透過 nginx-certbot 容器應用，可以自動延展 https 憑證。 開發環境 採用 QNAP TS-253D 的 Container Station 安裝方式 1. 建立 > 搜尋 採用docker hub 上...
Qnap Docker Station 建立 nginx-certbot 容器應用，幫您自動延展 letsencrypt 免費 https 憑證
解決問題 先前有透過 windows certbot 申請免費的 https 憑證，但每三個月都要手動延展一次，很不方便，但透過 nginx-certbot 容器應用，可以自動延展 https 憑證。 開發環境 採用 QNAP TS-253D 的 Container Station 安裝方式 1. 建立 > 搜尋 採用docker hub 上...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
樹莓派安裝 fprc 內網穿透用戶端 - Linux 筆記
解決問題 希望只要外部網路有通，不須做任何的防火牆設定，隨時隨地即可遠端連線到我的樹莓派主機，類似於TeamViewer 的功能。 開發環境 樹莓派 4B 8G RASPBERRY PI OS 安裝 vim 編輯器 sudo apt-get install vim 下載 frpc wget https://github.com/fatedi...
前端小遊戲，記憶體洩漏調效筆記
問題 在開發一款網頁前端動畫小遊戲時，因為有自動遊玩功能，發現掛了一晚上，就會發現記憶體飆昇到 1GB 問題。 那麼在查問題前先了解何謂記憶體洩漏 ( memory leak ) 在電腦科學中，內部記憶體泄漏指由於疏忽或錯誤造成程式未能釋放已經不再使用的內部記憶體的情況。 (微基百科) 了解瀏覽器記憶體回收機制 瀏覽器採用的是引用計數，沒有被引用數據，會打...
前端小遊戲，記憶體洩漏調效筆記
問題 在開發一款網頁前端動畫小遊戲時，因為有自動遊玩功能，發現掛了一晚上，就會發現記憶體飆昇到 1GB 問題。 那麼在查問題前先了解何謂記憶體洩漏 ( memory leak ) 在電腦科學中，內部記憶體泄漏指由於疏忽或錯誤造成程式未能釋放已經不再使用的內部記憶體的情況。 (微基百科) 了解瀏覽器記憶體回收機制 瀏覽器採用的是引用計數，沒有被引用數據，會打...
前端小遊戲，記憶體洩漏調效筆記
問題 在開發一款網頁前端動畫小遊戲時，因為有自動遊玩功能，發現掛了一晚上，就會發現記憶體飆昇到 1GB 問題。 那麼在查問題前先了解何謂記憶體洩漏 ( memory leak ) 在電腦科學中，內部記憶體泄漏指由於疏忽或錯誤造成程式未能釋放已經不再使用的內部記憶體的情況。 (微基百科) 了解瀏覽器記憶體回收機制 瀏覽器採用的是引用計數，沒有被引用數據，會打...
前端小遊戲，記憶體洩漏調效筆記
問題 在開發一款網頁前端動畫小遊戲時，因為有自動遊玩功能，發現掛了一晚上，就會發現記憶體飆昇到 1GB 問題。 那麼在查問題前先了解何謂記憶體洩漏 ( memory leak ) 在電腦科學中，內部記憶體泄漏指由於疏忽或錯誤造成程式未能釋放已經不再使用的內部記憶體的情況。 (微基百科) 了解瀏覽器記憶體回收機制 瀏覽器採用的是引用計數，沒有被引用數據，會打...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
樹莓派 4B 運行 net core 6.0 應用程式及網站
樹莓派 4B 運行 net core 6.0 應用程式及網站 環境安裝 安裝.Net Core 相關依賴 sudo apt install -y libunwind8 libunwind8-dev gettext libicu-dev liblttng-ust-dev libcurl4 libcurl4-openssl-dev libssl-dev uuid-...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機
在樹莓派上運行 Net Core 應用程式，控制熱感式出單機及標籤機 前言 之前有在餐飲業寫過 POS 系統，當時後端的開發環境都是在 Windows 平台上開發，多數廠商都有提供 Window 的SDK，可以直接操作 DLL 使用，但這次是在樹莓派跑，廠商都沒有提供，甚至驅動安裝上去都有些問題，最後只好透過 socket 來操作網路印表機的指令集做列印。 目...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 1 準備心歷路程
我的澎湖大鐵記實 - IRONMAN PENHU 226 - Part’s 1 準備心歷路程 緣起 我是一位網頁軟體開發工程師，因工作關係，常時間久坐，壓力大就亂吃，剛接觸鐵人三項時，曾經最胖時達到 96kg，體力也不是特別的好，游泳還游不超過25公尺，跑步3km 就喘的不行，過去當兵還是在國防部，所以這輩子也沒什麼機會操到，但就在4年前，參加前主管推坑的鐵人說...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 1 準備心歷路程
我的澎湖大鐵記實 - IRONMAN PENHU 226 - Part’s 1 準備心歷路程 緣起 我是一位網頁軟體開發工程師，因工作關係，常時間久坐，壓力大就亂吃，剛接觸鐵人三項時，曾經最胖時達到 96kg，體力也不是特別的好，游泳還游不超過25公尺，跑步3km 就喘的不行，過去當兵還是在國防部，所以這輩子也沒什麼機會操到，但就在4年前，參加前主管推坑的鐵人說...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 1 準備心歷路程
我的澎湖大鐵記實 - IRONMAN PENHU 226 - Part’s 1 準備心歷路程 緣起 我是一位網頁軟體開發工程師，因工作關係，常時間久坐，壓力大就亂吃，剛接觸鐵人三項時，曾經最胖時達到 96kg，體力也不是特別的好，游泳還游不超過25公尺，跑步3km 就喘的不行，過去當兵還是在國防部，所以這輩子也沒什麼機會操到，但就在4年前，參加前主管推坑的鐵人說...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
使用 dotnet 開源 Imageflow ，輕鬆透過 query string 達到栽切、壓縮圖片、浮水印及格式轉換
問題 觀察許多電子商務網站時，常發現許多圖片大小不一，甚至在上圖時，可能使用者忘了壓縮，而上傳到一張非常大的圖，用戶在較差的網路環境下，為了等待圖片，影響了網頁的載入速度及使用體驗。 圖檔過大解決方案 解決大圖檔一共有幾個解法，像 後台上傳前檢查 雲端空間圖床api(阿里雲) cloudflare image resize api webpa...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
分析幾個知名網站被黑帽 SEO 的關鍵詞堆砌的問題
問題 某次 在 Google 搜尋中，發現國內幾個知名網站，居然都有以下奇怪的網站描述。 此時好奇心驅使者我，打開了網站開發者工具 檢查用於提供搜尋引擎建立索引的 header 中的 title 及 description 和 google 搜尋引擎所收納的相同。 疑問 站在網站開發人員角度思考，腦袋跑出很多疑惑 ? 網站是不是被駭? 難道是被人埋入...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
軟體工程師的澎湖大鐵記實 - IRONMAN PENHU 226 - Part's 2 比賽日
在開賽前二天 - 一大早帶著我的行李飛往澎湖 接著到了澎湖的飯店，將單車快速組裝完成後，騎著單車去繞繞，約騎了 200 公尺左右就遇到爆胎，最後至 IRONMAN 會場找維修人員幫忙檢查，發現輾到了一根很細的釘子，心想，這也太幸運了吧! 幸好在賽前就被發現，至下午，接著我們做了30 KM 單車賽道熟悉的熱身。 其實在賽前一個月就發現我的右腳踝內側有了瘀青，...
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記 問題起緣 許多網站都會串接第三方的JS，但在某次串接完 Facebook Chat SDK 後，發現首頁的載入變得非常的慢，並決定著手優化。 身為軟體開發人員的我，又打開了開發者工具，做了對比。 從 Network Tab 中，我們可以得知來自 fbcdn 的...
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記 問題起緣 許多網站都會串接第三方的JS，但在某次串接完 Facebook Chat SDK 後，發現首頁的載入變得非常的慢，並決定著手優化。 身為軟體開發人員的我，又打開了開發者工具，做了對比。 從 Network Tab 中，我們可以得知來自 fbcdn 的...
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記 問題起緣 許多網站都會串接第三方的JS，但在某次串接完 Facebook Chat SDK 後，發現首頁的載入變得非常的慢，並決定著手優化。 身為軟體開發人員的我，又打開了開發者工具，做了對比。 從 Network Tab 中，我們可以得知來自 fbcdn 的...
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記 問題起緣 許多網站都會串接第三方的JS，但在某次串接完 Facebook Chat SDK 後，發現首頁的載入變得非常的慢，並決定著手優化。 身為軟體開發人員的我，又打開了開發者工具，做了對比。 從 Network Tab 中，我們可以得知來自 fbcdn 的...
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記
別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記 問題起緣 許多網站都會串接第三方的JS，但在某次串接完 Facebook Chat SDK 後，發現首頁的載入變得非常的慢，並決定著手優化。 身為軟體開發人員的我，又打開了開發者工具，做了對比。 從 Network Tab 中，我們可以得知來自 fbcdn 的...
Vue 透過 include 及 Vuex 解決 keepAlive 難解的記憶體釋放問題
問題 在 Vue 生態中，切換元件時，不希望元件重新渲染，並且記住元件原本的狀態及不希望重新呼叫 api 時，基於上述理由，我們會使用 keepAlive 來保留狀態，但 keepAlive 雙面刃一樣，除了你重新整理頁面前，時間越久，記憶體可能不斷的成長，最後導致記憶體洩漏 ( memory leak )。 舉一個常見使用者體驗的例子，在分頁清單元件，第 2...
Vue 透過 include 及 Vuex 解決 keepAlive 難解的記憶體釋放問題
問題 在 Vue 生態中，切換元件時，不希望元件重新渲染，並且記住元件原本的狀態及不希望重新呼叫 api 時，基於上述理由，我們會使用 keepAlive 來保留狀態，但 keepAlive 雙面刃一樣，除了你重新整理頁面前，時間越久，記憶體可能不斷的成長，最後導致記憶體洩漏 ( memory leak )。 舉一個常見使用者體驗的例子，在分頁清單元件，第 2...
提前強制更新各家 DNS Cache
前言 在某次將 DNS 主機託管 Cloud Falre 時，發現中華電信的 DNS 一直無法更新，調查研究有沒有什麼辦法提前讓 DNS 生效，僅限於比較大的國際 DNS 服務商的主機，才有提供提手動清除的功能，寫這篇的目的就是做個記錄。 DNS 相關工具 用來檢查全球 DNS 伺服器中是否能夠解析成功及測試的小工具 DNSChecke : 連結 OpenDN...
Vue 透過 include 及 Vuex 解決 keepAlive 難解的記憶體釋放問題
問題 在 Vue 生態中，切換元件時，不希望元件重新渲染，並且記住元件原本的狀態及不希望重新呼叫 api 時，基於上述理由，我們會使用 keepAlive 來保留狀態，但 keepAlive 雙面刃一樣，除了你重新整理頁面前，時間越久，記憶體可能不斷的成長，最後導致記憶體洩漏 ( memory leak )。 舉一個常見使用者體驗的例子，在分頁清單元件，第 2...
Vue 透過 include 及 Vuex 解決 keepAlive 難解的記憶體釋放問題
問題 在 Vue 生態中，切換元件時，不希望元件重新渲染，並且記住元件原本的狀態及不希望重新呼叫 api 時，基於上述理由，我們會使用 keepAlive 來保留狀態，但 keepAlive 雙面刃一樣，除了你重新整理頁面前，時間越久，記憶體可能不斷的成長，最後導致記憶體洩漏 ( memory leak )。 舉一個常見使用者體驗的例子，在分頁清單元件，第 2...
Vue 透過 include 及 Vuex 解決 keepAlive 難解的記憶體釋放問題
問題 在 Vue 生態中，切換元件時，不希望元件重新渲染，並且記住元件原本的狀態及不希望重新呼叫 api 時，基於上述理由，我們會使用 keepAlive 來保留狀態，但 keepAlive 雙面刃一樣，除了你重新整理頁面前，時間越久，記憶體可能不斷的成長，最後導致記憶體洩漏 ( memory leak )。 舉一個常見使用者體驗的例子，在分頁清單元件，第 2...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
超省錢架站法，透過 GitHub Pages + JeKyll，搭建自己免費 Blog 空間
問題 因為身邊很多，想和我一樣，擁有一個個人的網站，但架一個網站，光是放在雲端空間，至少費用4000元 以上，但也不是每個人都像我有自己的伺服器，因此，今天我想來寫一篇超省錢的架站法。 架站費用 網站空間 4000 以上 / 年 域名 680 元 / 年 Jeklly 是什麼 Jekyll是一個簡單的靜態網站生成器，用於生成個人，專案或組織的網站。 它由Gi...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
使用 Powershell 達成 let's encrypt DNS 挑戰，取得 免費 https 憑證
問題 現今大多數網站基於各種理由都需要支援 https，但剛開始經營網站時，會使用很多免費的 Https 憑證，最有名的是 let’s encrypt，但這些憑證通常只有三個月的期效，每三個月過後要延展或手動重新申請，要達成 ACME http challenge和 DNS challenge ( 萬用憑證 ) 或透過 nginx 延長憑證，都是一件很麻煩的事。...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner
輕量化且免費，適用小團隊的 CICD - 使用 Gitlab Pipeline 及 地端 Gitlab Runner 痛點 一般來說在軟體交付的過程中，開發的環境可能會有 1.開發環境( DEV ) 2.測試環境 ( QAT ) 3.使用者測試環境( UAT ) 4.生產環境 ( PROD ) 當專案越來越多時，多個環境，越複雜時，過去的手工佈署應用程式，就可...
直播網站實戰開發筆記 Part's 2 - 打造自己的直播播放器
用 Vue 動手打造個人專屬的前端直播播放器的採用( hls.js ) 前言 上一篇，談到用阿里雲來搭建直播伺服器，這篇我要來談前端直播放器，前端直播技術，最常見的有 HLS 、DASH 這兩種直播協定，本篇就主要會以這兩個進行探究 科技公司的分庭抗禮 早期的直播協議會讓人想到 Flash(FLV)協議，蘋果公司為了代替 Flash 與 RTMP與，推出了 H...
超省錢架站法，透過 GitHub Pages + JeKyll，搭建自己免費 Blog 空間
問題 因為身邊很多，想和我一樣，擁有一個個人的網站，但架一個網站，光是放在雲端空間，至少費用4000元 以上，但也不是每個人都像我有自己的伺服器，因此，今天我想來寫一篇超省錢的架站法。 架站費用 網站空間 4000 以上 / 年 域名 680 元 / 年 Jeklly 是什麼 Jekyll是一個簡單的靜態網站生成器，用於生成個人，專案或組織的網站。 它由Gi...
超省錢架站法，透過 GitHub Pages + JeKyll，搭建自己免費 Blog 空間
問題 因為身邊很多，想和我一樣，擁有一個個人的網站，但架一個網站，光是放在雲端空間，至少費用4000元 以上，但也不是每個人都像我有自己的伺服器，因此，今天我想來寫一篇超省錢的架站法。 架站費用 網站空間 4000 以上 / 年 域名 680 元 / 年 Jeklly 是什麼 Jekyll是一個簡單的靜態網站生成器，用於生成個人，專案或組織的網站。 它由Gi...
超省錢架站法，透過 GitHub Pages + JeKyll，搭建自己免費 Blog 空間
問題 因為身邊很多，想和我一樣，擁有一個個人的網站，但架一個網站，光是放在雲端空間，至少費用4000元 以上，但也不是每個人都像我有自己的伺服器，因此，今天我想來寫一篇超省錢的架站法。 架站費用 網站空間 4000 以上 / 年 域名 680 元 / 年 Jeklly 是什麼 Jekyll是一個簡單的靜態網站生成器，用於生成個人，專案或組織的網站。 它由Gi...
提前強制更新各家 DNS Cache
前言 在某次將 DNS 主機託管 Cloud Falre 時，發現中華電信的 DNS 一直無法更新，調查研究有沒有什麼辦法提前讓 DNS 生效，僅限於比較大的國際 DNS 服務商的主機，才有提供提手動清除的功能，寫這篇的目的就是做個記錄。 DNS 相關工具 用來檢查全球 DNS 伺服器中是否能夠解析成功及測試的小工具 DNSChecke : 連結 OpenDN...
提前強制更新各家 DNS Cache
前言 在某次將 DNS 主機託管 Cloud Falre 時，發現中華電信的 DNS 一直無法更新，調查研究有沒有什麼辦法提前讓 DNS 生效，僅限於比較大的國際 DNS 服務商的主機，才有提供提手動清除的功能，寫這篇的目的就是做個記錄。 DNS 相關工具 用來檢查全球 DNS 伺服器中是否能夠解析成功及測試的小工具 DNSChecke : 連結 OpenDN...
新手上路 - Sony α7IV 的微物攝影筆記 Part's 1
新手上路 - Sony A74 的微物攝影筆記 Part’s 1 起緣 身為前端網站開發者的我，一直很好奇，為何很多商業網站照片都很拍的都不是很好看，約了好友 Howrad 到三創 Sony 進行了解。 Sony A7M4 試拍 接著，我們來到三創 2F Sony，找到一位很熱心的店員，馬上就替我解答了這個疑惑，以商業攝影來說，為了呈現更多的產品細節，所採用...
新手上路 - Sony α7IV 的微物攝影筆記 Part's 1
新手上路 - Sony A74 的微物攝影筆記 Part’s 1 起緣 身為前端網站開發者的我，一直很好奇，為何很多商業網站照片都很拍的都不是很好看，約了好友 Howrad 到三創 Sony 進行了解。 Sony A7M4 試拍 接著，我們來到三創 2F Sony，找到一位很熱心的店員，馬上就替我解答了這個疑惑，以商業攝影來說，為了呈現更多的產品細節，所採用...
新手上路 - Sony α7IV 的微物攝影筆記 Part's 1
新手上路 - Sony A74 的微物攝影筆記 Part’s 1 起緣 身為前端網站開發者的我，一直很好奇，為何很多商業網站照片都很拍的都不是很好看，約了好友 Howrad 到三創 Sony 進行了解。 Sony A7M4 試拍 接著，我們來到三創 2F Sony，找到一位很熱心的店員，馬上就替我解答了這個疑惑，以商業攝影來說，為了呈現更多的產品細節，所採用...
新手上路 - Sony α7IV 的微物攝影筆記 Part's 1
新手上路 - Sony A74 的微物攝影筆記 Part’s 1 起緣 身為前端網站開發者的我，一直很好奇，為何很多商業網站照片都很拍的都不是很好看，約了好友 Howrad 到三創 Sony 進行了解。 Sony A7M4 試拍 接著，我們來到三創 2F Sony，找到一位很熱心的店員，馬上就替我解答了這個疑惑，以商業攝影來說，為了呈現更多的產品細節，所採用...
新手上路 - Sony α7IV 的微物攝影筆記 Part's 1
新手上路 - Sony A74 的微物攝影筆記 Part’s 1 起緣 身為前端網站開發者的我，一直很好奇，為何很多商業網站照片都很拍的都不是很好看，約了好友 Howrad 到三創 Sony 進行了解。 Sony A7M4 試拍 接著，我們來到三創 2F Sony，找到一位很熱心的店員，馬上就替我解答了這個疑惑，以商業攝影來說，為了呈現更多的產品細節，所採用...
新手上路 - Sony α7IV 的微物攝影筆記 Part's 1
新手上路 - Sony A74 的微物攝影筆記 Part’s 1 起緣 身為前端網站開發者的我，一直很好奇，為何很多商業網站照片都很拍的都不是很好看，約了好友 Howrad 到三創 Sony 進行了解。 Sony A7M4 試拍 接著，我們來到三創 2F Sony，找到一位很熱心的店員，馬上就替我解答了這個疑惑，以商業攝影來說，為了呈現更多的產品細節，所採用...
新手上路 - Sony α7IV 的微物攝影筆記 Part's 1
新手上路 - Sony A74 的微物攝影筆記 Part’s 1 起緣 身為前端網站開發者的我，一直很好奇，為何很多商業網站照片都很拍的都不是很好看，約了好友 Howrad 到三創 Sony 進行了解。 Sony A7M4 試拍 接著，我們來到三創 2F Sony，找到一位很熱心的店員，馬上就替我解答了這個疑惑，以商業攝影來說，為了呈現更多的產品細節，所採用...
Powershell Mongodb 備份及還原筆記
Mongodb tools backup & restore 解決問題 因為工作上需要用到改寫一套前端的 CMS系統，資料庫主要是 mongodb ，就記錄了一下如何備份及還原。 備份原理 主要是透過 PowerShell 腳本指令操作 Mongodb tools，達成備份。 下載及安裝 mongodb tools https://www.mongo...
Powershell Mongodb 備份及還原筆記
Mongodb tools backup & restore 解決問題 因為工作上需要用到改寫一套前端的 CMS系統，資料庫主要是 mongodb ，就記錄了一下如何備份及還原。 備份原理 主要是透過 PowerShell 腳本指令操作 Mongodb tools，達成備份。 下載及安裝 mongodb tools https://www.mongo...
Powershell Mongodb 備份及還原筆記
Mongodb tools backup & restore 解決問題 因為工作上需要用到改寫一套前端的 CMS系統，資料庫主要是 mongodb ，就記錄了一下如何備份及還原。 備份原理 主要是透過 PowerShell 腳本指令操作 Mongodb tools，達成備份。 下載及安裝 mongodb tools https://www.mongo...
Powershell Mongodb 備份及還原筆記
Mongodb tools backup & restore 解決問題 因為工作上需要用到改寫一套前端的 CMS系統，資料庫主要是 mongodb ，就記錄了一下如何備份及還原。 備份原理 主要是透過 PowerShell 腳本指令操作 Mongodb tools，達成備份。 下載及安裝 mongodb tools https://www.mongo...
驗證 SSR 或 Pre render SEO 是否正常運行的幾種方式
前言 最近發現有些網站有做 SEO，但都沒正常運行，所以就順手寫了一篇筆記，記錄如何驗證 SEO 功能面有辦法被 Google 爬蟲所收納。 方法一、最即時的方式，就是模擬爬蟲訪問網站 到 Chrome 市集安裝 user-agent-switch 套件 參考 Google Doc，得知 Google搜尋引擎的爬蟲，是採用什麼 useragent 來收錄你的...
驗證 SSR 或 Pre render SEO 是否正常運行的幾種方式
前言 最近發現有些網站有做 SEO，但都沒正常運行，所以就順手寫了一篇筆記，記錄如何驗證 SEO 功能面有辦法被 Google 爬蟲所收納。 方法一、最即時的方式，就是模擬爬蟲訪問網站 到 Chrome 市集安裝 user-agent-switch 套件 參考 Google Doc，得知 Google搜尋引擎的爬蟲，是採用什麼 useragent 來收錄你的...
驗證 SSR 或 Pre render SEO 是否正常運行的幾種方式
前言 最近發現有些網站有做 SEO，但都沒正常運行，所以就順手寫了一篇筆記，記錄如何驗證 SEO 功能面有辦法被 Google 爬蟲所收納。 方法一、最即時的方式，就是模擬爬蟲訪問網站 到 Chrome 市集安裝 user-agent-switch 套件 參考 Google Doc，得知 Google搜尋引擎的爬蟲，是採用什麼 useragent 來收錄你的...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
淺談使用 Dotnet 開源 Yarp Revert Proxy 實現滾動式佈署 ( Rolling-update ) - Part's 1 設計思路
為何要使用滾動式更新應用程式( Rolling-update ) 現今的電子商務網站，近乎 365天 * 24小時在運營，隨時隨地都有可能有會員正在使用系統，在傳統佈署網站的過程中，網站是不能運營的，也可能給用戶帶了不好的體驗，如: 用戶可能出現錯誤畫面或被強制登出，若維護停機時間太久，用戶也可能轉向其他的平台去下單，進而流失用戶。 而滾動式佈署，減少了佈署的...
快速建立 Next js 開發環境筆記 ( ESlint + StyleLint + Prettier )
目的 ESlint + StyleLint + Prettier 己經現今前端開發協作相當重要的工具，他可以讓團隊有一致的程式碼風格及規範，並透過 Vscode 開發工具，能夠協助修正一些錯誤。 ESlint : 程式碼撰寫風格校驗，開發階段找到很多潛在問題。 StyleLint : CSS 自動校驗是不是符合團隊規範，自動調整成團隊規範的 CSS。...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
React 學習筆記 - 路由 ( Router ) - Part's 5
路由的原理 路由的原理，依據 url 請求，動態去載入相對應的元件。 安裝 react router ( 最常見 ) npm install react-router-dom --save // 基於 react-router 實作的 lib npm install @types/react-router-dom --save-deve // 官方沒提供 使...
React 學習筆記 - 何謂 React Hook、副作用、Loading、錯誤處理、上下文關係(Context) - Part's 4
何謂 React Hook Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。 (from 官方文件) 並「函式」來複用邏輯的概念，重新設計元件，更新粒度更細，讓程式碼更清晰, 並逐步將 class component 替換成函式型元件 Function Component。 何副...
React 學習筆記 - state、props、setState、binding this - Part's 3
state 和 props 的區別 在 react 中會觸發重新渲染的主要是 props 及 state 1. props 是元件外部傳入的參數，只讀屬性， 是不可變的 ( Immutable )，一但建立就不可變，只能透過銷毀，重建改變數據，通過判斷記憶體地址是否一致，來確認對象是不是有經修改過。 2.state 元件私有的狀態，主要用元件內部資料...
React 學習筆記 - 框架優勢、XSS、CSS in JS 使用方式 - Part 2
react 學習筆記 react 框架的成功關鍵 雙向挷定的問題 雙向挷定主要透過數據的改變，動態改變 UI ，應用程式越來大，大多數情況不需要雙向綁定，反而造成效能的消耗，數據也越來越不好控制。 Angular - AngularJs 雙單向數據，衍伸的問題太多，Angular 2 以後也採單向數據流。 Vue - 單向數據流框架，v-model 只是語法糖，...
React 學習筆記 - React 初探 - Part's 1
前言 近年 React 前端生態越來越豐富，大量的套件，都是採用 react 開發，也被越來越多企業使用，也讓我也想去了解一下 React，過去從 Angular 、到 Vue、再到 React，我也終於湊滿前端三大框架了，嗯，應該可以向神龍許願了。 三大框架，各自的優勢 Angular - 框架有很明確的規範，有完整的解決方案及強大的 CLI，後端人員上手比...
React 學習筆記 - 路由 ( Router ) - Part's 5
路由的原理 路由的原理，依據 url 請求，動態去載入相對應的元件。 安裝 react router ( 最常見 ) npm install react-router-dom --save // 基於 react-router 實作的 lib npm install @types/react-router-dom --save-deve // 官方沒提供 使...
React 學習筆記 - 何謂 React Hook、副作用、Loading、錯誤處理、上下文關係(Context) - Part's 4
何謂 React Hook Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。 (from 官方文件) 並「函式」來複用邏輯的概念，重新設計元件，更新粒度更細，讓程式碼更清晰, 並逐步將 class component 替換成函式型元件 Function Component。 何副...
React 學習筆記 - state、props、setState、binding this - Part's 3
state 和 props 的區別 在 react 中會觸發重新渲染的主要是 props 及 state 1. props 是元件外部傳入的參數，只讀屬性， 是不可變的 ( Immutable )，一但建立就不可變，只能透過銷毀，重建改變數據，通過判斷記憶體地址是否一致，來確認對象是不是有經修改過。 2.state 元件私有的狀態，主要用元件內部資料...
React 學習筆記 - 框架優勢、XSS、CSS in JS 使用方式 - Part 2
react 學習筆記 react 框架的成功關鍵 雙向挷定的問題 雙向挷定主要透過數據的改變，動態改變 UI ，應用程式越來大，大多數情況不需要雙向綁定，反而造成效能的消耗，數據也越來越不好控制。 Angular - AngularJs 雙單向數據，衍伸的問題太多，Angular 2 以後也採單向數據流。 Vue - 單向數據流框架，v-model 只是語法糖，...
React 學習筆記 - React 初探 - Part's 1
前言 近年 React 前端生態越來越豐富，大量的套件，都是採用 react 開發，也被越來越多企業使用，也讓我也想去了解一下 React，過去從 Angular 、到 Vue、再到 React，我也終於湊滿前端三大框架了，嗯，應該可以向神龍許願了。 三大框架，各自的優勢 Angular - 框架有很明確的規範，有完整的解決方案及強大的 CLI，後端人員上手比...
React 學習筆記 - 路由 ( Router ) - Part's 5
路由的原理 路由的原理，依據 url 請求，動態去載入相對應的元件。 安裝 react router ( 最常見 ) npm install react-router-dom --save // 基於 react-router 實作的 lib npm install @types/react-router-dom --save-deve // 官方沒提供 使...
React 學習筆記 - 何謂 React Hook、副作用、Loading、錯誤處理、上下文關係(Context) - Part's 4
何謂 React Hook Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。 (from 官方文件) 並「函式」來複用邏輯的概念，重新設計元件，更新粒度更細，讓程式碼更清晰, 並逐步將 class component 替換成函式型元件 Function Component。 何副...
React 學習筆記 - state、props、setState、binding this - Part's 3
state 和 props 的區別 在 react 中會觸發重新渲染的主要是 props 及 state 1. props 是元件外部傳入的參數，只讀屬性， 是不可變的 ( Immutable )，一但建立就不可變，只能透過銷毀，重建改變數據，通過判斷記憶體地址是否一致，來確認對象是不是有經修改過。 2.state 元件私有的狀態，主要用元件內部資料...
React 學習筆記 - 框架優勢、XSS、CSS in JS 使用方式 - Part 2
react 學習筆記 react 框架的成功關鍵 雙向挷定的問題 雙向挷定主要透過數據的改變，動態改變 UI ，應用程式越來大，大多數情況不需要雙向綁定，反而造成效能的消耗，數據也越來越不好控制。 Angular - AngularJs 雙單向數據，衍伸的問題太多，Angular 2 以後也採單向數據流。 Vue - 單向數據流框架，v-model 只是語法糖，...
React 學習筆記 - React 初探 - Part's 1
前言 近年 React 前端生態越來越豐富，大量的套件，都是採用 react 開發，也被越來越多企業使用，也讓我也想去了解一下 React，過去從 Angular 、到 Vue、再到 React，我也終於湊滿前端三大框架了，嗯，應該可以向神龍許願了。 三大框架，各自的優勢 Angular - 框架有很明確的規範，有完整的解決方案及強大的 CLI，後端人員上手比...
使用 dotnet 開源 Imageflow ，輕鬆透過 query string 達到栽切、壓縮圖片、浮水印及格式轉換
問題 觀察許多電子商務網站時，常發現許多圖片大小不一，甚至在上圖時，可能使用者忘了壓縮，而上傳到一張非常大的圖，用戶在較差的網路環境下，為了等待圖片，影響了網頁的載入速度及使用體驗。 圖檔過大解決方案 解決大圖檔一共有幾個解法，像 後台上傳前檢查 雲端空間圖床api(阿里雲) cloudflare image resize api webpa...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
使用 dotnet 開源 Imageflow ，輕鬆透過 query string 達到栽切、壓縮圖片、浮水印及格式轉換
問題 觀察許多電子商務網站時，常發現許多圖片大小不一，甚至在上圖時，可能使用者忘了壓縮，而上傳到一張非常大的圖，用戶在較差的網路環境下，為了等待圖片，影響了網頁的載入速度及使用體驗。 圖檔過大解決方案 解決大圖檔一共有幾個解法，像 後台上傳前檢查 雲端空間圖床api(阿里雲) cloudflare image resize api webpa...
使用 dotnet 開源 Imageflow ，輕鬆透過 query string 達到栽切、壓縮圖片、浮水印及格式轉換
問題 觀察許多電子商務網站時，常發現許多圖片大小不一，甚至在上圖時，可能使用者忘了壓縮，而上傳到一張非常大的圖，用戶在較差的網路環境下，為了等待圖片，影響了網頁的載入速度及使用體驗。 圖檔過大解決方案 解決大圖檔一共有幾個解法，像 後台上傳前檢查 雲端空間圖床api(阿里雲) cloudflare image resize api webpa...
使用 dotnet 開源 Imageflow ，輕鬆透過 query string 達到栽切、壓縮圖片、浮水印及格式轉換
問題 觀察許多電子商務網站時，常發現許多圖片大小不一，甚至在上圖時，可能使用者忘了壓縮，而上傳到一張非常大的圖，用戶在較差的網路環境下，為了等待圖片，影響了網頁的載入速度及使用體驗。 圖檔過大解決方案 解決大圖檔一共有幾個解法，像 後台上傳前檢查 雲端空間圖床api(阿里雲) cloudflare image resize api webpa...
快速建立 Next js 開發環境筆記 ( ESlint + StyleLint + Prettier )
目的 ESlint + StyleLint + Prettier 己經現今前端開發協作相當重要的工具，他可以讓團隊有一致的程式碼風格及規範，並透過 Vscode 開發工具，能夠協助修正一些錯誤。 ESlint : 程式碼撰寫風格校驗，開發階段找到很多潛在問題。 StyleLint : CSS 自動校驗是不是符合團隊規範，自動調整成團隊規範的 CSS。...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
解決 Nextjs image loader 造成，docker image 肥大的問題
問題 透過 next/image 元件的載入圖片，都會透過 next server 去調整圖片大小，圖片路徑會渲染成: <img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_nex...
快速建立 Next js 開發環境筆記 ( ESlint + StyleLint + Prettier )
目的 ESlint + StyleLint + Prettier 己經現今前端開發協作相當重要的工具，他可以讓團隊有一致的程式碼風格及規範，並透過 Vscode 開發工具，能夠協助修正一些錯誤。 ESlint : 程式碼撰寫風格校驗，開發階段找到很多潛在問題。 StyleLint : CSS 自動校驗是不是符合團隊規範，自動調整成團隊規範的 CSS。...
快速建立 Next js 開發環境筆記 ( ESlint + StyleLint + Prettier )
目的 ESlint + StyleLint + Prettier 己經現今前端開發協作相當重要的工具，他可以讓團隊有一致的程式碼風格及規範，並透過 Vscode 開發工具，能夠協助修正一些錯誤。 ESlint : 程式碼撰寫風格校驗，開發階段找到很多潛在問題。 StyleLint : CSS 自動校驗是不是符合團隊規範，自動調整成團隊規範的 CSS。...
快速建立 Next js 開發環境筆記 ( ESlint + StyleLint + Prettier )
目的 ESlint + StyleLint + Prettier 己經現今前端開發協作相當重要的工具，他可以讓團隊有一致的程式碼風格及規範，並透過 Vscode 開發工具，能夠協助修正一些錯誤。 ESlint : 程式碼撰寫風格校驗，開發階段找到很多潛在問題。 StyleLint : CSS 自動校驗是不是符合團隊規範，自動調整成團隊規範的 CSS。...
快速建立 Next js 開發環境筆記 ( ESlint + StyleLint + Prettier )
目的 ESlint + StyleLint + Prettier 己經現今前端開發協作相當重要的工具，他可以讓團隊有一致的程式碼風格及規範，並透過 Vscode 開發工具，能夠協助修正一些錯誤。 ESlint : 程式碼撰寫風格校驗，開發階段找到很多潛在問題。 StyleLint : CSS 自動校驗是不是符合團隊規範，自動調整成團隊規範的 CSS。...
網站網路封包錄製筆記 - fiddler
解決問題 為了查出網站伺服器發出的請求是不是正確，我們通常會用抓包軟體，看對方傳了什麼或是站台做了什麼額外的請求，久久使用一次，常常忘了怎麼設定，想說寫篇筆記幫助回憶。 安裝步驟 下載並安裝 fiddler-classic 免費版下載連結 Tool > Options 切到 Https tab > Actions 安裝憑證 > ok ...
網站網路封包錄製筆記 - fiddler
解決問題 為了查出網站伺服器發出的請求是不是正確，我們通常會用抓包軟體，看對方傳了什麼或是站台做了什麼額外的請求，久久使用一次，常常忘了怎麼設定，想說寫篇筆記幫助回憶。 安裝步驟 下載並安裝 fiddler-classic 免費版下載連結 Tool > Options 切到 Https tab > Actions 安裝憑證 > ok ...
網站網路封包錄製筆記 - fiddler
解決問題 為了查出網站伺服器發出的請求是不是正確，我們通常會用抓包軟體，看對方傳了什麼或是站台做了什麼額外的請求，久久使用一次，常常忘了怎麼設定，想說寫篇筆記幫助回憶。 安裝步驟 下載並安裝 fiddler-classic 免費版下載連結 Tool > Options 切到 Https tab > Actions 安裝憑證 > ok ...
Apple Pay on Web + Cybersource 串接筆記
時空背景 因工作需要美國及德國電商網站，需要界接 Apple Pay。 Apple Pay 原理 參考 啾啾鞋影片 美國有多少人口使用 Apple Pay 參考 oberlo 網站 Apple Pay / Google Pay 和第三方支付的差異 Apple Pay / Google Pay 和第三方支付最大的不同是，第三方金流公司會協助處理和銀行帳務問題...
Apple Pay on Web + Cybersource 串接筆記
時空背景 因工作需要美國及德國電商網站，需要界接 Apple Pay。 Apple Pay 原理 參考 啾啾鞋影片 美國有多少人口使用 Apple Pay 參考 oberlo 網站 Apple Pay / Google Pay 和第三方支付的差異 Apple Pay / Google Pay 和第三方支付最大的不同是，第三方金流公司會協助處理和銀行帳務問題...
Apple Pay on Web + Cybersource 串接筆記
時空背景 因工作需要美國及德國電商網站，需要界接 Apple Pay。 Apple Pay 原理 參考 啾啾鞋影片 美國有多少人口使用 Apple Pay 參考 oberlo 網站 Apple Pay / Google Pay 和第三方支付的差異 Apple Pay / Google Pay 和第三方支付最大的不同是，第三方金流公司會協助處理和銀行帳務問題...
Apple Pay on Web + Cybersource 串接筆記
時空背景 因工作需要美國及德國電商網站，需要界接 Apple Pay。 Apple Pay 原理 參考 啾啾鞋影片 美國有多少人口使用 Apple Pay 參考 oberlo 網站 Apple Pay / Google Pay 和第三方支付的差異 Apple Pay / Google Pay 和第三方支付最大的不同是，第三方金流公司會協助處理和銀行帳務問題...
Apple Pay on Web + Cybersource 串接筆記
時空背景 因工作需要美國及德國電商網站，需要界接 Apple Pay。 Apple Pay 原理 參考 啾啾鞋影片 美國有多少人口使用 Apple Pay 參考 oberlo 網站 Apple Pay / Google Pay 和第三方支付的差異 Apple Pay / Google Pay 和第三方支付最大的不同是，第三方金流公司會協助處理和銀行帳務問題...
Apple Pay on Web + Cybersource 串接筆記
時空背景 因工作需要美國及德國電商網站，需要界接 Apple Pay。 Apple Pay 原理 參考 啾啾鞋影片 美國有多少人口使用 Apple Pay 參考 oberlo 網站 Apple Pay / Google Pay 和第三方支付的差異 Apple Pay / Google Pay 和第三方支付最大的不同是，第三方金流公司會協助處理和銀行帳務問題...
Apple Pay on Web + Cybersource 串接筆記
時空背景 因工作需要美國及德國電商網站，需要界接 Apple Pay。 Apple Pay 原理 參考 啾啾鞋影片 美國有多少人口使用 Apple Pay 參考 oberlo 網站 Apple Pay / Google Pay 和第三方支付的差異 Apple Pay / Google Pay 和第三方支付最大的不同是，第三方金流公司會協助處理和銀行帳務問題...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...
透過 Google Tag manger 將電子商務網站的使用者行為，搜集至 Google Analysis ( 本篇採用 GA4 )
目的 身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。 運作原理 會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先...