WebDev FeedHouse

W3C: WebCGM 2.1 is a W3C Recommendation

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/Graphics/WebCGM/WG/">WebCGM Working Group</a> has published a W3C Recommendation of <a href="/TR/2010/REC-webcgm21-20100301/">WebCGM 2.1</a>. Computer Graphics Metafile (CGM) is an ISO standard, defined by ISO/IEC 8632:1999, for the interchange of 2D vector and mixed vector/raster graphics. WebCGM is a profile of CGM, which adds Web linking and is optimized for Web applications in technical illustration, electronic documentation, geophysical data visualization, and similar fields. WebCGM aims to balance graphical expressive power on the one hand, and simplicity and implementability on the other. A small but powerful set of standardized metadata elements supports the functionalities of hyperlinking and document navigation, picture structuring and layering, and enabling search and query of WebCGM picture content. WebCGM 2.1 refines and completes the features found in WebCGM 2.0. Learn more about the <a href="/Graphics/">Graphics Activity</a>. </content>

W3C: Call for Review: XProc - An XML Pipeline Language Proposed Recommendation

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/XML/Processing/">XML Processing Model Working Group</a> has published a Proposed Recommendation of <a href="/TR/2010/PR-xproc-20100309/">XProc: An XML Pipeline Language</a>. This specification describes the syntax and semantics of XProc: An XML Pipeline Language, a language for describing operations to be performed on XML documents. Pipelines are made up of simple steps which perform atomic operations on XML documents and constructs similar to conditionals, iteration, and exception handlers which control which steps are executed. The group has produced an <a href="/XML/XProc/2010/02/ir.html">implementation report</a> Comments are welcome through 15 April. Learn more about the <a href="/XML/">Extensible Markup Language (XML) Activity</a>. </content>

W3C: Last Call: Web Security Context: User Interface Guidelines

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/2006/WSC/">Web Security Context Working Group</a> has published a Last Call Working Draft of <a href="/TR/2010/WD-wsc-ui-20100309/">Web Security Context: User Interface Guidelines</a>. This specification deals with the trust decisions that users must make online, and with ways to support them in making safe and informed decisions where possible. This document specifies user interactions with a goal toward making security usable, based on known best practice in this area. Comments are welcome through 31 March. Learn more about the <a href="/Security/">Security Activity</a>. </content>

W3C: Ontology for Media Resource 1.0, API for Media Resource 1.0 Drafts Published

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/2008/WebVideo/Annotations/">Media Annotations Working Group</a> has published Working Drafts of <a href="/TR/2010/WD-mediaont-10-20100309/">Ontology for Media Resource 1.0</a> and <a href="/TR/2010/WD-mediaont-api-1.0-20100309">API for Media Resource 1.0</a>. The former document defines the Ontology for Media Resource 1.0, a core vocabulary to describe media resources on the Web. It is defined based on a core set of properties which covers basic metadata to describe media resources. Further it defines syntactic and semantic level mappings between elements from existing formats. The ontology is supposed to foster the interoperability among various kinds of metadata formats currently used to describe media resources on the Web. The latter defines a client-side API to access metadata information related to media resources on the Web. Learn more about the <a href="/2008/WebVideo/">Video in the Web Activity</a>. </content>

W3C: Dr. Jeffrey Jaffe Named W3C CEO

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

<a class="imageLink" href="http://www.w3.org/People/Jeff/"> <img width="100" height="150" src="http://www.w3.org/2010/03/JeffreyJaffe_thumb.jpg" alt="Dr. Jeffrey Jaffe"/> </a> W3C today named <a href="/People/Jeff/">Dr. Jeffrey Jaffe</a> its new Chief Executive Officer. "Web technologies continue to be the vehicle for every industry to incorporate the rapid pace of change into their way of doing business," said Dr. Jaffe. "I'm excited to join W3C at this time of increased innovation, since W3C is the place where the industry comes together to set standards for the Web in an open and collaborative fashion." As W3C CEO, Dr. Jaffe will work with Director Tim Berners-Lee, staff, Membership, and the public to evolve and communicate W3C's organizational vision. The CEO is responsible for W3C's global operations, for maintaining the interests of all of the W3C's stakeholders, and for sustaining a culture of cooperation and transparency, so that W3C continues to be the leading forum for the technical development and stewardship of the Web. Read the <a href="http://www.w3.org/QA/2010/03/w3c_ceo_blog_first_posting_mar.html">CEO Blog</a> and learn more in the <a href="/2010/03/ceo-pr.html">press release</a>. </content>

W3C: Seven Documents Related to HTML Published

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

W3C published today seven documents related to HTML: <ul class="show_items"> <li><a href="/TR/2010/WD-html5-20100304/">HTML 5</a> and <a href="/TR/2010/WD-html5-diff-20100304/">HTML5 differences from HTML4</a>. In addition, some content that was part of the HTML 5 specification has been published in two new standalone drafts: <a href="/TR/2010/WD-2dcontext-20100304/">HTML Canvas 2D Context</a> and <a href="/TR/2010/WD-microdata-20100304/">HTML Microdata</a>.</li> <li><a href="/TR/2010/WD-html-markup-20100304/">HTML: The Markup Language</a>, a first draft. This document describes the HTML markup language and provides details necessary for producers of HTML content to create documents that conform to the language. By design, it does not define related APIs, nor attempt to specify how consumers of HTML content are meant to process documents, nor attempt to be a tutorial or "how to" authoring guide.</li> <li><a href="/TR/2010/WD-rdfa-in-html-20100304/">HTML+RDFa</a>, which defines rules and guidelines for adapting the RDF in XHTML: Syntax and Processing (RDFa) specification for use in the HTML5 and XHTML5 members of the HTML family.</li> <li><a href="/TR/2010/WD-html-bidi-20100304/">Additional Requirements for Bidi in HTML</a>, a first draft. Authoring a web app that needs to support both right-to-left and left-to-right interfaces, or to take as input and display both left-to-right and right-to-left data, usually presents a number of challenges that make it an especially laborious and bug-prone task. Some of these are due to browser bugs, but some can be traced to a gap in the specification of the bidirectional aspects of a given HTML feature. And some of these challenges could be greatly simplified by adding a few strategically placed new HTML features. This document proposes fixes for some of the most repetitive pain points.</li> </ul> All documents were published by the <a href="/html/wg/">HTML Working Group</a> except the last one, published by the <a href="/International/core/">Internationalization Core Working Group</a>. </content>

W3C: Voice Extensible Markup Language (VoiceXML) 3.0 Draft Published

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/Voice/">Voice Browser Working Group</a> has published a Working Draft of <a href="/TR/2010/WD-voicexml30-20100304/">Voice Extensible Markup Language (VoiceXML) 3.0</a>. This document specifies VoiceXML 3.0, a modular XML language for creating interactive media dialogs that feature synthesized speech, recognition of spoken and DTMF key input, telephony, mixed initiative conversations, and recording and presentation of a variety of media formats including digitized audio, and digitized video. See the <a href="/TR/2010/WD-voicexml30-20100304/diff.html">diff-marked version</a> of changes since the previous draft, and learn more about the <a href="/Voice/">Voice Browser Activity</a>. </content>

W3C: Security Drafts Update: XML Signature Syntax and Processing 2.0; Canonical XML Version 2.0

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/2008/xmlsec/">XML Security Working Group</a> has published two Working Drafts: <a href="/TR/2010/WD-xmldsig-core2-20100304/">XML Signature Syntax and Processing Version 2.0</a> and <a href="/TR/2010/WD-xml-c14n2-20100304/">Canonical XML Version 2.0</a>. The first specifies XML syntax and processing rules for creating and representing digital signatures. XML Signatures can be applied to any digital content (data object), including XML. The second is a major rewrite of Canonical XML Version 1.1 to address issues around performance, streaming, hardware implementation, robustness, minimizing attack surface, determining what is signed and more. It also incorporates an update to Exclusive Canonicalization, effectively a 2.0 version, as well. Learn more about the <a href="/Security/">Security Activity</a>. </content>

W3C: Call for Review: XML Linking Language (XLink) Version 1.1 Proposed Recommendation

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/XML/Core/">XML Core Working Group</a> has published a Proposed Recommendation of <a href="/TR/2010/PR-xlink11-20100225/">XML Linking Language (XLink) Version 1.1</a>. This specification defines the XML Linking Language (XLink) Version 1.1, which allows elements to be inserted into XML documents in order to create and describe links between resources. It uses XML syntax to create structures that can describe links similar to the simple unidirectional hyperlinks of today's HTML, as well as more sophisticated links. Comments are welcome through 31 March. Learn more about the <a href="/XML/">Extensible Markup Language (XML) Activity</a>. </content>

W3C: Call for Review: Speech Synthesis Markup Language (SSML) Version 1.1 Proposed Recommendation

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/Voice/">Voice Browser Working Group</a> has published a Proposed Recommendation of <a href="/TR/2010/PR-speech-synthesis11-20100223/">Speech Synthesis Markup Language (SSML) Version 1.1</a>. The Speech Synthesis Markup Language Specification is designed to provide a rich, XML-based markup language for assisting the generation of synthetic speech in Web and other applications. The essential role of the markup language is to provide authors of synthesizable content a standard way to control aspects of speech such as pronunciation, volume, pitch, rate, etc. across different synthesis-capable platforms. SSML 1.1 improves SSML 1.0 support for a broader set of natural (human) languages. Known implementations are documented in the <a href="/Voice/2009/ssml11-ir/">Implementation Report</a>, along with the associated test suite. Comments are welcome through 23 March. Learn more about the <a href="/Voice/">Voice Browser Activity</a>. </content>

W3C: Candidate Recommendation Updated for Timed Text Markup Language (TTML) 1.0

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/AudioVideo/TT/">Timed Text Working Group</a> has published an updated Candidate Recommendation of <a href="/TR/2010/CR-ttaf1-dfxp-20100223/">Timed Text Markup Language (TTML) 1.0</a>. TTML is a content type that represents timed text media for the purpose of interchange among authoring systems. Timed text is textual information that is intrinsically or extrinsically associated with timing information. This an updated document based on implementation experience; see the <a href="http://www.w3.org/TR/2010/CR-ttaf1-dfxp-20100223/#change-history-cr2-to-cr3">list of changes</a>. A <a href="http://www.w3.org/2008/10/dfxp-testsuite.zip">test suite</a> for TTML is available, along with its <a href="http://www.w3.org/2008/10/dfxp-test-coverage.html">coverage report</a> and a <a href="http://www.w3.org/2009/05/dfxp-results.html">preliminary implementation report</a>. The test suite and implementations are work in progress and may not reflect all of the changes of this document. Learn more about the <a href="/2008/WebVideo/">Video in the Web Activity</a>. </content>

W3C: Second Web Compatibility Test for Mobile Browsers Released

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/2005/MWI/Tests/">Mobile Web Test Suites Working Group</a> has <a href="/2005/MWI/Tests/blog/2010/02/09/wctmbv2">just released</a> a <a href="/2010/01/wctmb2/">brand new Web Compatibility Test for Mobile Browsers</a>. Based on the same idea of evaluating support of a number of Web technologies at a glance as in the <a href="/2008/06/mobile-test/">first Web Compatibility Test published in July 2008</a>, this second version features a number of more recent technologies that promise to make Web browsers more powerful, in particular on mobile devices. Learn more about the <a href="http://www.w3.org/Mobile/">Mobile Web Initiative</a>. </content>

W3C: W3C Community Invited to Discuss Future Standards for Model-Based User Interfaces

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

W3C announced today a <a href="/2010/02/mbui/cfp">Workshop on Future Standards for Model-Based User Interfaces</a>, 13-14 May 2010 in Rome Italy. Participants will examine the challenges facing Web developers due to variations in device capabilities, modes of interaction and software standards, the need to support assistive technologies for accessibility, and the demand for richer user interfaces. Discussion will focus on reviewing research on model-based design of context- sensitive user interfaces in relation to these challenges, and the opportunities for new open standards in the area of Model-Based User Interfaces. W3C Membership is not required to participate; anyone who satisfies the <a href="/2010/02/mbui/cfp.html#requirements_for_participants">participation requirements</a> may attend as long as space permits. Statements of interest are due 2 April. Please see the <a href="2010/02/mbui/cfp">Call for Participation</a> for more information. </content>

W3C: RIF Production Rules Dialect Revised; Last Call for Comments

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

During the <a href="/News/2009#entry-6545">implementation phase</a> of the Rule Interchange Format (RIF), the <a href="/2005/rules/wiki/RIF_Working_Group">Working Group</a> discovered a problem with the design of the Production Rules Dialect. This problem is addressed with a new <a href="/TR/2010/WD-rif-prd-20100211/">Last Call Working Draft</a> that changes the way actions are handled to more closely match existing production rule engines. Please send comments and <a href="/2005/rules/wiki/How_to_Submit_an_Implementation_Report">RIF implementation reports</a> to <a href="mailto:public-rif-comments@w3.org">public-rif-comments@w3.org</a>. Last Call comments should be sent before 5 March. Learn more about the <a href="/2001/sw/">Semantic Web</a>. </content>

W3C: Call for Review: XML Entity Definitions for Characters Proposed Recommendation Published

W3C Staff — Wed, 10 Mar 2010 20:00:18 +0000

The <a href="/Math/">Math Working Group</a> has published a Proposed Recommendation of <a href="/TR/2010/PR-xml-entity-names-20100211/">XML Entity Definitions for Characters</a>. This document presents a completed listing harmonizing the known uses in math and science of character entity names that appear throughout the XML world and Unicode. This document is the result of years of employing entity names on the Web. There were always a few named entities used for special characters in HTML, but a flood of new names came with the symbols of mathematics. Comments are welcome through 11 March. Learn more about the <a href="/Math/">Math Activity</a>. </content>

Vitamin: Setting rather than Resetting Default Styling

Thierry Koblentz — Wed, 10 Mar 2010 14:00:05 +0000

Editors Note: In his first article for Think Vitamin Thierry Koblentz discusses the issue of “resetting” your CSS.

“base.css” versus “reset.css”

For a long time, the very first line in my styles sheets was:

* {padding:0;margin:0;}

This simple rule was very convenient as it leveled margin and padding values of all elements across browsers. This “hard reset” was short and simple and it had the advantage of belonging to the main styles sheet rather than being an external file.

Later, this technique was denounced as bad practice as it makes the rendering agent style (check) every single element in a document. It also triggered issues with form controls, but authors were used to specifying styles for these.

Then came “reset” styles sheets. These files go way beyond resetting margin and padding. The most complete in terms of properties/elements involved has to be Eric Meyer’s. It “unstyles” everything you could think of, from a to var.

Authors start with a clean slate. From there, they most often write rules to style elements that were originally styled by the browser’s styles sheet, but overwritten by the reset file. In short, many elements are styled three times:

by the browser’s styles sheet (see User Agent Styles Sheets).
by the “reset” file.
by the author’s styles sheet.

Criticism of this Approach

Jonathan Snook, Jens Meiert and others have “criticized” this approach, saying more or less that there was no use for a “middle man”. On Jen’s site, “randomCommenter” summarizes the issue pretty well when asking: "Wouldn't a well written base style sheet render a reset style sheet redundant and therefore useless?"�

Actually, I believe Eric Meyer himself hints in that direction when he says:

"I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness."�

In any case, people should at least evaluate the rules in these reset files before copying and pasting their content. For example, if one authors documents as HTML 4.01 Strict! one may safely remove from a reset styles sheets any reference to elements like:

iframe
applet
strike
u
font
s
center

My Base Styles Sheet

Following the idea of “tweaking” a reset file, I came up with this “base styles sheet“. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well.

What does it do that a reset doesn’t?

It fixes a few things

It forces a gutter for a vertical scrollbar (when content is too short to require a scrollbar)
It includes an IE button width fix
It removes “sticky” outline (not in Internet Explorer though)
It prevents “mysterious gaps below images“
It prevents descenders letters in legend from being cut-off in Internet Explorer
It vertically aligns checkboxes and radio buttons with their label
It sets a default color background for the document with no shrink wrap effect on body¹

It styles lists by default

It is easier to remove markers on lists than to style them. So, by default, lists are styled to show indentation and markers depending on hierarchy and list types. But the styles sheet contains a class to reset this styling. When applied to a UL or OL – it will remove markers and left margin on their items.

It creates vertical “gutters”

Left and right padding are applied to most block-level elements to create vertical gutters. This allows to build layouts without having to use “padding” on main containers which helps to produce designs that do not break in IE 5 (or IE 6 in quirks mode) as width and padding values are not mixed. This is also an alternative to using non semantic wrappers as a workaround to avoid mixing these properties.

Why using padding instead of margin to create that space?

Using padding allows to paint elements’ background all across their parent container. Stretching from one edge to another. When this behavior is not seeked, for example when styling a heading with a bottom border that should be no wider than what appears to be the “content box”, authors can use a class (in the sheet already) to revert that styling (swaping padding values with margin values).

It creates horizontal white space too

Via margin – By default, vertical space is obtained through top margin. A top margin of 1.2em is applied to most block-level elements.
Via padding – Authors can uncomment two rules in the styles sheet to create spacing using padding instead of margin. The advantage of this method is that it prevents two common “issues”:
- Collapsing margins - Margins will not collapse since elements are not styled with vertical (top/bottom) margins.
- Loss of top margin when clearing floats – When an element clears a float, it “loses” its top margin, but that gap is preserved if top padding is used instead.

What else?

Rules in this base styles sheet are well commented and values that one would like to change (font-family, font-size, line-height, color, padding, etc.) are placed near the top of the file.

You can download base.css with comments or a minified version. My advice is to use these rules as a starting point to create your own styles sheet. Do not link to an external file to then override property values, instead, add, remove and edit anything you want to end up with a main styles sheet for your own project(s).

My base.css styles sheet is a work in progress. If you play with it, and if you see things that should not belong in there or to the contrary things that should be included, please join the discussion.

¹ The YUI reset styles sheet sets a background-color on html. This styling makes the browser paint the background of body no taller than its content instead of matching the viewport’s height (this is by specs). I believe a future release of YUI reset will include this change.

Microsoft - IEBlog: Working with the HTML5 Community

ieblog — Tue, 09 Mar 2010 21:23:00 +0000

We're always excited to engage with members of the W3C including the developers of other browsers as well as the broader web development community to help shape the direction of emerging Web standards, particularly HTML5. This includes participating in events like TPAC, which we wrote about in November, and on-going engagement with various working groups. Patrick recently talked about joining the SVG working group, and I'd like to share a brief list of other happenings on the way to making HTML5 well-defined, well-tested, and accessible:

Providing feedback on HTML5
Tony Ross, Internet Explorer Program Manager, and Jonas Sicking of Mozilla, led a discussion about extensibility in HTML5 at TPAC after our initial submission. While the working group hasn't resolved the issue yet, we think the event helped inform everyone and generate the different proposals submitted since.
Testing HTML5
Kris Krueger, Internet Explorer Test Lead, was appointed facilitator of the W3C HTML5 Testing Task Force. The task force has set up necessary infrastructure like a wiki, Bugzilla, a work item tracker, and CVS repository for test cases. With that in place, they've started to review DOM Level 2 HTML test cases to use as the start of HTML5 testing. As with CSS2.1, we think a good test suite is critical to ensuring a specification results in interoperable implementations.
Ensuring new specifications enable accessibility
We care deeply about an accessible web so besides implementing accessibility-focused browser features, we're working with Apple, IBM, and other interested parties to ensure the new HTML5 <canvas> and <video> elements have great accessibility support so everyone can use sites leveraging them. This work is driven by the Accessibility Task Force. Together, we're working on <canvas> HTML prototypes to use as "�proof of concepts' to ensure the feature is well-designed, as discussed in a recent teleconference.
Indexed DB Proposal
Together with Mozilla, we're excited about a new design for local storage called Indexed DB. We think this is a great solution for the web. Look for another post with more information about this proposal. In the meantime, you can read the latest working draft.
DOM Level 3 Events
Travis Leithead, Internet Explorer Program Manager, continues to help close down open issues with the latest editor's draft. It's been awhile since the working group published the last working draft and the group plans to publish an update soon that will improve clarity for implementers and web authors alike. On a recent teleconference, we noted that DOM Level 2 Events was published as a Recommendation nearly 10 years ago; it's exciting to have the next milestone in sight!

Finally, you can read an interview with Paul Cotton from Microsoft and co-Chair of the W3C HTML Working Group on the W3C Blog.

Adrian Bateman
Program Manager

Vitamin: Freelancing Together

Matthew Smith — Tue, 09 Mar 2010 14:00:06 +0000

Editors Note: In his first article for Think Vitamin Matthew Smith, Principal Designer at Squared Eye Design, discusses the benefits, risks and infrastructure required to work effectively with fellow freelancers.

Working Alone

Working alone can be great. There's a pleasant autonomy of knowing exactly what you're doing and when. There are few unknowns. You work directly with the client and don't have to worry about managing others.

In the past I've done everything from branding, strategy, IA, design, front-end dev, and CMS integration on a single project. These days, if I'm working alone, its usually providing PSDs to a client who has an internal dev team or something similar. I love it!

These projects are less complex than my collaborative projects, so life is simple. But if I limit myself to the size and quantity of projects that I'm able to complete all on my own, my business will stagnate. If I am unwilling to pursue entrepreneurship and management, I will forever remain a technician.

Be a Jumbo Shrimp

Growth isn't for everyone, but for me it's a matter of defining my future. I want to be a Jumbo Shrimp "� a big presence in a niche area. I don't want to simply design interfaces for the next 30 years; I want to change the world "� even if only in a small way. Growth can magnify my ability to directly affect positive change.

Working Together

By partnering with other professionals, I can grow my business and take on projects that can't be harnessed by one man. A huge beer one man can tackle, but a huge project is another undertaking all together. Forming partnerships with others can be overwhelming at first.

But with the right team and a poorly paid talented project manager, you can take on more challenging, higher paying projects. Bolster the success of your partnership (and avoid massive cardiac arrest) by setting the stage with a healthy understanding of the risks and the infrastructure required to harvest the bountiful benefits.

Risks

As with any great opportunity, you'll find an inherent level of risk involved. The normal stuff applies "� what if someone gets sick, eaten by a whale, or discovers that working for you is a level of ass pain they never before imagined? What happens if you have a different work ethic than others on your team?

No one to manage the project

A project lacking management can quickly descend into the hells of scope creep. When that happens, you may be forced to nominate someone Survivor-style to run point. Managing might not be their strong suit or even what they want to be paid for. This can lead to real frustration within your team, and if combined with alcohol and firearms "� there will be blood.

Your team is flat

It doesn't matter if its soda, tires, or teams "� flat is bad. If you don't know who's in charge of your project, it's destined for confusion. If you prefer stress and direct path to insanity, then I highly recommend no leadership whatsoever.

No consequences or incentives

If you don't have a clear set of consequences and incentives to encourage your team to stay unified and on target, you're likely to end up with a wayward child on your hands (I want those sweeties!). Recovering from team disunity or distraction costs valuable energy, which distracts from the project goals.

Infrastructure

There are a few areas that aren't quite risks, if they are well defined and everyone has a clear understanding of them, they are as follows:

Choose a project manager

Once you've chosen the right PM, does everyone agree that he has the authority to tell them what to do, and when? Making sure that everyone is ready to receive instruction from your PM and that everyone trusts the PM is critical to keeping the project's flow. If my PM told me to stop enjoying beer, I'd fire him, so your PM's authority should have some boundaries.

Give your team a hierarchy

A flat system will cause confusion and delay. It's important that there is clear delineation of responsibility and authority. Sometimes this may coincide with who brought the project to the table, or it may be defined by who is the better leader.

Whatever the case, make sure you have a clear chain of command. Let your PM define the workflow of your partnership. Ideally everyone has moments of overlap and involvement in every stage of the project so that you aren't simply running a relay race.

Choose incentives or consequences to govern your team

Finding the right incentives and consequences helps you cover your risks properly to ensure that everyone has the right level of stake in the project and their reputation. Done well, this is a document that everyone can sign on to, so that if the project goes south because of someone's error, it's their agreement with the document that hands out the punishment "� not one of your team.

For our partnership, one incentive/consequence is very simply the ability to be re-hired on the next project, or fired from the current one dependent on whether you're meeting the project expectations or not. We also spank, though for some in our coworking office that's an incentive, so we use it sparingly.

Benefits

You can now safely move about the cabin, you have a project manager on duty

A PM's responsibilities and authority can give you room to breathe. It will also allow you to do what you do best "� whether that's IA, design, tweeting, or development. It also bears mentioning that your clients will experience a higher level of care and organization. And if you depend on word of mouth like we do, this is one of your greatest assets.

Organizational clarity leads to total work nirvana

Okay, that's overkill, but you and your clients will notice the efficiency that grows from a clear structure of authority. It allows your team to operate as a congruent force with a head, rather than an unruly band of independent freelancers.

Great incentives and real consequences keep the house clean

I hate conflict as much as anybody. If you put together a solid document with both incentives and consequences, you'll find your projects and your team keep clean and free from unmanageable conflict. Everyone on your team wants to succeed, make money, and have a big party when every project's done "� this will make it so much easier.

In Summary

Bringing a team of freelancer's together to provide a solid end product to a great client is profitable adventure and a joy. The Blue Sky Resumes project was the most ambitious foray into collaboration for our team.

The experience had a high learning curve, some of which I'm hoping to spare you from. If you move in this direction, you'll see failures along the way; it'll be as tough as it is fun. But the work you'll get to engage in, and the great people you get to work with are worth every moment.

Resources

To Read

Army of Davids (Good business oriented abstract read)
Noded (I've not read this, but ought to)

Other Collaborative Freelancers

Coworking Is a Good Place to Start

456 Berea St: Seven HTML related working drafts published

Roger Johansson — Mon, 08 Mar 2010 19:05:30 +0000

On March 4, the W3C published no less than seven new or updated working draft documents related to HTML:

Read full post

Posted in (X)HTML, HTML 5.

QuirksMode: HTML5 apps

Mon, 08 Mar 2010 14:45:15 +0000

Right now nobody’s interested in a mobile solution that does not contain the words “iPhone” and “app” and that is not submitted to a closed environment where it competes with approximately 2,437 similar mobile solutions.

Compared to the current crop of mobile clients and developers, lemmings marching off a cliff follow a solid, sensible strategy. Startling them out of this obsession requires nothing short of a new buzzword.

Therefore I’d like to re-brand standards-based mobile websites and applications, definitely including W3C Widgets, as “HTML5 apps.” People outside our little technical circle are already aware of the existence of HTML5, and I don’t think it needs much of an effort to elevate it to full buzzwordiness.

Technically, HTML5 apps would encompass all websites as well as all the myriads of (usually locally installed) web-standards-based application systems on mobile. The guiding principle would be to write and maintain one single core application that uses web standards, as well as a mechanism that deploys that core application across a wide range of platforms.

Vitamin: Getting Started with Yahoo! GeoPlanet Explorer

Christian Heilmann — Mon, 08 Mar 2010 14:00:04 +0000

Where are you and what is around you?

Geolocation is a hot topic. Google just got the patent on geolocated advertising, mobile phones allow us to pinpoint ourselves on the planet and find things nearby and with augmented reality applications we can even find our way by filming our surrounding and finding hidden treasures by moving our mobile around. Using geolocation as a developer is quite easy, you can do a few things:

If you are building something in a social network, you can get the geographical location from the user’s profile.
If you work on a certain mobile platform (Android, WebOS, iPhone) you get APIs to detect the current location.
If that is not an option you can use the W3C geo location API in browsers that support it.
If everything else fails you can guess the visitor’s location from their IP number.

That is the where, but how to know what is around me?

Knowing the location is one thing, but what if you want to know more about the area? What about the geographical hierarchy? What part of the city/country are you in and which other geographical and administrative areas are nearby?

All of this has been available for you for quite a while. The GeoPlanet API and dataset released by Yahoo! has been out for a while but did not quite get the love from the mainstream developer crowd it deserves. The geo hackers, on the other hand already love it to bits and helped make it more accurate by providing feedback.

To make it a bit easier for you to understand what the GeoPlanet API allows you to do, I’ve put together the GeoPlanet Explorer – a tool that lets you explore all the GeoPlanet data in an interactive way:

The Geoplanet Explorer uses three tools: YQL for accessing and filtering data, YUI3 for the rich interaction and CSS layout, Yahoo Maps for display and PHP to glue all of that together. You can get the full source code on GitHub.

Simplifying matters using woeid

One big problem of geo location is ambiguity. If you have a location with latitude and longitude you can pinpoint it on the globe. You don’t know what it is though. The centre of a certain county, city and a point of interest could share the same latitude and longitude, but they are actually totally different things.

To fix this problem, Yahoo! a long time ago introduced the Where on Earth ID (or short woeid) which is a number that defines a place with its geographical location and describes what it is. For example my neighbourhood in London has the woeid of 36239 and that means I can get the following information from it when querying the GeoPlanet API:

Stoke Newington (Suburb):
- Country: United Kingdom
- WOEID: 36239
- Administrative:
  - England (Country)
  - Greater London (County)
- Localities:
  - London (Town)
  - Stoke Newington (Suburb)
- Postal N16 (Postal Code)
- Location (lat/lon): 51.561199, -0.082980
- Bounding Box: NE 51.577190, -0.058070 SW 51.546692, -0.092380

The bounding box information is very useful for displaying this information on a map as it shows you which points need to be visible in order to see the whole place.

There is just something pretty about having a number instead of a lat/lon pair which is why woeid is rapidly becoming a standard. Flickr supported it for quite a while, Dopplr uses it under the hood, the Yahoo! Weather API understands it and soon Twitter will also use it for geolocating content in an unambiguous way (right now there is only support in the Twitter Trends API).

So how could you use this for your own products?

There are a lot of ways you can use the geo tools by Yahoo! in your own solutions – by far the easiest is using YQL to access the data. This, for example allowed me to write the addmap.js solution:

Using this you can can easily take the content of a page element with a certain ID and add a map of the locations it “talks about” to the document:

<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
<script>
addmap.config.mapkey = 'YOUR_API_KEY';
addmap.analyse('content');
</script>

The API key is needed for the Google maps, not for YQL. YQL in this case under the hood uses Placemaker which is an API that finds geographical content in URLs or texts.

YQL and the geo tools offer you some other interesting options:

Geographical locations in texts/urls/RSS feeds

By using the Placemaker table in YQL you can extract geographical locations from a texts or a source on the web:

select * from geo.placemaker where documentContent =
"Hi, I am Chris, I live in London but actually I am from Germany"
and documentType="text/plain" and appid=""

This finds both “London” and “Germany” as geographical locations. You can see the result of this here as an XML file. You will find places and references. Places are what has been found and references where it was found. The start and end elements describe the character location in the whole string.

Placemaker also takes feed and web site URIs and finds the locations in them for you. For example to see the locations mentioned in my portfolio page you can do the following:

select * from geo.placemaker where documentURL =
"http://icant.co.uk" and documentType="text/html" and appid=""

Again, you can check the result as an XML file. As this is an HTML document there is no start and end but the references are reported as XPATHs.

Feeds are also supported, so if you want to get the locations in the BBC News feed you can use the following:

select * from geo.placemaker where documentURL =
"http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml"
and documentType="text/rss" and appid=""

Verify the result as an XML at your leisure – this time the XPATHs point to the RSS items.

The easiest way to see the power of Placemaker is using GeoMaker which gives you a simple interface to do turn a text or URL into a map or microformats to embed into your documents:

Location by IP

Getting the geographical location of an IP is possible with the following YQL statement:

select * from geo.places where woeid in (
  select place.woeid from flickr.places where (lat,lon) in (
    select Latitude,Longitude from ip.location where ip = "123.23.23.33"
  )
)

You can see this as an XML file here.

What we’re doing here is using the IP2location API ,get the woeid from the latitude and longitude using the Flickr findByLatLon method and run the result through the geo API to get all the information – quite some work off your hands, isn’t it? Without YQL you’d have to sign up for all these APIs and understand their inner workings to get the same information.

Getting location by IP is an old trick in the book of advertisers – you probably will have encountered ads like “meet singles in your city now” and see them changing when you went to another place – this is what they use to get this information. The accuracy of IP location is not very high though. It also can feel a bit creepy.

Location by Latitude and Longitude

Therefore it is much better to use a system that allows people to opt-in to tell their geographical location. There are services for that but we also have a W3C API built into browsers. Right now Firefox and Mobile Safari support it but it also cropped up in the latest developer build of Chrome.

Using the W3C location API is easy:

<script>
if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function(position){
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    alert('you are at' + lat +','+lon);
  },function(error){
    alert('Couldn\'t get your location :(');
  });
}
</script>

You test if the browser supports navigator.geolocation and if it does you use the getCurrentPosition() method to retrieve the current position. This will cause the browser to ask the visitor if they want to share their information – normally in an information bar on top of the viewport as shown in this screenshot:

The getCurrentPosition() method takes two parameters which are function to call in the success and the failure case – meaning that the visitor allowed you to get their location or not – or that there was some other error.

You can then use YQL once more to get the location from latitude and longitude – this time using the Flickr API method as the first one:

select * from geo.places where woeid in (
  select place.woeid from flickr.places where lat=51.5142271 and lon=-0.1289602
)

See the XML output here.

Putting it all together

Let’s end with an example script how you can use this. We use the W3C geolocation API to get a visitor’s location and if it isn’t available we fall back to using the IP. In any case, we use YQL to get the location information and the areas around the current location. The solution uses JavaScript except for retrieving the IP which is done in this case by PHP. You can see the full demo in action here. See the comments // for information about what is going on.

<script type="text/javascript" charset="utf-8">
<?php
  if ($_SERVER['HTTP_X_FORWARD_FOR']) {
   $ip = $_SERVER['HTTP_X_FORWARD_FOR'];
  } else {
   $ip = $_SERVER['REMOTE_ADDR'];
  }
  if(preg_match('/^[\d+\.?]+$/',$ip)){
    echo 'var IP = "' . $ip . '"';
  }
?>

// ^^
// This PHP block will get the current IP and assign it to a JavaScript
// variable - if it is the right format.

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(
    function(position){
      getDataForLatLon(position.coords.latitude,
                       position.coords.longitude);
    },
    function(error){
      if(IP){
        getFromIP(IP);
      }
    });
} else{
  if(IP){
    getFromIP(IP);
  };
}

// ^^
// we test if the W3C location API is supported and if it is, we
// get the current lat and lon and call the appropriate method.
// if there was an error or the API is not available at all we call
// getFromIP.

function load(yql,cb){
  var src = 'http://query.yahooapis.com/v1/public/yql?q='+
            encodeURIComponent(yql) + '&format=json&callback=' + cb + '&'+
            'env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
  var head = document.getElementsByTagName('head')[0];
  var s = document.createElement('script');
  s.setAttribute('src',src);
  head.appendChild(s);
}

// ^^
// YQL is a web service that returns JSON. This allows us to create
// script nodes dynamically to get information from it. This function
// does that for us.

function getDataForLatLon(lat,lon){
  var yql = 'select * from geo.places where woeid in ('+
            'select place.woeid from flickr.places where lat='+
            lat + ' and  lon=' + lon + ')';
  load(yql,'foundLocation');
}
function foundLocation(o){
  if(o.query.results){
    var place = o.query.results.place
    var out = '<p>You are in ' + place.name + ' which is a '+
               place.placeTypeName.content + ' located at ('+
               place.centroid.latitude + ',' + place.centroid.longitude+
               ')</p>';
    document.getElementById('location').innerHTML = out;
    getBelongTos(place.woeid);
  }
}

// ^^
// If we can get a lat and lon from the API, we put together the right
// YQL statement. If we are successful we call the foundLocation() method
// which writes out the right HTML to the document and calls the
// getBelongTos() method

function getFromIP(ip){
  var yql = 'select * from geo.places where woeid in ('+
            'select place.woeid from flickr.places where (lat,lon) in('+
            'select Latitude,Longitude from ip.location'+
            ' where ip="'+ip+'"))';
  load(yql,'foundLocation');
}

// ^^
// If there was no luck with the W3C geo API we call this function using
// the IP we got from PHP

function getBelongTos(woeid){
  var yql = 'select * from geo.places.belongtos(0) where '+
            'member_woeid='+woeid;
  load(yql,'foundBelongs');
}
function foundBelongs(o){
  if(o.query.results){
    var out = '<p>Your location belongs to: ';
    var place = o.query.results.place;
    var info = [];
    for(var i=0;i<place.length;i++){
      var cur = place[i];
      info.push(cur.name + ' (' + cur.placeTypeName.content + ')');
    }
    var out = '<p>Your location belongs to: ' + info.join(', ') + '</p>';
    document.getElementById('location').innerHTML += out;
  }
}

// ^^
// If we found a location, then we call the belongtos method of the
// GeoPlanet API to get all the areas the current location belongs to.

</script>

In my case the result from the W3C geo location is:

You are in St. Giles’s which is a Suburb located at (51.516151,-0.125460)

Your location belongs to: WC1V 6 (Postal Code), London Borough of Camden (Local Administrative Area), 0207 London (Zone), Middlesex (Historical County), London (Town), Greater London (County), MMA London (MMA), South East England (Colloquial), DMA South East England (DMA), England (Country), England and Wales (Colloquial), Great Britain (Colloquial), United Kingdom (Country), Market United Kingdom and Ireland (Market), Europe/London (Time Zone), British Isles (Supername), Northern Europe (Supername), European Union (Supername), Western Europe (Supername), Europe (Continent), Eurasia (Supername), Earth (Supername)

Only using IP I get:

You are in Whitehall which is a Suburb located at (51.501831,-0.125760)

Your location belongs to: SW1A 2 (Postal Code), Westminster (Suburb), City of Westminster (Local Administrative Area), 0207 London (Zone), Middlesex (Historical County), London (Town), Greater London (County), MMA London (MMA), South East England (Colloquial), DMA South East England (DMA), England (Country), England and Wales (Colloquial), Great Britain (Colloquial), United Kingdom (Country), Market United Kingdom and Ireland (Market), Europe/London (Time Zone), British Isles (Supername), Northern Europe (Supername), European Union (Supername), Western Europe (Supername), Europe (Continent), Eurasia (Supername), Earth (Supername)

Quite a lot of information using a few lines of code, isn’t it? Geographical location is a very interesting topic and allows us to show much more useful content to our visitors. Using YQL and GeoPlanet it is pretty easy for you to do so – give it a go!

Vitamin: Future of Web Apps Highlights Video

Keir Whitaker — Mon, 08 Mar 2010 09:19:37 +0000

Our friends Jim and Nick at Doctype recently attended Future of Web Apps Miami along with their camera gear. They kindly put together a highlight reel of the day including interviews and clips from the main stage sessions. They will be releasing full length interviews over on their Facebook page shortly.

Just as a quick heads up the full length videos from the event will be made available shortly here on Think Vitamin.

Useful Links

Doctype Future of Web Apps episode: http://doctype.tv/fowa
Twitter: http://twitter.com/doctypetv
Facebook: http://facebook.com/doctype

Microsoft - IEBlog: IE8 SmartScreen Filter - Protecting Users at Internet Scale

ieblog — Fri, 05 Mar 2010 21:44:00 +0000

The RSA 2010 Security Conference is just finishing up here in San Francisco, and I'm struck by how many of the conference sessions and keynotes have warned about the threat that socially engineered malware poses to the security of the Internet. Malware has become the scourge of the Internet, and it's not just the security experts who are worried"�the top story in my morning paper yesterday described how a typical malware attack compromised a financial firm's network. Our data shows that one out of every 250 downloads is the result of a user being tricked into downloading malware to their PC.

We're proud of the protection SmartScreen® Filter provides to protect IE8 users from such attacks, and I'd like share some of the latest numbers on our level of protection.

Since we launched IE8 in March 2009, SmartScreen has blocked over 560 million attempts to download malware, recently averaging over 3 million blocks per day! Hosted in datacenters around the world, SmartScreen's URL Reputation Service (URS) has evaluated over 250 billion URLs to help keep IE8 users safe from malware. Even more impressively, since IE7's Phishing Filter was introduced in 2005, the URS has processed over 5.7 trillion reputation requests in order to block malicious web sites. Every day, Microsoft receives around 300 million telemetry reports from IE8 users and processes 4.1 billion URLs looking for malicious websites and files. On the back end, our systems and analysts evaluate over 1 terabyte of binaries every day to help identify sites delivering malware.

The Q1 2010 NSS Lab's test shows that Microsoft's continued investment in SmartScreen is paying off. Since launch, IE8's SmartScreen Filter has continued to improve its protection against Socially Engineered Malware threats.

IE6 and 7 don't provide protection against socially-engineered malware. If your family and friends aren't up-to-date, please encourage them to upgrade to IE 8 for a safer Internet experience.

While IE8 offers the best built-in protection any browser offers against socially engineered malware, you still should follow best-practices to stay safe online. For instance:

Enable SmartScreen Filter using IE8's Safety menu ().
Install antivirus and antispyware software from trusted sources and keep it up-to-date. Microsoft Security Essentials is available for free.
Turn on your firewall.
Enable Automatic Updates for Windows and other Microsoft software using Microsoft Update.
Keep your computer's other software, including browser add-ons, up-to-date.
Before downloading software, consider the risks and be aware of the fine print. For example, make sure the license agreement does not conceal a warning that you are about to install software with unwanted behavior.

You can read more tips and learn about common Internet attacks over on the Security Tips blog.

Stay safe out there!

Eric Lawrence
Program Manager

Microsoft - IEBlog: W3C HTML Working Group Publishes New Drafts

ieblog — Fri, 05 Mar 2010 16:56:00 +0000

Last week, the W3C HTML Working Group reached a decision to publish several new working drafts and these are now available. The discussion about what to publish and how to structure the HTML5 specification has taken several months. In November, at the TPAC meeting, a request was made for the Microdata section of the specification to be removed. Back in August, I posted about our support for a separate Canvas 2D API specification.

Some people in the community raised concerns about exactly what should be in scope for the HTML working group. Tim Berners-Lee shared his thoughts:

"I agree with the WG chairs that these items -- data and canvas -- are reasonable areas of work for the group. It is appropriate for the group to publish documents in this area. On the one hand, they elaborate areas touched on in HTML4. On the other, these elaborations are much deeper than the features of HTML4, but also they form separate subsystems, and these subsystems have strong overlaps with other design areas. It is important (a) that the design be modular; (b) that the specifications be kept modular and (c) that the communities of expertise of the respective fields (graphics and data) be involved in the design process."�

We strongly support Tim's call for modular design and modular specifications in web standards. Large monolithic documents are hard to consume and take longer to stabilise with well thought out engineering decisions. In fact, the decision to take these features from HTML5 and make them separate documents continues the process that started last year as the storage and networking APIs were moved out of HTML5 and into the W3C WebApps working group. Just like good software design, loose coupling and high cohesion are good principles for defining web standards. That doesn't make them easy to apply and there is still more work to do to reduce the coupling between drafts. The group is working on improving the tools used to generate the documents to improve the cross-references, which will help towards this goal.

Microdata and Canvas 2D are now available as new working drafts alongside the core HTML5 draft. This also sets Microdata on a similar footing to the updated HTML+RDFa draft. You can review the full set of documents published yesterday here:

Adrian Bateman
Program Manager

QuirksMode: Fronteers 2010

Fri, 05 Mar 2010 16:13:54 +0000

Fronteers 2010 has been announced: 7 and 8 October, Amsterdam. Jeremy Keith and Jeff Croft have been announced as speakers. Ticket sale will start in April at the latest.

For clarity's sake: this year I have nothing to do with the organisation; I'll just attend the conference, relax, enjoy the show, as well as a beer or two.

Maybe I'll meet some of my readers at Fronteers 2010.

Vitamin: Think Vitamin Radio: Episode 3

Keir Whitaker — Fri, 05 Mar 2010 08:12:17 +0000

After a brief hiatus due to heading across the pond for Future of Web Apps Miami we're back with Episode #3 of Think Vitamin Radio. This week we are joined by Greg Annandale as Ryan is on holiday.

A full transcript is available.

Microsoft - IEBlog: Tab Isolation

ieblog — Thu, 04 Mar 2010 23:16:00 +0000

Tab isolation has recently become a more popular topic. This post is a quick survey of what tab isolation is, how it works, and what it provides.

What is it?

Tab isolation is a way to improve a browser's reliability by containing the impact of a crash. Depending on how it's implemented, tab isolation can also help contain some security attacks. There are two different implementations available today, each with different benefits.

In a tabbed browser without isolation, a problem in one tab can crash the entire browser. For example, a crash in a webpage in Firefox 3.6 or IE7 will bring down the entire browser. While modern browsers have features to recover tabs after a crash, the point of isolation is to contain the problem and prevent the browser from stopping. You can see a demo of this here (starting around 13:25).

A Quick Historical Survey

On March 5, 2008, Microsoft released the first IE8 beta with Loosely-Coupled IE (or LCIE for short). This was the first mainstream implementation of tab isolation. On September 2, 2008, Google Chrome's first beta released with "process isolation."� Mozilla Firefox has recently discussed an "Out of Process Plugins"� (OOPP) or Electrolysis project aimed at isolating Firefox plug-ins, such as Flash, from the rest of the browser.

How do isolation approaches differ today in approach and benefits?

There are a lot of different subsystems in a browser to isolate from each other, and different ways to do it.

IE8 isolates the frame process (title bar, back button, address bar, etc.) from the tabs processes (that show web pages). If anything causes a site to crash (an extension like Flash, or the rendering or scripting engine, etc.), the frame and other tab processes will not crash. IE isolates the whole tab "� all of its code, data, and extensions "� to keep IE resilient to webpages with issues.

In addition to using multiple processes, IE8 on Windows 7 and Vista (and IE7 on Vista) sandboxes the tab processes in Protected Mode for security reasons. Specifically, tabs run without permissions to install software, modify settings, or change files of any user. Protected Mode provides defense in depth so that (in most cases) security vulnerabilities in the browser or an add-on (like Flash) cannot be exploited to harm the computer. Isolation makes this additional security possible. (Technically, there are several different types of isolation (process isolation, origin isolation, etc.), and of sandboxing (integrity levels, restricted subsets, DOM mirroring, etc.) as well.)

Chrome's isolation is a bit different, factoring the different subsystems of that browser along different lines. From their documentation, they have separate processes for rendering, for the frame, and for add-ons (native plug-ins, not extensions). As with IE7, part of Chrome runs with lower privilege. Unlike IE (where page add-ons run in low), plugins in Chrome by default run with more privileges. As with any architectural difference, there are scenarios that are better in one architecture and worse in another. Theoretically, for example, a vulnerability in the Flash control running in Chrome does not have a defense in depth protection like Protected Mode to contain it.

Isolation is a super important part of modern browsers. It's essential for delivering a more reliable browsing experience. It can also improve security. Depending on how it's engineered, it can also have an impact on compatibility with sites and browser extensions.

Andy Zeigler
Program Manager

456 Berea St: Visual display of alternative text

Roger Johansson — Thu, 04 Mar 2010 17:41:56 +0000

The fact that web browsers have different ways of displaying alternative text when images are missing or disabled is something that I talked about in Safari, WebKit and alt text for missing images and Steve Faulkner expanded on in alt and title content display in popular browsers.

In How should Web browsers render alternative text?, Vlad Alexander asks (and answers) a few questions on this topic.

Read full post

Posted in Accessibility, Browsers.

Vitamin: The Web as a Database

Tom Hughes-Croucher — Thu, 04 Mar 2010 14:54:23 +0000

One of the things that’s great about the Internet is that it’s open to everyone. There are a million sites, all different, and everyone is free to invent their own way of doing things. Of course, that has left us with a legacy of systems which don’t always work well together.

When you are using a web browser things mostly work because everyone adheres more or less to web standards, or at least the bits major browsers support. When you want to get data from the web to use in your app things aren’t quite as simple. Enter YQL (Yahoo Query Language).

Almost every developer knows about using SQL for getting data from databases. We wanted to do that for the Internet. YQL allows you to access all kinds of information from the internet in a very similar way to the way you would get data using SQL.

A YQL Query

A basic query in YQL is really easy:

select * from search.web where query = "javascript";

The thing we want to do is select all data (*) from Yahoo! search for web pages where the query is the term “javascript”. If you already know SQL it’s obvious, if you don’t it’s still pretty easy to read. In this case what’s happening under the hood is YQL is mapping the request to the search.web table to a pattern to call the Yahoo! BOSS (search) web service. So we are actually making a request, on your behalf, to the url:

http://boss.yahooapis.com/ysearch/web/v1/javascript?format=xml&start=0&count=10

A Sample Result

The data is returned in your choice of XML, JSON or JSONP. Like SQL most YQL data tends to be organised as rows of results.

In the case of the above query it looks like this (NB: this is truncated to show one result, view a full version in your browser):

<?xml version="1.0" encoding="UTF-8"?> <query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng" yahoo:count="10" yahoo:created="2010-03-02T09:22:58Z" yahoo:lang="en-US" yahoo:updated="2010-03-02T09:22:58Z" yahoo:uri="http://query.yahooapis.com/v1/yql?q=select+*+from+search.web+where+query+%3D+%22javascript%22%3B"> <diagnostics> <publiclyCallable>true</publiclyCallable> <url execution-time="157"><![CDATA[http://boss.yahooapis.com/ysearch/web/v1/javascript?format=xml&start=0&count=10]]></url> <user-time>158</user-time> <service-time>157</service-time> <build-version>4265</build-version> </diagnostics> <results> <result xmlns="http://www.inktomi.com/"> <abstract><![CDATA[JavaScript.com is your source for all things JavaScript, including tutorials, free java scripts, downloads, tools, javascript source code and other scripting resources.]]></abstract> <clickurl>http://lrd.yahooapis.com/_ylc=X3oDMTQ4YzcwbGR0BF9TAzIwMjMxNTI3MDIEYXBwaWQDb0pfTWdwbklrWW5CMWhTZnFUZEd5TkouTXNxZlNMQmkEY2xpZW50A2Jvc3MEc2VydmljZQNCT1NTBHNsawN0aXRsZQRzcmNwdmlkAzc4ZHhPR0tJY3JyNGp1ZDd4R3RJcERZWXZOOFNqMHVNMlBJQUM0NkU-/SIG=10va2460d/**http%3A//www.javascript.com/</clickurl> <date>2010/02/28</date> <dispurl><![CDATA[www.javascript.com]]></dispurl> <size>59075</size> <title><![CDATA[JavaScript.com]]></title> <url>http://www.javascript.com/</url> </result> </results> </query>

Read AND Write with YQL

Looking at the example above you might agree that it’s pretty easy to use the BOSS web service already since it’s RESTful and the URL are easy to construct. Well, the same can’t really be said for the Wordpress XML-RPC API. But, with YQL we can still easily insert a new post into a Wordpress blog:

insert into wordpress.post (title, description, blogurl, username, password) values ("Test Title", "This is a test body", "http://yqltest.wordpress.com", "yqltest", "password");

A few things are interesting here. Firstly we are still using SQL syntax, but this time we are inserting data. YQL doesn’t just read data, you can write too. More than that even though BOSS uses REST and Wordpress is XML-RPC with YQL you don’t need to care. You just ask for what you want and the YQL table deals with it. Once you start using YQL to get one piece of data there isn’t any more cost to using more services.

Getting Started

So far we’ve looked at some of the things YQL can do but not how you would go about getting started, so let’s do that. The easiest way to become familiar with YQL is the YQL console. It’s a lot like the MySQL console in that you can use it to easily query available tables or to test and construct queries you want to make in your application. The console looks like this:

The first and most obvious thing is the query box. This opens with the query “show tables” which as in SQL returns a list of all the available tables. You can see that result underneath the query box. You can use the radio buttons to get the results as XML or JSON, your choice.

On the right hand side we have some navigation to get you started quicker. The list of the current tables is shown and you can open the tree to folders to show specific tables.

By default we show all the Yahoo! tables, but you can also click on a button to show all the tables created by the community. These cover a wide variety of services, almost anything you can think of.

Contribute Tables of your Own

You can also contribute new tables. They can be either really straight forward in the case of a good REST web service, or as complex as it needs to be to get the job done. A simple table might look like this one:

<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd"> <meta> <author>Yahoo! Inc.</author> <documentationURL>http://craigslist.org/</documentationURL> <sampleQuery>select * from {table} where location="sfbay" and type="sss" and query="schwinn mountain bike"</sampleQuery> </meta> <bindings> <select itemPath="" produces="XML"> <urls> <url>http://{location}.craigslist.org/search/{type}?format=rss</url> </urls> <inputs> <key id="location" type="xs:string" paramType="path" required="true" /> <key id="type" type="xs:string" paramType="path" required="true" /> <key id="query" type="xs:string" paramType="query" required="true" /> </inputs> </select> </bindings> </table>

You can see that it’s just XML, and only a few lines at that. The important bits are the “select” element. This represents a select statement we can make in YQL. If you wanted to insert you’d need an “insert” element too.

The select statement has a “url” which maps each “key” to the web service. In this case we have two path parameters which are inserted into the URL with { } and a query parameter which is automatically added to the end. This is the entire data required to let you select from Craigslist in YQL.

YQL is easy and extensible, and best of all there are already hundreds of tables contributed by the community to all kinds of great services like Twitter, Facebook, Etsy, bit.ly?

What are you waiting for, try the console today!

Microsoft - IEBlog: CSS Crunch: new IE Extension for developers

ieblog — Thu, 04 Mar 2010 01:12:00 +0000

There are many tools in the market that allow you to customize your pages' cascading style sheets (CSS), but there are actually a very few that do the opposite"�scan for all the CSS rules in the document and remove those that are not used. Cleaning out the CSS will not only reduce the bandwidth impact, but will also improve the performance of the browser (minimizing the time spent by the CSS engine to parse the style sheets).

In this post, I will describe how to build that tool using a bookmarklet and a new standard function introduced in Internet Explorer 8: document.querySelectorAll().

Let's start with the basics: a Web page can include many cascading style sheets, each of which is composed of one or more selectors. For instance, #elementId { }, .className { }, and body{ } are each examples of selectors. Using the function querySelectorAll(), you can programmatically inspect the DOM tree and count the number of times each selector is actually used.

For instance, the following code snippet counts the number of times the CSS class Foo is used in the document:

var selectorCount = document.querySelectorAll(".Foo"�).length;

Now that we have this information, we need a way to run this script inside the document. For the purpose of this article, I didn't want to change our server-side code.

I decided to create a bookmarklet, which is a special link that can interact dynamically with the currently loaded page. The syntax of the bookmarklet is fairly straightforward:

<a href="javascript:( 
    function() {          
        var c = document.createElement('script');
        c.type = 'text/javascript';
        c.src = 'http://demos.cloudapp.net/IE/CssCrunch/Scripts/CssCrunch.js'; 
        document.getElementsByTagName('head')[0].appendChild(c); })();">            
    CSS Crunch
</a>

As you can see, at runtime this injects a remote script file that runs the analysis and displays the result.

If you scroll to the bottom of the list of CSS rules, you'll see an option to remove temporarily unused selectors. This allow you to test if the page still displays and behaves the same way, as shown in the picture below.

I'd like to stress the fact that the goal is not to reach 100% usage on any page; there are scenarios in fact where the same style sheet could possibly be used by multiple pages and it makes sense to pre-fetch some rule, or where the page compression balance well having additional styles to maintain. Instead you should use this tool to identify possible areas for improvement.

That's it! You can try it here:

Right click Run CSSCrunch and select "Add to Favorites"�
Accept the security warning (by default, any bookmarklet is considered unsecure due to its nature)
Choose a location (for example, Favorites Bar)
Installed! You can now browse to this test page (or any other site) and click "CSS Crunch" in the Favorites Bar

This is just a starting point; if you are interested in doing more, you can find the source code here. I encourage you to look at the underlying code and customize it to suit your needs. For example, you might want to add support for multiple-pages analysis, or integration with server-side tools such as Visual Studio or IIS, or a compression capability such as Microsoft Ajax Minifier.

Ok, time to go! I'm checking the CSS on this blog now"� :)

Have fun!

Giorgio Sardo
Web Technical Evangelist
Microsoft Corporation

Vitamin: 17 Essential Developer Networks

Keir Whitaker — Wed, 03 Mar 2010 13:27:37 +0000

Recently I have been noticing that more and more tech companies are starting up “developer networks”. Some of these, like the Yahoo! Developer Network, consist of great tools and resources (think YQL, YUI etc) that we can all make use of in our work whilst others focus on more specific aspects of developing with a particular service or app.

Whilst tutorials and code examples are great the added bonus of a network is the community that grows around it. It’s likely that you won’t be the first person to experience a particular issue so it’s a great place to share application specific tips and frustrations.

Here are 17 networks and sites that you might not know about but are worth checking out.

Tech Company Networks

Application Specific Networks & Sites

If you know of any more please add them in the comments, it would be great to publish a more complete list.

Stopdesign: A browsable, searchable archive of tweets

Douglas Bowman — Tue, 02 Mar 2010 19:53:05 +0000

In the past, I’ve wanted to browse or search through my own tweets. Viewing my Twitter profile is one way to do that. But if I want to browse back through history, it’s a chore to go back very far. And forget about searching through my own tweets on Twitter since Twitter Search currently only goes back about a seven days.

I know there are a few apps or scripts that create backups and much more for you. But I wanted a database and simple UI completely within my own control. One that wouldn’t go away if the developer abandoned it. So one Saturday a few weeks ago, in a little over an hour, I had my own, free, browsable, searchable tweet archive. Now I can easily browse back to my very first tweet, or search for those quotes by Paul Rand I tweeted last year. This isn’t anything entirely new. I’m just writing it up what works for me in case it helps fit some pieces together.

How to set up your own tweet archive with WordPress

Assuming you have a collection of past tweets, the first step is to collect them in one place. TweetBackup.com provides an easy way to do this. It uses OAuth, so there’s no need to enter your username or password as long as you’re already signed into twitter.com. Give them an email address, and your tweets start backing up immediately. (See their FAQ about a possible limitation of 3200 tweets.)
Once TweetBackup is done grabbing all your tweets (it took about 2 minutes for my ~1,400 tweets), go to the Export tab, and save the RSS format to your local drive
Install a fresh copy of WordPress somewhere on your server if you don’t want tweets intermingled with other WP content. In the Tools section of WordPress, use the built-in RSS importer to import the file you saved from TweetBackup.
Assuming you want WordPress to automatically grab each tweet from this point forward, install the Twitter Tools plugin, enter your Twitter credentials in its settings screen, and configure it to create a blog post for each of your tweets. (Turn off the option to tweet when a post is created from this blog so the universe doesn’t explode in some endless loop of repeating tweets and blog posts.)
That’s it.

A few extra steps, if you’re up for them

Twitter Tools will handle future tweets correctly. But the format of each tweet from TweetBackup starts with a prefix of your Twitter username, followed by a space and a colon, like this: “stop: Clicking through the new design of…”. I used the Search Regex plugin to search for and eliminate that prefix.
Past tweets from TweetBackup won’t have linked URLs. The Autolink URI plugin can do this for you automatically.
If you’re good enough with regular expressions, you can also use the Search Regex plugin to link up any @mentions and #hashtags in your tweets. I suck at regex, so I cheated and used some of the patterns from David Walsh within the Search Regex search/replace UI. Technically, you could probably use David’s first pattern to link up URLs too.
A few WP plugins can enhance the built-in search functionality of WordPress. I’m using Search Everything.
WP Super Cache will keep server resources to a minimum and help load pages quickly once they’re cached.
If you’re really up for it, you can customize the templates and design as I did. Anything is possible if you’re familiar with PHP and WordPress templates. For instance, you could try using the Similar Posts plugin to suggest possibly related tweets on the permalink page.

Now, every tweet you’ve written and will write can be duplicated and backed up in your own MYSQL database, accessible via a WordPress front end. Technically, you could probably use any blogging platform or CMS to do this. (It doesn’t require WordPress.) You’ll just need a means to import old tweets and automatically grab new tweets.

Microsoft - IEBlog: How IE8 Determines Document Mode

ieblog — Tue, 02 Mar 2010 19:07:00 +0000

This post describes how IE8 determines what Document Mode such as Quirks or Standards Modes to use for rendering websites. This topic is important for site developers and consumers.

It's related to the Compatibility View List that we recently updated. This list is down by over 1000 websites, from over 3100 to just over 2000, since IE8 released last March. As we work with site developers and standards bodies, we're excited to see the sites that need to be on the Compatibility View (CV) List continue to go down.

Data-driven Design

Before we dig in to the design details, I want to share some of the data we use to design the compatibility experience.

When looking at the doctype and X-UA-Compatible meta tag and header on thousands of high traffic websites worldwide such as qq.com, netlog.com and those on the initial CV List,

26% specify Quirks such as amazon.com, tworld.co.kr, and unibanco.com.br.
41% specify a Transitional doctype that puts them in Almost Standards Mode.
14% have already added an X-UA-Compatible meta tag or HTTP response header to render in IE7 Standards Mode.

Here's why this makes sense; many high traffic websites want to render in as many browsers as possible, which is why they write for Quirks. Many websites have pages written specifically for IE7 and many web authoring tools such as Aptana Studio and Expression Web specify the Transitional doctype by default:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Thinking in terms of web-scale, there are billions of pages written specifically for either Quirks, IE7, Almost Standards, or the latest Standards. IE needs to support all of these web platform variations to ensure that our broad, world-wide, user-base has the best experience.

With this data in hand, we designed IE8 with a few principles in mind:

Render websites in the most standards compliant way by default.
As stated in previous posts, we're committed to interoperability, which means rendering websites in the most standards compliant way possible by default.
Users expect the web to just work in IE.
A small set of users will tinker to get websites that expect and work best in IE7 Standards Mode to work in IE8's more standards-compliant default mode. For everyone else, IE8 includes Compatibility View Settings.

The best experience here is one that works automatically as the web developer intended. This is why we created the Compatibility View List. It's also important to give users the ability to fix websites that aren't on the list yet through the Compatibility View button.
Web developers are in control of how their content renders.
The X-UA-Compatible meta tag and header override IE and user settings. They also provide web developers with fine-grain control over how each webpage renders in IE.

For example, some websites have pages written for Quirks and others for IE7 Standards. When IE receives an X-UA-Compatible header with an EmulateIE7 value from servers, it renders each page in the appropriate Quirks or IE7 Standards Mode.
Give web developers tools and time to help transition their content to IE8 Standards.
IE8 introduced the X-UA-Compatible meta tag and header to provide web developers time to transition their websites to IE8 Standards. As mentioned above, many websites have already used this mechanism to specify that their content should run in IE7 Standards Mode.

A Diagram on How IE8 Determines Document Mode

Given the above principles, there are four rules that you can remember about how IE handles doctype, X-UA-Compatible meta tag and header, Developer Tools, and Compatibility View Settings. These rules follow the diagram below from top to bottom:

The Developer Tools settings override all Document Modes for pages displayed in a tab.
The X-UA-Compatible meta tag and then header override Compatibility View Settings and the doctype unless the X-UA-Compatible value is EmulateIE7 or EmulateIE8.
The user's Compatibility View Settings override the Microsoft Microsoft Compatibility View List.
If none of the above rules apply, the doctype determines whether the webpage renders in IE8 Standards, IE8 Almost Standards or Quirks Mode.

Compatibility and interoperability are complex. To reduce complexity for developers and users alike, we would love to see websites transition from legacy browser modes. We respect that the choice of mode is up to the site developer. We're excited to work with sites and standards bodies to continue improving IE's implementation of interoperable standards.

Many thanks to Jesse Mohrland for verifying the diagram.

Marc Silbey
Program Manager

Vitamin: Forrst: Where Designers Who Code meet Developers Who Design

Chrissie Brodigan — Tue, 02 Mar 2010 13:07:15 +0000

Editors Note: Forrst is still in beta and as such you will need an account to view the links referenced below. Kyle, the creator of Forrst, has kindly offered 250 Think Vitamin readers an advanced invite. All you have to do is email kyle@forrst.com with subject “I’d love an invite!”.

A few weeks ago Carsonified’s Mike Kus gave five good great reasons why designers should know how to code. It generated quite a discussion. Around the same time I stumbled upon Forrst, a new platform for short-form sharing between designers and developers.

The Founder

It wasn’t a big surprise to learn that Forrst is a creation of Brooklyn-based developer/designer, Kyle Bragger. I first met Kyle when he was a developer for Huffington Post (back in the early days), more recently he’s CTO of Gary Vaynerchuk’s Cork’d.

Anyone who knows Kyle, however, also knows that he produces a seemingly never-ending stream of special projects. Honestly, I’m almost convinced that the internet actually spat him out as a human a few years ago.

The Feedback

While Forrst is early in it’s release, It’s safe to say that there’s some great long-term ideas in the community features that will have a profound impact on how designers and developers collaborate and learn more about supporting and even trading roles in development cycles. In fact, here is a sample post from a new member. Within moments it was peppered with positive and helpful feedback:

What Will You Find in Forrst?

Editors Note: Don’t forget to claim your invite (see top of the post for info)

Mike Evans (@magic6435), designer/developer shared a REST interface for mongodb
Thaibut Ninove (@thaibutninove) posted; applescript, allows users to tweet itunes tracks
Kushal Pisavadia (@kushalp) a London-based standards-lover shared javascript to enable faux html 5 support in IE
Posted! Relative time stamps in PHP anyone? shared by Billy Fowks, co-founder of rososo.com
Quirky endeavors are discovered, like the one from Jonno Riekwel (Jonnotie), a designer doing a “psd a day for a year” thing & another from a user of inspiration sharing site yayeveryday!
Pre-launch landing pages posted for new products like tapmates’ “screenport”
A few folks share and discuss their workspace preferences
And, finally, jQuery badassitude gets lots of love & learning

How Forrst Works & Getting an Invite

Forrst is currently invite-only during beta testing; you can join the Forrst “Search Party” on Twitter. If you weren’t lucky enough to claim one of the 250 invites for Think Vitamin readers Kyle lifts the invite code requirement for 15 minutes every day, and new users can get instant access v. waiting for an invite code via email.
Features for now include: profiles, follows, community badges and “expert mode,” email notifications, and an activity feed.
Use the bookmarklet for easy posting as you go about your usual day online

Q&A With Kyle, Forrst Founder

Since Forrst is still in its infancy, I asked Kyle to answer a few more questions in his own words:

What makes Forrst different from other repositories out there for code-sharing?

Well Forrst isn’t quite a repository per se where you might host a project’s code (like Github or Beanstalk), instead it’s a destination where community members can share code snippets they find clever, interesting, or maybe even perplexing, and instantly get feedback about them.

Forrst is designed to help foster discussion and learning between its design and developer users. I do have plans to hook into popular hosted repository sites to a certain extent, so that even if you’re used to sharing bits of code via Gist or Pastie, you’ll still be able to do that when sharing on Forrst, but Forrst is meant to be the social destination for discussing code and design discoveries.

Kyle Bragger, Founder, Forrst

Forrst is newly launched, but already there are vibrant discussions taking place. What’s been the biggest surprise to you watching the Forrst community form?

It’s been simply amazing seeing just how passionate and active the community already is; two guys are already working on a weekly Forrst podcast, there’s an informal “build an app in a week” contest going on (it ends March 3rd).

Everyone is just super willing to provide constructive feedback, both to me as I continue to develop the site, but also to each other. It’s a great feeling "� and really encouraging "� seeing Forrst grow the way it has so far.

You seem to have become a community manager almost overnight, what’s it like to manage a community of designers and developers?

So far I’ve gotten a ton of positive feedback and constructive criticism; I think it’s hugely beneficial that this product happens to be for designers and developers "� it makes distilling bug reports a lot quicker, and everyone’s had really valuable insight into what’s working and what’s not (in many cases, backed up by mockups and code snippets to illustrate their point "� I can’t complain about that!).

I think, in general, if you’re building a product, you can’t be afraid of hearing criticism about it; with Forrst it’s especially interesting since the target audience are my designers and developers, who have tons of experience in app development.

The very goal of Forrst is to bring these two groups together to do great things, and the fact that they’re already helping me build a better product is evidence of how awesome this kind of collaboration can be delivered via short-form sharing.

Bringing designers and developers together can be quite a challenge, and I have to say after the recent (but fun) uproar over whether today’s designers should code or not, how do you anticipate helping these two user discover one another? If a designer doesn’t code, will she feel like she can still contribute?

One of the big focuses I’ve got for the next few months is tackling the discovery problem, both for people but also for content. Ideally, you’ll be able to come to Forrst, find some friends who’re already using it, jump in to the conversation, and ultimately be connected with what I’m calling “people you should know” "� fellow developers and designers that you’ll find valuable to know and share with. I’m working on similar things for finding great content, too.

I’m a big fan of the friends-of-friends network, so I expect that will play a role. And, definitely, any designer who doesn’t code should be especially excited about participating in Forrst, because they can learn a lot from their developer peers (maybe even get inspired to learn to code!) and vice versa.

How does a social short-form sharing app enhance a professional network of creative people?

Minimal effort! I love that I can use Forrst to quickly share something I find interesting (using the Share on Forrst bookmarklet.)

Short-form sharing is a great way to begin a conversation without a lot of background or setup, and I think it solves a problem for this group who usually have gazillions of tabs open at any moment.

Forrst capitalizes on serendipity, making the most of great discoveries by connecting people to one another around the core technologies that they’re passionate about.

Thanks Kyle, see you over in Forrst!

http://pastie.org/

Vitamin: Cached: Video of Logos, Pancake Platitudes, & Why the Internet Will Fail

Chrissie Brodigan — Mon, 01 Mar 2010 22:38:14 +0000

Monday evening’s roundup of news & treats:

(Klik hier om het video filmpje te bekijken)

Why the internet will fail *From 1995 (via ThreeWordChant)
An entire video made out of logos, breathtaking, brilliant, and bizarre! Also nominated for best Animated Short Oscar (via kottke)
Best of TED talks (via GOOD)
Fascinatingly fun (possibly dangerous and illegal) way to cook pancakes (via zigzolinks)
Google rolls out a People Finder to connect folks left disconnected by the earthquake in Chile (via Google)
Flickr fumbles? Google Buys Picnik, a Photo Editing Service (via NYT Bits Blog)

456 Berea St: Accessibility issues on Vancouver Olympics websites

Roger Johansson — Mon, 01 Mar 2010 17:31:16 +0000

Being a pretty big fan of many winter sports I have spent most evenings of the past two weeks in front of the TV, watching the action from the Vancouver 2010 Winter Olympics.

With excellent live TV coverage from the games I had no reason to visit either the Vancouver2010.com or the CTVOlympics.ca website to find more info about the games. But one person who has visited and taken a closer look at those sites is Joe Clark. What he found is that the Vancouver Olympics Web sites are inaccessible to disabled people.

Read full post

Posted in Accessibility, Web Standards.

Vitamin: Tips and Tricks for developing Mobile Widgets

Keir Whitaker — Mon, 01 Mar 2010 14:56:43 +0000

It’s not often Bath, the home of Carsonified, hosts full day tech events. However I was recently lucky enough to attend openMIC right here on my doorstep.

“Open Mobile Innovation Camp” is organised by Chris Book and takes place around the UK. It describes itself as “an un-conference for discussion, debate and development new mobile applications and mobile web services”. You can find out more on their Ning site.

As part of the morning sessions Bruce Lawson from Opera gave a great presentation entitled “Tips and tricks for mobile widgets”. Whilst part of the talk was directly related to mobile widgets much of it can be related to best practice web development.

What’s a Widget?

Firstly let’s be clear on what a Mobile Widget actually is. As Bruce explained we can think of Mobile Widgets as “client side apps”. They are created using standard web technologies such as HTML, JavaScript and CSS.

To create a widget you ZIP up your project files and rename it with an extension of .wgt. They differ slightly from traditional “web apps” in as much as they offer access to the local device file system and can auto-update.

Here’s a summary of Bruce’s key points, for some this may be new, for others I am sure it will serve as a good reminder.

Things to consider when creating the widget

The physical and virtual size of the screen – How will your interface work, where will the key elements be, how will users navigate around the screen
Readability – Make it clear and readable and get your message across
Input mechanism – Make it easy for users to interact with your widget
Memory, CPU and Battery limitations – Look at ways to limit their usage
Network speed – Don’t rely on speedy networks

Work round flaky networks

Queue XHR (XMLHttpRequest) requests – This will reduce the initial load on the network connection
Cache data – Don’t keep polling for the same data
Ensure try again options - What happens if you loose signal, plan for this
Pick up where you left off - Ensure that your widget resumes where it left off after a phone call

Minimise HTTP requests

Use CSS Sprites – Reduce the number of image requests by using one file for all your images (See http://css-tricks.com/css-sprites/)
Consider using data URLs – These allow you to use a URL to represent an image as opposed to a file resulting in one less file request across the network as the image will effectively be present in your HTML. (See http://software.hixie.ch/utilities/cgi/data/data)

Markup

Place JavaScript source and file references at bottom of you page – This will mean that the bulk of the page will load before your JS files, users will be able to start reading the page straightaway
Don’t use TABLE layout – Extra overhead that isn’t necessary
Declare image sizes in HTML – Use height and width attributes on images. This will reduce pages being redrawn once an image is downloaded, resulting in a better user experience and less work for your mobile device’s CPU.
Consider using SVG (Scalable Vector Graphics) for illustrations or <canvas> for dynamic images - These send data as mathematical info which tells the browser how to draw it. It’s also scalable and doesn’t pixelate.

Understand accessibility

There are many similarities between understanding accessibility on the web and mobile devices. Bruce recommends reading “Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG)”

No images – What happens to your widget with images off?
No fonts/colours - What if the device doesn’t support your preferred font or colour?
Contrast – Ensure that it’s readable for visually impaired users

CSS for mobile devices

Use ems not px for fonts – This is better for scalability
Use CSS sprites – See above
Fluid layouts – This will enable your widget to work on different resolutions
Use media queries - These will allow you to serve different CSS files dependent on the screen size of the device
Use SVG for background images – Declaring “width: 100%; height: auto;” will allow your image to scale regardless
Sniff out the device info – Like media queries this will enable you to serve a different user experience dependent on the device

Be prepared for HTML5

Form validation is free – No further need for complicated validation JavaScript
Client side persistent storage of key/value pairs and support for embedded SQL databases - This will reduce the need to make requests over the network
Server sent events – The <event-source> element reduce need for polling in web apps. It will allow the receiving of push notifications from a server in the form of DOM events

Opera widgets SDK

Documentation – Extensive documentation provided by Opera
Test – Use the emulator to test your widget
Opera Libraries – Lightweight libraries for animation etc
Explore the SDK - http://dev.opera.com/sdk
Debug your widget – Opera provide a free debugging tool called Dragonfly

Test your Widget

Test your widget on real devices – http://perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2

Thoughts?

If you have developed a widget or have something to add please let us know in the comments.

View the Slides

Practical Tips for Mobile Widget development

View more presentations from brucelawson.

Eric Meyer: Better PDF File Size Reduction in OS X

Eric Meyer — Thu, 25 Feb 2010 18:17:15 +0000

One of the things you discover as a speaker and, especially, a conference organizer is this: Keynote generates really frickin’ enormous PDFs. Seriously. Much like Miles O’Keefe, they’re huge. We had one speaker last year whose lovingly crafted and beautifully designed 151-slide deck resulted in a 175MB PDF.

Now, hard drives and bandwidth may be cheap, but when you have four hundred plus attendees all trying to download the same 175MB PDF at the same time, the venue’s conference manager will drop by to find out what the bleeding eyestalks your attendees are doing and why it’s taking down the entire outbound pipe. Not to mention the network will grind to a nearly complete halt. Whatever you personally may think of net access at conferences, at this point, not providing net access is roughly akin to not providing functioning bathrooms.

So what’s the answer? ShrinkIt is fine if the slides use lots of vectors and you’re running Snow Leopard. If the slides use lots of bitmapped images, or you’re not on Snow Leopard, ShrinkIt can’t help you.

If the slides are image-heavy, then you can always load the PDF into Preview and then do a “Save As…” where you select the “Reduce File Size” Quartz filter. That will indeed drastically shrink the file size"�that 175MB PDF goes down to 13MB"�but it can also make the slides look thoroughly awful. That’s because the filter achieves its file size reduction by scaling all the images down by at least 50% and to no more than 512 pixels on a side, plus it uses aggressive JPEG compression. So not only are the images infested with compression artifacts, they also tend to get that lovely up-scaling blur. Bleah.

I Googled around a bit and found “Quality reduced file size in Mac OS X Preview from early 2006. There I discovered that anyone can create their own Quartz filters, which was the key I needed. Thus armed with knowledge, I set about creating a filter that struck, in my estimation, a reasonable balance between image quality and file size reduction. And I think I’ve found it. That 175MB PDF gets taken down to 34MB with what I created.

If you’d like to experience this size reduction for yourself (and how’s that for an inversion of common spam tropes?) it’s pretty simple:

Download and unzip Reduce File Size (75%). Note that the “75%” relates to settings in the filter, not the amount of reduction you’ll get by using it.
Drop the unzipped .qfilter file into ~/Library/Filters.

Done. The next time you need to reduce the size of a PDF, load it up in Preview, choose “Save As…”, and save it using the Quartz filter you just installed.

If you’re the hands-on type who’d rather set things up yourself, or you’re a paranoid type who doesn’t trust downloading zipped files from sites you don’t control (and I actually don’t blame you if you are), then you can manually create your own filter like so:

Go to /Applications/Utilities and launch ColorSync Utility.
Select the “Filters” icon in the application’s toolbar.
Find the “Reduce File Size” filter and click on the little downward-arrow-in-gray-circle icon to the right.
Choose “Duplicate Filter” in the menu.
Use the twisty arrow to open the duplicated filter, then open each of “Image Sampling” and “Image Compression”.
Under “Image Sampling”, set “Scale” to 75% and “Max” to 1280.
Under “Image Compression”, move the arrow so it’s halfway between the rightmost marks. You’ll have to eyeball it (unless you bust out xScope or a similar tool) but you should be able to get it fairly close to the halfway point.
Rename the filter to whatever will help you remember its purpose.

As you can see from the values, the “75%” part of the filter’s name comes from the fact that two of the filter’s values are 75%. In the original Reduce File Size filter, both are at 50%. The maximum size of images in my version is also quite a bit bigger than the original’s"�1280 versus 512"�which means that the file size reductions won’t be the same as the original.

Of course, you now have the knowledge needed to fiddle with the filter to create your own optimal balance of quality and compression, whether you downloaded and installed the zip or set it up manually"�either way, ColorSync Utility has what you need. If anyone comes up with an even better combination of values, I’d love to hear about it in the comments. In the meantime, share and enjoy!

Stopdesign: You cannot copyright a Tweet

Douglas Bowman — Thu, 25 Feb 2010 15:18:28 +0000

Though this may not completely eliminate liability if a publisher or artist rewraps a whole series of your tweets in a different shell, Zeldman makes an interesting point on the limitations of copyright in regards to short phrases (i.e. tweets):

As messages sent via Twitter cannot be longer than 140 characters, they cannot be copyrighted. However original, witty, or profound they may be, nothing more than good manners protects your original expression of authorship. If you wish to let other people quote or use your Tweets, you need not "license"� them; indeed, technically, you cannot license them, since they are in the public domain the instant you publish them.

link

Microsoft - IEBlog: Documenting Standards in IE

ieblog — Wed, 24 Feb 2010 21:42:00 +0000

This post discusses some of the work we're doing on the IE team to fulfill our commitment to document our support of web standards. A good starting point is Microsoft's interoperability principles, something we've written about here on this blog before, and a principle that's easy to see in action in our products, like IE8.

The essence of interoperability in this context is that the same web page markup works the same way across different browsers. There are many challenges in getting to this goal. Even with the best intentions, as an industry we are still learning and working through how to do this well. You can look at how different tests run even today in modern browsers (for example here at 19:57). You can look at how standards evolve, like how quickly CSS2 became CSS 2.1, or the process to finish CSS 2.1 and make it a final Recommendation, or what happened between XHTML and HTML5. You can look at the challenge of delivering interoperable products while specifications are under construction (as in the case of 802.11 wireless). There are many challenges, and the web standards process, primarily at the W3C and similar organizations, is an important means to get the different communities involved to a consensus agreement.

The work in developing a public CSS 2.1 test suite and contributing it to the W3C, our recent work on different aspects of HTML5, and the improvements in IE9's interoperability we showed at PDC are all examples of our principles in action. You can try out some of the tests yourself, in different browsers and on different operating systems.

As part of our commitment to interoperability, we're going to make more interoperability information available about IE and keep it up-to-date. Today we're publishing the first pieces of documentation here. These documents are drafts, and are not final. We will post more here on the IE blog about interoperability documentation (e.g. how we engineered creating this documentation, the process for keeping the documentation up to date).

Thanks "�
Dean Hachamovitch

Eric Meyer: MIXmasters

Eric Meyer — Wed, 24 Feb 2010 21:22:46 +0000

The winners of Microsoft’s MIX 10K Smart Coding Challenge (for which I was honored to serve as one of the judges) have been announced, and the Grand Prize has been awarded to…

Jimmy D’s Frog Log.

Which is an HTML5/CSS/JS entry.

That doesn’t run in Internet Explorer.

Yep.

Frog Log was my top pick, and obviously did very well with the other judges too, for a good reason: it’s a fun game. It doesn’t play quite the same in Firefox previous to v3.5, as the drag-n-drop doesn’t work. Instead, you click on a frog, then click where you want to place it. I actually found that made the game a touch easier for me, but your interaction may vary. In addition to working in Firefox, Safari, and Opera, it also runs on a number of mobile devices.

Here’s an excerpt from my judging remarks:

Just a great little game, addictive and well thought out with some interesting gameplay. I would LOVE to see this developed further by the author… My only ding was that drag-n-drop failed in Firefox 3.5; clicking worked fine, though.

I’m not sure why I had trouble with drag-n-drop in Firefox 3.5, since I don’t have have the same problem now. Maybe I got confused with browser version numbers or something. Regardless, it works fine, it’s a great game, and remember: it’s less than 10K unzipped.

I also gave high marks to the HTML5 runner-up, Chris Evans’ 100pxls, which was the source of my Dadaist tweet a couple of weeks back and lands right in my personal sweet spot for “doing odd things with popular web services”. Here’s some of what I had to say in my remarks:

…really liked the concept here, especially the nonsensical tweets that were generated by drawing your own icon. The icons could be made easier to see in the main display, but I suppose that’s a minor quibble.

I’d like to thank the MIX 10K crew for getting me involved as a contest judge; I really enjoyed seeing what people created and had a hard time narrowing down my votes to just a handful of winners. More importantly, though, I offer my heartiest congratulations to all the winners, and most especially to Jimmy and Chris for doing such fun, interesting, and downright cool stuff with 10K of web standards goodness!

Stopdesign: Accent Folding for Auto-Complete

Douglas Bowman — Tue, 23 Feb 2010 18:41:27 +0000

Carlos Bueno highlights an oft overlooked aspect of internationalization. His address book auto-complete example at the beginning of the article crystalized the problem for me immediately. The solution he discusses for a fuzzy character match dubbed accent folding seems logical, especially in certain contexts. Beyond those contexts, the problem of transliteration gets complicated quickly. link

Microsoft - IEBlog: MIX - Microsoft, W3C and SVG

ieblog — Mon, 22 Feb 2010 21:31:00 +0000

In addition to our engagement in the SVG Working Group, Doug Schepers, W3C Team Contact for the SVG Working Group, and I are going to be presenting SVG: The Past, Present and Future of Vector Graphics for the Web, at MIX 2010 in Las Vegas this coming March to share help developers understand where SVG is headed. At Microsoft we have been investigating how SVG can deliver graphics for the next generation of the Web Development. Its inclusion in HTML5 promises many opportunities for developers to enhance their sites. We will provide an overview of SVG and how the standard is evolving to support a broader range of applications on the Web.

Patrick Dengler
Senior Program Manager

456 Berea St: CSS efficiency tip: use a single stylesheet file for multiple media

Roger Johansson — Mon, 22 Feb 2010 20:05:39 +0000

The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified.

There is nothing wrong with splitting your CSS into multiple files and linking them this way (I currently do that here on this site), but there are two drawbacks: it leads to more HTTP requests from the browser to the server and the need to maintain multiple CSS files.

Read full post

Posted in CSS.

QuirksMode: Political blog split off QuirksBlog trunk

Mon, 22 Feb 2010 15:11:55 +0000

I have decided to follow Dutch politics a bit more openly and to blog about it. Still, I don’t want to force this content on people that are just interested in web development. According to my own calculations the number of non-Dutch readers that are interested in Dutch politics is about twelve, so for those twelve, as well as the more sizable group of Dutch followers interested in politics, I’ve now created a politics homepage and blog.

Swept away by the literally two requests from non-Dutch readers, I’ve also decided to publish my political primer, which will ideally consist of eleven long background articles, of which only the first eight are written. I will publish one article every Wednesday until I run out of material.

Here on the main QuirksBlog I may write some stuff about the JavaScript graph functions I created for the primer (parliament graphs, tables). Unfortunately, right now any JavaScript-focused article would mainly consist of a long list of features I haven’t implemented yet. Most of the graphs aren’t really keyboard-accessible, for instance, because I’m not happy with the idea of adding dozens of useless <a> elements just to make parts of the graphs keyboard-focusable.

All in all I’m hurrying to catch up with events. I hadn’t planned to publish any of this, but the government crisis has forced my hands. Please excuse the occasional wart or bug.

Stopdesign: 50 Useful Coding Techniques

Douglas Bowman — Sun, 21 Feb 2010 15:13:41 +0000

Smashing Magazine rounds up a few tricks for “CSS Layouts, Visual Effects and Forms”. Not everything in here looks useful to me, but I did notice a few gems while quickly browsing through. Bookmarked for later investigation. link

QuirksMode: Dutch government falls over Afghanistan

Sat, 20 Feb 2010 16:20:52 +0000

As long-time visitors know I occasionally talk about Dutch politics here for the benefit of my Dutch readers as well as those twelve foreign readers that are interested in these matters. Since Dutch government fell late yesterday night, it’s time for another such post.

The Balkenende IV government (i.e. the fourth government that Balkenende (CDA) was prime minister of) was formed three years ago and consists of centre-right CDA (christian-democrats), centre-left PvdA (Labour), and orthodox-protestant left-leaning CU (Union of Christians). Yesterday evening the PvdA ministers resigned over a conflict about the continuing Dutch military presence in the Afghan province of Uruzgan.

In a week and a half local elections will be held, and the PvdA was slated to lose a lot of seats everywhere. PvdA party leader and finance minister Bos clearly hopes to stem the electoral tide by his resignation, and he might well be right.

Update: This will be the last political entry on the main QuirksBlog. I now have a separate politics section with a blog as well as an article series about Dutch political history.

456 Berea St: Remember the Authoring Tool Accessibility Guidelines (ATAG)

Roger Johansson — Thu, 18 Feb 2010 19:52:46 +0000

An increasing number of web developers are aware of the Web Content Accessibility Guidelines (WCAG) (though they don't necessarily use them in their work). But another set of accessibility guidelines seem to be almost completely overlooked "� the Authoring Tool Accessibility Guidelines (ATAG).

Where WCAG addresses the information and functionality of a website, ATAG addresses software that is used to create websites or manage the content of websites. There are two versions of ATAG; ATAG 1.0, which was made a recommendation on 3 February 2000 (yes, over ten years ago), and ATAG 2.0, which is currently in Working Draft status. Since a lot has happened on the Web in ten years, ATAG 2.0 is what I am basing the information in this article on.

Read full post

Posted in Accessibility, Web Standards.

QuirksMode: Browser news from the Mobile World Congress

Thu, 18 Feb 2010 17:24:59 +0000

Yesterday evening I returned from my fourth foreign trip this year. This time I went to the Mobile World Congress, the annual Barcelona-based get-together of the mobile industry, and I can tell you, it’s something else.

This post gives an overview of announcements by mobile players that might be of interest to web developers. There’s an incredible lot of it, too, because every single major mobile player except Apple feels that MWC is the ultimate forum for major announcements.

If you know of more news, or have links to additional information, please leave a comment.

I was there because Vodafone had invited me to sit on a panel in a technical “embedded conference” about W3C Widgets and related technologies. The concept can use some fine-tuning; I’m hoping to do some of that in the future. I was there mainly to stress that the mobile browser situation is not as simple as it looks. THERE IS NO WEBKIT ON MOBILE!
While I was at it I also invented guerilla browser testing.

Microsoft - IEBlog: Search Providers: Best Practices on Setting the Default

ieblog — Wed, 17 Feb 2010 18:58:00 +0000

This post describes a set of best practices for setting the default search provider. Our goal continues to be keeping users in control of their browser, following our published Guidelines and Requirements for add-on development.

If you write software that modifies Internet Explorer's search settings or defaults through direct registry manipulation, your software may be contributing to user confusion and frustration.

Whenever a program tries to modify the default search provider through direct registry manipulation (e.g. modifying the DefaultScope registry key directly as described in an earlier blog post ), IE8 intercepts the change and prompts users to confirm what they want:

Figure 1: In this dialog, the software requests a search default change using the recommended SetDefault API and clear attribution is displayed. In this case, it is the Contoso Internet Toolbar software.

If multiple search providers try to reset the registry key every time it changes, it causes a confusing and frustrating user experience. The above dialog box will re-appear every time the key is modified directly.

IE8 includes a Search Provider Default configuration experience designed for this scenario. When your software uses the IOpenServiceManager API (to install a search provider) and the SetDefault API (to request users set it as their default), users will see clearer communication about what is happening. This transparency is an important part of the user being in control.

The following code sample shows how to install a search provider and request that the user set it as the default using the recommended APIs.

#include <windows.h>
#include <atlbase.h>
#include <openservice.h>

    HRESULT hr = E_FAIL;
    BOOL fComInitialized = FALSE;

    if (S_OK == CoInitialize(NULL))
    {
        fComInitialized = TRUE;

        //Open a handle to the OpenService manager
        CComPtr<IOpenServiceManager> spManager;
        hr = spManager.CoCreateInstance(CLSID_OpenServiceManager);

        if (SUCCEEDED(hr))
        {
            CComPtr<IOpenService> spService;

            //Install my search provider
            //URL-OF-SERVICE: See http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_elements 
            hr = spManager->InstallService(URL-OF-SERVICE, &spService);

            if (hr==S_OK)
            {
                //Request that the user changes their search default
                hr = spService->SetDefault(TRUE, NULL);
            }
        }
    }

    if (fComInitialized)
    {
        CoUninitialize();
    }

When called, the SetDefault API will show the above dialog (See Figure 1 above) requesting the user to change their search default. The user can approve or deny this request from the software. If approved, the software can change the default setting. If denied, however, the software will not be allowed to change the user's default settings. The user can change the setting at any time by opening the Manage Add-ons window.

If the binary that is calling the SetDefault API is signed with a valid code signing certificate, the program name and publisher will be displayed in the Search Provider Default dialog box as in Figure 1 above. Code that calls SetDefault should be signed.

In summary, if your software monitors the DefaultScope registry key directly, please update your code to use the recommended APIs. This will allow the user to see the search provider default dialog only once and lets them be in full control of their default, in support of the Guidelines for add-on development.

If you are new to OpenSearch Extensibility and would like to learn how to offer your services or how to get started, check out the article Search Provider Extensibility in Internet Explorer.

Until next time,

Duc (Cash) Vo
Programmer Writer
Internet Explorer

456 Berea St: How to respond to email messages that contain multiple questions

Roger Johansson — Mon, 15 Feb 2010 19:48:29 +0000

Email messages often contain a number of questions that the sender wants the recipient to answer. I find that many responses to such messages are much more difficult to understand than they should be. Not because of grammar or spelling errors, but because of how the responses are structured and formatted.

I'd like to share two tips that, in my opinion, will make responses to multiple question messages much easier and quicker to read.

Read full post

Posted in Productivity.

Eric Meyer: Inspector Scrutiny

Eric Meyer — Mon, 15 Feb 2010 14:54:23 +0000

It’s been said before that web inspectors"�Firebug, Dragonfly, the inspectors in Safari and Chrome, and so forth"�are not always entirely accurate. A less charitable characterization is that they lie to us, but that’s not exactly right. The real truth is that web inspectors repeat to us the lies they are told, which are the same lies we can be told to our faces if we ask directly.

Here’s how I know this to be so:

body {font-size: medium;}

Just that. Apply it to a test page. Inspect the body element in any web inspector you care to fire up. Have it tell you the computed styles for the body element. Assuming you haven’t changed your browser’s font sizing preferences, the reported value will be 16px.

You might say that that makes sense, since an unaltered browser equates medium with “16″. But as we saw in “Fixed Monospace Sizing“, the 16px value is not what is inherited by child elements. What is inherited is medium, but web inspectors will never show you that as a computed style. You can see it in the list of declared styles, which so far as I can tell lists “specific values” (as per section 6.1 of CSS2.1). When you look to see what’s actually applied to the element in the “Computed Styles” view, you are being misled.

We can’t totally blame the inspectors, because what they list as computed styles is what they are given by the browser. The inspectors take what the browser returns and prettify it for us, and give us ways to easily alter those values on the fly, but in the end they’re just DOM inspectors. They don’t have a special line into the browser’s internal data. Everything they report comes straight from the same DOM that any of us can query. If you invoke:

var obj = document.getElementsByTagName('body')[0];
alert(getComputedStyle(obj,null).getPropertyValue('font-size'));

…on a document being given the rule I mentioned above, you will get back 16px, not medium.

This fact of inspector life was also demonstrated in “Rounding Off“. As we saw there, browsers whose inspectors report integer pixel values also return them when queried directly from the DOM. This despite the fact that it can be conclusively shown that those same browsers are internally storing non-integer values.

Yes, it might be possible for an inspector to do its own analysis of properties like font-size by checking the element’s specified values (which it knows) and then crawling up the document tree to do the same to all of the element’s ancestors to try to figure out a more accurate computed style. But what bothers me is that the browser reported computed values that simply aren’t accurate in the first place. it seems to me that they’re really “actual values”, not “computed values”, again in the sense of CSS2.1:6.1. This makes getComputedStyle() fairly misleading as a method name; it should really be getActualStyle().

No, I don’t expect the DOM or browsers to change this, which is why it’s all the more important for us to keep these facts in mind. Web inspectors are very powerful, useful, and convenient DOM viewers and editors, essentially souped-up interfaces to what we could collect ourselves with JavaScript. They are thus limited by what they can get the browser to report to them. There are steps they might take to compensate for known limitations, but that requires them to second-guess both what the browser does now and what it might do in the future.

The point, if I may be so bold, is this: never place all your trust in what a web inspector tells you. There may be things it cannot tell you because it does not know them, and thus what it does tell you may on occasion mislead or confuse you. Be wary of what you are told"�because even though all of it is correct, not quite all of it is true, and those are always the lies that are easiest to believe.

Eric Meyer: Fixed Monospace Sizing

Eric Meyer — Fri, 12 Feb 2010 13:52:36 +0000

Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed.

But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following:

span {font-family: monospace;}

<p>This is a 'p' with a <span>'span'</span> inside.</p>

All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied.

The savvier among you will have said: “It depends, but most likely 13px.” That’s because here, the size of the monospace text is controlled by the browser’s preferences. The vast majority of users, of course, have never touched their default settings of “16″ for proportional fonts and “13″ for monospace/fixed fonts. For them, then, the answer is 13px. Similarly, if I’d asked about the p element’s computed font-size, the answer would be: “It depends, but most likely 16px.”

So let’s add a bit more and see where we land.

span {font-family: monospace; font-size: 1em;}

<p>This is a 'p' with a <span>'span'</span> inside.</p>

As before: bearing in mind that there are no other author styles, what should be the computed font-size of the span element?

In this case, building on the previous question and answer, you might say, “It depends, but most likely 16px.” The reasoning here is pretty straightforward: since the computed font-size of the p element is 16px, the font-size: 1em; assigned to the span will result in it having the same size.

And that’s true… in two of five browsers I tested: Opera 10 and Internet Explorer 8. In the other three I tested—Firefox 3.6, Safari 4, and Chrome 4—the computed (and rendered) font-size of the span is 13px, the same as in our first example. This result holds true if the rule is changed to use font: 1em monospace; instead of the two separate properties. The behavior continues to persist even when adding specific font families, like Courier New, Courier, Andale Mono, and so on to the rule. It also persists if 1em is converted to 100%.

So in other words, even though I have written CSS that explicitly says “Make the font-size of this element the same as its parent”, three of five browsers apparently ignore me.

I say “apparently” because what’s happening is that those browsers are allowing the span to inherit the default font-size from its parent (and thus, indirectly, all its ancestors), but the default font-size is medium. If you go look up medium, you find out that it doesn’t have a defined numeric size. So what those browsers do is equate medium with the preference settings, which means it’s different for monospace fonts than for everything else.

In other words, those three browsers are doing something like this:

This span needs to have the same font-size as its parent element.
The parent’s font-size is medium, even though when my web inspector (or an author’s DOM script) asks, I report the 16px I used to output the text. So the span’s font-size is actually medium.
This medium-sized span is using a monospace font. The preference setting for monospace is “13″, and I equate medium with the preference setting, so I’ll output the span using 13-pixel text.

Opera 10, as I said, doesn’t do this, even if your monospace font preference setting is the default value of “13″ or indeed different from the preference for non-monospace fonts. And IE8 doesn’t appear to do it either, although you can’t set numeric font size preferences in IE8 so what it’s actually doing is open to interpretation. Oh, IE8, you inscrutable little scamp, you.

All that might seem reasonable enough, but it turns out that’s not the whole story. No, the three resizing browsers are being a good deal more “clever”, if that’s actually the word I want, than that. In fact, what those browsers do makes it seem like they use the two preference settings to create a ratio, and that ratio is used to scale monospace text. That’s not actually what’s happening, but it looks that way at first. To see what I mean, let’s consider:

span {font-family: monospace; font-size: 2em;}

<p>This is a 'p' with a <span>'span'</span> inside.</p>

Again: in the absence of other author styles, what should be the computed font-size of the span element?

The answer: “It depends, but most likely 26px as long as we aren’t talking about Opera 10 or IE8. If it is one of those two, then most likely 32px.” Why? Because the resizing browsers see the font-size: 2em; declaration as “twice medium” and twice 13 is 26. Opera 10 and IE8, as previously established, don’t do the resizing. Or else they simply interpret medium as being equal to the proportional font size preference setting. Whatever.

Okay. So what all this means is that in many browsers, you can declare that an element’s font size should be twice the size of its parent’s and have it actually be 1.625 times the size"�or, if you want to look at it another way, 0.8125 times the size you expected it to be. The 0.8125 comes from 26/32, which of course reduces to 13/16. If you were to adjust your browser’s preferences so the monospace setting is “15″, then monospace fonts would be 0.9375 (15/16) times the expected size.

But"�and here’s where things get really fun"�this is not always so. See, you may not have run into this problem if you’ve been declaring specific font families with no generic fallback. Consider this variation (note that I dropped back to 1em for the font-size):

span {font-family: "Courier New"; font-size: 1em;}

<p>This is a 'p' with a <span>'span'</span> inside.</p>

This time, in every one of the five browsers I mentioned before, assuming the browser defaults, the computed (and rendered) font-size of the span will be 16px. Not 13px. And the only difference is that we switched from a generic font family to a specific one.

“Hey presto!” you shout. “We’ll just tack the generic family on the end there and be right as rain!” Sadly, no. For if you do this:

span {font-family: "Courier New", monospace; font-size: 1em;}

<p>This is a 'p' with a <span>'span'</span> inside.</p>

…then the answer to the question I keep asking will be: “It depends, but given browser defaults it will be 16px, unless we’re talking about Safari. In that case, it’s 13px.”

Really. Alone among the browsers I tested, Safari goes back to doing the resizing when you provide a generic fallback to your specific family. Or even multiple families. Do your best to make sure the user at least gets a fixed-width font, and you get a size smaller than you’d intended. (You can get the back story on this in a late-2006 post on the Surfin’ Safari blog.)

So what do we do? Get creative. That’s what the ARIA folks did in their specification’s style sheet, where they declare two font stacks: the first with a generic fallback, and the second without it. That works, but it’s ugly. I didn’t like that at all. And then, halfway through writing up this post, a fix came to me like a shot in the dark. Check this out:

span {font-family: "Courier New", monospace, serif; font-size: 1em;}

<p>This is a 'p' with a <span>'span'</span> inside.</p>

This time around, the answer is: “It depends, but given browser defaults, 16px.”

Really! Even in Safari! And in all tested browsers, it falls back to a generic monospace font at the requested size even if the specific family (or families) we declare aren’t available! This can be verified by altering the specific font family to something that doesn’t actually exist:

span {font-family: "Corier Neu", monospace, serif; font-size: 1em;}

<p>This is a 'p' with a <span>'span'</span> inside.</p>

Monospacey goodness at the intended, parent-matching size. It’s enough to make a body believe in monotheism.

Since I generally assume that anything I devise was already invented by someone else, I went Googling for prior art. And wouldn’t you know it, the Wikipedia folks had worked it out around the end of last year. This, of course, supports my contention that Wikipedia is the new Steve Allen. I also found some claims that ending the font stack with monospace, monospace would have the same effect, but that wasn’t borne out in my testing. Perhaps it worked in older versions of browsers but no longer does.

I did leave out another way to make monospaced fonts behave as expected, which you may have already figured out from the preceding: declare the font-size for any parent of a monospaced element to be a length value, along the lines of body {font-size: 12px;}. That will pass the length value down the document tree to the monospaced element via inheritance, which will use it without resizing it in every browser I tested. Though you may have heard that page zooming makes pixel-sized text okay, I’m not really convinced. Not yet. There are too many people who don’t know how to zoom, and too many whose browsers aren’t advanced enough to zoom pages. Even in page-zooming browsers, there are problems with pixel text. So I’m still on the ems-and-percentages bandwagon.

In fact, there are a fair number of details and extra browser oddities that I left out of this, as it’s already way more than long enough, and besides you don’t really want to hear the gory details of manually stepping through 37 different preferences settings just to verify a theory. Plus you already heard about the font-size rounding investigation that spawned off of this one, about halfway through. I think that’s more than enough for the time being.

I should also lay down a caveat: it’s possible that this behavior will be interpreted as a bug by the Safari team and “fixed”, if that’s the word I want, in a future release. I really hope not"�and if they’re looking for ways to improve how they handle monospace font sizing, I have a few suggestions"�but it is possible. Adjust your expectations accordingly.

And with that, I’m going to stop now. I hope this will be useful to you, either now or in the future.

Hixie's Natural Log: Consistency

Fri, 12 Feb 2010 09:42:51 +0000

Adobe CEO Shantanu Narayen, June 2009, when asked about HTML5: To the extent that an improved HTML standard accelerates innovation and consistent reach for web content, we're very supportive. (context)

Adobe CTO Kevin Lynch, February 2010: Adobe supports HTML and its evolution. (context)

Adobe Evangelist Dave McCallister, July 2009: For Adobe, "open" is all aspects of communications and technologies. For us, those are open source, standards, and community. [...] We make sure that we talk to our communities, that we play with the standards groups, [...] We are actually one of the most open companies that are active. (context)

Someone whom I can't identify publicly, since he posted only on one of the secret W3C member lists, contributed to the following thread over the last few days: 1 2 3

Larry Masinter, Adobe, quoted in the minutes of yesterday's weekly phone status report for the HTML working group: do I need to repeat objections?

Net result: the latest publication of HTML5 is now blocked by Adobe, via an objection that has still not been made public (despite yesterday's promise to make it so).

With friends like these...

Microsoft - IEBlog: Adobe Flash Now Supports InPrivate Browsing

ieblog — Fri, 12 Feb 2010 00:59:00 +0000

As a web browser, Internet Explorer is a platform for many kinds of add-ons (here are some great examples). IE users generally don't distinguish between add-ons and Internet Explorer when it comes to performance, reliability, or privacy. They just use IE and expect it to work. That's why the best add-ons do a good job of integrating with the IE user model, letting customers "just browse"�.

Recently, Adobe announced that their latest version of Flash supports InPrivate Browsing. Version 10.1 of Flash will now respond to interfaces we built into IE8 when we first released it. When you browse to a site with Flash, it can store "Flash Cookies"�, which are files created by Flash that websites can use to store data. Now, just like your IE history and cookies, these Flash objects will be deleted when you close your InPrivate Browsing window.

We're really happy to see Flash adopt our InPrivate Browsing feature, and happy to see that they've also supported private browsing in Firefox and Chrome as well. Great job Flash team!

Andy Zeigler
Program Manager

456 Berea St: Specify a text colour for img elements

Roger Johansson — Thu, 11 Feb 2010 18:16:40 +0000

When an image specified with an img element is missing from a web page, some browsers display the alt text instead. Why not all browsers do that is a separate topic which I talk a bit about in Safari, WebKit and alt text for missing images.

I think most people will agree that it is a good thing for web browsers to display the contents of an image's alt attribute when the image is missing or broken, or image rendering has been disabled. However, many web professionals forget to check what the alternative text will actually look like in those cases.

Read full post

Posted in Accessibility, CSS, Usability.

Eric Meyer: Rounding Off

Eric Meyer — Wed, 10 Feb 2010 18:42:44 +0000

In the course of digging into the guts of a much more complicated problem, I stumbled into an interesting philosophical question posed by web inspection tools.

Consider the following CSS and HTML:

p {font-size: 10px;}
b {font-size: 1.04em;}

<p>This is text <b>with some boldfacing</b>.</p>

Simple enough. Now, what is the computed font-size for the b element?

There are two valid answers. Most likely one of them is intuitively obvious to you, but take a moment to contemplate the rationale for the answer you didn’t pick.

Now, consider the ramifications of both choices on a situation where there are b elements nested ten layers deep.

If you hold that the answer is 10px, then the computed font-size of the tenth level of nesting should still be 10px, because at every level of nesting the mathematical answer will be rounded down to 10. That is: for every b element, its computed font-size will be round(10*1.04), which will always yield 10.

If, on the other hand, you hold that the answer is 10.4px, then the computed font-size of the tenth level of nesting should be 14.802442849px. That might get rounded to some smaller number of decimal places, but even so, the number should be pretty close to 14.8.

The simplest test, of course, is to set up a ten-level-deep nesting of b elements with the previously-shown CSS and find out what happens. If the whole line of text is the same size, then browsers round their computed font-size values before passing them on. If the text swells in size as the nesting gets deeper, then they don’t.

As it happens, in all the browsers I’ve tested, the text swells, so browsers are passing along fractional pixel values from level to level. That’s not the interesting philosophical question. Instead, it is this: do web inspectors that show integer font-size values in their ‘computed style’ windows lie to us?

To see what I mean, load up the font size rounding test page in Firefox and use Firebug to inspect the “1(“, which is the first of the b elements, in the first (1.04em) test case. Make sure you’re looking at the “Computed Styles” pane in Firebug, and you’ll get a computed font-size of 10.4px. That makes sense: it’s 10 × 1.04.

Now try the inspecting that same “1(” in Safari or Opera. Both browsers will tell you that the computed font-size of that b element is 10px. But we already know that it’s actually 10.4px, because the more deeply-nested layers of b elements increase in size. These inspectors are rounding off the internal number before showing it to us. Arguably, they are lying to us.

But are they really? The reason to doubt this conclusion is that the values shown in those inspectors accurately reflect the value being used to render the characters on-screen. To see what I mean, look at the last example on the test page, where there’s sub-pixel size testing. The “O” characters run from a flat 10 pixels to a flat 11 pixels in tenths (or less) of a pixel, all of their font-sizes assigned with inline style elements to pin the characters down as much as possible. In Safari, you can see the size jump up one pixel right around the text’s midpoint, where I wrote font-size: 10.5px. So everything from 10px to 10.49px gets drawn at 10 pixels tall; everything from 10.5px to 11px is 11 pixels tall. Safari’s inspector reflects this accurately. It’s telling you the size used to draw the text.

In Opera 10.10, you get the same thing except that the jump from 10 to 11 pixels happens on the very last “O”, both visually and in the inspector (Dragonfly). That means that when it comes to font sizes, Opera always rounds down. Everything from 10px to 10.9px"�and, presumably, 10.99999px for as many nines as you’d care to add"�will be drawn 10 pixels tall. Brilliant.

In Firefox for OS X, there’s no size jump. The “O” characters look like they form a smooth line of same-size text. In fact, they’re all being drawn subtly differently, thanks to their subtly different font-size values. If you use OS X’s Universal Access screen zooming to zoom way, way in, you can see the differences in pixel shading from one “O” to the next. Even if you don’t, though, the fact that it’s hard to tell that there is an increase in size from one end of the line to the other is evidence enough.

In Firefox for XP, on the other hand, the size jump occurs just as it does in Safari, going from 10 pixels to 11 pixels of text size at the 10.5 mark. But Firebug still reports the correct computed font-size values. Thus, its reported value doesn’t match the size of the text that’s been output to the screen. Arguably, it’s lying just as much as Safari and Opera, in a different way.

But, again: is it really? The computed values are being accurately reported. That there is a small variance between that fractional number and the display of the text is arguably irrelevant, and can lead to its own confusion. Situations will arise where apparent rounding errors have occurred"�I see people complain about them from time to time"�when the apparent error is really an artifact of how information is delivered.

I have my own thoughts about all this, but I’m much more interested in the thoughts of others. What do you think? Should web inspectors report the CSS computed values accurately, without regard to the actual rendering effects; or should the inspectors modify the reported values to more accurately reflect the visual rendering, thus obscuring the raw computed values?

Addendum 10 Feb 10: I’ve updated the test page with a JS link that will dynamically insert the results of getComputedStyle(el,null).getPropertyValue("font-size") into the test cases. The results are completely consistent with what the inspectors report in each browser. This tells us something about the inspectors that most of us probably don’t consciously realize: that what they show us rests directly on the same JS/DOM calls we could write ourselves. In other words, inspectors are not privileged in what they can “see”; they have no special view into the browser’s guts. Thus another way to look at this topic is that inspectors simply repeat the lies that browsers tell the world.

456 Berea St: sIFR default CSS hides content from at least one screen reader

Roger Johansson — Mon, 08 Feb 2010 18:30:09 +0000

Just a heads-up to anyone using sIFR to render text: the default CSS that comes with sIFR hides the replaced text from the VoiceOver screen reader. I don't know if any others are affected "� VoiceOver is the only screen reader I have been able to verify this problem in.

Read full post

Posted in Accessibility, CSS, Typography.

Eric Meyer: Events and A Day, Belatedly

Eric Meyer — Mon, 08 Feb 2010 15:29:11 +0000

I’m a bad conference organizer.

Why? Because we opened the An Event Apart 2010 schedule for sales back in, um, flippin’ November, and I never mentioned it here. Cripes, I never even posted when we announced the lineup of cities. I could go through the great big long sob-story list of reasons why 2009 was really tough and blah blah blah, but when you get right down to it, I fell down on my job.

Okay. So. Time to correct that.

(deep breath)

Hey everyone, check it out: the complete tour schedule for An Event Apart 2010! Woohoooo!

Seattle: April 5-7, 2010 (yes, three days; more on that anon)
Boston: May 24-25, 2010
Minneapolis: July 26-27, 2010
Washington, DC: September 16-17, 2010
San Diego: November 1-2, 2010

We’ve got a pretty killer lineup, if I do say so myself. You can get the mostly-complete list from our opening-of-sales announcement last November. It lists the people we had confirmed at the time; there have been a few additions since then. Check out your city of choice to see who’s going to be there! (But always remember that speaker lineups are subject to change: speakers are people too, and life has a way of interfering with schedules. I myself had to withdraw from An Event Apart Boston last year due to a family emergency.)

The price to register for these two-day, one-track Events is the same as it was in 2009, and there are educational and group discounts available for those who are interested.

But wait, I just said “two-day” when the first show of the year is clearly three days. What gives?

Seattle is the site of our first-ever A Day Apart, a full-day workshop that can be attended on its own or as part of a full three days of Event Apart ecstasy. And the inaugural Day Apart will be nothing less than a detailed plunge into HTML 5 and CSS3 with Jeremy Keith and Dan Cederholm. Jeremy handles the markup; Dan gets stylish. It’s going to be fantastic. I’m going to be in the back of the room for the whole day, soaking up as much as I can.

If you want to attend just the workshop, it’s $399 for the whole day if you buy an early bird ticket (available through March 5th). The price goes up $50 when early bird ends, and another $100 if you show up at the door. But I wouldn’t recommend that last, because I don’t think there will be any tickets available at the door. Again: if you show up unannounced on the day of the workshop and ask to buy a ticket, we will most likely have to turn you away, because I expect that there won’t be any seats available.

On the other hand, maybe you’d like to experience more than just one day of AEA goodness. Maybe you’d like to go whole hog and attend both the two-day Event Apart and the subsequent Day Apart, soaking up all the knowledge and enthusiasm and camaraderie that typifies An Event Apart. And who could blame you? If you do that, then the total early bird price for all three days is $1,190, whereas buying the event and workshop passes separately would total $1,294. That’s right: you actually get slightly more than $100 off the cost of the workshop if you attend all three days, over and above the early bird discount. (Or you can think of it as getting $100+ off the cost of the conference. We’re not fussy.)

As it happens, these three-day passes have proved quite popular. So if you want to get your hands on one of those"�or on any Seattle tickets, whether one, two, or three days"�I wouldn’t wait too long. Our internal analyses suggest that there will come a time, some time before the doors open on April 5th, that the ability to buy a ticket will cease to be. It may even pine for a fjord or two.

As for the four shows that come after Seattle, well, they’re looking pretty popular too.

I know I say this every year, but I’m really excited about what we’ve got planned for the year. Jeffrey and I constantly and (we hope) consistently strive to create an event that we ourselves want to attend, and that’s absolutely true of the shows and workshop we have planned in 2010. I can’t wait to hear what the speakers and attendees have to share. Hope to see you there!

QuirksMode: The iPhone obsession

Mon, 08 Feb 2010 12:13:20 +0000

Since my attempts at capturing web developers’ hearts and minds by publishing fundamental research have failed miserably but my thirst for attention continues unabated, today I will once more shout at iPhone developers. That’s proven to work.

More specifically, today I will shout at web developers who think that delicately inserting an iPhone up their ass is the same as mobile web development.

Before we start, a little thought experiment. Suppose I proposed the following:

IE6 is today’s most advanced browser. (Note: this was actually true back in 2000. Please bear with me.)
IE6’s market share is about 80%.
The other browsers are way worse than IE6, and developing for them is a pain; something we’re not interested in and are a bit afraid of.
Therefore we will develop websites exclusively for IE6.

Would you agree with those sentiments, even if we’re back in 2000 and IE6 is really the best browser we have?

Or would you reply that our sites should work as well as they can in all browsers through the use of web standards, progressive enhancement, and all the rest of the best practices we’ve been preaching for the past ten years?

I distinctly remember a time when we web developers cared about such concepts. But those times are long gone.