(X)HTML5 validation results for http://mottr.am

Validator Input

  1. Error: End of file seen when expecting text or an end tag.

    At line 241, column 7

    dy>↩</html>

There were errors. (Tried in the text/html mode.)

Source

  1. <!DOCTYPE html>↩
  2. <html dir="ltr" lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">↩
  3. <head>↩
  4. <meta charset="utf-8" />↩
  5. <meta name="google-site-verification" content="I6L7LN2vcQKRuZmdgjWR4ra9sg2vrJBSRKkLb2HvHVU" />↩
  6. <link rel="stylesheet" href="/c/style.css" type="text/css" media="screen, projection" />↩
  7. <title>Home | Mottr.am</title>↩
  8. <meta name="author" content="Jack Mottram" />↩
  9. <meta name="viewport" content="width = 680" />↩
  10. <meta name="description" content="Jack Mottram's weblog" />↩
  11. <link rel="canonical" href="http://mottr.am/index.html" />↩
  12. <link rel="apple-touch-icon" href="/u/iphone.png"/>↩
  13. <link rel="icon" type="image/ico" href="/favicon.ico" />↩
  14. <link rel="alternate" type="application/rss+xml" href="atom.xml" title="Mottr.am latest posts" />↩
  15. <!--[if IE]>↩
  16. <link rel="stylesheet" href="/c/ie.css" type="text/css" media="screen, projection" />↩
  17. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>↩
  18. <![endif]-->↩
  19. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>↩
  20. <script type="text/javascript" src="/s/timeago.js"></script>↩
  21. <script type="text/javascript" src="/s/min.js"></script>↩
  22. ↩
  23. <script type="text/javascript"> ↩
  24. AudioPlayer.setup("http://mottr.am/s/player.swf", { ↩
  25. width: 300 ↩
  26. }); ↩
  27. </script>↩
  28. <link rel="openid.server" href="http://www.myopenid.com/server" />↩
  29. <link rel="openid.delegate" href="http://mottram.myopenid.com/" />↩
  30. <link rel="openid2.local_id" href="http://mottram.myopenid.com" />↩
  31. <link rel="openid2.provider" href="http://www.myopenid.com/server" />↩
  32. </head>↩
  33. ↩
  34. <body class="mottram home">↩
  35. <!--[if IE]><noscript><div><p>Are you using Internet Explorer with JavaScript turned off?</p><p>This site probably looks a bit of a mess.</p><p>If you can, turn JavaScript on, and reload the page - that should fix the problem.</p><p>If you can't do that, my apologies. For fun, I made the site using new code that Explorer doesn't understand just yet.</p><p>Comments? Complaints? Email me at j@ck.mottr.am</p></div></noscript><![endif]-->↩
  36. <nav id="main">↩
  37. <ul>↩
  38. <li class="active"><a title="Go to the Mottr.am homepage" href="/">Home</a></li>↩
  39. <li><a rel="archives" title="Peruse the Mottr.am archive" href="/archive/">Archive</a></li>↩
  40. <li><a title="Subscribe to the Mottr.am feed" href="/atom.xml">Feed</a></li>↩
  41. <li><a title="About Mottr.am" href="/about/">About</a></li>↩
  42. <li><a title="Email, 'phone number, other websites" href="/contact/">Contact</a></li>↩
  43. <li>↩
  44. <form action="http://www.google.com/cse" id="cse-search-box">↩
  45. <input type="hidden" name="cx" value="014102087920370527414:mp4-rc73dee" />↩
  46. <input type="hidden" name="ie" value="UTF-8" />↩
  47. <input type="text" name="q" value="Search..." size="15" />↩
  48. </form>↩
  49. </li>↩
  50. </ul>↩
  51. </nav>↩
  52. ↩
  53. <section>↩
  54. ↩
  55. <article class="link">↩
  56. ↩
  57. <header>↩
  58. <h1><a title="Massive Censorship of Digg Uncovered" href="http://blogs.alternet.org/oleoleolson/2010/08/05/massive-censorship-of-digg-uncovered/">Massive Censorship of Digg Uncovered</a></h1>↩
  59. </header>↩
  60. ↩
  61. <footer>Posted: <a rel="bookmark" href="/2010/08/06/massive-censorship-of-digg-uncovered/" title="Permanent link to 'Massive Censorship of Digg Uncovered'"><time class="timeago" datetime="2010-08-06T15:54:38Z">06 August 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'digg'" href="/tag/digg">digg</a> <a rel="tag" title="View all posts tagged 'politics'" href="/tag/politics">politics</a>.</footer>↩
  62. ↩
  63. ↩
  64. <p>A cadre of right-wing users have been conspiring to bury links they don&#8217;t like. It&#8217;s staggering the amount of effort they put in: the ringleader alone voted on (dugg? digged?) 70,000 links in a year on the site.</p>↩
  65. ↩
  66. </article>↩
  67. ↩
  68. <article class="link">↩
  69. ↩
  70. <header>↩
  71. <h1><a title="The Best Magazine Articles Ever" href="http://www.kk.org/cooltools/the-best-magazi.php">The Best Magazine Articles Ever</a></h1>↩
  72. </header>↩
  73. ↩
  74. <footer>Posted: <a rel="bookmark" href="/2010/07/31/the-best-magazine-articles-ever/" title="Permanent link to 'The Best Magazine Articles Ever'"><time class="timeago" datetime="2010-07-31T10:43:53Z">31 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'magazines'" href="/tag/magazines">magazines</a> <a rel="tag" title="View all posts tagged 'reading'" href="/tag/reading">reading</a>.</footer>↩
  75. ↩
  76. ↩
  77. <p>Kevin Kelly is compiling a crowd-sourced compendium of great magazine journalism.</p>↩
  78. ↩
  79. <p>My contribution to the list is Hazlitt&#8217;s typically acerbic <a href='http://books.google.com/books?id=Pqw_AAAAYAAJ&amp;pg=PA199&amp;lpg=PA199'>&#8216;On Common-Place Critics&#8217;</a>, from <em>The Examiner</em>, 24th November, 1816.</p>↩
  80. ↩
  81. <p>It&#8217;s one of my favourite nuggets of Hazlitt, but I had an ulterior motive in submitting it: the list is, understandably, skewed in favour of post-war US journalism, and I hoped to nudge contributors in different directions. Hasn&#8217;t worked, yet&#8211;&#8216;On Common-Place Critics&#8217; is still the only piece on the list published prior to 1939&#8211;so if you&#8217;re an expert in 18th Century periodicals, Little Magazines, fanzines or anglophone publications outwith the US and UK, get in touch with Kevin at the link above.</p>↩
  82. ↩
  83. <p>See also: <a href='http://essays.quotidiana.org/'>Quotidiana</a>, <a href='http://givemesomethingtoread.com/'>Give Me Something to Read</a>, <a href='http://twitter.com/longreads'>@longreads</a>, <a href='http://twitter.com/JournoCurator'>@JournoCurator</a>.</p>↩
  84. ↩
  85. </article>↩
  86. ↩
  87. <article class="link">↩
  88. ↩
  89. <header>↩
  90. <h1><a title="10k Apart" href="http://10k.aneventapart.com/">10k Apart</a></h1>↩
  91. </header>↩
  92. ↩
  93. <footer>Posted: <a rel="bookmark" href="/2010/07/30/ten-k/" title="Permanent link to '10k Apart'"><time class="timeago" datetime="2010-07-30T11:55:12Z">30 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'web'" href="/tag/web">web</a>.</footer>↩
  94. ↩
  95. ↩
  96. <p>A competition to design a web app in less than ten kilobytes of code, though you can use external libraries, which is a bit of a swizz.</p>↩
  97. ↩
  98. <p>I can&#8217;t believe it&#8217;s been eight years since the last edition of <a href='http://www.the5k.org/'>The 5k</a>, the original, rather more rigorous comp. that, in a roundabout way, introduced me to the Game Neverending, which had a chatroom with photo-sharing built in, a handy feature which eventually morphed into Flickr.</p>↩
  99. ↩
  100. </article>↩
  101. ↩
  102. <article class="photo">↩
  103. ↩
  104. <header>↩
  105. <h1>The Secret Law of Page Harmony</h1>↩
  106. </header>↩
  107. ↩
  108. <footer>Posted: <a rel="bookmark" href="/2010/07/29/page-harmony/" title="Permanent link to 'The Secret Law of Page Harmony'"><time class="timeago" datetime="2010-07-29T12:17:11Z">29 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'books'" href="/tag/books">books</a> <a rel="tag" title="View all posts tagged 'design'" href="/tag/design">design</a>.</footer>↩
  109. ↩
  110. ↩
  111. <img alt="The Secret Law of Page Harmony" title="The Secret Law of Page Harmony" src="http://dl.dropbox.com/u/84981/blog//u/2010/07/canon-example.png" width="590" />↩
  112. ↩
  113. <p>From a <a href='http://retinart.net/graphic-design/secret-law-of-page-harmony'>fascinating essay</a> on book design and page harmony.</p>↩
  114. ↩
  115. </article>↩
  116. ↩
  117. <article class="link">↩
  118. ↩
  119. <header>↩
  120. <h1><a title="CLI-Lover" href="http://lifehacker.com/5592047/turn-your-command-line-into-a-fast-and-simple-note+taking-tool">CLI-Lover</a></h1>↩
  121. </header>↩
  122. ↩
  123. <footer>Posted: <a rel="bookmark" href="/2010/07/23/lifehacker-notes/" title="Permanent link to 'CLI-Lover'"><time class="timeago" datetime="2010-07-23T18:27:23Z">23 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'cli'" href="/tag/cli">cli</a> <a rel="tag" title="View all posts tagged 'lifehacker'" href="/tag/lifehacker">lifehacker</a>.</footer>↩
  124. ↩
  125. ↩
  126. <p>A piece for Lifehacker on taking notes at the command line.</p>↩
  127. ↩
  128. </article>↩
  129. ↩
  130. <article class="link">↩
  131. ↩
  132. <header>↩
  133. <h1><a title="E-Blogs" href="http://e-blogs.wikio.co.uk/">E-Blogs</a></h1>↩
  134. </header>↩
  135. ↩
  136. <footer>Posted: <a rel="bookmark" href="/2010/07/22/e-blogs/" title="Permanent link to 'E-Blogs'"><time class="timeago" datetime="2010-07-22T14:55:38Z">22 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'weblogs'" href="/tag/weblogs">weblogs</a>.</footer>↩
  137. ↩
  138. ↩
  139. <blockquote>↩
  140. <p>Each day, we select blogposts from 5 countries: The United-Kingdom, France, Germany, Italy, Spain. We have them translated into 5 languages.</p>↩
  141. </blockquote>↩
  142. ↩
  143. </article>↩
  144. ↩
  145. <article class="link">↩
  146. ↩
  147. <header>↩
  148. <h1><a title="Cause List" href="http://causelist.org">Cause List</a></h1>↩
  149. </header>↩
  150. ↩
  151. <footer>Posted: <a rel="bookmark" href="/2010/07/19/cause-list/" title="Permanent link to 'Cause List'"><time class="timeago" datetime="2010-07-19T14:16:59Z">19 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'opendata'" href="/tag/opendata">opendata</a> <a rel="tag" title="View all posts tagged 'web'" href="/tag/web">web</a>.</footer>↩
  152. ↩
  153. ↩
  154. <p>Donny made a site that shows you what&#8217;s going on in courts of law across England <span class='amp'>&amp;</span> Wales, right now; I knocked up a stylesheet to make the data a bit more readable.</p>↩
  155. ↩
  156. </article>↩
  157. ↩
  158. <article class="audio">↩
  159. <header>↩
  160. <h1>Bob George</h1>↩
  161. </header>↩
  162. ↩
  163. <footer>Posted: <a rel="bookmark" href="/2010/07/09/bob-george/" title="Permanent link to 'Bob George'"><time class="timeago" datetime="2010-07-09T12:21:30Z">09 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'prince'" href="/tag/prince">prince</a>.</footer>↩
  164. ↩
  165. ↩
  166. <p id="audioplayer_1"><a title="Download the audio file" href="http://files.me.com/jack_mottram/pdthpg.mp3">Download</a></p> ↩
  167. <script type="text/javascript"> ↩
  168. AudioPlayer.embed("audioplayer_1", {soundFile: "http://files.me.com/jack_mottram/pdthpg.mp3"}); ↩
  169. </script>↩
  170. ↩
  171. <p>I'll be buying several copies of the <em>Mirror</em> tomorrow to get my hands on Prince's latest, <em>20Ten</em>.</p><p>It will, of course, be a profound disappointment.</p><p>And I mean <em>profound</em>.</p><p>I've been listening, obsessively, to Prince almost every day since 1987, when, aged ten, I heard <em>Sign "&#9774;" the Times</em>.</p><p>Unfortunately for me, that was the year that Prince hit his peak. </p><p>Of course, I've had the joy of seeing him live, of exploring the back catalogue, of trading bootleg cassettes with fellow fans in the pre-internet age, of filling hard drives with obscurities and live shows since the dawn of Bittorrent, even of shaking Prince by the hand after watching him play for three hours straight in a New York nightclub, backed by the Family Stone!</p><p>But every year since 1987, Prince has disappointed me--a teeny tiny bit, with <em>Lovesexy</em>, a hell of a lot, with shameful pap like <em>The Chocolate Invasion</em>--and every single year, for <em>twenty-three years</em> I have let myself believe that <em>this</em> new album will be the return to form, the one that realigns his recorded output with the continuing brilliance of the live sets.</p><p>And then I buy the tabloid, or sign up to the website, or do whatever silly thing it is Prince wants me to do to get my hands on his new record, only to have my hopes dashed by weak songs or, worse, anaemic rehashes of unreleased material that I've loved in bootleg form, or seen live.</p><p>Oh well.</p><p>The song above is Prince at his sloppiest, sleaziest and strangest, doing a perfunctory practice run-through of <em>Bob George</em> at Paisley Park on April 5th, 1988, during a rehearsal for the <em>Sign "&#9774;" the Times</em> tour.</p><p>At the end of the recording, Prince says, 'We're getting away with murder...'.</p><p>He wasn't then, but he will be tommorrow.</p><p><em>Unless...</em></p>↩
  172. ↩
  173. </article>↩
  174. ↩
  175. <article class="link">↩
  176. ↩
  177. <header>↩
  178. <h1><a title="Conway's Game of Life in HTML5" href="http://sixfoottallrabbit.co.uk/gameoflife/">Conway's Game of Life in HTML5</a></h1>↩
  179. </header>↩
  180. ↩
  181. <footer>Posted: <a rel="bookmark" href="/2010/07/08/game-of-life/" title="Permanent link to 'Conway's Game of Life in HTML5'"><time class="timeago" datetime="2010-07-08T09:03:55Z">08 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'html5'" href="/tag/html5">html5</a> <a rel="tag" title="View all posts tagged 'life'" href="/tag/life">life</a>.</footer>↩
  182. ↩
  183. ↩
  184. ↩
  185. ↩
  186. </article>↩
  187. ↩
  188. <article class="basic">↩
  189. ↩
  190. <header>↩
  191. <h1>Fluid Images</h1>↩
  192. </header>↩
  193. ↩
  194. <footer>Posted: <a rel="bookmark" href="/2010/07/06/fluid-images-for-tumblr/" title="Permanent link to 'Fluid Images'"><time class="timeago" datetime="2010-07-06T13:12:19Z">06 July 2010</time></a>. Tags: <a rel="tag" title="View all posts tagged 'css'" href="/tag/css">css</a> <a rel="tag" title="View all posts tagged 'images'" href="/tag/images">images</a> <a rel="tag" title="View all posts tagged 'tumblr'" href="/tag/tumblr">tumblr</a>. Short <abbr>URL</abbr>: <a title="You can use this short URL on Twitter or in emails" href="http://mottr.am/fluid">http://mottr.am/fluid</a> | <a title="Go straight to the comments on Fluid Images, if there are any." href="/2010/07/06/fluid-images-for-tumblr/#comments">Comments</a></footer>↩
  195. ↩
  196. ↩
  197. <p>I rejigged the <abbr>CSS</abbr> for <a href='http://onethingwell.org'>One Thing Well</a> last night, making it semi-fluid, responsive to changes in browser window width and better suited to viewing on iPhones and iPads.</p>↩
  198. ↩
  199. <p>I ran into one problem: how to resize wide images for smaller browser windows without affecting small images?</p>↩
  200. ↩
  201. <p>Handily, when Tumblr resizes large images, it appends the width of an image to its filename&#8211;eg.,<code>tumblr_guagfduyfa_500.png</code>&#8211;so I could use CSS <a href='http://forabeautifulweb.com/blog/about/css_a_tribute_to_selectors' title='A piece on attribute selectors by Andy Clarke'>attribute selectors</a>:</p>↩
  202. <div class='highlight'><pre><code class='css'><span class='nt'>img</span><span class='o'>[</span><span class='nt'>src</span><span class='err'>$</span><span class='o'>=</span><span class='s2'>&quot;_500&quot;</span><span class='o'>]</span> <span class='p'>{</span>↩
  203. <span class='k'>width</span><span class='o'>:</span><span class='m'>100%</span><span class='p'>;</span>↩
  204. <span class='k'>max-width</span><span class='o'>:</span><span class='m'>500px</span><span class='p'>;</span>↩
  205. <span class='p'>}</span>↩
  206. ↩
  207. <span class='nt'>img</span><span class='o'>[</span><span class='nt'>src</span><span class='err'>$</span><span class='o'>=</span><span class='s2'>&quot;_400&quot;</span><span class='o'>]</span> <span class='p'>{</span>↩
  208. <span class='k'>width</span><span class='o'>:</span><span class='m'>100%</span><span class='p'>;</span>↩
  209. <span class='k'>max-width</span><span class='o'>:</span><span class='m'>400px</span><span class='p'>;</span>↩
  210. <span class='p'>}</span>↩
  211. </code></pre>↩
  212. </div>↩
  213. <p>Now, if the width of the containing <code>&lt;article&gt;</code> tag drops below 400px or 500px, the image will shrink to fit in <a href='http://kimblim.dk/css-tests/selectors/'>all modern browsers</a>.</p>↩
  214. ↩
  215. </article>↩
  216. ↩
  217. </section>↩
  218. ↩
  219. <nav>↩
  220. <ul class="more">↩
  221. <li><a title="Older posts" href="/2/">Older posts</a> &#8594;</li>↩
  222. </ul>↩
  223. </nav>↩
  224. ↩
  225. <script type="text/javascript">↩
  226. ↩
  227. var _gaq = _gaq || [];↩
  228. _gaq.push(['_setAccount', 'UA-122435-3']);↩
  229. _gaq.push(['_trackPageview']);↩
  230. ↩
  231. (function() {↩
  232. var ga = document.createElement('script');↩
  233. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';↩
  234. ga.setAttribute('async', 'true');↩
  235. document.documentElement.firstChild.appendChild(ga);↩
  236. })();↩
  237. ↩
  238. </script>↩
  239. <script src="http://mottr.am/s/Hyphenate.js">↩
  240. </body>↩
  241. </html>

Total execution time 653 milliseconds.

About this Service • More options