摘要：
從零實現的瀏覽器Web腳本 在之前我們介紹了從零實現Chrome擴展，而實際上瀏覽器級別的擴展整體架構非常復雜，盡管當前有統一規范但不同瀏覽器的具體實現不盡相同，并且成為開發者并上架Chrome應用商店需要支付5$的注冊費，如果我們只是希望在Web頁面中進行一些輕量級的腳本編寫，使用瀏覽器擴展級別的 閱讀全文
摘要：
初探富文本之React實時預覽 在前文中我們探討了很多關于富文本引擎和協同的能力，在本文中我們更偏向具體的應用組件實現。在一些場景中比如組件庫的文檔編寫時，我們希望能夠有實時預覽的能力，也就是用戶可以在文檔中直接編寫代碼，然后在頁面中實時預覽，這樣可以讓用戶更加直觀的了解組件的使用方式，這也是很多組 閱讀全文
摘要：
ReactPortals傳送門 React Portals提供了一種將子節點渲染到父組件以外的DOM節點的解決方案，即允許將JSX作為children渲染至DOM的不同部分，最常見用例是子組件需要從視覺上脫離父容器，例如對話框、浮動工具欄、提示信息等。 描述 <div> <SomeComponent 閱讀全文
摘要：
# SVG與foreignObject元素 可縮放矢量圖形`Scalable Vector Graphics - SVG`基于`XML`標記語言，用于描述二維的矢量圖形。作為一個基于文本的開放網絡標準，`SVG`能夠優雅而簡潔地渲染不同大小的圖形，并和`CSS`、`DOM`、`JavaScript` 閱讀全文
摘要：
# 從零實現的Chrome擴展 `Chrome`擴展是一種可以在`Chrome`瀏覽器中添加新功能和修改瀏覽器行為的軟件程序，例如我們常用的`TamperMonkey`、`Proxy SwitchyOmega`、`AdGuard`等等，這些拓展都是可以通過`WebExtensions API`來修改 閱讀全文
摘要：
# 基于drawio構建流程圖編輯器 `drawio`是一款非常強大的開源在線的流程圖編輯器，支持繪制各種形式的圖表，提供了`Web`端與客戶端支持，同時也支持多種資源類型的導出。 ## 描述 在我們平時寫論文、文檔時，為了更好地闡述具體的步驟和流程，我們經常會有繪制流程圖的需求，這時我們可能會想到 閱讀全文
摘要：
# React閉包陷阱 `React Hooks`是`React 16.8`引入的一個新特性，其出現讓`React`的函數組件也能夠擁有狀態和生命周期方法，其優勢在于可以讓我們在不編寫類組件的情況下，更細粒度地復用狀態邏輯和副作用代碼，但是同時也帶來了額外的心智負擔，閉包陷阱就是其中之一。 ## 閉 閱讀全文
摘要：
Hooks與事件綁定 在React中，我們經常需要為組件添加事件處理函數，例如處理表單提交、處理點擊事件等。通常情況下，我們需要在類組件中使用this關鍵字來綁定事件處理函數的上下文，以便在函數中使用組件的實例屬性和方法。React Hooks是React 16.8引入的一個新特性，其出現讓Reac 閱讀全文
摘要：
初探富文本之CRDT協同實例 在前邊初探富文本之CRDT協同算法一文中我們探討了為什么需要協同、分布式的最終一致性理論、偏序集與半格的概念、為什么需要有偏序關系、如何通過數據結構避免沖突、分布式系統如何進行同步調度等等，這些屬于完成協同所需要了解的基礎知識，實際上當前有很多成熟的協同實現，例如aut 閱讀全文
摘要：
初探富文本之CRDT協同算法 CRDT的英文全稱是Conflict-free Replicated Data Type，最初是由協同文本編輯和移動計算而發展的，現在還被用作在線聊天系統、音頻分發平臺等等。當前CRDT算法在富文本編輯器領域的協同依舊是典型的場景，常用于作為實現文檔協同的底層算法，支持 閱讀全文