misc. supernaut-ing

Aside

Yesterday, I updated to WordPress 3.6 then realised all the Post Formats stuff had been pulled from Core, and mediaelements.js was now in Core, so all my video was borked. Fixed that; discovered supernaut had been hacked back in April. Fixed that; made new favicons. Got annoyed by wp-admin slowness so spent an hour going through database cleaning out the options table (a curse on old plugins which don’t clean up after themselves when deleted). Realised some plugins weren’t working properly, deleted them, unexpectedly seeming to solve months of horribly slow/timing out wp-admin. Wrote a quick function to filter by Post Format in wp-admin. Felt rather pleased with self and taking that as a sign I’ve done something horrible which I’ll only notice in three months when supernaut farts itself and all backups out of existence.

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

thomasjeker.ch

My fourth site to lurch livewards for the month, and the one longest coming. Thomas and I started working on this in late-2011, got mostly finished, took a long pause while he added quite a few projects in-between doing also quite a few projects, and we came back to it about a month ago and decided that we could wait forever or just arrive now.

In the last three days, I’ve done what is becoming a regular approach to the last bit before a site ceases to lurk and becomes public, which is to go through everything and make all the code coherent, add in anything new that has become standard, remove old stuff, and then completely strip the CSS before rebuilding it one section at a time. This last act usually removes a staggering amount of lines, gets rid of tiny weird problems, and generally smooths everything out so it’s not a couple of thousand lines of not really connected styles. It’s pretty methodical, like digging the garden, and fits my mania for as much cleaning up as possible.

And in eighteen months, that’s like a couple of decades in real life, so there was masses to change. One sad thing was the departure of WPAlchemy, which I’d been using as my always-use code for custom fields. It’s just not being developed as much as it used to, and the absence of repeating fields is something I can’t work with. So obviously I swapped the entire site over to Advanced Custom Fields (more digging of garden), which I feel vaguely confident will still be here in another two years. It’s actually brilliant and I can’t imagine doing a project without it.

Another big change was the rolling into Core of MediaElement.js, my favourite audio and video player (when I’m not using FlowPlayer, which doesn’t support audio anyway), which meant removing all my stuff that I’d set up to use this, and hooking into the core for all of Thomas’ audio and video — of which there is masses.

So, what else? Typography is using exlijbris’ Delicious family, which I find beautiful either for body or headlines; the M+ M Type 1 monospace, not sure when I discovered this, but it’s a very nice monospace; and a couple of occurrences of Genericons, which I find pretty useful for the slew of times icons are needed.

When I first began Thomas’ site, I was using jQuery to make images greyscale and then go colour on hover, which for some browsers (*cough*Safari) was mostly painful. Lucky in the intervening months pure CSS greyscale has become common enough to use, and it’s very nice (except in Firefox, which doesn’t animate the transition).

And then there’s all the loops for the individual projects pages, which hide sections if there’s no content (easy with ACF), and with the check of a box shift them around according to how wide the upper and lower rows (I call them ‘rooms’ …”Upper Room” harhar) are.

That’s about it. When I started it, I wasn’t doing any responsive design, and in the months since it’s become something I don’t even think about, it’s just part of the process, which means I suspect on some devices this site isn’t going to be so coherent. Maybe something to organise later, as making the horizontal layout collapse for smaller screens is fairly simple.

Fourth site for the month, then. The beautiful musician, composer, friend of dancers and choreographers who I really don’t see enough of (too much working to be hanging around in Berlin, where he doesn’t live anyway), Thomas Jeker now has a website where you can see what he’s been doing for the last several years, listen to his work and watch videos. I’d probably take an hour or so just to wander around: thomasjeker.ch.

Gallery

kitaonline.com

My third site for the month, with another finished this morning which I shall announce shortly, and another due end-of-month-ish, makes this the most keyboard-mashing few weeks I think I’ve ever had.

So, kitaonline.com is not a place where parents hand over their young children (though there is a number of the ankle-dwellers downstairs), it’s the Kleine Internationale Theater Agentur, who translate theatre works and do sub- and surtitles for performances; vaguely the same people who are also TEATRIS and Alte-Kantine Wedding, who reside downstairs in the old Uferhallen BVG Kantine, and whom I’ve helped out for their other two websites, as well as rehearsed/performed/taught with Dasniya there.

This site we began earlier in the year, with the idea for a “very simple site” which also had a table of all the projects they’ve done and all this in several languages. Lucky I’d a) done multilingual before and b) had been messing around seriously in DataTables so I was like a child waving around a something sharp with no idea of its sliciness, but wanting to find out.

Another kind of sliciness is WordPress (“used by 17% of the interwebz!”) and its multilingual support. Lack thereof, that is. Yes, it is well-fine internationalised, and swapping between individual languages is more-or-less basic, and it does each language very well, but two at the same time? Let alone seven. For a long time there’s only been one good free plugin, qTranslate, which I used to use without fail, and despite its shortcomings is very nice, light, fits in with the simplicity of the WordPress ethos. Shortcomings though. Like breaking on every WP update, and finally earlier this year with WP3.5 rendered useable only through some long hours of patching, which ultimately threw me into the maw of WPML. Which I can now say I can make work with everything I regularly use.

KITA, then. Where to begin? I started on the bones of WordPress’ TwentyTwelve theme. Just a habit, really, because I don’t want to have to endlessly write those bones, and also because I know if something doesn’t work, it’s not one of the fundamentals where to “doesn’t work” lies. Anyway, by the time I’m finished, there isn’t much of the original left. I’ve started using CodeBox to manage all my snippets (gah! I even downloaded Git the other night) earlier in the year, and it makes getting all the basics up and running a splendidly quick process (better than hacking around in a half-remembered project looking for the bit that does that something … umm what was it? … ). Of that original theme, I kept some of the basic styling and layout, and very tasty “responsive menu”, the one that for small screens swaps into a dropdown list, which ended up being massively useful.

That was for the gallery page. Oh yes, once again, Supersized. I’ve no idea how many times I’ve used this plugin for full-screen galleries, and now that I combine it with ACF’s Gallery Add-On, (and Genericons) I’ve got this well sorted. Only problem was long menu creeping all over nice images. So I rewrote some of the code for the responsive menu, and set it to work for the gallery page no matter what size the screen, and rolled the languages menu into it also.

Anyway, all this is just a nice diversion for what KITA is really about. DataTables! I love this plugin. It’s one of those ones that reward you the more you learn it, it’s insanely powerful for pulling chunks of data and spitting it out in a table which you can then do all kinds of stuff with. And getting Advanced Custom Fields to be the base for this is such a good way to do it.

The idea is each performance KITA has translated can be seen in the table, which can be searched and sorted. They’ve done hundreds of works in the last decade, so that’s a large mass of data to deal with (and I probably should have AJAXed the table but Ajax is what you clean baths with), so I spend some time pondering how to make it easy to add new projects and from that easy to disgorge it into the table.

It ended up being that each project is a separate sub-page (basically a bucket to hold the data and not really a page you’d go and visit) of the original language project page, What we did, with all the info going into ACF custom fields, and the seasons for each project are separate repeating fields. A Date field for the final performance filters whether a project will appear under ‘Current Performances’ or only on the projects table – yes, same data, in one place formatted as a nice line of text, in the other as a row in a table – and another field to declare what the Artist column should be sorted by.

At the other side, what you see uses a couple of the DataTables plugins: Fixed Columns, and Column Visibility; and then 300 or so lines of jQuery to do the fancy stuff. Lots of little things like taking the hash from an URL and putting it in the search field, sorting the artists based on that hidden field (because obviously sorting by ‘last name’ doesn’t work when there’s three names or only one and it’s the name of the company and as many exceptions to the ‘last name’ as there are names), removing ‘the, der, die, das, la, le, les…’ from the works’ titles for reordering the columns; responsive hiding or showing of columns based on browser width’ highlighting search terms; translations of all the non-data parts of the table; and everything that appears when it loads for the first time. Yes, code-y excitement.

What else? The address info is formatted using microformats hCard and Schema, which means it can be snagged as an Address Book card right off the page, (as well as being all semantic, y’all. Getting it to validate though, hawhaw, most amusing!. Probably should not try and jam the two formats together, no?) Using webfontloader for the fonts, lettering.js to make the title look nice (released under the excellent WTFPL). And it’s responsive! (Well, it tries to be.)

So, KITA — Kleine Internationale Theater Agentur is alive.

supernaut addendum

Aside

Oh grep! I spent some of my spare time the last days grepping the crud out of supernaut’s database. Much excitement, of course. The result is that now all the image file paths point to the default WordPress uploads folder, organized by year and month, and also all images are in the Media Library. So my slow task of disentangling supernaut from its previous years in Ecto and Movable Type, and hooking it properly into WordPress (which should mean if I ever decide to swap to another platform will mean less pain) proceeds slowly.

I decided for the manual path for coping with all the rubbish html surrounding the images as the thought of properly grepping all that caused my eyes to water, so currently I’m working my way through June, 2004. Shall take months, I’m sure.

thingswithbits updates itself

I’ve never been so taken by my design website, in respect to design having been thrown into a free template, and in respect to its purpose. On Friday evening, having just finished something or other, I thought perhaps I could just throw it into the template I use for francesdath.info, and had an idea I could use various images of various websites and so on as background.

Some enjoyable coding working out how to link the full-screen background image gallery code into WordPress using custom fields met with disappointment when I discovered the design idea in my head looked fairly crap in a browser.

Not one to shy away from excessive minimalism, I kept cutting things back until I was left with a large swathe of white and a single list on the far left. When I did the redesign for supernaut, (I forget when, I think early 2005 in Taipei), I was slightly afraid of the emptiness I’d uncovered. It was as if I’d taken a rococo edifice and levelled it until only the masonry remained. It’s an approach I tend to apply to choreographing also; I’m partial to an evening of killing one’s babies, it’s just the aftermath that makes me anxious.

So, thingswithbits.info has become perhaps an un-website, I feel slightly embarrassed to say. It’s intentionally empty, though without being a placeholder.

Now with three main websites, there is still a gap. I’ve been doing more photography in the last two years since getting a very good small camera, and yet this doesn’t fit into any of the sites. It may be that thingswithbits has to die so that it can be more inclusive. For now though, it’s at least a site of mine I no longer feel is the unmentionable one (which is good, considering it’s my work).

Flowplayer Playlists and WPAlchemy Meta Boxes

Last night I spent a bit of time working on francesdath.info, which I’ve been shifting into WordPress recently. I wanted to recreate the video playlist I had, but using some kind of dynamic method via the WordPress editing page. Flowplayer, WPAlchemy, PHP, JavaScript, CSS, Anonymous Pro … somehow it wasn’t so difficult. If you like coding stuff, you can read it here: Flowplayer Playlists and WPAlchemy Meta Boxes.

Two Ways to Put Flowplayer into WordPress — Custom Fields & Shortcodes

I spent this afternoon working on a site for Daniel Schlusser that is hidden from view but close to completion. My task for the day was getting video into blog posts using all my favourite things. I won’t scare the natives with hundreds of lines of code, but for you who are curious, you can read about it on my other blog: Two Ways to Put Flowplayer into WordPress — Custom Fields & Shortcodes.

supernaut lightbox

When supernaut first began, there was barely much of the internet as it is now. I had decided to use Movable Type for my blog and WordPress was not even a year old – I don’t think I’d even heard of it. Besides the horrible static page method of publishing in MT, more generally handling images was a big episode of blah.

To get images to open in a pop-up window without the irritation of window baggage scrollbars, toolbars and so on) meant yucky JavaScript in the link tag. A perfect example of depreciated code staining the web is that almost seven years later, I’m still using this rubbish code.

Feeling rather frisky today (17h, still in bed), I decided it wouldn’t really be so difficult to implement the current joy-of-images, a jQuery Lightbox plugin. I expect it to be depreciated in a matter of a year or so, but in the meantime…

Click image and enjoy. The best thing is that it adds the necessary tag to the image link so works on all images. I suppose I should clean up the style a bit…