This week’s reading list comes to you with a renewed vigour, and a zesty swagger in its stride, as several people sought me out at Google I/O to tell me how useful it is. Thanks for the feedback.
This is simply a list of stuff I’ve read this week, and posted links to over Twitter. However, I know that lots of real people don’t read Twitter all day, or it’s blocked at work, so this is an amalgamated list. Note that these links interested me, but I neither endorse them nor vouch for their accuracy.
Posthaven is a new blogging platform from co-founders of Posterous: “We’re not going to show ads. We’re not looking for investors. We’re going to make money the best way we know how: charging for it.”
At Google I/O last week, I was hoping to hear Google’s thoughts on responsive images. Every developer I speak to wonders how to send the right image size to browsers, Google is obsessed with performance, Peter Beverloo and Paul Kinlan were explicit in their talk Mobile HTML: The Future of Your Sites that web sites should request the correctly-sized images. But how?
The <picture> element seems to be at an impasse; no-one from Google showed any enthusiasm (nor does any other browser vendor, seemingly). That’s OK; when I dreamed it up 18 months ago it was a strawman to get the conversation going in standards groups (I’d previously been told that there was no need for any standard, as everyone would have huge devices on reliable, fast wifi in the future).
Google has proposed a Client Hints header with device resolution, viewport size, touch-enabled flag etc. The idea is that the server generates lots of different sizes of foo.png, and when a request comes for foo.png, the server looks at the Client Hints and sends the most appropriate size. Opera (and soon, Chrome) announces that it accepts webP images, so the server could intercept requests for foo.png and send foo.webp in its place for conforming browsers, thereby reducing bandwidth.
This server-side negotiation will be great for legacy pages as it means source code doesn’t need to be touched. I’ve heard it also touted as being much simpler to author, but I wonder about that; HTML isn’t hard to write, while implementing server-side image resizing and transcoding, intercepting headers, doing the negotiation and setting cache control is much harder for an HTML wrangler than writing HTML is. It also assumes everyone has full access to the server. Don’t forget that some uses of HTML (for example, ebooks) have no server.
But those are all for the future. What can you do now? Clever, but ultimately unsatisfying workarounds.
Firstly, have <img> with a dummy source, then replace the src with JavaScript once you know the dimensions and resolution of your device. This makes images dependent on JavaScript.
Alternatively, make your images into single-frame <video>s, and take advantage of media queries on the child <source> element to send differently sized images. Ian Devlin dreamed this up, and it’s evil genius – except that file sizes increase and <video> doesn’t have an alt attribute, so the “images” are therefore inaccessible.
A similarly inaccessible technique for webkit browsers is simply to use a <div> element instead of <img> and set an image-set background-image in CSS. Don’t do this; it’s inaccessible, and is single-engine.
The current best way is brilliant albeit somewhat hacky: Estelle Weyl‘s clown car technique. This uses a data-encoded SVG file, embedded using an <object> element. Unfortunately, there’s nowhere to hang alt text, and right-clicking to “save as” doesn’t behave as expected.
So that’s the interim report. Inaccessible and/ or single-engine, or JavaScript-dependant, or relying on server-side shenanigans which don’t address the important art-direction use-case.
Images are central to the web; we need a declarative HTML method to achieve them in our multi-device world.
I’ve done my part in suggesting a strawman, and although cleverer minds than mine tell me it’s a bad solution, in a year and a half no-one has told me what a good one looks like.
Here’s your reading list for the next 2 weeks – I’m off to Google i/o where I’ll be speaking at the “Web Platform Fireside Chat” 3pm (to 3.40pm) on the Friday, Room 5. Come and say hi if you’re going to San Francisco (be sure to wear some flowers in your hair).
Some very meaty stuff this week, so it’ll last you 2 weeks (next week I’m in Las Vegas for Future Insights Live conference – use the discount code “Bruce” to get 10% off the ticket price).
Web Standards
HTML5 VIDEO bytes on iOS Mobile devices by Steve Souders: “Mobile devices ignore all values of PRELOAD in order to avoid high data plan costs, and instead only download the video when the user initiates playback … However, my testing shows that iOS downloads up to 298K of video data, resulting in unexpected costs to users.”
blink-dev: Intent to implement lazy-block layout – “Developers can page in new content while the user is scrolling without fear of making the app slow as well … Our demo has a 4 second layout that’s reduced to 32ms with lazy-block.”
ptb/flexgrid: a flexbox-based CSS grid in 3.6k – “The flexbox layout is supported on Chrome, all versions of iOS, Safari 3+, IE 10+, Opera 12.10+, and Firefox 22+. Other browsers get the fluid Bootstrap 3 layout, except Internet Explorer 6 and 7 which use a fixed layout.”
Testing WebP compression for app icons – “Looking at the ratio of WebP file sizes to PNG file sizes ratio, we can see WebP constantly provides better results”
Stop standardizing HTML says Simon St. Laurent. It’s XML again, but without draconian parsing or schemas. Essentially, every web page has its own private vocabulary.
It’s about time: RuneScape dumps Java for HTML5 – “With more than 200 million RuneScape accounts and thousands online at the same time, RuneScape is a big reason for a lot of people not to uninstall Java”
Emily Elizabeth Dickinson (December 10, 1830 – May 15, 1886) was a prolific American private poet; fewer than a dozen of her nearly eighteen hundred poems were published during her lifetime.
Most interestingly, however, is the fact that many of her poems can be sung to the haunting melody of “The Yellow Rose of Texas”.
When the horsemeat scandal was all over the papers showing that lots of readymade and fast food is really nasty, I said to some friends that I was glad that my family always buys real meat, and fresh vegetables and prepare them ourselves (we don’t do it to save money, we just hate junk food). Some of my friends told me that’s because I’m comparatively well-off and that many poorer people can’t afford to do that.
I decided to cost up a favourite meal of ours: free-range roast chicken with all the trimmings: roast potatos, roast pumpkin, carrots, parsnips and frozen peas (life’s too short to shell peas). We also had Yorkshire pudding, even though this shocks traditionalists who clam they exclusively accompany beef.
This easily serves five (including two ravenous teenagers) so that generally we don’t need an evening meal if we eat this at lunchtime.
Running a gas cooker costs £7.24 a month to cook for a family of 4, so let’s divide that by 30 days and estimate that it cost 25p in fuel to cook this meal.
This makes the ingredients, fuel and wine cost £13.51, or £2.70 a head. I can’t find the pre-recall price of Findus “beef” lasagne ready meals, but a search on Tesco website for “ready meal” suggests that the cheapest are about £1 for about 300g of food, which wouldn’t satisfy me let alone growing kids. My meal was at least double that size – each person had 200g of roast spuds as well as all the other stuff – and included a large glass of wine each for the three adults (and a good glug into the gravy).
Therefore, I’m going to stick my neck out and say that it certainly isn’t more expensive to eat properly, and is much better for you (although it took me about an hour of prep time rather than 5 minutes to microwave).
jQuery 2.0 Released – “leaves behind the older Internet Explorer 6, 7, and 8 browsers”. I wonder if this, and Windows XP in its last year of Microsoft support, will give devs/ biz “permission” to stop supporting older browsers?
I Stand With Trolls – “I’m calling out our culture of blaming the employer for the mouthiness of their employees in a personal capacity … We’ll end up with a Twitter full of teen-agers talking about their bowel movements and a million carefully curated corporate accounts.
My daughter’s Easter holiday homework was to design and make a commemoration cake. Like most of her class, she had planned to make an Easter cake, until the day when Margaret Thatcher died.
She researched her life and found a graph of unemployment figures during the Thatcher premiership which resembled the letter “M”. Add a swift “T” for the initials of The Great Helmswoman, the dates of her life in icing over a home-made Victorian values sponge and we have an edible commemoration of a true “Let them eat cake” politician.
My daughter felt it important that the cake be entirely factual. There were other graphs and statistics we considered, many of which contradict the hagiographies that are being circulated by the right wing at the moment.
For example, her Right To Buy scheme turned the UK into a nation of homeowners, we’re told. Actually, a third of ex-council homes are now owned by rich landlords rather than their occupants. Because councils were forbidden from building new housing with the cash they received from selling their old houses, we now have a huge housing problem, with many young people unable to leave home at all.
It’s a similar story with the utility privatisations which were to make us a nation of shareholders and participatory capitalists. “Small British shareholders have no influence over the overwhelmingly non-British owners of the firms that generate and distribute power in Britain.” writes the London Review of Books:
when local electrical engineers dig up the roads in London, they’re working for East Asia’s richest man, the Hong Kong-based Li Ka-shing … In north-east England, they work for Warren Buffett; in Birmingham, Cardiff and Plymouth, the Pennsylvania Power and Light Company; in Edinburgh, Glasgow and Liverpool, Iberdrola; in Manchester, a consortium of the Commonwealth Bank of Australia and a J.P. Morgan investment fund.
Like the American neo-cons she was so friendly with, her fiscal policies were laissez-faire but she believed in government small enough to fit into the bedroom. She was deeply socially conservative and enacted the shameful Section 28 legislating that a local authority “shall not intentionally promote homosexuality or publish material with the intention of promoting homosexuality” or “promote the teaching in any maintained school of the acceptability of homosexuality as a pretended family relationship”.
You might believe the way she treated striking miners was justified, but her contempt for the working class is demonstrated by the Hillsborough cover-up.
Social mobility hasn’t changed since the 1970s – and in some ways has got worse. For every one person born in the 1970s in the poorest fifth of society and going to university, there would be four undergrads from the top fifth of society. But if you were born in the 1980s, there would be five.
Yes, yes, Thatcher stopped the unions “bringing the country to its knees”. Then she delivered it to the bankers’ exemplary stewardship. Her Big Bang city deregulation paved the way for casino banks with decreased reserves, so the financial crash could happen.
If only her legacy were as easily swallowed and as quick to demolish as my daughter’s delicious cake.
The <hgroup> elements is removed from HTML 5.1. It was defined as “typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.”
I shan’t be sad to see it go; in November 2010, I argued that it was too hard to grasp; if you want to indicate that something is a subtitle or tagline, you want to indicate that on the tagline itself, rather than on an element that groups a tagline and non-taglines.
More recently, Alex Russell and I had a conversation in which he argued that elements without a UI are likely to fail (more of that from him, later). I think he’s right in this case; <hgroup> is used solely to preserve the outlining algorithm which itself is esoteric.
So how do you now mark up taglines and subheaders? Simply: as you always have. The spec now discusses this in the Common idioms without dedicated elements section.
Three methods are suggested. The simplest is simply with punctuation:
<h1>The Lord of the Rings: The Two Towers</h1>
The second is by using a <span> inside a heading element that allows you to style the secondary part, for example with h1 span {display:block; font-style:italic;}:
<h1>The Mothers
<span>Fillmore East - June 1971</span>
</h1>
The third (and the one I use, because a tagline doesn’t feel like a heading to me, but does belong with one in the <header>):
<header>
<h1>The Mothers</h1>
<p>Fillmore East - June 1971</p>
</header>
Expect HTML5 Editor Steve Faulkner to blog about this for HTML5 Doctor when the jet-setting roister-doister returns back to Blighty next week.
Element Queries – “like a Media Query (specifically, the min-width/etc queries), but for a parent or ancestor element, rather than the viewport” by Tab Atkins
HTML5 vs. Native vs. Hybrid. Global developer survey 2013 interesting stats, however, note comment: “surveyed individuals were (mostly? I am one of them) Telerik customers including Kendo UI customers might have leaned the results towards Windows and HTML 5?”
