Category Archives: Front-end

在line chrome extension，常常看到 \ 顯示成 ¥，其實這是因為字型的問題，部分日本字型會有此行為，其中一個是Gothic字型 原因可參考: https://tex.stackexchange.com/questions/406247/yen-%C2%A5-symbol-for-backslash-in-texworks Some Japanese fonts, e.g., MS, Yu, IPA, and Meiryo, render U+005C (REVERSE SOLIDUS) as a yen symbol while yen symbol is assigned to U+00A5 and 0xA5 in Latin-1 encoding. This stems from … Continue reading →

在chrome測試set cookie時，發現有時候http可以set成功，可是有時候會set失敗 通常set cookie失敗，主要是一些條件不符合，例如有Secure字串，可是不是透過https，或是SameSite=None可是沒有Secure 上面這個例子很單純，Path (cookie作用路徑)，HttpOnly不讓js code存取cookie，但是瀏覽器卻報錯: This Set-Cookie was blocked because it was not sent over a secure connection and would have overwritten a cookie with the Secure attribute. 在確認server side送出來的Set-Cookie header的確沒有Secure後，查了一下網路資料 https://stackoverflow.com/questions/52763345/browsers-ignore-set-cookie-response-header-if-we-try-to-set-a-cookie-which-was-s https://www.petefreitag.com/item/857.cfm 上面提到如果browser同時有該網站的http/https cookie，如果在https cookie中有設定Secure，則該屬性會影響到http的Set-Cookie行為 另外參考 https://tools.ietf.org/html/rfc6265#section-8.5 … Continue reading →

在處理json回傳內容時，常常需要驗證內容是否符合預期，或是要存取object nested field，如要檢查該field是否存在 時，可用 但這樣稍嫌麻煩，可用 lodash _.has來處理 參考: https://lodash.com/docs/4.17.10#has

polyfill的作法 這個方法是在webpack doc (https://webpack.js.org/guides/shimming/)看到的， 但其實動態load script的方式在很多地方都有應用，例如JSONP Getting Started + 在browser內javascript環境下的io都是asychronous的，所以為了要動態load script並確保執行順序，利用動態插入<script> tag 以及script synchronous load的特性來完成。

主要參考自: http://learnlayout.com disaply是在css layout中最基本的property，每一個element都有預設的display property block: 從新的一行開始盡量佔據(<div>, <p>, <form>) inline: 不會換行，忽略height, width, margin…etc屬性 (<span>, <a>, <img>) inline-block: 兼具inline的特點(不換行)，但又可以有寬高 none: 不顯示，不佔據空間 (<script> 。比較: visibility: hidden) 參考: https://developer.mozilla.org/en-US/docs/Web/CSS/display 置中: margin: 0 auto position屬性: 預設值:static(等於沒有設定position) relative必須配合其他屬性才有作用 fixed是保持在網頁的固定位置(relative to viewport)，不會被scrollbar影響，適合做浮動的nav bar或是footer absolute是相對於nearest positioned ancestor(positioned代表不是static) … Continue reading →