Video Notes: Making Decentralised Emojis Happen

[rabbitpiedreams]

Lately I've been watching and making notes on some of Ms Boba's programming livestreams on twitch, hoping that they'll be able to help me pick up some skills. By collecting those notes into some kind of readable format, I hope to share what's in those videos for an audience who might not be up to watching them.

So let's get into what is, at time of writing, her latest video:

Making Decentralised Emojis happen

Details:

• title: Making Decentralised Emojis Happen
• url: https://www.twitch.tv/videos/2603084453
• TL:DR: Working on Astrolabe! Explaining what it is, how it works and then trying to make decentralised emojis on @atproto happen.

What's Astrolabe?

Astrolabe is a text editor that Ms Boba has been working on.

Ms Boba's Thesis

"Why is doing this important?"

I have tried to get this done for a while, but now its time has really come. Doing a text editor is hard. And when you are making a social platform and you want someone to come and do something new, the text editor is so important because it is the center of your expression.

Moving to a new piece of software often means you can't express yourself how you're used to expressing yourself, or the experience becomes clunky.

For example when bluesky didn't have the crop image feature, that stopped me from posting! It just becomes easier to post on twitter.

There's this friction that shouldn't be there, and I think people really underestimate its importance in making a social platform viable.

Of course you want to see your friends, but you also want to express yourself in a particular way and you want to keep the affordances that make it easy for you to do what you want to do.

This is is my thesis, and this is my solution for it. People should really just be able to take and editor, and do a really cool, really common thing in their internet culture with it immediately without having to deal with creating a text editor.

The editor should be yours, just like your data is yours. I want to choose how I write and how I communicate. Sure the platform can choose not to support certain ways, like you can choose not to support bold, that's fine, but like: if I want the markdown stars to be translated to bold or translate to italic, then my choice, you just translate it.

that is is my thesis. This is what Astrolabe is meant to enable.

-- Ms Boba

Decentralised emojis on the at protocol

Our decentralised emojis are going to be accessed via the at protocol. At protocol/Atproto is important to what's happening in this video, but it's also a lot to truly understand, so I'll give a short explanation here and link to a thorough one elsewhere. What you need to know about is the PDS.

The PDS -- the personal data server -- is a bucket of data that belong to a user, that can be transferred across servers. Right now, Bluesky is the biggest host of PDSs, but smaller ones exist too. Atproto is the protocol which defines how we interact with PDSs and what they look like.

In this PDS is where you'll find the decentralised emojis.

With it all annnounced on socials and discord, the video gets into working on astrolabe at 11:29.

Let's get look at Astrolabe translation utilities (13:30)

Some links:

• the astrolabe repo: https://github.com/FujoWebDev/astrolabe
• have a play with it: https://astrolabe-editor.netlify.app/?path=/story/adapters-starter-bluesky-from--base-lexicon

Ms Boba introduces the text editor -- you can type in it, you can put it in your blog, and it comes out of the box with translation utilities.

What are translation utilities?

What do you want your inputs to be? Do you want to support loading markdown, html, bluesky lexicons? You can install plugins that make it very easy for you to go from text you already have in whatever format to editable text that you can play around with.

And also the reverse. Once you have your text formatted Astrolabe can spit it out in any format you want. Do you want to markdown, bluesky... you can just do it, simple! That is the idea.

The development environment includes Storybook, which enables us to see what the output of our Astrolabe input will be.

Ms Boba shows us a couple of examples of how different text effects behave. If bluesky doesn't have spoilered text or bold text, how do we translate the untranslatable?

For spoilered text, Astrolabe's answer is rot13:

Bold and italic text are not supported yet, but we could instruct Astrolabe to add asterisks (*) to either side of a bolded word to give the impression of emphasised text.

For links, and purely as an example -- in the astrolabe text editor, the link is blue text. However, in the bluesky post it is a url in brackets.

We can also output to leaflet (see timestamp 17:48) and more!

Tiptap & Astrolabe

This editor is based on the tiptap editor, which is very popular because making text editors is hard, and it's very good.

Tiptap has a lot of plugins, but they don't cover everything -- that's a question for Astrolabe -- can we cover more things that are important to the social web of people like us, who don't get included in most feature sets for power users?

Today, Ms Boba adds emoji to Astrolabe. She adds them to a PDS -- so the editor is getting informaiton about the emoji from the PDS.

Creating Emojis

This section of the video starts around 37:50.

From here, things started to get a bit overwhelming for me and I wasn't able to capture much of the process of creating the new plugin.

The plan was to install the tiptap emoji extension and then try to build on top of it. Tiptap's emoji extension already has a way to add new custom emojis, which we were able to use.

Job one is to look at the tiptap website and its emoji page.

Firstly, Ms Boba copied and pasted files from a different plugin (such as package.json, tsconfig, and tsdown.config.ts) into a new directory and cleaned them up so they were useful. 0:45:00 "So a lot of the initial configuration is just getting it to a workable state, where you have an empty slate."

Some of the old code was merely commented out so that it could be used as a guide in the future. 0:50:00

An early step was getting the tiptap emojis to show. 0:58:00 Followed by different custom emojis.

Over to the PDS Ms Boba looked for information about how to structure the data 1:02:00 for her new emoji. This involved looking at various implementations, including mastodon's custom_emojis API methods 1:06:26 and bluesky's post lexicon.

A custom emoji was loaded at 1:19:52

The Record was made around 1:24:22 logging into PDSls & create a new record and at 2:09:06 boba-tan was first displayed in the editor!

A lot more code was written after that and Boba-tan was shrunk to emoji-size. I wish I could tell you all more about it in more detail -- maybe in the coming months I'll have the ability!