SmooshGate

之前應該沒在這邊提過這件事,總之就是之前 TC39 有個 flatten 的 proposal,搞一搞後,發現這東西實做啟用後 MooTools 會爛掉,詳細的原因 Google 那邊有一篇文章解釋,標題就是 SmooshGate,Smoosh 這個單字其實有點少見,我大概查一下,雖然有說是 flatten、squash 的意思,不過目前覺得應該是作畫時把顏料抹平那種動作感覺最對吧,總之,當初為了這個問題第一個提案的改名就是smoosh,不過這個單字整體感覺和 flatten 差距實在太大,所以出現一堆聲音,有的是建議加上"use es2019"的 statement 來開啟flatten,像是 stirct mode 一樣,有的建議其他名字,當然也有些人是覺得管 MooTools 去死的,不過因為 Don't Break the Web 的大原則所以還是要處理這個問題。

其實我覺得當初提案 smoosh 的人搞不好是故意挑這個字的,藉此增加話題性引發討論和建議,效果其實很好,在 Twitter 上還出現了#SmooshGate這樣的 hashtag,不過,總之在最近一次五月的 TC39 會議,確定 proposal 改新的名稱:flat,雖然詞性不同,不過大家都還蠻可以接受,或許也可能是相較於 smoosh 來說很可以接受吧。


GitHub Pages Custom Domain HTTPS

GitHub Pages

等了好久終於出來的功能,追了蠻久,昨天 DK 也有提到,其實正式發佈前就看到有人已經可以用了,不過總之這篇稍微記錄一下如果已經是舊有的 GitHub Pages 還不能用可以怎麼處理,不過不完全有效,舊有的專案在設定看起來會像是:

GitHub Pages

下面有寫說因為用了 custom domain 就不能用,這時候把 custom domain 刪除,然後儲存重新加回去就會變成:

GitHub Pages

然後就等,我大概是等到隔天就有了(變成第一張圖的狀態),不過這幾天剛好完全沒空,到現在才有空檔紀錄一下。


Dank Mono

Dank Mono Regular,

上週在 Twitter 上看到有人轉推作者的發文,發現這個新的 coding 字型:Dank Mono,然後我就買來用用看了,在這之前我是用Source Code Pro的,一剛開始設定下去覺得還有點不習慣,不過強迫用了一下卻適應的蠻快的。

套用上我的編輯環境後是這樣:

Dank Mono,

閱讀「Dank Mono」全文

TFN 域名轉出

dig markdown.tw,

我的 markdown.tw 在 TFN 註冊的,其實一直很想轉出,但是很怕轉的過程出意外,遲遲沒動手。不過剛剛看到 GitHub Pages 用 custom domain 也正式支援 HTTPS 了,如果是設定 A record 的話需要更新 DNS 設定,於是我就決定認真的來處理這件事,不意外的介面很難理解,決定記錄一下幫助眾生~

閱讀「TFN 域名轉出」全文

ESLint Plugin 入門

ESLint

最近寫了個簡單的 ESLint plugin,來記錄一下一些基礎知識,我做的 plugin 很簡單,叫做eslint-plugin-no-parameter-e,這個 ESLint plugins 做的事情只是檢查所有 function 的參數,然後如果有任何一個參數名是e的話就警報,這條 rule 其實是為了避免把errorevent簡寫成e,會容易混淆。

接下來進入正題,ESLint 基本上就是透過ESPree這個 parser 先把程式碼轉為ESTree相容的 AST,EStree 是個 de facto standard,是從 Mozilla Spider Monkey 用的 AST 演化而來,現在幾乎做 JavaScript 工具,會需要轉 AST 的話都會用這個格式;有了 AST 後,才來分析 AST 做檢查,然後現在有工具叫AST Explorer,非常方便,可以線上直接修改 code sample 看 AST 變化,可以用它來看你想要處理的 code 的 AST 結構,至於怎麼寫 rule 就看個人了,基本上就是監聽要注意的 node,然後檢查 AST 結構,有問題就呼叫 report 這樣。

第二點,npm module 的名稱要用eslint-plugin-開頭,官方說的規則,應該不遵守還是可以抓的到,不過就還是遵守一下免的有意外。

第三點,測試其實 ESLint 有 RuleTester 可以拿來寫測試用:

const rule = require('../rule.js')
const RuleTester = require('eslint').RuleTester

const ruleTester = new RuleTester();

ruleTester.run('no-parameter-e', rule, {
  valid: [
    'function a (event) {}',
  ],
  invalid: [
    {
      code: 'function e (e) {}',
      errors: [{ message }],
    }
  ],
});

很方便,都不用 test framework 了,並且有特別要求 valid 和 invalid 都要有 test case,不然測試就會失敗。

然後測試的時候是每個 rule 獨立跑,每個 plugin 可以有多個 rule,很多 plugin 是把不同 rule 都獨立一個檔案,每個 rule 可以丟的東西除了檢查外還有不少,像是說明文件、自動修復的動作等,詳見官方文件,我一開始是參考eslint-plugin-import的,不過現在初心者應該也可以先看我的eslint-plugin-no-parameter-e,東西更少一些。

下一個想來挑戰處理空行,看了一下感覺是比較困難啊~


➡ 看看其它文章