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.
Free live transcripts – website listens to you and transcribes in real time. Uses Chrome-only experimental Web Speech Recognition API. Did pretty well on my Brit accent.
A Very Informal Look at Gutenberg Accessibility – “my clients…asked to switch…Drupal …to WordPress because of WP’s UI advantages. …updates to the upcoming WP 5.0 release, specifically the new Gutenberg editor, appears to be undoing these advantages.”
CSS Grid Posters – “An exploration into the world of possibilities with CSS grid.
modalzmodalzmodalz – “We use too many damn modals”, with lots of suggestions for better UX patterns
Building a video editor on the web. Part 0. – “I am going to start the long process of working out what is and isn’t available on the platform and seeing how far we can get today” by Paul Kinlan
MeasureOSS – a “contributor relationship management system”, to help you see how engaged contributors are in your public project on GitHub, by @sil et al
Google unshackles Android-device firms – Manufacturers are not required to ship Chrome and Search if they pre-install YouTube, Maps etc. Good for ecosystem. Thanks, EU! I really hope Mozilla can do some OEM deal to get Firefox pre-installed on some Android devices rather than Chrome. We really need more browser diversity.
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.
Link o’ the Week: Inclusive Design 24 – YouTube videos of free 24-hour online event about inclusive design for the global community. Thank you to all organisers, hosts and sponsors for this fabulous service.
Context, Culture And Service Design – Marc Fonteijn interviews Diego Mazo about the need for deeply understanding local culture in service design. (30 min YouTube video).
Pornography, Rape, and the Internet (PDF) – “the arrival of the internet was associated with a reduction in rape”, especially in men aged 15-19. So why is the UK government censoring porn, when evidence suggests that will lead to more sexual assaults?
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.
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).
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.
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.
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!
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.
Unbuttoning Buttons – how to stop a <button> looking buttony without losing its accessibility semantics
The way we talk about CSS – “I do not think we help our cause by talking about CSS as this whacky, quirky language. CSS is unlike anything else, because it exists to serve an environment that is unlike anything else.” preaches Rachel Andrew, most righteously.
Netflix viewing eats up world’s data – consuming 15% of global net traffic. Video accounts for 58% of the total volume of downstream traffic on the internet, followed by web browsing (17%), gaming (7.8%) and social media (5.1%)
How The First Ever Telecoms Scam Worked – In 1834, the French telegraph was hacked to steal stock market data using a backspace character to cover their tracks. (YouTube video)
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.
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.
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.
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.
Web Developer Representation in W3C – “the Fronteers board will propose both to become a member of the W3C and to hire @rachelandrew Andrew as our representative” – a brilliant initiative. Rachel for President! And Queen!
The “Developer Experience” Bait-and-Switch – “we need to confront the “developer experience” bait-and-switch. Tools that cost the poorest users to pay wealthy developers are bunk” by Alex Russell.
#HackOnMDN – Hidde de Vries on last weekend’s hackathon to update MDN’s accessibility information that I attended
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”.
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.
