https:// + supernaut (& WordPress)

Every month, I get a newsletter from my webhost, DreamHost. And I read it! That’s how I found out that supernaut could be SSL, have https:// in its URL and have that fancy lock in the address bar. Up there, ^.

Why would I want to do something like that? Well, because I can. Because it’s useful for a lot of reasons, especially now. Since the Snowdon NSA whistleblowing, which gets worse and more damning with each document release, it became obvious to me I should take the implementation of privacy and security as seriously as I do reading about it. Recently this has meant beginning the move off Google, which I use for so much; installing PiWik instead of using Google’s Analytics, installing GPGTools for email encryption (and badgering my friends to do the same); and obviously, if easy website encryption was possible, I’d give it a spin.

The first things I tried it out on have been my private server (running Pydio, formerly AjaXplorer) – my self-running DropBox, and for PiWik, then on a couple of small, low-traffic sites, to test how SSL would play with my standard-ish WordPress setup, which led to some rewriting of htaccess rules, and quick/easy code cleanup. So then I thought to try it on supernaut, which gets enough traffic and is complex enough to really show the horror.

WordPress make it reasonably simple – provided you have STFP/shell access – to make the switch. First the admin and login side of things can be SSL’d simply by adding:

define('FORCE_SSL_ADMIN', true);

to wp-config. Then in the Admin General Settings changing WordPress Address and Site Address to https. Then in the root .htaccess, editing the WordPress with two additional lines:

RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

This did the majority of the change; the remainder turned out to be annoying. Images in the content seemed very reluctant to make the jump. This is partly because they are effectively hardcoded via the process of inserting the using the Media Library. I tried several methods with varying degrees of success, and finally adding this to functions.php seemed to do the job, updated a bit to use WordPress’ inbuilt is_ssl() function, which is a wrapper for both isset($_SERVER[“HTTPS”]) and a check for server port 443, and uses str_ireplace() instead of the depreciated ereg_replace:

function supernaut_ssl_content($content) {
if ( is_ssl() )
$content = str_ireplace('http://' . $_SERVER['SERVER_NAME'], 'https://' . $_SERVER['SERVER_NAME'], $content);
return $content;
}
add_filter('the_content', 'supernaut_ssl_content');

Which just left data in custom fields, which I use primarily for video. These look like they are best edited by hand in supernaut, though it’s possible I could use the WordPress HTTPS (SSL) plugin … I’d rather bash around in the code so I understand what’s going on. (edit) well obviously I can just wrap any code in the template with the above function, and just replace $content with $variable that pulls the post meta, no? (edit 2) And also for situations where I’m using Advanced Custom Fields (sadly not here), adding this to functions.php takes care of the rest:

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );

This just leaves changing the WordPress Address and Site URLs in General Settings to https://, and that’s it (I think).

The last thing then is my own certificate. While Chrome is reasonably calm about the fact my SSL is an unsigned certificate (i.e. I haven’t spent up to $1500 on one from a trusted vendor), and Safari drops down a fairly innocuous warning – which admittedly is enough to make most people anxious, FireFox turns on all the alarms and does a mad freakout that’s impossible to simply bypass. Horrible, no? I figured that $15 a year for a secure certificate was probably worth it, for the experiment alone.

supernaut on SSL then! Most Excellent!

And for those reading for whom this was all WTFBBQ?, here’s what DreamHost said:

SNI – SSL Without a Unique IP!

“Server Name Indication,” or SNI, is a biiiig deal in the world of web hosting.

Every site on the web is tied to a specific IP (v4) address, but a single address can be shared across several different domains. In fact that’s one feature that’s helped to keep the Internet from bursting apart at the seems up ’till now.

IPv4 addresses are the Brettcoins of the shared hosting world in that they are both EXTREMELY valuable and that there are only a finite number of them gifted to humanity by the Gods.

While IPs can be shared among websites, they cannot be shared among SSL-enabled (secure) websites. If you want to handle secure web transactions on your own without the use of a specialized third party payment platform you’ll need to lease (and pay for,) a unique IP address for your own personal use.

Or at least…that’s how things USED to work.

SNI extends the protocols used to process secure web transactions to allow for the usage of a single IP address across several different SECURE websites. And, as of not too long ago, we support it!

You can still obtain a unique IP address and tie your secure hosting to it if you’d prefer – but it’ll cost ya ($3.95/month.)

To add or modify the secure hosting settings on any of your domains, visit the “Domains/Secure Hosting” section of your control panel, and click to “Add” or “Edit” services on your domains.

https://panel.dreamhost.com/index.cgi?tree=domain.secure

For a little background on setting up secure hosting in general, including some caveats of SNI, check out our wiki!

http://wiki.dreamhost.com/Secure_Hosting

Categories & Tags Mayhem (∴ SQL)

Aside

I was just about to write on a few things I’m reading – Michel Serres, Black Metal Theory mostly – and suddenly felt an urge to clean up, merge, rename, delete some of the 1300 tags on supernaut, when I noticed something dead weird: some of the tags were simultaneously categories. Much messing around and the inability to edit or change taxonomies caused me to have a look at the database, where I found, horribly, they indeed existed as both. I guess this is either a hangover from the Movable Type port some years ago, or a plugin that didn’t do its job properly around the same time. So I manually deleting 50 or so of these and their relationships. And then did some more merging and renaming. And now I must eat.

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.

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?