[Daily Report] March 2019

[debbygigigi]

3/10 Sun. 回覆面試筆試 / 寫每週分享 medium

[debbygigigi]

3/16 Sat.
Todo

• 回覆面試 email
• review interview
• Javascript100days
• lidemy

[debbygigigi]

3/21

• 新發現：今天原本想嘗試在 Vue 裡的 scoped scss 使用 深度選擇器（deep selector），試了 >>> 和 /deep/ 都不行，後來在這個 issue 找到新語法 ::v-deep ，不過要安裝新的套件 @vue/component-compiler-utils
  ps. 原來英文版有提到新語法，但中文版還沒更新，結論是：

看文件要看英文版

[debbygigigi]

3/22

• 看 Lidemy 物件導向課程 class / prototype 原來是這麼一回事！
• CS50 puzzle day 想報名！不過應該要先解出去年的題目 XD
• 意外發現 Instagram PWA https://appsco.pe/app/instagram 好酷哦

ps. get offer today!!!

[debbygigigi]

3/26

在解一個 bug 的時候，發現 window.onscroll = function() {} 和 window.addEventListener('scroll', function() {}) 有差異，function 裡做的事都一樣，都是改變 data 的值，但 onscroll 不會真的改變，addEventListener 才會，這個還在待解中。

還有一個問題一直無解，就是目前 NUXT 的專案我在 chrome 一般模式跑會掛掉，但 chrome 無痕模式跟 safari 就可以.... 同事依樣的專案卻完全沒碰過這個問題，也是待解中。

[debbygigigi]

3/27

寫了一個測試 demo ，真的只有 addEventListener 才會改值， 不過在 vue 的論壇找不到關於用 window.onscroll 的問題，因為好像沒人用。

今天在苦惱圖片要用多少解析度的問題，之前這部分一直沒弄清楚，雖然設計師也會出 1x, 2x, 3x 的圖，但網頁上都只拿 2x 的圖。爬了一些文章終於瞭解了一點，引用對的解析度能有助於提升網站的優化，例如電腦版只需要 1x 的圖卻下載了 2x 的圖，算是一種資源的浪費。

1. img 的 srcset 屬性

<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />

ref: https://www.w3cplus.com/responsive/responsive-images-part-1-using-srcset.html

2. 透過 media query 偵測裝置的像素

@media all and (-webkit-min-device-pixel-ratio : 1.5),
 all and (-o-min-device-pixel-ratio: 3/2),
 all and (min--moz-device-pixel-ratio: 1.5),
 all and (min-device-pixel-ratio: 1.5) {
 
  div.background {
    background-image: url(./images/yourimage@2x.jpg);
    background-size: 200px 200px;
  }
}

ref: https://ryanbenhase.com/easily-implement-2x-retina-background-images/

favicon cheatsheet

[debbygigigi]

3/28

研究 pixel
https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922

為什麼設計師要出那麼多種尺寸的圖
1x, 2x, 3x 顧名思義就是一倍二倍三倍
今天假設有張圖是 500x300，2x 就是 1000x600，3x 就是 1500x900 以此類推
為什麼會有1x, 2x, 3x這樣的區別是因為螢幕上 pixel 密度的不同