HTML

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. Standards Opera 14 for Android 2.3+ released – spanking the Android stock browser and sending it to bed, with Chrome 26, @supports, webGL Building The New Financial Times Web App: A Case Study – loads of good stuff in here, including a look at performance of Flexbox layouts Client Hints – Google proposal to send a header with device resolution, viewport size, touch-enabled flag etc. Explanatory presentation The Web Manifest – Mozilla’s Mounir Lamouri on the Moz proposal to make AppCache better, and Google’s proposal Navigation Controller Mobile Accessibility Workshop by Henny Swan (BBC) Fetch – “The Fetch standard defines the overall architecture for obtaining resources given a URL and a set of parameters.” IE10, Metro, and Media Queries – by Adrian Roselli Getting touchy – an introduction to touch events – Patrick Lauke’s excellent talk at Sud Web / Avignon 17.05.2013 Extend the Web Forward by Yehuda Katz Break the page – “an online periodical about the future and philosophy of the web” Web Performance APIs Rapidly Become W3C Recommendations HTML Imports – draft of one of the Web Component suite, allowing import of HTML blocks to facilitate code re-use FreedomHTML is a profile of HTML without the DRM-enabling Encrypted Media Extension, because ignoring it makes it go away Gathering the Web tribes together for the common good – Dion Almaer Designing CSS Layouts With Flexbox Is As Easy As Pie by web cleverchap/ international love machine David Storey Industry 10% of notebooks sold in first quarter of 2013 have touchscreens Why is Facebook losing active users in Nigeria? Teens Are Turning Away from Facebook Because Tumblr Is Real, and Parent-Free The new Flickr: Goodbye customers, hello ads – Change, eh? Always bad, especially on a static medium like the Web 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.” Meanwhile, outside our Web hipster bubble, “nearly 15% of all new enterprise app functionality is written in COBOL“ Misc Clippy.js – “Clippy.js is a full Javascript implementation of Microsoft Agent (AKA Clippy and friends), ready to be embedded in any website.”

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 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). We have the srcset attribute, with its wildly unintutive syntax, “ready for first implementation”, so supported nowhere yet. It also doesn’t satisfy the art direction use case. 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? There are a couple of nasty hacks. Firstly, have 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 s, and take advantage of media queries on the child element to send differently sized images. Ian Devlin dreamed this up, and it’s evil genius – except that file sizes increase and doesn’t have an alt attribute, so the “images” are therefore inaccessible. A similarly inaccessible technique for webkit browsers is simply to use a element instead of and set an image-set background-image in CSS. Don’t do this; it’s inaccessible, and is single-engine. A brilliant albeit somewhat hacky idea is Estelle Weyl‘s clown car technique. This pulls in a SVG image that embeds images encoded as data URLs, each surrounded by media queries. This has the advantage of removing presentational breakpoint information out of the HTML. The downside to this is that you need to encode images (to reduce http requests), so changing an image isn’t as simple as replacing it on the server, and there isn’t anywhere to hang alternate text. 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. 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. Fingers crossed.

RT @iheni: Now with a fixed link: My #accessu2013 Mobile Accessibility slides:

As happened last year, the third week of June 2013 sees several important collocated meetings relevant to the public sector's use of ICT. The centerpiece is the European Commission's Digital Agenda Assembly, a series of high level workshops and plenary sessions focused on digital skills, entrepreneurship and growth. The event is being held in Dublin as Ireland is the current holder of the rotating European Presidency and puts many key players in the same place at the same time providing an excellent opportunity for other meetings to be scheduled. W3C is involved in two such meetings. First, the Crossover Project's International Conference on Policy Making 2.0. This is the culmination of a research project to establish how ICT is transforming government and how it can be put to ever better use. Open data, big data, policy modeling, crowdsourcing, serious gaming and opinion mining are all aspects of this that are covered in detail in the Crossover Research Roadmap. This highly detailed document captures input from experts in many different fields and is likely to be highly influential in shaping research into future uses of ICT for governance and policy making. As well as the research roadmap the Crossover project will present a prize to the best policy making 2.0 application - submissions are open until the end of this week. After the DAA, attention turns to SEMIC - The Semantic Interoperability Conference 2013. The European Commission's ISA Programme is a major effort to increase interoperability between public sector systems across Europe. There are many strands to this initiative but from a W3C perspective it's been an important input to the Government Linked Data Working Group's vocabularies both in terms of development and implementation experience. That experience - of public sector bodies working within their national frameworks to deliver interoperable services across borders and across sectors - is at the heart of the SEMIC conference. Open data has had its first flush of excitement. Now the results of early implementations are in and we're looking at consolidation, greater interoperability, and building a more sustainable ecosystem that encompasses not just government data but scientific and cultural heritage data - and not all of it necessarily open. The events in Dublin next month are all part of the process that is shaping what W3C does next to ensure that the unique power of the Web is used to maximum effect when connecting governments and citizens. Expect more on that story in the coming weeks but for now, I urge anyone with an interest in these topics to head for Dublin in June.

The W3C Web Performance Working Group recently published three specifications as W3C Recommendations with full implementations from all major browser vendors, advancing developers’ ability to accurately measure the performance of Web applications and make the Web faster. Over the last three years, companies including Microsoft, Google, Mozilla, Intel, Facebook, and others have been working towards standardizing the Navigation Timing, High Resolution Time, and Page Visibility interfaces in the Working Group. Rapid adoption of these recommendations demonstrates what’s possible when the industry and community come together through the W3C. To make the Web faster, developers need the ability to accurately measure the performance characteristics of Web applications and the ability to effectively use the underlying hardware to improve the performance of their applications. To solve these problems, the Web Performance Working Group worked on 15 different specifications that address those issues. The table below shows the maturity level of all the specifications currently edited by the Working Group. Specification Editor’s Draft First Public Working Draft Last Call Candidate Rec Proposed Rec Rec Navigation Timing Sept 2010 Oct 2010 Jan 2011 Mar 2011 July 2012 Dec 2012 Resource Timing Sept 2010 May 2011 Aug 2011 May 2012 User Timing Oct 2010 Aug 2011 Sept 2011 July 2012 Performance Timeline July 2011 Aug 2011 Sept 2011 July 2012 High Resolution Time Feb 2012 Mar 2012 Mar 2012 May 2012 Oct 2012 Dec 2012 Page Visibility Apr 2011 June 2011 July 2011 July 2012 Feb 2013 May 2013 Display Paint Notifications May 2011 June 2011 Feb 2012 Navigation Timing L2 (NEW) Jan 2013 Jan 2013 Efficient Script Yielding June 2011 High Resolution Time L2 (NEW) Apr 2013 Beacon (NEW) Mar 2013 Resource Priorities (NEW) Apr 2013 Navigation Error Logging (NEW) Apr 2013 Resource Error Logging (NEW) Apr 2013 Prerender (NEW) The Navigation Timing, Resource Timing, User Timing, and Performance Timeline specifications help developers accurately measure the timing of the navigation of the document, fetching of resources on the page, and developer script execution. Prior to these APIs, this data wasn’t easily obtainable. Navigation Timing was published as a W3C Recommendation, and all major browser vendors support it. The other three interfaces are currently at the Candidate Recommendation stage awaiting two full implementations from browser vendors. IE10 is currently the only browser that implements all of these interfaces, however, other vendors are working on implementations. To ensure these performance metrics are measured in the most accurate way possible, the High Resolution Time specification allows developers to measure operations with sub-millisecond accuracy. This interface not only benefits accurate measurements of performance metrics, but also allows better frame rate calculations and synchronization of animations or audio cues. This interface has been published as a W3C Recommendation, with all major browser vendors implementing the performance.now() method defined in the specification. The Page Visibility API allows for programmatically determining the current visibility state of the page. Developers can use this data to make better CPU- and power-efficiency decisions, e.g., throttling down activity when the page is in the background tab. This specification has also been published as a W3C Recommendation, with all major browser vendors implementing it. The Timing Control for Script-Based Animations, and Efficient Script Yielding specifications help developers write more CPU- and power-efficient Web applications. The requestAnimationFrame API, from the Timing Control for Script-Based Animations specification, allows for creating more efficient JavaScri

Nearly six years ago, I set up a personal Jabber server using ejabberd.  This setup survived the server migration to Ubuntu 8.04 and 10.04.  This past weekend, I attempted to migrate that to a server running 12.04 and all I could get out of it was an erlang crash dump. A quick scan for successors turned up prosody. Configuration was as simple as adding a VirtualHost and setting allow_registration to true.

Last week we launched a remodeled Internet Explorer Developer Center (msdn.com/ie) to make it easier for developers to find the comprehensive documentation quickly. Based on your feedback, we’ve adjusted our site structure as part of a larger Windows Dev Center redesign in order to: Make it easier to find developer topics across versions of IE Find more comprehensive API documentation faster Learn best practices from developer guides, tutorials, and sample code We organized the new IE Dev Center into three main areas: Get Started Here, you can download IE, learn more about F12 developer tools, and access our Developer Guides and Compatibility Cookbooks to learn about what’s new and changed in the latest versions of IE. Plan Find inspiring ideas, tips on updating to Web standards, details on the browsing experiences of IE10 on Windows 8, useful info about going plug-in free, building adaptive and touch-ready sites, and integrating your site with Windows. Develop Access portal pages for Web platform features, our API reference, samples gallery, and community forums. The Develop section represents the heart of the IE library content. To help you find the content you need quickly, we reorganized our most highly-trafficked pages to bring together all the relevant resources on the same topic. With the new organization of the IE Developer Center, you don’t have to know which version of IE introduced or changed a feature in order to find all of our information about it. Instead, you can conveniently find our Dev Guide topics through an alphabetical list of the modern Web platform features supported by IE, or you can browse them thematically by area. Of course, we will continue to publish these same topics within the particular IE Dev Guide versions in which they were introduced. There are more improvements underway, but hopefully you’ll find the new IE Developer Center immediately more useful and usable. We’ll continue to listen to your feedback and look for ways to make our content easier to access and more relevant to the work you do. We welcome your feedback here in the blog or on the site. Erika Navara, Content Developer

Microsoft Security Bulletin MS13-037 - Critical This security update resolves eleven privately reported vulnerabilities in Internet Explorer. The most severe vulnerabilities could allow remote code execution if a user views a specially crafted Web page using Internet Explorer. An attacker who successfully exploited the most severe of these vulnerabilities could gain the same user rights as the current user. Users whose accounts are configured to have fewer user rights on the system could be less impacted than users who operate with administrative user rights. This security update is rated Critical for Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, and Internet Explorer 10 on Windows clients and Moderate for Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, and Internet Explorer 10 on Windows servers. For more information, see the full bulletin. Recommendation. Most customers have automatic updating enabled and will not need to take any

Since I became co-chair of the Tracking Protection Working Group in late 2012, we have faced a metaphorically-apt series of weather challenges for our Face-to-Face meetings: a record snowstorm in Boston in February, heavy snow for our Global Considerations meeting in Berlin in March, and even rain on the first day of our Face-to-Face meeting in Sunnyvale CA this week. I am pleased to report, however, that the sun came out for the third and final day of the Sunnyvale meeting. We spent two and a half days (and some evenings) fleshing-out the roadmap laid-out in our February meeting in Boston: to build a Tracking Protection standard that will fulfill our W3C charter and bring us to Last Call. In this we were partially successful: the TPE specification (expertly managed by my Co-Chair, Mattias Schunter) is all but completed; but consensus on full text for the compliance document remains elusive. With less than 10 weeks left before the final compliance spec is scheduled to enter Last Call, the stakeholders mus

Studies show that corporate websites are for the most part not designed for their usability on smart phones. Some companies provide native applications that users can install on the smart phones, but this is not a panacea. This situation is likely to get worse with an increasing range of devices and platforms. What's needed is more emphasis on the benefits of the Open Web Platform and responsive design techniques as a basis for applications that work effectively across desktop PCs, tablets, smart phones, connected TVs and so forth. Web technologies reduce the cost and increase the reach, avoiding the need to learn new programming languages and SDKs for each platform, and saving time and money by avoiding the overheads of native app stores. However, responsive design can be a little tricky to master and there is a need for improved awareness of best practices and for better design tools. As part of my work for the EU FP7 Serenoa project, I have been studying ideas for a new breed of design tools based upon mo