前端冷知識/小技巧分享

大家好，我是奶綠，今天來分站一些前端相關的冷知識和小技巧。

1 CSS 100vh
100vh 在 iOS/Android 上會包含 addressbar 和 toolbar，所以你的元素有可能會被蓋到。

2 JS fetch
Server Respone 400 error，也是會被到 then，所以要另外處理才會被到 catch。

fetch('/some-400-error')
  .then(res=> 在這裡要判斷)
  .then(()=> {
   })

3 JS ES6 defaultValue
defaultValue, null 不算，一定要是 undefined。

const foo = (value = 'foo') => { console.log(value)}
foo(); // output -> 'foo'
foo(null); // output -> null

4 JS Cookie / localStorage
Cookie 可以跨子 domain 存取，但 localStorage 不行。
Cookie 一定會在 ajax 時，自動帶入，但 localStorage 不會。
Server Side 可以在前端 Request 時讀寫 Cookie，但 localStorage 不會。

5 Chomre Devtool
console 面版可以直接用 await，不需要 async。

await fetch().then(res=>res.json())

6 Mobile/Pad Device
點擊元素會觸發 hover，這也是為什麼有些時候要點二次。

7 Video
vidoe 要能自動播放，需要加上 muted 和 playsinline。

8 Device Low Power Mode
省電模式下，video 一率不能自動播放。

9 SEO
Google，Bing 支援 virtul DOM SEO，但 yahoo 還不支援。

10 element id
任何 dom element 有 id 時，可以直接在 window.id名稱 取得。

<div id="foo"></div>

window.foo // output => foo element

11 github.io
在任 github repo，按下 . (點) 就可以開啟 github.dev。

12 Touch
判斷是否為 touch 裝置，可以用
window.matchMedia(“(hover: hover)”).matches
或是用 CSS @media(poiner: coarse)

祝大家學習愉快。