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:
- Uses an
<iframe>with a bunch of presentational attributes, including
- Uses XHTML 1.0 Transitional sent as
- Has 734 bytes of embedded CSS.
mediaattribute is set to
- Links to a 697 byte
lib.jsscript which simply adds a
titleattribute to the link.
- The fixed dimensions of the
- bulletproofing against text resizing;
- or adapting to the available width in fluid layouts.
- It doesn’t update on normal Refresh.
- Doesn’t respond to
- Cannot be styled by the page you use it in (AFAICT).
Here’s an example of the main content, as modelled by Eat Your Greens:
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.
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’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 ‘Hossein Derakhshan’'> Let’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.