[javascript] delete 和設為 undefined 差別在哪?

前一陣子在討論刪除一個變數的屬性值,應該用 delete 還是設為 undefined 呢? 讓我們來看看兩種作法差別在哪 undefined單純只是將屬性值改為 undefined ,屬性仍然存在. delete刪除此 Object 的屬性 直覺看起來好像 delete 可以準確的刪除此屬性值,但有個要注意的地方是 delete 並不會刪除 prototype chain 的屬性值 舉個例子: 因此可能要注意的是,如果要避開 prototype chain 上面的屬性值 必須要使用 hasOwnProperty 進一步檢查屬性值 XD 參考資料: https://stackoverflow.com/questions/14967535/delete-a-x-vs-a-x-undefined

Continue reading


[css] initial/inherit/unset 有什麼差別呢?

常寫 CSS 應該都經常遇到樣式被覆蓋後不如預期希望回復為初始值等等的問題 常見的場景可能是使用 bootstrap, semantic 等等的 css framework 時,可能是 display, color 等等的屬性值被繼承或更改,希望回復為預設值或繼承至 parent. 另外在專門做網頁第三方元件,像是 disqus 這種必須放在百百種網頁上的元件,在技術規劃初期就將所有 CSS 做上 all: initial 更是不可或缺的事情! 以下就讓我們看看 initial/inhreit/unset 三者的差別吧 ~ initial將此屬性值恢復為瀏覽器預設值.備註:所有 browser 都有自己的一套預設樣式,就像 input 在各 browser 都長不一樣是相同的道理 inherit繼承 parent 的設定值 unset如果 parent 有設定此屬性值則 inherit ,反之則 initial 讓我們來個簡單的例子,相信你也可以很簡單弄懂他們的差別 XD 首先有個 HTML: 然後對應的 CSS: 結果: 在 Chrome 上看的結果 因為 inherit 是繼承,所以會套用到 […]

Continue reading


Object.defineProperty 用法簡介

Object.defineProperty 可能大家不是很常用到,但其實它無所不在,甚至於許多 mvvm, mvc 的資料繫結都是透過此接口達成的. 像是以下這段簡單的 code 其實就等價於 可以發現 object.defineProperty 有幾個可設定的 descriptor 接下來本文將針對這幾個設定的使用及應用場景做個說明 configurable: 預設為 false 已定義的 descriptor 是否可被更改 (writable:true 除外),以及 property 是否可被 delete 常見的例子是設定為 configurable:false 避免設定的 property 被 delete e.g. configurable:false 的例子其實蠻常見的,像是 browser 內建的 location writable: 預設為 false 常見的是與 configurable:false 搭配使用,可以避免 descriptor 與value 被做任何的修改.(進階一點的方法可以用待會介紹的 getter) enumable: 預設為 false 此 property 是否可以被列舉(for… in/Object.keys) 常用作於類似 prototype […]

Continue reading


Natas wargame (level 0 – 10) 詳解(1)

Natas 是一個 Web 資安的 wargame,蠻適合剛入門的新手玩玩 這邊分享一下我自己每關的思路,為了保有遊戲體驗,就不分享破關的帳密囉 😛 wargame 網址: https://overthewire.org/wargames/natas/natas0.html 每關的帳號/密碼: natasX/{password} e.g. level0 ( http://natas0.natas.labs.overthewire.org/ ) 下面就開始分享破關思路惹~ level 0 You can find the password for the next level on this page. 嗯,右鍵打開 web devtool(element tab) 就找到密碼了 level 1 You can find the password for the next level on this page, but rightclicking has been […]

Continue reading


如何刪除 X-Powered-By:Express

第一次用 Express 作為 application server 時,發現 response header 總是會帶有 X-Powered-By:Express 在這人心險惡的時代(? 不免會希望暴露的資訊越少越好 XD 移除 X-Powered-By:Express 的做法 (加在 app.js) 如果 Express 是大於 3.0.0rc5 的版本 更早之前的版本 參考資料: https://stackoverflow.com/questions/5867199/cant-get-rid-of-header-x-powered-byexpress

Continue reading


用 CSS 實現 Tracking

最近看到幾個使用 CSS 做追蹤的小技巧,在這也記錄一下 XD 使用者滑鼠移動到特定元素時 使用者點擊特定連結時 特定 browser 偵測(e.g. chrome) 字體支援度偵測 (e.g. 如果不支援 Calibri 字體) checkbox 被選取時 以上是幾個可能比較常用的追蹤時機,比較適用在特定環境偵測的情境下. 實務上通常是配上一個 unique 的使用者識別代號,相較於普遍使用的 js 追蹤技術還是有些地方需要修改及調整 XD 參考資料: https://github.com/jbtronics/CrookedStyleSheets

Continue reading


[vscode] 儲存時自動修正程式碼格式

vscode 預設是沒有開啟儲存時自動呼叫 formatter 的自動修正格式功能 因此每次若要修正格式必須輸入 Format Document 的指令 若要開啟儲存時自動修正格式功能,可以在setting.json 新增此行 如果想更精確的指定特定語言才啟用,像是 javascript 可以用以下設定 參考資料: vscode 設定官方文件 針對特定語言的設定

Continue reading


[firefox] iframe 或頁面的內容會被 cache 住

前提: 在撰寫這篇文章時,所測試的 Firefox 版本為 70.0 也許之後版本就更改和 Chrome, Safari 行為一致也不無可能 記得當初使用 Firefox 5x.x 版時,就曾經踩過這個類似的雷,重現流程是 瀏覽一個有 iframe src 的 html 頁面 打開 dev tool 更改 iframe 中的任意內容 點擊頁面上的任一連結(導內/外都可以) 觸發瀏覽器上一頁行為 然後會發現 iframe 的內容仍然是你更改後的內容 在 Firefox 官方上也有許多 iframe cache 相關的 issue,像是以下: https://bugzilla.mozilla.org/show_bug.cgi?id=356558 https://bugzilla.mozilla.org/show_bug.cgi?id=1349921 當初有一系列的解決辦法: 為 iframe src 加上 cache-buster 為 iframe name 加上 cache-buster 為 iframe id 加上 cache-buster […]

Continue reading


[css] 搞懂 flex-grow, flex-shirk 及 flex-basis 三種屬性

在 CSS3 支援  flexbox 排版以後,相信許多人已經使用了 flexbox,還沒使用過的可以去玩 Flexbox Froggy 學習一下 XD 最近使用 flexbox 製作 RWD 網站時,順便弄清楚了 flex-basis, flex-grow , flex-shrink 在這邊紀錄一下 flex-basis 決定 flexbox 排版的 item 的初始寬/高(取決於 flex-direction 的方向). auto 預設值,根據 item 的內容決定寬/高 <width/height> 指定特定的寬/高,可以是數值也可以是比例. Q: flex-basis 和 width/height 有什麼不一樣? A: 當 flex-direction: row 時,flex-basis 會決定了 width. 當 flex-direction: column 時,flex-basis 會決定了 height.  備註: position: absolute 的 elment 因為不會是 flexbox 排版因此無法透過 […]

Continue reading