From Bird to Elephant: Starting a New Journey on Mastodon

With the recent turmoil at Twitter, like many others, I’ve been wondering about migrating my social presence to Mastodon. But it’s a brand new world I know nothing about! So how does one get started on Mastodon? Which instance should I choose? What’s the netiquette there? What are the faux-pas to avoid? Should I cross-post to both networks? Who to follow, and how to gain followers? In this presentation, we’ll talk about the journey from the bird’s feathers to the elephant tusks, share some tips and tricks, to get the best of this new experience.

In this presentation, we’ll talk about this migration, we’ll share tips and tricks to get the best experience on Mastodon. Furthermore, we’ll have a look under the hood, to better understand how the “fediverse” operates, and particularly at the underlying protocols, including ActivityPub/ActivityStream and WebFinger.

Transcript

1. De l’oiseau bleu à l’éléphant
   La transition vers Mastodon
   Guillaume Laforge
   Developer Advocate
   Google Cloud
   @glaforge@uwyn.net
   

   View Slide

2. Part 1
   Mastodon
   & Twitter
   

   View Slide

3. What is
   Mastodon?
   

   View Slide

4. joinmastodon.org
   

   View Slide

5. Welcome to
   the Fediverse!
   fediverse.party
   

   View Slide

6. View Slide

7. What is Mastodon?
   How different is it from Twitter?
   A network of
   federated
   servers
   

   View Slide

8. What is Mastodon?
   How different is it from Twitter?
   A network of
   federated
   servers
   Open source
   and open
   protocols
   

   View Slide

9. What is Mastodon?
   How different is it from Twitter?
   A network of
   federated
   servers
   Open source
   and open
   protocols
   Not owned by
   a single
   company
   

   View Slide

10. What’s the experience like?
    Mooaarrr
    characters!
    You can edit
    your posts!
    

    View Slide

11. What’s the experience like?
    Mooaarrr
    characters!
    You can edit
    your posts!
    Chronological order
    No algorithm for
    your timeline
    

    View Slide

12. What’s the experience like?
    Mooaarrr
    characters!
    You can edit
    your posts!
    Chronological order
    No algorithm for
    your timeline
    No search!
    (just #hashtags)
    No ads!
    

    View Slide

13. What’s the experience like?
    Mooaarrr
    characters!
    You can edit
    your posts!
    Chronological order
    No algorithm for
    your timeline
    No search!
    (just #hashtags)
    No ads!
    Privacy: fine grained
    controls
    Content warnings
    

    View Slide

14. Getting
    started
    

    View Slide

15. Choose a server that resembles you!
    Pick up a region, a topic, a language.
    Change your mind? You can migrate
    to a new server and not lose your
    followers & following.
    JoinMastodon.org
    

    View Slide

16. Use the web frontend of your
    server on your computer.
    On mobile:
    ● Tusky on Android
    ● Metatext on iOS
    Pick up a client
    

    View Slide

17. Tips &
    tricks
    

    View Slide

18. Increase your chances to be followed
    back, by completing your profile to
    make it more meaningful, more you!
    Would you follow this one?
    Create your profile
    before following
    anyone
    

    View Slide

19. Your first “toot” should be your
    introduction. Tell everyone who you
    are, and use the #introduction
    hashtag.
    Be sure to pin that introduction toot
    to the top of your timeline.
    Introduce
    yourself!
    

    View Slide

20. Extra step for discoverability, check the
    box to suggest your account to
    others, via “trends” and other
    features.
    Suggest
    your account
    to others
    

    View Slide

21. Double check that the “opt-out of
    search engine indexing” checkbox is
    unchecked, which would make your
    account not findable easily.
    Don’t opt out of
    search engine
    indexing
    

    View Slide

22. No need to pay a subscription
    to be officially verified.
    Add a tag
    in the pages mentioned in your profile
    metadata links.
    Verify
    yourself
    

    View Slide

23. The elephant bird
    in the room
    

    View Slide

24. You’re not alone migrating to
    Mastodon. Check if the people you
    followed on Twitter are also on
    Mastodon.
    Find your Twitter
    friends on Mastodon
    ● twitodon.com
    ● movetodon.org
    ● fedifinder.glitch.me
    

    View Slide

25. Put your Mastodon link in your Twitter bio.
    Your Twitter handle might be taken by
    someone else impersonating you 30 days
    after you’ve relinquished your account.
    If you really quit, request your Twitter
    archive, for posterity.
    Don’t delete your
    Twitter account (yet?)
    

    View Slide

26. Moa.party is a tool you can use to
    cross-post on Twitter and Mastodon.
    Cross-posting is frowned upon though.
    Avoid automated
    cross-posting
    

    View Slide

27. Keep accessibility
    in mind
    

    View Slide

28. Use #CamelCase for your #HashTags.
    Screen readers will appreciate!
    Use hashtags liberally, to participate
    in the conversations on that topic.
    CamelCase
    HashTags
    

    View Slide

29. When sharing pictures in your toots,
    be sure to specify an “alt” tag,
    so that screen readers can read the
    description.
    Use “Alt” tags
    for your images
    

    View Slide

30. Be mindful and hide content that may
    affect others behind “content
    warnings” (politics, adult, violence,
    mental health, food…)
    A label is visible, click on “show more”
    to read the rest. Same for pictures,
    click on “sensitive content” to make it
    appear.
    Content
    Warning
    

    View Slide

31. Going
    further
    

    View Slide

32. A treasure trove of tips about
    Mastodon & the Fediverse
    Follow @feditips@mstdn.social
    Fedi.Tips
    

    View Slide

33. Running an instance isn’t free.
    If you can, help sustain your instance
    administrators by funding it.
    You can also support the Mastodon
    developers via Patreon.
    Help sustain
    your instance
    

    View Slide

34. Part 2
    The APIs &
    Standards
    

    View Slide

35. ● ActivityPub — W3C protocol based on
    ActivityStream, and JSON-LD
    ● WebFinger — RFC to resolve links to resources
    ● MicroFormats — open CSS based format to
    embed metadata in HTML
    ● Security — HTTP signatures and OAuth 2
    The importance
    of standards
    

    View Slide

36. How to implement a basic ActivityPub server?
    blog.joinmastodon.org/2018/06/
    how-to-implement-a-basic-activitypub-server/
    {
    "@context": [
    "https://www.w3.org/ns/activitystreams",
    "https://w3id.org/security/v1"
    ],
    "id": "https://my-example.com/actor",
    "type": "Person",
    "preferredUsername": "alice",
    "inbox": "https://my-example.com/inbox",
    "publicKey": {
    "id": "https://my-example.com/actor#main-key",
    "owner": "https://my-example.com/actor",
    "publicKeyPem": "-----BEGIN PUBLIC KEY-----..."
    }
    }
    JSON-LD syntax
    ActivityStream
    vocabulary
    A “person” actor
    An “inbox” to
    receive messages
    Asymmetric key cryptography,
    to sign your messages
    The “Actor”
    

    View Slide

37. How to implement a basic ActivityPub server?
    blog.joinmastodon.org/2018/06/
    how-to-implement-a-basic-activitypub-server/
    {
    "subject": "acct:alice@my-example.com",
    "links": [
    {
    "rel": "self",
    "type": "application/activity+json",
    "href": "https://my-example.com/actor"
    }
    ]
    }
    /.well-known/webfinger?resource=acct:alice@my-example.com
    Alice’s account
    ActivityStream
    vocabulary
    URL to our
    actor definition
    WebFinger to link an account
    resource to the actor’s URL
    

    View Slide

38. How to implement a basic ActivityPub server?
    blog.joinmastodon.org/2018/06/
    how-to-implement-a-basic-activitypub-server/
    {
    "@context": "https://www.w3.org/ns/activitystreams",
    "id": "https://my-example.com/hello-world",
    "type": "Create",
    "actor": "https://my-example.com/actor",
    "object": {
    "id": "https://my-example.com/hello-world",
    "type": "Note",
    "published": "2023-04-12T10:08:46Z",
    "attributedTo": "https://my-example.com/actor",
    "inReplyTo": "https://my-example/@bob/100254678717223630",
    "content": "Hello world",
    "to": "https://www.w3.org/ns/activitystreams#Public"
    }
    }
    The message: a “note”
    creation activity
    JSON-LD syntax &
    ActivityStream vocabulary
    Actor’s URL
    Note creation
    Can reply to
    another message
    Lightweight HTML with
    Microformat classes
    

    View Slide

39. How to implement a basic ActivityPub server?
    blog.joinmastodon.org/2018/06/
    how-to-implement-a-basic-activitypub-server/
    POST /users/bob/inbox HTTP/1.1
    HOST: my-example.com
    Date: 12 Apr 2023 10:08:46 GMT
    Digest: e37e179c75071a291f90a5fd4f848da87b491f1282f7bb8509ef2115b81ee0f4
    Signature: keyId="https://my-example.com/actor#main-key",headers="(request-target) host date
    digest",signature="Y2FiYW...IxNGRiZDk4ZA=="
    Content-Type: application/ld+json; profile="http://www.w3.org/ns/activitystreams"
    Cryptographically signed
    the message payload
    RSA-SHA256 digest hash
    of the message body
    (request-target): get /users/bob/outbox
    host: my-example.com
    date: 12 Apr 2023 10:08:46 GMT
    RSA-SHA256 digest
    hash of those headers
    Same set of headers
    

    View Slide

40. Part 3
    Time for
    Demos!
    

    View Slide

41. Unlike Twitter, no way to know
    how many views your “toots”
    got.
    Let’s calculate your
    maximum potential reach,
    with the following formula:
    No analytics! potential_reach =
    me.followers +
    ∑ boosters
    i
    .followers
    n
    i=1
    

    View Slide

42. Get Your Reach!
    stootistics.web.app
    

    View Slide

43. There’s even a bot!
    @getmyreach@tooters.org
    

    View Slide

44. Vue.js for the frontend
    with Shoelace web components
    Java & Micronaut
    for the server backend
    Hosted on Google Cloud Run
    Firebase hosting for the nice URL
    Cloud Scheduler for scheduling
    Vue.js + Micronaut
    

    View Slide

45. Vue.js for the frontend
    with Shoelace web components
    Java & Micronaut
    for the server backend
    Hosted on Google Cloud Run
    Firebase hosting for the nice URL
    Cloud Scheduler for scheduling
    Vue.js + Micronaut
    

    View Slide

46. Vue.js for the frontend
    with Shoelace web components
    Java & Micronaut
    for the server backend
    Hosted on Google Cloud Run
    Firebase hosting for the nice URL
    Cloud Scheduler for scheduling
    Vue.js + Micronaut
    

    View Slide

47. Vue.js for the frontend
    with Shoelace web components
    Java & Micronaut
    for the server backend
    Hosted on Google Cloud Run
    Firebase hosting for the nice URL
    Cloud Scheduler for scheduling
    Vue.js + Micronaut
    

    View Slide

48. DEMO
    Guillaume Laforge
    Developer Advocate
    Google Cloud
    @glaforge@uwyn.net
    

    View Slide

49. Thank You
    Guillaume Laforge
    Developer Advocate
    Google Cloud
    @glaforge@uwyn.net
    

    View Slide