In the Making of Mnjul’s Intimate Home 4931 (XI)

上一篇在這裡喔。

總之就是想到什麼可以改進的地方,或是看到什麼新技術覺得可以拿來學學用,就來試試看~

  • 關於各種用 XHR 載入的 binary resource ,像是字型跟圖片,其實不用轉成 Data URL,直接用 Blob URL 就好啦!畢竟現在都 2016 年了。這樣一來,其實發 XHR 的時候也不需要使用 arraybuffer 的回傳型態,直接指定 blob 回傳型態,然後一口氣使用 URL.createObjectURL() 就好。當然也不用 arraybuffer to base64 converter。不過這樣一來,我的 loadfile.php 就要正確地吐 Content-Type header 就是,不過這也是小事一樁啦,畢竟檔案都是我的。至少 inspector 的 DOM 帳面上看起來比較乾淨,像是 style tag 裡面就不會有一大沱的 base64 字型檔案內容。
  • 本來一直想要把我自己寫的 jQuery.fn.crossCSSByValue 這個 helper function ( 用來在 css value,而不是 property,加上 vendor prefix )改用 jQuery cssHooks 來做,但思索半天都覺得不會比較簡單,就放棄了。
  • Windows 10 的 Edge 瀏覽器可以正確顯示我自己亂搞過的華文仿宋 web font,所以我決定一口氣不支援 IE 11,也不修 IE 11 上面的各種 bug了。
  • 在 Fragments 或 Shards 慢慢載入內容的時候,我之前不知道為什麼寫了 $parentContainer.append($child[0].outerHTML); 這種 code。實際上只要寫 $parentContainer.append($child); 就好了啊啊啊啊,省了 serialization to HTML 跟 重新 parse 的時間!
  • Ego、Fragments、Shards 的滑鼠 hover 會變亮的 code,其實除了正常的 :hover CSS 以外,還有「滑鼠滾輪捲動時,如果游標在文字上面,也要自動變亮」的 code。以前是用 document.elementFromPoint(),然後再用一個 while loop 一路往 DOM tree parent 找來決定滑鼠是不是在一組文字架構上,然後正確打亮那整組文字架構。後來發現 jQuery 的 closest() 就可以做到這個功能,而且整體 code 看起來比較簡單。
    • 我原來的 while loop 其實不用一直 backtrack 到 <body> 才知道找失敗,而是到某個 container element 就知道找失敗了,可以 early break。
    • 但 break 的時候必須要看有沒有找到,就要額外設一個 flag ,然後 loop 外面再針對 flag 做事。
    • 但因為 closest() 也可以傳入多個 selector,所以同樣的邏輯只要看 closest() 的回傳值就可以搞定了。
  • 接受了太太的建議,把 Ubuntu 字型換成 DIN 字型,比較沉穩一點。另外也改正了 @font-face 的用法,把 font-weight 正確放在同一個 font-family 的不同的 @font-face 裡面。
  • 背景音樂拿掉 OGG 格式啦!因為 Firefox 有陣子前就開始不管是什麼作業系統都支援 MP3 了。
  • 另外,CSS 跟 JS minification 改用 clean-css 跟 UglifyJS 了( 依然採用 Refresh-SF 的線上服務,我好懶得自己做 automation tool 啊!)
    • 但是 clean-css 也會把 hsla(--var(-something), 0%, xx%, xx) 弄成 hsla(--var(-something),0,xx%,xx),那個 saturation 少了百分比,Chrome 就爛掉了,我還得手動用 regexp 改回來。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *