Bruce Lawson's personal site

Reading List

A (usually) weekly round-up of interesting links I’ve tweeted. Sponsored by Smashing Magazine who slip banknotes into my underwear so I can spend time reading stuff.

Reading List

A (usually) weekly round-up of interesting links I’ve tweeted. Sponsored by Smashing Magazine who slip banknotes into my underwear so I can spend time reading stuff.

Why don’t we add a <lovely> element to HTML?

(Russian translation: Почему мы не добавим в HTML элемент <чудесный>?)

Yesterday, there was an interesting conversation, started by Sara Soueidan:

Now, before people start to think “but colour isn’t content, it’s presentation!”, Sara was talking of pages showing colour swatches. In this case, the colours are the content. It seems like a good candidate for a semantic element, because it has meaning.

In my capacity as Ancient Old Fogey Of The Web, I sat and thought about this.

Rembrandt painting of Philosopher in Meditation

HTML: The mis-spent youth

The first iteration of HTML was a small set of tags noted down by in an email from Sir Uncle Timbo in October 1991, and added to in November 1992. By the time HTML2 came around, some tags had changed names, and a few tags added that showed HTML’s primary use as a language for mathematics and computer geeks: <var>, <samp>, <code>, <pre>, <kbd> as well as the now-defunct <xmp>, <dir> and <listing>.

At this point, we only had three presentational elements: <tt>, <b> and <i> (and arguably, <i> isn’t presentational—the spec says “If a specific rendering is necessary — for example, when referring to a specific text attribute as in “The italic parts are mandatory” — a typographic element can be used to ensure that the intended typography is used where possible.”)

Further generations of HTML reflected the changing uses of the Web; it was no longer the read/write medium that Sir Uncle Timbo had envisaged, so we needed a way of sending information back to sites – thus, a whole form-related markup evolved, which subsequently has served eCommerce brilliantly. Tables were added to show data, extending the web’s original use-case of showing and sharing mathematical papers. This had the side-effect of allowing creative people to (mis)-use tables to make great-looking sites, which meant ever more consumer-friendly sites (and a menagerie of presentational markup which is deprecated now we have CSS).

By the time HTML5 came around, we added a whole slew of elements to demarcate landmarks in common web page designs – <nav>, <header>, <article>, <main> and the like, which has improved the experience for assistive technology users.

By my count, we now have 124 HTML elements, many of which are unknown to many web authors, or regularly confused with each other—for example, the difference between <article> and <section>. This suggests to me that the cognitive load of learning all these different elements is getting too much.

HTML: comfortable middle-age

There’s loads of stuff we don’t have elements for in HTML. For ages I wanted a <location> element for geo information and a <person> element (<person givenname="Bruce" familyname="Lawson" nickname="Awesome" honorific="Mr."> etc.)

But here are some of the main reasons why we probably won’t get these (or Sara’s <color> element):

The 80/20 rule

The Web exists to share all possible human knowledge. Thus, the list of possible things that we could have a semantic for is infinite. We’re already getting overload on learning or remembering our current list of elements, their semantics and their attributes. So we (hopefully) have a set of elements that express the most commonly-used semantics (ignoring historical artefacts which browsers must continue to support because we can’t break the web).

Fourteen years ago (!) Matthew Thomas wrote

The more complex a markup language, the fewer people understand it, the less conformant the average article will be, so the less useful the Web’s semantics will be.

Testing

Browsers are sophisticated beasts. I’d wager it’s the most complex software running on your device right now. As someone who used to work for a browser vendor, I know there’s a lot of resistance to adding new elements to the language – it adds even more testing to be done and boosts the chances of regressions. As Mat Marquis wrote in his recent history of Responsive Images,

Most important of all, though, it meant we didn’t have to recreate all of the features of img on a brand-new element: because picture didn’t render anything in and of itself

What’s the use-case?

The most important question: if there were a <person>, <location> or <color> element, what would the browser do with it?

Matthew Thomas suggested that new elements need to have some form of User Interface to make them easier for authors to choose the right one:

One way of improving this situation would be to reduce the number of new elements — forget about <article> and <footer>, for example.

Another way would be to recommend more distinct default presentation for each of the elements — for example, default <article> to having a drop cap, default <sidebar> to floating right, default <header>, <footer>, and <navigation> to having a slightly darker background than their parent element, and default <header>…<li> and <footer>…</li> to inline presentation. This would make authors more likely to choose the appropriate element.

As Robin Berjon wrote

Pretty much everyone in the Web community agrees that “semantics are yummy, and will get you cookies”, and that’s probably true. But once you start digging a little bit further, it becomes clear that very few people can actually articulate a reason why.

So before we all go another round on this, I have to ask: what’s it you wanna do with them darn semantics?

The general answer is “to repurpose content”. That’s fine on the surface, but you quickly reach a point where you have to ask “repurpose to what?”. For instance, if you want to render pages to a small screen (a form of repurposing) then <nav> or <footer> tell you that those bits aren’t content, and can be folded away; but if you’re looking into legal issues digging inside <footer> with some heuristics won’t help much.

I think HTML should add only elements that either expose functionality that would be pretty much meaningless otherwise (e.g. <canvas>) or that provide semantics that help repurpose *for Web browsing uses*.

So what can we do?

Luckily, HTML already has a little-known element you can use to wrap data to make it machine readable: the <data> element:

The element can be used for several purposes.

When combined with microformats or microdata, the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a Web browser. In this case, the format to be used in the value attribute is determined by the microformats or microdata vocabulary in use.

Manuel Strehl mocked up a quick example of Sara’s colour swatch using the <data> element. You could add more semantics to this using microdata and schema.org color property.

Some schema.org vocabularies do pass the Robin and Matthews’ “browser UI test” (kinda-sorta). We know that Google’s Rich Snippets search results make use of some microdata, as does Apple’s WatchOS, which is why I use it to mark up publication dates on this blog:


<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2 itemprop="title">
<a href="https://www.brucelawson.co.uk/2018/reading-list-201/">Reading List</a></h2>
<time itemprop="dateCreated pubdate datePublished"
datetime="2018-06-29">Friday 29 June 2018</time>
</header>
<p>Some marvellous, trustworthy content</p>
<p><strong>Update: <time itemprop="dateModified"
datetime="2018-06-30">Saturday 30 June 2018</time></strong>Updated content</p>

Google says

You can add additional schema.org structured data elements to your pages to help Google understand the purpose and content of the page. Structured data can help Google properly classify your page in search results, and also make your page eligible for future search result features.

This is pretty vague (Google secret algorithms, etc) but I don’t believe it can hurt. What’s that you say? It adds dozens of extra bytes of markup to your page? Go and check your kilobytes of jQuery and React, and your hero images before you start to worry about the download overhead of nourishing semantics.

What about Custom Elements?

Custom elephants are Coming Soon™ in Edge, behind a flag in Gecko and already in Blink. These allow you to make your own new tags, which must contain a hyphen – e.g., <lovely-bruce>. However, they’re primarily a way of composing and sharing discrete lumps of functionality (“Components”) and don’t add any semantics.

Conclusion

So that’s why we don’t include lots of new semantics into HTML (but feel free to propose some if there’s a real use case). However, you can do a lot using existing semantics, generic containers like <data> and extensibility hooks. Happy marking-up!

Reading List

A (usually) weekly round-up of interesting links I’ve tweeted. Sponsored by Smashing Magazine who slip banknotes into my underwear so I can spend time reading stuff.

Maslow’s hierarchy of me me me

When I was in Thailand recently, I was wondering whether the ever-popular Maslow’s hierarchy of needs triangle had ever been tested against Asian cultures, in which the emphasis is on family and community rather than individualism.

When I asked on Twitter, Daniel pointed me to Maslow’s Hierarchy of Need: Psychology Myth Busting #1 by Joe Leech who concludes

Self-actualisation, the idea of people becoming the best they can be is a very individualistic idea. Asian cultures are about the community and family that is collectivist in focus. Placing this very individual goal at the top highlights Maslow’s background, a man living in the individualistic USA.

There is also little evidence that the model is the same for men and women.

Nevalina pointed me to Maslow’s hierarchy of needs: An Islamic critique which concludes

It is the basic line of the Islamic approach to strike a balance between material and spiritual needs in any situation of human existence, in times of saturation and need, stability and change, health and illness, happiness and distress. A model of a hierarchy of the different needs like Abraham Maslow’s can therefore not give credit to the reality of the interaction between material and spiritual aspects of the human being in different life situations, even if the spiritual aspect was to be named first.

It’s said that Maslow was influenced by the Blackfoot tribe of native Americans, but misunderstood them. In Maslow’s hierarchy connected to Blackfoot beliefs, Karen Lincoln Michel writes up a lecture presented by University of Alberta professor Cathy Blackstock at the 2014 conference of the National Indian Child Welfare Association.

“First of all, the triangle is not a triangle. It’s a tipi,” Blackstock said. “And the tipis in the Blackfoot (tradition) always went up and reached up to the skies,” she said.

Another difference noted by Blackstock is that self-actualization is at the base of the tipi, not at the top where Maslow placed it. In the Blackfoot belief, self-actualization is the foundation on which community actualization is built. The highest form that a Blackfoot can attain is called “cultural perpetuity.”

So it looks as if a white academic male in hyper-individualist America thought that everyone in the world is like him. What a surprise. I hereby rename his over-exposed diagram as Maslow’s hierarchy of me me me and forbid you from ever using it again.

Bruce Lawson: Smashion Advisor

Friday was my last day of funemployment – I spent the summer showing El Son the charms of Krakow, then travelling alone with my portable music studio to finish my album on an island in Thailand (it’s still unfinished), and now it’s time to get earning again. The three Cs of life (champagne, caviar and cocaine) don’t buy themselves, you know.

So today I began work with a group of old friends who put together the best resources for web developers. I’ve edited articles for them, written for them, tech reviewed a book of theirs and presented at their conference. Now they need my help with their biggest challenge — their wardrobes.

I’m bringing my experience with web standards, conference MCing and unique fashion sense to my friends at Smashing Magazine to be their in-house “Smashion Advisor”. It’s going to be a tough gig and it won’t be easy, but I’m looking forward to it.

I’ve always liked the Smashing folks. They’ve always tried to make their living the right way, with quality products at fair prices that aim to better the web, while respecting standards, audience, speakers, authors, sponsors and staff. And many Smashing staffers are old friends of mine, from even before they joined the gang.

The nice Ricardo has made me two Smashing avatars, one with a green mohawk and one with silver-flecked normal hair for when my coiffure is having a George Clooney Interlude.

Cartoons of me; one with green mohawk hair, one with silvery hair

See you at a Smashing Conference soon, I hope!

Reading List

Reading List

Reading List

One weird trick made me a better coder/ speaker/ product person

One trick that made me a better programmer/ speaker/ product person: relax. This sounds counter-intuitive in an industry where all-night coding sessions are seen as a virtue, and you’re supposed to have umpty-nine side projects on Github that you do in your spare time. (And we wonder why older people, women with children and people with disabilities are under-represented…)

But for me, resting is when ideas come. The best ideas come in the shower when I’ve not long woken up, or on a Friday evening when I’m drinking wine and listening to music. Your mileage may vary, of course; that’s why I titled this “made me a better programmer”.

When I tweeted this, Phillipp replied

I would go even further and say “rest good!”, because many people are aware of taking a break, but their breaks aren’t resting at all. They still allow to be flooded with information constantly…

This is an excellent point. One of my favourite ways of relaxing is reading. But I’m reading material of my choice, not being waterboarded by the information firehose of Twitter or the web. And if I’m reading, it’s because I want to — I could equally well be listening to music, or writing and recording music.

I advise reading eclectically, about anything that interests you. Even if you’re reading about particle physics, neurology, history or fiction, you’re seeing how other people present information, which can help you be a better presenter. And so many new ideas come from the unexpected collision of different disciplines that that the more widely you read, the more chances you have of seeing parallels and comparisons that others haven’t seen.

For me, relaxing is when ideas come; reading (and talking to a range of people ) is where ideas come from.

Bonus tip: always wear groovy shirts. A groovy shirt makes a groovy mind.