DEV Community: Jayanth Acharya

How I built a History Twitter Bot

Jayanth Acharya — Wed, 08 Dec 2021 08:42:35 +0000

Here is the titular Twitter bot.
Its daily mission : To recount what happened in history on that particular day.

For example on Nov 22, 2021 The bot tweeted a historical event that took place on Nov 22

235 : Pope Anterus succeeds Pontian as the nineteenth pope. During the persecutions of emperor Maximinus Thrax he is martyred. https://t.co/eecbAnRmCZ
— OnceUponThisDay (@jayanthisabot) November 21, 2021

Concept

The idea is very simple, steps involved would be

Get current date
Get some historical event for that date: Wikipedia is a great source as you can search for a day and get all events for that day eg : November 22
Tweet it!!

My task was made easy thanks to two wonderful npm packages

wtf_wikipedia : Library to parse data from wikipedia

Twit : Twitter API Client for node, Supports both the REST and Streaming API.

Using these libraries the idea was to create a NodeJS app and host in publicly.

Implementation

Getting data from Wikipedia

Once I had the current date, I formatted it as required by Wikipedia search

function getFormattedDate() {
    const date = new Date();
    const month = date.toLocaleString('default', { month: 'long' });
    const day = date.getDate();
    return month + '_' + day;
}

Once the date is created I can use the wtf_wikipedia to get the details of the page.

 const doc = await wtf.fetch(date, 'en');
 const data = doc.json()

Seeing the structure of the page, I would like to exclude Deaths and Births data and only stick to Events

Poking around the json data, I decided to filter out the data as follows

 for (let i = 0; i < data.sections.length; i++) {
        if (data.sections[i].title.toLowerCase() === 'deaths' || data.sections[i].title.toLowerCase() === 'births') {
            break;
        }
        if (data.sections[i].title && data.sections[i].title.toLowerCase() !== 'events') {
            events.push(data.sections[i])
        }
    }

Now it is just matter of selecting one of the events by random from the events list.
Some cleaning and formatting I finally have the link to tweet.

    const randomSectionList = events[randomNumber(0, events.length)].lists[0]
    const randomListItem = randomSectionList[randomNumber(0, randomSectionList.length)]
    const page = randomListItem.links[randomListItem.links.length - 1].page
    const pageLink = ` https://en.wikipedia.org/wiki/${page.replace(/ /g, "_")}`

    const tweet = randomListItem.text.replace("&ndash;", ":") + pageLink

Tweeting the event

Twit is a powerful library, I should probably use its other streaming features in future project, for now let's stick to the basics and just use the tweet functionality.

Initial configuration would require some keys and tokens to be set in .env file

CONSUMER_KEY=<CONSUMER_KEY>
CONSUMER_SECRET=<CONSUMER_KEY>
ACCESS_TOKEN=<ACCESS_TOKEN>
ACCESS_TOKEN_SECRET=<ACCESS_TOKEN_SECRET>

These keys can be got from the Twitter developer console

360° Product View

Jayanth Acharya — Fri, 03 Dec 2021 16:15:33 +0000

I am always impressed by the websites that showcase products in unique ways on scroll of the page. Transitions, fades, warps, zooms so on. One very particular animation I want to try is the 360 degree rotation of the product on scroll.

Like this from Nuro

It gives complete 360 view of the product.

The Nuro implementation

After a bit of digging around the side I see the website downloads each and every image required to create the full view of the vehicle. That's a lot of images, 127 images to be precise.

And these images are loaded onto a canvas to create an animation. Long story short, I want an easier solution.

Then it flashed, Sprite sheet

Sprite sheet

Using a sprite sheet, I can load a single image file with all the individual frames required to complete the 360 view of the product

Concept

The idea is simple, one used since the dawn of cinema. Create a view window that only sees a certain section of the whole image, and move new frame into the view on each scroll, hence creating an 360 view effect

Think of red box as the only part visible at the time and we move image on each scroll step

Implementation

First thing to know is what is the height and width of the individual image.
The image used here each frame is
height : 600px
width : 350px

Let us create a div and set the background as the image along with height and width. also let us set the height of body so we have something to scroll


 css

body {
    height: 2000px;
}

#car {
    width: 600px;
    height: 350px;
    position: fixed;
    background: transparent url(https://www.cssscript.com/demo/product-viewer-animate-sprite/car.jpg);
  }

That should complete the CSS.

Lets move on to the javascript part

First let's query select the html elements that will be used,the div that holds the car image and a counter that we will use for debugging (not necessary for the implementation)


 javascript
const car = document.querySelector("#car");

// only used for debugging
const countIndicator = document.querySelector(".counter");

Next the height and width of the single image, we will also need number of individual images(sprites) in the the entire image, in this case it is 61. this is so that we can loop back to first image when we reach the end.

Things would have been easier if all images were in the same line, but we have 13 images each line, so let us keep that in imagePerLine which will help us know to jump to next line of images



const imageCount = 61;
const imageWidth = 600;
const imageHeight = 350;
const imagePerLine = 13;

All initialization done, let's create the scroll event listener

window.addEventListener("scroll", function (e) {})

Now that we have a scroll event listener, we can get all the scroll related properties, what we want is the scrollTop property

const { scrollTop } = e.target.scrollingElement;

Next task : count from 0-61 then back to 0.
Performing a mod % operation on the scrollTop value we can ensure a value stays within our image count
i.e



let stepCount = scrollTop % imageCount

Test the update of stepCount by assigning it to the countIndicator on scroll.

The steps increment way too many times per scroll we need reduce steps per scroll.

Dividing the scrollTop by some number say 10 will give 'smoother' transition values, also a Math.Floor to avoid float values.
We finally have the stepCount as



let stepCount = Math.floor((scrollTop / 10) % imageCount);

Giving us smoother transition of stepCount per scroll

Now that stepCount is calculated we need the row and column index to the select the image from sprite sheet, this is where the image per line imagePerLine comes into play.



 let columnIndex = stepCount % imagePerLine;
 let rowIndex = Math.floor(stepCount / imagePerLine);

Now that we have the row and column indexes, we can calculate our x and y position in pixels by multiplying with imageWidth and imageHeight respectively, this value can be used to set div css backgroundPosition.