[…] if I make a website for a client, I don’t offer accessibility as a line item with a price tag attached. I build in accessibility by default because it’s the right thing to do. The only way to ensure that accessibility doesn’t get negotiated away is to make sure it’s not up for negotiation.

Accessibility - Jeremy Keith

We had the second IndieWebCamp in Oxford on Saturday, hosted at the lovely Oxfordshire Central Library.

Normally these are run over two days, with a barcamp on day one, and building things on day two. Unfortunately I could only secure the venue for one day, so we had a compressed version.

I opened with a super super brief overview of the Indie Web, and then we had a quick round table chat about what people were hoping to work on. We had a good mix of first timers and old hands.

For my project I wanted to look at pulling in my bookmarks from Pinboard, using a PESOS approach to mirror them on my site. Pinboard has a great ecosystem of tools that already work for me, so there were a lot of wheels I didn’t want to reinvent.

I made some headway, building a Perch app to handle the content model and the syncing.

The app understands the content I want to pull in, and I have the code to talk to Pinboard working, but those two pieces aren’t talking to each other.

I’d like to think I have two thirds of the puzzle.

Unfortunately I had to leave before the end so didn’t get a chance to completely finish the build. My aim is to find some time in the next few weeks to finish it up and release it to the Perch community.

I’d like to thank Summer Of Hacks for inviting me to be a part of their program (I think I made them stretch the idea of "summer" a bit far), and especially Rich for finishing up the workshop in my absence, Oxfordshire County Libraries for hosting us, and Haybrook for their sponsorship.

Here’s to next year.

Some of the other attendees have written about their experiences of the day.

• Dan Q
• Marcus

I’ll link up others as they come in.

Rachel Andrew addresses a certain gatekeeping that is happening around web development, and what that means for people getting started:

When we talk about HTML and CSS these discussions impact the entry point into this profession. Whether front or backend, many of us without a computer science background are here because of the ease of starting to write HTML and CSS. The magic of seeing our code do stuff on a real live webpage! We have already lost many of the entry points that we had.

Like many of the "old guard", I got started by viewing source (and can we just take a second to reflect on how amazing that feature of the Web is), hanging out in forums, and reading books like this.

The first site I ever built is still available via the Wayback Machine. It isn't pretty, but it still works.

There is something remarkable about the fact that, with everything we have created in the past 20 years or so, I can still take a complete beginner and teach them to build a simple webpage with HTML and CSS, in a day. We don’t need to talk about tools or frameworks, learn how to make a pull request or drag vast amounts of code onto our computer via npm to make that start. We just need a text editor and a few hours. This is how we make things show up on a webpage.

That’s the real entry point here and yes, in 2019 they are going to have to move on quickly to the tools and techniques that will make them employable, if that is their aim. However those tools output HTML and CSS in the end. It is the bedrock of everything that we do, which makes the devaluing of those with real deep skills in those areas so much more baffling.

In her post Rachel highlights a recent Twitter thread from Betsy Haibel that points to a more pernicious reason behind this gatekeeping:

HTML+CSS dev vs JS-first dev Discourse MUST take into account how gender & seniority intersect or they WILL be harmful.

The divide between how senior women engs frame it and how newer women frame this is NOT a coincidence, and is ESSENTIAL to understanding the debate.

Thread.

— betsythemuffin (@betsythemuffin) 29 January 2019

Betsy's points were eye opening for me, and were something I hadn't really considered. It made me realise how naive I was back in the day, and how much more I still have to learn.

I was lucky enough to travel to Nottingham last week for the return of New Adventures.

New Adventures holds a very special place in my heart. Along with dConstruct it exposed me to a community of practitioners who cared as much as I did about the possibilities of the web, and through both, I met people who are friends to this day.

So I was hugely excited when I found out that New Adventures was coming back. So much so, I asked my new boss for the time off, while I was on holiday in Berlin, before I’d even started my new gig (thanks John!).

Why now? As Geri and Simon said on the New Adventures site:

Digital experiences are forming in new ways, requiring us to think smarter, be more efficient and collaborative. In the face of uncertainty, we must ask tough questions about labour and ethics, education and inclusivity, and rediscover ambition through weirdness and fun. Let's reconvene, recalibrate, and re-energise digital design.

Entering the Albert Hall on Thursday morning brought back a flood of memories. The gorgeous setting (it really is a stunning room), seeing familiar faces milling around, the excellent coffee. Sense memory is a powerful thing. So much so I found myself drawn to the same seat I occupied back during the original run (I know, I’m odd).

I won’t recap every talk as they were videoed, and the recordings will be released in the future, but I did want to share some of my highlights.

Jeremy Keith opened the day with yet another excellent talk, putting the architecture of the Web, the materials we work with, into the wider context of time and rates of change. Pace layers. Showing that if we work with the different layers, our creations are by their very nature more resilient.

This is something I’ve always believed and practised, but Jeremy’s ability to clearly articulate the reasoning why always gives me new ways of talking to others. And as usual, my reading list has grown because of his talk.

Clare Sutcliffe talked about her journey of becoming an overnight CEO for Code Club, going from its inception to eventual merger with the Raspberry Pi Foundation. Clare also talked more personally about what New Adventures meant to her, and how she met her husband there.

It seemed particularly dusty at @naconf during @claresutcliffe’s story of Code Club. Or onions. Yeah, onions.

— Garrett Coakley (@garrettc) 24 January 2019

I loved Jessica White’s talk on creating multi-disciplined teams by understanding the strengths and weaknesses in ourselves and others, and what we all have to bring to the conversation. Her request to create tiny bits of rebellion wherever we go is still scratching away in the back of my head.

Both Ashley Baxter and Brendan Dawes made me realise that I was spreading myself too thin and as a consequence I wasn’t enjoying what I was doing. Time to cut back on some personal projects, and focus on others.

Helen Joy encouraged us to show compassion in our work. Through a series of examples from her own user research she demonstrated that empathy and understanding of social exclusion and situational disability is as important as permanent disabilities. A staggering statistic that I hadn’t heard before is that 11.3m adults in the UK are below point 5 of the Gov.Uk Digital Inclusion Scale. Basic digital skills, at point 7, is the minimum capability that people need to have in order to use the internet effectively.

Deeply moving and thoughtful talk on digital inclusivity from @LittleHelli at @naconf

— Garrett Coakley (@garrettc) 24 January 2019

She also drew attention to The Copenhagen letter. A Hippocratic oath for builders of technology:

To everyone who shapes technology today

We live in a world where technology is consuming society, ethics, and our core existence.

It is time to take responsibility for the world we are creating. Time to put humans before business. Time to replace the empty rhetoric of “building a better world” with a commitment to real action. It is time to organize, and to hold each other accountable.

Ethan Marcotte wrapped up the day talking about the inherent power in design, power that is increasingly being wielded by companies and governments who do not have our best interests at heart. Touching on Robert Moses’ racist architecture and examples of the freedoms promised but never delivered by technology of the past, it was a sobering look at the state of our industry today.

But, Ethan continued, there is hope, in us. There are challenges for sure, but together we can effect a change. It’s time for us to step up and take responsibility. I have no doubt this will go down as one of the most important talks I’ll see in my career.

Feeling emotionally wrung out yet inspired from @beep’s vital closing talk for @naconf. Hope is a powerful thing.

— Garrett Coakley (@garrettc) 24 January 2019

Helen's excellent round up of the day beautifully articulates the feelings that I took away from Nottingham, and that continue to resonate with me.

It seems we have finally started looking outwards: identifying our responsibility and the associated consequences of our actions. We’re pushing past our early egocentric selves and are moving towards maturity. We’re still making our way along this path, learning from each other as we continue to grow. Ethan, rightly, encouraged us to approach this with hope. The talks at New Adventures showed a significant shift in our thinking and from the feedback, this year’s themes seem to have struck a chord.

My hope is that we see New Adventures return next year so we can see what direction these messages have taken us in. The call to action from the opening of the conference was “Now is the time.” I couldn’t agree more. It’s up to us to shape and build our industry, to help it develop and to make the web a better place. Let’s get to it!

I am so happy that New Adventures decided to come back now. It couldn’t be more timely.

Heartfelt thanks to Geri, Simon, Relly, and the entire New Adventures team.

Unfortunately the weather gods were against us on day 2, with some pretty horrendous downpours first thing in the morning.

Although a few of us made it in, it was more difficult for others, so I classed it as a "work-from-home" exercise, and we kept in touch through the #indieweb channel in the Digital Oxford Slack. Despite this, everyone was still enthused and carried on with their projects.

A few of the participants wrote up their experiences:

• Beverley Newing - 2018 Oxford Indie Web Camp.
• Marcus Povey - #Indiewebcamp Oxford.
• Henry Blyth - IndieWeb is seriously cool.

As for myself, I'm very pleased with what I achieved over the last couple of days. My webmentions are a lot tidier now, and I did a lot of cleaning up behind the scenes, bits and pieces that have been on the to-do list for a while.

Overall it feels like the first IndieWebCamp Oxford went well and people got a lot out of it. It was good to hang out with a group all working on something personal. It's got me thinking that maybe we need something more regular. An Oxford chapter of the Homebrew Website Club perhaps?

I'm here at the first IndieWebCamp Oxford. I can't quite believe it all came together!

Listening to @garrettc kick us off at @indiewebcamp #oxford! #indieweb pic.twitter.com/4Pn1yetifA

— Dan Q (@scatmandan) 22 September 2018

After some introductory rambling from me, the group got down to planning and coding.

As I hoped, we have all levels of experience, with some implementing IndieWeb functionality for the first time, whereas others have larger scale projects in mind, including Ben's epic "document all the things" in preparation for he and Sarah's trip to New Zealand, and Dan Q moving his geocaching tools to a more POSSE model, with less reliance on outside services.

For my part, so far I've finished the webmention implementation I set up a few months ago, adding a Facepile for likes and reposts, and cleaning up the markup. Next up I think some improvements to the microformats around the site.

Over the last couple of weeks I've been reading Jeremy's excellent book Going Offline. It's a step by step exploration of Service Workers. If you're not sure what a Service Worker is the Mozilla Developer Network has a series of articles to get you up to speed:

Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.

I already had a service worker on this site that had been built with Google's Workbox library, but it always felt a little like "magic" to me. I wasn't entirely sure what was going on under the hood, and I only ever managed to get it to do some caching of static assets, nothing more interesting than that. It felt like I was learning how to use a library, not the underlying tool.

That all changed with Going Offline. With his typical self-effacing humour (chapter titles include Making Fetch Happen and Cache Me If You Can), and easy manner, Jeremy explains how Service Workers, uh, work, the clever things you can do with them, and most importantly, how to build your own. Not only that, but it also acts as a great introduction to asynchronous JavaScript, something I've had real problems getting my head around. I'm still a long way from being proficient, but thanks to this book, I feel like I "get" it now.

To that end, this site now has its own home-grown, organic, corn fed, Service Worker.

As well as the caching of static assets it now cleans up after itself by deleting old caches, and more importantly will serve an off-line page if the user's connection goes down. That page isn't anything special right now, but one of the techniques that Jeremy talks about is caching pages that the user has visited, so at least they can load something from the past. One for me to think about.

I highly recommend picking up a copy of Going Offline, it's a brilliant read and a great introduction into the power of Service Workers.

Today I replaced the Skeleton based layout on this site with a CSS Grid based layout. I've been wanting to make the move for a while and finally found the time after waking up at stupid o'clock this morning.

I wanted to do a like-for-like replacement and stick with the 12 column layout. I'm not quite ready for a complete redesign just yet.

Based on this clever repeating column trick from the Mozilla Developer Network this is how I went about it.

First up, create a 12 column grid I can add to any container I want:

.layout {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-column-gap: 2rem;
}

Taking a small-screen first approach, set the immediate children to span 10 of the columns, offset by one:

.layout > * {
    /* All grid elements to span 10 cols offset by 1 */
    grid-column: col-start 2 / span 10;
}

Adding my .layout class to the header and footer elements, and then wrapping main and aside in a div with that class gave me my basic layout. Then as the viewport gets wider, I can just do this on the required breakpoints:

@media screen and (min-width: 1000px) {
    .layout-main {
        grid-column: col-start 2 / span 5;
    }

    .layout-sidebar {
        grid-column: col-start 8 / span 4;
    }
}

I could have simplified the syntax and removed the line names by omitting col-start, but named lines are very powerful and I might want to play with them later.

The end result is my CSS payload has gone from around 20k to just under 6k, and my markup is a lot simpler.

It was ridiculously quick and painless. From branching my repository to deploying the final code took just over an hour, and I'm sure fifteen minutes of that was me double checking I hadn't missed something. As Jeremy said :

I think I may need to recalibrate the estimation part of my brain to account for just how powerful CSS grid is.

(Thanks to Mat for pointing me towards to Pun Generator for the title)

Last night I attended the always excellent JS Oxford, and as well as having my mind expanded by both Jo and Ruth's talks (Lemmings make an excellent analogy for multi-threading, who knew!), I gave a brief talk on the Indieweb movement.

If you've not heard of Indieweb movement before, it's a push to encourage people to claim their own bit of the web, for their identity and content, free from corporate platforms. It's not about abandoning those platforms, but ensuring that you have control of your content if something goes wrong.

From the Indieweb site:

Your content is yours

When you post something on the web, it should belong to you, not a corporation. Too many companies have gone out of business and lost all of their users’ data. By joining the IndieWeb, your content stays yours and in your control.

You are better connected

Your articles and status messages can go to all services, not just one, allowing you to engage with everyone. Even replies and likes on other services can come back to your site so they’re all in one place.

I've been interested in the Indieweb for a while, after attending IndieWebCamp Brighton in 2016, and I've been slowly implementing Indieweb features on here ever since.

So far I've added rel="me" attributes to allow distributed verification, and to enable Indieauth support, h-card to establish identity, and h-entry for information discovery. Behind the scenes I'm looking at webmentions (Thanks to Perch's first class support), and there's the ever-eternal photo management thing I keep picking up and then running away from.

The great thing about the Indieweb is that you can implement as much or as little as you want, and it always gives you something to work on. It doesn't matter where you start. The act of getting your own domain is the first step on a longer journey.

To that end I'm interested in organising an IndieWebCamp Oxford this year. If this sounds like something that interests you, then come find me in the Digital Oxford Slack, or on Twitter.

Frank Chimero really nails something I've been feeling for a while now but have been unable to put into words (emphasis mine).

Illegibility comes from complexity without clarity. I believe that the legibility of the source is one of the most important properties of the web. It’s the main thing that keeps the door open to independent, unmediated contributions to the network. If you can write markup, you don’t need Medium or Twitter or Instagram (though they’re nice to have). And the best way to help someone write markup is to make sure they can read markup.

Learning to code through reading source was how I get started. The first site I ever built is still out there thanks to archive.org, and I delight in showing the ramshackle beginnings of my career to new students at Codebar and Code First:Girls.

Frank continues (again, emphasis mine).

As someone who has decades of experience on the web, I hate to compare myself to the tortoise, but hey, if it fits, it fits. Let’s be more like that tortoise: diligent, direct, and purposeful. The web needs pockets of slowness and thoughtfulness as its reach and power continues to increase. What we depend upon must be properly built and intelligently formed. We need to create space for complexity’s important sibling: nuance.

Yes!

As Jeremy has said in Resilient Web Design:

Here’s a three‐step approach I take to web design: 1. Identify core functionality. 1. Make that functionality available using the simplest possible technology. 1. Enhance!

I continually go back to these three rules. I want to build things that others can learn from.