Finding the best Dev.to article using code

There is a lot of content to consume. But how do you find the best for you? In order to save me hours of scrolling through dev.to I build a bot that finds me the best post every single day. And here I’ll show you how I made this bot.

What is the problem?

Dev.to is a great resource if you want to stay up to date. But there are so many articles that you are not able to read all the articles (even though they all deserve it). I ended up scrolling endlessly through the main page in order to find a few articles. That’s why I decided to create an aggregator to help me find the most interesting articles. I combined this with a project that I always wanted to do but never found the right application for… a Twitter bot. This way I can share my pick of the day with everybody so people can easily have access to the “best” (I will talk later about how the article is chosen) article. And I will take you along on this project and show you how easy it is to create a Twitter bot.

It’s all about the data

The first thing for you to do is actually get the data. Dev.to is providing an API for you to use here so it makes the gathering of the data very easy. The only thing required is an API key that you can get from your account on Settings > Account > DEV API Keys.

Now that you have the key to authenticate yourself you can make requests to the API. To test this before implementing it into my code I am using postman. Just add the api-key: xxxxxxxxxx as a parameter to the header and you can make a request to https://dev.to/api/articles.

As a response, you’ll get the last 30 articles that were posted. But since I want to get the “top articles” we have to add another parameter to our query. top=1 allows you to request the top articles of the last day. This is measured by the popularity of an article which considers the views and positive reactions to the article and gives you a list ordered by popularity starting with the most popular. Now that you have the list of articles you have to get the elements you are interested in. I’m slicing it to only get the first n articles. Right now you are left with only the “best” article but can still extend it later to retrieve more articles.

async function getTopNPosts(size) {
  return fetch("https://dev.to/api/articles?top=1")
    .then(response => response.json())
    .then(data => {
      return data.slice(0, size)
    })
}

The next step is to extract the data that is needed in order to create the tweet. Due to the 140 character limit, there won’t be much needed here so we’ll just need the basics.

• Title
• Author
• Tags
• URL

After gathering the basic data and we can now think about what to actually write for the tweets.

Creating the content The basic template for our bot should look something like this.

Today’s Top article is {title} by {author} at {URL}.

The title and URL are quite easy to grab from the data as they are already present. For the author, I want to tag them if they have their Twitter account linked to dev. Otherwise, I’ll just put their name on there. It is quite easy to check whether the Twitter account is linked by the author as we have the data field data.user.twitter_username. If it is null there isn’t a Twitter account linked. In the case of an existing link, we can just mention the author (using @).

data.user.twitter_username === null
  ? (this.author = data.user.username)
  : (this.author = "@" + data.user.twitter_username)

The last thing to do is to add the tags to the final string. I wanted to add them in order for the article to get more visibility in the respective fields. For this, you have to iterate over the tags and add them to the output string. This leaves you with the final string that can be posted.

const title = data.title
const author = ""

data.user.twitter_username === null
  ? (this.author = data.user.username)
  : (this.author = "@" + data.user.twitter_username)

let tweetString =
  `Today's top article from dev.to is:\n` +
  `${title} by ${this.author}\n` +
  `${data.canonical_url}\n\n`

data.tag_list.forEach(tag => {
  const tagString = `#${tag}\n`
  tweetString += tagString
})

Posting everything

You could just copy the string you just generated and manually post it on Twitter. But the goal of this project is to run as autonomous as possible. For this, we’ll create a Twitter application that posts the content for you. The first step here is to get your credentials. In order to do so, you have to register on the Twitter developers site and create a new application. I’ll then put the keys and secrets into a config.js that looks like this. In the main.js you will then have to import the config file as well as the twit package as it makes creating a Twitter bot extremely easy.

module.exports = {
  consumer_key: "",
  consumer_secret: "",
  access_token: "",
  access_token_secret: "",
}

Now that everything is set up you just have to create a function using the .post() method of Twitter. This will create the post with the content as well as give you feedback on whether the post was successful or not.

function tweet(inputString) {
  T.post(
    "statuses/update",
    {
      status: inputString,
    },
    (err, data, response) => {
      if (err) {
        console.log("There was a problem ", err)
      } else {
        console.log("Tweet was posted")
      }
    }
  )
}

The future

In the near future, I want to add some small features to this bot. The first thing would be the ability to show the top 3 articles each day. Due to the twitters character limit, I’d have to either post the other 2 articles as responses or create a chain of posts. Either way, this enables people that can’t get enough (like me) to enjoy more content. I also yet have to deploy everything and make it run on a regular base (probably every 24 hours).

If you like this article or the idea behind let me know. You can also contact me on Twitter if you have any questions or tips for improvement.