積沙成塔，滴水穿石

  前提 這次做到的案件，不乏影片介紹。於是就在首頁遷入YOUTUBE影片，但是只要嵌入後YOUTUBE後，就會導致網頁載入變慢。 網頁的在做載入的時候就會先等影片載入好，光載入就花了4.3秒(圖1)，頁面整個好跑完約12.8秒。 載入時間(圖1) 有一半的時間是在等待嵌入的YOUTUBE 跑完，加載時間會比較久(圖2) 加載錄影(圖2) 作法 網路上有人提供了寫法，先用一個圖片 做代替，播放在做 載入，在讀取上 的確改善很多。 查看連結 以上面文章做個說明(圖3)，這位作者先使用的是srcdoc 放一張圖片，代替背景加載過慢的問題 在srcdoc加入img設定(圖3) 由於srcdoc 這個並非所有瀏覽器都支援，那這次就來做個改善。 直接先秀一張圖在thumbnail。 iframe 就先不載入src，video就不會在載入的時候跑。(圖4) 先載入封面圖(圖4) 最後再透過onclick 點擊圖片的時候 在載入影片(圖5) 點擊播放，在加載影片(圖5) See the Pen video iframe lazy load by jirg ( @pig3629 ) on CodePen . 在codepen 點擊圖片播放，會被暫停。但實際上放在html 是沒有這個問題，點了播放就直接撥放影片了。 心得 之前做載入影片沒什麼感覺，但當影片載入越多，loading就越久，用lighthouse看也一樣，跑起來就是久....嵌入影片又是不可避免掉的，只能換個方式做播放。 既然youtube影片不是自動播放的話，那麼用這個方式 一樣也可以載入 做到一樣的效果，也能加快速度，耗時減少了很多。(圖6)  載入時間變少了(圖6)

 在以往呼叫php session 做使用，都能正常。 但這次的案件使用，卻發現無法達到理想流程。 原本預想： 在登入時，用php session 存下登入資訊。 前端轉跳到用戶頁後，用戶頁會在背景API讀取php session。這樣就可以得知是誰登入的。 實驗下來後卻發現到，每次使用session，都會產生一個獨立的session存檔。(圖1) session 存檔(圖1) 這時我就想了一下，有沒有可能是每次前端呼叫，其實對於後端收到的API 都算是獨立的，既使是在同個IP。 後來和老師聊一下，有沒有遇過這樣的狀況。 還滿贊同老師的看法↓ 原本session是搭配cookie的，透過瀏覽器登入，會自動存放對應的cookie，但是透過js，對php來說可能都是不同client session就不同了 解決的方式，就是在將存好的sessionID，返回後再從前端帶入sessionID，做讀檔查詢。

前言 自己年前AI蓬勃發展，在生活上其實都有AI的影子，它潛在了改變了生活的部分但貌似又僅限於特殊族群。 會這麼說是因為我從事網頁工作，有AI工具就不需要像以前一樣麻煩還需再寫煩雜的程式碼，透過AI 可以省事不少，甚至它還提供了優化與創新的部分。  心得 回歸前提，在網頁工作上透過AI 是幫助是幫助不少，甚至是丟了片段的程式碼，AI工具有辦法一樣畫葫蘆。既然AI 工具 有辦法產生程式碼了，那它能取代網頁工程師嗎? Will web development be replaced with AI automation? 在reddit 有人提出了這個問題 ，也有人在blog 探討這個問題。 我認為有AI的出現，正是在將人才去蕪存菁的開始，人們開始作的不再是簡單反覆的動作，這些將會被AI取代，但取代不了人的會是「特殊性」與「創新性」...等。 說要完全取代，我只能說是一半一半，因為我們還能自我判斷，我們還能去擴增新的資料庫RAG，但是 AI 則是停在某一年的載入資料為止，有的時候AI給出來的答案是過時或不正確，而我們人還能去判別與擴增想法。 我還滿認同 這位blog文章提到的觀點 ，AI 取代掉的會是平庸、重複性高的工作。 惟保有不斷前進，對知識求知若渴，虛心若愚，不斷地學習，才能站穩腳步，走得更遠。 “ Stay Hungry ,  Stay Foolish ”  使用AI工具，可以想像是站在巨人的肩膀，但是不代表它使你的雙腳失去了功能，而是讓你站在前所未有的高度。 (題外話...) 有次我和家人們提到了AI出現改善了甚麼.... 阿姨：我打電話進去，那個AI服務語音超難用 我： 用在工作上會用到AI工具，其他地方沒什麼機會用到 弟：我的工作用不到AI 阿嬤：AI是什麼?  我只有收音機

觀察了許多國外的網站，發現到說讓人印象深刻的網站，大部分都有在動畫animation 和一些地方加入巧思，在看網站的時候 就會覺得很有特色。 通常很有特色的css動畫 都需要加入一些巧思 和 計算動畫的起始和結束。 今天就自己做了轉場效果，也是最近做簡報的時候看到的轉場😇 translate3d 這個真的是好工具，在效果呈現上也比scaleY 好多了，看起來是3D也更順暢。(圖1) 轉場效果(圖1) See the Pen transition animation3 轉場動畫3 by jirg ( @pig3629 ) on CodePen .

事情前提   :前輩，統計結果有點大，可否 用個新的表儲存統計結果再作查詢 ? 這樣會比較好 前輩: 我還沒寫到那邊的對應，那張表還沒規劃，你就先用其他方式... 最近在做統計，但當前的規劃並沒有儲存 統計結果，下次若要使用就會比較麻煩，於是就突發奇想--「臨時表」。 想說使用臨時表試試看，結果測試了一下之後，很快就放棄了使用它的念頭。 什麼是臨時表? 官網的相關文件 (圖1)  暫存資料表(圖1) 讓我們來問問神奇海螺。整理一下上述的話 以下是 chatGPT  的整理(圖2)： chatGPT-暫存表(圖2) 實際操作 測試將一段select 結果，存在暫存表#TempGatewayUploads  (圖3)  暫存表#TempGatewayUploads  (圖3)  當我正高興，有了暫存表可以解決統計存放結果時，去上個廁所後，結果在使用 select * from #TempGatewayUploads ，就查不到結果了。 查了一下發現後， 當創建臨時表的會話結束時，該表會自動刪除 。(圖4) 臨時表結束會話，自動刪除(圖4) 挖哩~@@  真的就是暫時用，時間到 session 會自動刪除，會自動從 sys.table 消失。 難怪，下次要再查 #TempGatewayUploads 就無法查了，因為 會話已經結束了。😣 心得 當我寫好後暫存表，使用了之後，心中有一萬個草尼馬在奔跑😣 ，每隔一段時間 就找不到 #TempGatewayUploads ，原來是 用錯了方法 ，搞錯了表的特性~ 小表子 由於要求是計算統計表，也沒有暫存表，後來改採用CTE的方式。 使用了兩段CTE，第一段CTE 去重複，第二段 續 第一段CTE  執行 COUNT統計 剛好有解決到 需要暫存表的問題。直接將結果 存到CTE，再去查詢。(圖5) 使用CTE 作暫存(圖5)

前言 這次來看一下 醫院的生理匣道器系統的設計稿(圖1、圖2)。 目前的生理匣道系統，再11月底又擴充了。 匣道器狀態 (圖1) 錯誤率報表(圖2) 這次擴充的部分是加入，檢視匣道器狀態、統計各別使用。 檢視匣道器狀態，顧名思義就是 要檢查 目前的機器是否有再運轉、那些台的運轉狀態為異常，參考圖1。 每10分鐘，就需要去檢查最後一次機器機收到數據在甚麼時候，如果超過10分鐘以上表示機器不再正常運轉下，就需要 將匣道器狀態設為灰色。(圖3) 檢測匣道器狀態(圖3) 也就是說需要設定排程，時間到自動觸發。以往的經驗中，是寫好API ，放雲端中排程、設定時間就可以自動執行，這次是在醫院的主機上，能盡量不使用外部軟體、以原始wondows能做的功能優先的原則下，這次採用了windows的排程設定。 windows的排程設定 windows的電腦管理>工作排程器(圖4)。使用windows 的排成 可以查看事件檢視器是否有執行，也有很完善的設定介面。 工作排程器(圖4) 美中不足的地方是，選擇「建立工作」的選項 有時候會建立失敗， 改用「建立基本工作」做建立 就可以設定完成。 不知道是甚麼原因，在公司的測試機上 建立工作 是失敗的，但透過建立基本工作卻可以成功。 問了前輩，得到的回覆 「因為測試機是OEM，有些兼容性有問題。」 設定執行工作 設定執行工作(圖5) 有坑! ! 在設定執行排程時，也遇到過坑，執行時間如果 沒有設定重複工作隔xx分鐘 ，即使設定每天執行，卻也只執行一次。(圖6) 設定重複時間(圖6) 在設定完排成每天執行，卻只執行一次。查看了 正在執行工作，發現到第一次有啟動，但卻沒結束，查看紀錄也發現到 只執行一次。 查看 所有正在執行的工作 有在啟動，但卻沒有結束的動作 心得 如果沒看歷程記錄，還真的不知道最後執行在甚麼時候。(圖7) 執行檢查(圖7) 在設定排程上，也是有些地方需要注意，是不是有正確執行，也要去檢查寫出來的程式 是否會 吃資源而延宕在那邊。 「不做不知道，一做才知道」， 到底誰知道?😏

 今天在看code 的時候，看到了寫法很有趣 Object.freeze() ，凍結—可以凍結對象。 (題外話...讓我想到一首歌「林俊傑-凍結」.... 凍結那時間 凍結初遇那一天 ) 🧊🧊  功能 和 const 很像 與防止修改有關。 於是就查一下AI 給的回應(圖1)： Object.freeze 與 const 差異(圖1) 註解 當使用  const  聲明一個變量時，這個變量的引用不能改變，但如果這個變量是對象，對象的屬性仍然可以被修改。 換句話說也就是 設定成object 裡面的屬性值也一樣可變。 實驗 有做了幾次實作發現到  Object.freeze 只能淺凍結  (圖2)，除非就是全部凍結。 Object.freeze 凍結(圖2) 換句話當 object 內的物件也想要 凍結， 那麼 就也要下 Object.freeze(obj1.Hello) 。(圖3) Object.freeze 凍結裡面(圖3) 心得 freeze 凍結，再給予其他參數 是不會拋出TypeError，但是 const 會顯示錯誤。 剛開始看到freeze 想說這不是和const 差不多嗎?  一樣都是不可修改。一開始以為freeze 是凍結就不可修改， 結果 測試下來 和const 一樣， 在特殊情況下 也能 改變其對象的值。 以 結冰的湖水 來比喻 freeze， 只是冷凍了 表層，其內還是活水，除非 下層 也 結凍。 可以參考 深層結凍  deepfreeze , 利用 迴圈方式做凍結。 題外話 如果要宣告object 不可被擴充，要能更改 裡面物件屬性值，其實也可使用 Object.seal 至少他不會拋出TypeError😝

串接API時遇到個問題，對方的api時竟然逾時了..... 一分多鐘，檢查後發現是對方API出了些問題，導致POST 過去後 一直得不到回應。 導致前台畫面一直停在空白.... 這時就可以用個很好用的工具， Promise.race 簡單來說 就是 看誰跑得快，就回傳哪個值。 假設: 設定基本回傳時間 是5秒 ，但實際回傳 是8秒， 那麼會以5秒這個做為結束標準。 promise.race 設定 在無法確定對方API是否健康下，需要加入逾時設定。 這樣加入後，回應狀況好很多了。至少不會一直轉圈圈，陷入無限等待.... 讓我想到一首歌：圈圈圓圓圈圈....圈圈圓圓圈圈....