/
index.html
87 lines (56 loc) · 4.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>404 Checker</title>
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
<header id="sticky-header">
<h1>404 Checker</h1>
<p>Use jQuery, PHP, and an archive.org API to check the HTTP status of a link and redirect to Wayback if it's 404.</p>
</header>
<div class="container" id="pubdate" data-waybackpubdate="20060303">
<p>This tool sniffs out the HTTP status of links on a page, and if the URL returns 404 (or if it returns no headers at all) it queries the Wayback Machine's API to see if a snapshot is available. If one is, we can choose whether or not to redirect users to the Wayback snapshot instead of a 404 result.</p>
<h2>Best approach?</h2>
<p>At the moment, the script goes through three steps:</p>
<ol>
<li>On `document.ready`, the links are scanned and external links are flagged.</li>
<li>On hovering over a link, we use PHP and AJAX to reach out and grab the headers for the URL in question.</li>
<li>If the page returns a 404 header, or doesn't return a heard at all, we query the Wayback machine to see if it has a snapshot.</li>
</ol>
<p>A few things:</p>
<ol>
<li>It would be better if the initial link scan is limited to areas of the page known to contain links worth checking, like main content areas. There's no sense in scanning links in areas of the page we know to contain good links.</li>
<li>In theory we <em>could</em> preemptively scan all the links, instead of on hover. This is certainly easier from a programming standpoint, but possibly not so good from a UX and resources standpoint, as we'll be making a bunch of (possibly unneeded) HTTP requests.</li>
<li>Right now the script only checks for 404s and pages that don't resolve at all. There a lot of other HTTP statuses we could be checking for.</li>
<li>At the request of <a href="https://twitter.com/waxpancake/status/532597685191454720">@waxpancake</a>, the demo page has a fake pubdate of `20060303`, which the script is using to ask for a Wayback snapshot as close to this date as it will give us. If no pubdate is present (or if it's not in Wayback's preferred format: YYYYMMDD), Wayback will default to returning the most recent snapshot.</li>
</ol>
<p>If we go with the on-demand approach, we need to decide what to do:</p>
<ol>
<li>Do we try to replace the URL before the user clicks? Depending on how fast the HTTP check comes in, the user may click before we get a response.</li>
<li>It's possible we've been able to flag the link as 404, but don't have a result from the Wayback API yet yet. So do we capture the click, make a note of it, then push the user to the snapshot URL when it comes in, assuming it will come in a timely manner? If not, what?</li>
</ol>
<p>Anyway, here's the 404 Checker in action.</p>
<p>Please note: I have not, but intend to, see how things work on touch devices. We'll likely need a different approach to the link events.</p>
<h2>Examples</h2>
<p>Hover over the links and watch the console for results. (The checks only run once for each link.)</p>
<ul>
<li>This link is internal and won't be checked: <a href="/">internal link</a></li>
<li>This link does not return a 404: <a href="http://waxy.org/2006/03/litigation_cosb/">http://waxy.org/2006/03/litigation_cosb/</a></li>
<li>This link returns a 404 and has a Wayback snapshot: <a href="http://www.channel101.com/articles/article.php?article_id=70">http://www.channel101.com/articles/article.php?article_id=70</a></li>
<li>This link returns a 404 and does <em>not</em> have a Wayback snapshot: <a href="http://alistaport.com">http://alistaport.com</a></li>
</ul>
<hr>
<p>
Console:<br>
<textarea id="fake-console" style="width: 100%; height: 200px; font-size: .8em; font-family: courier; padding: .5em;"></textarea>
</p>
</div>
<a href="https://github.com/murtaugh/404-checker"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<script src="assets/js/libs/jquery-1.11.0.min.js"></script>
<script src="assets/js/functions.js"></script>
</body>
</html>