How I put my Latest Blog Post onto my Melonland Profile

A few weeks ago I thought I'd try to find a way to showcase my latest full-length blog post on my Melonland profile. It wasn't easy, but it was an interesting technical journey. Perhaps you'd like to come along with me as I relive it? I think it a good explanation of what I mean when I talk about developing a hacker mentality and asking "what can I make it do?".

But first: here's what I'm talking about. That bit there, at the top right of my profile, is an automatically-updating summary of the current showcased blog post on my website:

Attempt #1: <iframe>s

What I tried

This should be easy, I thought. All I need to do is:

(a) make sure that my website contains a special page that's just the latest post's title, summary, and any highlight image, with the whole thing wrapped in a link to the post itself, and

(b) put something like this onto my profile page:

Code

<iframe src="https://danq.me/some/special/page/address"
      width="560"
     height="321"
frameborder="0"
  scrolling="no">

Sorted!

Why it failed

The forum software underpinning Melonland - not unreasonably - strips <iframe>s from profile pages. That makes some sense for many forums (the last thing you want is somebody injecting code onto their profile page to make it "look like" a login page, but actually stealing the credentials and sending them to the attacker's server!).

But here, with curated admission, a culture of artistic experimentation, etc., I don't think anybody here's going to use it to "attack" the site. Right? So it's just an unfortunate side-effect of the underlying software.

Ah well... I have other ideas...

Attempt #2: dynamic image/redirect URLs

What I tried

Okay then, how about this:

(a) add a page to my website which, when you go to it, redirects you to the latest blog post

(b) add a script to my website which, when you go to it, sends you an image representing the latest blog post (I already have some code like this; I use it to generate open graph images etc.)

(c) put something like this onto my profile page:

Code

[url=https://danq.me/link/to/redirect/page]
  [img]https://danq.me/link/to/dynamic/image[/img]
[/url]

This initially looked like it had worked perfectly. Great! But when I came back a few days later to check on it...

Why it failed

It turns out that if you put an image on your profile page, it goes through a script (provided by the forum software) called dlattach. This acts as a proxy to the image... but it also performs caching.

The outlink to my own site always took you to the latest page... but the associated image on my profile page was usually an older post: whatever was showing as the "latest post" last time the forum cached it. Whoops! That's no good!

I experimented with setting headers to try to discourage the cache but couldn't find a satisfactory solution. But then I thought...

Attempt #3: shortcode misuse

What I tried

When you're writing a post on this forum, the toolbar's got buttons for all kinds of features. Like, there's the heart icon that helps you "insert a gifypet" onto the page, for example. Press it, and you get a "shortcode" on the page that looks a bit like this:

Code

[gifypet][/gifypet]

Those buttons don't appear in the toolbar when you're editing your profile page... but the shortcodes that they create still work just the same.

A couple of them - including the gifypet one - effectively are <iframes>. You're expected to put the URL of your gifypet in-between the shortcode blocks (and the <iframe> it creates is forced to the right size for a gifypet)... but in fact any <iframe>-able URL is considered valid.

Let me show you an example of what I mean! Here I've used the gifypet embedder to insert a game I call "pass the emoji" into this post. Click an emoji from the four available and it'll stay here, right in this thread, until the next Melonlander comes and changes it!

PetLink!

That forced sizing is an issue, except... on your profile page, you can write your own CSS. I could use CSS to "fix" the size of such an <iframe>, and to remove the "PetLink!" that appears underneath it! Here's what I figured:

(a) do the same as I did for attempt #1, but

(b) use a gifypet block to inject the <iframe> onto my profile page:

Code

[gifypet]https://danq.me/_q26-minimal-posts-list/latest-post?articles_only=true[/gifypet]

Code

/* Abuse [gifypet] as an iframe! */
#pbbc_iframe0 {
  width: 100%;
}
#pbbc_iframe0 + br, #pbbc_iframe0 + br + a {
  display: none;
}

Success at last!

I wanted to share my journey with you not because I expect any of you will do the same on your profile page (but maybe you might!). Instead, I wanted to show you my thought process: how I unpicked this possibility, what I did with it, what I learned, what I tried next.

I think that anybody working on the Web benefits from thinking "like this" (that and knowing how to inspect the code of somebody else's website are the two most important skills!). There are creative solutions to be found to problems, if only you try them!

(Also: I don't know if Melooon will treat this as a bug and patch it out. If so; sorry for exploiting it while it was a bug! But the lesson - that you should try things out when you're developing for the Web, even if you don't know whether it's work, is still a good one I think!)