使用 Rainbow Bracket 讓 Block 更明顯
Rainbow Bracket 是 VS Code 很有名的 Extension，讓 Block 以相同顏色顯示，使 Code 結構更清楚，WebStorm 也可使用。
Flexbox 之 Cross Axis 對齊
row-direction 主要定義 Main Axis 方向，需搭配 justify-content 設定 alignment；若要針對 Cross Axis，則要使用 align-items。
發現 ECMAScript 本質
大家在學習 ECMAScript 時，是否覺得跟主流 OOP 程式語言不太一樣？為什麼沒有 Interface？為什麼很難使用 OOP Design Pattern ？為什麼我會從很討厭 ECMAScript 到很喜歡 ECMAScript？這要從其本質談起，因為我發現了其可愛一面。
如何在 WebStorm 快速切換 Word Wrap ?
由於 HTML 是橫向發展，如 VS Code 的 ⌥ Z 快速切換 Word Wrap 就相當實用；WebStorm 雖然也有提供相對應的 Soft-Wrap，卻沒提供 Shortcut，本文提供兩種方式解決。
如何移除舊版 WebStorm ?
使用 Toolbox 更新 WebStorm 時，預設並不會移除舊版 WebStorm，JetBrains 本意是讓你能快速 Rollback 到之前版本，但這也無形浪費 SSD 空間，其實也可以移除舊版 WebStorm，並設定只留下最新版本。
如何解決 CLI 啟動舊版 WebStorm ?
WebStorm 除了使用 Toolbox 啟動外，也可如 VS Code 使用 CLI 啟動，但實務上發現 Toolbox 更新 WebStorm 後，CLI 仍會呼叫舊版 WebStorm，該如何解決呢 ?
如何對 CSS Extract Variable ?
WebStorm 在 2019.1 開始支援 CSS 的 Extract Variable，可將重複部分直接抽成 CSS Variable，方便日後維護。
如何在 WebStorm 顯示 Shortcut ?
WebStorm 支援豐富的 Shortcut，在 Demo 時若想將 Shortcut 即時顯示，需另外安裝 Presentation Assistant。