Performant Protest (28th August 2007)

Back in July 2006 I protested against Internet censorship by putting censored material on my web pages. This is material censored for political reasons which seeks to silence people who review governments around the world. Even when it’s their own citizens.

The project is called Irrepressible and the website is pretty good in terms of standards. You can sign the pledge for Internet freedom using a <form> whose controls are explicitly associated with their labels. I already have, along with 72,126 others.

However, the material which you can add to your pages is not so hot:

Here’s an example of the main content, as modelled by Eat Your Greens: 

<iframe marginwidth="0" marginheight="0" style="border: 0pt none ; overflow: hidden; width: 468px; height: 60px;" src="http://fragments.irrepressible.info/data/current/14-468.html?en" frameborder="0" scrolling="no">
<div id="fragment">
	<a title="go to irrepressible.info and learn more about this excerpt" id="link_back" target="_top" href="http://irrepressible.info/?fragment=15&amp;lang=en&amp;fragmenthost=http%3A%2F%2Featyourgreens.org.uk%2Farchives%2F2007%2F08%2Fthats_when_i_re.html">
	<script type="text/javascript">
	document.write('<' + 'img src="/images/'+lang+'/468.gif" width="147" height="58" alt="irrepressible" />');
	</script><img src="/images/en/468.gif" alt="irrepressible" height="58" width="147">
	<span>You can challenge governments and those who hold power</span></a>
</div>
</iframe>

I can appreciate the “paste and forget” nature of this is a big win for busy people.

For a while I was processing Irrepressible’s XML API to wrap richer markup around their data. But I found all those little scripts and framed blobs of HTML which are mostly embedded CSS added too long to page loads.

Oh, and their server quite often stalled for 30 seconds before returning an Error 500 response. During which nothing else would happen.

Solution

So now I have taken a snapshot of their catalogue to create a PHP array with 71 entries. I host it on Project Cerbera for processing locally. An example of the markup I generate: 

<div id='irrepressible' class='irrepressible'>
<h2>
 <a href='http://irrepressible.info/?fragment=16' title='About this Irrepressible excerpt.'>
  <img src='/180a-1.gif' width='180' height='45' alt='Irrepressible.info: Someone doesn&#8217;t want people to read this.' title='About this Irrepressible excerpt.'>
 </a>
</h2>
<blockquote>
 <p>
  <a href='http://hoder.com/weblog/archives/cat_popculture.shtml' title='Visit &#8216;Hossein Derakhshan&#8217;'>
   Let&#8217;s wish all people, especially in the middle-east, a more democratic, yet peaceful year.
   <cite>Hossein Derakhshan</cite>
  </a>
 </p>
</blockquote>
<p class='bottom'>
 <a href='http://www.amnesty.org/' title='An initiative of Amnesty International'>
  <img src='/180b.gif' width='158' height='18' alt='Amnesty International.' title='An initiative of Amnesty International'>
 </a>
</p>
</div>

Much nicer, imho. The 897 bytes of CSS I use for it is in my style.css file, so that gets cached. All the problems with the old system are solved.

Whitespace is excessive as I might seek peer review and release it. Contact me.

Imageless Rebuild (4th May 2012)

Overnight I rewrote the HTML and CSS from scratch, updating the PHP to suit.

All the text is now real text with hover effects on the linked parts. The description is now visible below the fragment, rather than hidden away in a tooltip.