’90s-period CRT phosphor colours, monospace fonts, highly structured and interlinked data, emerging from over a year of conversations and work with the Merchants of Slime. Deep adoration for Web 1.0 aesthetics, sliding into contemporary possibilities for accessibility, interaction, responsiveness, and clarity.
By far the largest project I’ve undertaken, handling archival data management, utterly masses of PHP, JS, and CSS, and teasing out over months the design, aesthetic, and movement through hundreds of pages and thousands of media files – all while trying to keep it properly accessible, semantic, responsive, logical, even simple, while the phosphor burns the screen.
Heaps big thanks to Virginia Barratt and VNS Matrix for going, “Yeah, Frances is what we want.” And hectic reps to research assistant Clare Bartholomaeus for all the scanning and cataloguing.
vnsmatrix.net — 1: index page phosphor colour
vnsmatrix.net — 2: index page black & white
vnsmatrix.net — 3: index page VNS Matrix image
vnsmatrix.net — 4: index page VNS Matrix filterable timeline
Seems that keeping 3000 posts and 10,000 images updated takes about half a blog lifetime.
I moved from Movable Type to WordPress in 2009, and ditched ecto, the old blogging app, about the same time. Over the years, I wrote SQL queries, grepped the hell out of the database, redesigned the whole website (while keeping the same black and white aesthetic), recoded stuff, wrote some hella shonky redirections, and slowly went through all the posts turning images into galleries and using WordPress’ Featured Image, and then gave up on it all a couple of years ago before getting weirdly ‘inspired’ this weekend and doing 1000+ posts over the course of 2 days.
My database queries tell me all the galleries are now correct, and all the single images also. A stupid amount of work I hope I never have to do again, because I know my singular, obsessive focus will do it. Legit, my wrist is going ”WTF, Frances, WTfuckingF.” and if I keep blogging like this, eventually maintenance will take longer than there is days in a year.
Apologies to everyone visiting who downloaded a 30MB page instead of 400KB. Image lazy-loading broke sometime recently and I didn’t notice. It’s still not ideal now, but at least not obnoxiously hammering your bandwidth.
After many years of supernaut images being tiny with ragged right background captions, I’ve been slowly ditching it for supernaut teenage Instabanga big images. And finally I cleared out all the old styles and code, made new medium and large image galleries, redid the styles and scripts repeatedly, said goodbye to funky bodges. Kept the blazing deep pink tho’. ???❌?‼️
Messing with my .bash_profile this afternoon, post-diving into Laravel and Git (which I’ve been doing much of the last week), I realised I could boot my entire dev environment with 5 letters. Fewer, if I wanted.
So instead of going to the Dock, clicking each of the icons, going to each and faffing around, I could at least boot them all, and set off some commands in Terminal (or ITerm2 as I’m now using).
Weirdly, until Justine gave me an evening of command-line Git learning, and wanted my .bash_profile, “Like so,” I hadn’t realised you could do stuff like that, despite amusing myself with all manner of shell scripts. Now I know what’s possible, I’m over-achieving in efficient laziness.
What’s missing is:
Opening multiple windows in ITerm or Terminal and running a different command in each (I don’t want to boot multiple instances of an app).
Setting off a menu action in an opened app, e.g. in Transmit going to my work drive.
Extending it to boot the environment and then a specific project, e.g. “devup laravel” would open my laravel installation in each of the apps, like opening the database in Sequel Pro; cd-ing to the laravel folder after automatic SSH-ing into my Vagrant box, and so on.
Some of these are probably uncomplicated, but this was a 30-minute experiment that turned out to be very useful.
I got sick of the tiny, Web1.0 images everywhere here, a hangover from the earliest days of supernaut, so I decided — ’cos I like visuality & pix — to make small, big. I thought it would be easy. Little did I know I also create and add to the pile of Technical Debt. So: most single images in the recent past are now huge-ified, 666px wide; recent image galleries which are not full of diverse image ratios are now evenly splitting the Number of the Beast. Older images and galleries should be retaining their previous diminutiveness, but who knows, 13 years of blog is difficult to homogenise. Mostly I got distracted with how to make portrait images not blow out of the available browser window space, which turns out to be a kinda traumatising process I didn’t achieve. Plus how to Lazy Load srcsets by preg_replacing the new WordPress caption shortcode. OMFG, Frances, WTF? All of which makes me think it might be time for yet another supernaut refresh. So much code. So many images. So much …
End of March, right when I’m throwing finally together my design portfolio (I swear I resisted, and now love having one), Emile asked if I might want to hurl together something for him. Something Web1.0, something like we’d handcode in HTML in the late-’90s, not quite something MySpace in the days of its browser-crashing gif-frenzy inferno, but definitely something that would be in its lineage; something tuner Nissan Skyline, unassuming on the surface, but all Fast & Furious: Tokyo Drift when you pop the hood. Something Helvetica, Neo-Grotesk, what’s getting called Brutalist right now, though not traipsing behind a fashion; this is Emile and when I was looking through years of his work putting his new website together, he has a deep love and understanding of the aesthetic, and the art and philosophy underpinning it.
First things first:
Emile: I have two websites. Can we make them one?
Frances: Yes!
Emile: Can we do all these other things?
Frances: OMG Yes!
Lucky I’d just done my portfolio, cos that gave me the framework to build on without having to bodge together fifty different functions and stuff. Saves a few hours there, which we made good use of in timezone-spanning conversations on typography, aesthetics, and usability.
First off, getting all those years of blog posts and work projects into a single database / website / organism. I used the hell out of interconnect/it’s Search & Replace DB script, merging, shuffling, shifting, getting rid of old code, jobs that would take a week or more to do by hand, done in seconds. We’d pretty much sorted out structure and functionality in a couple of afternoons; for a website that looks so simple, it was most of two weeks diligent work, back-and-forth conversations, picking away at details, (stripping and rebuilding, stancing, slamming, tuning … we are very good at turning all this into hoonage, especially with 24h Le Mans in the middle).
Obviously it had to be ‘Responsive’, look hella flush hectic antiseptic no matter what device, and for me (recently taking this stuff proper serious) it had to also be ‘Accessible’. I put those words in scare-quotes cos they’re kinda bullshit.
It occurred to me as I was finishing, that for a website to be neither responsive nor accessible — for example it looks crap if the screen size is too small or not ‘right’, or you can’t navigate with keyboard or screenreader — you have to actively remove this functionality. You have to break the website and override browser default behaviour. It’s a very active process to systematically remove basic functionality that’s been in web browsers since the beginning. You also have to actively not think, not empathise, intentionally not do or not know your job. Me for probably all of my earlier websites.
The funny thing is, it’s not really any additional work to make sure basic responsive and accessible design / functionality is present; the process of testing it always, always, always brings up usability issues, things I haven’t thought of, little points that become involved discussions about expectations, interactivity, culture, philosophy. Like ‘left and down’ is back in time, and ‘right and up’ forward; 下个礼拜 ／ 上个礼拜. Next week / last week. Yet the character for ‘next’ is xià, down, less than, lower; and ‘last’ (in the sense of ‘previous’) is shàng, up, more than, higher. So how to navigate between previous and next posts or projects turns into an open-ended contextual exchange on meaning.
And ‘responsive’, ‘accessible’? Basic, fundamental web design. Not something tacked on at the end.
Back to the design. System fonts! Something I’ve not done in years, being all web-font focussed these days. Another trip through the wombat warren of devices, operating systems, CSS declarations. It’s crazy impressive how deep people go in exploring this stuff. Emile Blue! A bit like International Klein Blue, and a bit like Web / HTM 4.01 Blue. But not! We worked this in with a very dark grey and very slightly off-white, bringing in and throwing out additional colours, and managing in the end to sort out all the interaction visual feedback though combinations of these three — like the white text on blue background for blockquotes. Super nice.
As usual, mad props to DreamHost for I dunno how many years of hosting (it was Emile who said to me, “Frances. Use DreamHost.”), WordPress for running Emile’s old and new sites (and all of mine), and Let’s Encrypt for awesome and free HTTPS. And to Emile for giving me the pleasure of making the website of one of my favourite artist.
When I’m using WordPress’ Status Post Format, I like to keep it to 140 characters, so it’s like a Tweet. But how many characters have I typed? Cos The Visual Editor only shows Word Count. So I took a look around and saw various ways of doing it, quite a few using regex to strip ‘unwanted characters’—but a space counts as a character! So I wrote my own, based loosely on what I’d been using for counting characters in the Excerpt, and from a few different plugins and bits of code. Turned out to be surprisingly easy and uncomplicated (I say that now, of course).
So, first I need a function to call a couple of files if I happen to be editing a Post or Page:
It’s a little bodgy, and if I had more than the 45 minutes to a) work out how the Visual Editor can be fiddled with, and b) write something that worked and looked ok—the bare minimum really—I’d do it slightly nice and maybe consider for a minute throwing it into a plugin (where it officially belongs). But I won’t. It does what I want: live updating of how many characters I’ve written in the Visual Editor, and shows it in a line underneath the Word Count (also aided me in delaying writing a residency application on the day it’s due).
