If you’ve visited my website in the last year or so, you may have found it strange that there are no case studies of my work anywhere on it. Despite being my main portal for explaining who I am and what I do, you can’t find a single example of my work.
I get weekly emails from different people in the design and dev community, asking why they can’t see my work. I’ve had it brought up in job interviews
It’s not because I have nothing of interest to show—far from it—in fact, I’m very proud of my work, and want to show it. But, I’ve always been a huge fan of long-form project explorations written by the likes of Teehan+Lax and TypeCode, so throwing a bunch of images onto the site without any copy was never going to be an option for me.
It’s not that I can’t write—I can throw together a blog post, and I regularly put together half-decent copy for my clients’ websites—it’s that I struggle to write about my work. The more I write about my process and what I did and why, the more detail I go into and the more pretentious my prose becomes. So much so, that I end up deleting it all and starting again.
To tell you the truth, there is a full case studies section of this website, designed and built in spurts over the last year and almost ready to go; but you can’t see it. There are lovingly art-directed pages with matching calls to action, integrated across the site. There are some great interactive elements and work examples, all interspersed between 74 paragraphs of text. All of this is hidden on the live site.
I’ve considered hiring a ghost writer multiple times, but while I’m not actively looking for work this seems like an unnecessary investment. And so, on a just-about-monthly basis I sit down and I write, and delete, and procrastinate, and rewrite until I’m bored and distracted and move on to other things.
One day in the future I might come up with something I’m happy with, but until then, this site will remain work-free while I continue to torture myself.
I’ve tried a few times to host some form of comment feed on my Jekyll site, but always ended up abandoning them. Hosted solutions such as Disqus and Facebook were too invasive for my tastes, and after trying and failing to launch my own SaaS company (Chatter.li) to solve the problem, my site has been left comment-less for a few years.
A screenshot of the commenting service Chatter, which I launched in 2013, appearing on an older version of this blog.
I recently came across the new webmention specification, and the hosted webmention APIwebmention.io. There were quite a few steps to get it set up, but now that it’s done and everything is automated, I am able to have posts about my site and their responses appear as webmentions on my Jekyll blog automatically. I’ll talk you through the process below.
1. Authenticate your domain
To use the webmention.io API, you’ll need to authenticate your domain. To do this, add a few rel="me" links to the <head> of your site, pointing to your various social media profiles.
Go to webmention.io and sign in using your domain name. This will be your username, which you’ll need later on. You’ll need to authenticate using one of the social media accounts you linked to in the previous step.
This plugin performs a few different tasks for you. It adds the necessary tags to the head of your page to allow you to accept webmentions, it pulls webmentions into your site via the webmention.io API, and it sends outgoing webmentions for any outbound links in your content.
To install the plugin, first add the following to your Gemfile and run bundle install.
Then, add the plugin and configuration to _config.yml.
gems:-jekyll-webmention_iowebmentions:# Enter your webmention.io usernameusername:your-domain-name.comcache_bad_uris_for:5# If you've changed domain in the past, list the old ones herelegacy_domains:-https://old-domain.com-https://another.com# I have the JavaScript portion of the plugin disabled, since I'm# triggering builds with Netlifyjs:false
Once that’s done, add the following liquid tags to your templates.
<html><head>
...
{% webmentions_head %}
...
</head><body>
...
<!-- You'll probably only want this on article pages -->
{% webmentions page.url %}
</body></html>
Build and deploy your site, and you’re now ready to accept webmentions. If you want to, you can be a lot more specific with the plugin configuration. Take a look at the jekyll-webmention_io repository for more details.
4. Trigger webmentions for your social media posts
There are a few services out there for sending webmentions, and I haven’t tried them all, as I settled on Bridgy pretty quickly. The setup for each of them should be fairly similiar.
To authenticate with Bridgy, go to brid.gy and sign in with your preferred social media accounts. You’ll need to have the URL of your site listed as the website URL on your profile on each service for this step to work. Bridgy will immediately start crawling your website and social media feed, and send webmentions for each of the URLs it finds in your posts, and any posts which mention your domain.
5. Trigger site builds when mentions are received
If you head back to webmention.io, you should start seeing the mentions appearing in the dashboard. Now, if you have some mentions, on the settings tab, you can add a webhook address which will be pinged every time a mention is received. I use this to send a request to Netlify to trigger a rebuild and deploy of my site, meaning the mentions appear on my posts almost immediately.
So there you are, hopefully now you’re up and running, with responses to your posts appearing automatically. It may take a while for posts to trickle through, since social media APIs aren’t great for accessing historical content (Twitter only lets you search the last 7 days for example), but any new posts after setup should be picked up.
Thanks to Aaron Parecki for his work on building webmention.io, and to Aaron Gustafson for his work on the jekyll-webmention_io plugin. To learn more about webmentions, POSSE and owning your own content, check out IndieWeb
I had hoped that my first blog post in two years would be about something a little sunnier than this, yet here I find myself offering my readers a heartfelt apology, and a promise to do better.
Historically, this website has always been my test bed; a place to try out new techniques and optimisations. As such it has usually been hyper-focused on performance and accessibility. Since I wrapped up work with my last freelance client and moved into an agency two years ago this website hasn’t received much love, sitting abandoned as I concentrate on other things.
That said, when I decided recently to redesign it, I pushed on with the task quickly. I dropped the case studies section of the site—trying and failing to write case studies has led to the death of no less than four redesigns—hoping that once I had the base of the site live, it might free my mind to concentrate on actually writing the content.
In my haste to do this, I failed to do it properly. Last week, a full two months after launching the site, I opened it up in the text-only web browser lynx on a whim, and was greeted with the following page.
The homepage of this website as viewed through a text browser, before accessibility optimisations.
There is no obvious navigation, as it is so obscure and unreadable. There are no headings. There are no links to the location of the content or the top of the page. I was disappointed in myself to say the least, a feeling that only grew when I navigated to the Projects page.
The projects page of this website as viewed through a text browser, before accessibility optimisations.
Oh. Shit.
Immediately, I felt a wave of empathy. Empathy and guilt towards those who may have tried to browse my site with a text browser or screenreader in the time it had been like this. I have spent my career advocating accessible design on behalf of users, and yet here was obvious proof that my standards had slipped unforgivably.
I’ve just finished rebuilding this site again—from the ground up—in an effort to right this wrong and I’m pleased to say that things are a lot better. Although it looks nearly identical, behind the scenes I’ve switched from using Roots back to my old friend Jekyll, as the accessibility aids it provides are far better. As well as this, I’ve completely restructured the HTML to ensure that it’s semantically correct, and properly annotated for screenreaders.
The homepage of this website, as viewed through a text browser at time of writing.
I’ll be tweaking further over the next few weeks as I start to add more content, but I’m a lot happier with the way things are now.
I’ve come a long way since I started my career. For the four years I’ve been writing it, this blog has served as a great reminder to myself of my progress as a designer and developer. That said, it has also contained—for a long time—posts which are naive, misinformative, pretentious and a bit too sweary.
Whilst I’m all for preserving the integrity of links on the internet, a lot of these past articles do not represent my current position as a designer, developer and decent human being. As such, I’ve removed those articles which I’m no longer proud of, and that is why you may be seeing this explanation instead of what you expected to see.
Please take a look at the full listing and read some of my other articles. Some of them are actually quite good.
Throughout my life, I’ve constantly found myself amazed at how little I know. My ability to learn has always been fuelled by this feeling of inadequacy, and a desire to better myself. It’s the thing that keeps me going at 4.30am, trying to meet a deadline, with absolutely no idea of how I’m going to get there.
And nothing makes me feel more inadequate, than reading articles on the web. There are so many great minds in our industry – stalwarts like Jeffrey Zeldman and Oliver Reichenstein, trendsetters like Frank Chimero and Trent Walton, or up-and-coming youngsters like Devin Halladay and Cole Townsend. The writings of all of the above, and many others, have inspired me in some way or another. I trawl through article after article, I eagerly await updates, all in the hope of some sentence, some phrase or snippet which will teach me something new.
It also pleases me that the recurring theme, amongst all these words I take in, is improvement. Self-improvement, professional improvement. Improving design practices, development methods and performance optimisations. Improving work/life balance. Improving lives with ideas for new products, or charitable contributions. Improving the human race, one well-written article at a time.
Maybe as designers we are a little arrogant to think we have the power to cause this kind of change, but the simple fact is, we do. We work with hive mind, all striving subconsciously toward the same purpose – improving everything we touch. We see problems to be solved where others see frustration.
And there will always be problems to solve; always things to improve; always more knowledge to obtain.
When asked, I used to tell people that I got my motivation from striving to be the best in my field, as though there were some imaginary ladder I could climb in order to reach the top. But now I realise that such a thing simply does not exist. As I learn and develop and improve myself, so too do my peers. As hard as I try to reach a certain level, by the time I get there, the benchmark has moved.
Socrates once said “The only true wisdom is in knowing you know nothing.”, and I take solace in the fact that I’m never going to “know it all” – The world would be an incredibly boring place if I did.
