Stuff made by (takker):

  • /programming-notes/ScrapBubble@0.2.0

  • Based on [@daiiz/daiiz]‘s ScrapScript

  • image

  • Combines displaying links in speech bubbles and showing the content of a page on link hover.

    • You can hover over the links to see pages further ahead.
    • And you can also navigate to links in other projects.
      • In version 0.2.0, the ability to navigate to projects is restricted by a whitelist (takker)

Now that I understand the overview of React, I think I’ll revisit the code and update it to the latest version.

  • I want to have it installed after understanding it.

  • By the way, React is slightly different in terms of type definitions (takker)

    • Instead of React, I’m using Preact.
    • Other than the type definitions, they are almost the same.
  • GitHub - takker99/ScrapBubble: Show n-hop link destination pages beyond projects

    • It turned out to be bigger than I thought lol.
    • I stopped creating a hierarchical structure with directories, and this is what happened (takker).
    • I mostly write one function per file, so the file size shouldn’t be that big.
      • I see (blu3mo).
  • How does it even capture events like hover in Scrapbox?

    • I can’t find the code that is called by handlePointerEnter.
      • I don’t understand usePromiseSettledAnytimes.
    • Ah, I think I got it.
      • waitPointerEnter returns a Promise.
      • The function that resolves that Promise is held by the res state of usePromiseSettledAnytimes.
      • And that res state is assigned to handlePointerEnter.
      • So,
        • handlePointerEnter is called.
        • -> The Promise waitPointerEnter is resolved.
        • -> The processing that was stopped by await waitPointerEnter resumes.
      • That’s how it works.
      • And then, if the loop that is stopped by waitPointerEnter keeps running,
      • why can event = await waitPointerEnter(); be done?
        • If you pass the event as an argument to handlePointerEnter, it becomes Promise.resolve(event).
        • The argument of Promise.resolve can be assigned with const x = await Promise().
        • I see (blu3mo).
    • I understand the mechanism (blu3mo).
      • It’s a strange implementation.
        • Why does it respond to events by releasing the loop?
        • Why use Promises?
      • There is almost no benefit to this implementation in this case (takker).
        • So why did I do this? It’s just because I was impressed by [/miyamonz/async awaitで何かを待つような処理を同期的に書く](https://scrapbox.io/miyamonz/async awaitで何かを待つような処理を同期的に書く) and wanted to imitate it…
        • There is one small advantage though.
          • Only one loop is executed at a time.
            • Any pointerenter that comes while processing the loop after event = await waitPointerEnter(); is ignored.
            • If you simply use addEventListener("pointerenter", async (e) => {/*...*/}), the next callback may start executing before the previous callback finishes.
          • But I wonder if there is a need for such a guarantee in this program…
          • I see 🙏 (blu3mo).
    • Refer to these for more information (takker):

A tool that does so much with a UserScript..!

  • Is it correct to understand that it’s running something like React with a UserScript?

    • Yes, exactly (takker).
    • I’m using the lightweight version of React, Preact, in the UserScript.
      • In the original ScrapBubble, I had to implement these things myself and it was tough.
    • Are you reimplementing all the elements of Scrapbox (such as code blocks, Gyazo display, and video display) from scratch?
      • Yes, I am (takker).
      • It’s not that difficult because I can easily build the UI with something like JSX.
        • Adjusting the CSS might be a bit troublesome though.
  • I’m a bit scared that the code base is open for anyone to join /programming-notes.- If you copy and paste the [/takker/UserScriptをbundleするDeno script](https://scrapbox.io/takker/UserScriptをbundleするDeno script) into your own project, you won’t have any malicious code mixed in from that point on (takker).

    • If there was any code mixed in before that… there’s nothing you can do about it.
    • I see! (blu3mo)
      • (It’s amazing, they’ve thought of everything)
  • For now, I don’t feel the need to use it on my smartphone/iPad, so I installed it on my main PC with TamperMonkey.

    • I modified it to work with any project (excluding my own project).