Hey! iDestyKK here. It's been a month since my last diary entry. Sorry about that!

Webrings?

Today, I wanted to write about webrings. There are a few changes on my website pertaining to webrings. In fact, changes in the last few weeks had to do with them. So, what is a webring? Well, put simply, it is a way to link websites together. Websites are linked through a circular data structure so if you click "Next" on enough sites, you'll eventually end up back where you started. It loops. Simple enough.

As of writing this, my site is part of 15 webrings, linking to 30 different sites. However, my site has 2 different versions of webring pages:

• Widget-based (Classic) - Webrings are displayed using the widgets intended for them.
• Consistent (Simplified) - Webrings are displayed in a consistent manner, allowing for more simplified traversal.

Regarding the classic version, all you have to do to add a webring widget to your page is... copy and paste the code that the webring developer gives you onto your page. Regarding the simplified version, I had to reverse-engineer how the webrings worked to create custom widgets. It's not that special, actually.

Reverse-engineer?

Webrings are actually very simple to implement. Usually people just throw websites into an array and use some JavaScript to find where your page sits in the array, and then increments/decrements the array for next/previous. This also makes randomisation easy. The only math involved is modulo, to make the array appear circular (so the last site can link to the first and vice versa).

What I just described is how OnionRing.js works. This is a popular way to implement webrings which I've seen and joined. So, what's the deal? Well, most (if not, all) OnionRing webrings require you to import a variables.js file which contains a list of the websites that are in the webring. It often stores the sites in an array called sites. You can access this via Inspect Element. Most of the time, it looks like this:

var sites = [
	"https://claranguyen.me",
	"https://example.site2.com",
	"https://example.site3.com",
	"https://example.site4.com"
];

So if we import the variables file, we can access sites and do stuff with it. Neat. Ok, then how do we find where our site is when in the array? Simple.

<script type = "text/javascript" src = "onionring-variables.js"></script>
<script type = "text/javascript">
	var index = sites.findIndex(site => site.includes("https://claranguyen.me"));
	console.log(index);
</script>

In this case, it will output 0 to the console.

Navigating the array

So, if we want to grab the next site and the previous site, we need to navigate the array in a very specific way. You might be inclined to believe it's as simple as adding or subtracting 1. But this isn't the case. Especially in my example up above where my site is the first index in the array. If you go backwards, you need the website at index 3, not -1. The simple way to do this is the following:

<script type = "text/javascript" src = "onionring-variables.js"></script>
<script type = "text/javascript">
	var index, prev, next, rand;

	index = sites.findIndex(site => site.includes("https://claranguyen.me"));
	prev  = (index - 1 + sites.length) % sites.length;
	next  = (index + 1) % sites.length;
	rand  = Math.floor(Math.random() * sites.length);
</script>

We are almost set up. Now to access the website URLs, we have to use sites[prev], sites[next], and sites[rand]. I personally just modify a DIV's innerHTML to forcibly generate links. But you can do this in whatever way you wish.

What about other types of webrings?

The only other type I have yet to encounter is one where the webring site handles the logic instead of your site and JavaScript. These come in the form of URLs like:

• https://webring.example/index.html?action=previous
• https://webring.example/index.html?action=next
• https://webring.example/index.html?action=random

In this case, it is even simpler to implement a custom widget, since you do not need to implement literally anything. Just link to those respective links in your custom widget and their site will handle the rest.

PHP implementation

My simplified/consistent webrings page is generated with PHP. It still uses JavaScript to deal with OnionRing. However, the logic is put in place by PHP. My page is actually very simple on paper. It literally looks like this:

<h2>Webrings I'm in...</h2>

<?php
	webring_cdring();
	webring_noai();
	webring_neo_nihongo();
	webring_off_platform();
	webring_rhythm_gaming();
	webring_droid();
	webring_gamedev();
	webring_webmaster();
	webring_gamer();
	webring_indie();
	webring_ds();
	webring_adhme();
	webring_musicians();
	webring_idol();
	webring_goth_music();
?>

<h2>Pending...</h2>

<?php
	webring_woti();
	webring_tropical_rice_bowl();
	webring_pinkcredible();
	webring_schizospectral();
	webring_diva_ring();
	webring_yugioh();
?>

Each webring_*(); is a PHP function that injects the proper HTML/JS at that particular spot. I like clean code. Though I don't think it generates very nice-looking HTML. It's definitely not tabbed correctly. Oh well.

Conclusion

That's my nerd-talk about webrings! Compared to my other reverse-engineer efforts on CN_Blog, this was much simpler to do. I like to tinker with things though, a normal thing for an engineer. But that wraps it up for this diary entry. I hope you learned something.