Blogger, Writer, Web Developer

Announcing: The Drupalers Webring

I'm announcing a new project that I've been working on called The Drupalers Webring!

I've really been getting into retro web paraphernalia lately, and one of the things I've been paying special attention to are webrings, a way of connecting a group of websites all devoted to a shared special interest. A visitor can start at any website, and by using a shared widget on all of those websites, that person can jump from one website to the next.

After going going through some popular webring lists (like this one, or this one), I noticed that there were no webrings dedicated to Drupal users!

This felt like such a missed opportunity! Drupal has a huge international community filled with people who do weird web stuff, and it seemed wild to me that we didn't have anything like this yet.

So, I decided to make one and host it directly on my personal Drupal blog.

Using Webringu

I used a fairly new webring implementation called webringu, which I liked because it was a single piece of JS that handled both the navigation logic, and rendering the members table. The nice thing about it is that the members have the freedom to style the HTML widget however they want. Plus, they don't need to plug in a 3rd party script, which I believe helps improve trust and performance. 

But on the whole of it, I just like how flexible it is for the end user.

Druplaizing Webringu

I thought it would be cool to make this implementation lean really heavily into Drupal. So, I installed Webforms and set up an application form for the purpose of giving people a place to submit their interest for joining the webring. As a plus, I'm able to get an email notification for every applicant.

As for the actual webring, at first, I created a node on my blog that hosted everything: the rules and member list, and the JS script. This worked just great for launching the webring and telling people about it. So far, we just have two members, but I'm excited to see who applies as time goes on.

One downside of the tool, however, is that there is a brief content flash of my website every time someone traverses the webring.

Unfortunately, that means my server has to bootstrap my theme, the webringu script, and all of my page content before a user can even go to the next website in the webring.

To make things a little more Drupal-y, I decided to create a custom module with a controller that sends users to a bare HTML response page if the correct URL query parameters are present, that way the page loads way faster. That page has nothing except an H1 and a script tag, so the time-to-response is lower, and the payload is smaller.

If the person is just visiting the page, however, I can just render a content block that contains all of the markup I need to explain the rules, share the code, and make it look more like a "post" on my website.

I also implemented the webringu script as a custom library so I can pass the defer attribute on it or minify it if needed.

Unfortunately, this means I'll need to make a code change for every applicant, but I think that's tolerable in order to cut down on load time.

Next Steps

I've got a few more bells and whistles I could add to the implementation. I think it would be cool to do some more work with cache tags to get the HTML response as fast as possible.

Likewise, this implementation is flexible enough that, if I wanted to, I could also just write my own module that takes care of the membership storage and redirect logic directly in Drupal, but we're a bit far away from actually needing to do that. Right now, I think it's in a good enough state to share with more folks. 

So, I'm going to post it on the Drupal Slack today and try and gauge people's interest.

If you do decide to join, we'd be happy to have you! Head on over to the Webring page and check out our rules and instructions to join.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang rel class> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p class>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Webmention notify form

CAPTCHA
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Author Information

Drupal developer, blogger, NixOS package maintainer, Linux user, and experimental literature enthusiast.