<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Learning the World &#187; Nate Koechley</title>
	<atom:link href="http://learningtheworld.eu/tag/nate-koechley/feed/" rel="self" type="application/rss+xml" />
	<link>http://learningtheworld.eu</link>
	<description></description>
	<lastBuildDate>Tue, 06 Nov 2012 00:17:33 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.9.1</generator>
	<item>
		<title>@media 2008</title>
		<link>http://learningtheworld.eu/2008/atmedia-2008/</link>
		<comments>http://learningtheworld.eu/2008/atmedia-2008/#comments</comments>
		<pubDate>Wed, 25 Jun 2008 20:00:18 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[conferences]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[web standards]]></category>
		<category><![CDATA[AMEE]]></category>
		<category><![CDATA[Andy Clarke]]></category>
		<category><![CDATA[atmedia]]></category>
		<category><![CDATA[atmedia2008]]></category>
		<category><![CDATA[BBC]]></category>
		<category><![CDATA[book:ean=9780596529307]]></category>
		<category><![CDATA[book:isbn=0596529309]]></category>
		<category><![CDATA[book:isbn=0975240293]]></category>
		<category><![CDATA[carbon footprint]]></category>
		<category><![CDATA[comics]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Dan Rubin]]></category>
		<category><![CDATA[Edenbee]]></category>
		<category><![CDATA[Frontend Engineering]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[James Graham]]></category>
		<category><![CDATA[jaws]]></category>
		<category><![CDATA[John Resig]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Lachlan Hunt]]></category>
		<category><![CDATA[london]]></category>
		<category><![CDATA[Nate Koechley]]></category>
		<category><![CDATA[opera]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[Rich Schwerdtfeger]]></category>
		<category><![CDATA[Richard Schwerdtfeger]]></category>
		<category><![CDATA[upcoming:event=318308]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/?p=105</guid>
		<description><![CDATA[I had the chance to visit the <strong>@media conference in London</strong> again, for the third time. Again it was different than the last times. Perhaps less spectacular, a little less people, no real revelation. There were excellent talks inside the halls, but the best talks happened outside. Like speaking with Nate Koechley about&#160;[&#8230;]]]></description>
				<content:encoded><![CDATA[<p><a href="http://www.flickr.com/photos/martin-kliehm/2560737021/in/set-72157605494499216/"><img src="/wp-content/uploads/2008/06/panel" width="210" height="158" alt="@media Hot Topics Panel" class="floatleft" /></a> I had the chance to visit the <strong>@media conference in London</strong> again, for the third time. Again it was different than the last times. Perhaps less spectacular, a little less people, no real revelation. There were excellent talks inside the halls, but the best talks happened outside. Like speaking with <strong><a href="http://nate.koechley.com">Nate Koechley</a></strong> about accessible <a href="/2008/captioning-youtube-with-dfxp/">video captioning</a> with a <acronym title="World Wide Web Consortium">W3C</acronym> <acronym title="Extensible Markup Language">XML</acronym> standard that exists for exactly that purpose. There are video tutorials on the Yahoo! Developer Network that would be great test objects. Imagine the impact crowdsourced captioning for video content on flickr or YouTube could have on accessibility! Or I learned from <strong>David Storey</strong> that Opera is working on a curriculum together with the Web Standards Project. Interesting because there have been <a href="http://www.idcnet.info">similar approaches</a> financed by the European Commission, and it would be good to get them talk to each other. Meeting <strong>Steve Faulkner</strong> whose <a href="http://www.paciellogroup.com/resources/wat-ie-about.html">Accessibility Toolbar</a> I helped translating into German. Or just speaking with Antonia Hyde, Christian Heilmann, Fabio Carriere, Henny Swan, <a href="http://www.accessify.com">Ian Lloyd</a>, Lachlan Hunt, Patrick H. Lauke, Richard Ishida, and a few others about standards, accessibility, and internationalization. I admit it. I&rsquo;m a geek, I can&rsquo;t smalltalk.</p>

<p><a href="http://www.flickr.com/photos/martin-kliehm/2560723617/in/set-72157605494499216/"><img src="/wp-content/uploads/2008/06/ian-lloyd" width="210" height="158" alt="dir=rtl: Ian Lloyd, David Storey, Lachlan Hunt" class="floatleft" /></a> I started my conference program with a <strong>case study by the <acronym>BBC</acronym></strong>. They did a redesign and managed to squeeze formerly 60 images into 3 sliding doors and sprites. Their home page is now under 300<abbr title="Kilobyte">K</abbr> and 30 <acronym>HTTP</acronym> requests. Nice to see <a href="/2007/performance-2/">Yahoo&rsquo;s Exceptional Performance</a> guidelines go mainstream. About 5% of their users access the site without JavaScript. They don&rsquo;t get identical features, but they get identical care. For them accessibility isn&rsquo;t a buzzword, it&rsquo;s become a natural part of their daily work. So they were able to find out that <code>blur()</code> is not a friend with JAWS. Also the <acronym>BBC</acronym> plays well with the other kids: they joined the OpenID foundation, and with <a href="http://backstage.bbc.co.uk"><acronym>BBC</acronym> backstage</a> they open their content through an <acronym>API</acronym>. Another charming idea is their <strong>public beta</strong> where people can testdrive new features. About 60% have personalized their home page, although one of the speakers described the personalization features with &ldquo;my mom&rsquo;s head exploded.&rdquo; They used agile development with 2 week sprints, run the website in 12 languages, but don&rsquo;t have a <acronym title="Content Distribution Network">CDN</acronym> yet because of the license fees.</p>

<p>Another case study about the <acronym title="Lifestyle of Health and Sustainability">LOHAS</acronym> community <strong>Edenbee</strong> wasn&rsquo;t <em>that</em> exiting, mostly because I knew the platform <a href="http://edenbee.com/users/martin/">since beta</a> and didn&rsquo;t get quite why I should speak with other people about changing their lightbulbs. But it&rsquo;s nice to keep track of your carbon footprint, a feature that uses the <a href="http://www.amee.cc">AMEE</a> open <acronym>API</acronym>.</p>

<p>I was curious about <strong><a href="http://www.w3.org/html/wg/html5/"><acronym title="Hypertext Markup Language">HTML</acronym>&nbsp;5</a></strong>, so I went to the presentation of Lachlan Hunt and James Graham. Still I don&rsquo;t see any advantage of having a bunch of new elements that are incompatible with older browsers when I can achieve the same with <acronym title="Accessible Rich Internet Applications">ARIA</acronym> attributes. But I understand the rationale behind some of their decisions, although that doesn&rsquo;t mean I come to the same conclusions.</p>

<p>For example people use a lot of &ldquo;nav&rdquo; and &ldquo;menu&rdquo; classes. To make their live easier, the <acronym>WHATWG</acronym> came up with the idea to create a <code>nav</code> element. A block level element, so you wouldn&rsquo;t have to use those <code>&lt;div class=&quot;nav&quot;&gt;</code> any more. But every time I use something like <code>class=&quot;navigation&quot;</code> it will be an unordered list! I don&rsquo;t need another <code>div</code>, I&rsquo;m perfectly happy with my <code>ul</code> and <code>role=&quot;navigation&quot;</code>. It&rsquo;s truly backward compatible, it&rsquo;s semantic, I can use it today, and there isn&rsquo;t a steep learning curve.</p>

<p><a href="http://www.flickr.com/photos/martin-kliehm/2561565004/in/set-72157605494499216/"><img src="/wp-content/uploads/2008/06/comic-panel" width="210" height="153" alt="Concrete Comic Panel" class="floatleft" /></a><a href="http://www.flickr.com/photos/martin-kliehm/2560740717/in/set-72157605494499216/"><img src="/wp-content/uploads/2008/06/andy-clarke" width="210" height="171" alt="Andy Clarke&rsquo;s design" class="floatleft clear" /></a> Then I went to two <strong>design talks by Andy Clarke and Dan Rubin</strong>, and though their designs were beautiful, the code examples were not. Imagine the flexibility of a newspaper article and compare that with the inflexibility of absolutely positioned paragraphs with fixed heights. Exactly. Apart from that Andy&rsquo;s main inspiration came from comic books. It never hurts to throw in some colorful images.</p>

<p>Like in comic books, usability is not about <em>getting</em> from A to B, it&rsquo;s about the <em>experience</em> of getting from A to B. In comic books the size of a panel and the amount of text strongly influences the reading speed. So you can emphasize content and add dynamics in your web design. That doesn&rsquo;t mean necessarily that everything has to be in boxes. Emphasis can also be added by <em>removing</em> the boxes.</p>

<p><strong>Dan Rubin</strong> used a lot of effects on his designs, like a noise filter to add texture on monochrome surfaces. Nice idea, though that implies the designer explaining the rationale of such a feature to the front-end engineers. They would either ignore it because they overlooked the subtle texture or because they assumed it would be just noise. Some less intrusive hint I will readily adopt was using a letter-spacing of &minus;1 on headlines to prevent tiny rivers between letters. <img src="http://learningtheworld.eu/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> </p>

<p>What slightly worries me is that Dan talked about re-using patterns for some effects in Photoshop. Re-using patterns is the same in <acronym title="Cascading Style Sheets">CSS</acronym>, but re-usable effects in Photoshop can mean an <em>un</em>usable amount of work in <acronym>CSS</acronym> and lots of pictures making the website slow. What I miss so far is a common understanding of effects and patterns that are both easy to work with in Photoshop <em>and</em> in frontend programming.</p>

<p><a href="http://www.flickr.com/photos/martin-kliehm/2611269470/in/set-72157605494499216/"><img src="/wp-content/uploads/2008/06/koechley-slide-frontend-knowledge-areas-thumb" width="210" height="158" alt="Slide: Knowledge Areas of Frontend Engineering" class="floatleft" /></a> The next day started with <strong>Nate Koechley&rsquo;s</strong> keynote about <strong><a href="http://nate.koechley.com/blog/2008/06/11/slides-professional-frontend-engineering/">professional frontend engineering</a></strong>. He chose the topic because he thinks this is critical to the advancement of the Internet, and I couldn&rsquo;t agree more. As Frontend Engineers we write <em>software</em> with <acronym title="Extensible Hypertext Markup Language">XHTML</acronym>, <acronym title="Cascading Style Sheets">CSS</acronym>, JavaScript, and quite some amount of <acronym>PHP</acronym>. Douglas Crockford calls this &ldquo;<cite>the most hostile software development environment imaginable</cite>,&rdquo; and if you take a look at this graphic from Nate&rsquo;s slides you will understand why. There are a number of knowledge areas that can be applied in a number of ways on three operating systems and half a dozen browsers in two rendering modes. If you ever wondered why you sometimes see little clouds of smoke coming out of your frontend engineering heads, that&rsquo;s why.</p>

<p>There are four <strong>guiding principles</strong>:</p>

<ol><li>Availability and accessibility for all users worldwide</li>
<li>Openness: share, learn, support, advocate</li>
<li>Richness: provide, but not too much</li>
<li>Stability</li></ol>

<p>Then there are three <strong>core techniques</strong>: <a href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support</a>, <a href="http://domscripting.com/blog/display/41">Progressive Enhancement</a>, and <a href="http://www.onlinetools.org/articles/unobtrusivejavascript/">Unobtrusive JavaScript</a>.If you haven&rsquo;t heard about those concepts, please read about them now.</p>

<p>At that point the presentation turned into giving advice for quite a number of best practices and tips, like using <a href="http://www.jslint.com">JSLint</a>, <a href="http://developer.yahoo.com/yui/yuitest/"><acronym title="Yahoo! User Interface Library">YUI</acronym> Unit Testing</a>, or <a href="http://developer.yahoo.com/yui/profiler/"><acronym>YUI</acronym> Profiler</a> to enhance the quality of your code. Or serving <strong>cacheable assets from cookie-free domains</strong>. Or <strong>anticipated preloads</strong>: sneak in your new JavaScript and <acronym>CSS</acronym> files a week <em>before</em> the relaunch. <img src="http://learningtheworld.eu/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" />  Or did you know that the <strong>iPhone</strong> 2G can keep only 19 assets in <strong>cache</strong>, and that it doesn&rsquo;t cache anything larger than 25K? Uncompressed 25K? Needless to say, Nate&rsquo;s presentation was one of the conference highlights.</p>

<p><a href="http://www.flickr.com/photos/martin-kliehm/2560732727/in/set-72157605494499216/"><img src="/wp-content/uploads/2008/06/john-resig" width="210" height="158" alt="John Resig" class="floatleft" /></a> Later I heard a few things about building applications with existing frameworks and <acronym title="Application Programming Interface">API</acronym>s, a timely comparison between <strong>JavaScript libraries</strong> held by no other than <strong><a href="http://jquery.com">jQuery</a>&rsquo;s John Resig</strong>, some tips on <strong>internationalization</strong> by <strong>Richard Ishida</strong>, and a panel about <strong>accessibility</strong>. The one sentence that stuck most in that panel was: &ldquo;Don&rsquo;t be the guy with the problems, be the guy with the solutions.&rdquo; In fact it&rsquo;s very hard to be passionate about your job while being pragmatic and providing solutions instead of just saying &ldquo;no.&rdquo; Something <a href="http://www.ibm.com/developerworks/blogs/page/schwer?entry=cynthia_ice_remembered">Richard Schwerdtfeger</a> wrote about in a different context:</p>

<blockquote cite="http://www.ibm.com/developerworks/blogs/page/schwer?entry=cynthia_ice_remembered"><p>Working in the accessibility field is extremely difficult. It requires very specialized skills&nbsp;&mdash; including incredible persistence. Accessibility is often viewed as additional work that is not always planned for. It requires a person who is tough, committed, patient, and caring to deliver an accessible solution that is usable to our customers. To do this you must have tremendous passion for your job as there is always someone or something to trip you up.</p></blockquote>

<p>Combining passion and diplomacy is a goal many web evangelists still have to work on&hellip; In the meantime remember that accessibility is most likely to have a sustainable impact when it is <a href="http://www.usbln.org/pdf/CRGAccessibilityStudy_v1%206.pdf" type="application/pdf">supported by senior management</a>, when there is an accessibility policy for a company, and when smart companies realize that <a href="/2007/accessibility-cost-effectiveness/">there is money to be made</a> by maximizing the target audience.</p>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2008/atmedia-2008/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website Performance Tweaks, Part Two</title>
		<link>http://learningtheworld.eu/2007/performance-2/</link>
		<comments>http://learningtheworld.eu/2007/performance-2/#comments</comments>
		<pubDate>Sun, 24 Jun 2007 14:20:19 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[conferences]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[@media]]></category>
		<category><![CDATA[atmedia]]></category>
		<category><![CDATA[atmedia07]]></category>
		<category><![CDATA[atmedia2007]]></category>
		<category><![CDATA[book:ean=9780596529307]]></category>
		<category><![CDATA[book:isbn=0596529309]]></category>
		<category><![CDATA[cdn]]></category>
		<category><![CDATA[cpu]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[energy efficiency]]></category>
		<category><![CDATA[etag]]></category>
		<category><![CDATA[expires header]]></category>
		<category><![CDATA[gzip]]></category>
		<category><![CDATA[http-request]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Nate Koechley]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[steve souders]]></category>
		<category><![CDATA[tenni theurer]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[yslow]]></category>
		<category><![CDATA[yui]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/2007/performance-2/</guid>
		<description><![CDATA[Nate Koechley presented the research results of the Yahoo! Exceptional Performance Team two weeks ago in London. The traditional focus of <strong>performance optimization</strong> has been on the backend, i.e. system efficiency. But comparing a number of high profile websites, the Yahoo! team found that frontend performance is responsible for 80-98% of the perceived response time. Therefore doubling the frontend performance gains more than doubling the backend performance. [&#8230;]]]></description>
				<content:encoded><![CDATA[<p class="vcard"><a href="http://www.flickr.com/photos/drewm/538822354/in/set-72157600330136671/" title="See larger version on flickr"><img alt="Nate Koechley" src="/wp-content/uploads/2007/07/nate-koechley" width="240" height="160" class="floatleft photo" /></a> <strong><a href="http://nate.koechley.com" class="fn url" rel="co-worker met acquaintance">Nate Koechley</a></strong> presented the <a href="http://nate.koechley.com/blog/2007/06/12/high-performance-web-sites">research results</a> of the Yahoo! Exceptional Performance Team two weeks ago in London (<a href="http://www.htmldog.com/atmedia2007/highperformancewebpages.mp3" type="audio/mp3">podcast</a>). Like Yahoo! shares I would like to share that knowledge with you for those who couldn&rsquo;t attend.</p>

<p>The traditional focus of <strong>performance optimization</strong> has been on the backend, i.e. system efficiency. But comparing a number of high profile websites, the Yahoo! team found that frontend performance is responsible for 80-98% of the perceived response time. Therefore doubling the frontend performance gains more than doubling the backend performance. In case studies <em>Yahoo! Search</em> became 40-50% faster, the <em>Yahoo! Mail</em> web application gained 70-100%. Of course there are ways to increase backend performance without throwing in more hardware, but better frontend performance reduces traffic and saves resources.</p>

<p>Saving resources on the <em>client</em> side, particularly <strong>CPU usage</strong>, also pays off in speed. <a href="http://icant.co.uk/sandbox/eventdelegation/">Event delegation</a> is faster than a large number of event handlers. Likewise we know that <a href="/2007/performance/">reducing the number of HTTP requests</a> through techniques like CSS sprites, sliding doors, or file aggregation increases speed. The reason is the limit of two parallel requests <em>per host</em> imposed by HTTP 1.1. That results in a download queue of two requests at a time, increasing the perceived response time of a page. By configuring additional host aliases for your server you can <a href="http://yuiblog.com/blog/2007/04/11/performance-research-part-4/">increase the number of parallel requests</a>&nbsp;&mdash; but more than 2-4 also increase DNS lookups resulting in higher CPU usage and slower response times.</p>

<p>I wonder when Yahoo! will present us another impressive calculation <strong>how many gigawatts have been preserved</strong> by reducing CPU usage in client PCs and in their <a href="http://www.technewsworld.com/story/55792.html" title="Study: Data Center Power Usage Exploding">data</a> <a href="http://brand.yahoo.com/forgood/environment/energy_conservation.html" title="Yahoo! Energy Conservation Program">centers</a>, as one participant asked in the <acronym title="questions and answers">Q&amp;A</acronym> part. <a href="http://www.ecologee.net">Energy efficient servers</a> are the next big thing, but are there any concrete suggestions for <a href="http://www.addsimplicity.com/adding_simplicity_an_engi/2007/01/compute_power_i.html">greener programming</a>? Is <acronym title="Asynchronous JavaScript and XML">AJAX</acronym> destroying the ozone layer? <img src="http://learningtheworld.eu/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> </p>

<p>Environmental issues aside, here&rsquo;s the <strong><a href="http://developer.yahoo.com/performance/rules.html">list of rules</a></strong>. I&rsquo;ll keep it short where I have written about it in <a href="/2007/performance/">my previous article</a>. See the <a href="http://stevesouders.com/hpws/">examples and testcases</a> by Steve Souders.</p>

<ol>
<li id="rule-1"><strong>Make <a href="/2007/performance/">fewer HTTP requests</a>:</strong> This also affects <a href="http://yuiblog.com/blog/2007/03/01/performance-research-part-3/">cookies</a>. Eliminate unnecessary cookies, keep them small, set them at granular domain levels (e.g. <code>finance.yahoo.com</code> instead of <code>.yahoo.com</code>), and set an appropriate Expires date.</li>
<li id="rule-2"><strong>Use a content distribution network (<acronym>CDN</acronym>)</strong> like <a href="http://www.akamai.com">Akamai</a> where your (static) content is served from distributed data centers located nearer to your client. Even if your website is not as big as Google you can profit from faster response times by using the <a href="http://yuiblog.com/blog/2007/02/22/free-yui-hosting"><acronym title="Yahoo! User Interface">YUI</acronym> library&rsquo;s own <acronym>CDN</acronym></a>.</li>
<li id="rule-3"><strong>Add an Expires header</strong> not just <a href="/2007/performance/#enforce-caching" title="Enforce image caching">for images</a>, but also for JavaScript and stylesheet files.</li>
<li id="rule-4"><strong>Enable gzip:</strong> 90%+ of browsers support compression, and <code>gzip</code> is better supported and compresses more than <code>deflate</code>. Gzip <acronym title="Hypertext Markup Language">HTML</acronym> files, <acronym title="Cascading Stylesheets">CSS</acronym>, scripts, <acronym title="Extensible Markup Language">XML</acronym>, <acronym title="JavaScript Object Literal Notation">JSON</acronym>&nbsp;&mdash; <em>no</em> images or <acronym title="Portable Data Format">PDF</acronym>s.</li>
<li id="rule-5"><strong>Put <acronym>CSS</acronym> at the top</strong>, avoid <code>@import</code> as it loads <em>last</em>, even <em>after</em> the images!</li>
<li id="rule-6"><strong>Move scripts to the bottom</strong> as they block parallel downloads even across hostnames and block rendering of any code below them.</li>
<li id="rule-7"><strong>Avoid <acronym>CSS</acronym> expressions</strong> as they execute many times and cost CPU.</li>
<li id="rule-8">
<p><strong>Use external JavaScript and <acronym>CSS</acronym> files.</strong> <a href="/2007/performance/#inline-css">Inline <acronym>CSS</acronym></a> is apparently faster for a user&rsquo;s start page, but not on subsequent pages. After the page has finished loading, use the time to <strong>preload scripts</strong> to speed up secondary pages.</p>
<ol class="code">
<li><code>window.onload = downloadComponents;</code></li>
<li><code>function downloadComponents() {</code></li>
<li class="indent"><code>var elem = document.createElement(&quot;script&quot;);</code></li>
<li class="indent"><code>elem.src = &quot;http://.../file1.js&quot;;</code></li>
<li class="indent"><code>document.body.appendChild(elem);</code></li>
<li><code>}</code></li>
</ol></li>
<li id="rule-9"><strong>Reduce <acronym title="Domain Name Server">DNS</acronym> lookups</strong> for the reasons stated above. Use 1-4 hosts and the <code>keep alive</code> setting.</li>
<li id="rule-10"><strong><a href="/2007/performance/#file-aggregation">Minify JavaScript</a></strong> with JSMin&nbsp;&mdash; inline scripts, too.</li>
<li id="rule-11"><strong>Avoid redirects</strong> as they are the worst form of blocking. Set Expires headers for redirects to enable caching.</li>
<li id="rule-12"><strong>Remove duplicate files:</strong> this is self-explanatory, but it can happen in large teams with many scripts and stylesheets.</li>
<li id="rule-13"><p><strong>Mind the <acronym title="Entity Tag">ETag</acronym>:</strong> Now this was something I never paid attention to. ETags are unique identifiers to distinguish files that share a <acronym title="Uniform Resource Identifier">URI</acronym>. They are transmitted in the HTTP header. The default server setting uses the <a href="http://en.wikipedia.org/wiki/Inode">INode</a>, the bytesize and the modification date of a file to calculate a unique ID. Unless servers in a cluster are identical, ETags differ, therefore the files are <strong>not cached</strong>. Fortunately <a href="http://httpd.apache.org/docs/2.0/mod/core.html#fileetag">ETags can be configured</a> in Apache, so it should be possible to match them across different servers.</p><ol class="code"><li><code>FileETag MTime Size</code></li></ol>
<p>Note that the ETag is also <strong>relevant for <acronym title="Really Simple Syndication">RSS</acronym> feeds</strong>. For example, currently the <a href="http://www.w3.org/2004/08/TalkFiles/Talks.rss" type="application/rss+xml"><acronym title="World Wide Web Consortium">W3C</acronym> talks feed</a> is more or less unusable: some feed readers and services apparently regard the ETag, the feed is mirrored on many servers, so the same news entry from a different server is shown as new and unread multiple times every day&hellip;</p>
</li>
<li id="rule-14"><strong>Make <acronym title="Asynchronous JavaScript and XML">AJAX</acronym> cacheable and small</strong>. Some data like a user&rsquo;s address book or buddy list change infrequently and should be requested via GET, cached, and set with a <code>Last-modified</code> timestamp and gzipped.</li>
</ol>

<p><img src="/wp-content/uploads/2007/06/book-high-performance-web-sites" alt="Book cover: High Performance Web Sites" width="120" height="158" class="floatleft book" /> These are a lot of rules, and they will be published in a O&rsquo;Reilly book by Steve Souders and Tenni Theurer in September 2007. Anyway, don&rsquo;t be overwhelmed by their mass, instead you can start with the easy things: <strong>&ldquo;<q>harvest the low hanging fruit</q>.&rdquo;</strong> Enable caching with the Expire date setting and reduce the number of HTTP requests. You can deal with the rest later.</p>

<p>Finally Nate Koechley announced a Yahoo! performance tool called <strong><a href="http://developer.yahoo.com/yslow/">YSlow</a></strong> as a plugin for the indespensible <a href="http://www.getfirebug.com">Firebug</a> extension. He also recommended the commercial <a href="http://alphaworks.ibm.com/tech/pagedetailer">IBM Page Detailer</a>, and <a href="http://livehttpheaders.mozdev.org">LiveHTTPHeaders</a> to visualize what&rsquo;s happening in your browser.</p>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2007/performance-2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
<enclosure url="http://www.htmldog.com/atmedia2007/highperformancewebpages.mp3" length="26276424" type="audio/mpeg" />
		</item>
		<item>
		<title>@media 2007 Slides</title>
		<link>http://learningtheworld.eu/2007/atmedia-2007-slides/</link>
		<comments>http://learningtheworld.eu/2007/atmedia-2007-slides/#comments</comments>
		<pubDate>Sun, 17 Jun 2007 14:54:18 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[conferences]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[web standards]]></category>
		<category><![CDATA[@media]]></category>
		<category><![CDATA[Andy Clarke]]></category>
		<category><![CDATA[atmedia]]></category>
		<category><![CDATA[atmedia07]]></category>
		<category><![CDATA[atmedia2007]]></category>
		<category><![CDATA[Dan Cederholm]]></category>
		<category><![CDATA[Dan Webb]]></category>
		<category><![CDATA[downloads]]></category>
		<category><![CDATA[Drew McLellan]]></category>
		<category><![CDATA[Håkon Wium Lie]]></category>
		<category><![CDATA[Hannah Donovan]]></category>
		<category><![CDATA[Jason Santa Maria]]></category>
		<category><![CDATA[Jeremy Keith]]></category>
		<category><![CDATA[Jesse James Garrett]]></category>
		<category><![CDATA[Joe Clark]]></category>
		<category><![CDATA[Jon Hicks]]></category>
		<category><![CDATA[london]]></category>
		<category><![CDATA[Mark Boulton]]></category>
		<category><![CDATA[Molly Holzschlag]]></category>
		<category><![CDATA[Nate Koechley]]></category>
		<category><![CDATA[podcast]]></category>
		<category><![CDATA[presentations]]></category>
		<category><![CDATA[Richard Ishida]]></category>
		<category><![CDATA[Shawn Henry]]></category>
		<category><![CDATA[Shawn Lawton Henry]]></category>
		<category><![CDATA[Simon Collison]]></category>
		<category><![CDATA[Simon Willison]]></category>
		<category><![CDATA[slides]]></category>
		<category><![CDATA[talks]]></category>
		<category><![CDATA[Tantek Çelik]]></category>
		<category><![CDATA[upcoming:event=110091]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/2007/atmedia-2007-slides/</guid>
		<description><![CDATA[Like last year I will try to link all <strong>presentation slides</strong> and podcasts from the @media conference in London, June 7th-8th, 2007. I hope you find it as convenient as I do.&#160;[&#8230;]]]></description>
				<content:encoded><![CDATA[<p>Like last year I will try to link all presentation slides and podcasts from the @media conference in London, June 7th-8th, 2007. I hope you find it as convenient as I do. <img src="http://learningtheworld.eu/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> </p>

<ul>
<li><strong>Andy Clarke:</strong> <a href="http://www.stuffandnonsense.co.uk/downloads/slides/atmedia07.pdf" type="application/pdf">Royale With Cheese</a> (<acronym>PDF</acronym>, 18&nbsp;<acronym title="Megabyte">MB</acronym>); <a href="http://www.htmldog.com/atmedia2007/royalewithcheese.mp3" title="Andy Clarke Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Dan Cederholm:</strong> <a href="http://www.simplebits.com/publications/speak/juggling/juggling.pdf" type="application/pdf">Interface Design Juggling</a> (<acronym>PDF</acronym>, 22&nbsp;<acronym>MB</acronym>); <a href="http://www.htmldog.com/atmedia2007/interfacedesignjuggling.mp3" title="Dan Cederholm Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Dan Webb:</strong> <a href="http://www.slideshare.net/danwrong/java-script-fu-media-london">The Mysteries Of JavaScript-Fu</a>; <a href="http://www.htmldog.com/atmedia2007/themysteriesofjavascriptfu.mp3" title="Dan Webb Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Drew McLellan and Simon Collison:</strong> <a href="http://www.colly.com/comments/media-europe-2007/">High-Noon Shoot-Out: Design vs. Implementation</a></li>
<li><strong>Håkon Wium Lie:</strong> <a href="http://people.opera.com/howcome/2007/talks/06-08-at-media.pdf" type="application/pdf">One Web, Acid2 and CSS3</a> (<acronym title="Portable Data Format">PDF</acronym>, 3.7&nbsp;<acronym>MB</acronym>); <a href="http://www.htmldog.com/atmedia2007/1webacid2andcss3.mp3" title="Håkon Wium Lie Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Hannah Donovan and Simon Willison:</strong> For Example&hellip; <a href="http://static.last.fm/media/HDonovan_@Media.pdf" type="application/pdf">Last FM</a>  (<acronym title="Portable Data Format">PDF</acronym>, 1.8&nbsp;<acronym>MB</acronym>) and <a href="http://simonwillison.net/2007/Jun/11/local/">Doing Local Right</a></li>
<li><strong>Hot Topics Panel:</strong> <a href="http://www.htmldog.com/atmedia2007/hottopics.mp3" title="Hot Topics Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Jason Santa Maria:</strong> <a href="http://www.jasonsantamaria.com/downloads/media/2007/diabolical-design.pdf" type="application/pdf">Diabolical Design: The Devil is in the Details</a> (<acronym>PDF</acronym>, 22&nbsp;<acronym>MB</acronym>); <a href="http://www.htmldog.com/atmedia2007/diabolicaldesign.mp3" title="Jason Santa Maria Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Jeremy Keith:</strong> <a href="http://adactio.com/extras/slides/bulletproof.pdf" type="application/pdf">Bulletproof Ajax</a> (<acronym>PDF</acronym>, 2.1&nbsp;<acronym>MB</acronym>); <a href="http://www.htmldog.com/atmedia2007/bulletproofajax.mp3" title="Jeremy Keith Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Jesse James Garrett:</strong> Beyond Ajax; <a href="http://www.htmldog.com/atmedia2007/beyondajax.mp3" title="Jesse James Garrett Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Joe Clark:</strong> <a href="http://joeclark.org/appearances/atmedia2007/">When Web Accessibility Is Not Your Problem</a>; <a href="http://www.htmldog.com/atmedia2007/whenwebaccessibilityisnotyourproblem.mp3" title="Joe Clark Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Jon Hicks:</strong> <a href="http://www.hicksdesign.co.uk/journal/be-a-creative-sponge">How to be a Creative Sponge</a>; <a href="http://www.htmldog.com/atmedia2007/howtobeacreativesponge.mp3" title="Jon Hicks Podcast" type="audio/mp3">Podcast</a></li> 
<li><strong>Mark Boulton:</strong> <a href="http://www.markboulton.co.uk/present/atmedia07">Five Simple Steps to Better Typography</a>; <a href="http://www.htmldog.com/atmedia2007/fivestepstobettertypography.mp3" title="Mark Boulton Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Molly Holzschlag:</strong> <a href="http://2007.xtech.org/public/asset/attachment/126">The Broken World: Solving the Browser Problem Once and For All</a>; <a href="http://www.htmldog.com/atmedia2007/thebrokenworld.mp3" title="Molly Holzschlag Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Nate Koechley:</strong> <a href="http://nate.koechley.com/blog/2007/06/12/high-performance-web-sites/">High Performance Web Pages</a>; <a href="http://www.htmldog.com/atmedia2007/highperformancewebpages.mp3" title="Nate Koechley Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Richard Ishida:</strong> <a href="http://www.w3.org/2007/Talks/0706-atmedia/">Designing for International Users: Practical Tips</a>; <a href="http://www.htmldog.com/atmedia2007/designingforinternationalusers.mp3" title="Richard Ishida Podcast" type="audio/mp3">Podcast</a></li>
<li><strong>Shawn Lawton Henry:</strong> Advancing Web Accessibility; <a href="http://www.htmldog.com/atmedia2007/advancingwebaccessibility.mp3" title="Shawn Lawton Henry Podcast" type="audio/mp3">Podcast</a></li> 
<li><strong>Tantek Çelik:</strong> <a href="http://tantek.com/presentations/2007/06/microformats-bb-you/">Microformats, Building Blocks, and You</a>; <a href="http://www.htmldog.com/atmedia2007/microformatsbuildingblocksandyou.mp3" title="Tantek Çelik Podcast" type="audio/mp3">Podcast</a></li> 
</ul>

<h3>Update</h3>

<p>Thanks for the reminder, of course <a href="http://blog.fawny.org/category/events/media-london-2007/">Joe Clark</a> wrote detailed protocols about some sessions. Also I would like to point you to Chantal Slagmolen&rsquo;s original notes&nbsp;&mdash; I wish all designers were so creative!</p>

<ul class="flickr">
<li><a href="https://www.flickr.com/photos/talleke81/551731321/" title="@media 2007 -  Jason Santa Maria"><img src="https://live.staticflickr.com/1165/551731321_4c4e613126_s.jpg" alt="@media 2007 -  Jason Santa Maria" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551500566/" title="@media 2007 - Joe Clark"><img src="https://live.staticflickr.com/1162/551500566_c29a1153cb_s.jpg" alt="@media 2007 - Joe Clark" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551499978/" title="@media 2007 - Hakon Wium Lie"><img src="https://live.staticflickr.com/1098/551499978_cc75fbaef7_s.jpg" alt="@media 2007 - Hakon Wium Lie" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551731987/" title="@media 2007 - Hot topic Panel"><img src="https://live.staticflickr.com/1209/551731987_cc2d0b174e_s.jpg" alt="@media 2007 - Hot topic Panel" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551731119/" title="@media 2007 - Hannah Donovan &amp; Simon Willison"><img src="https://live.staticflickr.com/1151/551731119_084f21efed_s.jpg" alt="@media 2007 - Hannah Donovan &amp; Simon Willison" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551499534/" title="@media 2007 - Andy Clarke"><img src="https://live.staticflickr.com/1333/551499534_01aae18ad3_s.jpg" alt="@media 2007 - Andy Clarke" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551501704/" title="@media 2007 - Drew McLellan &amp; Simon Collison"><img src="https://live.staticflickr.com/1099/551501704_687d51d413_s.jpg" alt="@media 2007 - Drew McLellan &amp; Simon Collison" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551500436/" title="@media 2007 - Jesse James Garrett"><img src="https://live.staticflickr.com/1131/551500436_2901f3484d_s.jpg" alt="@media 2007 - Jesse James Garrett" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551731705/" title="@media 2007 - Jon Hicks"><img src="https://live.staticflickr.com/1277/551731705_56a9e24f66_s.jpg" alt="@media 2007 - Jon Hicks" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551731867/" title="@media 2007 - Mark Boulton"><img src="https://live.staticflickr.com/1428/551731867_b4a3a98757_s.jpg" alt="@media 2007 - Mark Boulton" /></a></li><li><a href="https://www.flickr.com/photos/talleke81/551732195/" title="@media 2007 - Richard Ishida"><img src="https://live.staticflickr.com/1209/551732195_1beb043eba_s.jpg" alt="@media 2007 - Richard Ishida" /></a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2007/atmedia-2007-slides/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
<enclosure url="http://www.htmldog.com/atmedia2007/royalewithcheese.mp3" length="27926598" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/interfacedesignjuggling.mp3" length="25182415" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/themysteriesofjavascriptfu.mp3" length="24542031" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/1webacid2andcss3.mp3" length="27912104" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/hottopics.mp3" length="33531132" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/diabolicaldesign.mp3" length="25376145" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/bulletproofajax.mp3" length="29910986" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/beyondajax.mp3" length="25117414" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/whenwebaccessibilityisnotyourproblem.mp3" length="29708508" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/howtobeacreativesponge.mp3" length="29128992" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/fivestepstobettertypography.mp3" length="25527027" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/thebrokenworld.mp3" length="26435499" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/highperformancewebpages.mp3" length="26276424" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/designingforinternationalusers.mp3" length="27147592" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/advancingwebaccessibility.mp3" length="34367158" type="audio/mpeg" />
<enclosure url="http://www.htmldog.com/atmedia2007/microformatsbuildingblocksandyou.mp3" length="27557163" type="audio/mpeg" />
		</item>
		<item>
		<title>Graded Browser Support Q2 Update</title>
		<link>http://learningtheworld.eu/2007/graded-browser-support-q2-update/</link>
		<comments>http://learningtheworld.eu/2007/graded-browser-support-q2-update/#comments</comments>
		<pubDate>Tue, 08 May 2007 14:30:41 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[web development]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[browser support]]></category>
		<category><![CDATA[browsers]]></category>
		<category><![CDATA[graded browser support]]></category>
		<category><![CDATA[Nate Koechley]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[yui]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/2007/graded-browser-support-q2-update/</guid>
		<description><![CDATA[Based on Nate Koechley&#8217;s concept of graded browser support we terminated support for Firefox&#160;1.5 because it&#8217;s no longer supported and upgraded by Mozilla. Also we changed Opera support from 9.0 to 9.x, where &#8220;x&#8221; stands for the latest stable version.&#160;[&#8230;]]]></description>
				<content:encoded><![CDATA[<p>Based on <a href="http://nate.koechley.com/blog/" rel="colleague met">Nate Koechley&rsquo;s</a> concept of <strong><a href="http://developer.yahoo.com/yui/articles/gbs/gbs.html">graded browser support</a></strong> we terminated support for Firefox&nbsp;1.5 because it&rsquo;s no longer supported and upgraded by Mozilla. Also we changed Opera support from 9.0 to 9.x, where &ldquo;x&rdquo; stands for the latest stable version.</p>

<h3 id="bluemars-matrix">Matrix of supported browsers in BlueMars projects</h3>

<table cellspacing="0" cellpadding="0" class="gbs">
                    <tbody>
                        <tr class="first">
                            <td></td>
                            <th scope="col">Windows XP</th>
                            <th scope="col"><abbr title="Macintosh OS v10.4 Tiger">Mac 10.4</abbr></th>
                            <th scope="col"><abbr title="Debian Linux">Linux</abbr></th>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 7">IE 7.0</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 6.0 Service Pack 2">IE 6.0</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 5.5">IE 5.5</abbr></th>
                            <td class="c">C-grade</td>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 5.01 Service Pack 2">IE 5.0</abbr></th>
                            <td class="c">C-grade</td>
                            <td class="dead">&dagger;</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Mozilla Firefox 2.0, latest version">Firefox 2.0.x</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="a">A-grade</td>
                            <td class="a">A-grade</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="opera 9, latest version">Opera 9.x</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="x">X-grade</td>
                            <td class="x">X-grade</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Safari 2, latest version">Safari 2.0.x</abbr></th>
                            <td class="na">n/a</td>
                            <td class="a">A-grade</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Konqueror, latest Version">Konqueror 3.5.x</abbr></th>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                            <td class="a">A-grade</td>
                        </tr>
                    </tbody>
                </table>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2007/graded-browser-support-q2-update/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website Performance Tweaks</title>
		<link>http://learningtheworld.eu/2007/performance/</link>
		<comments>http://learningtheworld.eu/2007/performance/#comments</comments>
		<pubDate>Thu, 25 Jan 2007 20:00:35 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[downloads]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[book:isbn=0596529309]]></category>
		<category><![CDATA[cache]]></category>
		<category><![CDATA[caching]]></category>
		<category><![CDATA[concat]]></category>
		<category><![CDATA[css sprites]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[Douglas Crockford]]></category>
		<category><![CDATA[Ed Eliot]]></category>
		<category><![CDATA[file aggregation]]></category>
		<category><![CDATA[http-request]]></category>
		<category><![CDATA[JSMin]]></category>
		<category><![CDATA[mozilla]]></category>
		<category><![CDATA[Nate Koechley]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[sliding doors]]></category>
		<category><![CDATA[techniques]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[yui]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/2007/performance/</guid>
		<description><![CDATA[In the last six months I became more aware of techniques for optimizing website performance. I learned about memory leaks and JavaScript performance, but what impressed me most was Nate Koechleyâ€™s presentation about large scale website performance issues in â€œYahoo! <abbr title="versus">vs.</abbr> Yahoo!&#8221; at the @media conference 2006. In the meantime there have been more blog posts about particular aspects of performance optimization, so I wrote a summary.&#160;[&#8230;]]]></description>
				<content:encoded><![CDATA[<p>In the last six months I became more aware of techniques for <strong>optimizing website performance</strong>. I learned about <a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp" title="Microsoft Developer Network: Understanding and solving Internet Explorer leak patterns">memory</a> <a href="http://outofhanwell.com/ieleak/" title="Drip: A memory leak detector for Internet Explorer">leaks</a> and <a href="http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx" title="IE + JavaScript performance recommendations &ndash; part 1">JavaScript</a> <a href="http://blogs.msdn.com/ie/archive/2006/11/16/ie-javascript-performance-recommendations-part-2-javascript-code-inefficiencies.aspx" title="IE + JavaScript performance recommendations &ndash; part 2">performance</a>, but what impressed me most was <a href="http://nate.koechley.com/blog/2006/07/12/my_atmedia_2006_slides/" rel="met colleague">Nate Koechley&rsquo;s presentation</a> about large scale website performance issues in &ldquo;<a href="http://learningtheworld.eu/2006/atmedia-day-two/#koechley" title="See my notes about his talk">Yahoo! <abbr title="versus">vs.</abbr> Yahoo!</a>&rdquo; at the @media conference 2006. In the meantime there have been more blog posts about particular aspects of performance optimization, and I&rsquo;d like to sum them up:</p>

<p id="file-location"><strong>Parsing JavaScript</strong> freezes the browser. Therefore put <acronym title="Cascading Stylesheets">CSS</acronym> in the <code>head</code> and JavaScript near to the <code>&lt;/body&gt;</code> so that it is parsed when the page has been rendered.</p>

<p id="http-requests">The arch enemy of performance are <strong><a href="http://yuiblog.com/blog/2006/11/28/performance-research-part-1/" title="YUI Blog: Performance research &ndash; what the 80/20 rule tells us about reducing HTTP requests"><acronym title="Hypertext Transfer Protocol">HTTP</acronym> requests</a></strong>. Many browsers still can&rsquo;t handle more than two or four requests at a time. Keep the number of files down, your website will be faster.</p>

<p>There are several techniques with the aim to reduce the number of files:</p>

<ol><li id="inline-css"><p><strong>&ldquo;<q>A single large file is fastest.</q>&rdquo;</strong> (<cite>Nate Koechley</cite>) That&rsquo;s why Yahoo! <em>apparently</em> has such an amount of <a href="http://www.robertnyman.com/2007/01/24/with-these-web-sites-would-you-say-the-web-standards-war-is-won/">inline <acronym title="Cascading Stylesheets">CSS</acronym></a>. They found out <a href="http://yuiblog.com/blog/2007/01/04/performance-research-part-2/" title="YUI Blog: Performance research, part 2: browser cache usage &ndash; exposed!">browser caching</a> is not as effective as they thought, in particular not on a user&rsquo;s start page. So they deliver &ldquo;inline&rdquo; <acronym>CSS</acronym>. Actually writing inline <acronym>CSS</acronym> is a maintenance nightmare, but delivering <acronym>CSS</acronym> content inline doesn&rsquo;t mean the files can&rsquo;t have separate lives on the server: concatenate the files with a server side technique of your choice.</p>
<p><strong>Update:</strong> A couple of months later <a href="/2007/performance-2/#rule-8">Nate explained that further</a>: when your page is likely to be a user&rsquo;s start page, caching plays a minor role, thus &ldquo;inline&rdquo; <acronym>CSS</acronym> is faster. Otherwise use external files, aggregate them, and make sure they are cached (see below).</p></li>
<li id="enforce-caching"><p><strong>Enforce caching.</strong> Another <a href="http://www.bazon.net/mishoo/articles.epl?art_id=958"><acronym title="Internet Explorer">IE</acronym> bug</a> prevents image caching. Add the following to your <code>.htaccess</code>, <code>httpd.conf</code> or <code>vhost.conf</code> settings:</p>
<ol class="code">
<li><code>&lt;IfModule mod_expires.c&gt;</code></li>
<li class="indent"><code>ExpiresActive On</code></li>
<li class="indent"><code>ExpiresByType image/jpg &quot;access plus 1 day&quot;</code></li>
<li class="indent"><code>ExpiresByType image/jpeg &quot;access plus 1 day&quot;</code></li>
<li class="indent"><code>ExpiresByType image/gif &quot;access plus 1 day&quot;</code></li>
<li class="indent"><code>ExpiresByType image/png &quot;access plus 1 day&quot;</code></li>
<li><code>&lt;/IfModule&gt;</code></li></ol></li>
<li id="background-images"><p><strong>Reduce the number of background images</strong> with techniques like <a href="http://www.alistapart.com/articles/sprites/">CSS Sprites</a> or <a href="http://www.alistapart.com/articles/slidingdoors/">Sliding Doors</a>. Instead of four images of rounded corners you <a href="http://www.fiftyfoureleven.com/sandbox/sliding-doors-one-image/" title="Example">only need one</a> and get the mouseover state for free! The green download button on <a href="http://www.mozilla.com">mozilla.com</a> is based on that technique. And <a href="http://www.yahoo.com">Yahoo!</a> uses <acronym>CSS</acronym> Sprites to combine a huge number of icons.</p>

<p><img src="/wp-content/uploads/2007/01/mozilla-button.jpg" class="centered screenshot" width="300" height="149" alt="Download button on mozilla.com using the Sliding Doors technique" /></p>

<p>Please note this approach is only for <em>decorational background images</em> that degrade gracefully. <del>It&rsquo;s not for <code>img</code> elements.</del> <ins>Be careful when you use it for <a href="/2007/foreground-sprites/">foreground images</a>.</ins> And if text comes as a graphical representation, it can become inaccessible for screen reader users, zoom readers, or people with stylesheets switched off. Use real text instead.</p>

<p>Also note changing the <code>background-position</code> causes <acronym>IE6</acronym> to flicker, related to the caching bug above. To avoid it, simply add the following:</p>
<ol class="code">
<li><code>&lt;script type=&quot;text/javascript&quot;&gt;</code></li>
<li class="indent"><code>try { document.execCommand(<span class="codeSpace">&nbsp;</span>&quot;BackgroundImageCache&quot;, false, true); } catch(e) {};</code></li>
<li><code>&lt;/script&gt;</code></li></ol></li>
<li id="file-aggregation"><p><strong>Aggregate files.</strong> Ed Eliot wrote a nice <a href="http://www.ejeliot.com/blog/72" title="Automatic merging and versioning of CSS/JS files with PHP">script to merge JavaScript or <acronym>CSS</acronym> files</a>, bonus respect for the advanced versioning and caching features.</p>

<p>But remember the cases when it doesn&rsquo;t make sense to merge <acronym>CSS</acronym> files: your <acronym title="Internet Explorer">IE</acronym> bugfixes still belong in conditional comments. If you use the <code>@import</code> rule to filter antique browsers from getting advanced styles, you can&rsquo;t drop it. And if you want to merge stylesheets for different media (<abbr title="for example">e.g.</abbr> print), make sure the code is enclosed in something like</p>


<ol class="code">
<li><code>@media print {</code></li>
<li class="indent"><code>/* style sheet for print goes here */</code></li>
<li><code>}</code></li></ol>


<p>In an <a href="http://www.ejeliot.com/blog/73" title="Adding JSMin to the CSS/JS merging script">updated version</a> Ed added <a href="http://javascript.crockford.com/jsmin.html">JSMin</a> to strip comments and excess whitespace. JSMin works like a charm for JavaScript files. But it cuts a few space characters too much so that the syntax of <acronym>CSS</acronym> selectors changes <del>therefore for now I have abandoned the idea to compress them too</del>. <ins>See <a href="#comment-6045">Jens Meiert&rsquo;s comment</a> below for a recommendation to minimize <acronym>CSS</acronym>.</ins></p>

<p>His original code requires the C version of JSMin with PHP <code>safe_mode</code> turned off. If you prefer a pure PHP version, get the <a href="http://javascript.crockford.com/jsmin2.php.txt">PHP version of JSMin</a> and my <a href="/examples/combine-jsmin.phps" type="text/plain">adapted version of the script</a>.</p>
</li></ol>

<p>I&rsquo;m still in awe how fast one of my own websites became! Thanks to the guys at Yahoo! for the inspiration and for most of the research this article is based upon. Even JSMin was written by an employee of Yahoo! Speaking about Yahoo! employees: <a href="http://wait-till-i.com/" title="Christian Heilmann" rel="met colleague">Chris</a>, I hope there are still enough topics for your <a href="http://www.thinkvitamin.com/features/dev/enhance-your-page-performance" title="Chris Heilmann: Enhance your (page) performance!">Vitamin article</a>. I wanted to write about performance anyway, and to my surprise I <a href="http://www.robertnyman.com/2007/01/24/with-these-web-sites-would-you-say-the-web-standards-war-is-won/#comment-29959">read yesterday</a> that you have similar plans. See ya in <a href="/2007/brain-food/#e-accessibility" title="First European e-Accessibility Forum">Paris</a>. <img src="http://learningtheworld.eu/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> </p>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2007/performance/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Graded Browser Support Q4 Update</title>
		<link>http://learningtheworld.eu/2006/graded-browser-support-q4-update/</link>
		<comments>http://learningtheworld.eu/2006/graded-browser-support-q4-update/#comments</comments>
		<pubDate>Tue, 28 Nov 2006 17:00:05 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[web development]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[browser support]]></category>
		<category><![CDATA[browsers]]></category>
		<category><![CDATA[graded browser support]]></category>
		<category><![CDATA[Nate Koechley]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[yui]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/2006/graded-browser-support-q4-update/</guid>
		<description><![CDATA[Nate Koechley introduced Yahoo!&#8217;s smart concept of <a href="http://developer.yahoo.com/yui/articles/gbs/gbs.html">graded browser support</a> nine months ago. Until then we did test on a lot of browsers, but all browsers were supported equal. Now came this man who suggested distinctions... Almost unnoticed were <strong>two updates</strong> of the browser matrix in August and a couple of days ago.&#160;[&#8230;]]]></description>
				<content:encoded><![CDATA[<blockquote cite="http://developer.yahoo.com/yui/articles/gbs/gbs.html">
<p>&ldquo;Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.&rdquo;</p>
</blockquote>

<p class="vcard"><a href="http://nate.koechley.com/blog/" class="url fn" rel="colleague met">Nate Koechley</a> introduced Yahoo!&rsquo;s smart concept of <strong><a href="http://developer.yahoo.com/yui/articles/gbs/gbs.html">graded browser support</a></strong> nine months ago. Until then we did test a lot of browsers, but all browsers were supported equal. Now came this man who suggested distinctions, a <em>graded</em> instead of a boolean or binary support.</p>

<ul>
<li><p>There is a blacklist of <strong>C-grade</strong> browsers. They are antiquated, but <strong>core</strong> content and functionality should work in them. Never mind the design though, as some of them do not support <acronym title="Cascading Style Sheets">CSS</acronym>&nbsp;2. Semantics and good accessibility are more important and tested by <acronym title="Quality Assurance">QA</acronym>.</p></li>
<li><p>Then there is a whitelist of <strong>advanced (A-grade)</strong> browsers supporting modern web standards. <acronym title="Quality Assurance">QA</acronym> tests these browsers, and bugs are handled with high priority.</p></li>
<li><p>The rest of the unknown or rare browsers are <strong>X-grade</strong>. It is assumed they support modern web standards, but it would be inefficient and impossible to test them.</p></li>
</ul>

<p>That&rsquo;s a very <a href="http://yuiblog.com/blog/2006/11/15/browser-support-update-2006q4/#comment-15788" title="Nate Koechley about cost benefits">pragmatic and efficient</a> framework since it adds scalability for <acronym title="Quality Assurance">QA</acronym>.</p>

<p>Almost unnoticed were <strong>two updates</strong> of the browser matrix in <a href="http://yuiblog.com/blog/2006/08/18/browser-support-update-2006q3/" title="Graded Browser Support Q3 Update">August</a> and a <a href="http://yuiblog.com/blog/2006/11/15/browser-support-update-2006q4/" title="Graded Browser Support Q4 Update">couple of days ago</a> where Opera&nbsp;8 got replaced by Opera&nbsp;9, also support for Internet Explorer 5.5, Safari&nbsp;1 and Firefox&nbsp;1.0 has been discontinued because they are vanishing species. Support for Firefox 2.0 has been added, while Mozilla suite has been terminated since there are virtually no differences between Firefox and Mozilla suite.</p>

<p>Our own matrix includes Konqueror, but otherwise it&rsquo;s more or less the same as the current <a href="http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html">Yahoo! browser matrix</a>, although we do not test rare Windows versions like Windows 98 or 2000. Here is the adapted matrix we use in our own projects. Do you think that&rsquo;s a reasonable approach?</p>

<h3 id="bluemars-matrix">Matrix of supported browsers in BlueMars projects</h3>

<table cellspacing="0" cellpadding="0" class="gbs">
                    <tbody>
                        <tr class="first">
                            <td></td>
                            <th scope="col">Windows XP</th>
                            <th scope="col"><abbr title="Macintosh OS v10.4 Tiger">Mac 10.4</abbr></th>
                            <th scope="col"><abbr title="Debian Linux">Linux</abbr></th>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 7">IE 7.0</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 6.0 Service Pack 2">IE 6.0</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 5.5">IE 5.5</abbr></th>
                            <td class="c">C-grade</td>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Internet Explorer 5.01 Service Pack 2">IE 5.0</abbr></th>
                            <td class="c">C-grade</td>
                            <td class="dead">&dagger;</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Mozilla Firefox 2.0, latest version">Firefox 2.0.x</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="a">A-grade</td>
                            <td class="a">A-grade</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Mozilla Firefox 1.5, latest version">Firefox 1.5.x</abbr></th>
                            <td class="a">A-grade</td>
                            <td class="a">A-grade</td>
                            <td class="a">A-grade</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Mozilla Firefox 1.0.7">Firefox 1.0.7</abbr></th>
                            <td class="x">X-grade</td>
                            <td class="x">X-grade</td>
                            <td class="x">X-grade</td>
                        </tr>
                        <tr>
                            <th scope="row">Opera 9.0</th>
                            <td class="a">A-grade</td>
                            <td class="x">X-grade</td>
                            <td class="x">X-grade</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Safari 2, latest version">Safari 2.0.x</abbr></th>
                            <td class="na">n/a</td>
                            <td class="a">A-grade</td>
                            <td class="na">n/a</td>
                        </tr>
                        <tr>
                            <th scope="row"><abbr title="Konqueror, latest Version">Konqueror 3.5.x</abbr></th>
                            <td class="na">n/a</td>
                            <td class="na">n/a</td>
                            <td class="a">A-grade</td>
                        </tr>
                    </tbody>
                </table>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2006/graded-browser-support-q4-update/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>My @media 2006 Day Two</title>
		<link>http://learningtheworld.eu/2006/atmedia-day-two/</link>
		<comments>http://learningtheworld.eu/2006/atmedia-day-two/#comments</comments>
		<pubDate>Mon, 26 Jun 2006 07:00:04 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[conferences]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[web standards]]></category>
		<category><![CDATA[@media]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[atmedia]]></category>
		<category><![CDATA[atmedia2006]]></category>
		<category><![CDATA[book:isbn=0321509021]]></category>
		<category><![CDATA[book:isbn=1590598148]]></category>
		<category><![CDATA[Cameron Moll]]></category>
		<category><![CDATA[Dan Cederholm]]></category>
		<category><![CDATA[DHTML]]></category>
		<category><![CDATA[Eric Meyer]]></category>
		<category><![CDATA[i18n]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Jeremy Keith]]></category>
		<category><![CDATA[Jon Hicks]]></category>
		<category><![CDATA[london]]></category>
		<category><![CDATA[microformats]]></category>
		<category><![CDATA[Mobile Web]]></category>
		<category><![CDATA[Molly Holzschlag]]></category>
		<category><![CDATA[Nate Koechley]]></category>
		<category><![CDATA[Robin Christopherson]]></category>
		<category><![CDATA[Tantek Çelik]]></category>
		<category><![CDATA[uk]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/2006/atmedia-day-two/</guid>
		<description><![CDATA[Day two of the @media conference included talks about microformats, Yahoo!&#8217;s new technical strategies, browser memory leaks and performance tweaks, some information about accessibility, the mobile web, and meeting Molly Holzschlag.&#160;[&#8230;]]]></description>
				<content:encoded><![CDATA[<p><strong>Day two of the @media conference included</strong> talks about microformats, Yahoo!&rsquo;s new technical strategies, browser memory leaks and performance tweaks, some information about accessibility, the mobile web, and meeting Molly&reg; Holzschlag.</p>

<h3>In this post:</h3>

<ul class="toc">
    <li><a href="#cederholm">Dan Cederholm: Bulletproof web design</a></li>
    <li><a href="#christopherson">Robin Christopherson: Beyond a code audit</a></li>
    <li><a href="#moll">Cameron Moll: Mobile web design</a></li>
    <li><a href="#koechley">Nate Koechley: Yahoo! <abbr title="versus">vs.</abbr> Yahoo! <abbr>vs.</abbr> Yahoo!</a></li>
    <li><a href="#tantek">Tantek Çelik: Microformats: evolving the web</a></li>
    <li><a href="#hot-topics">&ldquo;Hot topics&rdquo; panel</a></li>
    <li><a href="#presentations">More presentations</a></li>
</ul>

<p>The <strong>evening:before</strong> featured another get-together in a fancy work:after club, which can be summed up like this: Sweden won against Paraguay, and it was hard to talk to others because some notorious <acronym title="title">DJ</acronym> wouldn&rsquo;t turn down the volume. He desperately tried to get somebody on the dance floor switching from house music to <acronym title="Rhythm &amp; Blues">r&amp;b</acronym> pop, but didn&rsquo;t realize that was not what the audience wanted.</p>

<h3 id="Cederholm">Bulletproof web design</h3>

<p class="vcardInComments">If there was an award for <a href="http://simplebits.com/publications/speak/atmedia/bpwd-atmedia2006.pdf" title="Dan Cederholm&rsquo;s slides as PDF (20 Megabyte)" type="application/pdf">best presentation</a>, <a href="http://www.simplebits.com" class="url fn">Dan Cederholm</a> would get my vote! His slides were so well-designed, so clean, and the special effects (not seen in the <acronym title="Portable Document Format">PDF</acronym> version) contributed to clarify the scope.</p>

<p>It was like <a href="/2006/atmedia-day-one/#keith">Jeremy Keith&rsquo;s presentation</a> the day before, where you knew all the things he was talking about, still <strong>something made &ldquo;click&rdquo; and shifted your perception</strong> &mdash; and if it&rsquo;s only that you think <em>&ldquo;that&rsquo;s what I always needed to show to my designers!&rdquo;</em></p>

<p class="floatleft">
    <img class="floatleft" src="/wp-content/uploads/2006/06/2006-06-16-dig-dug-text-test" alt="Scene from the computer game Dig Dug" width="200" height="125" />
    <span class="caption">Scene from the early computer game Dig Dug (Atari 1983), where you pump up monsters until they explode</span>
</p>

<p>His example for thinking ahead showed a photo of a new warehouse in San Francisco, where the windows had been inserted to be <strong>future proof</strong>, but cemented over for the current use. So think ahead, because content amount and text size may vary, content changes and needs to be maintained, and because the environment can change. Take something off, like images, <acronym title="Cascading Style Sheets">CSS</acronym>, or JavaScript, and make sure the website still functions.</p>

<blockquote cite="http://simplebits.com/publications/speak/atmedia/bpwd-atmedia2006.pdf">
    <p class="last">&ldquo;The journey begins by letting go of control, and becoming flexible.&rdquo;</p>
</blockquote>

<p class="cite"><cite>John Allsopp, &ldquo;<a href="http://www.alistapart.com/articles/dao/">A Dao of Web Design</a>&rdquo;</cite></p>

<p>A lot of his examples worked by setting a 50% value for the horizontal or vertical <code>background-position</code> in combination with overlapping images, and he introduced the term <strong><q>&ldquo;Dig Dug Text Test&rdquo;</q></strong> as a metaphor for pumping up text and assuring the design is still not destroyed. <em>Reminder to self:</em> add more references to early 1980&rsquo;s games in presentations, they are <em>so</em> cool!</p>

<h3 id="christopherson">Beyond a code audit</h3>

<p class="vcard"><a href="http://www.abilitynet.org.uk" class="url fn">Robin Christopherson</a>&rsquo;s bad karma was that he relied on the unreliable wireless network in the conference center, therefore a few examples from the web refused to work.</p>

<p>But by struggling with the technical constraints he set a real-world example for the attending web developers. Robin is blind, and he did not notice the Windows <acronym>XP</acronym> bubbles popping up once in a while trying to alert him that the network was unavailable. He was unable to login on the <acronym title="Queen Elizabeth II Conference Center">QE2CC</acronym> screen, because it was inaccessible and refreshed too often. Also most people I spoke with were deeply impressed by the <strong>incredible speed his screen reader was set to</strong>.</p>

<p>He had also prepared a couple of educational films about challenges on the web for people beyond the visually impaired, like a woman with <strong>learning disabilities</strong> who didn&rsquo;t understand the word &ldquo;disclaimer,&rdquo; or a quadriplegic with a mouthstick and a <strong>voice recognition</strong> system, which was useless when the <code>alt</code> text in images or Flash applications did not match the displayed text. I know what a tremendous amount of work the production of such little films is, and I&rsquo;m looking forward to access them on Robin&rsquo;s site. Also check his <a href="http://www.abilitynet.org.uk/content/oneoffs/media2006.htm" title="Speaker&rsquo;s notes for &ldquo;Beyond the code audit&rdquo;">speaker&rsquo;s notes</a>.</p>

<h3 id="moll">Mobile web design</h3>

<p class="vcard"><a href="http://flickr.com/photos/martin-kliehm/171504415/in/set-72157594172244478/" title="Larger version of the Cameron Moll photo on flickr"><img class="floatleft photo" src="/wp-content/uploads/2006/06/2006-06-16-cameron-moll-small" alt="Cameron Moll presenting @media conference" width="200" height="150" /></a> <a href="http://www.cameronmoll.com" class="url fn">Cameron Moll</a> mentioned a few times that he had held this presentation a year ago. Therefore it was very professional, very slick, but a little unemotional and in my opinion not quite up to date.</p>

<p>Okay, there are more mobile phones than computers, more mobiles than landline connections, but he didn&rsquo;t stress the <a href="http://opengardensblog.futuretext.com/archives/2006/03/mobile_web_20_a_2.html" title="The head of Oxford University&rsquo;s &ldquo;Next Generation Mobile Applications Panel&ldquo; about Ajax on handhelds">incredible impact the wide adoption of Opera</a> supporting <a href="http://www.opera.com/products/mobile/platform/" title="Opera mobile platform website">JavaScript on cellphones</a> will have. That&rsquo;s finally a <em>common platform</em> for web applications using <acronym>Ajax</acronym>, as opposed to hundreds of different implementations of Java which are almost impossible to test. That&rsquo;s a most remarkable development with the potential of revolutionizing mobile applications &mdash; Cameron hardly mentioned it, although this became public in November 2005.</p>

<p>Of course <acronym title="Wireless Markup Language">WML</acronym> is dead, long live <a href="http://www.openmobilealliance.org/tech/affiliates/wap/wap-277-xhtmlmp-20011029-a.pdf" type="application/pdf" title="XHTML Mobile Profile specification"><acronym title="eXtensible Markup Language Mobile Profile">XHTML MP</acronym></a>! You should serve content from a <em><abbr title="dot">.</abbr>mobi</em> domain and concentrate on the contextually relevant information: People might check their eBay watchlist on their cellphone, but they don&rsquo;t upload items to sell, so ignore features like that when developing for mobile devices.</p>

<p>Also my question about <strong>Vodafone and other carriers inserting invalid code</strong> in the pages they serve through their proxy might not have been clear enough, because Cameron replied it&rsquo;s up to the carriers and the browsers how to interpret pages, while developers can control the code.</p>

<p>Unfortunately that&rsquo;s untrue when carriers compress images more and insert JavaScript to get the original images with higher resolutions with a key combination. One script is inserted with the deprecated <code>language</code> attribute in the header, while the other comes <em>after</em> the closing <code>&lt;/html&gt;</code> tag, thus <strong>rendering your valid <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym> strict code to tag soup</strong>. The problem not only manifests on mobile browsing devices, but also when you surf with a regular notebook using your mobile access. Therefore a <code>@media handheld</code> <acronym>CSS</acronym>, browser sniffing, or serving the MIME type depending on the <acronym title="Hypertext Transfer Protocol">HTTP</acronym> accept header are all doomed. And there&rsquo;s no way to prevent the carriers from doing such evil.</p>

<h3 id="koechley">Yahoo! <abbr title="versus">vs.</abbr> Yahoo! <abbr>vs.</abbr> Yahoo!</h3>

<p class="vcard"><a href="http://www.flickr.com/photos/martin-kliehm/171521325/in/set-72157594172244478/" title="Larger version of the Nate Koechley photo on flickr"><img class="floatleft photo" src="/wp-content/uploads/2006/06/2006-06-16-nate-koechley-s" alt="Nate Koechley" width="200" height="150" /></a> I went to this <a href="http://nate.koechley.com/blog/2006/07/12/my_atmedia_2006_slides/" title="Nate Koechley&rsquo;s presentation slides">presentation</a> because <cite><a href="http://nate.koechley.com/blog/" class="url fn">Nate Koechley</a></cite> recently published his smart concept paper about <a href="http://developer.yahoo.com/yui/articles/gbs/gbs.html">graded browser support</a>, which we immediately adopted. What I didn&rsquo;t expect was a most impressive roller coaster trip through browser performance!</p>

<p>Yahoo! has a beta version out for their new portal, also <em>Yahoo! Photos</em> and <em>Yahoo! Mail</em> is under development. All of them make more or less <strong>heavy use of <acronym title="Dynamic HTML">DHTML</acronym> and <acronym title="Asynchronous JavaScript and XML">Ajax</acronym></strong>. Yahoo&rsquo;s goals were increasing performance by 300%, adding interactivity (vulgo: drag &amp; drop), and supporting web standards.</p>

<p>For a <strong>fast response</strong> they used techniques like <a href="http://www.alistapart.com/articles/sprites"><acronym>CSS</acronym> sprites</a>, or memory management. In Nate&rsquo;s words browsers are still <q class="italic">&ldquo;a pain in the ass,&rdquo;</q> and <q class="italic">&ldquo;the web is the most hostile software engineering environment imaginable.&rdquo;</q> <strong><acronym>DHTML</acronym> leaks memory like a sieve</strong>, so for each constructor use a destructor. Instead of adding events to thousands of email objects Yahoo! used the existing <code>document.onmousemove</code> event and checked if the mouse was over an object or white space, then passed the event to that object or drew a rectangular choice box. Key concepts are conservation, destruction, and recycling iFrames (<code>about:blank</code>). Use <a href="http://sourceforge.net/projects/ieleak" title="Drip and IE Sieve leak detectors">Drip</a> as a tool for measuring <a href="http://msdn.microsoft.com/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp" title="Microsoft developer network about Internet Explorer memory leak patterns">memory leaks</a>, test extreme object counts, test long interactions, and test extensive navigation.</p>

<p>Also their developers <strong>prefer <a href="http://www.json.org"><acronym title="JavaScript Object Notation">JSON</acronym></a> over <acronym title="eXtensible Markup Language">XML</acronym></strong> because parsing <acronym>XML</acronym> degrades performance greater than linear as <acronym>XML</acronym> size increases.</p>

<p>They have identified <strong><a href="http://yuiblog.com/blog/2006/11/28/performance-research-part-1/"><acronym>HTTP</acronym> requests</a> as a main performance killer</strong>. Browsers still only process two or four <acronym>HTTP</acronym> requests at a time, especially start pages are not cached as effectively as they imagined, and parsing JavaScript freezes the browser. Therefore they rather serve a single large file with <acronym>CSS</acronym> in the header, and JavaScript as close to the <code>&lt;/body&gt;</code> tag as possible.</p>

<p>Regarding browsers it is faster to <strong>develop for standards, than patch</strong>. Browser support must not be binary, and it does not mean &ldquo;the same.&rdquo;</p>

<blockquote>
    <p class="last">Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogenous essence of the Web.</p>
</blockquote>

<p>There are more <acronym title="Internet Explorer">IE</acronym>5 browsers out there than <acronym>IE</acronym>&nbsp;5.5, and <acronym>IE7</acronym> &ldquo;already moved the needle.&rdquo;</p>

<p>With all the <acronym>DHTML</acronym> and <acronym>Ajax</acronym> I was <strong>concerned about accessibility</strong>, but in a sidenote I almost missed Nate mentioned the <a href="http://developer.mozilla.org/en/docs/Accessible_DHTML">IBM contribution for <acronym>DHTML</acronym> accessibility</a>. Wonderful!</p>

<h3 id="tantek">Microformats: evolving the web</h3>

<p class="vcard"><a href="http://flickr.com/photos/martin-kliehm/171526392/in/set-72157594172244478/" title="Larger version of the Tantek &Ccedil;elik photo on flickr"><img class="floatleft photo" src="/wp-content/uploads/2006/06/2006-06-16-tantek-celik-s" alt="Tantek &Ccedil;elik" width="200" height="150" /></a> When microformats are even on the radar of <a href="http://microformats.org/blog/2006/03/20/bill-gates-at-mix06-we-need-microformats/" title="Bill Gates at Mix06 conference">Bill Gates</a>, how could I ignore them? I had no clue before <a href="http://www.tantek.com" class="fn url">Tantek &Ccedil;elik</a>&rsquo;s <a href="http://tantek.com/presentations/2006/06/microformats-evolution/" title="Tantek&rsquo; presentation about microformats">presentation</a> @media 2006, and now I&rsquo;m implementing them in this post. Microformats are virulent.</p>

<p>Basically you insert a few class names into your code, like</p>

<ol class="code">
    <li><code>&lt;p <strong>class=&quot;vcard&quot;</strong>&gt;</code></li>
    <li class="indent"><code>&lt;a <strong>class=&quot;url fn&quot;</strong><br />href=&quot;http://tantek.com&quot;&gt;<span class="codeSpace">&nbsp;</span>Tantek &Ccedil;elik&lt;/a&gt;</code></li>
    <li><code>&lt;/p&gt;</code></li>
</ol>

<p>There are microformats for <a href="http://microformats.org/wiki/hcard" title="The hcard microformat">contact cards</a>, <a href="http://microformats.org/wiki/hcalendar" title="The hcalendar microformat">calendars</a>, reviews, geo information, and many more. Even the Creative Commons license and the <acronym title="Platform for Internet Content Selection">PICS</acronym> label implemented in this page count as microformats. <acronym title="XHTML Friends Network">XFN</acronym> and <a href="http://microformats.org/wiki/xoxo" title="The XOXO microformat"><acronym title="Extensible Open XHTML Outlines">XOXO</acronym></a>, too.</p>

<p>You can parse this page through a <a href="http://feeds.technorati.com/contacts/http://www.learning-the-world.eu/2006/atmedia-day-two/">Technorati contacts feed service</a> or use a tool like the <a href="https://addons.mozilla.org/firefox/2240/">Tails extension for Firefox</a>, and voilÃ , there&rsquo;s a <em>vcard</em> you could import into your address book (if there wasn&rsquo;t this Thunderbird bug which prevents exactly this). With the <em>hcalendar</em> microformat you synchronize your calendar with event schedules on a website accordingly.</p>

<p>There are a few issues I ran into when I implemented hcards, and the documentation could have more examples, but they are on Tantek&rsquo;s to-do list. Also sometimes it means extra, non-semantic markup, but as microformats increase semantic meaning, I assume it gets Tim Berners-Lee&rsquo;s blessing. So go for it, microformats are definitely among the web&rsquo;s next big things!</p>

<h3 id="hot-topics">&ldquo;Hot topics&rdquo; panel</h3>

<p><a href="http://flickr.com/photos/martin-kliehm/171521326/in/set-72157594172244478/" title="Larger version of the panels photo on flickr"><img class="floatleft photo" src="/wp-content/uploads/2006/06/2006-06-16-panel-small" alt="Hot topics panel with Molly Holzschlag, Jon Hicks, Jeremy Keith, Eric Meyer, and Tantek &Ccedil;elik" width="200" height="150" /></a> I had the pleasure to meet <span class="vcard"><a href="http://www.molly.com" class="url fn" rel="met colleague">Molly Holzschlag</a></span> earlier in a coffee break, and while I was sorry I couldn&rsquo;t attend her session <a href="http://www.w3.org/blog/International/2006/06/19/internationalization_awakening_the_sleep" title="Molly Holzschlag&rsquo;s presentation"><acronym title="Internationalization">I18N</acronym>, awakening the sleeping giant</a>, I&rsquo;m confident I didn&rsquo;t miss much information as I am pretty familiar with her old articles in her regular column in <em>WebTechniques</em> and the current activity of the <acronym title="World Wide Web Consortium">W3C</acronym> <acronym title="internationalization">I18N</acronym> group, where she is a member.</p>

<p><a href="http://www.grochtdreis.de/weblog/index.php?id=P1049">Jens Grochtdreis</a> reports in his blog about the passionate presentation she gave earlier, and although there is more <a href="http://www.webtechniques.com/archives/2000/09/schwartz/" title="Howard Schwartz: Going Global &mdash; Hungry for New Markets">technical experience</a> and awareness in Europe with <a href="http://www.webtechniques.com/archives/2000/09/yunker/" title="John Yunker: Speaking in Charsets &mdash; Building a Multilingual Web Site">multilingual websites</a>, rarely they pay respect to <a href="http://www.webtechniques.com/archives/2000/09/lagon/" title="Olin Lagon: Culturally Correct Site Design">cultural differences</a>, like the meaning of <a href="http://www.webtechniques.com/archives/2000/09/desi/" title="Molly Holzschlag: Color My World">colors</a>. Molly gives everything to educate on <acronym>I18N</acronym> and promote web standards, she is also a member of <acronym title="The Web Standards Project">WaSP</acronym>. I&rsquo;m glad she seems to have found a way to get some help and support, as she is an outstanding, but sensitive person.</p>

<p>Anyway, she was part of the &ldquo;hot topics&rdquo; panel, where <a href="http://adactio.com/journal/1144/" title="Jeremy Keith about the panel">questions from the audience</a> where considered by a group of experts: Molly, Jon Hicks, Jeremy Keith, Eric Meyer, and Tantek &Ccedil;elik. They had a lot of fun and agreed <strong><acronym>CSS</acronym> has become more mainstream</strong> in the last year, as you don&rsquo;t have to defend <acronym>CSS</acronym> against table layout anymore. Well, reading the discussions in German forums and reviewing the code of other websites, there&rsquo;s still a lot of educational work to be done. Also they talked about the accessibility of <acronym>Ajax</acronym>, and mashups as the next big thing, but you can read a decent <a href="http://muffinresearch.co.uk/archives/2006/06/16/media2006-notes-hot-topics-panel/">transcript of the session</a> in Stuart&rsquo;s blog over at Muffinresearch.</p>

<h3 id="conclusions">Conclusions</h3>

<p>If you have followed me this far, you can see <strong>@media was a big inspiration</strong>, it was a lot of fun, especially the after event on Saturday, and I can only recommend the conference! There are endless <a href="http://flickr.com/search/?q=atmedia">flickr pictures</a> and quite a few <a href="http://technorati.com/search/atmedia">blog entries on Technorati</a> if you need further impressions. Um, and never mind the British food&nbsp;&hellip;</p>

<h3 id="presentations">More presentations</h3>

<p>Here are the presentations in the parallel track I couldn&rsquo;t attend. Also there will be <a href="http://learningtheworld.eu/2006/atmedia-slides/">pod- and videocasts</a> available soon.</p>

<ul>
    <li><a href="http://www.mezzoblue.com/presentations/2005/wdw/type/">Dave Shea: Fine typography on the web</a></li>
    <li><a href="http://www.andybudd.com/atmedia2006/bugs.pdf" type="application/pdf">Andy Budd: Bug hunting</a></li>
    <li><a href="http://simon.incutio.com/archive/2006/06/26/libraries"><abbr title="Document Object Model">DOM</abbr> Scripting: The Next Level</a></li>
    <li><a href="http://www.stuffandnonsense.co.uk/downloads/transcendingcss.pdf" type="application/pdf">Andy Clarke: The fine art of web design</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2006/atmedia-day-two/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
