WebDev FeedHouse

W3C: W3C Launches Decisions and Decision-Making Incubator Group

W3C Staff — Mon, 15 Mar 2010 06:00:16 +0000

W3C is pleased to announce the creation of the <a href="/2005/Incubator/decision/">Decisions and Decision-Making Incubator Group</a>, whose mission is to determine the requirements, use cases, and a representation of decisions and decision-making in a collaborative and networked environment suitable for leading to a potential standard for decision exchange, shared situational awareness, and measurement of the speed, effectiveness, and human factors of decision-making.. The following W3C Members have sponsored the <a href="/2005/Incubator/decision/charter">charter</a> for this group: DISA, MITRE, and CNR. Read more about the <a href="/2005/Incubator/">Incubator Activity</a>, an initiative to foster development of emerging Web-related technologies. Incubator Activity work is not on the W3C standards track but in many cases serves as a starting point for a future Working Group. </content>

W3C: User Agent Accessibility Guidelines (UAAG) 2.0 Updated; New Implementation Guide Published

W3C Staff — Mon, 15 Mar 2010 06:00:16 +0000

The <a href="/WAI/UA/">User Agent Accessibility Guidelines Working Group</a> has published an updated Working Draft of the <a href="/TR/2010/WD-UAAG20-20100311/">User Agent Accessibility Guidelines (UAAG) 2.0</a>. UAAG defines how browsers, media players, and other "user agents" should support accessibility for people with disabilities and work with assistive technologies. This draft adds requirements in seven new areas, including support for speech input, video playback controls and a new section on conformance. It introduces a new supporting document, <a href="/TR/2010/WD-IMPLEMENTING-UAAG20-20100311/">Implementing UAAG 2.0</a> as a First Public Working Draft. Read the <a href="http://lists.w3.org/Archives/Public/w3c-wai-ig/2010JanMar/0078.html">invitation to review the UAAG 2.0 Working Draft</a> and about the <a href="http://www.w3.org/WAI/">Web Accessibility Initiative (WAI)</a>. </content>

W3C: Community Invited to Discuss Conversational Applications at Workshop

W3C Staff — Mon, 15 Mar 2010 06:00:16 +0000

W3C announced today a <a href="/2010/02/convapps/cfp">Workshop on Conversational Applications - Use Cases and Requirements for New Models of Human Language to Support Mobile Conversational Systems</a>, 18-19 June 2010 in Somerset, New Jersey (USA), Hosted by Openstream. There is currently an increasing need for new capabilities of the human language model to support sophisticated conversational applications. The goal of the Workshop is to understand the limitations of the current W3C language model in order to develop a more comprehensive one. Participants will collect and analyze use cases and prioritize requirements that ultimately will improve support for language capabilities that are unsupported today. Position papers are due 2 April. Please see the <a href="/2010/02/convapps/cfp">Call for Participation</a> for more information. </content>

W3C: WebCGM 2.1 is a W3C Recommendation

W3C Staff — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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 — Mon, 15 Mar 2010 06:00:16 +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>

Microsoft - IEBlog: Facebook Add-ons for IE8

ieblog — Fri, 12 Mar 2010 20:36:00 +0000

Hi,

In this post, I will introduce you to some of the most compelling Facebook add-ons for Internet Explorer 8.

Share with Facebook Accelerator

The Share with Facebook Accelerator allows you to share any text, link, or page with your Facebook friends with a single click. You can use this accelerator by selecting either some text or a link, or by right-clicking on any part of the page.

Install here: http://www.ieaddons.com/en/details/204/Share_on_Facebook/

The technical beauty of this add-on is that it is extremely simple. In fact, it is contained in a single XML file, which is based on the OpenServiceDescription specification.

Facebook Web Slice

The Facebook Web Slice allows you to stay up to date with what's happening in your Facebook network. Regardless what website you are on, you can click at any time on the web slice title and display the recent messages from your friends on your board.

Install here: http://www.ieaddons.com/en/details/social/Facebook_Web_Slice/

The Web Slice uses the Facebook Connect APIs to connect to your account and it shows a notification when new content is available. Special thanks go to the MVP Konstantinos Pantos for his contribution to the community.

Facebook Search Provider

Do you need to search for someone on Facebook? You can start right away from the browser search box!

Install here: http://www.ieaddons.com/en/details/searchhelpers/Facebook/

Again, this extension is built on top of an XML file which describes the end-point for the search provider.

Facebook Toolbar

The Facebook Toolbar lets you to share with your friends while browsing anywhere on the web - get notified, share content, upload photos, and update your status no matter where you are!

Install here: http://www.facebook.com/toolbar#!/toolbar?v=app_4949752878

The source code of this toolbar is available on github.

Thanks to the Facebook Team for these great extensions!

If you have any feedback or you would like to highlight other great IE8 add-ons, please leave a comment to this post.

Giorgio Sardo
Web Technical Evangelist
Microsoft Corporation

Vitamin: Somewhere, Superficial, & So Much More: Designing for Conversion Experiences

Chrissie Brodigan — Fri, 12 Mar 2010 18:20:20 +0000

Lead gen pages are often misunderstood as standalone, single-page designs. There’s a science behind A/B testing and optimizing lead gen pages, but there’s also a component of creative user experience that should not be overlooked as you drill deeply into what drives your users through your conversion funnel.

Some user behaviors make clear sense, while others can confound your expectations. Overall, however, designing a complete experience around a conversion page is best understood taking these 3 “Ss” into consideration:

Somewhere"�Users get to conversion pages from somewhere, so go there first!
Superficial"�Good looks matter. Users respond to a particular aesthetic, so try different designs!
So Much More"�Users engage deeper through community, so get them connected to you and each other! (FYI a Facebook Fan Page is a great ecosystem & it’s free)

Okay, so few weeks ago I posted about a redesign I’m working on for a lead generation page. That project began with a single page, but preliminary outcomes further demonstrated that we needed to step backwards and design for an entire experience, which is where Somewhere, Superficial, and So Much More came into play.

I’ll explain!

First, our initial A/B test is over:

Good news"�we didn’t break the existing conversion rate.
Better news"�we raised the conversion rate a little bit ;-)
Great news"�we blew up our Facebook Fan page by designing a thoughtful “Thank You”! (*We increased fan acquisition from 3 fans per day to 30+ fans per day)

Second, we’re embarking on Phase 2 of our test plan, so let me share what that plan looks like, because A/B testing can be delivered in a number of ways. Here is the 3-phase method I recommend and that we’re currently using:

Phase 1: Update, Don’t Break

(This phase is optional, in the project I’m working on we did need to update an older design before we could effectively move forward with testing.)

Update the design to a higher standard that better expresses the brand
Don’t break existing conversion (50 v. 50 split test, confirmed by a 5 v. 95 follow-up)
Phase original design out completely

(Current design in the wild, original design)

Phase 2: Design Different Concepts

Create 2 more well-informed aesthetically different designs
Conduct user testing (DIY-style works well!)
Release new designs into testing cycle in increments (10 v. 90% to start)

(Potential design to test)

Phase 3: Optimize One

Select the “winning” design from the 3 that have been tested
Optimize the winning design with A/B testing of the smaller elements on page (copy, image, steps, etc)

(Potential design to test)

Third, as we prepare for our next test, which will involve 3 very different designs, here are things we considered about the current experience to make sure we covered “Somewhere, Superficial, and So Much More”:

Traffic Sources

It’s important to learn about where your users are coming from; this is the first step to take in order to reduce your bounce rate.

Are your users coming to your site after clicking an ad? Are users coming to your site to learn something, or have they accidentally gotten there, is the message seductive, on target?

User Testing

User testing doesn’t have to be expensive, drawn out, or complicated. Do informal (or formal if you can) user testing to gather feedback on the different designs before you release them into the wild.

Form Friction

At the heart of every conversion page is a form. Determine what variables can be tested, and what variable make sense to test. Some form friction is good!

Let me share an example, for us, it seems like “phone number” is an easy variable to test out. But, it turns out it’s not! While we might get more conversions by taking that element out of the form, we would also open ourselves up to less qualified leads, which we don’t want and also aren’t equipped to scale for.

(*Consider your community support team, if you put their phone number on your conversion page can they handle the incoming calls?)

The Thank You

Never underestimate the opportunity for a second level of conversion that your “Thank You” messaging provides for you to create and facilitate community and further engagement.
Our Thank You experience in our first round of testing, totally changed our approach to how we were looking at this conversion page.

To wrap it all up, throughout this process of redesigning and optimizing a single conversion page (we’ve planned on about 3 months of testing), we’ve really come to understand that the best and most effective lead gen page designs involve an entire experience that goes well beyond a single page. Suddenly, our little conversion page isn’t so lonely or so little.

Take a look at your app’s conversion page, rally your team, and consider the impact of Somewhere, Superficial, and So Much More.

456 Berea St: Geek Meet Gothenburg March 2010

Roger Johansson — Fri, 12 Mar 2010 13:25:21 +0000

It's been over three years since Geek Meet Gothenburg February 2007, so it's about time for another one. Like last time, this event will take place at the NetRelations office in Gothenburg, Sweden. The date is March 24, 2010.

We'll be talking about the usual web geek stuff, likely with a bit of emphasis on HTML 5 and other up-and-coming web things. Check out Geek Meet Göteborg "� the sequel! on the NetRelations blog for the details and to sign up.

Read full post

Posted in Web General.

ajaxian: Ambilight Sample; video and canvas

Dion Almaer — Fri, 12 Mar 2010 11:30:20 +0000

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:

PLAIN TEXT

JAVASCRIPT:

function getMidColors(side) {
var w = buffer.width,
h = buffer.height,
lamps = getOption('lamps'),
block_width = getOption('block_size'),
block_height = Math.ceil(h / lamps),
pxl = block_width * block_height * 4,
result = [],
img_data = buffer_ctx.getImageData(side == 'right' ? w - block_width : 0, 0, block_width, h),
total_pixels = img_data.data.length;
for (var i = 0; i <lamps; i++) {
var from = i * w * block_width;
result.push( calcMidColor(img_data.data, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) );
}
return result;
}

Then, two canvas objects are placed, one on each side, of the video itself.

456 Berea St: Reverse chronological order comments

Roger Johansson — Thu, 11 Mar 2010 19:43:59 +0000

Maybe I'm old-fashioned, but I don't get why some sites display reader comments in reverse chronological order. It seems especially popular on newspaper sites, which also for some reason tend to use paging for comments. I think the combination of reverse order and paging makes trying to follow discussions very frustrating.

Still, since more and more sites seem to display comments this way I guess there are some people who actually prefer comments displayed backwards, so it is probably here to stay.

Read full post

Posted in Usability.

ajaxian: YQL Geo library "� all your geo needs in pure JavaScript

Chris Heilmann — Thu, 11 Mar 2010 15:04:15 +0000

I just finished doing some talks on geo hacking (slides are available here) and how to use some of the Geo technologies Yahoo and Google provide as part of a University gig in Atlanta.

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

Detecting the visitor's location with the W3C geo API and with IP as a fallback
Find geo location from text
Find location from lat/lon pair
Find locations in a certain web document (by URL)
Get the location for a certain IP number

And all of that in pure JavaScript. For example:

PLAIN TEXT

JAVASCRIPT:

yqlgeo.get(
'paris,fr',
function(o){
console.log(o);
}
)

Will get you:

PLAIN TEXT

JAVASCRIPT:

"place":{
"lang":"en-US",
"uri":"http://where.yahooapis.com/v1/place/615702",
"woeid":"615702",
"placeTypeName":{
"code":"7",
"content":"Town"
},
"name":"Paris",
"country":{
"code":"FR",
"type":"Country",
"content":"France"
},
"admin1":{
"code":"",
"type":"Region",
"content":"Ile-de-France"
},
"admin2":{
"code":"FR-75",
"type":"Department",
"content":"Paris"
},
"admin3":null,
"locality1":{
"type":"Town",
"content":"Paris"
},
"locality2":null,
"postal":null,
"centroid":{
"latitude":"48.856918",
"longitude":"2.341210"
},
"boundingBox":{
"southWest":{
"latitude":"48.658291",
"longitude":"2.086790"
},
"northEast":{
"latitude":"49.046940",
"longitude":"2.637910"
}
}
}

Other uses:

This gets the name and the country of a lat/lon pair:

PLAIN TEXT

JAVASCRIPT:

yqlgeo.get(33.748,-84.393,function(o){
alert(o.place.name + ',' + o.place.country.content);
})

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

PLAIN TEXT

JAVASCRIPT:

yqlgeo.get('visitor',function(o){
alert(o.place.name + ',' + o.place.country.content +
' (' + o.place.centroid.latitude + ',' +
o.place.centroid.longitude + ')'
);
});

Read all about it on my blog and enjoy!

QuirksMode: The payment argument is nonsense

Thu, 11 Mar 2010 14:35:02 +0000

In response to my HTML5 apps argument a few people came back to how the payment thingy is missing from my idea, and how it will (apparently) be worthless because of that. I’ve been thinking about that a lot in the past few days, and I’m increasingly of the opinion that the payment argument is nonsense.

Sure, everybody who does iPhone apps, or who’s glancing cursorily at the mobile market without trying to gain in-depth knowledge, currently believes that the App Store concept is going to be a huge success because of the opportunity for developers to earn some money. But they’re just wrong.

I did some back-of-napkin calculations and found that, macro-economically speaking, iPhone app development costs money right now. And yes, an individual developer can strike it rich, but that’s getting rarer and rarer. I do not want to build a new app ecosystem based on arguments from developers who just want to take a gamble in the App Store roulette. Gamblers’ arguments are not real arguments.

Vitamin: Strategy Basics: It's Really all about having a Plan

Jaan Orvet & Andreas Carlsson — Thu, 11 Mar 2010 14:00:00 +0000

Strategy. You hear about it all the time. One must have a strategy/work on a strategy/follow a strategy and so on. Business types like to say “strategy” a lot as it sounds big, complicated and important.

And it is important, but there is no need for it to be complicated. Quite the opposite.

At the heart of it all “strategy” is just about having a plan for the thing you are working on. Or as Wikipedia puts it “a strategy is a plan of action designed to achieve a particular goal”.

Getting the Strategy Right

If there is ever a time to look at what’s important in a project, it is early on, in the strategy stage.

Let us assume that your client doesn’t have a strategy for their next web project.

Before you build, design, code or write anything you need to think about what the project needs to achieve.

This is in part because strategy can mean almost anything, depending on the needs of the client, the size of their audience and ultimately the goal of your client. And it will mean different things at different times during the life-span of a project: you may have one strategy to launch with, another for the ongoing management of the site and so on.

Thinking the project through, seeing how one thing leads to another on the way to the project’s goal is a very healthy thing to do.

The one thing all strategies must have in common is that they tie in with your client’s overall business goals. (You’d be surprised how often clients themselves forget this simple fact!) If it doesn’t, the client will never be happy with your work even if they were the ones who ignored the business goal connection.

That’s why you should be thrilled when a client asks for your help in developing their web project strategy (or asks you to help them find someone who can create it for them).

It is an excellent opportunity to make sure that you, or the people you choose to collaborate with, create a to-the-point strategy that helps the client reach their goals and in the process makes you look like an absolute star who deserves lots more commissions.

Strategy as a Sales Tool

Before we continue, you may wonder if you really need to bother with all this strategy stuff. The answer is yes you do, especially if the client asks you to help craft it.

A strategy, even one that is just a paragraph in length, shows that you have understood the task at hand. It shows the direction you will take the project, and it is an effective way to put your client’s mind at ease.

How to Do It

A good web strategy should always cover the following five points.

What you are doing
Who you are doing it for
Why you are doing it
How you are doing it
When you are doing it

Here is an example:

Your client, the Think Vitamin Dairy, tell you they want to sell more of their orange flavored Think Vitamin Milk.

To make sure you have enough information to cover the five points above you ask the client loads of questions, including:

Who currently buys the Think Vitamin Milk?
Why and how do they buy it?
When do they drink it?
What do they think of it?
Have the sales changed over the past year, if so how and why?

The client tells you that Think Vitamin Milk is mostly gulped by web people who like the energy kick they get from it. They buy it online in crates of twelve bottles and according to their tweets some of them have started drinking it when they go hiking in the Cotswolds on the weekends.

After a spot of thinking you come up with a plan, a strategy, which suggests the client invest their budget in creating a smartphone app to reach a new audience instead of buying advertising. You flesh it out with a few pointers:

Think Vitamin Dairy should build an iPhone app aimed at ramblers to help them plan hiking trips – The Think Vitamin “Think Hiking” app. (A new audience, with existing customers mixed in is golden.)
The app lets users plan hikes and share them with their friends to get everyone ready for the excursion (virality – always a good thing!).
The app would show where along the trail the energizing Milk can be bought and plot the local independent dairy farms who provide the cow juice. (If you like hiking you probably care about food sustainability too.)
The app is supported by a small teaser and signup site that, after the app has launched, displays tweets from hikers and shows where the most popular trails are.

Instead of throwing money at advertising, the client’s milk brand would be known for a very useful app that is associated with good friends, good times and days off in the country.

There it is, a good simple and easy to understand strategy tied to the goal of selling more orange flavored milk.

In Conclusion

Strategy is important, but it’s not rocket science. It is really just about having a plan.

The more you work with strategy, the more you learn and the more you will want to learn. You will find new ways of approaching old problems, and it can be just as addictive as the work you are already passionate about.

This post was all about the basics, but to be honest that’s where many clients and us web creators go wrong. Get the basics right, and keep your eyes open and you will become an even better web professional in no time.

Best of all, the more comfortable you get with the strategy portion of your work the better you will be at understanding the client’s needs and the more valuable you will become to them.

ajaxian: SVG Wow!

Brad Neuberg — Thu, 11 Mar 2010 10:35:01 +0000

Erik Dahlström and Vincent Hardy have put together a cool website, called SVG Wow!, that showcases SVG doing things you didn't expect SVG can do:

There are alot of unique demos on there.

One of my favorites uses SVG, HTML5 Audio, Web Fonts, and YUI to play music accompanied by flying animated lyrics (Chrome and Safari only):

There are lots of other great samples for you to play with and study!

ajaxian: Ext JS 3.2 beta: stores, components, transitions, and themes

Dion Almaer — Thu, 11 Mar 2010 06:12:05 +0000

The Ext JS team have announced the 3.2 beta which includes new components and goodness.

Take the animated DataView transitions for example:

On top of that, the release includes:

Multiple sorting and filtering on Ext.data.Store
Composite Fields
Slider improvements
Toolbar plugins: ToolbarReorderer and ToolbarDroppable
New Accessibility Theme: compliant with Section 508 of the Disabilities Act.
Quality Assurance: Unit Testing: over 180 bug fixes and enhancements over 3.1

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 sught, 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.

ajaxian: CSS3 Please! Instant results"� Thank You

Dion Almaer — Wed, 10 Mar 2010 13:39:24 +0000

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

border-radius
box shadow
gradients
rgba support in backgrounds
transforms
font-face

Really nice way to make tweaks inline in the page..... nicely done. Hope to see some other examples out there :)

ajaxian: HTML Minification

Dion Almaer — Wed, 10 Mar 2010 11:14:51 +0000

Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage.

What does it do?

Kangax has forked John Resig's HTML parser which parses the HTML and sends that into the Minifier. This has rules that do things like whitespace optimization, comment removal, and collapsing boolean attributes (e.g. disabled="true" -> disabled).

He also has a linter going:

While working on minifier, I realized that oftentimes the most wasteful part of the markup is not white space, comments or boolean attributes, but inline styles, scripts, presentational or deprecated elements and attributes. None of these can be simply stripped, as that could affect state of the document and is just too obtrusive. What can be done, however, is reporting of these occurences to the user. HTMLLint is even a smaller script, whose job is exactly that"�to log any deprecated or presentational elements/attributes encountered during parsing. Additionally, it detects event attributes (e.g. onclick, onmouseover, etc.). The rationale for this is that moving contents of event attributes to external script allows to take advantage of resource caching.

ajaxian: Harmony: Canvas Drawing Tool

Michael Mahemoff — Wed, 10 Mar 2010 09:50:44 +0000

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = 'darker'. This was on the HTML5 spec before but got removed. Just so you know what I'm talking about, this is like the "multiply" blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

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

ajaxian: Spectrum Visualization with the HTML5 Audio Data API

Dion Almaer — Tue, 09 Mar 2010 11:20:07 +0000

The HTML5 specification introduces the and media elements, and with them the opportunity to dramatically change the way we integrate media on the web. The current HTML5 media API provides ways to play and get limited information about audio and video, but gives no way to programatically access or create such media. We present a new extension to this API, which allows web developers to read and write raw audio data.

The above quote is from the Audio Data API extension that joins a bunch of juicy developer work in Firefox 3.7.

Thomas Sturm has taken that API and created a spectrum visualization a kin to some of the great work by Scott Schiller (using Flash).

There is a new onaudiowritten attribute:

PLAIN TEXT

HTML:

<audio src="song.ogg" controls="true"
onaudiowritten="audioWritten(event);">
</audio>

that lets you get access to info such as the spectrum:

PLAIN TEXT

JAVASCRIPT:

function audioWritten(event) {
spectrum = event.mozSpectrum;
var specSize = spectrum.length, magnitude;
// Clear the canvas before drawing spectrum
ctx.clearRect(0,0, canvas.width, canvas.height);
for ( var i = 0; i <specSize; i++ ) {
magnitude = spectrum.item(i) * 4000; // multiply spectrum by a zoom value
// Draw rectangle bars for each frequency bin
ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
}
}

Add to that the ability to write audio....

PLAIN TEXT

JAVASCRIPT:

var audioOutput = new Audio();
audioOutput.mozSetup(2, 44100, 1);
var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
audioOutput.mozAudioWrite(samples.length, samples);

Nice work all around.

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!

ajaxian: modulr: a CommonJS module implementation in Ruby for client-side JavaScript

Dion Almaer — Mon, 08 Mar 2010 11:28:40 +0000

modulr is a CommonJS module implementation in Ruby for client-side JavaScript

Ruby? what does that have anything to do with it? Ah, its from one of those Prototype guys isn't it.... Yup, Tobie is at it again, this time with modulr:

modulr accepts a singular file as input (the program) on which is does static analysis to recursively resolve its dependencies.

The program, its dependencies and a small, namespaced JavaScript library are concatenated into a single js file.

The bundled JavaScript library provides each module with the necessary require function and exports and module free variables.

This can also help sharing that CommonJS code. I recently did just that and had some:

PLAIN TEXT

JAVASCRIPT:

// check to see if you are running inside of node.js and export if you are
if (typeof GLOBAL == "object" && typeof GLOBAL['node'] == "object") {
exports.Appetite = Appetite;
}

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.

ajaxian: Friday fun: Let's translate YUI3 to jQuery

Chris Heilmann — Fri, 05 Mar 2010 13:52:01 +0000

I just came across this wonderful Gist on gitHub:

PLAIN TEXT

JAVASCRIPT:

var $;
YUI().use('*', function(Y){
$ = Y.get;
for(var p in Y) {
$[p] = Y[p];
}
});
// test
$('body').append("boo!");

In case you want to use YUI3 but really really like jQuery syntax :) OK, it breaks the whole sandboxing idea of YUI3, but that's a small price to pay, right?

ajaxian: Firefox gets hardware acceleration in early stage

Dion Almaer — Fri, 05 Mar 2010 11:25:43 +0000

Bass Schouten is a cool name, and the Mozillan has presented Direct2D hardware acceleration.

You have to grab Firefox nightly, do the about:config / gfx.font_rendering.directwrite.enabled game, but then you get to see it in action.

IE9 showed off how they will support hardware rendering, and I am sure we will see more at MIX, but it is very cool to see this across the board.

CSS Transforms/Transitions/Animations are going to feel like butter in 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!

ajaxian: Color Picker: Works even in IE6

Dion Almaer — Thu, 04 Mar 2010 11:02:56 +0000

Works even in IE6

Love that quote from the color picker over at RaphaelJS land. This plugin by Dmitry Baranovskiy gives you an easy color picker in short order:

PLAIN TEXT

JAVASCRIPT:

var icon = Raphael("picker", 23, 23).colorPickerIcon(11, 11, 10);
icon.attr({cursor: "pointer"}).node.onclick = function () {
document.getElementById("benefits").style.visibility = "visible";
var out = document.getElementById("output");
out.style.visibility = "visible";
// this is where colorpicker created
var cp = Raphael.colorpicker(document.body.offsetWidth / 2 - 150, 250, 300, "#eee", document.getElementById("picker2"));
out.onkeyup = function () {
cp.color(this.value);
};
// assigning onchange event handler
cp.onchange = function (clr) {
out.value = clr;
document.body.style.background = clr;
document.body.style.color = Raphael.rgb2hsb(clr).b <.5 ? "#fff" : "#666";
};
// that's it. Too easy
icon.node.onclick = null;
};

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.

ajaxian: Touching Cloth; Canvas Fu

Dion Almaer — Wed, 03 Mar 2010 11:12:29 +0000

Andrew Hoyer shows his canvas Fu with Cloth, a great experiment using nice physics.

What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out every little detail that slows things down.

The most computationally expensive part is trying to satisfy the constraints. To do this requires the calculation of distance between two points. This is easy to do with a little math, but that often involves an expensive square root. This is something that cannot simply be thrown out either, so what do you do? You approximate it. There are lots of mathematical tools for approximating functions, in this case I chose the first couple terms of a taylor expansion.

Check out his fast vector, constraints, and finally the cloth itself.

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

ajaxian: Fin: self updating template language

Dion Almaer — Tue, 02 Mar 2010 16:35:09 +0000

Marcus Westin has created a new templating language called fin. It is an interesting beast, and he gave us a run down:

Since this past November I've been working on a realtime templating system I call "fin". I'd love to get some eyes on it, and hope that you'll find it exciting. There is no demo, but quite a bit of information and if you're on OS X it's trivial to get the system set up on your own machine.

The basic idea is this... Rather than describing your data, you describe how you want your data to be viewed. Fin takes it from there in terms of persisting new data as it gets created. In addition, all views of any piece of data is globally synchronized. If one computer makes changes to a user's name for example, then those edits are reflected for anyone viewing that user's name as well, keystroke by keystroke. The way you create value views and input views goes like

PLAIN TEXT

HTML:

<div> User name: (( Value user.name )) </div><div> Edit user name: (( Input user.name )) </div>

More detailed examples can be found here.

You can also chain references to items, for example (( Value user.friend.name )). Now, if user.friend.name changes, then the Value view is instantly updated. Even cooler, if the user's friend reference changes to a new friend, then the value view will accurately reflect the new friend's name.

To get started on OS X 10.6 is as easy as
git clone git://github.com/marcuswestin/fin.git
cd fin
sudo make install-node
make deps
make run-couchdbx
And voila! Just navigate to localhost/path/to/fin/examples/from-html.html and you're good to go.

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/

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.

ajaxian: New performance case studies"� starting with the Digg widget

Dion Almaer — Mon, 01 Mar 2010 11:53:06 +0000

Would we all like Steve to sit down with us on our project and do a performance case study? Well, we may not get that, but we are getting to at least sit in on others.

Steve has kicked off his long awaited series that runs performance case studies on third party content. I have been talking to Steve about this for a couple of years, so it is great to see it. It is a sensitive topic as you never want to show up a team when you are just trying to help and educate.

First on the block? The Digg widget.

Steve goes into detail and finds a lot of short comings. You could probably guess some of the bad actors. Mr. document.write() appears for example. We get the problems, and proposed solutions to the issue. Steve also tries to note what a user of third party content can do regardless of if the third party guys fix their issues (put in iframe!).

Here are the most important performance issues along with recommended solutions.

9 HTTP requests, 52 kB transferred over the wire, and 107 kB of JavaScript (uncompressed) is a lot of content for a single widget.
Recommendations:

Concatenate these three scripts: JS_Libraries, widgetjsvars, and omnidiggthis. (eliminates 2 HTTP requests)

Run Page Speed's "Defer loading JavaScript"� feature and see how much of the JavaScript is not used. If it's sizable, delete it. (This feature is currently broken in the latest version of Page Speed, but a fix is imminent.) (eliminates ?? kB)

Optimize the images "� widget-logo.png and get-widget.png can both be reduced by ~3 kB. (eliminates ~6 kB)

Sprite widget-logo.png and shade-com.png. (eliminates 1 HTTP request)

The widget's scripts block the main page's content from downloading. Looking at the waterfall chart, the main page includes the image "digg-waterfall.png"� (row 10). Notice how this image doesn't start downloading until after all the scripts for the Digg widget are received.
Recommendations:

Instead of loading the scripts using document.write, load them without blocking other downloads. The scripts are already suffering from race condition behavior, as evidenced by this comment from widgetjsvars:

1: if (!digg || !digg.$) setTimeout(function() { diggwb(obj); }, 200); //hack for IE not loading scripts that are included via document.write until it decides too

So it probably isn't too much work to avoid race conditions when making all the scripts load asynchronously.

The widget's stylesheet blocks the main page from rendering in IE.
Recommendations:

Instead of loading the stylesheet using document.write, load it via JavaScript as described in 5d dynamic stylesheets.

Four of the resources aren't cached long enough.
Recommendations:

Two scripts aren't cacheable because they have an expiration date in the past. widgetjs is part of the snippet, so it can't have a long expiration date, but something like an hour or a day would be better than a date in the past. widgetjsvars could have a far future expiration date since its URL is specified in widgetjs.

The three images are only cacheable for a day. They should have a far future expires header since the image filename can be change if it's modified.

There are approximately 30 inefficient CSS selectors. Because this stylesheet is part of the main page, the selectors will cause the overall page to render more slowly when these selectors are applied to the elements in the main page.
Recommendations:

Reduce the performance impact by simplifying these CSS selectors.

Four of the resources have ETags which reduces their cacheability.
Recommendations:

Configure the ETags for widget.css, widget-logo.png, get-widget.png, and shade-com.png.

This is just the first example. What else would you like to see Steve tackle?

ajaxian: Mozilla JägerMonkey: Method based JIT + Trace based JIT = speed

Dion Almaer — Sat, 27 Feb 2010 05:05:58 +0000

David Anderson: "TraceMonkey has rocket boosters, so it runs really fast when the boosters are on, but the boosters can't always be turned on."

Opera's new JIT compiler Carakan is doing well as we just posted. What is Mozilla doing with TraceMonkey? A lot.

Mozilla JägerMonkey adds method based JIT (of V8 and Nitro fame) to keep the boosters on.

We learn more from David Mandelin and David Anderson.

ajaxian: Opera 10.50 out for Mac, impressive performance and more

Dion Almaer — Fri, 26 Feb 2010 21:27:43 +0000

The Opera team has released 10.50 for Mac and along with it some impressive performance numbers:

Stabilization Improvements: You will find that this build is much more stable than the pre-alpha build.

More polished user interface: The whole UI is more polished now. We're still not done yet, and expect more polishes and improvements in the builds to come.

Opera Unite: Opera Unite now works with this release. You can browse through and download unite apps through the Unite Apps Repository.

HTML5 <video>: This beta now supports the html5 <video> tag.

Widgets as standlone apps: We've already talked about widgets as standalone apps, but this functionality was till now, only available in windows builds. Now even in this build of 10.50 beta for mac, you can use widgets as standalone apps. Check out this ODIN post by Patrick Lauke on standalone widgets for more information.

New Developer Tools Menu: You can go to 'View->Developer Tools' Menu to access common and usefull tools for developers, such as Opera Dragonfly, cache information, the error console, the source code of the page, and more.

Gregg Keizer talks about the performance side of things

According to tests run by Computerworld, Opera 10.5 was nearly 15% faster than Safari for Windows and almost 20% faster than Google's Chrome, the previous No. 1 and No. 2 browsers. Opera's preview was more than twice as fast as Mozilla's Firefox 3.6, over eight times faster than Opera 10.10, and 10 times faster than Microsoft's Internet Explorer 8 (IE8).

We tend to talk a lot about WebKit, Moz, and IE.... congrats to the Opera team on their impressive work.

ajaxian: ZooTool by MooTool(s)

Dion Almaer — Fri, 26 Feb 2010 11:25:12 +0000

Bastian Allgeier has developed a beautiful, native looking web application called ZooTool.

Zootool is a visual bookmark tool for images, videos, documents and links. It is completely based on Mootools, even though it looks more like a Cappuccino app!

Play with it. Enjoy it.

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!