Niall Kennedy

LinkedIn engineering’s client-side template evaluation

2012-01-25T21:40:24Z

LinkedIn shares their evaluation process for choosing a client-side templating solution from 18 different options across 15 formal metrics.

LinkedIn shares their evaluation process for choosing a client-side templating solution from 18 different options across 15 formal metrics. They ultimately chose dust to replace their Java Servlets and JSP.

[W]e found that for any non-trivial view, none of the templating options worked well across client and server unless the server could also execute JavaScript.

A useful read when evaluating dynamic HTML templates.

Map input autocomplete types in Chrome 15+

2012-01-25T20:33:10Z

Chrome 15 and above supports mapping input fields to specific types of data to improve the accuracy of autofill tools. The new WHATWG autocompletetype attribute proposal from Ilya Sherman of Google proposes 36 mapped tokens and two sections for autofill agents entering name, address, contact, credit card, business, or birthday data in a web browser.

Chrome 15 and above supports mapping input fields to specific types of data to improve the accuracy of autofill tools. Typically an autofill tool, either bundled with the browser or a third-party add-on, scans the page’s s and attempts to derive some meaning from the field’s name attribute and new HTML5 input type attribute values such as email or tel. The new WHATWG autocompletetype attribute proposal from Ilya Sherman of Google proposes 36 mapped tokens and two sections for autofill agents entering name, address, contact, credit card, business, or birthday data in a web browser.

Name
Email
Credit card

Google Chrome 15+ (November 2011 stable channel and later) parses an “x-autocompletetype” attribute from an and attempts to match the proposed standard tokens with a list of Chrome autofill types stored locally (and possibly on Google’s autofill servers). If the current user has entered their name, email, and credit card number into their browser’s autofill storage your webpage might receive very accurate pre-populated fields.

I added x-autocompletetype attributes to this post’s comment fields if you would like to try it out.

Open Graph protocol 1.1

2012-01-25T17:59:26Z

Open Graph protocol is a set of HTML+RDF markup elements used to summarize webpages on the public Internet when those pages are shared on Facebook, Google+, mixi, LinkedIn, and more. In this post I will summarize Open Graph protocol markup for easy inclusion in your site templates. Facebook completed its rollout of Timeline profiles and Open Graph activity aggregation last week, completing a set of changes announced at their f8 developer conference in September. Facebook also switched over to a new version of Open Graph protocol, the metadata language used to connect web pages in the public Internet with the sharing activity happening inside Facebook’s walls. In this post I will highlight some of the major features of Open Graph protocol 1.1 affecting how your web pages display and rank inside Facebook news feeds, Google+ streams, Mixi social streams, and LinkedIn shared stories. What is Open Graph protocol Semantics Populating a basic story template Images Title, site name Type URL Multimedia Video Audio Special type attributes Generate markup, validate PHP generator Validator Official tools Summary What is Open Graph protocol? When someone shares a URL on a social networking site such as Facebook the site tries to create a summary of the page: title, description, thumbnail image, metadata, and more. Open Graph protocol defines elements placed in the of a web page’s HTML markup summarizing the contents of the page. Fallbacks to HTML standard elements sometimes exist; Open Graph protocol is an explicit definition of those elements and more. Open Graph protocol markup informs Facebook shared stories, Google +Snippets, mixi check, and other social sites using explicit sharing markup and content classification. I will reference Facebook consumption of Open Graph protocol for the rest of this post as they are the main proponent of the specification and typically the main target of web page publishers including Open Graph protocol markup on their pages. Open Graph protocol markup affects pages shared with the “Like Button” social plugin, messages sent between Facebook users, links posted to a profile or news feed, and possibly search results returned by Facebook. The new Timeline activity groupings are based on Open Graph protocol defined web content when available. A link shared without Open Graph protocol markup relies on HTML fallbacks to generate a shared story summary. The content receives the most generic content classification of “website“ and may be de-emphasized in Multifeed rankings in favor of a more diverse set of stories. A link shared with additional metadata provided by Open Graph protocol markup generates a full story summary with a preview image, embedded video, special categorization, and more behind-the-scenes data used to search and rank shared content. Semantics Open Graph protocol 1.1 is based on RDFa Core 1.1 markup. The examples below use compact URI expressions (CURIEs) based on scoped prefixes first defined by a parent element such as . Populating a basic story template When a Facebook user pastes a link into their status update Facebook requests the document, parses the result, and displays a story preview in the status update composition box. The webpage title, description, and thumbnail images are displayed immediately in this preview template. The fully published story may include additional metadata and viewing actions depending on the rendering context: profile, news ticker, or social news feed. Images An image thumbnail displayed next to a shared story boosts engagement in the social news feed. It’s possible to explicitly define image thumbnails you would like to appear next to your shared links on Facebook by including an og:image Open Graph prot[...]

Google searches smartphone web as an iPhone

2011-12-15T21:41:17Z

Google's mobile search engine crawler now uses an updated User-Agent string designed to trigger iPhone-specific renderings of web pages.

Google’s mobile search engine crawler now uses an updated User-Agent string designed to trigger iPhone-specific renderings of web pages. The Googlebot-Mobile crawler is building a smartphone web index based on iOS 4.1 responses including redirects. Webmasters with smartphone-specific content may finally have a reason to generate mobile sitemaps. Googlebot will skew your iOS usage numbers if not properly treated as a robot.

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

Google mobile search acts like an iPhone, not an Android.

Windows 8, plugin-free browsing, and UA spoofing

2011-11-05T23:38:50Z

Microsoft released a developer preview of Windows 8 at this week's BUILD conference including a preview release of the next version of Internet Explorer. The new browser runs in two modes: with and without plugins. Microsoft is bundling a special compatibility view list to spoof iPhone, iPad, or even Firefox User-Agents to trigger special views on websites designed for a plugin-free or full-screen experience.

Microsoft released a developer preview of Windows 8 at this week’s BUILD conference including a preview release of the next version of Internet Explorer. Windows 8 will include a “Metro style browser,” a simplified appliance-like view based on Windows Phone tiles. The Metro interface is powered by Internet Explorer (Trident, Chakra) behind-the-scenes in a special “immersive” full-screen runtime without support for browser plugins such as Adobe Flash Player. Microsoft is bundling a special compatibility view list with a uaStringImmersive attribute to spoof an iPhone, iPad, or even Firefox User-Agent to trigger special views on websites designed for a plugin-free or full-screen experience.


youtube.com
tv.slashgear.com
mashable.com


Sites using feature detection at runtime helps avoid assuming the same features for desktop Internet Explorer and Metro’s “immersive” Internet Explorer. The application/x-shockwave-flash handlers present in one version of the browser may not be present in the next. Assuming Internet Explorer cannot handle XMLHttpRequest or display H.264 video with AAC audio inside a could land your hostname in the Compatibility View penalty box.

The Internet Explorer 9 compatibility view list is available online in XML format including existing featureSwitch handlers.

Feature detect at runtime or update your content negotiation User-Agent matchers for Internet Explorer 10 before Microsoft decides to spoof its User-Agent for iPad treatment.

Google Chrome 13 released to stable channel

2011-08-02T18:49:14Z

Google released Chrome 13 into its stable channel this morning with over 5200 revisions including Instant Pages. If your webpages are not already differentiating between attended and unattended pageviews using the Page Visibility API for site analytics (and other functions assuming live eyeballs and the opportunity for interaction with page elements) your pageview numbers are now likely inflated.

Google released Chrome 13 into its stable channel this morning with over 5200 revisions including Instant Pages. If your webpages are not already differentiating between attended and unattended pageviews using the Page Visibility API for site analytics (and other functions assuming live eyeballs and the opportunity for interaction with page elements) your pageview numbers are now likely inflated. Google may preload your pages and its associated resources from the search result page for supporting browsers such as Chrome 13 and later.

WebKit and Chrome prerendering

2011-06-30T05:44:55Z

Google search result pages now trigger a prefetch of top search result links in an effort to make navigating search results as easy as changing channels on your television. If Google's search algorithms determine there is a significant probability of user click-through on particular result they will instruct supporting browsers to preload the entire destination page including images, JavaScript, advertisements, and analytics. Update your web pages to be aware of the current page visibility state and track interactions, not background tasks. Google search result pages now trigger a prefetch and prerender of top search result links in an effort to make navigating search results as easy as changing channels on your television. If Google’s search algorithms determine there is a significant probability of user click-through on particular result they will instruct supporting browsers to preload the entire destination page including images, JavaScript, advertisements, and analytics. The page requests happen in the browser, looking like a regular webpage view with the exception of a few JavaScript variables addressable from your site’s JavaScript. Support for preloading webpages and all related assets is a feature of WebKit-based browsers released after May 2011, including Chrome 13. What’s happening How to add code to accommodate Summary What’s happening Any webpage may now ask supporting browsers to “prerender” another webpage to prime the browser cache and improved perceived load times. If Chrome discovers a element in your document’s it might trigger an unattended pageview. A few use cases currently short-circuit the browser’s attempt to prerender the page: HTTPS Content requiring browser plugins such as Adobe Flash

SSL statistics from Chrome and Googlebot

2011-05-19T19:13:57Z

The Google Chrome team released new statistics and implementation details on their proposed "False Start" abbreviated TLS handshake. Google claims the new handshake, introduced in version 9 of the Chrome browser in February, shaves an average of 120 milliseconds from a typical four-flight TLS handshake by accepting application data before both sides have communicated a "Finished" status.

The Google Chrome team released new statistics and implementation details on their proposed “False Start” abbreviated TLS handshake. Google claims the new handshake, introduced in version 9 of the Chrome browser in February, shaves an average of 120 milliseconds from a typical four-flight TLS handshake by accepting application data before both sides have communicated a “Finished” status. Chromium and its descendants such as Chrome can signal their acceptance of the abbreviated handshake protocol in the initial request for compatibility with 99.6% of known websites in the Google search index serving pages via the https scheme. Chromium flags incompatible sites in a blacklist text file bundled with the browser.

False Start is another example of the Chrome team speeding up the web by questioning existing protocols, introducing new ideas for how the Web could work enabled via a browser flag and possibly a server configuration, and defining a compatibility corpus based on the Web observed by Googlebot. SPDY is another good example. I like it.

Mike Belshe, an engineer on the Chrome team, has also been posting about unnecessarily long SSL certificate chains on large websites and the path to a short SSL chain including the competitive advantage of long-established certificate issuers. Good references for SSL/TLS behaviors behind the scenes that may be slowing down your websites and causing trust issues on mobile clients.

Powered by WordPress

2011-09-22T14:23:27Z

This blog is now powered by WordPress multisite.

(image) This blog is now powered by WordPress multisite. Automattic, the company behind WordPress.com major contributor to the WordPress project in employee hours and hosting, has been a client of mine since the summer of 2009. I co-organized the first WordCamp with project founder Matt Mullenweg in 2006 about a year after photoshopping some of the first WordPress apparel during the Webzine conference. I have co-hosted WordCamp San Francisco with Matt for the last two years. I submitted my first patch in early 2005 to improve Atom feed templates. Yet through all of my involvement with WordPress my main blogs have stayed on Movable Type. I finally patched pieces of WordPress core that were bothering me, waited for multisite to stabilize, ported over my theme, and wrote a few plugins for feature parity. This blog was previously powered by Movable Type, Blogger Pro, Blojsom, Radio Userland, First Class, hand-edited HTML, and HyperCard.

A publishing engine should serve its primary purpose of publishing the message you would like to serve out into the world. Over the years the number of templates generated with each new published message has grown to include desktop HTML, mobile HTML, web feeds such as Atom and RSS, sitemaps for search engine discovery, and notifications delivered to search engines, feed readers, and social sites with any content change. I am interested in implementing web publishing best practices and general community engagement on my blog; moving away from Perl-powered Movable Type to PHP-powered WordPress feeds my urge to tinker, experiment, and improve my site’s relationship with the broader web. Millions of websites powered by WordPress will be able to take advantage of the core patches and plugins I use on my own site. I’m also excited WordPress is finally moving to PHP 5.2 and MySQL 5 which should help speed up the software and collapse the many conditionals baked-in to the software.

If you are a WordPress core developer you can follow my patches on my WordPress profile. I will be contributing more patches before the WordPress 3.2 code freeze.

The many flavors of H.264 video

2011-06-22T03:53:55Z

H.264 is not a single video codec; it is a family of codecs with some shared shortcuts grouped into 17 sets of profiles and 16 levels of constraints. Video creators and playback software share a mutual understanding of these shortcuts, which are often accelerated by specialized chipsets. This post examines a few of the many flavors of H.264 video and their application in mobile, desktop, and Flash Player environments.H.264 is not a single video codec; it is a family of codecs with some shared shortcuts grouped into 17 sets of profiles and 16 levels of constraints. Video creators and playback software share a mutual understanding of these shortcuts, which are often accelerated by specialized chipsets. This post examines a few of the many flavors of H.264 video and their application in mobile, desktop, and Flash Player environments. A compressed video is a series of shortcuts shared between a video creator and a viewer. A series of pictures, 30 pictures per second in most capture devices, are analyzed and compared, collapsing a group of pictures into a single photograph and variances between pictures before or after its place in the series. All lossy video codecs examine a series of pictures and look for pieces that can be thrown out and replaced with shortcuts to recreate video quality with less stored data. Specialized decoders in our playback software, often assisted by chips especially programmed to quickly execute these shortcuts, decompress video with these specialized instruction sets. Shortcuts can be patented, leading to some of the intellectual property concerns around H.264, VP8, and Theora video as video playback, and encoding targets, are increasingly integrated with web browsers implementing support for native HTML5

Comments (0) - Read and Add your own Comments