Read on Twitter
Coding a Self Updating Progress Bar in Javascript
A running thread.
Y’all won’t believe the hoops I’m jumping through.
Task seems simple enough:
“Make progress bar on http://eashanreddykotha.com/poetry that auto-updates once a day to indicate his progress writing 1,000 haikus”
1/
A running thread.
Y’all won’t believe the hoops I’m jumping through.
Task seems simple enough:
“Make progress bar on http://eashanreddykotha.com/poetry that auto-updates once a day to indicate his progress writing 1,000 haikus”
1/
Context:
I’m writing 1,000 Haikus. I post these haikus on Medium.
The format of all the posts are the same.
The kicker and subtitle never change.
2/
I’m writing 1,000 Haikus. I post these haikus on Medium.
The format of all the posts are the same.
The kicker and subtitle never change.
2/
To indicate progress on the progress bar I need to take the haiku number, divide it by 1,000 and multiply by 100.
Or basically just divide the number of the haiku by 10.
Love math.
The haiku number is embedded in that string or object that’s holding “Haiku # out of 1,000”
3/
Or basically just divide the number of the haiku by 10.
Love math.
The haiku number is embedded in that string or object that’s holding “Haiku # out of 1,000”
3/
At first I was like let’s check out the Medium API!
Turns out. I can’t get my post subtitle through it.
A whole L.
4/
Turns out. I can’t get my post subtitle through it.
A whole L.
4/
Did some searching and realized I could effectively just request Medium for a JSON (JavaScript Object Notation) of my profile page.
BUT! Roadblock.
Can’t access the JSON directly because there’s bot protection on it. SMH
Did more search and found a workaround...
5/
BUT! Roadblock.
Can’t access the JSON directly because there’s bot protection on it. SMH
Did more search and found a workaround...
5/
Yeah guess what?
I can take the RSS feed and convert it to JSON.
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@eashanreddykotha
Boom. JSON information available.
No need to worry about recaptcha or whatever
6/
I can take the RSS feed and convert it to JSON.
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@eashanreddykotha
Boom. JSON information available.
No need to worry about recaptcha or whatever
6/
Remember, this is working because my profile is shown as a FEED (check url).
If you dig into the viewer you’ll see that the thing I’m looking for is like Inception.
It’s the value for the name “description”: and THAT is nested that’s inside an array called “items”
Oh boy.
7/
If you dig into the viewer you’ll see that the thing I’m looking for is like Inception.
It’s the value for the name “description”: and THAT is nested that’s inside an array called “items”
Oh boy.
7/
In true programmer fashion, I shall end this thread here because I wrote it yesterday and left it in my drafts. I worked on the progress bar this morning and GOT IT TO WORK.
It was very exciting.
It updates *exactly* whenever I post another haiku in my 1,000 Haikus project
8/
It was very exciting.
It updates *exactly* whenever I post another haiku in my 1,000 Haikus project
8/
If you’d like to talk about the progress bar, send me a DM.
We can talk about it! LOL
9/
We can talk about it! LOL
9/
It’s written in Javascript, embedded into the site with HTML.
If you want to look at dynamic progress bar, it’s at
https://eashanreddykotha.com/poetry
10/
If you want to look at dynamic progress bar, it’s at
https://eashanreddykotha.com/poetry
10/
