Own Your content on Social Media with the Indie Web

A presentation at JAMstack_conf San Francisco in October 2019 in San Francisco, CA, USA by Zach Leatherman

Slide 1

Slide 1

How to own your content on social media. zachleat.com zach@zachleat.com @zachleat

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

myspacebook.info

Slide 6

Slide 6

’ ) & ( * ” $ ! # % ’ ) & ( *

Slide 7

Slide 7

/messages /photos /livestream /app store /VR /crypto $ /classifieds /AI /dat /datamining ing @zachleat ” $! # % myspacebook myspacebook myspacebook myspacebook myspacebook myspacebook myspacebook myspacebook myspacebook

Slide 8

Slide 8

Slide 9

Slide 9

Don’t be terrestrial. Be extraterrestrial. myspacebook.info

Slide 10

Slide 10

How to own your content on social media?

Slide 11

Slide 11

myspacebook.info @zachleat Create a social media site.

Slide 12

Slide 12

myspacebook.info @zachleat Buy a social media site. +++

Slide 13

Slide 13

zachleat.com zach@zachleat.com @zachleat @zachleat How to own your content on someone else’s web site.

Slide 14

Slide 14

@zachleat

Slide 15

Slide 15

@zachleat Why?

Slide 16

Slide 16

@zachleat My content’s not worth saving. ,

Slide 17

Slide 17

None All @zachleat Content Worth Saving

Slide 18

Slide 18

One Content Worth Saving @zachleat None

Slide 19

Slide 19

@zachleat My content has value to me.

Slide 20

Slide 20

@zachleat Supplemental Brain -

Slide 21

Slide 21

@zachleat All social media is inevitably doomed. .

Slide 22

Slide 22

It has been an incredible journey! We are happy to announce that effective immediately, myspacebook will be ending. Any content associated with your account will be deleted. We couldn’t be happier about this transition. Thank you!

Slide 23

Slide 23

@zachleat

Slide 24

Slide 24

@zachleat

Slide 25

Slide 25

myspacebook.info @zachleat myspacebook.info

Slide 26

Slide 26

myspacebook.info myspacebook.info @zachleat I AM AN ADVERTISEMENT, HI

Slide 27

Slide 27

myspacebook.info myspacebook.info AGREE TO OUR COOKIES I AGREE OR ELSE @zachleat I AM AN ADVERTISEMENT, HI

Slide 28

Slide 28

myspacebook.info myspacebook.info AGREE TO OUR COOKIES I AGREE OR ELSE @zachleat I AM AN ADVERTISEMENT, HI

Slide 29

Slide 29

myspacebook.info myspacebook.info I AM AN ADVERTISEMENT, HI AGREE TO OUR COOKIES I AGREE OR ELSE @zachleat THIS IS BETTER ON OUR APP APP STORE

Slide 30

Slide 30

@zachleat Everything on the web should last forever.

Slide 31

Slide 31

@zachleat I should host everything I post

Slide 32

Slide 32

@zachleat Don’t use cloud services

Slide 33

Slide 33

@zachleat My content should exist on my terms.

Slide 34

Slide 34

@zachleat How?

Slide 35

Slide 35

@zachleat The URL

Slide 36

Slide 36

@zachleat The CANONICAL URL

Slide 37

Slide 37

@zachleat myspacebook.info/VANITY

Slide 38

Slide 38

@zachleat If you control the full URL, you control the content.

Slide 39

Slide 39

@zachleat

Slide 40

Slide 40

@zachleat

Slide 41

Slide 41

@zachleat

Slide 42

Slide 42

@zachleat .html

Slide 43

Slide 43

@zachleat URLs ARE POWER

Slide 44

Slide 44

UNDER URLs ARE POWER / ATTACK @zachleat /

Slide 45

Slide 45

@zachleat ATTACKS ON THE URL

Slide 46

Slide 46

ATTACKS ON THE URL @zachleat APP STORES

Slide 47

Slide 47

ATTACKS ON THE URL @zachleat WEB BROWSER INTERFACE

Slide 48

Slide 48

ATTACKS ON THE URL LIKE US ON FACEBOOK QR CODES https://twitter.com/spara/status/312270597914783744 @zachleat KEYWORDS

Slide 49

Slide 49

IndieWeb indieweb.org @zachleat a people-focused alternative to the “corporate web”

Slide 50

Slide 50

@zachleat personalsit.es

Slide 51

Slide 51

matthiasott.com adactio.com sonniesedge.net aaronparecki.com paulrobertlloyd.com @zachleat mxb.dev

Slide 52

Slide 52

@zachleat Not just for personal content.

Slide 53

Slide 53

@zachleat https://twitter.com/adamconover/status/1183214923423211521

Slide 54

Slide 54

@zachleat So we started posting videos natively to Facebook instead.

Slide 55

Slide 55

@zachleat instead.

Slide 56

Slide 56

@zachleat POSSE

Slide 57

Slide 57

.com @zachleat P ublish O wn S ite S yndicate E lsewhere

Slide 58

Slide 58

@zachleat adactio.com/extras/slides/indieweb.pdf

Slide 59

Slide 59

@zachleat adactio.com/extras/slides/indieweb.pdf

Slide 60

Slide 60

est. 2006 about 27,000 tweets zachleat.com est. 2006 243 posts @zachleat twitter.com/zachleat

Slide 61

Slide 61

@zachleat vs POSSE PESOS

Slide 62

Slide 62

.com @zachleat P ublish E lsewhere S yndicate O wn S ite

Slide 63

Slide 63

@zachleat POSSE

Slide 64

Slide 64

POSSE @zachleat S O S E P

Slide 65

Slide 65

twitter.com twitter.com/zachleat/status/TWEET_ID @zachleat zachleat.com/twitter/TWEET_ID

Slide 66

Slide 66

@zachleat URL PARITY

Slide 67

Slide 67

@zachleat twitter.com/zachleat

Slide 68

Slide 68

@zachleat zachleat .com/twitter

Slide 69

Slide 69

twitter.com/zachleat/status/1179866258558406656 @zachleat zachleat.com/twitter/1179866258558406656

Slide 70

Slide 70

@zachleat twitter.com/TejasKumar_/status/1179064750455623680

Slide 71

Slide 71

@zachleat

Slide 72

Slide 72

@zachleat

<link rel=”canonical” href=”https://zachleat.com/twitter/1179866258558406656”>

Slide 73

Slide 73

@zachleat CANONICAL IS A STATE OF MIND

Slide 74

Slide 74

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

@zachleat NOW YOU!

Slide 78

Slide 78

@zachleat 0

Slide 79

Slide 79

@zachleat 0 •••••••••••••••••••••••••••••••••••••••••••••

Slide 80

Slide 80

@zachleat 0

Slide 81

Slide 81

@zachleat

Slide 82

Slide 82

@zachleat

Slide 83

Slide 83

@zachleat

Slide 84

Slide 84

@zachleat

Slide 85

Slide 85

@zachleat

Slide 86

Slide 86

• Fast @zachleat “yeah it’s so fast”—

Slide 87

Slide 87

@zachleat • Fast • No JS Frameworks • What goes in, what comes out • Choose your templating language • Simple and approachable

Slide 88

Slide 88

@zachleat

Slide 89

Slide 89

@zachleat

Slide 90

Slide 90

@zachleat

Slide 91

Slide 91

@zachleat

Slide 92

Slide 92

@zachleat

Slide 93

Slide 93

@zachleat

Slide 94

Slide 94

@zachleat

Slide 95

Slide 95

@zachleat BACKUP COMPLETE 1

Slide 96

Slide 96

@zachleat

Slide 97

Slide 97

• Analytics Retweets 14.4% Replies 60.1% 2 Remainder 4.6% 20.9% @zachleat Mentions

Slide 98

Slide 98

@zachleat

Slide 99

Slide 99

@zachleat • Confront my own bias (embarrassing)

Slide 100

Slide 100

• Threading! @zachleat Backward and Forward

Slide 101

Slide 101

@zachleat https://www.zachleat.com/twitter/1171538020547231745/

Slide 102

Slide 102

Front-end performance @zachleat Back-end performance

Slide 103

Slide 103

@zachleat • Self Hosting Media

Slide 104

Slide 104

@zachleat • Self Hosting Media

Slide 105

Slide 105

@zachleat • Self Hosting Media

Slide 106

Slide 106

@zachleat

Slide 107

Slide 107

@zachleat • I CAN EDIT MY TWEETS 2

Slide 108

Slide 108

@zachleat • I CAN EDIT MY TWEETS 2

Slide 109

Slide 109

@zachleat • I CAN EDIT MY TWEETS 2

Slide 110

Slide 110

@zachleat • Show real links (no t.co URLs) 3 • New tweets fetched from Twitter API • Hide like/retweet counts • Markdown • Style it however I want

Slide 111

Slide 111

SC O PE C • More Reliable Embeds! RE @zachleat EP Firefox blocks Twitter’s Third Party JavaScript 1

Slide 112

Slide 112

SC O PE C • Faster Embeds! RE EP @zachleat 119 KB transferred

Slide 113

Slide 113

SC O PE C • Faster Embeds! RE EP @zachleat 4.2 KB transferred

Slide 114

Slide 114

@zachleat

Slide 115

Slide 115

SC O PE C RE EP @zachleat THE RIGHT TO BE FORGOTTEN-ish

Slide 116

Slide 116

@zachleat CONTROL

Slide 117

Slide 117

@zachleat CREATIVE CONTROL

Slide 118

Slide 118

@zachleat CONTENT CONTROL

Slide 119

Slide 119

@zachleat DELETE CONTROL

Slide 120

Slide 120

@zachleat UX CONTROL

Slide 121

Slide 121

JAMstack empowers DEVELOPERS @zachleat FRONT-END

Slide 122

Slide 122

“ Don’t do it like me, Do it like you” https://matthiasott.com/articles/into-the-personal-website-verse @zachleat —Matthias Ott @m_ott

Slide 123

Slide 123

THANK YOU INSPIRED BY zachleat.com zach@zachleat.com @zachleat #NoTechForICE