/plushcap/analysis/ably/cursor-everywhere-experiment

Cursor Everywhere: An experiment on shared cursors for every website

What's this blog post about?

The author discusses their experience with creating a Chrome plugin called "Cursors Everywhere," which allows users to share their cursor positions with everyone else on the website using the same plugin. They started by defining the requirements for this concept and chose JavaScript as the language of choice due to its compatibility with browser details like URLs and active tabs. The author initially faced issues with different screen sizes and resolutions, leading them to modify the approach to use relative positions instead of absolute ones. They also introduced position interpolation and message batching for bandwidth efficiency. To improve cursor position representation, they considered the element under the cursor by using the CSS path of the element. However, they still faced issues with accurate representation due to varying coordinates on different users' screens. The author suggests that websites would need to have unique IDs or data attributes for elements that are important for having an accurate cursor representation and map equivalent elements across different views. Despite falling short of designing a solution to work for accurate canvas representation, the author still had a tool that somewhat worked across web pages. They hope that sharing this experience might help others when it comes to creating their own interactive elements on their websites.

Company
Ably

Date published
Aug. 18, 2023

Author(s)
Thomas Camp

Word count
2872

Language
English

Hacker News points
None found.


By Matt Makai. 2021-2024.