How I Wrote a Script to Clap Medium Articles
By: Ethan Fournier
Tags: Coding, Web Development, Flatiron School, JavaScript

Disclaimer: This article is for educational purposes only and is not intended to violate Medium’s terms of service.

A requirement of the Flatiron School is to write a blog post every three weeks. After each person submits their blog, we’re encouraged to clap their blog post 50 times. One of my coaches sent out a challenge to our entire cohort: write a script to automate that clapping.

I took on that challenge. However, I was not alone. This was a group effort.

Writing this kind of script is a daunting task: where do you even start? We had just went over event listeners in JavaScript and we were able to hunt through buttons on websites and trigger them with a simple button.click(). We were able to do this on a multitude of sites, but not on Medium.

The first challenge was actually grabbing the button. We tried a few different ways. The most obvious way was to grab the element by its class name. This is what I saw:

<button class="bw jw jx jy jz ka lm kc o ia dg n p ln u hr ey t ak gi kd gl lo">

Wow. What do I even do with that?

I’m still a noob in JavaScript, so bear with me. It took me a few tries to realize that to grab this entire class name with querySelector, I had to take out of all of the spaces and write a dot before each of them, like this:

const button = document.querySelector(".bw.jw.jx.jy.jz.ka.lm.kc.o.ia.dg.n.p.ln.u.hr.ey.t.ak.gi.kd.gl.lo")

Okay, I grabbed the button! Cool.

Okay, so this should be easy. I’ll just type button.click(), right?

Wrong! This doesn’t work. Medium doesn’t set up its event listeners that way.

So what do I do? StackOverflow to the rescue!

I search for how to simulate mouse events in JavaScript, and I stumble upon this question:

In particular, I looked at this answer:

(This function comes from a StackOverflow question that is 5 years old now. I understand that they are more modern approaches to this problem.)

Aha!

I copied and pasted the triggerMouseEvent into my console, and then called it by pasting in:

triggerMouseEvent(button, "mousedown");

triggerMouseEvent(button, "mouseup");

And it worked! I added one clap. Success!

So what is this function actually doing? Let’s break it down:

function triggerMouseEvent(node, eventType){

We’re initiating a function and naming it triggerMouseEvent. It takes two arguments: node and eventType.

What does that mean? What’s a node? What’s an event type?

These are just variables, and we can name them anything we want. In a web development context, a node is a HTML element. And the eventType is what it sounds like, it’s referring to the type of event we want to produce.

var clickEvent = document.createEvent('MouseEvents');

This next line is initiating a variable, clickEvent, which is being set equal to a new event we are creating, “mouse events”. This is a somewhat deprecated way of doing this, but it still works.

clickEvent.initEvent(eventType,true,true);

This line initiates the event, clickEvent, passing in the argument of the eventType.

node.dispatchEvent(clickEvent);

This line dispatches the event on the node, taking in the argument clickEvent.

triggerMouseEvent(button, "mousedown");

triggerMouseEvent(button, "mouseup");

When we call the function here, we are putting in the argument of “button” for node, and “mousedown”/“mouseup” for eventType.

Okay, cool. Now we know what’s it doing. How do we do it 50 times?

Simple, let’s create a loop!

Cool, that works!

I tried giving this code to a classmate to see if it worked for them, and it didn’t! Why wasn’t it working?

They inspected the button on their web page. The class name was different! Medium assigns a different class name for each user for their buttons.

I also realized that Medium will automatically change the class of the clap button if you refresh the page.

A classmate had the idea of counting to see what position the button is in in the array of buttons. Genius! Now I have a script I can share among my classmates that will clap the blog post 50 times.

Wait a minute. I have more than one cohort mate I want to clap on. What do I do now? The script is useless!

I could try counting the buttons again, but the button is always in a different position depending on which blog post it is. I would have to go to each individual blog post, find the position in the array that the button is in, and then run my function. That’s way too much work.

After some time, my classmates and I had a new breakthrough: if we can’t run the script on each individual blog post, what if we run it on their profile page?

Eureka! We discovered that the clap buttons on everybody’s profile page is in the same position, and at the same distance apart.

So all we had to do is wrap the first for loop in another loop, grab all of the buttons, and then iterate through them, triggering mouse events on only the clap buttons. Triggering mouse events on all of the buttons would invariably take you to another page.

We wrapped all of that into one claps function. Every time you want to run the script, you paste the function into someone’s profile page, and then call it, and voila! You’ve clapped all of their articles 50 times.

I’m not going to paste the entire script here, as I don’t want to violate Medium’s terms of service. If you were to hypothetically go onto someone’s profile page who had a large number of blog posts, you could overload Medium’s servers, as well as if you had multiple people running the same script on people’s profile pages.

Additional disclaimer: I only ran this script on my classmate’s blog posts. I’ve only shared the full script with my classmates. I did not sell this script or take any money for clapping anyone’s blogs.

I am not responsible for anyone replicating this information and using it to violate Medium’s terms of service.