Lightblaarghx

Aside

I spent Sunday half immersed in Humans, and the Swedish original, Äkta människor, and half in code, following a passing musing to its conclusion. The former were and are quite brilliant; the latter was and is fiddly and peculiar, like all intersections of code and design. The latter began with me wondering exactly how difficult it might be to implement image overlays for supernaut without recourse to a plugin. This led to much reading and research, and deciding on Lightbox2 (instead of a plethora of others), taking half an hour to set up, and a few hours to get all nice looking (and nice-playing with caching). Of course it probably breaks all over the place, but the idea was to have the images fill as much of the browser as possible, with as little clutter as possible, and generally this seems to have happened.

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.

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.

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.