Gallery

SOIT / Hans Van den Broeck

Sometime in November, Hans emailed me and asked if I’d like to help build him a new website. “Of-fucking-Course!” He arrived in Berlin shortly after for two weeks, where we sat in Alte Kantine Wedding every day for quite a few hours. We started with putting together a framework for each project, and once that was up, I linked him to my laptop web server, him sitting on my right adding all the text, me bashing out code.

It took a pause from January ’til early-April, then another ’til May 15th, when we fiddled with the DNS and splurted it out into teh Interwebtubez: SOIT / Hans Van den Broeck.

Hans was someone I heard about when I was a student, They Kill We (Eat, Eat, Eat) the name in my head when I was bunking off to the library and reading Ballet International. I thought it sounded like the coolest shit out, and knew I was going to move to Europe to be in the middle of all that. Hans himself I met on my first trip to Europe, as a DanceWEBber at ImPulsTanz in Vienna where everything I’d imagined and hoped for on the continent was ten million times better. I didn’t do Hans’ workshop—stupid uninformed decision—but along with meeting Anna Tenta and Ivo, getting drunk with Hans on an all-night, cross-Vienna bender (I dunno, it might have even been two or three nights … those last few days …) was the formative experience for me at the festival. And that’s amidst seeing Jan Fabre / Troubelyn, Emio Greco, doing workshops with Frankfurt Ballet dancers, generally 6 weeks of unrelenting Mind=Blown!!!

I got to work with Hans on my final arrival in Europe, again at ImPulsTanz. He, Anuschka, Ivan, and Estelle snuck me out one evening for surprise Viennese birthday celebrations. I started regularly going to Brussels; it became a mandatory pleasure for drinking and eating, talking for hours together.

And I always thought his old website, the one he’d hand-built in iWeb—images with picture frames, odd sounds, text scapbooked around in different colours and sizes—I always thought that was one of my favourite websites ever. Because it looked like him; when you arrived, it could only be him.

When Hans asked me to design and build his new site, I said straight away, “I fucking loved your old site, it needs to be somehow like that, how it looks, the feeling of it.” We ransacked his scrapbooks (so many scrapbooks!)—one thing Hans is very good at is archiving, every work had at least enough, and for the more recent ones, far far more than we could possibly use. Then we got serious and dry: How to build a site that can be arranged in myriad ways while also having a manageable editing interface?

Ja, of course it’s in WordPress, and of course I used Advanced Custom Fields. Early on, I realised Flexible Content in ACF was the way to go. CSS gives amazing power to change design and layout, but not the order of things; jQuery and PHP can do that but not in a simple, flexible, drag-drop, non-code way that’s part of the editing process. Flexible Content fields for text, images, video, quotes, whatever could be dragged into any order; then I added some selectors for images, to change their alignment and size, which was the final key in building a structure that could result in a design where every page is somewhat different. Headings and the work info sidebar are exceptions to this, though it would be trivial to extend the structure to shift those also around wherever.

Then there was things like the coloured squares next to work titles, generated from categories and slapped together in some probably unholy mix of PHP, jQuery, and CSS. Or the video page. When Hans saw how videos are laid out in the WordPress admin editor, a grid of thumbnails, he said, “Yes. I want that! Can I have that?” It turned out to be pretty easy, just overwriting the standard WordPress video playlist shortcode for the video page in a function (using the admin editor code as a template), then arrange it all pretty like. The background images are just taking FlexSlider, stripping it down, then again using some styling.

What else? The randomly cycling quotes? Also ACF, PHP, some jQuery, including collision avoidance detection so the quote doesn’t run under the menu. And the menu uses an extremely nice piece of jQuery, BackgroundCheck, to compare the background colour to the menu and swap between light, dark, and neutral states so the text colour remains contrasty (not always but enough that I thought it was worth using).

For anyone curious, I’ve included a screenshot of editing a page with all the fields; and some of the templates, functions, and javascript files.

The font is Klartext Mono from Heimatdesign via Fontspring … Oh! and the index page quote was a placeholder that remains for now because Hans liked it. It’s from Mechthild of Magdeburg.

blog cleaning progresses

Aside

I’ve been avoiding doing the cleaning of several years of posts, but somehow fell into it a couple of days ago, trying a few different approaches to get through the task until I found one that’s methodical, quick, and requires very little brain use. The problem is supernaut existed in a couple of different platforms before WordPress, and there remains (currently from August 2005 to December 2010) a lot of mess and pretty much all the images not properly linked. So I’m working through that, one month at a time, and while it’s certainly not exciting, I am getting to read back over ten years of blogging and my life.

Gallery

10!!!

supernaut is ten years old! Double figures! 生日快乐!

Ten years, twelve countries, thirty-ish cities I can remember, 2162 posts, 4405 images and videos, four designs plus quite a few redesigns, masses of recoding … There was no YouTube, definitely no Twitter, MySpace barely existed and people were still using Friendster, FaceBook had started two months previously, so no one was using that, Slashdot was massive, Pirate Bay and BitTorrent were young, 3D printers? nope! Google hadn’t even made Maps, and Gmail was exactly one week old … there was no iPhone or iPad, MacBook Pros were still PowerBook G4s, iPods hadn’t even got a colour screen, WordPress was a month shy of its first birthday and Movable Type was what everyone was using, 56k dialup was the way to go in Australia, where I was living. Sounds like the Dark Ages.

I’m not sure I expected supernaut to last this long, I think the idea of ten years of blogging was far too abstract to entertain then; blogging in itself was about to be told it was going the way of dinosaurs and everyone would soon be podcasting and vlogging instead. Ten years on, and people still have blogs. More people even, blogs everywhere. People who don’t have their own blog have Tumblr or exist entirely on Twitter, or YouTube channels, or WordPress’ own network, or LiveJournal, or on the hundreds of social network sites like Sina Weibo that was launched only five years ago and has half a billion users. Among the people I know though, having your own website for a blog is still pretty rare. Actual websites, not so much, but blogs?

And blogs that have lasted ten years or more? There’s a few blogs on my news feed that have been around since 2004 or earlier, but no more than a few out of currently more than 200. And over the ten years there have been thousands that have come for weeks or months or a couple of years, then gone. A couple of years seems the average for old-age blog death.

And here is supernaut, ten years old! That’s beyond old age, it’s like time travel, like I was born in the Renaissance and didn’t take the hint about pushing up daisies. So, dear supernaut, happy birthday! If I and the internet are around in ten years, I imagine you’ll be here too, and while I can’t yet easily get you drunk or loaded, I intend to do that myself to celebrate.

supernaut’s Links

Every blog used to have a Blogroll. But then they became sad; even WordPress got rid of theirs. Some people never heard or didn’t care. I discovered I’d never deleted my old link list, but it was also horribly out of date. I pondered updating it, but the idea seemed cumbersome.

Then I wondered if I could use my RSS feeds from my daily reading, all already categorised and downloadable as an OPML file. This would mean my link list would reflect the blogs and websites I’m actually reading now, and make redundant the need to have two separate lists.

… Turns out I can!

PHP has an extension called SimpleXML which can parse an xml file and spit it out however I might like and OPML is just an xml format. Off to the code!

I wanted to know if it was even possible first, but I ended up getting it all working, or at least dumping formattable text on the first try. From there to getting it nicely arranged by category was a much longer process, well, a couple of hours. Next to do is filtering, so I can exclude certain categories, and sorting alphabetically. As for the OPML file itself, I export it from my current RSS reader Feedly, and upload it to WordPress into a field using Advanced Custom Fields. It’s gloriously simple.

See all two-hundred-and-something of them here: supernaut’s Links

…(edit) Sorting alphabetically and excluding embarrassing categories achieved! For anyone interested in the code, it looks like this, and is largely based on Recently’s code, plus the filtering and sorting examples I found on Stack Overflow:

function supernaut_opml_feeds( $xmlObj, $depth = 1 ) {
	if ( count( $xmlObj->children() ) > 0 ) {
		echo str_repeat( "\t", $depth ) . '<ul class="opml-category">';
	}

	$feed_list = array();
	foreach ($xmlObj->children() as $feed) {
		$feed_list[] = $feed;
	}

	usort($feed_list, function($a, $b) {
		return strcasecmp( (string)$a['title'], (string)$b['title'] );
	});

	foreach ( $feed_list as $feed ) {
		if ( ($feed['title'] != 'blah') && ($feed['title'] != 'gaah') ) {
			if ( isset( $feed['htmlUrl'] ) || isset( $feed['xmlUrl'] ) ) {
				echo str_repeat( "\t", $depth ) . '<li>';
				if ( isset( $feed['htmlUrl'] ) ) {
					echo '<a href="' . htmlentities( $feed['htmlUrl'] ) . '"';
					if ( isset( $feed['description'] ) ) {
						echo ' title="' . htmlentities( $feed['description'] ) . '"';
					} else {
						echo ' title="' . $feed['title'] . '"';
					}
					echo ' target="_blank">' . $feed['text'] . '</a>';
				} else {
					echo $feed['text'];
				}
				if ( isset( $feed['xmlUrl'] ) ) {
					echo ' – <em><a href="' . htmlentities( $feed['xmlUrl'] ) . '">feed</a></em>';
				}
				echo '</li>';
			} elseif ( isset($feed['text'] ) && !isset( $feed['htmlUrl'] ) ) {
				echo str_repeat( "\t", $depth) . '<li>' . $feed['text'];
			}
			supernaut_opml_feeds( $feed, $depth + 1 );
		}
	}

	if ( count( $xmlObj->children() ) > 0) { 
		echo str_repeat( "\t", $depth) . '</ul>'; 
		if ( $depth > 1 ) {
			echo str_repeat( "\t", $depth - 1 ) . '</li>';
		}
	}
}

$opml_xml = get_field( 'opml_file' );
$opml_file = new SimpleXMLElement( $opml_xml, null, true );
supernaut_opml_feeds( $opml_file->body );

Redirection

Last week I set another website loose (Voices of Transition, for the documentary filmmaker, Nils Aguilar), which in part was being shunted off another domain, with some very messed up urls requiring quite a stack of redirection. I started using a plugin to deal with this, which  then made me think about supernaut, and all its incarnations and thousands of posts, tags, hundreds of categories, tens of thousands of images, and what kind of mess almost ten years of blogging would leave.

Out of curiosity then, I installed the same plugin (in-between watching Person of Interest – which is another story) and turns out there are over 1000 404 Page not Found per day. A lot of these (around 3/4) are from Google’s Image Search trying to go directly from their site to the full-size image itself, bypassing the post the image lives in, which the server treats as hotlinking (due to the absence of a referrer) because of my anti-leeching rules. I’d love to be able to simply redirect those attempts to view the image to the actual post, but … prior to 2011 supernaut is a mess. Most of the remaining quarter are either weird errors trying to access images for the image viewer I need to deal with or spam searches looking for things that don’t exist (on the basis of “If image ‘n’ exists at path ‘p’, then ‘y’ is installed (plugin, theme, software, etc) that allows for hack ‘x’ to be tried). Which leaves real errors.

Which comprise wreckage from the days long ago when I used Movable Type instead of WordPress. Back in those days, all my images were in a folder called /images/ with subdirectories like 09dec for December, 2009. WordPress on the other hand has everything in /uploads/ with a year/month/ sub-directory structure, which I long ago imported all the images into (and which I am still very slowly dealing with). It also had a different url structure for posts, like post_name_truncated_somethi.html. Both of these are buried in search engine results, the former to quite a huge degree (about 5% of traffic is looking for those old images).

So I wrote (and am writing) a bunch of redirects – and a lot of regex. I could do this directly in .htaccess, but not knowing which urls are the problem, and having all of this logged by the plugin are both good reasons to do it directly in WordPress. It’s a bit messy and sometimes redirects for spam conflicted with genuine pages (like sub-pages of monthly archives), but probably useful for a while if people looking for something actually stand a good chance of finding it instead of “absence…”

Post Formats & Misc Coding

After the recent days of cleaning up the link formatting dregs of Movable Type, I got slightly excited about fixing a couple of things that have been on my list, merging a bunch of tags, images in the wrong folder (another shift-from-MT thing), miscellaneous missing formatting … then I discovered the code which wraps an excerpt around a search term – so you can see the term in context – had borked the archive excerpts. So I rewrote a bunch of that. Finally I got to the not-cleaning-up-mess stuff: Post Formats.

I’d written a widget for Lewis Major that shows a list of available post formats, and had been meaning to put it on supernaut for ages. Turned out to be a matter of plonking the code in my already-existing custom widgets file and there it is, in the footer. Then I decided to do something about the Image Post Format, which turned into a coding frenzy. The result is on a single image format post, the inserted image gets yanked, its ID grabbed and used to spit out the full-size image below any content. Rather happy with how that worked out.

Finally, I decided to add a bunch of posts to the Gallery Post Format. Besides being assigned thus, nothing in the template code is different. I haven’t decided if I want to do anything interesting with how the images are displayed, let alone looked around for code that could give me ideas. Mainly it’s so all the posts where I’ve uploaded some kind of collection of images are grouped. Not all though; some posts with a lot of images, like workshop notices, or which induced some vague feeling of “not gallery” are not included.

The others then: Video posts have been around for a while (I need to do something about forcing non-16:9 into pillarbox format); occasionally there are Quotes, usually from books I’m reading; Asides also get some use (this was going to be an Aside before I realised I didn’t know when to stop); and last but used the most, my pseudo-Twitter Status posts, limited to 140 characters by some petty-facist script.