- Responsive Images: Use Cases and Documented Code Snippets to Get You Started by Andreas Bovens
- Ten CSS One-Liners to Replace Native Apps a look at some current and proposed CSS (Further comments on Hacker News), by Håkon Wium Lie (disclosure: my CTO). CSS multi-column is already implemented; there is a Blink-dev thread on Intent to Implement: CSS Figures.
- Navigation Transitions Specification – apply a stylesheet to a page when leaving it for another page. Initially I thought this rather gimmicky, but it’s useful in making web UX closer to “native”
- WebVTT Released in Firefox 31 – and the web just got a little more accessible.
- You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy by Maximiliano Firtman. Food for thought, although I’m not sure I agree with all his conclusions.
- How I Got The UK Government To Adopt ODF by Terence Eden. Yay, open formats.
- W3C Web Payments Activity Update – “we believe that we have now the critical mass… We will now start the formal W3C process”. If I were worked for a bank, I’d be watching this; better to be disrupted by the web and be a big, incumbent player with a hand in guiding it all.
- Verizon Says It Wants to Kill Net Neutrality to Help Blind, Deaf, and Disabled People .. riiight..
- 10 Tricks to Appear Smart During Meetings
- 31 Adorable Slang Terms for Sexual Intercourse from the Last 600 Years – I think that “Fadoodling” (1611) should be immediately re-instated. However, I’m not sure that “join giblets” counts as “adorable”.
- Hot summer could wipe out Goth population, experts warn – very alarming.
Disclosure stuff: I was sent a free copy of this by the publishers. From 2000-2002 I worked with its author. I currently work with Mathias Bynens, the book’s technical reviewer (but didn’t know this until after reading it).
The book looks beautiful. High quality paper, colour images, with real care and attention lavished on the layout and the words. I’m no quivering aethete designer, but I found it pleasurable to read even though it’s a weighty 600 page tome. Each page (or spread) is its own discrete infolump so it’s easy to out down and come back to.
It starts light – defining events, objects, methods and properties, showing the relationship between HTML, CSS and JS, and with a section on Progressive Enhancement (hoorah). However, I was slightly peturbed that the first worked example uses
document.write. I can see why you’d do this – it allows you to show something, but without having to muck about appending to the DOM or using
innerHTML but it didn’t feel particularly good practice (especially as
innerHTML are introduced soon after, anyway.) In the author’s defence, he does note that this is Considered Naughty.
Elsewhere, we see lots of workarounds and IE-specific aspects of the DOM. I’m comfortable with these being there; we have to live in the real world, and I think that a book that ignores this does a disservice to its readers – it’s right to equip someone to make pages work on IE.wtf or understand what’s happening in older/ inherited scripts.
The book moves briskly after the traditional introduction to loops, variables and other syntax. By page 270 we’re looking at event listeners, including IE5-8, event delegation, mutation events (with a note that mutation observers are coming, but no more than that.)
Chapter 7 begins with jQuery. Again, there are times when jQuery is entirely appropriate. What’s good is that this book teaches JS concepts first, and always keeps the two separate. (I get tired of “JS” tutorials that are actually about jQuery.)
The rest of the book romps through “HTML5″ APIs, JSON, common UI widgets and – usefully – debugging. Attention is paid to pointing out what’s standard and what isn’t, what’s vanilla JS and what isn’t. Progressive enhancement, accessibility and separation of concerns is are kept in mind throughout. This is good. You can see the table of contents.
On dev.Opera, the man we call “Bovo the bachata boss” just published Responsive Images: Use Cases and Documented Code Snippets to Get You Started. It’s excellent; go and read it. (It isn’t a primer to the whole concept; we have one of those in the works.)
We umm-ed and ah-ed about what order to present the examples – “most likely use-case first” or “simplest to gnarliest syntax” order? We eventually decided the second, because the full syntax can be a bit scary.
But don’t that put you off. Responsive images addresses 4 different use-cases. There are also new constructs like
srcset to wrap your bonce around. So the syntax for addressing all four at once is, at first sight, pretty complex.
But, like the most complex of the 24 English tenses, the Future Passive Perfect Continuous tense*, you’ll probably rarely need it.
And if my dull brain can understand it, yours can.
*I used it once, when complaining about how long a repair shop was taking with my guitar. “By our next gig, it will have been being mended for three weeks!”
I want to get the men who shot down MH17, and the leaders of Hamas and Israel, and repeatedly punch them in their faces until their noses are smashed. I would enjoy it.
The horrible, bitter irony of this is not lost on me.
- “Intent to ship” status applied to the <picture> element in Chromium – HUZZAH!
- <picture> element completed in Firefox Nightly – HURRAY!
- Responsive images:
sizesnow in WebKit nightly (but will Apple turn it on in Safari?)
- m. sites, or responsive sites – which is faster? – “RWD sites can indeed compete with m dot sites in terms of load time”
- Google: Promoting modern websites for modern devices in Google search results – “Starting today, we will indicate to searchers when our algorithms detect pages that may not work on their devices.”
- Clipping in CSS and SVG – The clip-path Property and <clipPath> Element by Sara Soueidan
- Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio, also by Sara
- Installing Opera Mini on Your Computer – testing in Opera Mini without a Java featurephone
- <dialog> element demo – HTML has native dialogs, that are keyboard accessible, and don’t require JS focus management or fragile z-index mucking around
- HTML Table Generator
- UK broadband not fit for purpose, says business group (BBC)
- GOV.UK design patterns – “A wiki for people working on GOV.UK services to discuss GOV.UK design patterns and share ideas and experiences. Contributions from other designers welcome.”
- How to Secure your WordPress Website
Bonus video content!
“My job is to make sure that the web wins” – The Awwwards people interviewed me and my extra chins in Paris in February.
It’s easy to seriously muck up a production of one of Shakespeare’s great plays, but exceptionally hard to pull off a good production of a relatively weak play like Two Gentlemen of Verona. I enjoy seeing one of the lesser plays produced, as it’s fascinating to see what a really good director and cast can do with unpromising source material.
One thing you can do is have lots of music and spectacle and there are a few musical interludes in this new production. The extended opening is a joy; the ensemble cast re-creates a busy restaurant in Verona, with live music and without dialogue but with lots of audience interaction. It’s great fun. It’s contrasted with the sophistication of the Milanese court later, in a fabulous interlude involving a cabaret singer/ exotic dancer and bizarre Tudorbethan disco dancing.
The production doesn’t try to overwhelm with spectacle, however. In fact, occasionally it lacks pace. This may because I watched it on the third night of its run, so the actors need to get into their stride. But it may be the quality of the text. One of the reasons that the play is weak is that Shakespeare was still learning his craft (many scholars believe this to be his first play) so there are long speeches that are undramatic wordplay. Perhaps they were funny in the sixteenth century but they aren’t now, so I found myself thinking that if I’d directed the play, I’d have been ruthless with my red pencil and removed some of those speeches. (It’s an advantage of one of the minor plays that you can excise stuff without offending too many purists.)
Something else that doesn’t work so well these days are the plays dodgy sex and racial politics. When Proteus falls in love with Sylvia and out of love with Julia he says “And Silvia — witness Heaven, that made her fair!— / Shows Julia but a swarthy Ethiope. / I will forget that Julia is alive”. However, it’s foolish to expect a sixteenth century play to conform to modern standards.
I thoroughly enjoyed the production, especially the performances by Pearl Chanda (Julia), Nicholas Gerard-Martin (Thurio), whose serenade scene was very funny, and Michael Marcus (Valentine). Honourable mentions, too, for Sarah MacRae (Silvia) and Martin Bassindale (Speed). The outlaws were also amusing. It’s also beautifully staged, with enough physicality and dark moments to carry the preposterousness of the plot – no twins or shipwrecks, but we do get a woman dressed as a man and instantaneous reversals of character.
An excellent RSC directorial debut from Simon Godwin. One small niggle: the first half was very long – almost two hours by my watch.
I mused about this on stage at Fronteers 2013, and was reminded of it when reading Stephanie Reiger’s excellent slidedeck The future of media queries?, specifically slide 42 which I reproduce with Stephanie’s permission.
Stephanie suggests a mechanism of telling a user agent to render a navigation list as a native component, so it looks native across a range of devices, because it is native. (We could bikeshed about the markup and whether it should be in the CSS, but that doesn’t matter.)
I get that developers want their sites to appear native on the host device. Presumably users like native feel, too; there’s a reason why users show a huge preference for native apps over web apps, and one of those reasons is that native apps
allow the user to use device-specific hand gestures. Android and iOS are gradually developing different conventions for interaction, and a native app responds the way its user expects. User Experience Stack Exchange
So Stephanie’s idea makes perfect sense to me.
But what puzzles me is the fact that for ages designers and developers have also desperately tried to style away native controls. For example, recently Nicholas Zakas said
Full video game engine with 3D rendering and real-world physics in a browser? Yes. Ability to style <select> dropdowns in a browser? No.
— Nicholas C. Zakas (@slicknet) July 2, 2014
and was retweeted hundreds of times. Nicholas isn’t wrong to want this, and this wish isn’t new; when Safari first came out, designers were close to burning their moleskines because they couldn’t make buttons in corporate orange and heliotrope. When I first started showing HTML5 form controls at conferences, without fail I’d be asked how they can be styled. There are endless articles and scripts that painstakingly take real selects, hide them more or less accessibly, then recreate them so they don’t look native on any device.
But why this urge to re-style page elements that end-users are familiar with? You’ll be shocked to learn that I’m not actually trained as a designer – so what am I failing to understand? Or is it that we love native look and feel, except when we don’t?
UPDATE 21 July 2014: Aaron Gustafson wrote an interesting response to my post: The “Native” vs. “Stylable” Tug of War.
- Grid Style Sheets – “GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout”. Imagine if this were not a polyfill, but baked into the browser, with normal CSS as a fallback.
- CSS will-changeプロパティについて知っておくべきこと – Japanese translation of Sara Soueidan’s CSS will-change article
- Net neutrality: what it is and why you should care (in comic – ahem, “graphic novel” – format)
- Resource Hints – draft spec defines preconnect, preload, prefetch, and prerender hints that the developer, or the server generating or delivering the resources, can use
to optimise performance
- Unfashionably profitable – Rachel “Grandma” Andrew explains why her successful business relies on PHP rather than something cool.
- Web 2024 – A response to Robin Berjon’s post – Mozilla’s Magical Mr Marcos Manifest dabbles in dystopian standards visions.
- Native Versus Web: A Moment In Time – “the web represents independence from platform owners. It offers incredible freedom to build what you to want build, and to ship when you are ready to ship, without any gatekeepers.”
- Pinboard Turns Five – “I enjoy the looking-glass aspect of our industry, where running a mildly profitable small business makes me a crazy maverick not afraid to break all the rules.”
- Bad Voltage podcast – “an amusing take on technology, Open Source, politics, music, and anything else we think is interesting”
- School aged children who were lied to were more likely to lie and cheat themselves. via the Useful Science blog
- Lettuce See the Future: Japanese Farmer Builds High-Tech Indoor Veggie Factory – veg grows 2.5 times faster, waste down from 50% to 10% of harvest, water usage to just 1 percent of the amount needed by outdoor fields
- Song: The Ballad of the Printer ♪ by the inimitable @ourmaninjapan
(I was sent a free ebook of this title. That hasn’t influenced my review. This ebook is published by Smashing Magazine and costs €10.95. There’s a sample chapter available. I have no financial connection with the publisher or author.)
When I read about this book I was excited to read it. I don’t need Yet Another Accessibility Book (I co-wrote one a long time ago) but wanted something that delves deeply into WAI-ARIA and how it interacts with HTML5 and assistive technologies. As this book’s blurb says “the underlying theme of this book is about making the interactivity of web applications include keyboard and screen reader users”, it seemed like the book for me. It’s also tech-reviewed by Steve Faulkner who’s my go-to Bogan for practical accessibility information, so I was pretty sure I could trust it.
WAI-ARIA is one of the vital specifications for making the web accessible. There are three problems with using it, though: firstly, the spec is hard to read and understand, even in the context of specs’ inherent indigestibility; secondly, it’s hard to understand how its concepts intertwine with other specs like HTML and, thirdly, most developers don’t use assistive technologies so are unable to understand or test the output of their ARIA pages.
Therefore, I greatly appreciated that author Heydon Pickering is a developer, so keeps the book practical. ARIA is used, in conjunction with markup and script in situations that you’d really encounter. The problem to be solved is elucidated, and the output is clearly explained. It goes deep, too; I learned a great deal and plan to re-read it soon.
It’s a short book (but quite dense) and Heydon’s prose style is clear and occasionally humorous. But don’t let that fool you; this is an important book because it’s the only one that thoroughly explains the technical merits and use of ARIA (and doesn’t browbeat the reader about accessibility).
Without hyperbole: every developer should read this book, and put its techniques into practice. Now.
- HTMLHint is a Static Code Analysis Tool for HTML, you can use it with IDE or in build system.
- Web 2024 – interesting speculation from HTML5 co-editor and W3C’s VP of Imagineering, @robinberjon
- getting touchy – an intro to touch and pointer events by @patrick_h_lauke (Slides)
- Manual Opera Install Instructions – If Opera for Linux isn’t available on yr distro yet, @ruari wrote this unofficial guide to manually install it
- Forced Resignation – more drama in TAGville: Alex Russell resigns, invites W3C’s Blackwater-contractor security guards to bar him from meets, then chains himself naked to the CSS spec.
- Facebook and the button of happiness – by @sil
- Pixels are expensive – “How pixels get onto your users’ screens is something you should know about” says Google’s Paul Lewis
- IndexedDB is finally something by Tomomi Imura (Open Web advocate and front-end engineer)
- Structuring, Grouping, and Referencing in SVG – The <g>, <use>, <defs> and <symbol> Elements by Sara Soueidan
- Takeaways: main opportunities for further collaboration – the four U.S. browser vendors (each of which also makes a phone OS) got together to discuss the web platform. Yay. But Blink and WebKit decide that Pointer Events smell. Boo.
- Chromium: Remove
position:sticky– but do not fret, my sticky-lovin’ chums; it’ll be back “Once we’ve got our scrolling and compositing house in order”
- Google I/O 2014 – Bridging the gap between the web and apps – 48 min video of Jank Architect and Lexii Russell explaining Service Workers. (Don’t miss Jank’s extraordinarily frank admission at 21 min 20 secs).
- Android, Android, Android: watch Google I/O 2014 in under nine minutes
- I/O Thoughts – write-up of Google I/O conference from an iOS developer.
- Beautifully illustrated children’s books which break social norms – a kickstarter to raise £6000 by author and computer book publisher Amie Lockwood. “when was the last time you read a children’s story where the mother ran her own business; the father was the primary caregiver; there were children in wheelchairs; there were multi-racial households; there were same-sex parents or single parents”
- Inspirational fitness quotes superimposed over images of people getting drunk