<?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>K.Adam White &#187; Web Design</title>
	<atom:link href="http://www.kadamwhite.com/archives/tag/web-design/feed" rel="self" type="application/rss+xml" />
	<link>http://www.kadamwhite.com</link>
	<description>Digital Artist, Designer, DJ</description>
	<lastBuildDate>Tue, 10 Jan 2012 01:11:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>BostonIndies.com redesign launched!</title>
		<link>http://www.kadamwhite.com/archives/2011/bostonindies-com-redesign-launched</link>
		<comments>http://www.kadamwhite.com/archives/2011/bostonindies-com-redesign-launched#comments</comments>
		<pubDate>Mon, 18 Jul 2011 12:22:28 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[Games]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Boston Indies]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=313</guid>
		<description><![CDATA[Boston Indies is a local game development group, founded by Scott Macmillan as an offshoot of the larger (and more corporate) Boston PostMortem meetup. I&#8217;ve been proud to be associated with the Indies group, and was excited when Darren Torpey asked if I would be available to help them with a site design. Managing editor&#8230;]]></description>
			<content:encoded><![CDATA[<div class="hang-2-column" style="width:170px;">
<img src="http://www.kadamwhite.com/files/2011/07/boston-indies-header.png" alt="Boston Indies Logo" title="Boston Indies Logo" style="width:170px;" /></div>
<p><a href="http://www.bostonindies.com">Boston Indies</a> is a local game development group, founded by Scott Macmillan as an offshoot of the larger (and more corporate) <a href="http://www.bostonpostmortem.org/">Boston PostMortem</a> meetup. I&#8217;ve been proud to be associated with the Indies group, and was excited when <a href="http://darrentorpey.com/">Darren Torpey</a> asked if I would be available to help them with a site design. Managing editor <a href="http://www.jonathonmyers.com/">Jonathan Myers</a> has brought in a lot of good content to the site so my design was pitched to take a backseat to the articles themselves, giving just enough structure and consistency to let the content shine. <a href="http://www.bostonindies.com">Check out the new, cleaner look of Boston Indies here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2011/bostonindies-com-redesign-launched/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Slam Bolt Scrappers to be released next week!</title>
		<link>http://www.kadamwhite.com/archives/2011/slam-bolt-scrappers-to-be-released-next-week</link>
		<comments>http://www.kadamwhite.com/archives/2011/slam-bolt-scrappers-to-be-released-next-week#comments</comments>
		<pubDate>Thu, 10 Mar 2011 01:25:48 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[Games]]></category>
		<category><![CDATA[Boston Indies]]></category>
		<category><![CDATA[Fire Hose Games]]></category>
		<category><![CDATA[PSN]]></category>
		<category><![CDATA[Slam Bolt Scrappers]]></category>
		<category><![CDATA[Video Games]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=282</guid>
		<description><![CDATA[If you&#8217;re not familiar with the video game Slam Bolt Scrappers, I strongly suggest you go check it out at Fire Hose Games&#8217; site. I have worked with Fire Hose several times in the past, most recently this winter to design and launch their new website, and they are great folks. More importantly, the game&#8230;]]></description>
			<content:encoded><![CDATA[<p><iframe title="Fire Hose Games' Slam Bolt Scrappers Release Trailer" width="425" height="269" src="http://www.youtube.com/embed/lw4HgE8Z590?rel=0" frameborder="0" allowfullscreen></iframe></p>
<p>If you&#8217;re not familiar with the video game Slam Bolt Scrappers, I strongly suggest you go check it out at <a href="http://www.firehosegames.com" title="Fire Hose Games, makers of Slam Bolt Scrappers">Fire Hose Games&#8217; site</a>. I have worked with Fire Hose several times in the past, most recently this winter to design and launch their new website, and they are great folks. More importantly, the game is a <em>lot</em> of fun! It&#8217;s a mashup of sorts, combining elements of Super Smash Bro&#8217;s, Tetris and several other games&mdash;that may sound weird, but it works. I&#8217;ve yet to win a match, but this weekend at PAX East I will be challenging &#8216;Fire Chief&#8217; Eitan Glinert to a rematch from last year&#8217;s PAX, where I suffered a crushing defeat!</p>
<p>Slam Bolt Scrappers is a PSN exclusive, and will be released digitally on March 13. Catch them this weekend at <a href="http://www.paxsite.com" title="PAX East official website">the Penny Arcade Expo, PAX East, in Boston</a> to try the game.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2011/slam-bolt-scrappers-to-be-released-next-week/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Parallax &amp; CSS3</title>
		<link>http://www.kadamwhite.com/archives/2011/parallax-css3</link>
		<comments>http://www.kadamwhite.com/archives/2011/parallax-css3#comments</comments>
		<pubDate>Sat, 08 Jan 2011 19:19:14 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[Games]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Game Jam]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Video Games]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=254</guid>
		<description><![CDATA[I&#8217;m spending the bulk of this weekend at the HTML5 Tools Jam organized by my friends Darren &#038; Darius of Boston Game Jams. I am working towards adding parallaxing background support to the ALES level editor for the Akihabara HTML5 game engine. I have the benefit of direct access to the creators of ALES, the&#8230;]]></description>
			<content:encoded><![CDATA[
<div id="css3parallaxdemo" style="
	width:421px;
	height:250px;
	margin-bottom:15px;
	background:
		url(http://www.kadamwhite.com/demos/css3parallax/bg1.png) left bottom repeat-x,
		url(http://www.kadamwhite.com/demos/css3parallax/bg2.png) left bottom repeat-x;
	background-color:  #9a9aff;
	border: 2px solid #900000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
"></div>
<script type="text/javascript">
(function($) {
	var pos1 = 0;
	var pos2 = 0;
	setInterval(function() {
		pos1+=4;
		pos2+=1;
		console.log('pos1: '+pos1+', pos2: '+pos2+'. STRING: '+pos1+'% bottom,'+pos2+'% bottom');
		$('#css3parallaxdemo').animate({
			'background-position': pos1+'% bottom,'+pos2+'% bottom'
		},20, 'linear');
	}, 20);
})(jQuery);
</script>
<p>I&#8217;m spending the bulk of this weekend at the <a href="http://bostongamejams.com/game-jams/html5-tools-jam-2011/">HTML5 Tools Jam</a> organized by my friends Darren &#038; Darius of <a href="http://bostongamejams.com/">Boston Game Jams</a>. I am working towards adding parallaxing background support to the <a href="http://bostongamejams.com/tools/ales/">ALES</a> level editor for the <a href="http://www.kesiev.com/akihabara/">Akihabara</a> HTML5 game engine. I have the benefit of direct access to the creators of ALES, the aforementioned Darren Torpey &#038; Darius Kazemi, but my first goal didn&#8217;t even involve Akihabara: I just wanted to see if there was a way to use CSS3&#8242;s support for multiple backgrounds to create a parallax effect within a <code>div</code>. As you can see above (if you&#8217;re using Chrome, Safari or Opera), it does!</p>
<p>The above <code>div</code> contains two .png background images with a <code>repeat-x</code> property specified. Just as you define multiple backgrounds through comma-separated <code>url()</code> statements, so can you change the position of all background images within a <code>div</code> by using JavaScript to pass comma-separated background positions. In this case I&#8217;m using <code>setInterval</code> to quickly create a continuous animation:</p>
<pre><code>setInterval(function() {
    pos1+=4;
    pos2+=1;
    $('#css3parallaxdemo').animate({
      <strong>'background-position': pos1+'% bottom,'+pos2+'% bottom'</strong>
    },20, 'linear');
}, 20);</code></pre>
<p>The easy part done, I am looking forward to diving into ALES. It&#8217;s doubtful I will be able to get full two-dimensional parallax motion ready by the end of the weekend due to other commitments, but many other people here are also working on ALES and I&#8217;m looking forward to seeing where the platform goes. (I recommend taking a look at <a href="http://ryan-kahn.com/akihabara.php">Ryan Kahn&#8217;s Akihabara plugins</a> system as an example of awesome recent developments.)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2011/parallax-css3/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>This talk is about Content</title>
		<link>http://www.kadamwhite.com/archives/2010/this-talk-is-about-content</link>
		<comments>http://www.kadamwhite.com/archives/2010/this-talk-is-about-content#comments</comments>
		<pubDate>Tue, 26 Oct 2010 01:08:10 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=190</guid>
		<description><![CDATA[At the Boston WordPress Meetup this evening, I saw a presentation by Chris Brogan on &#8220;The Power of Content.&#8221; While everything he said was definitely true—the normal internet user has developed a microscopic web-browsing attention span thanks to twitter, top 10 (and even moreso top 9) lists draw visitors and inspire discussion in your comments,&#8230;]]></description>
			<content:encoded><![CDATA[<p>At the <a href="http://www.bostonwp.og">Boston WordPress Meetup</a> this evening, I saw a presentation by Chris Brogan on &#8220;The Power of Content.&#8221; While everything he said was definitely true—the normal internet user has developed a microscopic web-browsing attention span thanks to twitter, top 10 (and even moreso top 9) lists draw visitors and inspire discussion in your comments, and so on—the presentation left a bad taste in my mouth.</p>
<p>It wasn&#8217;t a presentation about the power of content: it was a presentation about how to present and ration information to drive traffic. These things matter, but they have little to do with the underlying content. This is what rankles me, the gap between what I had expected from the talk and what was being presented. I&#8217;d gone in expecting a presentation about honing the content you produce, and instead I was reminded of all of the trollish presentation tricks and vacuous social media positioning people use to make up for lack of remarkable content.</p>
<p>&#8220;Remarkable&#8221; content is an idea I&#8217;ve borrowed from my friends at <a href="http://www.dejobaan.com/">Dejobaan Games</a>, who use it to refer to the way they spread buzz for their games. In short: if you make something worth talking about, people will talk. This kind of &#8220;if you build it&#8221; approach may not generate the volume of traffic a top 10 list would, but the visitors you do get are more invested in your content when you have <em>earned</em> their attention. This is what I care about. With all due respect to Mr Brogan (and the amount of traffic he maintains speaks for itself!), his definition of &#8216;content&#8217; has about as much applicability to what I do as <a href="http://whatthefuckismysocialmediastrategy.com/">these social media strategies</a>.*</p>
<p>All that aside, thanks again to Kurt and James from Boston WP for yet another successful meetup, and see you all at <a href="http://blog.designcampboston.com/">Design Camp Boston</a>!</p>
<p>*<em> (marginally NSFW, for language)</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2010/this-talk-is-about-content/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Boston 2010</title>
		<link>http://www.kadamwhite.com/archives/2010/jquery-boston-2010-day-1</link>
		<comments>http://www.kadamwhite.com/archives/2010/jquery-boston-2010-day-1#comments</comments>
		<pubDate>Mon, 18 Oct 2010 05:06:16 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[jQuery Boston]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=109</guid>
		<description><![CDATA[Updated 10/20: The official event schedule now has links to slides!Link to this post at goos.es/jqueryboston. Slides, Abstracts, and SpeakerRate links for each session: Day 1 Day 2 Day 1 10:05 Keynote - jQuery Core &#038; jQuery Mobile By John Resig View the slides for this talk (slideshare) I also have notes on the presentation&#8230;]]></description>
			<content:encoded><![CDATA[

<p><em><strong>Updated 10/20:</strong></em> The <a href="http://events.jquery.org/2010/boston/schedule/">official event schedule</a> now has links to slides!<br />Link to this post at <a href="http://goos.es/jqueryboston">goos.es/jqueryboston</a>.</p>

<h3>Slides, Abstracts, and SpeakerRate links for each session:</h3>

<div id="tabs" class="override">
<ul>
	<li><a href="#tabs-1">Day 1</a></li>
	<li><a href="#tabs-2">Day 2</a></li>
</ul>
<div id="tabs-1">
<h3 class="progrock"><a name="tabs-1"></a>Day 1</h3>
	<div class="accordion">
		<h3>10:05 <em><strong>Keynote - jQuery Core &#038; jQuery Mobile</strong></em></h3>
		<div>
			<p>By <a href="http://twitter.com/jeresig">John Resig</a></p>
			<p>View the <a href="http://www.slideshare.net/jeresig/jquery-keynote-fall-2010" target="_blank">slides</a> for this talk (slideshare)</p>
			<p>I also have <a href="http://www.kadamwhite.com/archives/key-notes">notes on the presentation</a><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4639" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>The jQuery team has been working hard over the past few months to bring you some brand new code: The first alpha release of jQuery Mobile and jQuery 1.4.3. In this keynote we're going to look at both of these releases and see how your applications will benefit.</p>
		</div>
		<h3>11:00 <em><strong>Sponsor Spotlight: Voxeo PhonoSDK</strong></em></h3>
		<div>
			<p>By <a href="http://twitter.com/loopingrage">Jose de Castro</a> of <a href="http://twitter.com/tropo">Tropo</a></p>
			<p>View the <a href="http://www.slideshare.net/phonosdk/pres-5460733" target="_blank">slides</a> for this talk (slideshare)</p>
			<p><em>I also have <a href="http://www.kadamwhite.com/archives/voxeo-phonosdk">notes on the presentation</a></em></p>
		</div>
		<h3>11:30 <em><strong>Mobile UI</strong></em></h3>
		<div>
			<p>By <a href="http://twitter.com/filamentgroup">Filament Group</a></p>
			<p>View the <a href="http://www.slideshare.net/ToddParker1/jquery-mobile-overview-boston" target="_blank">slides</a> for this talk (slideshare)</p>
			<p>I also have <a href="http://www.kadamwhite.com/archives/jquery-mobile-ui">notes on the presentation</a><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4640" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>The jQuery Mobile framework is a unified interface system, based on jQuery and jQuery UI and built with progressive enhancement, that will be designed and tested to work across all popular smartphone and tablet platforms. Todd Parker and Scott Jehl will present an in-depth walkthrough of the current state of the jQuery Mobile project, including an overview of the layouts, widgets and utilities included in the alpha release. We'll cover the basics of using the jQuery Mobile system, demo real-world examples to illustrate how to build mobile-optimized web sites and applications that work on a wide range of devices, discuss the all-new CSS theme framework optimized for greater control and flexibility, and preview the upcoming version of the ThemeRoller tool.</p>
		</div>
		<h3>11:30 <em>jQuery('#knowledge').appendTo('#you');</em></h3>
		<div>
			<p>By <a href="http://twitter.com/mikehostetler ">Mike Hostetler</a></p>
			<p>View the <a href="http://www.slideshare.net/mikehostetler/jqueryknowledgeappendtoyou" target="_blank">slides</a> for this talk (slideshare)</p>
			<em>Rate this talk on <a href="http://spkr8.com/t/4641" target="_blank">Speaker Rate</a></em>
			<h4>Abstract</h4>
			<p>This talk will a quick but thorough introduction to the jQuery Javascript Library. If you have zero experience with jQuery, this is the talk to start with. We will cover jQuery and its history. We'll then start by introducing basic jQuery concepts and principles. Finally, we'll conclude by building a basic jQuery plugin.</p>
			<p>The content of this talk will be much different then the jQuery training offered prior to the conference. Because of the available time, the training will be diving deep into jQuery concepts. This talk will cover some of the same topics, but will only cover them briefly.</p>
		</div>
		<h3>13:30 <em>OOCSS for JavaScript Pirates</em></h3>
		<div>
			<p>By <a href="http://twitter.com/unscriptable">John Hann</a> &#038; <a href="http://twitter.com/briancavalier">Brian Cavalier</a></p>
			<p>View the <a href="http://www.slideshare.net/unscriptable/oocss-for-javascript-pirates-jqcon-boston" target="_blank">slides</a> for this talk (slideshare)</p>
			<p><em>Rate this talk on <a href="http://spkr8.com/t/4642" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>At first glance, Object-Oriented CSS looks like yet another rehash of CSS "best practices". Maybe the OO part caught your attention briefly before you dismissed it as a gimmick. Who cares about CSS anyways? I'm a JavaScript Pirate! CSS is for lollygaggers and deck scrubbers! That's what this JavaScript Pirate thought, too, at first. But now that I'm skilled in the arcane art of OOCSS, I've come to realize that it not only helps me write better CSS, but it also helps me write much better JavaScript! You too will be able to create kick-ass web apps that are engineering marvels -- able to withstand high seas and hurricane-force winds -- er... or at least unreasonable customer demands. First, we'll review the basics of OOCSS. Then, we'll delve deeper. Way deeper.</p>
		</div>
		<h3>13:30 <em>Introduction to jQuery UI</em></h3>
		<div>
			<p>By <a href="http://twitter.com/elijahmanor">Elijah Manor</a></p>
			<p>View the <a href="http://elijahmanor.com/talks/jq-ui-intro.html" target="_blank">slides</a> for this talk (html5)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4643" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>This talk is an intro of the jQuery UI (build on top of jQuery) that provides a extensive set of interactions and widgets to help you build Rich Internet Applications. Some of these interactions and widgets include drag-and-drop, resizing, mouse-sorting, mouse-selecting, autocomplete, button, datepicker, dialog, progressbar, slider, and tabs. These components where written with a consistent API, design, behavior, and theming mechanism, which makes it an easy library to learn, setup, and immediately use. We will spend considerable time showing the components, examining how you can manipulate their default options, and revealing how you can easily change their theme cross your website.</p>
		</div>
		<h3>14:30 <em>Is these a bug?, or how to contribute to the jQuery project through better bug reporting</em></h3>
		<div>
			<p>By <a href="http://twitter.com/miketaylr">Mike Taylor</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4644" target="_blank">Speaker Rate</a></em></p>
			<p>Relevant Links: <a href="http://bugs.jquery.com/report">http://bugs.jquery.com/report</a> and <a href="http://bugs.jquery.com/timeline">http://bugs.jquery.com/timeline</a></p>
			<h4>Abstract</h4>
			<p>In this talk we'll discuss the fundamentals of creating and reporting bugs (whether perceived or real) for the jQuery project. While this may seem an obvious task at first glance, there are a number of critical skills required to create a bug report in such a way as to ensure your problems receive appropriate attention in the proper channels. Furthermore, we'll talk about how to submit proposed workarounds or fixes that address the problem.</p>
		</div>
		<h3>14:30 <em>TDD your jQuery Plugins</em></h3>
		<div>
			<p>By <a href="http://twitter.com/p_elliott">Paul Elliott</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4645" target="_blank">Speaker Rate</a></em></p>
			<p>See the code from this presentation on <a href="http://github.com/paulelliott/jquery-tdd-example">github</a></p>
			<h4>Abstract</h4>
			<p>The quality of every jQuery plugin reflects on the entire community. As responsible software craftsmen it is critical that we certify our work as best we can. A very effective way to do that is by test driving the development of your plugin and maintaining a comprehensive test suite covering every feature. In this talk, I explain the process of test driven development and how it can be applied to your new and existing projects. I will demonstrate how to use modern tools to test your plugins from the outside in and significantly improve the quality of the code you write. I will walk you step by step from the idea for a feature all the way through its testing and implementation. Following this methodology will give you confidence in your releases and in all future changes to your code. An added bonus is that these concepts extend beyond your jQuery development and into every aspect of the applications you write, regardless of the platform!</p>
		</div>
		<h3>15:15 <em><strong>Inaugural State of HTML 5</strong></em></h3>
		<div>
			<p>By <a href="http://twitter.com/paul_irish">Paul Irish</a></p>
			<p>View the <a href="http://stateofhtml5.appspot.com/" target="_blank">slides</a> for this talk (HTML5)</p>
			<p>I have posted a number of links that were discussed during Paul's talk <a href="http://www.kadamwhite.com/archives/paul-irish-html5-madness-link-dump">here</a>. (caution: no organization yet!)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4646" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>HTML5 and friends have been getting implemented in browsers at an impressively quick pace. But that leaves us as web developers wondering, "Great, but how am I supposed to build cross-browser applications with these features when I still have to support IE". We'll take a look at what the landscape of implementable features are, detailing best practices of implementation and fallback solutions where appropriate. For example, how do you pair WebSockets with a standard comet stack and what do you have to watch out for. We'll also review your available feature set if you're only targeting webkit mobile, or if you've already given IE6 the boot. The data will be up-to-the-day accurate, covering all major browsers and filled with best practices from topic experts.</p>
		</div>
		<h3>15:15 <em>A Crash Course in JavaScript Application Testing with FuncUnit</em></h3>
		<div>
			<p>By <a href="http://twitter.com/brianmoschel">Brian Moschel</a></p>
			<p>View the <a href="http://www.slideshare.net/moschel/funcunit" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4647" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>Hate testing, but love the feeling of a bug free application? Then this is the talk for you! In under 30 minutes we’re going to change the way you view testing. JavaScript application testing has a well-earned reputation for being a giant pain in the ass. Existing solutions suffer from complex setup, difficult APIs, lack of automation, or expensive licensing fees. But there’s no denying that solid testing is the key to a better quality, more maintainable app. And that’s where FuncUnit comes in. FuncUnit is a free, open source JavaScript web application testing framework that’s powered by jQuery, Selenium, QUnit, and Envjs. It provides:<br />
			-<strong>Functional testing.</strong> Simulates clicks, keypresses, and drags to test event handling and UI changes.<br />
			-<strong>Easy syntax.</strong> It’s jQuery and QUnit syntax, natural for any jQuery developer.<br />
			-<strong>Run with just a browser.</strong> Developers run tests as they work to prevent regressions.<br />
			-<strong>Run the same test automated.</strong> QA can run nightly scripts that test every supported browser<br />
			-<strong>Simple set up.</strong> All you need is a browser.</p>
			<p>Come join us as we cover these features and more in a live demo. We'll walk through setting up, writing, and running tests on a complex, AJAX heavy jQuery application. Come learn how to be a master of application testing!</p>
		</div>
		<h3>15:15 <em>Breakout Session: Wijmo</em></h3>
		<div>
			<p><em>notes to follow, but <a href="http://wijmo.com/register?redir=/groups">sign up for Wijmo's private beta here</a></em></p>
		</div>
		<h3>16:15 <em>jQuery UI and HTML5 Video Play Nice</em></h3>
		<div>
			<p>By <a href="http://twitter.com/bcrescimanno">Brian Crescimanno</a></p>
			<p>View the <a href="http://www.slideshare.net/bcrescimanno/j-query-conference-2010" target="_blank">slides</a> for this talk (html5)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4648" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>With mobile device usage skyrocketing and Flash Player 10.1 failing to provide a "silver bullet" for developers even on the range of devices that do support it, working effectively with HTML5 video is becoming more critical every day. In this session, we will walk through the basics of creating a jQueryUI-based interface for an HTML5 video player complete with ThemeRoller support. With support for HTML5 video on mobile devices incomplete in many cases, we'll also talk about the nuances of HTML5 video element support on mobile devices including how to properly prepare your content for mobile delivery and common "gotchas" when deploying to these devices.</p>
			<p>You can access a <a href="http://github.com/bcrescimanno/jquery-video">sample jQuery UI video widget</a> and <a href="http://github.com/bcrescimanno/VideoObject.js">a wrapper for injecting an HTML5 video into a page</a> via Brian's GitHub.</p>
		</div>
		<h3>16:15 <em>Rapid testing, rapid development - Increase your development speed by reducing your feedback loops</em></h3>
		<div>
			<p>By <a href="http://twitter.com/mennovanslooten">Menno Van Slooten</a></p>
			<p>View the <a href="http://www.slideshare.net/mennovanslooten/rapid-testing-rapid-development" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4649" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>Development speed is all about the "feedback loop" between coding and testing the result. As any jQuery project grows more complex the developer's feedback loop grows bigger. It goes from "save, reload, check result" to "save, reload, log in, enter data, submit, check result" and sometimes much worse. This talk is about jQuery plugins and general tips that will help you reduce that feedback loop and reclaim that time to make development faster, less tedious and more fun. This talk will show how jQuery plugins like Mockjax can speed up development by reducing dependencies on the backend and preventing conflicts with other developers. It will also show how you can use jQuery testing frameworks like QUnit and UITest to not only test your code but to help you quickly automate the tedious parts of your feedback loops. Additionally, regardless of whether or not you use jQuery, it will provide some general pointers on speeding up front end development. You may not walk away from this talk as a better developer, but you will know how to become a faster developer.</p>
		</div>
		<h3>16:15 <em>Breakout Session: BlackBerry Development with jQuery</em></h3>
		<div>
			<p><em>notes to follow</em></p>
		</div>
		<h3>17:15 <em>Beyond the DOM: Functionality-Focused Code Organization</em></h3>
		<div>
			<p>By <a href="http://twitter.com/rmurphey">Rebecca Murphey</a></p>
			<p>View the <a href="http://www.slideshare.net/rmurphey/functionality-basedorg" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4650" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>The magic of jQuery's CSS-based selection makes it easy to think about our code in terms of the DOM, and sometimes that approach is exactly right. Other times, though, what we're trying to accomplish is only tangentially related to our nodes, and opting for an approach where we think in terms of functionality -- not how that functionality is manifested on our page -- can pay big dividends in terms of flexibility. In this talk, we'll look at a small sample application where the DOM takes a back seat to functionality-focused modules, and see how the approach can change the way we write and organize our code.</p>
		</div>
		<h3>17:15 <em>Contextual jQuery</em></h3>
		<div>
			<p>By <a href="http://twitter.com/dougneiner">Doug Neiner</a></p>
			<p>View the <a href="http://www.slideshare.net/dcneiner/contextual-jquery" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4651" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>The enemy of maintainable code is extensive configuration. Popular frameworks like Ruby on Rails showed just how much can be accomplished by using convention over configuration. Since so much instructional data is described by the HTML of your site, why should you need to redefine it all again in JavaScript? In this session, learn how to develop clean jQuery code that responds to its context instead of the traditional, define everything, top-down approach. Learn how to develop and use conventions in your web sites to minimize the amount of page specific jQuery that is needed. This session will dive deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how to leverage some of the more obscure jQuery selectors. As part of learning how to code Contextual jQuery, this session will also cover tips and tricks on using both traditional and live events to write more effective, responsive code.</p>
		</div>
	</div>
</div>









<div id="tabs-2">
<h3 class="progrock"><a name="tabs-2"></a>Day 2</h3>
	<div class="accordion">
		<h3>10:00 <em>Keynote - jQuery UI</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/rworth">Richard D. Worth</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4652" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>Over the last three years since its 1.0 release, jQuery UI has grown to become the most used JavaScript User Interface library, installed on 6% of the top 10,000 websites on the inter- net. The last two releases of jQuery UI, 1.7 and 1.8, each represent a signficant and unique maturation of the library that has made a dialog as simple as <code>$("&amp;lt;p&amp;gt;hello, world&amp;lt;/p&amp;gt;").dialog();</code></p>
			<p>As one of its highest priorities, the jQuery project is committed to ensuring the components that make up jQuery UI are con- tinuously improved and supported. The jQuery UI team does this with the generous and dedi- cated supported of volunteer and sponsored contributors. The next year in the life of jQuery UI will prove to be one of stellar advancement and the team invites all to participate in this great endeavor.</p>
		</div>
		<h3>11:00 <em>jQuery's Best Friends</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/slexaxton">Alex Sexton</a></p>
			<p>View the <a href="http://jquerysbestfriends.com/#slide1" target="_blank">slides</a> for this talk (HTML5)</p>

			<p><em>Rate this talk on <a href="http://spkr8.com/t/4653" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>During your first interactions as a jQuery user, <code>hide()</code> and <code>show()</code> were all you ever needed. They were the answer to your cross-browser woes, and you were satisfied.</p>

			<p>Time would tell that you quickly outgrew your satisfaction, like the first hit of a powerful new drug. Suggestions suddenly needed to be automated, dates suddenly needed to be picked, and JSONs begged to be AJAXed. You were one jQuery year older now, and things made sense again, jQuery still had the answers.</p>

			<p>Now you're a big kid, and you know what's up. You've lost your innocence, and you've realized that John Resig used to bully Eddy Stevens in 5th grade, the tooth fairy never existed, and that in some cases, jQuery didn't have all the answers. Yes. You realized that jQuery was a tool. Get out of your dependency-management induced depression and check out what jQuery's best friends have to offer.</p>

			<p>jQuery is perfectly suited to work well with other libraries and tools that don't live on the jQuery namespace. This talk will give you some insight on some of the best tools that you should be using alongside jQuery. They aren't necessarily plugins, but they aren't necessarily not plugins, either. They are just my best recollection of jQuery's superhero crime-fighting posse.</p>

			<p>Always remember, when there was only one set of DOM nodes in the sand... that's when jQuery was carrying you.</p>

		</div>
		<h3>11:00 <em>Exploding the internet with jQuery and Couch DB</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/boazsender">Boaz Sender</a></p>
			<p>View the <a href="http://www.htmlten.com/slides/jqcon/#1" target="_blank">slides</a> for this talk (HTML5)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4654" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>In this talk we will step through building a jQuery application that interfaces with a CouchDB document store directly from the client. We will look at some of the unique aspects of a new paradigm in which the client can write directly to the document store with zero server side application code. We will also take a look at extending some of the core principles behind CouchDB's architecture to the client using jQuery. CouchDB should be in every jQuery developer's tool belt. Couch is the NoSQL database with a built in REST HTTP interface, powerful state management, views written in JavaScript and robust versioning. The power of the modern browser is increasing everyday. New features that allow JavaScript programmers to write real software are coming out at an alarming pace during this third Browser War and JavaScript in the client is becoming a more viable place to run software. Technologies like CouchDB are one of the key pieces in this process of thickening the JavaScript client.</p>
		</div>
		<h3>13:00 <em>Building Distributed JavaScript Widgets with jQuery</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/BENTLEGEN">Ben Vinegar</a></p>
			<p>View the <a href="http://www.slideshare.net/benvinegar/building-distributed-java-script-widgets-sat" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4656" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>jQuery makes browser compatibility a snap, but deploying widgets on remote websites is a different ballgame. In this talk, learn best practices and how-tos for building rock-solid distributed JavaScript widgets. Topics will include cross-domain iframe communication, tricks for setting cookies on remote domains, passing variables to static scripts, security issues, restoring core methods, and more. The talk will feature code examples using jQuery and relevant jQuery plugins.</p>
		</div>
		<h3>13:00 <em>Mobile Web Applications with jQuery</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/cpytel">Chad Pytel</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4657" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>Many web applications today provide a custom mobile web interface. Choosing the right tools and executing an effective mobile application can prove to be a delicate balancing act. This talk will present real world case studies of mobile web applications built using jQuery, pragmatic tips for determining what additional toolkits and plugins to use, and effective strategies for designing effective mobile application that compliment, extend, or replace their traditional desktop counterparts.</p>
		</div>
		<h3>13:45 <em>jQuery Effects: Beyond the basics</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/kswedberg">Karl Swedberg</a></p>
			<p>View the <a href="http://pres.learningjquery.com/jqcon2010/" target="_blank">slides</a> for this talk (slideshare)</p>
			<p>There is also a <a href="http://www.bennadel.com/blog/2036-Breaking-Out-Of-jQuery-s-Each-Iteration-Method.htm">cool post</a> on how Swedberg demonstrated how to break out of <code>$.fn.each()</code> iterations with a <code>return false;</code>.<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4658" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>jQuery's core animation methods can seem pretty rudimentary at first glance. Yet lurking beneath their simple exterior is a set of effects with incredible range and flexibility. In this talk, we'll move beyond the basic animations that so many of us rely on. We'll take a closer look at both standard and custom animations and see how they can be used in uncommon ways to create useful and fun effects. We'll also build a couple of our own effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events. Finally, we'll review a few jQuery plugins that make complex animations even easier.</p>
		</div>
		<h3>13:45 <em>Theming jQuery UI like an Aristocrat</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/b4nn0n">Chris Bannon</a></p>
			<p>View the <a href="http://www.slideshare.net/banzor/theming-j-query-ui-like-an-aristocrat" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4659" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>We all know and love ThemeRoller for quickly styling jQuery UI, but we often have to go beyond its capabilities. We will walk through completely building a rich new theme from beginning to end. Recently, 280 North released an Open Source theme called Aristo. It is a really polished an professional looking style that can be applied to many different UI elements. It is also used in the popular Cappuccino web development framework as a built in theme. We are going to take this awesome design concept and build it as a ready-to-use theme for jQuery UI. After we have the core theme in place we can begin customizing each widget’s style while still inheriting from the base CSS. Then we will add some CSS3 magic to make it diamonds!</p>
		</div>
		<h3>14:45 <em>Using templates to achieve awesomer architechture</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/garannm">Garann Means</a></p>
			<p>View the <a href="http://www.slideshare.net/garann/using-templates-to-achieve-awesomer-architecture" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4660" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>Templates are the best kind of tool: simple to write and implement, but powerful enough to make your architecture slicker and your code leaner. Getting markup out of your Javascript is a huge deal, but templates can help with more than that. They can manage repeated code snippets, allow you to deftly switch states in single page applications, and help keep your code DRY when supporting users with and without Javascript enabled. Using and extending them creatively can make any architecture a little awesomer.</p>
		</div>
		<h3>14:45 <em>Moving to jQuery</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/wycats">Yehuda Katz</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4661" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>In earlier versions, the SproutCore JavaScript framework used a clone of jQuery called CoreQuery. With the advent of jQuery 1.4 and its myriad performance improvements, SproutCore has taken the plunge and converted its rendering layer over to jQuery. In this talk, Yehuda will talk about how SproutCore keeps its rendering layer so fast, and how jQuery 1.4's performance improvements made it possible to switch over. He will also cover some patterns used in SproutCore that you can use in standalone web applications using jQuery.
		</p></div>
		<h3>15:45 <em>jQuery in the [AOL] Enterprise</em></h3>
		<div>
			<p>By <a href="http://www.artzstudio.com/">Dave Artz</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4662" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding global plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.</p>
		</div>
		<h3>15:45 <em>Organizing Code with JavaScriptMVC</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/tdreyno">Thomas Reynolds</a></p>
			<p>View the <a href="http://www.slideshare.net/tdreyno/jqconf" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4663" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>The jQuery community has provided thousands of useful plugins which can be stitched together to create exceptional websites. However, organizing those plugins, tracking their upstream changes and managing dependencies can become a nightmare with a system to help you manage. JavascriptMVC, and specifically its new version 3 release, provides a framework for organizing outside code, integrating it into your workflow and compressing down to a single output javascript file. This talk will focus on taking external plugins such as jQuery Tools or jQuery UI and creating a workflow for building larger applications from these components. I will show how to use the JavascriptMVC “getter” and “pluginify” scripts to pull external resources. With JavascriptMVC 3, css and javascript can be packaged together, creating truly convenient widgets. I will also demonstrate how often-used pieces of functionality can be abstracted into plugins and shared with the general community via Github.</p>
		</div>
		<h3>16:30 <em>App in a Browser</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/jdsharp">Jonathan Sharp</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4664" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>It's one thing to know and use jQuery on a website and quite another when building an app. With the flexability of jQuery, there are countless approaches for constructing the front-end of an application. This session focuses on building an app using an event driven approach with the goal of maintaining loose-coupling between the UI and it's cooresponding data. We'll look at the value of being able to integrate with an existing architecture, examine where to separate and draw the lines for roles within a team, and focus on how to bring consistency to the codebase. We'll take some REST services, a few additional components for caching, storage, service abstraction and UI and produce an app that is maintainable and feature rich.</p>
		</div>
		<h3>16:30 <em>Building Extensible Widgets</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/scott_gonzalez">Scott González</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4665" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>jQuery's popularity is largely due to its ease of use and elegant API. jQuery makes common tasks dead simple while making difficult and less common tasks much easier than they would normally be. In this talk, we'll show how to build complex, stateful widgets with the same ease of use as jQuery core. We'll cover the philosophies behind jQuery and how to apply them when building reusable widgets. By the end you'll know how to make the right decisions when designing your widget's API and how to use jQuery UI's widget factory to implement an extensible widget.</p>
		</div>
		<h3>16:30 <em>Breakout Session: Women &amp; Tech Conferences</em></h3>
		<div>
			<p>Lead by <a href="http://www.twitter.com/rmurphey">Rebecca Murphey</a></p>
			<p>See Rebecca's post about the session <a href="http://blog.rebeccamurphey.com/jquery-conference-breakout-session-women-conf">here</a></p>
		</div>
		<h3>17:30 <em>Getting Involved?</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/redwolves">Ralph Whitbeck</a></p>
			<p><em>No slides are currently available</em><br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4638" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>"Are you looking to get more involved in jQuery? Would like to contribute to jQuery but don't know what you can do to help? Not everyone is a John Resig, Brandon Arron, Yehuda Katz, Jörn Zafferer or Scott Gonzalez, but that doesn't mean there isn't something that you can contribute back to the community.</p>
			<p>In this talk, we'll explore various options available to jQuery designers and developers to be able to contribute back to the jQuery Community. We'll discuss ways to have a big impact on a great number of people—from offering help on the forum to sharing plugins to writing tutorials. And we'll look at the proper procedures for reporting bugs and submitting patches. This talk is meant for anyone who is interested in jQuery, from the very beginner to the more advanced user who is looking to get more involved with the community.</p>
		</div>
		<h3>17:30 <em>Super Awesome Interactions with jQuery</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/zurb">Matt Kelly</a></p>
			<p>View the <a href="http://www.zurb.com/jqconf" target="_blank">slides</a> for this talk (slideshare)<br />
			<em>Rate this talk on <a href="http://spkr8.com/t/4666" target="_blank">Speaker Rate</a></em></p>
			<h4>Abstract</h4>
			<p>jQuery makes it simple to create highly interactive web applications, making it easier then ever to create terrible interactions that send your users running for the hills. Applying basic design tools like sketching, design before implementation, and interaction grids will ensure your users cry with joy, rather then cringe with disgust. Matt will show you how to design *super awesome interactions* for jQuery and jQuery UI the way that ZURB does.</p>
			<p>Come prepared for 20% theory, 80% implementation and tons of examples.</p>
		</div>
		<h3>18:15 <em>Panel</em></h3>
		<div>
			<p>By <a href="http://www.twitter.com/jQuery">the jQuery Team</a></p>
			<p><em>No slides are currently available</em></p>
		</div>
	</div> <!-- .accordion -->
</div>

</div> <!-- #tabs -->
<p><br /><strong>Bold</strong> indicates I have uploaded my notes for that talk.</p>

<p>There was an awful lot to digest at <a href="http://events.jquery.org/2010/boston/">jQuery Boston 2010</a>, so I'm going to do this in pieces. I have (as my first excursion into jQuery UI) enclosed a list of the talks by day in accordion widgets above. If I have been able to find a link to the slides it will be listed, as will a link to the presenter's twitter account or blog. I have enclosed the talk abstracts where I do not have personal notes to share. Please <a href="http://twitter.com/?status=@kadamwhite&amp;in_reply_to=kadamwhite">let me know</a> if you find any slides for talks I missed, especially the ones on testing!</p>
<p>If you liked the talks, <a href="http://speakerrate.com/events/599-jquery-conference-2010-boston">rate the speakers!</a> Public notes on the entire conference are <a href="http://oksoclap.com//jqconboston2010">available here</a>.</p>

<p><em>A special thanks to <a href="http://alexisperrier.com/">Alexis Perrier</a> for helping track down some of these presentations!</em></p>


<script type="text/javascript">
jQuery(function($) {
	$( ".accordion" ).accordion({
		autoHeight: false,
		collapsible: true,
		active: false,
		header: 'h3'
	});
	$("#tabs").tabs();
	$('.progrock').hide();
});
</script>

]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2010/jquery-boston-2010-day-1/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery Mobile UI</title>
		<link>http://www.kadamwhite.com/archives/2010/jquery-mobile-ui</link>
		<comments>http://www.kadamwhite.com/archives/2010/jquery-mobile-ui#comments</comments>
		<pubDate>Mon, 18 Oct 2010 04:38:40 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[jQuery Boston]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=136</guid>
		<description><![CDATA[The jQuery Mobile talk was presented by Todd Parker and Scott Jehl of the Filament Group, who are design leads &#038; corporate sponsor for jQuery UI and have written volumes on both jQuery and Progressive Enhancement. The talk built on John Resig&#8217;s keynote announcement of the framework, and delved into some more of the specifics&#8230;]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://jquerymobile.com">jQuery Mobile</a> talk was presented by Todd Parker and Scott Jehl of the<br />
<a href="http://www.filamentgroup.com/">Filament Group</a>, who are design leads &#038; corporate sponsor for jQuery UI and have written volumes on both jQuery and Progressive Enhancement. The talk built on John Resig&#8217;s keynote announcement of the framework, and delved into some more of the specifics of how a jQuery Mobile app will function in different environments. One complaint at the end of the talk pointed out that their presentation did not give a good sense of how the platform will appear on low-end devices, but you can get a taste for what is to come on the more advanced phones at the <a href="http://jquerymobile.com/demos/1.0a1/">jQuery Mobile demo page</a>.</p>
<p><em><strong>Note:</strong> these (and most subsequent) notes have been dumped more or less wholesale from a vim file, so I apologize for the inconsistencies of format.</em><br />
<span id="more-136"></span></p>
<p>UI: You don&#8217;t make a mac version and a windows version of a web app, you have one UI across devices. Moving in that direction for Mobile apps, don&#8217;t need to make it all look like iPhone!<br />
Synthesized a flexible look and feel that they believed would work across touch and mobile devices: goal was to work in all modern mobile platforms</p>
<p>jQuery UI is theming a widget: ThemeRoller is theming an entire application.<br />
Accessibility is a focus</p>
<p>The future: progressive enhancement and symantic markup, leveraging html5 when appropriate but falling back to even primitive browsers.</p>
<p><em>Aside: <a href="http://www.alistapart.com">A List Apart</a> isn&#8217;t really jQuery focused, but it&#8217;s a great and relevant blog</em></p>
<p>One codebase, all platforms, works for each device in the best way for that platform</p>
<p>AN APP<br />
Theme file, jQuery mobile, jQuery core.<br />
Within body of the page, you create divs with a <code>data-role="page"</code> to designate the pages of your application. Multi-page websites in one HTML doc -> Less loading on old browsers, faster responses. Alternately, make an individual doc for each page, pull in with ajax, grab the div with the data-role of page, then switch the view.</p>
<p>jQuery mobile will be full back-button support, missed the name of the specific plugin that enabled that behavior</p>
<p>You get nice transitions layered on top if you have a capable browser &#8211; they borrowed jQTouch transitions, built very elegantly. Implement with <code>&lt;a href="" data-transition="pop"&gt;Link&lt;/a&gt;</code><br />
(or fade, etc)</p>
<p>Dialogs are not built differently from any other page, just designate that you want it to be a dialog.<br />
jQuery Mobile will inset and &#8220;float&#8221; the content, but load it just like any other page.<br />
Can add data-transitions to dialogs too, therefore</p>
<p>THEMING<br />
Can designate button and list styles, header bar styles, coloring, bg textures, and then mix and match to have buttons &#8220;pop&#8221; more</p>
<p>Framework drops in back buttons (although you can override) automatically, to help with the state maintenance</p>
<p>Can put your own buttons in header bar: buttons automatically generated from links in header div, and again, you can override default placement with tags. If you put two links in, by default the first is on the left of the title, the other on the right.</p>
<p>They don&#8217;t turn every link into a button, but <code>data-role="button"</code> will designate a link as one, and wrap with the appropriate theme style</p>
<p>Other types of inputs are automatically made into buttons, you only need to specify for links.</p>
<p>Sweet: Icon set will swap out for high-res on retina display</p>
<p><code>&lt;a iconpos="notext"&gt;Delete&lt;/a&gt;</code> will display as a simple (X) button, but work with screen reader</p>
<p>Can wrap <code>data-inline="true"</code> container around several links, to inline them</p>
<p><code>data-role="controlgroup"</code> will make buttons into a vertical list</p>
<p>Can, as said before, mix and match themes for your buttons. A button will inherit the parent theme, all the way up to body, or you can override.</p>
<p>FORMS<br />
Markup drives behavior, so it&#8217;s picky about your code: Associate your labels with form elements, or it will look messed up. Keeps you honest.</p>
<p>Labels floated, but if the screen goes too narrow the labels pop above the input element. &#8220;Do your markup the right way, and the framework will take care of the rest&#8221;</p>
<p>Text areas grow as you type, to avoid the scrollbar! Hooray!</p>
<p><em>Aside: IPHONE OS GESTURE: Two-finger scroll will scroll</em> within <em>a text area, or any other page element with a scrollbar. That&#8217;ll come in handy!</em></p>
<p>sliders: based on plain HTML5, <code>&lt;input type="range"/&gt;</code>, script will use this text to either generate a text input or a custom widget or both, and keep them in sync</p>
<p>Lists: Esp. Filtered lists</p>
<p>One takeaway: Need textmate, everybody and their friggin mother uses it</p>
<p>SEARCH FILTER BAR, want: <br />
<code>data-filer='true'</code> on the UL itself (or OL, I suppose). Magic.</p>
<p>collapsables, UI element grids (buttons in a line, etc, better than tables)<br />
Collapsable: Have a div with the right attribute, then a header: the header displays on the collapsable, anything after will be shown/collapsed.</p>
<p>Toolbars: several positioning options, still working on it, they know it&#8217;s slightly buggy<br />
Footers do something with data attributes to indicate where and how they should display&#8211;missed it, but it&#8217;s in the demo.</p>
<p>Shooting for a bit of a community aspect to the theme creation</p>
<p>Q&#038;A: Can you use themeroller to build a caching manifest for you?<br />
-<em>Good question, interesting idea</em></p>
<p>Any support for <code>@font-face</code>?<br />
-<em>Doesn&#8217;t work for enough platforms to be in core, but you can roll your own stylesheet to accompany your jQuery Mobile app.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2010/jquery-mobile-ui/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>(Key) Notes</title>
		<link>http://www.kadamwhite.com/archives/2010/key-notes</link>
		<comments>http://www.kadamwhite.com/archives/2010/key-notes#comments</comments>
		<pubDate>Mon, 18 Oct 2010 04:00:26 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[jQuery Boston]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=124</guid>
		<description><![CDATA[This is the first of several posts I will be making containing my notes from the jQuery Boston 2010 conference I attended this weekend. The entire conference kicked off with a presentation by the legendary John Resig, and he marked the occasion by announcing the release of both jQuery 1.4.3 (release announcement) and, more significantly,&#8230;]]></description>
			<content:encoded><![CDATA[<p>This is the first of several posts I will be making containing my notes from the <a href="http://events.jquery.org/2010/boston/">jQuery Boston 2010</a> conference I attended this weekend. The entire conference kicked off with a presentation by the legendary <a href="http://www.ejohn.org">John Resig</a>, and he marked the occasion by announcing the release of both jQuery 1.4.3 (<a href="http://blog.jquery.com/2010/10/16/jquery-143-released/">release announcement</a>) and, more significantly, the alpha version of <a href="http://jquerymobile.com">jQuery Mobile</a>. My notes on his keynote presentation are after the jump.</p>
<p>Please note that I cannot vouch for the 100% accuracy of these notes&#8230; a lot of material was covered very quickly, and my notes were necessarily sketchy. I have done my best to record things accurately, but check at <a href="http://www.jquery.org">jQuery.org</a> before you go shouting any momentous news to the world!<br />
<span id="more-124"></span><br />
1.4.3 is a minor release, focused on bug fixes and performance improvements.</p>
<p><a href="http://www.jslint.com/">JSLint</a> is a JavaScript code quality tool</p>
<p>The jQuery project is moving towards modularity: modules can be dynamically and independently loaded, as through a script loader</p>
<p>the <code>$.fn.css()</code> function underwent a &#8220;massive rewrite,&#8221; and has improved the speed of the selector engine as well as the extensibility of the function. There are now CSS Hooks to support new properties.</p>
<p><code>$.fn.find()</code>, <code>$.fn.filter()</code>,  <code>$.fn.is()</code> and <code>$.fn.closest()</code> functions have seen major performance gains due to a patch on the browser side. The story was great: Resig contact Mozilla with a patch request on Friday, and they added it to their bug tracker on Saturday. Webkit immediately noticed the patch, and added it on Sunday, just in time for the Mozilla patch to land on Monday. Talk about fast turnaround&#8230; the things people say about a unified dev community may be truer than we thought.</p>
<p>Several important plugins have been officially added, including <a href="http://api.jquery.com/category/plugins/data-link/">jQuery Data Link</a>, which will keep a form and a JS data object synchronized through a new ChangeData event.</p>
<p>More significantly, <a href="http://github.com/jquery/jquery-tmpl">jQuery-tmpl</a> provides an official templating system! More on this in notes from a later talk—this is big, and will be foundational for important future updates to jQuery UI, but I am still wrapping my head around how tmpl works&#8230;</p>
<p>jQuery Mobile was the single biggest announcement of the keynote. The framework allows mobile developers to write static HTML pages that will progressively pick up advanced, widgetized behavior on capable devices, while still displaying correctly on the most archaic of mobile browsers. It was described several times during the weekend as &#8220;the first JavaScript framework where you don&#8217;t write any JavaScript,&#8221; and I will post more on it later on.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2010/key-notes/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Paul Irish HTML5 madness link dump</title>
		<link>http://www.kadamwhite.com/archives/2010/paul-irish-html5-madness-link-dump</link>
		<comments>http://www.kadamwhite.com/archives/2010/paul-irish-html5-madness-link-dump#comments</comments>
		<pubDate>Sat, 16 Oct 2010 20:04:48 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[jQuery Boston]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=104</guid>
		<description><![CDATA[I apologize for the lack of organization; these are being shared for expediency&#8217;s sake, and will be cleaned up after jQuery Boston. http://html5readiness.com/ &#8211; Paul Irish&#8217;s chart of HTML5 element acceptance Live Stylesheet test: http://annevankesteren.nl/test/contenteditable-style.htm http://html5homi.es/ ??? http://fuelyourcoding.com/ A magazine, both eds are here MIND BLOWING video cube demo http://studio.html5rocks.com/samples/video-cube/index.html http://webglsamples.googlecode.com/hg/aquarium/aquarium.html &#8211; WebGL demo, hit L&#8230;]]></description>
			<content:encoded><![CDATA[<p>I apologize for the lack of organization; these are being shared for expediency&#8217;s sake, and <em>will </em>be cleaned up after <a href="http://events.jquery.org">jQuery Boston</a>.</p>
<p><a href="http://html5readiness.com/" target="_blank">http://html5readiness.com/</a> &#8211; Paul Irish&#8217;s chart of HTML5 element acceptance</p>
<p>Live Stylesheet test: <a href="http://annevankesteren.nl/test/contenteditable-style.htm" target="_blank">http://annevankesteren.nl/test/contenteditable-style.htm</a><br />
<a href="http://html5homi.es/" target="_blank">http://html5homi.es/</a> ???<br />
<a href="http://fuelyourcoding.com/" target="_blank">http://fuelyourcoding.com/</a> A magazine, both eds are here<br />
MIND BLOWING video cube demo<br />
<a href="http://studio.html5rocks.com/samples/video-cube/index.html" target="_blank">http://studio.html5rocks.com/samples/video-cube/index.html</a><br />
<a href="http://webglsamples.googlecode.com/hg/aquarium/aquarium.html" target="_blank">http://webglsamples.googlecode.com/hg/aquarium/aquarium.html</a> &#8211; WebGL<br />
demo, hit L for lasers!</p>
<p><a href="http://jsfiddle.net/JTSug/3/show" target="_blank">jsfiddle.net/JTSug/3/show</a> Orientation demo for dev build of chrome<br />
<a href="http://code.google.com/p/html5shiv/" target="_blank">http://code.google.com/p/html5shiv/</a> HTML5 shiv for IE 6-8</p>
<p><a href="http://videos.mozilla.org/serv/blizzard/audio-slideshow/" target="_blank">videos.mozilla.org/serv/blizzard/audio-slideshow/</a> &#8211; Minefield web audio demo<br />
<a href="http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/" target="_blank">chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/</a> -<br />
webkit version</p>
<p><a href="http://paulirish.com/work/videooo.xhtml" target="_blank">paulirish.com/work/videooo.xhtml</a> &#8211; octopus nonsense, video filters</p>
<p><a href="http://code.bocoup.com/audio-data-apl/flash-vs-html5" target="_blank">code.bocoup.com/audio-data-apl/flash-vs-html5</a></p>
<p>IF YOU Don&#8217;t support IE, then  prompt to install chromeframe: there&#8217;s<br />
a code snippet to prompt for it</p>
<p>Modernizr JS library will help w/ feature detection and CanIUse.com<br />
will tell you what you can use<br />
<a href="http://bit.ly/mod16beta" target="_blank">bit.ly/mod16beta</a></p>
<p>Polyfills: make new work in old. Geolocation polyfill is an e.g.<br />
<a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills" target="_blank">http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills</a></p>
<p>yepnope.js &#8211; test for support, if not, load the relevant<br />
<a href="http://mothereffingtextshadow.com/" target="_blank">http://mothereffingtextshadow.com/</a></p>
<p>&lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt; will<br />
force the most recent HTML rendering engine from IE &#8211; will force that,<br />
then default to chromeframe IF installed.</p>
<p>Watch @Paul_Irish for the slides from this talk</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2010/paul-irish-html5-madness-link-dump/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>The Goose Provides</title>
		<link>http://www.kadamwhite.com/archives/2010/the-goose-provides</link>
		<comments>http://www.kadamwhite.com/archives/2010/the-goose-provides#comments</comments>
		<pubDate>Tue, 02 Feb 2010 19:55:24 +0000</pubDate>
		<dc:creator>K. Adam White</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Goose Rock]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.kadamwhite.com/?p=43</guid>
		<description><![CDATA[My good friend and erstwhile employer, Goose Rock Design, has rolled out a Goose-themed URL shortener service: goos.es You can now find this blog at http://goos.es/kaw. It doesn&#8217;t actually shorten it much, only about 4 characters, but I needed something to test their (very slick) interface.]]></description>
			<content:encoded><![CDATA[<p>My good friend and erstwhile employer, <a href="http://gooserockdesign.com">Goose Rock Design</a>, has rolled out a Goose-themed URL shortener service: <a href="http://goos.es/">goos.es</a></p>
<p>You can now find this blog at <strong>http://goos.es/kaw</strong>. It doesn&#8217;t actually shorten it much, only about 4 characters, but I needed something to test their (very slick) interface.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kadamwhite.com/archives/2010/the-goose-provides/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

