How I used Twitter as a CMS

📄

First published on September 17, 2020.

I built colors.danielchapman.dev — a single page website composed of a grid of colors. It isn’t anything too fancy, just some divs composed inside of a flex box, and a couple Svelte animations. The fun part, came in how I got the list of colors I generated, they weren’t randomly generated, or selected from a list of colors. No, I got them by liking tweets on Twitter. That’s right, Twitter is my Content Management System (CMS).

The content of my website is derived from actions I take on my twitter acount. Technically I do this by liking tweets from the bot @everycolorbot.

https://twitter.com/everycolorbot/status/1306601668314902529

Then using the javascript twitter API client twit to fetch the last 200 tweets I liked. ⊕The 200 tweet limit is a limit imposed by the Twitter API when fetching a list of likes 📜Documentation

function getColors() {
  let colors = new Array();
  bot.get(
    "favorites/list",
    { screen_name: "ds_chapman", count: 200 },
    function (err, data, response) {
      if (err) {
        console.log(err);
      } else {
        data.forEach(function (tweet) {
          if (tweet.user.screen_name === "everycolorbot") {
            const color = {};
            color.text = `#${tweet.text.slice(2, 8)}`;
            color.url = `https://twitter.com/i/web/status/${tweet.id_str}`;
            colors.push(color);
          }
        });
        fs.writeFile("colors.json", JSON.stringify(colors), (err) => {
          if (err) throw err;
          console.log("Colors written to color.json");
        });
      }
    }
  );
}

If that tweet came from @everycolorbot, it saves the color and a link to that tweet to a JSON.

Then it’s just a matter of importing that JSON to a webpage. I chose to use Svelte for a number of reasons. First and foremost because I was able use the Svelte REPL and some sample data to get my prototype up and running in the browser. This made the development process simple from a setup perspective — after I had the prototype in a good state I just had to download the code and add it to my project.

The second reason I chose Svelte was how easy it is to add Svelte animations. I talk about that more in my article ”Create a Basic Svelte Site”, but for this site I also used the d3-random package to randomly stagger when colors fade onto the screen.

Now what’s the benefit of using Twitter as a CMS? I’m not sure there is one. On the other hand, there are many fun use cases — a next.js site where each post corresponds to a thread; a gatsby site built from an export of your timeline where the main page is a list of all your tweets, but every tweet also lives on its own page; a collection of Dad Jokes sourced from #DadJokes. I’m sure the possibilities are endless because the variety of content stored on Twitter is endless.

What I Learned

While I learned many things from this exercise, the point was not to learn a specific platform, or even to learn to think of everything as a CMS. Just because everything can be a CMS doesn’t mean it should. No the main reason I used Twitter as a CMS was because it was fun, and at the end of the day building things can be fun.

If you want to build something fun I suggest doing something unexpected — like using Twitter as the source of your content. If you do, please send it to me (@ds_chapman on Twitter). I’d love to see what you built!

Other things to read

• Create a Basic Svelte Site
  A short guide to creating a simple Svelte site with animations and transitions.
• Hypertext Writing
  Every medium has its strengths. There are considerable strengths inherent to a digital, web-based, way of thinking -- first and foremost is the sheer amount of interactivity and connections you can make.
• Using Dendron and Gatsby Together 🌲
  How I integrated my Dendron repository and my Gatsby.js website.