Zach’s ugly mug (his face)

Zach Leatherman

I’m Taking Ownership of My Tweets

September 16, 2019

I’ve invested a lot into Twitter and I’ve received a lot of value from Twitter. I’ve made a lot of friends and professional connections on the site. I’ll be sad when Twitter goes away. Without a doubt, it will go away. It’s only a question of when.

I fully expect my personal website to outlive Twitter and as such have decided to take full ownership of the content I’ve posted there. In true IndieWeb fashion, I’m taking ownership of my data.

Features

  • Each tweet has its own independent page: zachleat.com/twitter/:id.
  • Super fast HTML first rendering (that tweet is 2.0 KB for the entire page)
  • Focus on the text first and less on the media. Links to external media are included (sample) and Videos, images, and animated GIFs are supported. Media are not self hosted (yet) and uses a max-height of 10em. All media are scrunched into a single row. Media is not upscaled like Twitter likes to do on their web site 😱
  • Links:
    • t.co links are bypassed and original hyperlinks URLs are displayed and used.
    • Things are linkified the same as on Twitter: users, tweets being replied to, nicer non-truncated URLs
    • Nicer link formatting for links-to-tweets: @username/:id.
    • Internal links to my own tweets stay within the archive and don’t link out to Twitter.
  • My tweets are threaded (both forwards and backwards) (sample)
  • While I could display favorite and retweet counts, I don’t on individual tweet pages. I only display those on the popular tweet page.
  • Positive and negative sentiment analysis for each tweet (e.g. Mood +8). See the most positive and most negative tweets.
  • Support some markdown: I sometimes use `backtick` markdown notation for code in my tweet text. This translates to <code> properly.
  • Works initially from the Download your Twitter data feature, but also supplements with the Twitter API to update as new tweets are published (that way I don’t have to keep re-exporting every time).

Analytics

All of these are linked up on the Twitter Archive home page. The only thing that surprised me here was that 60% of my tweets are replies—wow!

The Backlog 😅

  • alt on media. It was suspiciously missing from the data export. 😱
  • Clean up the code a little bit for publishing so others can use it (this includes some outstanding color contrast issues 😱)
  • Use a better typeface 😎
  • Some kinda widget for embedding archive tweets in other pages.
  • Make a tool (maybe a bookmarklet) to automatically translate URLs from twitter to my archive.
  • Search
  • I purposefully do not include others tweets (unless I’ve retweeted them). I need to add a mechanism to remove retweets if they have been deleted upstream.
  • Retweet and favorite counts, while minimized, are not yet updated—they are fixed to when the tweet was inserted into the database.
  • Hashtags are not yet linked in tweet text 🤷‍♂️
  • Some nicer data visualizations and graphs
Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
JAMstack_conf_sf 2019
Next
Two Browsers Walked Into a Scrollbar

15 Retweets

jackyalcine 🔜 TwitchCon 2019Adactio LinksGiammaSumeet JainAlexander BoldakovIndieWeb Avatar for https://jlelse.blogівась тарасикIndieWeb Avatar for https://diggingthedigital.comIndieWeb Avatar for https://medium.comCSS-TricksTobiasPaulDavid Darn Of The Dead 🧟‍♂️IndieWeb Avatar for https://www.jvt.meMax Böck

14 Likes

Aaron PareckiBeko PharmAdam JohnsonBrent LarsonJohn MeyerhoferMike AparicioBrad FrostJace Benson 👨‍💻⚙️the hog that got away 🌳matt northam ᴹᴺGiammaJordan EldredgeNicolas HoizeyIngmar

2 Bookmarks

IndieWeb Avatar for https://adactio.comIndieWeb Avatar for https://www.sonniesedge.net
8 Comments
  1. Jamie Tanna

    Jamie Tanna

    This is a great idea! I may have to look at the same. I'm also hoping to start to start publishing from my site first and then having that send the tweet afterwards using https://brid.gy/

  2. this is super cool!! how long do build times take? seems to be pretty light as it doesnt reuse templates. i reckon 2-5 minutes?

  3. Zach Leatherman

    @zachleat

    It does re-use one layout for the whole thing and just raw JS for templating. Local build times are about 30 seconds on my machine 👍 (it’s a pretty nice Macbook) This project is a nice motivator to think about and work on incremental building stuff in Eleventy too

  4. Johan Bové

    Johan Bové

    Awesome work! Any chance you'll open-source your Own-Your-Tweets code? #indieweb

  5. Brad Frost

    @brad_frost

  6. Jace Benson 👨‍💻⚙️

    @jacebenson

    The first thing I learned about @zachleat was 11ty, the second was this. I'm still waiting on this. - A fan

  7. Zach Leatherman

    @zachleat

    the fan is persuasive

  8. Jace Benson 👨‍💻⚙️

    @jacebenson

    I was hoping it would blow you away.. :D

    Shamelessly plug your related post:

    Sharing on social media?

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)