積沙成塔，滴水穿石

前情提要   前陣子，接了一個購物車的案子。這次的案子主要是作html 設計稿。 說到設計稿，那時合作的朋友提到要figma，他才有辦法設計出來。 那時頭上有好幾隻烏鴉飛過去，設計稿不就是直接刻嗎？(心中的聲音) 一樣工具出來，是有必定存在的必要。 於是，我就動手畫了UIUX，設計稿的排版、動線、基本按鈕位置，到這裡呢，都可以算是雛型排版。 有了這個雛型property，在和客戶作初階討論很方便，至少不需要在花多一倍的時間，重刻html也能釐清動線。(圖1、圖2) 討論完後，再把其他細節、圖片、顏色風格補滿，花上的時間比重刻html還快。 figma 的 雛形(圖1) figma 的 雛形(圖2) 心得 在不熟figma的情況下，要把figma 畫出來真的是不簡單。因為要把腦中的東西更具體的具現化出來，也要更明白這個專案的綱要及客戶的需求。 畫了figma 後 也可以知道，原本在做html設計稿 有哪些細節是疏忽的、怎樣的動線是更好的設計。 做到最後其實就會發現，figma怎麼畫，切板最後就會怎麼切。 就好比打球，多少會接觸到不同崗位 前鋒、中鋒、後衛 ，打過不同的位置後更能理解其位置的重要性、互補性、支援性。

 前陣子幫指導教授 供出一份心力，如今熱騰騰的書 終於拿到了。 裡面包含了 在研究所專題的內容，書的封面上有出現我的名字😀  第一次自己的名字出現在書本上，真的是令人開心 一樣是要來 宣傳一下這本書。 書名：資通安全法合規研究與管理實務指引 作者/編者：陳育毅 出版者：五南圖書出版股份有限 這本書除了提供教育體系參考如何落實推動與高可行性的資安管理措 施，正如國家資通安全研究院何全德院長在推薦序中提到：「 這本精心籌備撰寫完成的著作，可說是《資安法》實施以來， 首部集大成的絕佳實務指引。」「 這一本大家期待已久的指標性專著， 可以協助公私部門將專業化的資安法遵工作普及化、 標準化及全民化，進而內化成為百工百業的組織治理文化。」 鴻海研究院李維斌執行長 在推薦序中提到： 《 資通安全法合規研究與管理實務指引》 是一部深具見解和實踐經驗的資安指南， 為資安從業者和企業高層提供了寶貴的洞見和實用建議， 幫助企業在面對資安挑戰時找到解決的靈感。在日常運作方面， 可以特別關注第12章探討的「資安融入內部控制制度」， 該章具體分析了相關指引和實務建議， 這有助於將資安管理制度化並融入日常作業中， 讓企業在快速變化的環境中保持敏捷和高效。 SGS管理與保證事業群何星翰營運總監 在推薦序中提到：本書第12章闡述「資安融入內部控制制度」 的做法，是企業組織值得參照的正確概念， 有助於資安管理融入內部控制制度的焦點管理與決策點控制。此外， 本章另分析出「上市上櫃公司資通安全管控指引」完全呼應《 資通安全管理法施行細則》 要公務機關訂定資通安全維護計畫應包括事項， 代表主管機關依此方向來要求一般企業組織導入資安管理， 雖然此書各章節出發點是資安法合規，但非屬於《資安法》 所規範的企業組織其實也同樣適用， 全書各章節的實務建議都是很具體且通用的資安指導方案。 心得 資安就像保險一樣，當發生甚麼事情 才會想起它的重要性，但這也已經為時已晚了。 這本書 講解了許多詳細的概念，為甚麼這麼做的重要性... 資安在前期落實都是辛苦的，有可能無法看見成效，這不是件短時間的事情。 就像是健康一樣，健康的保養，從平時的習慣養成，只有一步步持續 才會看到積沙成塔的效果。 

研究animation有一段時間了，怎麼樣的轉場、動畫效果，會讓人感覺到舒服。 連PPT 換頁的時候都有轉場特效，淡入淡出也是一種轉場。 在做互動效果的時候，有時候沒有靈感 會去參考PPT的動畫特效。(圖1) PPT 轉場特效(圖1) 其實國外滿多網站，讓人驚艷地或覺得這個網站不錯的，都有在網站的一些元素加入動畫。 例如: 駐足在卡片上，卡片會有翻牌效果、變色效果。不再只是加個陰影。(圖2) 加入特效(圖2) 在做css 的動畫特效的時候，這個真的是需要經驗和創意的發想。 網路上其實也有提供現成的轉場特效aos.js， 但通常就是針對 一個區塊 ，比較像是 轉場效果，大多會搭配滾軸 做個 互動效果。(圖3) 滾軸互動(圖3) 如果說要與使用者有更多的互動或元件特效，則需要去逐格寫動畫，也滿推薦去看 影格相關的概念 ，在做動畫的時候會比較融會貫通。(圖4) 向右的擦去(圖4) 自左擦去的轉場效果 用到的就是clip-path 的遮罩。 心得 有些網站一開始 會加入的載入動畫、滾軸到哪 在網頁上方加入的 閱讀進度、滑到照片 會有放大效果....等，這些加入之後網站看起來就高級許多。 我還滿喜歡參考日本的網站、國外的靜態demo網站。 大多會在css、svg、js 搭配做互動，第一眼就會讓人印象深刻，也使網站的增加了許多特色。  當動畫效果越特別，要做的css 就越多。 這次在做公司的官網時，就加入了許多互動特效....會發現到不是做不到，只有你想不到...😉

  用notion 比較好方便做筆記，所以這次的筆記直接是在notion 上觀看。 點我 查看筆記 notion 筆記

 工作一陣子後，難免會需要出些手冊、說明文件。 幾乎市面常見的筆記工具，我也都使用了一輪。 以前蠻常使用Evernote 大象筆記，但後來很多功能都改成要收費，漸漸的就開始棄用它了。 現在常用的是notion 他的功能也很多，剛開始用會不太習慣，但花些時間摸鎖，會覺得蠻好用的。 整理成筆記，在寫的過程中 就會把邏輯思維再整理一次。 好比  部署環境的配置、IIS的設定 ，這些就可以寫成筆記也要包含圖，確保之後2個月後回來看 還會知道怎麼安裝，最好是把自己當作小白菜那種，從無到有的 寫詳細的圖文說明，但這真的是個很好回復記憶的做法 。 經驗分享 最近，我需要部署環境 到3台電腦， 有時安裝少了些什麼，就可以透過筆記再重新檢查，也方便交接，在安裝速度上也會快很多。 再安裝配置環境的時候，有很多要注意，最好也把安裝的軟體也打包。因為不知道安裝的環境是不是有網路。 心得 寫筆記真的是很需要花時間去整理的事情。有的時候會隨手記下 當時寫的片段 或者TIPS，但是過了久一點就會忘記，這時就需要整理並有條理地整理，讚重複翻閱時也能回憶當時的香味 (痛苦) 。 最近做了醫院的系統，在安裝環境的時候會遇到問題，網路上雖然有教學，但還是要在自己的環境手把手在安裝一次，也並不是容易的事情，因為每個環境多少會不同，更何況還有其他台電腦要安裝，網路上找到的有可能只是有相似環境提出的作法，實際上遇到的問題也多少會不同。 為此 也寫了不少安裝文件及教學手冊，這也當作是訓練文筆吧💪。 朋友笑說：所謂的文件是寫給你自己看的 未來的我： 對壓......還好有前人的努力

 上回提到用 IntersectionObserver 的方式來實現無限滾軸，當觀察目標 進入到畫面 就新增20筆。 這次的作法，則換成 只要滾軸 到達了底部 就做載入(圖1)；不再是 監測某個元素，是否出現在螢幕畫面。 滾軸到了底部更新(圖1) 這次的做法比較簡單，直接監測滾軸(圖2)是否已經滾到底部了，如果有滾到底部 再去做更新內容。(圖3) 監測滾軸(圖2) 監測滾軸是否滾到底部(圖3) 心得 IntersectionObserver 做的無限更新，在實作後加上查詢功能，會遇到個問題。原本的監測元素A會受到影響查詢功能，監測到的項目有可能不再 或不是原本的項目，則需要在重新綁定，否則有可能出現 滾軸無法動。 因為查詢產生出來的已經不是原本的tr 內容。 換句話說，只要IntersectionObserver 監測的內容有改變，就需要重新綁定監測。 ------------------------------------------------------- 用監測scrollbar 來做無限更新，就不會遇到這個問題。因為scrollbar 重頭到尾並沒改變內容，只有改變長度。 加上查詢後， 長度則可能停留在查詢前 ，則需要重新。 ex 在查詢前，長度在 500px； 查詢後項目 只顯示 2項，總高度 110px，但因為採用無限更新，滾軸 並不會重新渲染，所以就必須 將滾軸 scrollTo。 這兩者差異並不算太大，作法上的不同： 一個要重新綁定，一個要將滾軸 重置。

 來到這間公司，進步的速度就像是坐上音速飛機一樣，當你回過頭來已經到了另外一地了。 在這間公司應徵的是前端，上一份做的是做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整理成 說明手冊。 一說下去有很多說不完⋯⋯ 在執行專...