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.

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 );

Gallery

Nothing You Have Done Deserves Such Praise

An occasional yet delicious pleasure when an email from Jason Nelson unfurls in my Inbox, he of sydney’s siberia and other digital creatures, and i made this. you play this. we are enemies (which means the last time I got an email from him was three years ago), and now a commission from Turbulence called Nothing You Have Done Deserves Such Praise. I played immediately.

I seldom see Flash on the internet anymore, which adds a sense of the archaic to his work, yet it suits perfectly; I can’t imagine having that same feeling of sublime and crappy if it was all HTML5 (though it might be possible and even look identical). It’s also been a long time since I last looked at his site, so without playing every game of poetry, I think Nothing You Have Done Deserves Such Praise, is his best yet. I ended by walking into a beige void and keeping walking, keeping walking, falling, falling, falling off the screen, nothing. I aspire to make art this good.

WordPress 10

Aside

Happy birthday to WordPress, which is 10 years old today! I began using it for a site for Gala in 2007, having heard some good things about it and not wanting to torment her with Movable Type, which I was then in the thrall of. Since then, I’ve gone from, “Ooh! Make template changes and don’t have to wait for 1000 posts to be rendered!” to using it for every design project, and because of WordPress, I’ve learnt I know about PHP, CSS, dealing with servers, setting up a (proper) MAMP stack, jQuery, SQL, and all the things that I use to be a designer (currently learning Git, even). So here’s to WordPress, currently running 17% of the internet, and keeping me fed and roofed.

Gallery

francesdath.info

As I was saying, arriving back from Majorca, I went mental updating my old and much-loved website, francesdath.info (where I entertain delusions of choreography). As with Dasniya’s site, it wasn’t much of adding new things or changing the design, I’m quite partial the look, and have a fondness for Anonymous Pro which I think is one of the nicest monospace typefaces around. So once again, it was cutting through the undergrowth, updating stuff, kind of an anti-ageing process.

Ditching WPAlchemy for Advanced Custom Fields, updating to FlowPlayer 5, swapping all the text, images, video over to those, rewriting the templates, messing around with ways of loading web fonts without ugliness, hmm what else? Adding Apocalypse PRD (even though it was not such a good work, but the poster was quite spectacular, and Emile in Canton Opera demon attire!), adding other stuff (should really replace some of the background images …)

Oh! Yes, video! I’ve been using Flowplayer for ages, since whenever I first tried to find non-Flash video players (video on the internet, despite YouTube and Vimeo and the rest, is a nightmarish horror in inverse proportion to set up as it is a joy to watch), and while for a while I went over to mediaelement.js when HTML5 video became supported enough for me to say, “Sod off!” to browsers that couldn’t handle it – and mediaelements is still my default a lot of the time (it’s light, easy to set up, and is now in WordPress Core; as well, I’ve always liked it) – when FlowPlayer finally made the transition to HTML5 video … drool on floor. Slo-mo and fast-forward, default support for skipping through the timeline, works on Android and iOS … playlists! Actually it was the last one that was important for me, because I’d always had the video as a playlist, and making an ACF {/FlowPlayer playlist in WordPress was mainly what I wanted to do.

So now, I just need to choreograph some new work, no?

Gallery

Zur Zeit « dasniyasommer.de

Last week, after getting back from Majorca, I bashed through updating my other site (francesdath.info, about which I’ll say more shortly), in preparation for finishing two other sites in the coming week and one more around the end of this month. Much coding, plus occasional greeting dawn from the wrong side of the keyboard, which happened this morning, as I hauled out an approximate version 3 of Dasniya’s website.

It’s been planned for a while, and with me running WordPress 3.6 bleeding edge nightlies on a couple of sites to test the impending Post Format Tumblr-isation and rolling of mediaelement.js into the core for video and audio, and the sad demise of WPAlchemy (well, it’s still going and for many situations it’s beautiful code, it’s just that I can feel it going the way of qTranslate, and the multilingual disaster that was), and me replacing that everywhere with the truly brilliant Advanced Custom Fields … Dasniya’s site was last properly attended to – when it was made one with WordPress – two or so years ago, which makes it creakingly old. Dasniya also was making noises about having a proper blog to dump all kinds of things that didn’t really fit into the current table-sized site, and I was also looking at FlowPlayer again for video, since they released the HTML5 video player with awesome slo-mo/fast-forward functions (as well as all the other stuff that make it my favourite when needing more than what mediaelement.js can do).

So once finishing my site last week, I began hacking away at Dasniya’s. Some days later, after a quite intense coding jag, it emerged around 5am this morning. In-between, I truly spent way too much time looking at the SQL database and so much PHP and jQuery and CSS and making everything work together, and of course once the great, broad strokes have been swung, it comes down to shuffling things around by the pixel.

Overall, it looks the same, behaves the same, though the typography and layout has been given much more attention, and I’ve lopped close to half all the code out. In turn, I added back in that half in the form of her blog, Zur Zeit, which takes advantage of aforementioned Post Formats for video, images, galleries, and the slightly obscure asides and statuses. Not quite finished yet, still beating at the code a little, getting it to work in various browsers … in another two years I’ll probably do the same again and look at my old code and wonder what I was thinking.

Messing around on francesdath.info

I’ve been amusing myself the last day, not that I remember what set it off, but probably something to do with Flowplayer, which has been one of my two video players of adoration for years, which had updated a while ago to make all the html5 excitement work, and francesdath.info has been using a veeery old version, as well as even having video in *cough* Flash format. And me liking to play with new code, and not wanting to have that site grow crapulous, spent a quick bit of time one it.

Quick being about a day and an half. First I had to swap all the old custom fields code from outdated plugins (sadly departing from WPAlchemy), then get it working with the new (yay (etc)! ACF), then get Flowplayer 5 working with playlists (much mashing ‘return’ until things spluttered into existence, somehow failed to get the JavaScript method working), then playing with all the new methods … yawn, there goes a day … Then deciding I should re-encode the video to whatever format will be outdated in a year or two, and then deciding to add some new pages and videos of old projects … and finally going through all the templates and html5-ising them, cleaning up junk … hopefully it all works. (It did remind me I need to make some new work also.)