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

Posted in Front-end | Leave a comment

Set-Cookie notes

在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

Posted in Front-end | Leave a comment

check object path

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

Posted in Front-end | Leave a comment

js polyfill tips

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的特性來完成。

Posted in Front-end | Leave a comment

css layout

主要參考自: 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

Posted in Front-end | Leave a comment