Slight Improvements to Accessibility & Structured Data

Coding while sick!

Recent supernaut museum photography blogging got me thinking about image metadata (both Exif for camera-applied metadata, and IPTC for image-specific person-added metadata), and how I could set up a workflow to better implement this – particularly IPTC which is something I’d need to add and can partially automate, rather than Exif, which the camera adds – and how to persuade WordPress (or straight PHP / some method of database demonology) to scrape that and output it into Schema structured data.

I started doing heavy Schema work on tiptree.org as a way of making the huge amount of data comprehensible to search engines, and by extension, to humans, and have grown to like it a lot (also microformats, which WordPress uses) for making sense of what is otherwise a string of decontextualised words and media. I’d already schema-fied Dasniya’s blog, so mostly it was copy-pasting, then combining into supernaut’s structure – where the design had taken far too many liberties with accessibility and structured data.

So, now all posts spit out at least minimally useful structured data, and posts with images, galleries, or video spit out additional Schema structured data for those objects. Once I start using IPTC for my images, I’ll look at a way of including that in the Schema as well. (Though combining all that into useful objects from experience with Tiptree can be hilariously obtuse.)

On the accessibility side, I’d realised sometime in the past I’d been seriously shitty in supernaut’s design, basically a fucking horrible website to get around for anyone using keyboard navigation, screen-readers, or other methods non-trackpad + eyeballs. Accessibility is something I’ve been increasingly enjoying coding and designing for, along with structured data, particularly for websites that are highly designed and plain fucking arty – I find it gratifying to make hugely complex sites that remain structurally coherent and accessible no matter what device or method a person uses to access it – because there’s often an inverse relationship between design ‘woo!’ and usability ‘yay!’

So, keyboard navigation now is useable and hopefully much clearer, visual styling of user interaction also. Not as good as it could be, but getting there, and vaguely aiming for all of supernaut to be at least somewhat accessible – including and especially my museum visits.

DreamHost & Let’s Encrypt & WordPress

Mid-last year, Electronic Freedom Frontier announced Let’s Encrypt: free, automated, Open Source HTTPS Certificate Authority for everyone. That’s the padlock in the address bar. Supernaut and other sites of mine have either gone the parasitic paid route, or the “whole day lost and still not working” free route.

DreamHost, who has been my webhost for close to a decade (thanks Emile), announced in December they would be providing One-Click Let’s Encrypt setup for everyone, no matter what their hosting plan. Yesterday it arrived; It really is one-Click! Ok, two clicks, one checkbox, one select. Four things you have to do in DreamHost panel for what used to cost tens to hundreds of dollars/euros a year and hours of pain if you didn’t want to pay.

Awesome. Best thing that’s happened to the internet since ages.

Anyway, this isn’t about all that, it’s about “I have a WordPress site and how do I make the green padlock appear?” Cos that’s a couple more steps. Call it 15 minutes if you’re paying attention; an hour if you’re drinking.

So, you’ve already added the certificate in DreamHost Panel. No? To the DreamHost Wiki! Done that, wait for the confirmation email (might take a couple of hours), and on to your webserver.

I start with getting wp-admin all https-ified. Open your site in whatever FTP client you’re using, open wp-config.php and add:

define( 'FORCE_SSL_ADMIN', true );

Re-login to wp-admin, and check for the padlock in the address bar. Open Web Inspector (command-alt-i), select the Console tag and check for Mixed Content errors. Unless you’re doing weird things in wp-admin, that’s that side of things sorted.

In your site root directory, you’ll see a directory called “.well-known”. That’s added by Let’s Encrypt. Probably don’t want to delete that.

Open your root .htaccess and add two chunks of code:

# force redirect http to https
# ---------------------------------------------------------------

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTPS} off
 RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

# https security headers
# http strict transport security (hsts)
# X-Xss-Protection
# X-Frame-Options
# X-Content-Type-Options
# ---------------------------------------------------------------

<IfModule mod_headers.c>
 Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains"
 Header always set X-Xss-Protection "1; mode=block"
 Header always set X-Frame-Options "SAMEORIGIN"
 Header always set X-Content-Type-Options "nosniff"
 #Header always set Content-Security-Policy "default-src https://website.tld:443;"
</IfModule>

The first force redirects any requests for http to https. The second does some fairly obtuse header security stuff. You can read about that on securityheaders.io. (The Content Security Policy stuff takes a lot of back-and-forth to not cause chaos. Even wp-admin requires specific rules as it uses Google Fonts. Expect to lose at least an hour on that if you decide to set that up.)

Other ways of doing this are possible. It’s kinda unclear what’s canonical and what’s depricated, but WordPress Codex and elsewhere have variations on these (definite rabbithole, this stuff):

SSLOptions +StrictRequire
SSLRequireSSL
SSLRequire %{HTTP_HOST} eq "yourwebsite.tld"
ErrorDocument 403 https://yourwebsite.tld

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTPS} off
 RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

 RewriteBase /
 RewriteRule ^index\.php$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
</IfModule>

Then go through the remainder of your .htaccess and change any specific instances of your old http://yourwebsite.tld to https://yourwebsite.tld.

Open robots.txt and do the same, http changed to https.

Now’s a good time to empty your cache and check your live site to see how it’s going. Everytime I’ve done this so far it’s been all green padlock and magic S. But there’s still a couple of things to do.

Off to your Theme directory, open functions.php, and add these chunks of code:

/* content over ssl
------------------------------------------------------ */
 
function themename_ssl_content( $content ) {
 if ( is_ssl() )
 $content = str_ireplace( 'http://' . $_SERVER[ 'SERVER_NAME' ], 'https://' . $_SERVER[ 'SERVER_NAME' ], $content );
 return $content;
}

add_filter( 'the_content', 'themename_ssl_content' );

/* advanced custom fields over ssl
------------------------------------------------------ */

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );

The first one makes sure your old http links in Posts and Pages are spat out as https. (Can probably extend that for excerpts and other things if you’re that way inclined.) The second was for me specifically dealing with Advanced Custom Fields plugin, and is part of a larger issue that’s been bashed around on Make WordPress Core. There’s a few other bits of code floating around for issues like this and the Media Library not behaving properly over https, but the next step I think deals with that, if you want to go that far.

Before that though, go through your theme for irksome hardcoded http strings. If you really can’t use proper WordPress functions (like get_template_directory_uri() or whatever), then change them to https.

Addendum:

Turns out WordPress’ responsive images support using src-set needs its own attention:

/* responsive images src-set
------------------------------------------------------ */

function ssl_srcset( $sources ) {
 foreach ( $sources as &$source ) {
 $source['url'] = set_url_scheme( $source['url'], 'https' );
 }

 return $sources;
}

add_filter( 'wp_calculate_image_srcset', 'ssl_srcset' );

If you fully commit to the next step though, these functions aren’t required.

(End of addendum.)

Database funtime! Backup your database, it’s time to search and replace. I’ve been using interconnect/it’s brilliant Search Replace DB for ages when I need to shift localhost websites to remote. Dump it in your WordPress folder, open it in a browser, and search-replace http://yourwebsite.tld to https://yourwebsite.tld. I do a dry run first, just to get an idea of what’s going to be changed. This step isn’t really necessary, and if you end up going back to http (dunno why), you’d need to reverse this process; it’s probably just that I like everything to be all orderly.

Another browser to make sure crap hasn’t fallen everywhere, and it’s cleanup time.

In wp-admin, check all the settings are showing https where they should (can even resave Permalinks if clicking buttons feels good). If you’re using a plugin like Yoast SEO, then checking the sitemaps are correct is good.

Caching plugins also need to be checked, and caches emptied. If you’re using W3 Total Cache and are manually minifying, check the file urls are all https, for some reason this was’t changed even with the database search replace. Also under Page Cache check “Cache SSL (https) requests”.

Then it’s checking in a couple of browsers with and without caching, particularly any pages that use plugins which embed or iframe content, or otherwise interact with stuff outside your website. Most sites like Vimeo, Twitter, YouTube etc that WordPress provides embeds for are already over https, but that doesn’t mean code in a plugin is up to date.

If you’re using Google Analytics or Webmasters or similar, you’ll need to set things up there for the new https version of your site as well.

Buncha caveats: Do some of this wrong and you will break things. At least backup your database before doing this. Some/all of this might be depreciated/incorrect/incomplete/not the best way to do it. Finding definitive, single ways to do things isn’t really how code works, so try and understand what the code does so you can ask if it’s doing what you want. For me to be able to do this in 15 minutes is because I’ve spent years scruffing around in stuff and breaking things horribly, and the best I can say is, this seems to work and cover the most common issues.

DreamHost. Let’s Encrypt. Excellent!

(I swear this is much quicker than it took to read.)

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.

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