Article Continues Beneath
On this week’s situation of A Checklist Aside, Val Head wrote about animations and the way they’ll enhance consumer expertise. Val offered some demos, and we needed to resolve easy methods to function them.
We favor to host demos on our personal servers, a observe that guards in opposition to hyperlink rot. Hyperlink rot happens when a web site re-organizes their URL scheme however doesn’t re-direct guests from outdated URLs to new ones, or when a web site ceases to exist (Dean Allen the place are you), or when pages are merely taken down (for causes passing understanding).
On this case Val offered her demos by way of CodePen, one of many higher code-sharing instruments obtainable. CodePen makes it simple to obtain the shared recordsdata, but it surely appeared a disgrace to host the demos domestically and never benefit from the options CodePen provides. So, cool, let’s embed the pen, proper?
However wait
If we’re serious about the longer term (or extra helpfully, the previous), we’ve to contemplate: What occurs when CodePen goes away? Or modifications its URL construction? Or places limits on the variety of instances a pen might be considered? None of these items appear doubtless at present, however on an extended sufficient timeline the survival charge for all the pieces drops to zero (and we’ve seen loads of hyperlink rot since 1998).
We’re conflicted between wanting enjoyable (and useful) toys, and being good caretakers of content material; it’s one thing of an existential disaster.
Thankfully
There’s a solution.
My very own knee-jerk argument was that updating damaged demos wouldn’t be an onerous process; so long as we’re cautious to save lots of demos domestically we are able to simply swap them in. But when we’re anticipating a future the place embedded pens aren’t working, who’s to say I’ll be round and can have handed on the information on easy methods to repair them?
If cool URLs don’t change, cool content material anticipates un-cool URLs.
Right here’s what to do
1. Save the code domestically
We’ve got an area on our server the place all demos dwell. (That it occurs to be within the folder that’s distributed to our CDN is a bonus.)
2. Alter the embed code
Right here’s the usual embed code for a pen:
<p data-height="268" data-theme-id="0" data-slug-hash="HLikb" data-default-tab="outcome" class="codepen">See the Pen <a href="http://codepen.io/valhead/pen/HLikb">Present/Disguise Instance</a> by Val Head (<a href="http://codepen.io/valhead">@valhead</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://codepen.io/belongings/embed/ei.js"></script>CodePen’s embed code, like Twitter’s and like our personal embeddable feedback, features a snippet of HTML meant for when the embed script fails and the embedded content material doesn’t render. This might occur for a pair causes:
- JavaScript is failing, or turned off, by which case the reader most likely isn’t going to learn from CodePen’s options anyway, or
- CodePen’s servers aren’t responding, and the embed code isn’t going to work in any respect.
So, let’s change the embed code to benefit from this built-in fail-safe and use it to make our content material future pleasant:
<p data-height="268" data-theme-id="0" data-slug-hash="HLikb" data-default-tab="outcome" class="codepen">See the demo: <a href="http://alistapart.com/d/390/ui-animation-and-ux-a-not-so-secret-friendship/demo-show-hide">Present/disguise instance</a></p>
<script async src="https://codepen.io/belongings/embed/ei.js"></script>And it really works
Flip off JavaScript and re-visit Val’s article. As a substitute of the embedded demos you’ll see some nice-looking hyperlinks.
(It’s value noting that whereas I’m not essentially endorsing CodePen over different embeddable code-sharing instruments (Gists, jsFiddle, and so on.) I am recommending it as a future-friendly instrument for the straightforward cause that it has the HTML fallback snippet. Embeds that don’t have a fallback can fail invisibly, leaving holes which will or is probably not evident.)
So, if CodePen goes away? The embedded demos routinely develop into hyperlinks to our native variations. It’s a bit extra work, however 100% value it.