Build privacy-focused blazing fast tweet embeds – CodeWithSwiz 30

Twitter embeds every tweet on your page as an iframe. Loads 1.2MB of JavaScript, makes 20+ HTTP requests and uses 100+ DOM nodes. 💩

You can feel your browser lagging when there's a few tweets up there. Like running with a parachute.

Last week we set out to fix this with a Gatsby plugin for Twitter embeds without JavaScript. This week we got it working 🤘

OMG IT WORKED! Look at those static tweet embeds so breezy and fast 🥳

The page *feels* lighter when you navigate 😍
Gonna opensource I think pic.twitter.com/DgcMHz2mHa
— Swizec Teller (@Swizec) May 11, 2021

Here's the full build, read on for a recap and how it works

Full code at Github Gist, needs cleanup before opensourcing as a library 😇

CodeWithSwiz is a weekly live show. Like a podcast with video and fun hacking. Focused on experiments and open source. Join live Tuesday mornings

The setup

We're building a plugin for the gatsby-remark-embedder Gatsby plugin. Because that's what I use on my sites :)

You can adapt this technique for anything. Even NextJS.

It works like this:

On page render (during build or server-side-render)
Take tweet ID from URL
Call Twitter API, get data
Construct HTML
Replace URL with HTML

gatsby-remark-embedder runs my code on Markdown nodes that look potentially like tweet urls. You could turn it into an MDX plugin, or build a React component.

When users load your page the tweets are there. In the initial HTML. No client-side JavaScript, no iframe shenanigans, no tracking.

Grab tweet data from Twitter

Last time we discovered that Twitter's oEmbed API, an embedding standard, doesn't give us everything we need. No author avatars, no like and reply counts, no media links.

You can get those and more from Twitter API v2 /tweets/:id.

We're using the opensource twitter-lite client. Looks solid, nice API, works great. 👌

Initialize Twitter client

A memoized function initializes the client.

// src/StaticTwitterEmbed.js

// Memoized twitter client instance
let twitterClient = null
async function getAppClient() {
  if (twitterClient) {
    return twitterClient
  }

  // init user-client
  const user = new Twitter({
    consumer_key: process.env.TWITTER_CONSUMER_KEY,
    consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
  })

  // create app-client with higher limits
  const response = await user.getBearerToken()
  twitterClient = new Twitter({
    version: "2",
    extension: false,
    bearer_token: response.access_token,
  })

  return twitterClient
}

Global variable holds the client instance. If variable defined, return, if not, initialize.

Each initialization logs into Twitter with an API call for the bearer token. You don't wanna do this for every tweet on your entire website.

Get a tweet

With an initialized and logged-in client, we can get a tweet using its ID.

// src/StaticTwitterEmbed.js
// fetch tweet from API
async function getTweet(tweetId) {
  const client = await getAppClient()

  try {
    const tweet = await client.get(`tweets/${tweetId}`, {
      "tweet.fields": "public_metrics,created_at",
      expansions: "author_id,attachments.media_keys",
      "user.fields": "name,username,url,profile_image_url",
      "media.fields": "preview_image_url,url",
    })

    return tweet
  } catch (e) {
    console.log(e)
  }

  return null
}

For simplicity, we always get the client in this function. Makes logic self-contained and we aren't worried about overdoing it thanks to memoization.

client.get(tweet/:id) fetches a tweet. Careful incantation of parameters gives us the extra info we need. Author, media, and metrics.

Response looks like this:

{
  data: {
    text: 'My man @Swizec went and sent me a signed first edition of this soon to be classic 👊 https://t.co/Gw8cTIY7pH',
    public_metrics: {
      retweet_count: 1,
      reply_count: 2,
      like_count: 18,
      quote_count: 0
    },
    attachments: {
      media_keys: [ '3_1388192274866126849', '3_1388192274874523648' ]
    },
    author_id: '68567860',
    id: '1388192278884331530',
    created_at: '2021-04-30T18:03:25.000Z'
  },
  includes: {
    media: [
      {
        media_key: '3_1388192274866126849',
        type: 'photo',
        url: 'https://pbs.twimg.com/media/E0PZhN9WQAEMhsJ.jpg'
      },
      // ...
    ],
    users: [
      {
        name: 'Adam Rackis',
        profile_image_url: 'https://pbs.twimg.com/profile_images/1183169082243375104/FwXKVe5H_normal.jpg',
        id: '68567860',
        username: 'AdamRackis',
        url: 'https://t.co/sJJo16akDF'
      }
    ]
  }
}

Fun gotcha: You have to request expansions: "author_id,attachments.media_keys" for media.fields and author.fields to work. Detail buried in API docs.

A simplified tweet HTML

The getHTML function tells gatsby-remark-embedder what to replace a Markdown node with. Tweet comes in as a URL.

Before our plugin, tweets turned into <blockquote> elements that the Twitter JavaScript would turn into monster iframes on page load. Often with a big delay. Sometimes breaking on mobile.

Now we do this 👇

// src/StaticTwitterEmbed.js
async function getHTML(url) {
  const twitterUrl = url.replace("events", "moments")
  const tweetId = twitterUrl.split("/").pop()

  const tweet = await getTweet(tweetId)

  if (!tweet) {
    console.log("TWEET NOT FOUND", twitterUrl, tweetId)
    return ""
  }

  return buildTweetHTML(tweet)
}

We borrowed the events -> moments transform from the original plugin. Gonna need to test if that still works. 🤔

tweetId is the last element of the URL when split by /. This will break if you include any ?... cruft when embedding.

Like I said, not ready yet for opensource :)

Then we get the tweet and buildTweetHTML.

The CSS styles

You need CSS to make all that HTML look like a tweet.

This little bit gets you most of the way there:

div.static-tweet-embed {
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  max-width: 550px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid rgb(196, 207, 214);
  border-radius: 12px;
  padding: 12px 16px 4px 16px;
}

div.static-tweet-embed blockquote {
  margin: 0;
  font-size: 20px;
  padding: 0px;
  border: 0px;
  color: rgb(15, 20, 25);
  line-height: 24px;
}

System fonts, border, rounded corners, padding, correctly sized text.

You can see (and borrow) the rest on the public gist.

The result

Your page feels faster. It's hard to explain, you have to try.

Scroll to the bottom here 👉 https://serverlesshandbook-4d7y3ge3f-swizec.vercel.app/

Now scroll here 👉 https://serverlesshandbook.dev

Feel the difference? Reload at bottom for extra groan

Twitter embeds every tweet on your page as an iframe. Loads 1.2MB of JavaScript, makes 20+ HTTP requests and uses 100+ DOM nodes. 💩

I fixed it 😊 no client-side javascript, no tracking

Read how it works, steal my code 👉https://t.co/faPX478TmA pic.twitter.com/t6AsIEDW1j
— Swizec Teller (@Swizec) May 12, 2021

Cheers,
~Swizec

PS: yes, you can measure the impact with Lighthouse, it's not invisible – 43 becomes 54 :)

Couple tweaks to alts and the SEO score recovered

Altho why alt="tweet media" is better for SEO than nothing 🤷‍♂️ pic.twitter.com/c7ZXqKTKmP
— Swizec Teller (@Swizec) May 12, 2021

Published on May 12th, 2021 in CodeWithSwiz, Technical, Twitter, Gatsby, Livecoding

Did you enjoy this article?

👎👍

Continue reading about Build privacy-focused blazing fast tweet embeds – CodeWithSwiz 30

Semantically similar articles hand-picked by GPT-4

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Learn more

Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev

Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization

Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️

Senior Mindset Book

Start with a free chapter

Build privacy-focused blazing fast tweet embeds – CodeWithSwiz 30

The setup

Grab tweet data from Twitter

Initialize Twitter client

Get a tweet

A simplified tweet HTML

buildTweetHTML

The CSS styles

The result

Did you enjoy this article?

Continue reading about Build privacy-focused blazing fast tweet embeds – CodeWithSwiz 30

Learned something new?
Read more Software Engineering Lessons from Production

Software Engineering Lessons from Production

Senior Mindset Book