How to make a JS-free webring?

[Daniele63]

Hi, I currently run a webring that has 100+ members in it, I originally inherited it from someone who decided to delete his website and pass on the webring to me, the widget he made is made in JavaScript, however I see the problem with relying with JavaScript, especially on old browsers.

So my question is, how do you make a webring code that doesn't rely on JS to be updated?
Other question is, is it practical to change it now when so many people already use the widget, should I even care?

If you want to check the code of the webring, it's available here.

[kurohaato]

Off the top of my head, you could theoretically make an JS-free webring by giving each user a direct link to the neighbors in their ring, like so:

Code

<a href="sitex.net"><- prev</a> <a href="sitez.cloud">next -></a>

That being said, it would involve an insane amount of communication on your part. You'd have to directly send the code to all 100+ sites, plus every time someone leaves the ring, you'd have to directly contact the two site admins before and after them. And there's no promise they'll actually update their sites. 

I'm not super familiar with optimizing sites for old browsers, could you explain some of the issues you're worried about?

[candycanearter07]

I mean, whats stopping you from just having the backlink go to your server and having it redirect based on a ?GET parameter? That seems like the easiest way to do that without JS, and would be easy enough to change around if you need.

[Daniele63]

Off the top of my head, you could theoretically make an JS-free webring by giving each user a direct link to the neighbors in their ring, like so:

Code

<a href="sitex.net"><- prev</a> <a href="sitez.cloud">next -></a>

Yes but that would be super unpractical, especially with websites that get deleted.

I'm not super familiar with optimizing sites for old browsers, could you explain some of the issues you're worried about?

Relying on JS makes it less compatible with very old browsers like IE or people who choose to disable it for security reasons.

I mean, whats stopping you from just having the backlink go to your server and having it redirect based on a ?GET parameter? That seems like the easiest way to do that without JS, and would be easy enough to change around if you need.

I don't understand, can you elaborate on that? What do you mean by the backlink and what language would that be written in? Any examples I can look at?

[paradigmatic]

however I see the problem with relying with JavaScript, especially on old browsers.

If you really want to support old browser, you should use a server-side approach. First web-ring did use Common Gateway Interface (CGI). If you dig around you may be able to find some old working code. But finding a webhosting that support CGI may be a bit more difficult.
 

[Dan Q]

I've been musing on this, and I think you've got three to seven options depending on where you draw the subdivisions. Some of them can be combined, e.g. you could use a server-side version and then use JS to "enhance" it, where it's supported (so everybody gets something). But anyway; here's four starting points:

1. JavaScript. This is the most-popular way nowadays. The "host" provides a JS file, possibly dynamically-generated. The "members" reference that script. The script adds a widget to the page with links to the previous and next sites. There are alternative approaches that would allow sites to selfhost the script (e.g. allow CORS and "fetch" the links to the adjacent sites, or use a server-side approach to handle links as described below), but they're all just variations on a theme.

2. Dumb raw HTML. As described earlier in the thread: just give each member some code that adds links to the previous and next sites. Really brittle; will break at a moment's notice. Not recommended.

3. An <iframe>. The "host" provides a dynamic page which the members then embed as an <iframe>. Heavier load on the host's server than any of the other options, and can still end up blocked (folks like me who routinely block third-party JS also routinely block third-party iframes), but might work in more places. And can potentially provide better security to members, because iframes can't be used by the host to "inject" malicious content with quite the same level of impact.

4. Server-side approach. This is how webrings USED to work. The "host" computer has a list of sites. Members embed some HTML that contains links like <a href="ht​tps://webring-host.example.com/?action=prev&me=123"> and <a href="ht​tps://webring-host.example.com/?action=next&me=123">, where '123' is some kind of identifier of the site you're ON. The "host" server then looks up the site you came from and redirects to the "next" or "previous" site. This kind of approach could be enhanced by JS that pre-looks-up the previous and next destinations and swaps-out the links so that JS users don't have to dog-leg through the redirect and can see the destination member before they click the link. But yeah, you'll need a server you can run code on (e.g. PHP).

Just for fun, I've knocked you up a (VERY minimal and basic but) completely fully-functional PHP webring in a single file. Just call this something like "index.php" and put it in a folder on your site (either the root or a subdirectory) and then put the URL of that site/subdirectory into the $host at the top and the list of sites into the $members section:

Code

<?php

// Where is the host site?
$host = 'https://webring.example.com/';

// A list of member sites; they're automatically "numbered" from 0 onwards, but I've added
// comments to help you see what they are:
$member_sites = [
  'https://danq.me/',                             // 0
  'https://melonland.net/',                       // 1
  'https://frutigeraeroarchive.org/',             // 2
  'https://whiteheartrainbowsoul.neocities.org/', // 3
];

// Any time anybody comes here from a member site, they'll be sending their "me" ID (from the list above).
$me = isset($_GET['me']) && is_numeric($_GET['me']) ? intval($_GET['me']) : null;

// When somebody requests an action, we need to know what it is.
$action = isset($_GET['action']) ? $_GET['action'] : null;

// If somebody comes to ?action=prev&me=2 (where 2 is their site number), we need to redirect them
// to the PREVIOUS site in the list.
if($me && $action === 'prev') {
  $prev = $me - 1;
  if($prev < 0) $prev = count($member_sites) - 1; // wrap-around when we get to the end!
  header("Location: {$member_sites[$prev]}");
  exit;
}

// If somebody comes to ?action=next&me=2 (where 2 is their site number), we need to redirect them
// to the NEXT site in the list.
if($me && $action === 'next') {
  $next = $me + 1;
  if($next >= count($member_sites)) $next = 0; // wrap-around when we get to the end!
  header("Location: {$member_sites[$next]}");
  exit;
}

// If somebody comes to ?action=random, we need to redirect them to a random site in the list.
// They don't need to send their "me" ID to do this.
if($action === 'random') {
  $random = rand(0, count($member_sites) - 1);
  header("Location: {$member_sites[$random]}");
  exit;
}

// If none of the above happen, we should show a page with a list of member sites and instructions on
// joining the webring. That might look a bit like this:
?><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Webring</title>
</head>
<body>
  <h1>My Webring</h1>
  <h2>Members</h2>
  <ol start="0">
    <?php foreach($member_sites as $site) { ?>
      <li><a href="<?php echo $site; ?>"><?php echo $site; ?></a></li>
    <?php } ?>
  </ol>
  <h2>Instructions</h2>
  <p>
    Once you've been admitted to the webring, put this code on your site:
  </p>
  <pre>
    My Webring:
    &lt;a href="<?php echo $host; ?>?action=prev&amp;me=YOUR_SITE_NUMBER"&gt;Previous&lt;/a&gt;
    &lt;a href="<?php echo $host; ?>?action=next&amp;me=YOUR_SITE_NUMBER"&gt;Next&lt;/a&gt;
    &lt;a href="<?php echo $host; ?>?action=random"&gt;Random&lt;/a&gt;
  </pre>
</body>
</html>

[Daniele63]

I've been musing on this, and I think you've got three to seven options depending on where you draw the subdivisions. Some of them can be combined, e.g. you could use a server-side version and then use JS to "enhance" it, where it's supported (so everybody gets something). But anyway; here's four starting points:

Thanks, that's very helpful, I will have to look at this later but this seems to be the way to go. I've just never learned PHP so it all feels very alien to me, but I'll see if I can understand it. I assume I need to install PHP on my website first? I have PHP installed for my forum but my main website is HTML only so, I assume it wouldn't work if I just put the file there, would it?

[Dan Q]

PHP needs to be installed on the server that hosts your website, and then your webserver needs to be configured to use it (typically the configuration says something like "if a file ends with .php, run it through PHP first!").

If you might already have PHP installed, try adding a file to your website like this (call it e.g. "check.php") to test, and then go to e.g. https://frutigeraeroarchive.org/check.php and see what it says:

Code

<?php
echo 'HELLO WORLD backwards is ';
echo strrev( 'HELLO WORLD' );

If you've got PHP installed, that page will look like "HELLO WORLD backwards is DLROW OLLEH". If not, you'll either see a blank page or the actual PHP code.

Your web host might be able to help with enabling PHP on your server. (If you selfhost, that's you of course!)

Good luck!

[Daniele63]

If you've got PHP installed, that page will look like "HELLO WORLD backwards is DLROW OLLEH". If not, you'll either see a blank page or the actual PHP code.

Your web host might be able to help with enabling PHP on your server. (If you selfhost, that's you of course!)

Good luck!

Ah thanks, yeah I indeed have PHP installed as I also have a phpBB forum on my server (which is a VPS running Ubuntu Server), I did the test you sent and it indeed works  I'll experiment with the webring part later.

[grubbyfox]

Ah thanks, yeah I indeed have PHP installed as I also have a phpBB forum on my server (which is a VPS running Ubuntu Server), I did the test you sent and it indeed works  I'll experiment with the webring part later.

ooooh hope you'll let us know when/if you get around to the webring, i'd like to see how it turns out! also your forum looks super, is it open for anyone to join?

[Daniele63]

ooooh hope you'll let us know when/if you get around to the webring, i'd like to see how it turns out!

Yeah sure I'll post an update here when I get around to it, I'm just a bit busy lately. At least now I know what to do hehe.

also your forum looks super, is it open for anyone to join?

Yes   it's open for anyone, I'd love to see more people to join it, especially folks from melonland.