積沙成塔，滴水穿石

 來到這間公司，進步的速度就像是坐上音速飛機一樣，當你回過頭來已經到了另外一地了。 在這間公司應徵的是前端，上一份做的是做php後端API及專案的開發。 新的一份工作，應徵的是前端，但沒想到這裡的前端是除了軟體開發winform其他皆屬前端。 面試的時候都有如實告知，自己會些什麼，在工作職缺應徵的是前端工程師😤  俗話說 術業有專攻，現在的程式能做很多事 有的做網頁、有個做 AI 、有的做軟體，並不適合每個都套用在同一個。 ————————————————————— 這讓我想起一句話，「強者適應環境，不合理的要求是磨練」。 或許是這裡什麼都沒有，進步卻很快，因為什麼都做，在專案上不太有什麼限制開發，更讓我能隨心所欲的發揮。 從一開始對css很陌生，到後來用sass ,stylus 引用UI FRAMEWORK ，寫自己的7-1partten 寫自己的utils元件庫有自己的一套規則。 竟然都是做前端工作了，框架也該摸一下。  我就選擇從svelte 開始， 和幾個流行的框架 比較過後 他不需要像react，切水果用肉刀，拿把水果刀就能切好一盤漂亮的水果，應有儘有，react能做到的，svelte 也能達到，這也是為何選擇它的原因，也有狀態管理 ，它的優點滿多的但用的人不多。  「不管黑貓白貓，會抓老鼠的就是好貓」 除了玩玩前端框架， 也有用ejs 來開發案件 最後再用parcel做打包。 其實這次會選擇前端的原因，也有部分的原因是可以更理解瀏覽器的運作， 資安上有哪些是該注意的，看看渲染切換和傳統換頁的差異。 這幾次專案開發上，要做的不是只有前端開發，也包括後端開發、文件上的優化。 在後端的開發上，一樣選擇了老朋友php 搭配了composer 更方便做管理。 說實在的，我的OOP的觀念並不強，也是B上司要求 要把這個觀念落實到專案並有個code review，被鞭刑是有的，但進步很快。 當你強制只能用OOP，會發現到後來全部都寫成OOP，真的很方便，邏輯思維表達會很清楚，抽絲剝繭，在做問題追蹤和寫單元測試也會很方便。到最後，連js 也全寫成OOP😏😏 部署環境用的是IIS，資料庫用的是MSSQL。  要在IIS上部署php也是有很多眉眉角角，也用notion整理成 說明手冊。 一說下去有很多說不完⋯⋯ 在執行專...

前情提要 最近的專案被要求要做到無限滾軸，有點類似像 看漫畫那樣，可以一直往下滾。 也有不少購物網站有做這樣的效果，ex: 掏寶、蝦皮。 IntersectionObserver  就可以做到這樣的效果，lazyload 延遲加載.... 在做大量圖片顯示的時候 就可以避免一次有太多頁出現。(圖1) IntersectionObserver 觀念 (圖1) 有不少做法是抓最後2行，再去更新；我自己的做法是在滾軸區域範圍設定一個底線，當滾到底線，再去更新達到的效果也是一樣的。 (圖2) 設定滾軸範圍的底線(圖2) 透過observer 去觀察 滾軸頁面滾到了#lastone ，如果滾到了 就加載 後面的資料。(圖3) 設立觸發時機(圖3) 之前有設立過觀察最後倒數第一行，但有時候螢幕大，連滾都不用滾，就自動加載完了😅 所以這次就換另外一種作法，設定底線 當滾軸 真的有滾到底線的邊頁#lastone 才加載。 無限滾軸demo(圖4)

前情提要 以前在寫api的時候，幾乎都是分開寫，各別檔案再寫的時候分開寫各自的API，但時隔3個月再回來看的時候，會忘記自己哪個API 寫了什麼，在做管理的時候比較麻煩。 有的時候，打包出來的檔案會因為佈署到不同環境而更改 API的位置。 例如: A電腦 192.168.0.123、B電腦 10.1.207.xx、C 電腦 211.207.0.1xx  當有寫API 的時候， 集中管理就派上很大的用場。(圖1) API集中管理(圖1) 有了集中管理，在更換API的時候就會比較方便.... 但如果佈署的主機越多，也是需要一個文件來做環境的管理。 遇到的問題 每次佈署環境，API就要再換一次... 因為總不可能 每次換個環境 就還要時刻更改api 網址。 解決問題 查了一下官網，發現有個.env 可以寫整個管理配置 。 就像是寫yml一樣，把所有參數都寫一塊，方便整理。 (圖2) .env 配置 (圖2) 需要的時候 在引用就可以了  (圖3) 引用.env (圖3) -------------------------------------------------------------------------------------- 心得 會這樣子提出來寫，是因為在佈署會時常需要變更環境。所以在打包的時候，就能一鍵切換環境，也不需要打開api.js 去更改，而是直接.env 再進行打包就可以了(圖4、圖5、圖6) .env 配置 (圖4) package.json (圖5) svelte.config.js (圖6) --------------------------------------------- 延伸閱讀 .env環境配置

最近在8月份的時候，阿珠問我有沒有興趣接案，這次的專案需要做前台和後台的RWD設計稿。 案件不大，是屬於小型購物車的專案。 我把案件分成前台和後台兩個部分，因為僅需要設計稿 所以也不需要搞得太複雜。 這次的專案，我找了朋友AA(以下簡稱AA)來幫忙，AA的本業是前端工程師，我想這個刻版，應該不成問題。 費用則是55開這樣算，因為是朋友，所以我不計較太多，直接是五成算。 前台的設計，由AA負責；後台的設計，則是由我負責。 沒多久，AA說需要給他UI/UX圖，他才能刻版..... 真的讓我震驚了一下，我之前作業模式皆屬於沒有UI圖，就能直接製作。 因為我這陣子比較忙，無法挪太多時間出來，僅畫了桌機板的圖給 figma 給AA，想說制定了桌機板的風格後，那麼平板 和 手機板 AA應該可以推敲得出來，但事情的發展還是遠超乎了我的想像.....。 AA第一次交稿，我打開稿件看，全部圖片失效，既使沒有失效放的也是奇怪的圖.... 「AA，你的圖片大部分都失效，是不是傳錯檔案?」 『你怎麼沒有用live-server 開?』 「....? 這只是設計稿，不用框架，為何要用live-server開?你要能讓直接在瀏覽上看到」 這是第一次的退稿..... ... 過幾日，AA又傳了新的稿件，原因是圖片失效以及字體風格每頁都不一樣。 這是第二次的退稿..... ... 之後的交來的稿件 有的還是延續先前的問題，仍然沒有改善。 「AA，你有沒有在body訂字體風格?」 『沒有耶! 我不知道要訂耶! 我是每頁個別寫...』 「AA，那你有把共同樣式 整理成一個檔嗎?」 『沒有阿! 沒人教我這樣啊...我都是每頁分開寫』 「那如果頁面有20頁，你是不是就寫20次css檔?」 『對阿! 所以你之前退我稿的時候，我改的好辛苦』 「那你應該把共同的會用到的整理出來...到時候要用到載入就好了」 『喔喔! 我之前上課的老師沒人這樣做，我不知道可以這樣做』 這是第三次的退稿..... .... ... . 幾次下來，AA終於受不了 『我不做了...錢不拿了』 這是第八次的退稿..... ........ 改到現在也才只將桌機版改好一半，還有平版、手機。 這真的是讓我大開眼界，可以說不做就不做? 事情發生後沒多久，我還沒回神時，收到了阿珠的訊息，「專案能在下週二交給我嗎?」 真的屋漏偏逢連夜雨...💦...

前情提要 這次在專案上使用了sveltekit 作為前端框架，UI則是用bootstrap， 在列表頁的時候需要每5秒更新(圖1)，取得最新的生理資訊。 列表頁 (圖1) 但每5秒去得取api，其實是很耗資源的。尤其是長時間停留在頁面。(圖2) Network背景資源(圖2) 主想法 為了減少資源耗損，當按下「檢視」打開彈窗(modal)的時候，背景更新可以先暫時，畢竟彈窗(modal)會佔據整個版面，focus都會在彈窗上，等彈窗(modal)關閉後 再繼續執行背景更新。(圖3) 彈窗開啟(圖3) 實際作法 如果要觀測彈窗(modal)，就會需要動態監測dom的變化(圖4) ， 需要觀察 modal-open，是否有開啟。 動態監測dom(圖4)    在做法上使用了 MutationObserver 來監視dom的變化，當監測到 body 的class 出現了.modal-open，代表彈窗已開啟，就可停止背景更新。 (圖5) MutationObserver監視.modal-open(圖5) 遇到的坑 照著 MutationObserver監視.modal-open 來做背景更新的開關控管是成功了，但卻也延伸了其他問題— —「 切換到其他頁背景更新並不會停止」 。  切換到了B頁→A頁，B的背景更新並不會停止；從A頁 → C頁 ，A頁的背景更新並不會停止(圖6) ，也就表示 背景更新不會隨著切換頁面而停止。 主要是因為在同一個SPA的特性，頁面不重載，DOM並沒有銷毀。 SPA的特性，頁面不重載(圖6) 填坑--解決方法 加入了writeable 動態的背景更新「開關管理」，更新writeable的狀態，搭配 $  動態的讀取資料狀態的變化，類似redux的狀態管理 。因為用的modal在每頁都是相同的，並不會因為切換頁面造成dom重新渲染，所以監測也並不會因為切換頁而消失。 設立了一個 $modalObserver='' ，當彈窗(modal)開啟才給值  $modalObserver=0， 關閉 $modalObserver=1 $modalObserver 就可讀取到到最新的modal狀態，進而去執行該頁的背景更新，也就能避免累加的背景更新。(圖7) 當在A頁開啟modal的時候，就執行A頁的背景更新；當在...