In this web content, the author continues the exploration of Conflict-free Replicated Data Types (CRDTs) by demonstrating how to build a collaborative pixel art editor using CRDTs. The author provides a class called PixelData that acts as a wrapper over a Last Write Wins Map (LWW Map), which stores the pixel colors as tuples of three integers representing the red, green, and blue values. The PixelData class includes methods such as set, get, and delete for manipulating the pixel colors. The author also explains the visualization of the pixel values and timestamps for understanding how the CRDT behaves. Finally, the author sets up the UI using HTML, CSS, and JavaScript. The UI includes two canvas elements for Alice and Bob’s editors, a color input, and event listeners for handling user interaction. The PixelEditor class is introduced with some placeholder methods, including color setting, event handling, and pixel painting. The #draw method is implemented to allocate a buffer and draw the pixel data onto the canvas. Overall, this content provides a detailed and practical guide to implementing a collaborative pixel art editor using CRDTs.
https://jakelazaroff.com/words/building-a-collaborative-pixel-art-editor-with-crdts/