Journal tags: article

5

sparkline

Building links

In just over a week, I’ll be giving the opening talk at the New Adventures conference in Nottingham. I’ll be giving a workshop the day before too. There are still tickets available for both.

I have to admit, I’m kind of nervous about this talk. It’s been quite a while since the last New Adventures, but it’s always had quite the cachet. I think I went to most of them. It’s quite strange—and quite an honour—to shift gears from attendee to speaker.

The talk I’ll be giving is called Building. That might be a noun. That might be a verb. You decide:

Every new medium looks to what has come before for guidance. Web design has taken cues from centuries of typography and graphic design. Web development has borrowed metaphors and ideas from the world of architecture. Let’s take a tour of some of the most influential ideas from architecture that have crossed over into the web, from pattern languages to responsive design. Together we’ll uncover how to build resilient, performant, accessible and beautiful structures that work with the grain of the materials of the web.

This talk builds upon the talk I gave at last year’s An Event Apart called The Way Of The Web. It also reflects many of the ideas in Resilient Web Design. When I gave a run-through of the talk at Clearleft last week, Andy called it a “greatest hits.” For a while there, I was feeling guilty about retreading some ground I’ve covered in previous talks and writings. Then I realised it was pretty arrogant of me to think that anyone in the audience would be familiar with any of it.

Besides, I’ve got a whole new avenue of exploration in this talk. It’s about language and metaphor—how we talk about what we do on the web. I’ve just finished giving another run-through at the Clearleft studio and I’m feeling pretty good about it. That’s good, because I find that giving a talk in a small room to a handful of colleagues is way more stressful than giving a talk to hundreds of people at a conference.

Just as I put together links related to last year’s talk, I figured I’d provide some hyperlinks for anyone interested in the topics raised in this new talk…

Books

Articles

Audio

Posting to my site

I was idly thinking about the different ways I can post to adactio.com. I decided to count the ways.

Admin interface

This is the classic CMS approach. In my case the CMS is a crufty hand-rolled affair using PHP and MySQL that I wrote years ago. I log in to an admin interface and fill in a form, putting the text of my posts into a textarea. In truth, I usually write in a desktop text editor first, and then paste that into the textarea. That’s what I’m doing now—copying and pasting Markdown from the Typed app.

Directly from my site

If I’m logged in, I get a stripped down posting interface in the notes section of my site.

Notes posting interface

Bookmarklet

This is how I post links. When I’m at a URL I want to bookmark, I hit the “Bookmark it” bookmarklet in my browser’s bookmarks bar. That pops open a version of the admin interface tailored specifically for links. I really, really like bookmarklets. The one big downside is that they don’t work on mobile.

Text message

This is something I knocked together at Indie Web Camp Brighton 2015 using the Twilio API. It’s handy for posting notes if I’m travelling somewhere and data is at a premium. But I don’t use it that often.

Instagram

Thanks to Aaron’s OwnYourGram service—and the fact that my site has a micropub endpoint—I can post images from Instagram to my site. This used to happen instantaneously but Instagram changed their API rules for the worse. Between that and their shitty “algorithmic” timeline, I find myself using the service less and less. At this point I’m only on their for the doggos.

Swarm

Like OwnYourGram, Aaron’s OwnYourSwarm allows me to post check-ins and photos from the Swarm app to my site. Again, micropub makes it all possible.

OwnYourGram and OwnYourSwarm are very similar and could probably be abstracted into a generic service for posting from third-party apps to micropub endpoints. I’d quite like to post my check-ins on Untappd to my site.

Other people’s admin interfaces

Thanks to rel="me" and IndieAuth, I can log into other people’s posting interfaces using my own website as the log-in, and post to my micropub endpoint, like this. Quill is a good example of this. I don’t use it that much, but I really should—the editor interface is quite Medium-like in its design.

Anyway, those are the different ways I can update my website that I can think of right now.

Syndication

In terms of output, I’ve got a few different ways of syndicating what I post here:

Just so you know, if you comment on one of my posts on Facebook, I probably won’t see it. But if you reply to a copy of one of posts on Twitter or Instagram, it will show up over here on adactio.com thanks to the magic of Brid.gy and webmention.

Responsive readlist

I’m in Madison, Wisconsin where myself and Aaron are wrapping up three days of workshopping with Shopbop. It’s all going swimmingly.

This last of the three days is being spent sketching, planning and hacking some stuff together based on all the things that Aaron and I have been talking about for the first two days: progressive enhancement, responsive design, HTML5, JavaScript, ARIA …all the good stuff that Aaron packed into Adaptive Web Design.

We’re also assigning some homework: reading material for the Shopbop gang to read at their leisure after we have departed Madison. Aaron created a readlist called Adaptive Web Design and I’ve made a readlist called Responsive Enhancement.

Feel free to peruse the links contained therein and send them all to your Kindle or download them all as an epub file for the iPhone/iPad/Readmill/whatever.

Article of doubt

A Day Apart in Seattle was more like a seminar than a workshop. Rather than being an intimate gathering in a small room, it was more lecture-like in an amphitheatre setting. But that didn’t stop me interacting with the attendees. There were plenty of great questions throughout, and I also had everyone complete an exercise.

I reprised the exercise I gave at dConstruct back in September. It isn’t a test of the audience. Rather, it’s a test of how well the new structural elements in HTML5 are described:

I then asked the attendees to match up the definitions with the element whose name sounded like the best match. To be clear: this wasn’t a test of knowledge. I was testing the spec.

The results from September’s test were quite revealing. There was some confusion between footer and details. Since then, the definitions in the spec have been updated and I’m happy to report that the Seattle audience—a much larger sampling—were almost unanimous in correctly matching element names to their definitions.

With one glaring exception.

The section and article elements were, once again, confused. This happened back in September at dConstruct. It happened again at A Day Apart in Seattle. I didn’t get exact numbers, but from the very web-savvy audience of about two hundred people, I would say there was a 50/50 split in matching up the definitions of section and article. About 50% of the attendees thought that the definition of section applied to article and visa-versa.

Historically, article and section were more distinct. The article element used to have optional cite and pubdate attributes. Now their content models are identical (apart from the fact that the article element can take an optional time element with a pubdate attribute).

The only thing that distinguishes the definition of article from the definition of section is the presence of the phrase self-contained. A section groups together thematically-related content. An article groups together self-contained thematically-related content. That distinction is too fine to warrant a separate element, in my opinion.

The existence of two elements that are practically semantically identical isn’t a harmless addition to HTML5. It’s causing a great deal of confusion. I’ve spoken to authors who incorrectly assumed that articles had to be within sections or that sections could only be within articles. The truth is that you can have sections within articles, articles within sections, sections within sections, articles within articles, or any other combination you can think of.

This isn’t helpful. Authors are confused. Yet, according to the HTML Design Principle of Priority of Constituencies:

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

I don’t understand why Hixie is still clinging to the addition of the article element when he has repeatedly stated that he wants to keep the number of new elements to a minimum. Here’s the perfect opportunity: merge section and article into one element. Personally, I would keep section, with its more generic-sounding name.

We’ve been here before. The abbr and acronym elements were responsible for years of confusion amongst authors unsure of which one to use. The use-cases and the definitions of both elements were just too similar. That particular problem has been solved in HTML5: the acronym element is now obsolete. The abbr element works well enough for both use cases.

Let’s not repeat the mistake of abbr and acronym with article and section.

The audio of place

Last year, the good people at Web Directions asked me if I would like to write an article for the second issue of their Scroll magazine—an honest-to-goodness dead-tree publication. I told them I would be delighted.

The theme of the issue was “place.” I took the word and ran with it, delivering an over-the-top pretentious piece about language, wormholes and virtual worlds. An edited version appeared in the magazine as Disrupting the conceptual metaphors of the web.

I’ve published the raw, unedited version here in the articles section under its original title of There Is No “There” There. I also recorded an audio version, which clocks in at just over eight and a half minutes.

There Is No “There” There on Huffduffer

Feel free to huffduff it. Feel free to anything you like with it: it’s licenced under a Creative Commons attribution license.