So if you haven’t notice, every time you view that main title bar, the subtitle has a little extra tagline on the end of it.. sometimes, sometimes it doesn’t. Well, that randomizes on every request. And here, we talk about the smallest thing I’ve made, to date: the tagline picker for that.
Well before we start doing things, I need some taglines to use…
/taglines.txt, there is (at the time of writing) this text file:
I Like to Know Things ;) If Google was a human... I bet I'd be good at Jeopardy!... Experts in computers AND tacky attire! I do this for fun Only have to pay one bill... <i>electrical</i> Objective-C, Objectively bad class Person extends Nerd Hosting providers need not apply There's no place like 127.0.0.1 No need to reboot it... *racks shotgun* How many different hobbies can one man HAVE?! Taglines... gotta read 'em all! Net::ERR_NOTFOUND https://teknikaldomain.me/assumeControlTaglineTrojan.js I reject your reality, and substitute my own! POST, dang you! Windows? Where we're going, we don't need <i>Windows</i> <a href="https://www.youtube.com/channel/UCXOlekZqsiHRLN6EXBUWRow" target="_blank">I'm on YouTube!</a> Those letters do have a meaning. Care to figure it out? I got guns and I got puns, what else do you need to know about me? AMENDMENT 35: No person shall be found with fewer than thirteen times their own body weight of federally provisioned munitions. I am a computer GOD! I <i>am</i> the one who types! The lord of cheese <COUNT>
And yes, there’s a few jokes in here, a few references, it’s just me being me, this is what I do.
Okay, the part that you actually clicked on. Well, first things first, here is the actual script:
Okay, there’s two parts, and this script executes the second half before the first.
The actual entrypoint is line 18, creating an
Before we talk about the rest, let’s go over that.
If you remember my Cloudflare worker
, XHR is the web JS equivalent of the
Making a request like this has a few steps:
- Create request object
- Set request method and URL
- Perform request
- Read and process the results
Okay, with that out of the way, on to the explanation.
Lines 19-22 we’ll talk about in a bit.
Line 24 is a regex on
window.location.href, which is what the little address bar at the top of your browser is saying the current page is.
In other words, I’m asking for what page the user is reading this moment.
because this is pulling item 0, the first one, we extract the first capturing group, which is the hostname.
This is used in the next line, which is
open()ing the XHR.
Line 25 is where we prep the request.
The HTTP method is
GET, the url is the hostname from earlier plus
For.. say, the article
base variable will hold
https://teknikaldomain.me/, which is why I’m not including protocol (
https://) or slash between the host and file, because they’re already included.
The reason I went through the trouble of coding that is so that this code can work either deployed (to
teknikaldomain.me), or in dev mode (
true argument tells if this is an asynchronous request.
Async requests execute in the background and run a callback function when finished, synchronous requests pause the browser thread until they finish.
Now since it’s considered to to synchronous work on the browser main thread (which this will run on), we async it.
XHRs have a few event handlers that trigger in their life.
onreadystatechange, which is fired when the ready state changes, which is a number from 0 to 4.
I register this with a function that makes sure that the ready state is 4 (sent, got response, all done), and the status response is
OK), then we call the actual routine:
setTagline() with the response (the list of taglines.)
Finally in our prep, line 26 is what actually sends the request, with no data at all, since this is a
First, we split the file data into an array on lines.
After this, a random item is picked with no weighting, meaning an even distribution, using
Math.rand(), which returns a floating-point value between 0 and 1.
Multiplying this by the number of items in the list means that it will always randomly select an item from the list with no missed spots.
After that, my totally real and planned feature, the final line of
taglines.txt is blank, thus giving a $1/n$ chance of having no extra tagline at all.
After that, the singular line in there that is
<COUNT> is a special token that is replaced with an
X taglines and counting... string, that shows the number of lines in the list.
The reason I used a token like that is so that this one has the same probability of occuring as the rest of the lines.
Finally, we set it.
First, the subtitle itself belongs to a CSS class,
subtitle, and it the singular element of that class.
Therefore, i can get the list of elements in that class with
document.getElementsByClassName(), and the first one (element 0) will be my subtitle.
once I see this, i replace it’s entire contents with.. it’s entire contents plus a separator and the selected line.
The benefit of just replacing everything is that i can insert raw HTML into the lines, and that will get parsed, which is why some have formatting, and one is actually a clickable link.
This code runs pretty much on every page, and since every page has this construct as the header, every time you navigate around or refresh the page, it’ll re-roll what you’re seeing.
Trust me, the list shown in this post will be obsolete soon, once it does, can you see if you can find them all? Bonus challenge, how many do you recognize?