用 Brave 的 brave://flags 設定

因為 Brave 會繼續支援 webRequest 的完整功能,所以早早就已經跳槽過來,不過 Brave 的垃圾功能太多 (一堆 cryptocurrency 相關的功能),有需要全部關掉,所以裝好後第一件事情就是到 brave://flags 裡面把所有 Brave 自家功能的設定關光光,只留下 Brave Sync V2 的功能。

先前都是用滑鼠一個一個關,剛剛覺得太累了,研究一下 js 直接在 dev console 裡面關:

document.querySelector('flags-app').shadowRoot.querySelectorAll('flags-experiment[id^=brave]').forEach(flag => {
  flag.shadowRoot.querySelectorAll('option').forEach(o => {
    if (o.innerText === 'Disabled') {
      o.selected = 'selected';
      o.parentElement.dispatchEvent(new Event('change'));
    }
  });
});

這樣會全部把 brave 開頭的 feature flag 都關掉;最後再手動把 Sync V2 開回來就可以重開 Brave 了。

後續就是 GUI 上面的選單再調整成自己要的。

這邊搞 javascript 的部分有遇到四個地方要處理... 第一個是現在 dev console 預設不讓你貼東西進去,貼了以後會顯示要輸入 allow pasting 後才行,這個字串以及方法之後不知道會不會改。

第二個是遇到 querySelectorAll 穿不過 shadow DOM,所以可以看到程式碼裡面需要先選出 shadow DOM 元素,用 shadowRoot 鑽進去再 querySelectorAll 一次。

第三個是 css selector 沒辦法針對 innerHTML 或是 innerText 的內容判斷,所以得自己拉出 option 後對 innerText 判斷。

最後一個是改變 select 的值後,得自己觸發 change event,這樣才會讓 Brave 偵測到並且儲存。

MDN 上的 CSS Layout cookbook

MDN 上看到「CSS Layout cookbook」,目前整理了六種情境,包括了設計方式與瀏覽器的支援度。

看到「Center an element」有種苦笑的感覺啊... 以前弄這個都是 workaround,現在都有對應的 CSS 可以處理了。

AWS 的 Developer Support Plan 漲價

AWS Support 中的 Developer Support Plan 漲價了:「AWS Support announces update to Developer Support plan」。

本來是固定 $49/month,現在變成 $29/month 或是 3% (取高的,也就是超過 USD$966.66/month 後要以 3% 計算):

A new pricing model for our Developer Support plan has been launched, reducing the entry cost from $49 per month to $29 per month, while providing the same level of customer service and support. As of July 26th, 2016 all new AWS accounts subscribing to Developer Support will receive the new pricing, set at the greater of $29 or 3% of monthly AWS spend.

大概是因為很多 production 用戶都只申請這個吧 (只是為了開 ticket 而已),不過這邊只提到「all new AWS accounts subscribing to Developer Support」,沒提到舊的用戶會怎麼處理...

Google Chrome Developer Tools 裡的 Network Filter

在「Chrome Network Panel Filter: Domain」這篇看到有趣的用法:

輸入完 domain: 後會列出許多選擇讓你選,還包括了 wildcard... 這功能真不錯 @_@

用 jQuery Audit 在 Google Chrome 的 Developer Tools 看到 jQuery 的資料

在「jQuery Audit lets you analyze jQuery from Chrome Developer Tools」這邊看到 jQuery Audit 這個 Google Chrome 的套件。這個套件讓你在 Developer Tools 裡看到 jQuery 的資料:

在大家都用 jQuery 操作的情境下,這個套件超好用...

Mozilla Developer Network (MDN) 上的 JavaScript 教學

Mozilla Developer Network (MDN) 寫了一篇關於 JavaScript 的介紹文章,算是以現在的角度來教 JavaScript:「A re-introduction to JavaScript (JS tutorial)」。

不是給完全不懂的人入門看的,而是對程式語言有了解的人看的。

文章裡面不單純只是教學,還引用了許多重要的文獻,尤其是 ECMAScript 規格書。有想要考據確認規格書怎麼定義會很方便。

而最後面還提到了 browser 上 DOM 實作時的 memory leak 問題以及解法,這對於現在 single page application 的應用也愈來愈重要了。