積沙成塔，滴水穿石

最近接手的專案，它的底層用bootstrap3.4 來撰寫。 bs3.4 的一些css utility 已經太舊了， 在使用上沒有bs5 來的方便。 所以就只好compile  bs5.3 向下兼容性的。 在基礎上 還是保有bs3.4 的功能，ex: <p> 、<a>  、.col-lg-3  這次的向下兼容改版不好改，有些地方需要修改底層加入特殊prefix，前提是不能影響既有bs3框架。 這次就用了postcss 來幫忙做css 後處理 SCSS 程式碼撰寫 → Utility 前綴撰寫→ PostCSS→ 最終 CSS 輸出 現在是只要加入bs5- 前綴 就能使用bs5 的語法，幸好bs5 寫得很多是變數，所以在使用postcss 改， 會比較輕鬆

前言   最近應徵的工作收到了考題，我覺得很有意思。 考題的題目是實作figma 的 圖片成網頁設計稿。 考題的方向分為2個部分：實作題、筆試題。 考題方向 實作題： 在實作題的項目有分為2種，icon製作(圖1)、切版(圖2)，實作結果會放在心得分享。 icon製作(圖1) 切版(圖2) 筆試題(圖3) 筆試題(圖3) 心得 筆試的部份不會太刁難，幾乎就是看考觀念、實作經驗。 實作題的部份，我個人是覺得沒有很難，但是在icon (圖4) 不能用圖片要手刻，就需要花些功夫，但因為滿有意思的在於手刻icon 不能用svg，所以就花了些時間思考一下製作，找個時間我應該來做個curve 曲線 優化，目前做的是像素方塊，看起來好硬😅。 切版成品分享   珍珠奶茶分享icon icon(圖4) icon製作這個可能是想看基本功吧！如果考的是canvas、svg 、three.js 這個我需要花些時間去思考和製作，還有一堆還沒研究完的領域

  前提 這次做到的案件，不乏影片介紹。於是就在首頁遷入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)

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