<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
 
 <title>Mottr.am</title>
 <link href="http://mottr.am/atom.xml" rel="self"/>
 <link href="http://mottr.am/"/>
 <updated>2010-07-30T00:00:00Z</updated>
 <id>http://mottr.am/</id>
 <author>
   <name>Jack Mottram</name>
   <email>j@ck.mottr.am</email>
 </author>





<entry>
  <title>10k Apart</title>
  <link href="http://10k.aneventapart.com/"/>
  <updated>2010-07-30T11:55:12Z</updated>
  <id>http://mottr.am/2010/07/30/ten-k</id>
  <content type="html">&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;I can&amp;#8217;t believe it&amp;#8217;s been eight years since the last edition of &lt;a href='http://www.the5k.org/'&gt;The 5k&lt;/a&gt;, 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.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/07/30/ten-k/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>




<entry>
  <title>The Secret Law of Page Harmony</title>
  <link href="http://mottr.am/2010/07/29/page-harmony/"/>
  <updated>2010-07-29T12:17:11Z</updated>
  <id>http://mottr.am/2010/07/29/page-harmony</id>
  <content type="html">&lt;img src=&quot;http://dl.dropbox.com/u/84981/blog//u/2010/07/canon-example.png&quot; width=&quot;500&quot; /&gt;&lt;br /&gt;&lt;p&gt;From a &lt;a href='http://retinart.net/graphic-design/secret-law-of-page-harmony'&gt;fascinating essay&lt;/a&gt; on book design and page harmony.&lt;/p&gt;</content>
</entry>










<entry>
  <title>CLI-Lover</title>
  <link href="http://lifehacker.com/5592047/turn-your-command-line-into-a-fast-and-simple-note+taking-tool"/>
  <updated>2010-07-23T18:27:23Z</updated>
  <id>http://mottr.am/2010/07/23/lifehacker-notes</id>
  <content type="html">&lt;p&gt;A piece for Lifehacker on taking notes at the command line.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/07/23/lifehacker-notes/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>E-Blogs</title>
  <link href="http://e-blogs.wikio.co.uk/"/>
  <updated>2010-07-22T14:55:38Z</updated>
  <id>http://mottr.am/2010/07/22/e-blogs</id>
  <content type="html">&lt;blockquote&gt;
&lt;p&gt;Each day, we select blogposts from 5 countries: The United-Kingdom, France, Germany, Italy, Spain. We have them translated into 5 languages.&lt;/p&gt;
&lt;/blockquote&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/07/22/e-blogs/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>Cause List</title>
  <link href="http://causelist.org"/>
  <updated>2010-07-19T14:16:59Z</updated>
  <id>http://mottr.am/2010/07/19/cause-list</id>
  <content type="html">&lt;p&gt;Donny made a site that shows you what&amp;#8217;s going on in courts of law across England &lt;span class='amp'&gt;&amp;amp;&lt;/span&gt; Wales, right now; I knocked up a stylesheet to make the data a bit more readable.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/07/19/cause-list/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>






<entry>
  <title>Bob George</title>
  <link href="http://mottr.am/2010/07/09/bob-george/"/>
  <updated>2010-07-09T12:21:30Z</updated>
  <id>http://mottr.am/2010/07/09/bob-george</id>
  <content type="html">&lt;p&gt;&lt;em&gt;Please click through to the website to stream this audio.&lt;/em&gt;&lt;/p&gt;&lt;p&gt;I'll be buying several copies of the &lt;em&gt;Mirror&lt;/em&gt; tomorrow to get my hands on Prince's latest, &lt;em&gt;20Ten&lt;/em&gt;.&lt;/p&gt;&lt;p&gt;It will, of course, be a profound disappointment.&lt;/p&gt;&lt;p&gt;And I mean &lt;em&gt;profound&lt;/em&gt;.&lt;/p&gt;&lt;p&gt;I've been listening, obsessively, to Prince almost every day since 1987, when, aged ten, I heard &lt;em&gt;Sign &quot;&amp;#9774;&quot; the Times&lt;/em&gt;.&lt;/p&gt;&lt;p&gt;Unfortunately for me, that was the year that Prince hit his peak. &lt;/p&gt;&lt;p&gt;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!&lt;/p&gt;&lt;p&gt;But every year since 1987, Prince has disappointed me--a teeny tiny bit, with &lt;em&gt;Lovesexy&lt;/em&gt;, a hell of a lot, with shameful pap like &lt;em&gt;The Chocolate Invasion&lt;/em&gt;--and every single year, for &lt;em&gt;twenty-three years&lt;/em&gt; I have let myself believe that &lt;em&gt;this&lt;/em&gt; new album will be the return to form, the one that realigns his recorded output with the continuing brilliance of the live sets.&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;Oh well.&lt;/p&gt;&lt;p&gt;The song above is Prince at his sloppiest, sleaziest and strangest, doing a perfunctory practice run-through of &lt;em&gt;Bob George&lt;/em&gt; at Paisley Park on April 5th, 1988, during a rehearsal for the &lt;em&gt;Sign &quot;&amp;#9774;&quot; the Times&lt;/em&gt; tour.&lt;/p&gt;&lt;p&gt;At the end of the recording, Prince says, 'We're getting away with murder...'.&lt;/p&gt;&lt;p&gt;He wasn't then, but he will be tommorrow.&lt;/p&gt;&lt;p&gt;&lt;em&gt;Unless...&lt;/em&gt;&lt;/p&gt;</content>
  <link rel="enclosure" type="audio/mpeg" title="MP3" href="http://files.me.com/jack_mottram/pdthpg.mp3" />
</entry>








<entry>
  <title>Conway's Game of Life in HTML5</title>
  <link href="http://sixfoottallrabbit.co.uk/gameoflife/"/>
  <updated>2010-07-08T09:03:55Z</updated>
  <id>http://mottr.am/2010/07/08/game-of-life</id>
  <content type="html">&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/07/08/game-of-life/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>








 <entry>
   <title>Fluid Images</title>
   <link href="http://mottr.am/2010/07/06/fluid-images-for-tumblr/"/>
   <updated>2010-07-06T13:12:19Z</updated>
   <id>http://mottr.am/2010/07/06/fluid-images-for-tumblr</id>
   <content type="html">&lt;p&gt;I rejigged the &lt;abbr&gt;CSS&lt;/abbr&gt; for &lt;a href='http://onethingwell.org'&gt;One Thing Well&lt;/a&gt; last night, making it semi-fluid, responsive to changes in browser window width and better suited to viewing on iPhones and iPads.&lt;/p&gt;

&lt;p&gt;I ran into one problem: how to resize wide images for smaller browser windows without affecting small images?&lt;/p&gt;

&lt;p&gt;Handily, when Tumblr resizes large images, it appends the width of an image to its filename&amp;#8211;eg.,&lt;code&gt;tumblr_guagfduyfa_500.png&lt;/code&gt;&amp;#8211;so I could use CSS &lt;a href='http://forabeautifulweb.com/blog/about/css_a_tribute_to_selectors' title='A piece on attribute selectors by Andy Clarke'&gt;attribute selectors&lt;/a&gt;:&lt;/p&gt;
&lt;div class='highlight'&gt;&lt;pre&gt;&lt;code class='css'&gt;&lt;span class='nt'&gt;img&lt;/span&gt;&lt;span class='o'&gt;[&lt;/span&gt;&lt;span class='nt'&gt;src&lt;/span&gt;&lt;span class='err'&gt;$&lt;/span&gt;&lt;span class='o'&gt;=&lt;/span&gt;&lt;span class='s2'&gt;&amp;quot;_500&amp;quot;&lt;/span&gt;&lt;span class='o'&gt;]&lt;/span&gt; &lt;span class='p'&gt;{&lt;/span&gt;
&lt;span class='k'&gt;width&lt;/span&gt;&lt;span class='o'&gt;:&lt;/span&gt;&lt;span class='m'&gt;100%&lt;/span&gt;&lt;span class='p'&gt;;&lt;/span&gt;
&lt;span class='k'&gt;max-width&lt;/span&gt;&lt;span class='o'&gt;:&lt;/span&gt;&lt;span class='m'&gt;500px&lt;/span&gt;&lt;span class='p'&gt;;&lt;/span&gt;
&lt;span class='p'&gt;}&lt;/span&gt;

&lt;span class='nt'&gt;img&lt;/span&gt;&lt;span class='o'&gt;[&lt;/span&gt;&lt;span class='nt'&gt;src&lt;/span&gt;&lt;span class='err'&gt;$&lt;/span&gt;&lt;span class='o'&gt;=&lt;/span&gt;&lt;span class='s2'&gt;&amp;quot;_400&amp;quot;&lt;/span&gt;&lt;span class='o'&gt;]&lt;/span&gt; &lt;span class='p'&gt;{&lt;/span&gt;
&lt;span class='k'&gt;width&lt;/span&gt;&lt;span class='o'&gt;:&lt;/span&gt;&lt;span class='m'&gt;100%&lt;/span&gt;&lt;span class='p'&gt;;&lt;/span&gt;
&lt;span class='k'&gt;max-width&lt;/span&gt;&lt;span class='o'&gt;:&lt;/span&gt;&lt;span class='m'&gt;400px&lt;/span&gt;&lt;span class='p'&gt;;&lt;/span&gt;
&lt;span class='p'&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;Now, if the width of the containing &lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt; tag drops below 400px or 500px, the image will shrink to fit in &lt;a href='http://kimblim.dk/css-tests/selectors/'&gt;all modern browsers&lt;/a&gt;.&lt;/p&gt;</content>
 </entry>



<entry>
  <title>French Lunch</title>
  <link href="http://mottr.am/2010/06/30/oysters/"/>
  <updated>2010-06-30T14:42:55Z</updated>
  <id>http://mottr.am/2010/06/30/oysters</id>
  <content type="html">&lt;img src=&quot;http://dl.dropbox.com/u/84981/blog//u/2010/06/french-lunch.jpg&quot; width=&quot;500&quot; /&gt;&lt;br /&gt;</content>
</entry>










<entry>
  <title>Mutt and Gmail</title>
  <link href="http://lifehacker.com/5574557/how-to-use-the-fast-and-powerful-mutt-email-client-with-gmail"/>
  <updated>2010-06-30T10:56:29Z</updated>
  <id>http://mottr.am/2010/06/30/mutt-and-gmail</id>
  <content type="html">&lt;p&gt;I wrote a how-to for Lifehacker on using the venerable &lt;abbr title='Mail User Agent'&gt;MUA&lt;/abbr&gt; mutt with Gmail, including a ready-to-use config file primed with handy keyboard shortcuts.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/06/30/mutt-and-gmail/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>Today's Guardian</title>
  <link href="http://guardian.gyford.com/"/>
  <updated>2010-06-09T10:00:40Z</updated>
  <id>http://mottr.am/2010/06/09/todays-guardian</id>
  <content type="html">&lt;p&gt;Phil Gyford has invented a lovely new way of reading today&amp;#8217;s The Guardian on the web, bringing the &amp;#8217;&lt;a href='http://www.gyford.com/phil/writing/2010/06/09/todays-guardian.php'&gt;finishability&lt;/a&gt;&amp;#8217; of the print version online.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/06/09/todays-guardian/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>Help Me Help My Friend In DC</title>
  <link href="http://ask.metafilter.com/154334/Help-me-help-my-friend-in-DC"/>
  <updated>2010-05-21T14:39:54Z</updated>
  <id>http://mottr.am/2010/05/21/friends-in-trouble</id>
  <content type="html">&lt;p&gt;A stunning thread at Ask MetaFilter in which user fake asks for help in getting two friends out of a very sticky situation&amp;#8211;they&amp;#8217;re Russian women who&amp;#8217;ve paid a huge sum to arrange a visa into and work in the US, but on arrival the work has evaporated, replaced by instructions to meet an unknown man in a strip club. Not good. As the thread progresses, there are generous offers of help, expert advice, a terrible setback, and then&amp;#8230; well, just read the thread.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/05/21/friends-in-trouble/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>Welcome to Cameron land</title>
  <link href="http://www.independent.co.uk/news/uk/politics/poverty-and-injustice-in-david-cameronrsquos-model-borough-1962318.html"/>
  <updated>2010-05-06T15:06:50Z</updated>
  <id>http://mottr.am/2010/05/06/welcome-to-cameron-land</id>
  <content type="html">&quot;David Cameron cites Hammersmith and Fulham council as a ‘model’ of compassionate conservatism. So what can the actions of Tory councillors here tell us about how the party would behave in government?&quot; In short: like complete and utter shits.

&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/05/06/welcome-to-cameron-land/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>MultiMarkdown-CMS</title>
  <link href="http://fletcherpenney.net/multimarkdown/cms/"/>
  <updated>2010-04-23T16:57:23Z</updated>
  <id>http://mottr.am/2010/04/23/multimarkdown-cms</id>
  <content type="html">&lt;p&gt;An alternative to the various static site generators.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/04/23/multimarkdown-cms/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>





<entry>
  <title>Camerwrong</title>
  <link href="http://mottr.am/2010/04/23/david-camerwrong/"/>
  <updated>2010-04-23T13:26:22Z</updated>
  <id>http://mottr.am/2010/04/23/david-camerwrong</id>
  <content type="html">&lt;p&gt;&lt;em&gt;Please click through to the website to view this video.&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href='http://notes.gilest.org/post/542937648/david-camerwrong-presents-a-new-vision-for-britain'&gt;Via Giles&lt;/a&gt;.&lt;/p&gt;</content>
</entry>






<entry>
  <title>Special Tea</title>
  <link href="http://mottr.am/2010/04/20/special-tea/"/>
  <updated>2010-04-20T11:08:14Z</updated>
  <id>http://mottr.am/2010/04/20/special-tea</id>
  <content type="html">&lt;img src=&quot;http://dl.dropbox.com/u/84981/blog//u/2010/04/special-tea.jpg&quot; width=&quot;500&quot; /&gt;&lt;br /&gt;&lt;p&gt;From &lt;a href='http://www.tasveerghar.net/cmsdesk/essay/89/'&gt;Chai Why? The Triumph of Tea in India as Documented in the Priya Paul Collection&lt;/a&gt;.&lt;/p&gt;</content>
</entry>







<entry>
  <title>The Three Magnets</title>
  <link href="http://mottr.am/2010/04/16/the-three-magnets/"/>
  <updated>2010-04-16T17:36:48Z</updated>
  <id>http://mottr.am/2010/04/16/the-three-magnets</id>
  <content type="html">&lt;img src=&quot;http://dl.dropbox.com/u/84981/blog//u/2010/04/three-magnets.jpg&quot; width=&quot;500&quot; /&gt;&lt;br /&gt;</content>
</entry>










<entry>
  <title>howdoeshomeopathywork.com</title>
  <link href="http://www.howdoeshomeopathywork.com/"/>
  <updated>2010-04-16T13:24:28Z</updated>
  <id>http://mottr.am/2010/04/16/homeopathy</id>
  <content type="html">&lt;p&gt;Sometimes single serving sites still make me laugh.&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/04/16/homeopathy/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>TalkTalk on The Digital Economy Bill</title>
  <link href="http://www.talktalkblog.co.uk/2010/04/08/digital-economy-bill-its-a-wash-up/"/>
  <updated>2010-04-09T13:34:14Z</updated>
  <id>http://mottr.am/2010/04/09/talktalk-on-the-digital-economy-bill</id>
  <content type="html">&lt;blockquote&gt;
&lt;p&gt;If we are instructed to disconnect an account due to alleged copyright infringement we will refuse to do so and tell the rightsholders we’ll see them in court.&lt;/p&gt;
&lt;/blockquote&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/04/09/talktalk-on-the-digital-economy-bill/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>







<entry>
  <title>Vote for Policies</title>
  <link href="http://voteforpolicies.org.uk"/>
  <updated>2010-04-08T16:05:58Z</updated>
  <id>http://mottr.am/2010/04/08/vote-for-policies</id>
  <content type="html">&lt;p&gt;Choose policies you favour, and find out which party matches your beliefs. The survey is limited to six parties&amp;#8211;including two on the far right, but none to the left of the Greens, oddly&amp;#8211;and very brief, omitting foreign policy entirely. (I&amp;#8217;m mostly Green, and, surprisingly, they&amp;#8217;re the party in the lead after 50,000 surveys.)&lt;/p&gt;&lt;p&gt; &lt;a href=&quot;http://mottr.am/2010/04/08/vote-for-policies/&quot; title=&quot;Link to this post at Mottr.am&quot;&gt;&amp;para;&lt;/a&gt;&lt;/p&gt;</content>
</entry>



</feed>
