<?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; Frontend Engineering</title>
	<atom:link href="http://learningtheworld.eu/tag/frontend-engineering/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>Upcoming Talks: ARIA and Canvas</title>
		<link>http://learningtheworld.eu/2008/upcoming-talks-aria-canvas/</link>
		<comments>http://learningtheworld.eu/2008/upcoming-talks-aria-canvas/#comments</comments>
		<pubDate>Fri, 08 Aug 2008 18:08:41 +0000</pubDate>
		<dc:creator><![CDATA[Martin Kliehm]]></dc:creator>
				<category><![CDATA[about]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[conferences]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[web standards]]></category>
		<category><![CDATA[A-Tag]]></category>
		<category><![CDATA[aria]]></category>
		<category><![CDATA[austin]]></category>
		<category><![CDATA[Austria]]></category>
		<category><![CDATA[Basel]]></category>
		<category><![CDATA[Basle]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[Düsseldorf]]></category>
		<category><![CDATA[Erlangen]]></category>
		<category><![CDATA[Ernest Delgado]]></category>
		<category><![CDATA[Frontend Engineering]]></category>
		<category><![CDATA[Gez Lemon]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[mozilla]]></category>
		<category><![CDATA[namics]]></category>
		<category><![CDATA[presentation]]></category>
		<category><![CDATA[Steve Faulkner]]></category>
		<category><![CDATA[Switzerland]]></category>
		<category><![CDATA[sxsw]]></category>
		<category><![CDATA[sxsw interactive]]></category>
		<category><![CDATA[talks]]></category>
		<category><![CDATA[texas]]></category>
		<category><![CDATA[upcoming:event=453651]]></category>
		<category><![CDATA[upcoming:event=860802]]></category>
		<category><![CDATA[upcoming=event:1009923]]></category>
		<category><![CDATA[upcoming=event:421355]]></category>
		<category><![CDATA[Vienna]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://learningtheworld.eu/?p=132</guid>
		<description><![CDATA[Allow me a little self-promotion while pointing you to interesting conferences where I will hold presentations.&#160;[&#8230;]]]></description>
				<content:encoded><![CDATA[<p>Allow me a little self-promotion while pointing you to interesting conferences where I will hold presentations.</p>

<div class="vevent">
<h3 class="summary">SXSW Interactive 2009</h3>
<p><a href="http://sxsw.com/interactive/" class="url uid"><img src="/wp-content/uploads/2008/08/logo-sxsw-interactive-2009" alt="Logo SXSW Interactive 2009" width="77" height="91" class="floatleft" /></a>Most important is voting for my panels at <strong>South by Southwest (<acronym>SXSW</acronym>)</strong> held <span class="dtstart" title="20090313">March 13</span>-<span class="dtend" title="20090317">17</span>, 2009 in <span class="location">Austin, Texas</span>. There&rsquo;s an interactive panel picker that accounts for 30% of the juice a panel can receive. I proposed two panels, please <strong>vote for them</strong>: <a href="http://panelpicker.sxsw.com/ideas/view/1344">Hands-On Accessible Rich Internet Applications</a> (<acronym>ARIA</acronym>) and <a href="http://panelpicker.sxsw.com/ideas/view/1328">The HTML&nbsp;5 Canvas Element</a>.</p>
<p>Both are for advanced developers and feature fairly innovative topics:</p>
<p><strong>ARIA</strong> will be a panel with many hands-on examples of real world implementations presented together with <a href="http://juicystudio.com">Gez Lemon</a>, <a href="http://www.wat-c.org">Steve Faulkner</a> (both working for <a href="http://www.paciellogroup.com/blog">The Paciello Group</a>) and a developer from Mozilla/IBM. I asked Aaron Leventhal who just moved over to Germany thus suggesting to invite somebody from IBM&rsquo;s Texan office, so be it.</p>
<p>The talk about the <strong><code>canvas</code> element in HTML5</strong> will be a dual presentation with <a href="http://ernestdelgado.com">Ernest Delgado</a> who created some <a href="http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html" title="canvas photo demo">amazing</a> <a href="http://www.ernestdelgado.com/gmaps/canvas/ddemo1.html" title="Google Maps demo with canvas">experiments</a> while working for Google and <a href="http://yuiblog.com/blog/2008/06/23/slicing/">Yahoo!</a> I&rsquo;m preparing talks with a few exiting examples about that topic in September, so we will have some interesting cases to present! I believe in 2009 we will see more examples of this technique in the wild. It&#8217;s pretty cool what you can do with it, but also we need to gather some experience to suggest accessibility features that are still missing.</p>
<p><strong>Voting for panels closes on August 29</strong>, just <a href="http://panelpicker.sxsw.com/users/register">create an account</a> (you won&rsquo;t be spammed) and cast your vote. And while you&rsquo;re at it, there are <a href="http://panelpicker.sxsw.com/ideas/view/1269" title="Aging, Cognition &amp; Deafness: The Quirky Corners of Web Accessibility">other</a> <a href="http://panelpicker.sxsw.com/ideas/view/995" title="web standards curriculum">panel</a> <a href="http://panelpicker.sxsw.com/ideas/view/1405" title="2009 WaSP Annual Meeting">suggestions</a> of valued colleagues from the Web Standards Project where you can add some emphasis. <img src="http://learningtheworld.eu/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> </p>
</div>

<h3>Other conferences</h3>

<p class="vevent">The next geek meeting held in <strong class="location">Frankfurt</strong> will be the <a href="http://webmontag.de/doku.php?id=frankfurt" hreflang="de" class="url uid summary">Webmontag</a> (Web Monday) on <em class="dtstart" title="20080901T190000">September 1st</em> where I will give my presentation about <code>canvas</code> a short test drive.</p>

<p class="vevent">A few days later on <em class="dtstart" title="20080904T090000">September 4</em> I have the honor of the opening talk at the <a href="http://www.webkongress.uni-erlangen.de" hreflang="de" class="url uid summary">Web Congress</a> at the <strong class="location">University of Erlangen</strong>, again about <code>canvas</code>, only this time a full hour.</p>

<p class="vevent">On <em class="dtstart" title="20080925">September 25</em> there&rsquo;s the <a href="http://www.best-of-accessibility.de" hreflang="de" class="url uid summary">Best of Accessibility Symposium</a> in <strong xml:lang="de" class="location">Düsseldorf</strong> where I hold a workshop about hands-on <acronym>ARIA</acronym> (you recognize the pattern?).</p>

<p class="vevent">On <em class="dtstart" title="20081010">October 10-11</em> an internal namics conference called <span class="summary">T-Camp</span> is held in <span class="location">Basel</span>, with my colleague Alex Stirn and me speaking about <strong>Professional Frontend Engineering</strong>.</p>

<p class="vevent">A conference I&#8217;m looking forward to because of the many experts attending and the fair prices is the <strong xml:lang="de" lang="de" class="summary">A-Tag</strong> (Accessibility Day) in <strong class="location">Vienna</strong>, Austria, on <em class="dtstart" title="20081121">November 21</em>. Again I will sing praises of <acronym>ARIA</acronym>. This innovative technique can&#8217;t be evangelized enough! There&#8217;s no website yet for the A-Tag, but I&#8217;d recommend to book your journey well in advance to catch the inexpensive flights to Vienna. The conference itself <del>cost only &euro;&nbsp;35 last year</del> <ins datetime="20080809T002100">is <strong>free</strong></ins> because it is sponsored by the Austrian government.</p>

<p>If you happen to be around, don&#8217;t hesitate to speak to me.</p>
]]></content:encoded>
			<wfw:commentRss>http://learningtheworld.eu/2008/upcoming-talks-aria-canvas/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<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>
	</channel>
</rss>
