<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Jonathan Jeter</title>
	
	<link>http://www.jonathanjeter.com</link>
	<description>UI Expert / Front-End Web Developer</description>
	<lastBuildDate>Fri, 22 Feb 2013 05:49:42 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/JonathanJeter" /><feedburner:info uri="jonathanjeter" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><creativeCommons:license>http://creativecommons.org/licenses/by-sa/2.0/</creativeCommons:license><image><link>http://creativecommons.org/licenses/by-sa/2.0/</link><url>http://creativecommons.org/images/public/somerights20.gif</url><title>Some Rights Reserved</title></image><xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" /><meta xmlns="http://pipes.yahoo.com" name="pipes" content="noprocess" /><feedburner:emailServiceId>JonathanJeter</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>HTML5 Texas JavaScript Workshop – Client-Side Storage</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/HD8kJYg0p0Q/</link>
		<comments>http://www.jonathanjeter.com/web-development/html5-texas-javascript-workshop-client-side-storage/#comments</comments>
		<pubDate>Sun, 03 Feb 2013 19:04:35 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[APIs Application Cache]]></category>
		<category><![CDATA[app work offline]]></category>
		<category><![CDATA[Application programming interface]]></category>
		<category><![CDATA[application state]]></category>
		<category><![CDATA[application state Remember]]></category>
		<category><![CDATA[block the UI Make sure to test for]]></category>
		<category><![CDATA[blog post]]></category>
		<category><![CDATA[check Serialization Fallbacks]]></category>
		<category><![CDATA[client-side storage]]></category>
		<category><![CDATA[Client-side Storage Comparison]]></category>
		<category><![CDATA[Client-Side Storage cookies]]></category>
		<category><![CDATA[CPU time Recommendations]]></category>
		<category><![CDATA[dysfunctional site]]></category>
		<category><![CDATA[excessive gets/sets]]></category>
		<category><![CDATA[excessive keys]]></category>
		<category><![CDATA[File APIs]]></category>
		<category><![CDATA[File Systems API]]></category>
		<category><![CDATA[FileReader http://dev.w3.org/2006/webapi/FileAPI/ FileList]]></category>
		<category><![CDATA[FileSaver http://dev.w3.org/2009/dap/file-system/file-writer.html FileWriter]]></category>
		<category><![CDATA[FileSystem http://dev.w3.org/2009/dap/file-system/pub/FileSystem/ Probably]]></category>
		<category><![CDATA[Flash Storage Internet]]></category>
		<category><![CDATA[Flash Storage Internet Explorer UserData]]></category>
		<category><![CDATA[hash table Persistent]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5 Texas]]></category>
		<category><![CDATA[Indexed Database API]]></category>
		<category><![CDATA[IndexedDB IndexedDB]]></category>
		<category><![CDATA[IndexedDB Libraries IndexedDB]]></category>
		<category><![CDATA[indexedDB Optional plugins]]></category>
		<category><![CDATA[IndexedDB window.indexedDB Object]]></category>
		<category><![CDATA[input Improve performance]]></category>
		<category><![CDATA[Internet Explorer UserData]]></category>
		<category><![CDATA[JavaScript Workshop]]></category>
		<category><![CDATA[jQuery Throttle/Debounce Plugin]]></category>
		<category><![CDATA[JS Performance Analysis]]></category>
		<category><![CDATA[local memory]]></category>
		<category><![CDATA[localStorage access]]></category>
		<category><![CDATA[localStorage libraries]]></category>
		<category><![CDATA[LocalStorage Tips]]></category>
		<category><![CDATA[long key vs.]]></category>
		<category><![CDATA[long time]]></category>
		<category><![CDATA[Mobile browser]]></category>
		<category><![CDATA[mobile browsers]]></category>
		<category><![CDATA[modern browser quirks]]></category>
		<category><![CDATA[multiple short keys]]></category>
		<category><![CDATA[new feature]]></category>
		<category><![CDATA[Nicholas Zakas]]></category>
		<category><![CDATA[Quota Management API]]></category>
		<category><![CDATA[Remember user data]]></category>
		<category><![CDATA[Same thing]]></category>
		<category><![CDATA[Script Caching HTML5]]></category>
		<category><![CDATA[slow points]]></category>
		<category><![CDATA[Storage APIs IndexedDB]]></category>
		<category><![CDATA[Storage library]]></category>
		<category><![CDATA[Storage window.name Cookies]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[Texas JavaScript Workshop]]></category>
		<category><![CDATA[Tight JS Loops]]></category>
		<category><![CDATA[web app]]></category>
		<category><![CDATA[Web apps]]></category>
		<category><![CDATA[Web Storage]]></category>
		<category><![CDATA[Web Storage APIs]]></category>
		<category><![CDATA[Web technologies]]></category>
		<category><![CDATA[WebStore support test]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1391</guid>
		<description><![CDATA[Web technologies have taken a long time to progress. A lot of the standards we see today are because browsers decided to implement new features. HTML5 is now just supposed to be HTML. It is supposed to be a living standard. Pamela needs an HTML app that helps choose her hair color. Client-Side Storage cookies [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F' data-shr_title='HTML5+Texas+JavaScript+Workshop+-+Client-Side+Storage'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F' data-shr_title='HTML5+Texas+JavaScript+Workshop+-+Client-Side+Storage'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F' data-shr_title='HTML5+Texas+JavaScript+Workshop+-+Client-Side+Storage'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p><a href="http://www.jonathanjeter.com/images/HTML5TX-JavaScript-Workshop-Pamela-Fox.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1394" alt="HTML5TX JavaScript Workshop - Pamela Fox" src="http://www.jonathanjeter.com/images/HTML5TX-JavaScript-Workshop-Pamela-Fox-300x169.jpg" width="300" height="169" /></a>Web technologies have taken a <a title="HTML Timeline" href=" http://slides.html5rocks.com/#timeline-slide#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" target="_blank">long time</a> to progress.</p>
<p>A lot of the standards we see today are because browsers decided to implement new features.</p>
<p>HTML5 is now just supposed to be HTML. It is supposed to be a <a title="HTML standard (readable format)" href="http://developers.whatwg.org/" target="_blank">living standard</a>.</p>
<p>Pamela needs an HTML app that helps choose her hair color.</p>
<h2><a title="Client-Side Storage in HTML" href="http://www.teaching-materials.org/storage/" target="_blank">Client-Side Storage</a></h2>
<ul>
<li><span style="line-height: 13px;">cookies</span></li>
<li>Flash Storage</li>
<li><a class="zem_slink" title="Internet Explorer" href="http://www.microsoft.com/windows/internet-explorer/" target="_blank" rel="homepage">Internet Explorer</a> UserData</li>
<li><a class="zem_slink" title="Google Gears" href="http://gears.google.com/" target="_blank" rel="homepage">Google Gears</a></li>
<li>Dojo Storage</li>
<li>window.name</li>
</ul>
<p><a class="zem_slink" title="HTTP cookie" href="http://en.wikipedia.org/wiki/HTTP_cookie" target="_blank" rel="wikipedia">Cookies</a> are used for all types of tracking, but they have issues with security, user trust (can be disabled), performance and size.</p>
<p>In the HTML spec, they considered the issues and came up with the following solutions.</p>
<ul>
<li><span style="line-height: 13px;"><a class="zem_slink" title="Web Storage" href="http://en.wikipedia.org/wiki/Web_Storage" target="_blank" rel="wikipedia">Web Storage</a> APIs</span></li>
<li><a class="zem_slink" title="Indexed Database API" href="http://en.wikipedia.org/wiki/Indexed_Database_API" target="_blank" rel="wikipedia">IndexedDB</a></li>
<li>File System APIs</li>
<li>Application Cache</li>
<li>&#8230;cookies</li>
</ul>
<h3><a class="zem_slink" title="Web Storage" href="http://en.wikipedia.org/wiki/Web_Storage" target="_blank" rel="wikipedia">localStorage</a></h3>
<ul>
<li>Key / value pairs &#8211; hash table</li>
<li>Persistent on page reloads</li>
<li>Avoids HTTP overhead of cookies</li>
<li>Great for storing user preferences (domain-specific, but it doesn&#8217;t matter where the script comes from)</li>
</ul>
<h3>sessionStorage</h3>
<p>Same as localStorage but&#8230;</p>
<ul>
<li>Lasts as long as browser is open (session-based)</li>
<li>Opening page in new window or tab starts new session</li>
<li>Great for sensitive data (e.g. banking sessions)</li>
</ul>
<p>Why use a library for localStorage?</p>
<ul>
<li>Support check</li>
<li>Serialization</li>
<li>Fallbacks</li>
<li>Specific use cases (Forms, expiration, etc)</li>
<li>Browser quirks (modern browser quirks, especially with mobile browsers)</li>
</ul>
<p>localStorage libraries include <a title="store.js" href="https://github.com/marcuswestin/store.js" target="_blank">store.js</a> or <a title="lscache - Pamela Fox's localStorage library" href="http://github.com/pamelafox/lscache" target="_blank">lscache</a> (presenter&#8217;s library).</p>
<p>Dangers of using localStorage are that localStorage access is synchronous and</p>
<ul>
<li style="display: inline !important;">JSON.parse/JSON.stringify takes CPU time</li>
</ul>
<p>Recommendations:</p>
<ul>
<li>Don&#8217;t serialize unnecessarily</li>
<li>Don&#8217;t use excessive keys</li>
<li>Don&#8217;t do excessive gets/sets</li>
<li>Don&#8217;t block the UI</li>
</ul>
<p>Make sure to test for slow points BEFORE you start trying to improve performance. Time your site in target browsers and find the slow points - <a href="http://blog.pamelafox.org/2011/10/phonegap-loading-performance-in-ios.html" target="_blank">Blog post: Measuring performance in PhoneGap</a>, <a href="http://remysharp.com/2007/04/20/performance-profiling-javascript/" target="_blank">Blog post: Performance Profiling in JavaScript</a>, <a href="http://en.wikipedia.org/wiki/List_of_performance_analysis_tools#JavaScript" target="_blank">JS Performance Analysis Tools</a>. jsperf allows you to run tests and see the results of other people&#8217;s tests.</p>
<h3>Don&#8217;t serialize unnecessarily</h3>
<ul>
<li>Do use strings where possible - <a href="http://jsperf.com/passing-strings-vs-primitive-in-localstorage" target="_blank">jsperf: Primitives vs. Strings</a> <a href="http://jsperf.com/json-stringify-or-string-for-localstorage" target="_blank">jsperf: Optional use of JSON stringify</a></li>
</ul>
<h3>Don&#8217;t use excessive keys</h3>
<ul>
<li>Do combine keys commonly accessed together - <a href="http://jsperf.com/localstorage-1-long-key-vs-multiple-short-keys" target="_blank">jsperf: 1 long key vs. multiple short keys</a></li>
</ul>
<h3>Don&#8217;t do excessive gets/sets</h3>
<ul>
<li>Do cache data in local memory or the DOM, and only get/set on window load/unload - <a href="http://teaching-materials.org/exercises/" target="_blank">Exercise Explorer: Caching in local memory</a>, <a href="https://gist.github.com/2928064" target="_blank">Hearty Extension: Caching in the DOM</a></li>
</ul>
<h3>Don&#8217;t block the UI</h3>
<ul>
<li>Do defer using localStorage until onload - <a href="http://www.kryogenix.org/days/2009/07/03/not-blocking-the-ui-in-tight-javascript-loops" target="_blank">Not Blocking the UI in Tight JS Loops</a></li>
<li>Do use setTimeout to defer localStorage access - <a href="http://www.slideshare.net/nzakas/responsive-interfaces" target="_blank">Nicholas Zakas: Responsive Interfaces</a></li>
<li>Do throttle or debounce to avoid repetitive gets/sets - <a href="http://horia.me/two-tips-for-localstorage" target="_blank">Blog Post: 2 LocalStorage Tips</a>, <a href="http://benalman.com/projects/jquery-throttle-debounce-plugin/" target="_blank">jQuery Throttle/Debounce Plugin</a></li>
</ul>
<h3>WORSE: A dysfunctional site</h3>
<p>&nbsp;</p>
<ul>
<li>Don&#8217;t assume localStorage works or will always work.</li>
<li>Don&#8217;t use key names that collide.</li>
</ul>
<h2>IndexedDB</h2>
<p><code>window.indexedDB</code></p>
<ul>
<li>Object based data store</li>
<li>In-order retrieval by index or key</li>
<li>Asynchronous or synchronous API</li>
</ul>
<p>This is going to be the standard, so it&#8217;s worth learning. Read more: <a href="http://www.w3.org/TR/IndexedDB/" target="_blank">Indexed DB spec</a>, <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" target="_blank">MDN: Using IndexedDB</a></p>
<h3>IndexedDB: Why use a library?</h3>
<ul>
<li>Not the simplest API.</li>
<li>Many fundamental differences across browser versions.</li>
<li>Not supported in all browsers, fallbacks needed.</li>
</ul>
<p><strong>Storage library: <a href="http://westcoastlogic.com/lawnchair/" target="_blank">Lawnchair</a></strong></p>
<ul>
<li>Includes <b>serialization</b>, <b>fallbacks</b> (window.name, userData, gears, indexedDB)</li>
<li>Optional plugins for <b>aggregation</b>, <b>pagination</b>, and <b>queries</b>.</li>
</ul>
<p><strong>Other IndexedDB Libraries</strong></p>
<ul>
<li><a href="http://nparashuram.com/IndexedDBShim/" target="_blank">IndexedDB Polyfill</a>: Falls back to WebSQL.</li>
<li><a href="http://persistencejs.org/" target="_blank">persistence.js</a>: Falls back to localStorage, memory, mySQL on Node, AppEngine</li>
<li><a href="http://git.yathit.com/ydn-db/wiki/Home" target="_blank">YDN-DB</a>: Falls back to localStorage, webSQL.</li>
</ul>
<h2>File APIs</h2>
<p>There are many File APIs.</p>
<ul>
<li>Reading and manipulating:<br />
<code>File / Blob, FileList, FileReader</code><br />
<a href="http://dev.w3.org/2006/webapi/FileAPI/" target="_blank">http://dev.w3.org/2006/webapi/FileAPI/<br />
</a>FileList &amp; FileReader - <a href="http://dev.w3.org/2006/webapi/FileAPI/" target="_blank">See: </a><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" target="_blank">MDN: Using files from <a href="http://www.jonathanjeter.com/front-end-web-developer/web-apps/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >web apps</a></a></li>
<li>Creating and writing:<br />
<code>BlobBuilder, FileWriter, FileSaver</code><br />
<a href="http://dev.w3.org/2009/dap/file-system/file-writer.html" target="_blank">http://dev.w3.org/2009/dap/file-system/file-writer.html<br />
</a>FileWriter - <a href="http://www.html5rocks.com/en/tutorials/file/filesystem/" target="_blank">HTML5 Rocks: Exploring the file system API</a></li>
<li>Directories and System:<br />
<code>FileSystem</code><br />
<a href="http://dev.w3.org/2009/dap/file-system/pub/FileSystem/" target="_blank">http://dev.w3.org/2009/dap/file-system/pub/FileSystem/</a></li>
</ul>
<p>Probably going away or are going to change because IndexDB can do the same things.</p>
<p>SIDE NOTE: Marquee is coming back in CSS.</p>
<h3>Which to Use?</h3>
<p><a href="http://www.html5rocks.com/en/tutorials/offline/storage/" target="_blank">Client-side Storage Comparison</a></p>
<ul>
<li>What kind of data can you store?</li>
<li>How much data can you store? (<a href="http://dev-test.nemikor.com/web-storage/support-test/" target="_blank">WebStore support test</a>, <a href="http://updates.html5rocks.com/2011/11/Quota-Management-API-Fast-Facts" target="_blank">Chrome Quota Management API</a>)</li>
<li>How can you query data? (<a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB#Using_an_index" target="_blank">IndexedDB: Using an Index</a>)</li>
<li>How well does it perform? (<a href="http://calendar.perfplanet.com/2011/localstorage-read-performance/" target="_blank">LocalStorage read performance</a>, <a href="http://jsperf.com/localstorage-performance" target="_blank">localStorage performance</a>)</li>
<li>What browsers does it work in? (caniuse.com: <a href="http://caniuse.com/#feat=namevalue-storage" target="_blank">Web Storage</a>, <a href="http://caniuse.com/#feat=indexeddb" target="_blank">IndexedDB</a>, <a href="http://caniuse.com/#feat=filesystem" target="_blank">FileSystem</a>, <a href="https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/" target="_blank">Mozilla on File Systems API</a>)</li>
</ul>
<h3>Use Cases</h3>
<ul>
<li>Remember user data</li>
<li>Retain application state</li>
<li>Remember form input</li>
<li>Improve performance</li>
<li>Help the app work offline</li>
</ul>
<h3>Client-side Storage Course Elements</h3>
<ul>
<li><a href="http://www.teaching-materials.org/storage/index.html">Slides</a></li>
<li><a href="http://www.teaching-materials.org/storage/exercise_storage.html">Exercise: localStorage</a></li>
<li><a href="http://www.teaching-materials.org/storage/exercise_indexeddb.html">Exercise: IndexedDB</a></li>
</ul>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://architects.dzone.com/articles/who-needs-mysql-when-there" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/noimg_32_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://architects.dzone.com/articles/who-needs-mysql-when-there" target="_blank">Who Needs MySQL When There Is IndexedDB?</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://badassjs.com/post/40850339601/basket-js-a-javascript-loader-with-localstorage-based" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/139152634_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://badassjs.com/post/40850339601/basket-js-a-javascript-loader-with-localstorage-based" target="_blank">Basket.js: A JavaScript Loader With LocalStorage-based Script Caching</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.i-programmer.info/bookreviews/12-web-design-and-development-/5367-html5-and-javascript-web-apps.html" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/139933302_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.i-programmer.info/bookreviews/12-web-design-and-development-/5367-html5-and-javascript-web-apps.html" target="_blank">HTML5 and JavaScript Web Apps</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/indexeddb-indexeddb/' rel='tag'>IndexedDB IndexedDB</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/filereader-httpdev-w3-org2006webapifileapi-filelist/' rel='tag'>FileReader http://dev.w3.org/2006/webapi/FileAPI/ FileList</A>,  <A href='http://technorati.com/tag/application+state+remember' rel='tag'>application state Remember</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/app-work-offline/' rel='tag'>app work offline</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/storage-library/' rel='tag'>Storage library</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/cpu-time-recommendations/' rel='tag'>CPU time Recommendations</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/webstore-support-test/' rel='tag'>WebStore support test</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/angularjs-indexeddb/" title="angularjs indexeddb">angularjs indexeddb</a>, <a href="http://www.jonathanjeter.com/search/ui-to-test-datastorage-api-of-html5/" title="UI to test datastorage API of html5">UI to test datastorage API of html5</a>, <a href="http://www.jonathanjeter.com/search/pagination-indexeddb/" title="pagination indexeddb">pagination indexeddb</a>, <a href="http://www.jonathanjeter.com/search/javascript-offline-storage-2013/" title="javascript offline storage 2013">javascript offline storage 2013</a>, <a href="http://www.jonathanjeter.com/search/javascript-hashtable-storage/" title="javascript hashtable Storage">javascript hashtable Storage</a>, <a href="http://www.jonathanjeter.com/search/indexeddb-pagination/" title="indexeddb pagination">indexeddb pagination</a>, <a href="http://www.jonathanjeter.com/search/html5tx-2013-client-side-storage/" title="html5tx 2013 client side storage">html5tx 2013 client side storage</a>, <a href="http://www.jonathanjeter.com/search/html5-webstore-hash-table/" title="html5 webstore hash table">html5 webstore hash table</a>, <a href="http://www.jonathanjeter.com/search/html5-forms-localstorage-indexeddb/" title="html5 forms localstorage indexeddb">html5 forms localstorage indexeddb</a>, <a href="http://www.jonathanjeter.com/search/html5-expert-advice/" title="html5 expert advice">html5 expert advice</a></p><div class="shr-publisher-1391"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F' data-shr_title='HTML5+Texas+JavaScript+Workshop+-+Client-Side+Storage'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F' data-shr_title='HTML5+Texas+JavaScript+Workshop+-+Client-Side+Storage'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-javascript-workshop-client-side-storage%2F' data-shr_title='HTML5+Texas+JavaScript+Workshop+-+Client-Side+Storage'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/HD8kJYg0p0Q" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/html5-texas-javascript-workshop-client-side-storage/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/html5-texas-javascript-workshop-client-side-storage/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>HTML5 Texas Recap</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/i_frpAjWsKY/</link>
		<comments>http://www.jonathanjeter.com/web-development/html5-texas-recap/#comments</comments>
		<pubDate>Sun, 03 Feb 2013 16:12:53 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Adaptive Images]]></category>
		<category><![CDATA[Automated Build Tools]]></category>
		<category><![CDATA[blog post]]></category>
		<category><![CDATA[blog posts]]></category>
		<category><![CDATA[Conference JavaScript Workshop]]></category>
		<category><![CDATA[Conference Website]]></category>
		<category><![CDATA[Data Formats]]></category>
		<category><![CDATA[FAQs Help and Tutorials]]></category>
		<category><![CDATA[HTML5 Texas]]></category>
		<category><![CDATA[HTML5 Texas Recap]]></category>
		<category><![CDATA[HTML5TX Conference JavaScript]]></category>
		<category><![CDATA[HTML5TX Schedule]]></category>
		<category><![CDATA[JavaScript Workshop]]></category>
		<category><![CDATA[JavaScript Workshop Resources]]></category>
		<category><![CDATA[Large Front-End Project]]></category>
		<category><![CDATA[Legos Model-View-Websockets Rapid]]></category>
		<category><![CDATA[Markup Languages]]></category>
		<category><![CDATA[Pamela Fox]]></category>
		<category><![CDATA[Pamela Fox JavaScript]]></category>
		<category><![CDATA[Pamela Fox JavaScript Workshop Resources]]></category>
		<category><![CDATA[Recap Lanyrd Recap]]></category>
		<category><![CDATA[responsive web]]></category>
		<category><![CDATA[Responsive Web Design]]></category>
		<category><![CDATA[Responsive Web Design Backbone]]></category>
		<category><![CDATA[Serve Closing Panel]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[Ways Managing]]></category>
		<category><![CDATA[Web browser]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1386</guid>
		<description><![CDATA[The HTML5 Texas 2013 Conference was great! Here are notes, slides and other resources I collected. Conference Website Eventifier Recap Lanyrd Recap HTML5TX Schedule My blog posts of sessions that I attended. HTML5TX 2013 Adaptive Images for Responsive Web Design Backbone: 3 Ways Managing a Large Front-End Project with Automated Build Tools You Got your [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F' data-shr_title='HTML5+Texas+Recap'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F' data-shr_title='HTML5+Texas+Recap'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F' data-shr_title='HTML5+Texas+Recap'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><div class="wp-caption alignright" style="width: 162px"><img alt="HTML5 TX Conference 2013 Logo" src="http://www.jonathanjeter.com/images/bg-intro-em.png" width="152" height="165" /><p class="wp-caption-text">HTML5 TX Conference 2013</p></div>
<p>The HTML5 Texas 2013 Conference was great! Here are notes, slides and other resources I collected.</p>
<ul>
<li><a title="HTML5 Texas Conference Website" href="http://html5tx2013.sched.org/" target="_blank">Conference Website</a></li>
<li><a title="Eventifier Recap of HTML5TX 2013" href="http://eventifier.co/event/html5tx" target="_blank">Eventifier Recap</a></li>
<li><a title="Lanyrd Recap of HTML5TX 2013" href="http://lanyrd.com/2013/html5tx/" target="_blank">Lanyrd Recap</a></li>
<li><a title="Schedule for HTML5TX 2013 Conference" href="http://html5tx2013.sched.org/" target="_blank">HTML5TX Schedule</a></li>
</ul>
<p>My blog posts of sessions that I attended.</p>
<ul>
<li><a title="HTML5 TX 2013" href="http://www.jonathanjeter.com/web-development/html5-tx-2013/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" target="_blank"><span style="line-height: 13px;">HTML5TX 2013</span></a></li>
<li><a title="Adaptive Images for Responsive Web Design" href="http://www.jonathanjeter.com/web-development/adaptive-images-for-responsive-web-design/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Adaptive Images for Responsive <a href="http://www.jonathanjeter.com/front-end-web-developer/web-design/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Web Design</a></a></li>
<li><a title="Backbone: 3 Ways" href="http://www.jonathanjeter.com/web-development/backbone-3-ways/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Backbone: 3 Ways</a></li>
<li><a title="Managing a Large Front-End Project with Automated Build Tools" href="http://www.jonathanjeter.com/web-development/managing-a-large-front-end-project-with-automated-build-tools/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Managing a Large Front-End Project with Automated Build Tools</a></li>
<li><a title="You Got your MVC into my Components: Adding Bindings to Enyo" href="http://www.jonathanjeter.com/web-development/you-got-your-mvc-into-my-components-adding-bindings-to-enyo/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">You Got your MVC into my Components: Adding Bindings to Enyo</a></li>
<li><a title="10 Things You Didn’t Know a Browser Could Do" href="http://www.jonathanjeter.com/web-development/10-things-you-didnt-know-a-browser-could-do/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">10 Things You Didn’t Know a Browser Could Do</a></li>
<li><a title="Front End Legos" href="http://www.jonathanjeter.com/web-development/front-end-legos/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Front End Legos</a></li>
<li><a title="Model-View-Websockets" href="http://www.jonathanjeter.com/web-development/model-view-websockets/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Model-View-Websockets</a></li>
<li><a title="Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve" href="http://www.jonathanjeter.com/web-development/rapid-templating-designing-in-the-browser-with-sass-compass-and-serve/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve</a></li>
<li><a title="Closing Panel at HTML5TX Conference" href="http://www.jonathanjeter.com/web-development/closing-panel-at-html5tx-conference/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Closing Panel at HTML5TX Conference</a></li>
</ul>
<p>JavaScript Workshop by <a title="Pamela Fox of Coursera" href="http://www.pamelafox.org/" target="_blank">Pamela Fox</a></p>
<ul>
<li><a title="Pamela Fox's JavaScript Workshop Resources for HTML5TX 2013" href="http://www.teaching-materials.org/workshops/html5tx.html" target="_blank"><span style="line-height: 13px;">JavaScript Workshop Resources</span></a></li>
</ul>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/ways-managing/' rel='tag'>Ways Managing</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/pamela-fox-javascript/' rel='tag'>Pamela Fox JavaScript</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/html5tx-conference-javascript/' rel='tag'>HTML5TX Conference JavaScript</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/web-design/' rel='tag'>Web Design</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/html5-texas/" title="html5 texas">html5 texas</a>, <a href="http://www.jonathanjeter.com/search/javascript-workshop-with-pamela-fox/" title="JavaScript Workshop with Pamela Fox">JavaScript Workshop with Pamela Fox</a>, <a href="http://www.jonathanjeter.com/search/you-got-your-mvc-in-my-components-html5tx/" title="you got your mvc in my components html5tx">you got your mvc in my components html5tx</a></p><div class="shr-publisher-1386"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F' data-shr_title='HTML5+Texas+Recap'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F' data-shr_title='HTML5+Texas+Recap'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fhtml5-texas-recap%2F' data-shr_title='HTML5+Texas+Recap'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/i_frpAjWsKY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/html5-texas-recap/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/html5-texas-recap/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>Closing Panel at HTML5TX Conference</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/UgDeRAyP-4A/</link>
		<comments>http://www.jonathanjeter.com/web-development/closing-panel-at-html5tx-conference/#comments</comments>
		<pubDate>Sun, 03 Feb 2013 00:09:32 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[basic PC desktop]]></category>
		<category><![CDATA[Better browsers]]></category>
		<category><![CDATA[better strategy]]></category>
		<category><![CDATA[better things]]></category>
		<category><![CDATA[big shift]]></category>
		<category><![CDATA[big thing]]></category>
		<category><![CDATA[browser developer tools]]></category>
		<category><![CDATA[Burke Holland]]></category>
		<category><![CDATA[business case]]></category>
		<category><![CDATA[cheapness Estelle]]></category>
		<category><![CDATA[Christopher Schmitt]]></category>
		<category><![CDATA[Christopher Schmitt Burke]]></category>
		<category><![CDATA[community device testing]]></category>
		<category><![CDATA[Content Strategy]]></category>
		<category><![CDATA[devices Panelists]]></category>
		<category><![CDATA[different things]]></category>
		<category><![CDATA[end points]]></category>
		<category><![CDATA[Estelle Weyl]]></category>
		<category><![CDATA[Future Friendly]]></category>
		<category><![CDATA[great browsers]]></category>
		<category><![CDATA[HTML5tx Closing Panel]]></category>
		<category><![CDATA[interaction design decision]]></category>
		<category><![CDATA[Internet of Things]]></category>
		<category><![CDATA[Joe McCann]]></category>
		<category><![CDATA[Kendo UI]]></category>
		<category><![CDATA[long time]]></category>
		<category><![CDATA[massive wi-fi networks]]></category>
		<category><![CDATA[Microsoft Guy]]></category>
		<category><![CDATA[Mike Taylor]]></category>
		<category><![CDATA[Mobile browser]]></category>
		<category><![CDATA[mobile browsers]]></category>
		<category><![CDATA[mobile development]]></category>
		<category><![CDATA[mobile device]]></category>
		<category><![CDATA[mobile devices]]></category>
		<category><![CDATA[mobile site]]></category>
		<category><![CDATA[Mobile Sites]]></category>
		<category><![CDATA[mobile world]]></category>
		<category><![CDATA[multiple browsers]]></category>
		<category><![CDATA[multiple devices]]></category>
		<category><![CDATA[new feature]]></category>
		<category><![CDATA[new web features]]></category>
		<category><![CDATA[operating system]]></category>
		<category><![CDATA[personal devices]]></category>
		<category><![CDATA[real silver bullet]]></category>
		<category><![CDATA[Resource libraries code]]></category>
		<category><![CDATA[self-aware devices]]></category>
		<category><![CDATA[Web browser]]></category>
		<category><![CDATA[Web Browsers]]></category>
		<category><![CDATA[Web Weekly Watercooler]]></category>
		<category><![CDATA[Will Never]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1373</guid>
		<description><![CDATA[Theme: Where has HTML5 come with the diversity of devices Panelists: Christopher Schmitt, Ryan Joy, Burke Holland,  Estelle Weyl, Joe McCann, Mike Taylor What is future-friendly? Joe: being future-friendly with the web is supporting mobile, but a better strategy is a content strategy for all devices and where they are used. It&#8217;s okay to think of web browsers as end points, [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F' data-shr_title='Closing+Panel+at+HTML5TX+Conference'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F' data-shr_title='Closing+Panel+at+HTML5TX+Conference'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F' data-shr_title='Closing+Panel+at+HTML5TX+Conference'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p><a href="http://www.jonathanjeter.com/images/Closing-Panel-at-HTML5TX-Conference.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1374" alt="Closing Panel at HTML5TX Conference" src="http://www.jonathanjeter.com/images/Closing-Panel-at-HTML5TX-Conference-300x169.jpg" width="300" height="169" /></a>Theme: Where has HTML5 come with the diversity of devices</p>
<p>Panelists: <a title="View their profile and schedule" href="http://html5tx2013.sched.org/speaker/schmitt">Christopher Schmitt</a>, <a title="Ryan Joy" href="http://html5tx2013.sched.org/speaker/ryanjoy">Ryan Joy</a>, <a title="View their profile and schedule" href="http://html5tx2013.sched.org/speaker/burke3">Burke Holland</a>,  <a href="http://www.standardista.com/">Estelle Weyl</a>, <a title="Joe McCann" href="http://html5tx2013.sched.org/speaker/joe.mccann">Joe McCann</a>, <a title="View their profile and schedule" href="http://html5tx2013.sched.org/speaker/miket">Mike Taylor</a></p>
<h2><strong>What is future-friendly?</strong></h2>
<p><strong>Joe:</strong> being future-friendly with the web is supporting mobile, but a better strategy is a content strategy for all devices and where they are used. It&#8217;s okay to think of web browsers as end points, but your content should be able to live in all environments.</p>
<p>Desktop. Laptop. Smartphone. Tablet. Phablet. Xbox. PS Vita. <a class="zem_slink" title="Smart TV" href="http://en.wikipedia.org/wiki/Smart_TV" target="_blank" rel="wikipedia">Smart TVs</a>.  That&#8217;s a lot of places your content can live.  Building specific experiences for each one of these simply doesn&#8217;t scale.  Let&#8217;s find out why and how to tackle such an enormous problem.</p>
<p>Being &#8220;&#8221;Future Friendly&#8221;" is not necessarily just a visual or interaction design decision, but an architectural decision as well.  Furthermore, being &#8220;&#8221;Future Friendly&#8221;" is not about the web or native:  it&#8217;s both and more.</p>
<h2> In 2007 iOS changed everything, what do you think the next big shift is going to be?</h2>
<p><strong>Joe:</strong> Some of the &#8220;next big thing&#8221; is going to be self-aware devices and how they talk to each other efficiently.</p>
<p><strong>Ryan (Microsoft Guy):</strong> Having the devices not all give the same reminder at the same time. Breaking out of the siloed approach in apps, where they can share data with each other. Devices won&#8217;t be independent.</p>
<p><strong>Burke:</strong> The next big shift will be in the Enterprise. Enterprise is always behind. The Enterprise is going to embrace <a href="http://www.jonathanjeter.com/front-end-web-developer/mobile-devices/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >mobile devices</a> and we&#8217;ll see the decline of the basic PC desktop scenario in the corporate environment and there is no longer a separation between work and personal devices.</p>
<h2>Are there any resources out there to be able to understand differences between different versions of devices?</h2>
<p><strong>Estelle:</strong> I always go to caniuse.com, then <a class="zem_slink" title="Google" href="http://google.com" target="_blank" rel="homepage">Google.</a> Use modernizer in your browser.</p>
<p><strong>Mike (Opera Guy):</strong> Resource libraries code</p>
<h2>There&#8217;s a term called &#8220;The Internet of Things&#8221;, meaning everything is connected. What will happen when everything is connected and we have problems with our identity?</h2>
<p><strong><strong>Ryan (Microsoft Guy)</strong>:</strong> We will need some way to identify via a different device. Now when you get a new phone you just put in your info and it&#8217;s just like your old phone.</p>
<p><strong>Christopher:</strong> It&#8217;s scary because all of our information will be centralized and if a mistake is made and it is really hard to correct. We also have to worry about congress and SOPA and those types of things.</p>
<p><strong>Joe:</strong> The bigger concern I have is the concern of fear of something like this. Why does it have to be scary? There is lots of scary stuff now. We use paper for medical records. Things can be more efficient.</p>
<h2>What do you think of the low-end of the mobile world? The average teenager who wants a smartphone and it&#8217;s running an older version of Android that will never be updated. What&#8217;s going to happen with that? Do you think that will reduce the speed of adoption for new features on mobile devices?</h2>
<p><strong><strong>Mike (Opera Guy)</strong>:</strong> That has been there for a long time, but there are still tons of feature phones out there.</p>
<p><strong>Estelle:</strong> Your website does different things. When I did a website in 2005, you would order pizza and a movie and you could only use PayPal, but that was okay, because the audience for that site would use PayPal. You have to determine whether that audience is important for you.</p>
<p><strong>Joe:</strong> This has been an issue for a number of years. You have to see where your audience is at and if there is a business case for backward compatibility. There is no real silver bullet. You just have to evaluate your audience and make a business case.</p>
<h2>How do you resolve the tensions between user groups and carriers for mobile development?</h2>
<p><strong>Estelle:</strong> They are holding us back. Their data plans are limiting development. We believe in open standards and that is the antithesis of what the carriers believe.</p>
<p><strong>Joe:</strong> The reality is that these are for-profit corporations interested in making a profit. The carriers won&#8217;t have a choice when</p>
<p><strong>Burke: </strong>I have a slide of a cheap phone in a grocery store running Android 2.1. I can&#8217;t believe they still sell that stuff and as they become more personal, there won&#8217;t be a market for that anymore and they won&#8217;t be able to sell junk like that.</p>
<h2><strong></strong>Why do carriers offer those phones?</h2>
<p><strong>Joe:</strong> Inventory and cheapness</p>
<p><strong>Estelle:</strong> Phones are so cheap that they were able to embed one in a magazine</p>
<h2>What is going to happen with spectrum? They say we&#8217;re running out.</h2>
<p><strong>Joe:</strong> I&#8217;m not an expert in spectrum, but years ago Google bought <a class="zem_slink" title="Grand Central" href="http://grandcentral.com" target="_blank" rel="homepage">GrandCentral</a>, which runs Google Voice, Google Fiber and other things and we are probably headed for massive wi-fi networks and shifting directly to data. Google tried to lease spectrum, but decided against it.</p>
<h2>Who do you think is going to be the driving factor going forward on standards? The HTML5 group took 4 years to come up with the standard.</h2>
<p><strong>Estelle:</strong> Developers will because of things like sass. Each browser group has developers that are very responsive as well.</p>
<p><strong>Christopher:</strong> People who are driving it now are the browsers, Mozilla and Google. You will most likely always have to design for multiple browsers.</p>
<p><strong><strong>Mike (Opera Guy)</strong>:</strong> It&#8217;s really everyone. You hear developers talking about fragmentation and pain. If you take a step back, though, you see that it drive the standards forward. Companies see what&#8217;s going on and try to come up with better things and standardization takes time.</p>
<p><strong><strong>Ryan (Microsoft Guy)</strong>:</strong> Developing is art. There was a time when there were no mobile browsers and everyone had ie6, but that will never happen again. Microsoft developed pointers and provided the fix for Chrome, so there is more collaboration today than there has ever been. These are processes that take lots of time.</p>
<h2>What are some new web features that are going to alleviate the pain of development?</h2>
<p><strong><strong>Mike (Opera Guy)</strong>:</strong> There are lots of tools out there now. There are tons of browser developer tools and they are able to be applied to other browsers, as well. Microsoft developed modern.ie. Instead of just complaining and shaming, it&#8217;s better if you can be helpful and provide tools.</p>
<p><strong><strong>Ryan (Microsoft Guy)</strong>:</strong> One of the things that is going to help is the platform that makes sure that the browser is updated. Better browsers are being included by default and the upgrade path is better now. It doesn&#8217;t solve the tooling issue, but it helps with predictability.</p>
<p><strong>Christopher:</strong> There are all kinds of tools to test the deployment process and that kind of automation will help speed things up a lot. They are putting a lot of cool stuff in the new tools and browsers. The tools are there, we just have to be aware and use them.</p>
<p><strong>Burke:</strong> Browser developer tools are awesome now. Firebug was the first where you could actually see what was going on in the browser. One place where we haven&#8217;t really cracked that is mobile. Adobe has edge inspect and there is more tooling coming in that area.</p>
<p><strong>Estelle:</strong> There are debuggers for most mobile devices. The blackberry 10 debugger is awesome and a kick-ass browser. Chrome for mobile allows you to debug if you&#8217;re tethered. There is a talk online you should watch called &#8220;secrets of chrome&#8221; or something like that. One of the things we haven&#8217;t talked about are limitations of mobile browsers and memory on the devices. The chrome debugger shows how much memory the tab is using and what is using the memory. We&#8217;re developing great applications because we can in great browsers and operating systems, but there are memory limitations.</p>
<p><strong>Joe:</strong> Netflix has done a really good job with using HTML5 and bucketing categories of devices and running tests against them to be reasonably certain that they&#8217;ll work. There is a community device testing lab in the Bay Area where people donate devices and allow anyone to come and test against multiple devices.</p>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://tech.slashdot.org/story/13/01/12/0347256/should-microsoft-switch-to-webkit" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/137675714_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://tech.slashdot.org/story/13/01/12/0347256/should-microsoft-switch-to-webkit" target="_blank">Should Microsoft Switch To WebKit?</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.prnewswire.com/news-releases/heres-why-mobile-sites--and-not-apps--are-the-future-of-the-web-188996451.html" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/141728721_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.prnewswire.com/news-releases/heres-why-mobile-sites--and-not-apps--are-the-future-of-the-web-188996451.html" target="_blank">Here&#8217;s Why Mobile Sites&#8211;And Not Apps&#8211;Are the Future of the Web</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://fourkitchens.com/blog/2013/02/01/weekly-watercooler-html5tx-edition" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/142561882_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://fourkitchens.com/blog/2013/02/01/weekly-watercooler-html5tx-edition" target="_blank">Weekly Watercooler: HTML5.tx Edition!</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.kendoui.com/blogs/teamblog/posts/13-02-01/kendo_ui_at_html5tx.aspx" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/142331770_80_801.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.kendoui.com/blogs/teamblog/posts/13-02-01/kendo_ui_at_html5tx.aspx" target="_blank">Kendo UI at HTML5tx</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/self-aware-devices/' rel='tag'>self-aware devices</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/joe-mccann/' rel='tag'>Joe McCann</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/web-browsers/' rel='tag'>Web Browsers</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/instagram-icon-svg/" title="instagram icon svg">instagram icon svg</a>, <a href="http://www.jonathanjeter.com/search/instagram-vector-load/" title="instagram vector load">instagram vector load</a>, <a href="http://www.jonathanjeter.com/search/android-app-market-vector-logo/" title="android app market vector logo">android app market vector logo</a>, <a href="http://www.jonathanjeter.com/search/free-vector-android-market/" title="free vector android market">free vector android market</a>, <a href="http://www.jonathanjeter.com/search/icon-instagram-vector-free/" title="icon instagram vector free">icon instagram vector free</a>, <a href="http://www.jonathanjeter.com/search/instagram-3d-vector-logo/" title="instagram 3d vector logo">instagram 3d vector logo</a>, <a href="http://www.jonathanjeter.com/search/instagram-logo-ai-load/" title="instagram logo ai load">instagram logo ai load</a>, <a href="http://www.jonathanjeter.com/search/instagram-symbols-free-vector/" title="instagram symbols free vector">instagram symbols free vector</a>, <a href="http://www.jonathanjeter.com/search/logo-instagram-vettoriale/" title="logo instagram vettoriale">logo instagram vettoriale</a></p><div class="shr-publisher-1373"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F' data-shr_title='Closing+Panel+at+HTML5TX+Conference'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F' data-shr_title='Closing+Panel+at+HTML5TX+Conference'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fclosing-panel-at-html5tx-conference%2F' data-shr_title='Closing+Panel+at+HTML5TX+Conference'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/UgDeRAyP-4A" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/closing-panel-at-html5tx-conference/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/closing-panel-at-html5tx-conference/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/MSeHKXVcHVE/</link>
		<comments>http://www.jonathanjeter.com/web-development/rapid-templating-designing-in-the-browser-with-sass-compass-and-serve/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 22:48:55 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Front-End Development]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Absolute Beginner]]></category>
		<category><![CDATA[Cascading Style Sheets]]></category>
		<category><![CDATA[Conventions Rapid Templating]]></category>
		<category><![CDATA[CSS Performance]]></category>
		<category><![CDATA[development environment]]></category>
		<category><![CDATA[dynamic language]]></category>
		<category><![CDATA[easy distribution]]></category>
		<category><![CDATA[flat HTML]]></category>
		<category><![CDATA[Great stuff]]></category>
		<category><![CDATA[HTML5 Texas]]></category>
		<category><![CDATA[JavaScript Related]]></category>
		<category><![CDATA[larger project]]></category>
		<category><![CDATA[local development environment]]></category>
		<category><![CDATA[Nathan Smith]]></category>
		<category><![CDATA[Rails MVC]]></category>
		<category><![CDATA[responsive design]]></category>
		<category><![CDATA[responsive web]]></category>
		<category><![CDATA[Responsive Web Design]]></category>
		<category><![CDATA[Responsive Web Design Designers]]></category>
		<category><![CDATA[Sass Coding Q&A]]></category>
		<category><![CDATA[static front-end templates]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[templating power]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1364</guid>
		<description><![CDATA[by Nathan Smith at HTML5 Texas in Austin, TX (Deck) Have you ever found yourself needing to build static front-end templates, either as part of a larger project or as a way to communicate the nuances of responsive design to a client? I think we can all agree that just doing flat HTML leaves us wanting for [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F' data-shr_title='Rapid+Templating%3A+%22Designing+in+the+Browser%22+with+Sass%2C+Compass%2C+and+Serve'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F' data-shr_title='Rapid+Templating%3A+%22Designing+in+the+Browser%22+with+Sass%2C+Compass%2C+and+Serve'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F' data-shr_title='Rapid+Templating%3A+%22Designing+in+the+Browser%22+with+Sass%2C+Compass%2C+and+Serve'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p>by <a title="Nathan Smith" href="http://html5tx2013.sched.org/speaker/nathan.smith3">Nathan Smith</a> at HTML5 Texas in Austin, TX (<a title="Rapid Templating: &quot;Designing in the Browser&quot; with Sass, Compass, and Serve" href="https://speakerdeck.com/nathansmith/rapid-templating-with-serve" target="_blank">Deck</a>)</p>
<blockquote><p>Have you ever found yourself needing to build static front-end templates, either as part of a larger project or as a way to communicate the nuances of responsive design to a client? I think we can all agree that just doing flat <a class="zem_slink" title="HTML" href="http://en.wikipedia.org/wiki/HTML" target="_blank" rel="wikipedia">HTML</a> leaves us wanting for more templating power.</p>
<p>But, using a dynamic language (PHP, Ruby, etc) typically means that it&#8217;s tougher to hand off to a client, who may (not) have a local development environment. That&#8217;s where Serve helps bridge the gap. It lets you play with the &#8220;&#8221;V&#8221;" of Rails MVC, but also export flat HTML for easy distribution.</p></blockquote>
<h2>Responsive Web Design</h2>
<p>Designers can&#8217;t just throw stuff over the wall to the developers anymore</p>
<p><script async class="speakerdeck-embed" data-id="09af48404f190130977322000a1f866f" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script></p>
<p>The deck says it all. Great stuff!</p>
<p>sass is to css what jQuery is to JavaScript</p>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/138540370_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass" target="_blank">The Absolute Beginner&#8217;s Guide to Sass</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://coding.smashingmagazine.com/2013/01/22/css-performance-debugging-naming-conventions/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/139952724_80_801.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://coding.smashingmagazine.com/2013/01/22/css-performance-debugging-naming-conventions/" target="_blank">Coding Q&amp;A: CSS Performance, Debugging, Naming Conventions</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/conventions-rapid-templating/' rel='tag'>Conventions Rapid Templating</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/absolute-beginner/' rel='tag'>Absolute Beginner</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/cascading-style-sheets/' rel='tag'>Cascading Style Sheets</A>,  <A href='http://technorati.com/tag/web+design' rel='tag'>Web Design</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/local-development-environment/' rel='tag'>local development environment</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/rapid-front-end-development-web/" title="rapid front end development web">rapid front end development web</a>, <a href="http://www.jonathanjeter.com/search/scss-compass-genesis-framework/" title="scss compass genesis framework">scss compass genesis framework</a></p><div class="shr-publisher-1364"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F' data-shr_title='Rapid+Templating%3A+%22Designing+in+the+Browser%22+with+Sass%2C+Compass%2C+and+Serve'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F' data-shr_title='Rapid+Templating%3A+%22Designing+in+the+Browser%22+with+Sass%2C+Compass%2C+and+Serve'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Frapid-templating-designing-in-the-browser-with-sass-compass-and-serve%2F' data-shr_title='Rapid+Templating%3A+%22Designing+in+the+Browser%22+with+Sass%2C+Compass%2C+and+Serve'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/MSeHKXVcHVE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/rapid-templating-designing-in-the-browser-with-sass-compass-and-serve/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/rapid-templating-designing-in-the-browser-with-sass-compass-and-serve/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>Model-View-Websockets</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/KxedSNBHzh4/</link>
		<comments>http://www.jonathanjeter.com/web-development/model-view-websockets/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 22:14:51 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[MVC]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[ad-hoc Related articles]]></category>
		<category><![CDATA[awesome tools]]></category>
		<category><![CDATA[client interaction fit]]></category>
		<category><![CDATA[code good tools]]></category>
		<category><![CDATA[CRUD EDA]]></category>
		<category><![CDATA[darn HTTP requests]]></category>
		<category><![CDATA[development Event-Driven Architectures]]></category>
		<category><![CDATA[EDA JS]]></category>
		<category><![CDATA[EDA objects]]></category>
		<category><![CDATA[event handling]]></category>
		<category><![CDATA[event piping decouple]]></category>
		<category><![CDATA[event-driven architectures]]></category>
		<category><![CDATA[events event handling]]></category>
		<category><![CDATA[events free events]]></category>
		<category><![CDATA[family MVC]]></category>
		<category><![CDATA[full-stack Backbone Meteor]]></category>
		<category><![CDATA[global events updates]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML server updates]]></category>
		<category><![CDATA[HTML5 Texas Conference]]></category>
		<category><![CDATA[HTTP request]]></category>
		<category><![CDATA[HTTP requests]]></category>
		<category><![CDATA[Hypertext Transfer Protocol]]></category>
		<category><![CDATA[interface inerpolate data]]></category>
		<category><![CDATA[Javascript MVC Frameworks]]></category>
		<category><![CDATA[lightweight MVC]]></category>
		<category><![CDATA[mobile uses tickers]]></category>
		<category><![CDATA[multiple HTTP requests]]></category>
		<category><![CDATA[MVC framework]]></category>
		<category><![CDATA[MVC Frameworks]]></category>
		<category><![CDATA[MVC suit]]></category>
		<category><![CDATA[Node Knockout app]]></category>
		<category><![CDATA[Node Model-View-* circa]]></category>
		<category><![CDATA[OOP big teams]]></category>
		<category><![CDATA[pubsub implementation WebSockets]]></category>
		<category><![CDATA[quick state changes]]></category>
		<category><![CDATA[replace framework sync]]></category>
		<category><![CDATA[REST easy mapping]]></category>
		<category><![CDATA[server messages]]></category>
		<category><![CDATA[server-rendered HTML Flight]]></category>
		<category><![CDATA[simple browser messaging]]></category>
		<category><![CDATA[Single Page Applications]]></category>
		<category><![CDATA[sophisticated EDA JS]]></category>
		<category><![CDATA[support dead simple]]></category>
		<category><![CDATA[talk DiY WebSockets]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[Texas conference]]></category>
		<category><![CDATA[TodoMVC No SPA]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[user interaction]]></category>
		<category><![CDATA[user interaction MV*]]></category>
		<category><![CDATA[view server itarction]]></category>
		<category><![CDATA[views MVC]]></category>
		<category><![CDATA[WebSocket]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1335</guid>
		<description><![CDATA[by Garann Means at HTML5 Texas Conference in Austin, TX Many front-end developers are familiar with MVC, and almost all are familiar with event-driven architectures (even if they call them something else). How do those two philosophies work together? And, more importantly, how can websockets help future applications become more responsive, more consistent, and easier [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F' data-shr_title='Model-View-Websockets'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F' data-shr_title='Model-View-Websockets'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F' data-shr_title='Model-View-Websockets'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p>by <a title="Garann Means Twitter" href="https://twitter.com/garannm" target="_blank">Garann Means</a> at HTML5 <a href="http://www.jonathanjeter.com/front-end-web-developer/texas-conference/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Texas Conference</a> in Austin, TX</p>
<blockquote><p>Many front-end developers are familiar with MVC, and almost all are familiar with event-driven architectures (even if they call them something else). How do those two philosophies work together? And, more importantly, how can websockets help future applications become more responsive, more consistent, and easier to develop? We&#8217;ll reexamine the Controller concept from MVC and figure out how to combine simple browser messaging and websockets to address our application needs and improve our user experiences.</p></blockquote>
<h2><a href="http://www.jonathanjeter.com/images/HTML5TX-Model-View-Websockets.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1354" alt="Model-View-Websockets" src="http://www.jonathanjeter.com/images/HTML5TX-Model-View-Websockets-300x169.jpg" width="300" height="169" /></a>JavaScript</h2>
<p>Did well for a while without patterns and frameworks, but once we realized its potential we added everything at once, adding complexity and functionality.</p>
<h2>#singlepageappaproblems</h2>
<p>Single Page Applications (SPAs) today are everywhere, as well as SPA behavior on static pages, requiring 3rd-party tools and systems of dependencies. It&#8217;s easy to set up, but difficult to maintain.</p>
<p>There are some tradeoffs &#8211; the first time to render increases; we have SEO issues; issues with multiple HTTP requests and it is difficult to create good packages.</p>
<h3>Implementation Issues</h3>
<ul>
<li>Creating App scaffolding</li>
<li>how &amp; when to redraw</li>
<li>where client interaction fit</li>
<li>and &#8220;those darn HTTP requests&#8221;</li>
</ul>
<h3>Some approaches</h3>
<ul>
<li>Twitter &#8211; server-rendered HTML (Flight)</li>
<li>airbnb &#8211; Node, full-stack Backbone</li>
<li>Meteor &#8211; (ok, not an implementation) Node</li>
</ul>
<h2>Model-View-*</h2>
<ul>
<li><span style="line-height: 13px;">circa <span style="text-decoration: underline;">late 1970&#8242;s</span></span></li>
<li>closely tied to OOP (SmallTalk)</li>
<li>implemented in popular frameworks</li>
<li>traditionally backend</li>
</ul>
<p>Model</p>
<ul>
<li><span style="line-height: 13px;">aka &#8220;object&#8221;</span></li>
</ul>
<p>View</p>
<ul>
<li>presentational part of the app</li>
<li>draw the interface</li>
<li>inerpolate data</li>
<li>(optionally) capture user interaction</li>
</ul>
<p>MV* in JavaScript</p>
<ul>
<li><span style="line-height: 13px;">MV* follows OOP</span></li>
<li>mix in a dash of rapid development</li>
</ul>
<p>Event-Driven Architectures</p>
<ul>
<li><span style="line-height: 13px;">less formal than MVC</span></li>
<li>suit high-I/O systems</li>
<li>simple and reactive</li>
<li>seen more in tools than applications</li>
</ul>
<h3>events and object</h3>
<ul>
<li>less data persisted overall</li>
<li>models less bound to data</li>
<li>natural &#8220;model&#8221; is a state</li>
</ul>
<h3>events themselves</h3>
<ul>
<li>user interaction with view</li>
<li>server itarction wth state</li>
<li>messaging within the application itself and is highly decoupled</li>
</ul>
<h3>EDA in JavaScript</h3>
<ul>
<li>is how we do it</li>
<li>all JS triggered by client-side events</li>
<li>event handling has evolved over time from inline onclick to event delegation, pub/sub, etc.</li>
<li>dearth of sophisticated EDA JS frameworks</li>
</ul>
<p>EDA &amp; MVC need to get together and make it happen</p>
<h3>dealing with data</h3>
<ul>
<li>In MVC, everything is in models</li>
<li>EDA may be in models or something else</li>
<li>MVC lends itself to CRUD</li>
<li>EDA uses ad-hoc updates</li>
</ul>
<h3>the views</h3>
<ul>
<li>MVC is one-to-one data, while EDA is highly composite view reflecting state</li>
<li>In MVC the veiew is responsible for interaction, while in EDA the interaction is the first-class component</li>
</ul>
<h3>the action</h3>
<ul>
<li>In MVC, the action is triad-specific, but in EDA it&#8217;s first-class.</li>
<li>In MVC, object don&#8217;t influence controllers and in EDA objects have event awareness</li>
</ul>
<blockquote><p><em><strong>everybody loves MV*</strong></em></p></blockquote>
<h3>the whole family</h3>
<ul>
<li>MVC: tight triads, view bubbles up through controller</li>
<li>MVP: model and view pared, presenter can &#8220;float&#8221;</li>
<li>MVVM: model and view super tightly coupled, observerish</li>
</ul>
<h3>the appeal</h3>
<ul>
<li>the age of OOP</li>
<li>big teams, separation of concerns</li>
<li>the age of REST</li>
<li>easy mapping to server code</li>
<li>good tools, obvs (awesome tools make people want to use things)</li>
</ul>
<h3>how we do it (now)</h3>
<ul>
<li>lightweight MVC &#8211; controller in router, view, other?</li>
</ul>
<h3>framework choices</h3>
<ul>
<li>no need for boilerplate</li>
<li>too much for small apps?</li>
<li>too little for big apps?</li>
<li>SoC depends on NoC</li>
</ul>
<p>a viewmodel</p>
<p>Knocback.js in TodoMVC</p>
<h2>No SPA is an Island</h2>
<ul>
<li>We need someone to talk to</li>
<li>given: server supplies first render &#8211; data, but probably HTML</li>
<li>server updates</li>
<li>localstorage</li>
</ul>
<h3>when it&#8217;s easy</h3>
<ul>
<li>CRUD</li>
<li>REST</li>
<li>highly automatable</li>
</ul>
<h3>when it&#8217;s tricky</h3>
<ul>
<li>changing multiple models</li>
<li>lots of quick state changes</li>
<li>uploading offline data</li>
</ul>
<h3>what is that tho (websockets)</h3>
<ul>
<li>it has its own protocol &#8211; TCP, port 80, ws: and wss:</li>
<li>server can push data</li>
<li>replacement for e.g. long-polling</li>
</ul>
<h3>not your mama&#8217;s comet</h3>
<ul>
<li>bi-directional</li>
<li>no request, no response</li>
<li>cross-origin support</li>
<li>dead simple API</li>
</ul>
<h3>available now</h3>
<ul>
<li>ff 16</li>
<li>chrome 23</li>
<li>ie 10</li>
<li>opera 12</li>
<li>safari 6</li>
<li>iffy on mobile</li>
</ul>
<h3>uses</h3>
<ul>
<li>tickers</li>
<li>chat</li>
<li>collaborative editing</li>
<li>yes, games</li>
<li>every Node Knockout app ever</li>
</ul>
<h2>getting cozier with the server</h2>
<h3>EDAing the *s</h3>
<ul>
<li>controllers/presenters/viewmodels full of events</li>
<li>free events from triads</li>
<li>subscribe at application level</li>
<li>any old event system will do</li>
</ul>
<h3>event piping</h3>
<ul>
<li>decouple user and server interaction</li>
<li>provide place for validation</li>
<li>allow multiple subscribers &#8211; pieces of the application from all over the place can listen for what you&#8217;re publishing</li>
</ul>
<h3>EDA + WebSockets</h3>
<ul>
<li>chained like interface events (make sure that all pieces of the event are finished before going to the next one)</li>
<li>specific controllers can subscribe to global events</li>
<li>updates can be cached and bundled</li>
</ul>
<h2>realtime talk</h2>
<h3>DiY WebSockets</h3>
<ul>
<li>declare a socket with URL and protocol</li>
<li>listen for open connection &#8211; send client messages</li>
<li>listen for server messages</li>
</ul>
<h3>connecting it</h3>
<ul>
<li>add messaging anywhere in controller/presenter/etc.</li>
<li>use it for syncing if rolling your own</li>
<li>replace framework sync calls in implementation with socket events</li>
<li>use WebSockets plugin for framework (e.g. <span style="text-decoration: underline;">backbone.io</span>)</li>
</ul>
<h2>sockets for control</h2>
<ul>
<li>take action based on server messages (interesting application)</li>
<li>pipe events</li>
<li>subscribe on models and views</li>
<li>very similar to MVP</li>
</ul>
<p>together at last</p>
<p>a tool to use within your patter</p>
<p>usa a little ad-hoc</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://blog.jmoz.co.uk/websockets-ratchet-react-redis" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/139874928_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://blog.jmoz.co.uk/websockets-ratchet-react-redis" target="_blank">A Websockets, Ratchet, Silex and Redis pubsub implementation</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://tech.wordnik.com/websockets-non-blocking-by-nature/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/135666499_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://tech.wordnik.com/websockets-non-blocking-by-nature/" target="_blank">WebSockets: Non-blocking by Nature</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.sys-con.com/node/2494515" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/noimg_6_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.sys-con.com/node/2494515" target="_blank">4 Years of Living with HTML5 WebSocket</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://creativeproject.wordpress.com/2012/12/02/10-great-javascript-mvc-frameworks-that-are-worth-checking-out/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/129448547_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://creativeproject.wordpress.com/2012/12/02/10-great-javascript-mvc-frameworks-that-are-worth-checking-out/" target="_blank">10 Great JavaScript <a href="http://www.jonathanjeter.com/front-end-web-developer/mvc-frameworks/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >MVC Frameworks</a> That Are Worth Checking Out</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/todomvc-no-spa/' rel='tag'>TodoMVC No SPA</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/pubsub-implementation-websockets/' rel='tag'>pubsub implementation WebSockets</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/eda-js/' rel='tag'>EDA JS</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/backbone-js-architecture-diagram/" title="backbone js architecture diagram">backbone js architecture diagram</a>, <a href="http://www.jonathanjeter.com/search/websocket-javascript-framework/" title="websocket javascript framework">websocket javascript framework</a>, <a href="http://www.jonathanjeter.com/search/websocket-and-multiple-subscriber-components/" title="websocket and multiple subscriber components">websocket and multiple subscriber components</a>, <a href="http://www.jonathanjeter.com/search/web-based-front-end-for-websocket/" title="web based front end for websocket">web based front end for websocket</a>, <a href="http://www.jonathanjeter.com/search/single-page-applications-working-together/" title="single page applications working together">single page applications working together</a>, <a href="http://www.jonathanjeter.com/search/mvc-modularity/" title="mvc modularity">mvc modularity</a>, <a href="http://www.jonathanjeter.com/search/model-view-on-client-end-spa/" title="model view on client end spa">model view on client end spa</a>, <a href="http://www.jonathanjeter.com/search/knockout-websockets/" title="Knockout WebSockets">Knockout WebSockets</a>, <a href="http://www.jonathanjeter.com/search/html5tx-enyo-austin/" title="html5tx enyo austin">html5tx enyo austin</a>, <a href="http://www.jonathanjeter.com/search/eda-over-websocket/" title="eda over websocket">eda over websocket</a></p><div class="shr-publisher-1335"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F' data-shr_title='Model-View-Websockets'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F' data-shr_title='Model-View-Websockets'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmodel-view-websockets%2F' data-shr_title='Model-View-Websockets'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/KxedSNBHzh4" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/model-view-websockets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/model-view-websockets/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>Front End Legos</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/DEp4ze85QzI/</link>
		<comments>http://www.jonathanjeter.com/web-development/front-end-legos/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 21:12:33 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[Front-End Development]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[bad Low Specificity]]></category>
		<category><![CDATA[Base Core styles]]></category>
		<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Cache Files]]></category>
		<category><![CDATA[Cascading Style Sheets]]></category>
		<category><![CDATA[Class (computer programming)]]></category>
		<category><![CDATA[class names avoid unnecessary]]></category>
		<category><![CDATA[code bases]]></category>
		<category><![CDATA[common files]]></category>
		<category><![CDATA[Components User interface]]></category>
		<category><![CDATA[container element selectors]]></category>
		<category><![CDATA[CSS conventions]]></category>
		<category><![CDATA[CSS Jonathan Snook]]></category>
		<category><![CDATA[CSS Lint]]></category>
		<category><![CDATA[CSS Nicole Sullivan]]></category>
		<category><![CDATA[CSS Performance]]></category>
		<category><![CDATA[CSS Sneak Peek]]></category>
		<category><![CDATA[Data Formats]]></category>
		<category><![CDATA[date content]]></category>
		<category><![CDATA[default elements]]></category>
		<category><![CDATA[design patterns Alerts]]></category>
		<category><![CDATA[elements Accommodate Content]]></category>
		<category><![CDATA[elements Great ideas]]></category>
		<category><![CDATA[Elements High Specificity]]></category>
		<category><![CDATA[entire site]]></category>
		<category><![CDATA[entire site Normalize]]></category>
		<category><![CDATA[extra elements]]></category>
		<category><![CDATA[great ideas]]></category>
		<category><![CDATA[grid separate presentation]]></category>
		<category><![CDATA[highest quality HTML]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5 Texas Conference]]></category>
		<category><![CDATA[Jonathan Snook]]></category>
		<category><![CDATA[layout code]]></category>
		<category><![CDATA[leverage descendent selectors]]></category>
		<category><![CDATA[leverage type selectors]]></category>
		<category><![CDATA[lists Modules Business]]></category>
		<category><![CDATA[Maintainability Code]]></category>
		<category><![CDATA[Markup Languages]]></category>
		<category><![CDATA[modular performant Organization]]></category>
		<category><![CDATA[modularity Modularity]]></category>
		<category><![CDATA[nested selectors]]></category>
		<category><![CDATA[Nicole Sullivan]]></category>
		<category><![CDATA[old code]]></category>
		<category><![CDATA[old code defer]]></category>
		<category><![CDATA[oocss.org SMACSS Scalable]]></category>
		<category><![CDATA[performance tips]]></category>
		<category><![CDATA[reusable elements]]></category>
		<category><![CDATA[right way]]></category>
		<category><![CDATA[Shay Howe]]></category>
		<category><![CDATA[smacss.com Reuse Code]]></category>
		<category><![CDATA[Specificity determines]]></category>
		<category><![CDATA[Specificity Formula count]]></category>
		<category><![CDATA[specificity Methodologies OOCSS]]></category>
		<category><![CDATA[Style Sheets]]></category>
		<category><![CDATA[styles Minimize Requests]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[Texas]]></category>
		<category><![CDATA[Texas conference]]></category>
		<category><![CDATA[Use data]]></category>
		<category><![CDATA[User interface]]></category>
		<category><![CDATA[Zurb Foundation]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1325</guid>
		<description><![CDATA[by Shay Howe at HTML5 Texas Conference in Austin, TX (Deck) There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F' data-shr_title='Front+End+Legos'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F' data-shr_title='Front+End+Legos'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F' data-shr_title='Front+End+Legos'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p>by <a title="Shay Howe" href="http://learn.shayhowe.com/" target="_blank">Shay Howe</a> at HTML5 <a href="http://www.jonathanjeter.com/front-end-web-developer/texas-conference/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Texas Conference</a> in Austin, TX (<a title="Front-End Legos" href="https://speakerdeck.com/shayhowe/tactical-html-and-css" target="_blank">Deck</a>)</p>
<blockquote><p>There are a million ways to write <a class="zem_slink" title="HTML" href="http://en.wikipedia.org/wiki/HTML" target="_blank" rel="wikipedia">HTML</a> and <a class="zem_slink" title="Cascading Style Sheets" href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank" rel="wikipedia">CSS</a>, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.</p>
<p>In this session, Shay will cover some <a href="http://www.jonathanjeter.com/front-end-web-developer/best-practices/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >best practices</a> and performance tips for writing the highest quality HTML and CSS possible. Writing code is the easy part, finding a practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice.</p></blockquote>
<h2><a href="http://www.jonathanjeter.com/images/HTML5TX-Front-End-Legos.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1326" alt="Front End Legos - Building Modular CSS" src="http://www.jonathanjeter.com/images/HTML5TX-Front-End-Legos-300x169.jpg" width="300" height="169" /></a>Common Problems</h2>
<ul>
<li>Websites have difficulty scaling</li>
<li>code becomes brittle</li>
<li>Files and code bases begin to swell</li>
</ul>
<h2>What&#8217;s Wrong</h2>
<p>Best practices <em>aren&#8217;t exactly</em> best practices</p>
<ul>
<li>avoid extra elements</li>
<li>avoid classes</li>
<li>leverage type selectors</li>
<li>leverage descendent selectors</li>
</ul>
<p>We code so specifically (leveraging selectors) that we can&#8217;t make the changes we were trying to code for</p>
<h2>Specificity?</h2>
<ul>
<li>Specificity determines which styles are applied</li>
</ul>
<h2>Maintainability</h2>
<p>Code must be&#8230;</p>
<ol>
<li>organized</li>
<li>modular</li>
<li>performant</li>
</ol>
<h3>Organization</h3>
<h4>Approach</h4>
<ul>
<li><span style="line-height: 13px;">stop thinking about pages</span></li>
</ul>
<h4>Base</h4>
<ul>
<li>Core styles for entire site<br />
Normalize (reset), default elements, grid, variables</li>
</ul>
<h4>Components</h4>
<ul>
<li>User interface concepts &amp; design patterns<br />
Alerts, buttons, forms, lists</li>
</ul>
<h4>Modules</h4>
<ul>
<li>Business logic<br />
Aside, Header, Footer</li>
</ul>
<p>Your goal over time should be to not write css and just write HTML and see how the styles are automatically applied.</p>
<p>Looking at rdio site for modularity</p>
<h2><a class="zem_slink" title="Modular programming" href="http://en.wikipedia.org/wiki/Modular_programming" target="_blank" rel="wikipedia">Modularity</a></h2>
<p>We put a lot of effort into our properties and values, but not so much on our selectors.</p>
<ul>
<li>use a grid</li>
<li>separate presentation (or theme) from layout</li>
</ul>
<p>code for reusable elements</p>
<h2>Accommodate Content</h2>
<ul>
<li>remove the container element selectors</li>
<li>Use selectors instead of elements</li>
</ul>
<p>Great ideas on using classes to really separate content from layout</p>
<h2>Watch Specificity</h2>
<ul>
<li>be explicit</li>
<li>keep specificity low</li>
<li>Never use IDs or !important</li>
<li>avoid nested selectors (minimize)</li>
</ul>
<p>measuring Specificity</p>
<h4>Formula</h4>
<p>count IDs, Classes/Pseudo-classes/attributes, Elements</p>
<p>High Specificity (bad)</p>
<p>Low Specificity (good)</p>
<h4>Use Classes</h4>
<ul>
<li>write understandable class names</li>
<li>avoid unnecessary nesting</li>
<li>use same strength specificity</li>
</ul>
<h2>Methodologies</h2>
<h3>OOCSS</h3>
<p>Object-Oriented CSS (Nicole Sullivan &#8211; <a title="OOCSS" href="http://oocss.org" target="_blank">oocss.org</a>)</p>
<h3>SMACSS</h3>
<p>Scalable and Modular Architecture for CSS (Jonathan Snook &#8211; <a title="SMACSS" href="http://smacss.com" target="_blank">smacss.com</a>)</p>
<h2>Reuse Code</h2>
<ul>
<li>Do not duplicate code</li>
<li>remove old code</li>
<li>defer loading subsequent styles</li>
</ul>
<h3>Minimize Requests</h3>
<ul>
<li>combine lide files</li>
<li>use image sprites (use caution)</li>
<li>use <a class="zem_slink" title="Data URI scheme" href="http://en.wikipedia.org/wiki/Data_URI_scheme" target="_blank" rel="wikipedia">data URIs</a> (difficult to edit)</li>
</ul>
<h3>Compress &amp; Cache Files</h3>
<ul>
<li>utilize gzip compression</li>
<li>losslessly compress images</li>
<li>cache common files</li>
</ul>
<p>HTML5 Boilerplate includes compression and caching</p>
<h2>Getting Started</h2>
<ul>
<li>Build a styleguide (Twitter Bootstrap, <a class="zem_slink" title="ZURB" href="http://www.zurb.com" target="_blank" rel="homepage">Zurb</a> Foundation)</li>
<li>Review Methodologies (OOCSS, SMACSS)</li>
<li>Test your code (CSS Lint, Inspector, PageSpeed)</li>
</ul>
<p>&nbsp;</p>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://learn.shayhowe.com/advanced-html-css/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/138007532_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://learn.shayhowe.com/advanced-html-css/" target="_blank">An Advanced Guide to HTML &amp; CSS</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/141143599_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/" target="_blank">Sneak Peek Into The Future: Selectors, Level 4 (CSS4) is here</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://coding.smashingmagazine.com/2013/01/22/css-performance-debugging-naming-conventions/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/139952724_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://coding.smashingmagazine.com/2013/01/22/css-performance-debugging-naming-conventions/" target="_blank">Coding Q&amp;A: CSS Performance, Debugging, Naming Conventions</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/cache-files/' rel='tag'>Cache Files</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/common-files/' rel='tag'>common files</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/best-practices/' rel='tag'>Best Practices</A>,  <A href='http://technorati.com/tag/entire+site' rel='tag'>entire site</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/user-interface/' rel='tag'>User interface</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/300-250-vs-adsense/" title="300 * 250 vs adsense">300 * 250 vs adsense</a></p><div class="shr-publisher-1325"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F' data-shr_title='Front+End+Legos'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F' data-shr_title='Front+End+Legos'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Ffront-end-legos%2F' data-shr_title='Front+End+Legos'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/DEp4ze85QzI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/front-end-legos/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/front-end-legos/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>10 Things You Didn’t Know a Browser Could Do</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/dy6m7A_pIAs/</link>
		<comments>http://www.jonathanjeter.com/web-development/10-things-you-didnt-know-a-browser-could-do/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 20:35:28 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Animate Sprites]]></category>
		<category><![CDATA[Background Images]]></category>
		<category><![CDATA[Better Front-End Engineer]]></category>
		<category><![CDATA[better Local Storage]]></category>
		<category><![CDATA[bezier curves]]></category>
		<category><![CDATA[box model]]></category>
		<category><![CDATA[browser capabilities]]></category>
		<category><![CDATA[browser Cookie Limitations]]></category>
		<category><![CDATA[browser support]]></category>
		<category><![CDATA[Can store]]></category>
		<category><![CDATA[Cascading Style Sheets]]></category>
		<category><![CDATA[Chrome Developer Tools]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS selectors]]></category>
		<category><![CDATA[CSS Wishlist Talks]]></category>
		<category><![CDATA[cubic-bezier.com Check]]></category>
		<category><![CDATA[data LocalStorage SessionStorage]]></category>
		<category><![CDATA[Data Storage localStorage]]></category>
		<category><![CDATA[Document Object Model]]></category>
		<category><![CDATA[DOM elements]]></category>
		<category><![CDATA[DOM nodes]]></category>
		<category><![CDATA[DOM Turn]]></category>
		<category><![CDATA[ECMAScript specifications]]></category>
		<category><![CDATA[Estelle Weyl]]></category>
		<category><![CDATA[FF/IE IndexedDB]]></category>
		<category><![CDATA[FF15 Android]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[form element Supported]]></category>
		<category><![CDATA[Front-End Engineer]]></category>
		<category><![CDATA[Graphics 2D image]]></category>
		<category><![CDATA[house Charge]]></category>
		<category><![CDATA[HTML5 Texas Conference]]></category>
		<category><![CDATA[HTTP request]]></category>
		<category><![CDATA[Indexed Database API]]></category>
		<category><![CDATA[IndexedDB new standard]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[jQuery Supported]]></category>
		<category><![CDATA[localStorage Save text]]></category>
		<category><![CDATA[Long term]]></category>
		<category><![CDATA[Memory Related articles]]></category>
		<category><![CDATA[mobile Chrome love]]></category>
		<category><![CDATA[mobile web]]></category>
		<category><![CDATA[mobile web apps]]></category>
		<category><![CDATA[new feature]]></category>
		<category><![CDATA[new feature support]]></category>
		<category><![CDATA[Opera]]></category>
		<category><![CDATA[persistent storage]]></category>
		<category><![CDATA[plain text]]></category>
		<category><![CDATA[real API Local]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[session long Simmple]]></category>
		<category><![CDATA[Session Storage]]></category>
		<category><![CDATA[snails pace]]></category>
		<category><![CDATA[standard css selectors]]></category>
		<category><![CDATA[Style css animation]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[Texas conference]]></category>
		<category><![CDATA[unknown features]]></category>
		<category><![CDATA[Vector graphics]]></category>
		<category><![CDATA[web app]]></category>
		<category><![CDATA[Web apps]]></category>
		<category><![CDATA[Web Storage]]></category>
		<category><![CDATA[Will Never]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1314</guid>
		<description><![CDATA[by Estelle Weyl at HTML5 Texas Conference in Austin, TX (Deck) It may feel like the HTML5, CSS3 and ECMAScript specifications are moving along at a snails pace, but browser capabilities are moving quickly, and it is difficult to keep up with all the new feature support. In this session we&#8217;ll cover some brand spanking [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F' data-shr_title='10+Things+You+Didn%27t+Know+a+Browser+Could+Do'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F' data-shr_title='10+Things+You+Didn%27t+Know+a+Browser+Could+Do'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F' data-shr_title='10+Things+You+Didn%27t+Know+a+Browser+Could+Do'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p>by <a title="Estelle Weyl" href="http://www.standardista.com/" target="_blank">Estelle Weyl</a> at HTML5 <a href="http://www.jonathanjeter.com/front-end-web-developer/texas-conference/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Texas Conference</a> in Austin, TX (<a title="10 Things You Didn't Know a Browser Could Do" href="http://estelle.github.com/10/" target="_blank">Deck</a>)</p>
<blockquote><p>It may feel like the HTML5, CSS3 and ECMAScript specifications are moving along at a snails pace, but browser capabilities are moving quickly, and it is difficult to keep up with all the new feature support. In this session we&#8217;ll cover some brand spanking new and older but unknown features that make debugging, designing and developing more fun.</p></blockquote>
<h2><a href="http://www.jonathanjeter.com/images/HTML5TX-10-Things-You-Didnt-Know-a-Browser-Could-Do.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1316" alt="10 Things You Didn't Know a Browser Could Do" src="http://www.jonathanjeter.com/images/HTML5TX-10-Things-You-Didnt-Know-a-Browser-Could-Do-300x169.jpg" width="300" height="169" /></a>1. $(&#8216;selector&#8217;) without <a class="zem_slink" title="JQuery" href="http://jquery.com/" target="_blank" rel="homepage">jQuery</a></h2>
<ul>
<li><span style="line-height: 13px;">Supported since IE8</span></li>
<li>You can access DOM elements with standard css selectors</li>
</ul>
<h2>2. Everything is Editable</h2>
<ul>
<li>Everything can be updated</li>
<li>Can even paste!</li>
<li>Updates <a class="zem_slink" title="Document Object Model" href="http://en.wikipedia.org/wiki/Document_Object_Model" target="_blank" rel="wikipedia">the DOM</a></li>
<li>Turn anything into a form element</li>
<li>Supported since IE5</li>
</ul>
<h2>3. Can store lots of data</h2>
<ul>
<li><span style="line-height: 13px;"><a class="zem_slink" title="Web Storage" href="http://en.wikipedia.org/wiki/Web_Storage" target="_blank" rel="wikipedia">LocalStorage</a></span></li>
<li>SessionStorage</li>
<li>WebSQL (deprecated but available in webkit)</li>
<li><a class="zem_slink" title="Indexed Database API" href="http://en.wikipedia.org/wiki/Indexed_Database_API" target="_blank" rel="wikipedia">IndexedDB</a> (new standard, but not supported in any browser)</li>
</ul>
<p>Cookie Limitations</p>
<ul>
<li><span style="line-height: 13px;">Sent with every <a class="zem_slink" title="Hypertext Transfer Protocol" href="http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank" rel="wikipedia">HTTP request</a> (in plain text)</span></li>
<li>Limited to 4KB each, 20 per domain &amp; 300 per browser</li>
<li>No real API</li>
</ul>
<p>Local and Session Storage</p>
<ul>
<li>Not sent to server (more secure / less bandwidth)</li>
<li>Limited to 5MB each</li>
<li>Long term or session long</li>
<li>Simmple API</li>
</ul>
<p>localStorage</p>
<ul>
<li><span style="line-height: 13px;">Save text value on the client-side (crash-safe)</span></li>
<li>only works on the same domain</li>
<li>very simple to use</li>
</ul>
<p>Data Storage</p>
<ul>
<li>localStorage ➫ persistent storage<br />
Supported everywhere since ie8+</li>
<li>sessionStorage ➫ per tab storage<br />
Supported everywhere since ie8+</li>
<li>WebSQL ➫ <a href="http://www.jonathanjeter.com/front-end-web-developer/mobile-web/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Mobile Web</a> Apps<br />
deprecated. Will never be in FF/IE</li>
<li>IndexedDB ➫ 2014?<br />
Found in IE10, FF, Chrome, BB. Not Safari or other mobile yet</li>
</ul>
<h2>4. SVG as Background Images (Latecomers: IE9 &amp; Android 3)</h2>
<ul>
<li><a class="zem_slink" title="Scalable Vector Graphics" href="http://www.w3.org/Graphics/SVG/" target="_blank" rel="homepage">Scalable Vector Graphics</a></li>
<li>2D image format</li>
<li>supports interactivity and animation</li>
</ul>
<p>Remember that it uses DOM nodes and can slow things down</p>
<h2>5. Can count with CSS (supported since IE8)</h2>
<p>can create a counter on any element and increment on the next instance of that element. You can reset when you get to another element and make your own numbered outlines.</p>
<p>It is generated content and not part of the DOM</p>
<h2>6. CSS can Calculate</h2>
<p>(Prefixed in FF4, Saf6, BB10, Chr19, FF15 Android - Without prefix in FF16, IE 9+, Chrome 26 - No Opera, Android or mobile Chrome love&#8230;. yet)</p>
<p>Calculate percentages in the box model.</p>
<h2><a href="http://www.jonathanjeter.com/images/HTML5TX-Browser-can-take-a-picture.png#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1318" alt="Your Browser can take a picture!" src="http://www.jonathanjeter.com/images/HTML5TX-Browser-can-take-a-picture-300x152.png" width="300" height="152" /></a>7. IE6 and IE7 can buy you a house</h2>
<p>Charge more for old browser support!</p>
<h2>8. Browsers can take a picture</h2>
<p>(Firefox, Chrome and Opera only)</p>
<p>using getUserMedia</p>
<h2><a href="http://www.jonathanjeter.com/images/HTML5TX-Gangham-Style-Sprite-Animation.png#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1317" alt="Gangham Style Sprite Animation" src="http://www.jonathanjeter.com/images/HTML5TX-Gangham-Style-Sprite-Animation-300x222.png" width="300" height="222" /></a>9. Animate Sprites</h2>
<p>using animation, timing and bezier curves (<a title="cubic-bezier.com" href="http://cubic-bezier.com" target="_blank">cubic-bezier.com</a>)</p>
<p>Check out the <a title="Gangham Style CSS Animation" href="http://estelle.github.com/10/#slide38" target="_blank">Gangham Style css animation</a>!</p>
<h2>10. Help you manage memory</h2>
<p>In the debugger &#8211; Chrome Developer Tools &#8211; Timeline -&gt; Memory</p>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://css-tricks.com/the-2013-css-wishlist/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/140520065_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://css-tricks.com/the-2013-css-wishlist/" target="_blank">2013 CSS Wishlist</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/133452806_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/" target="_blank">Talks To Help You Become A Better Front-End Engineer In 2013</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://christianheilmann.com/2013/01/25/five-things-you-can-do-to-make-html5-perform-better/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/140677587_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://christianheilmann.com/2013/01/25/five-things-you-can-do-to-make-html5-perform-better/" target="_blank">Five things you can do to make HTML5 perform better</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://stackoverflow.com/questions/13672727/local-storage-manipulation-and-possible-sending" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/noimg_17_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://stackoverflow.com/questions/13672727/local-storage-manipulation-and-possible-sending" target="_blank">Local Storage manipulation and possible sending</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/snails-pace/' rel='tag'>snails pace</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/jquery-supported/' rel='tag'>jQuery Supported</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/web-apps/' rel='tag'>Web apps</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/opera/' rel='tag'>Opera</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/data-storage-localstorage/' rel='tag'>Data Storage localStorage</A>,  <A href='http://technorati.com/tag/mobile+chrome+love' rel='tag'>mobile Chrome love</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/sprite-animation/" title="sprite animation">sprite animation</a>, <a href="http://www.jonathanjeter.com/search/things-you-didnt-know-you-could-do-with-ie10/" title="things you didnt know you could do with ie10">things you didnt know you could do with ie10</a>, <a href="http://www.jonathanjeter.com/search/html5-sessionstorage-mvc/" title="html5 sessionstorage mvc">html5 sessionstorage mvc</a>, <a href="http://www.jonathanjeter.com/search/css3-sprite-animation/" title="css3 sprite animation">css3 sprite animation</a>, <a href="http://www.jonathanjeter.com/search/animated-deer-clipart/" title="animated deer clipart">animated deer clipart</a>, <a href="http://www.jonathanjeter.com/search/sprite-football/" title="sprite football">sprite football</a>, <a href="http://www.jonathanjeter.com/search/jquery-sprite-animation/" title="jquery sprite animation">jquery sprite animation</a>, <a href="http://www.jonathanjeter.com/search/jquery-sessionstorage-ie10/" title="jquery sessionstorage ie10">jquery sessionstorage ie10</a>, <a href="http://www.jonathanjeter.com/search/indexeddb-support-in-android/" title="indexeddb support in android">indexeddb support in android</a>, <a href="http://www.jonathanjeter.com/search/mac-font-issue/" title="mac font issue">mac font issue</a></p><div class="shr-publisher-1314"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F' data-shr_title='10+Things+You+Didn%27t+Know+a+Browser+Could+Do'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F' data-shr_title='10+Things+You+Didn%27t+Know+a+Browser+Could+Do'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2F10-things-you-didnt-know-a-browser-could-do%2F' data-shr_title='10+Things+You+Didn%27t+Know+a+Browser+Could+Do'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/dy6m7A_pIAs" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/10-things-you-didnt-know-a-browser-could-do/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/10-things-you-didnt-know-a-browser-could-do/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>You Got your MVC into my Components: Adding Bindings to Enyo</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/vO3rlFDOJws/</link>
		<comments>http://www.jonathanjeter.com/web-development/you-got-your-mvc-into-my-components-adding-bindings-to-enyo/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 18:06:21 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[MVC]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[app developer]]></category>
		<category><![CDATA[app developers]]></category>
		<category><![CDATA[application development]]></category>
		<category><![CDATA[application state]]></category>
		<category><![CDATA[application. markup]]></category>
		<category><![CDATA[articles Enyo]]></category>
		<category><![CDATA[Backbone models]]></category>
		<category><![CDATA[Ben Combee]]></category>
		<category><![CDATA[broilerplate code]]></category>
		<category><![CDATA[Complexity Alert Components]]></category>
		<category><![CDATA[complexity Data]]></category>
		<category><![CDATA[cool features]]></category>
		<category><![CDATA[data binding]]></category>
		<category><![CDATA[Enyo framework]]></category>
		<category><![CDATA[Enyo help]]></category>
		<category><![CDATA[event handling]]></category>
		<category><![CDATA[FLA TIP EMV]]></category>
		<category><![CDATA[fully encapsulated object]]></category>
		<category><![CDATA[future work]]></category>
		<category><![CDATA[html apps]]></category>
		<category><![CDATA[HTML5 Texas Conference]]></category>
		<category><![CDATA[huge advantage]]></category>
		<category><![CDATA[Interactive controls]]></category>
		<category><![CDATA[Javascript MVC Frameworks]]></category>
		<category><![CDATA[mixin pattern]]></category>
		<category><![CDATA[mode view presenter]]></category>
		<category><![CDATA[model delegate]]></category>
		<category><![CDATA[model view]]></category>
		<category><![CDATA[model view modelview]]></category>
		<category><![CDATA[Model-View-Controller MVC]]></category>
		<category><![CDATA[MVC framework]]></category>
		<category><![CDATA[MVC Frameworks]]></category>
		<category><![CDATA[MVC Other Patterns]]></category>
		<category><![CDATA[native app]]></category>
		<category><![CDATA[native apps]]></category>
		<category><![CDATA[new way]]></category>
		<category><![CDATA[observer pattern]]></category>
		<category><![CDATA[Platform App Development]]></category>
		<category><![CDATA[reusable UI components]]></category>
		<category><![CDATA[Running Webcast]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[templating problem]]></category>
		<category><![CDATA[Texas conference]]></category>
		<category><![CDATA[TX Enyo]]></category>
		<category><![CDATA[UI components]]></category>
		<category><![CDATA[UI Plugins]]></category>
		<category><![CDATA[User interface]]></category>
		<category><![CDATA[user state]]></category>
		<category><![CDATA[versatility Integration]]></category>
		<category><![CDATA[web app]]></category>
		<category><![CDATA[Web application]]></category>
		<category><![CDATA[web application framework]]></category>
		<category><![CDATA[web platform]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1305</guid>
		<description><![CDATA[by Ben Combee at the HTML5 Texas Conference in Austin, TX Enyo (http://enyojs.com) started as an web application framework, focusing on the problem of effectively building reusable UI components.  However, many app developers view problems through a Model-View-Controller (MVC) point-of-view where the UI is seen as a templating problem.  This talk looks at how the Enyo framework [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F' data-shr_title='You+Got+your+MVC+into+my+Components%3A+Adding+Bindings+to+Enyo'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F' data-shr_title='You+Got+your+MVC+into+my+Components%3A+Adding+Bindings+to+Enyo'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F' data-shr_title='You+Got+your+MVC+into+my+Components%3A+Adding+Bindings+to+Enyo'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p>by <a title="Ben Combee" href="http://html5tx2013.sched.org/speaker/combee">Ben Combee</a> at the HTML5 <a href="http://www.jonathanjeter.com/front-end-web-developer/texas-conference/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Texas Conference</a> in Austin, TX</p>
<blockquote><p><a class="zem_slink" title="Enyo" href="http://en.wikipedia.org/wiki/Enyo" target="_blank" rel="wikipedia">Enyo</a> (http://enyojs.com) started as an <a href="http://www.jonathanjeter.com/front-end-web-developer/web-application/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >web application</a> framework, focusing on the problem of effectively building reusable UI components.  However, many app developers view problems through a <a class="zem_slink" title="Model–view–controller" href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" target="_blank" rel="wikipedia">Model-View-Controller</a> (MVC) point-of-view where the UI is seen as a templating problem.  This talk looks at how the Enyo framework evolved in late 2012 to take on aspects of MVC, integrating support for Backbone models and data binding into our component &amp; message passing architecture.  In doing so, it reveals what these two worlds can learn from each other, and how they both play into future work on the &#8220;web platform&#8221;.</p></blockquote>
<p><a href="http://www.jonathanjeter.com/images/HTML5TX-Enyo.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1307" alt="Adding bindings to Enyo" src="http://www.jonathanjeter.com/images/HTML5TX-Enyo-300x169.jpg" width="300" height="169" /></a>Enyo help build html apps with the feel of native apps.</p>
<p>A new way of thinking</p>
<p>How do you keep application state?</p>
<p>Templates are not enough. Interactive controls are hard to put into templates.</p>
<p>UI Plugins are not enough because in application development you have to maintain state and other things that aren&#8217;t necessary on the desktop.</p>
<p>The huge advantage of enyo is that it is a fully encapsulated object and can be re-used throughout the application. markup, event handling, logic/state, user state, etc.</p>
<p>You can easily combine and reuse views.</p>
<p>The goal is to never have to touch the <a class="zem_slink" title="HTML" href="http://en.wikipedia.org/wiki/HTML" target="_blank" rel="wikipedia">HTML</a> and just use components with css applied.</p>
<h3>Complexity Alert</h3>
<ul>
<li>Components can lead to complexity</li>
<li>Data isn&#8217;t centralizes</li>
<li>Lots of broilerplate code repeated over and over</li>
</ul>
<h2>MVC</h2>
<h3>Other Patterns</h3>
<ul>
<li>MVP (mode view presenter)</li>
<li><a class="zem_slink" title="Model View ViewModel" href="http://en.wikipedia.org/wiki/Model_View_ViewModel" target="_blank" rel="wikipedia">MVVM</a> (model view modelview)</li>
<li>MD (model delegate)</li>
<li>MI</li>
<li><a class="zem_slink" title="Presentation-abstraction-control" href="http://en.wikipedia.org/wiki/Presentation-abstraction-control" target="_blank" rel="wikipedia">HMVC</a></li>
<li>PAC</li>
<li>MPVC</li>
<li>FLA</li>
<li>TIP</li>
</ul>
<h3>EMV (Enyo-model-view-something)</h3>
<ul>
<li>Allows tight or lose coupling of views and controllers</li>
<li>Allows view-owned-controllers and controller-owned-views</li>
<li>Introduces the observer pattern, computed properties, the mixin pattern and bindings</li>
<li>A ton of other cool features, improvements and added versatility</li>
</ul>
<h3>Integration with Backbone</h3>
<ul>
<li>a controller that knows how to interact with backbone.collection</li>
<li>a controller that knows how to work with backbone.model</li>
</ul>
<p>At this point, the talk went into details of how you actually program in Enyo.</p>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://shop.oreilly.com/product/0636920027751.do" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/131858528_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://shop.oreilly.com/product/0636920027751.do" target="_blank">Enyo: Up and Running</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://oreillynet.com/pub/e/2603" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/142365558_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://oreillynet.com/pub/e/2603" target="_blank">Webcast: Cross Platform App Development with Enyo &#8211; Apr 16 2013</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.queness.com/community-news/13570/a-collection-of-javascript-mvc-frameworks-that-you-should-know" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/141409101_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.queness.com/community-news/13570/a-collection-of-javascript-mvc-frameworks-that-you-should-know" target="_blank">A Collection Of Javascript <a href="http://www.jonathanjeter.com/front-end-web-developer/mvc-frameworks/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >MVC Frameworks</a> That You Should Know</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/interactive-controls/' rel='tag'>Interactive controls</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/fully-encapsulated-object/' rel='tag'>fully encapsulated object</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/tx-enyo/' rel='tag'>TX Enyo</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/enyojs-mvc/" title="enyojs mvc">enyojs mvc</a>, <a href="http://www.jonathanjeter.com/search/adding-bindings-to-enyo/" title="adding bindings to enyo">adding bindings to enyo</a>, <a href="http://www.jonathanjeter.com/search/broilerplate/" title="broilerplate">broilerplate</a>, <a href="http://www.jonathanjeter.com/search/enyojs-mvc/" title="enyojs-mvc">enyojs-mvc</a>, <a href="http://www.jonathanjeter.com/search/integrate-instagram-feed-into-mvc/" title="integrate instagram feed into MVC">integrate instagram feed into MVC</a>, <a href="http://www.jonathanjeter.com/search/maintain-the-data-across-vertical-tabs-in-mvc-2012/" title="maintain the data across vertical tabs in mvc 2012">maintain the data across vertical tabs in mvc 2012</a>, <a href="http://www.jonathanjeter.com/search/mvc-ui-components/" title="mvc ui components">mvc ui components</a>, <a href="http://www.jonathanjeter.com/search/svn-insert-broilerplate-code/" title="svn insert broilerplate code">svn insert broilerplate code</a>, <a href="http://www.jonathanjeter.com/search/you-got-your-component/" title="you got your component">you got your component</a></p><div class="shr-publisher-1305"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F' data-shr_title='You+Got+your+MVC+into+my+Components%3A+Adding+Bindings+to+Enyo'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F' data-shr_title='You+Got+your+MVC+into+my+Components%3A+Adding+Bindings+to+Enyo'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fyou-got-your-mvc-into-my-components-adding-bindings-to-enyo%2F' data-shr_title='You+Got+your+MVC+into+my+Components%3A+Adding+Bindings+to+Enyo'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/vO3rlFDOJws" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/you-got-your-mvc-into-my-components-adding-bindings-to-enyo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/you-got-your-mvc-into-my-components-adding-bindings-to-enyo/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>Managing a Large Front-End Project with Automated Build Tools</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/8oI48ir5isM/</link>
		<comments>http://www.jonathanjeter.com/web-development/managing-a-large-front-end-project-with-automated-build-tools/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 17:12:47 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[MVC]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[accountability Case Study]]></category>
		<category><![CDATA[Automate Builds]]></category>
		<category><![CDATA[Automate common build]]></category>
		<category><![CDATA[Automated Build Tools]]></category>
		<category><![CDATA[automated testing]]></category>
		<category><![CDATA[Automated tools]]></category>
		<category><![CDATA[Browser Refresh]]></category>
		<category><![CDATA[browserly Related articles]]></category>
		<category><![CDATA[Build automation]]></category>
		<category><![CDATA[case study]]></category>
		<category><![CDATA[cleaner JS Module]]></category>
		<category><![CDATA[code quality]]></category>
		<category><![CDATA[Code refactoring]]></category>
		<category><![CDATA[diverse team]]></category>
		<category><![CDATA[easy commit hooks]]></category>
		<category><![CDATA[Enforce Automation]]></category>
		<category><![CDATA[Enforce Educate team]]></category>
		<category><![CDATA[framework grunt]]></category>
		<category><![CDATA[growl pulls]]></category>
		<category><![CDATA[grunt commands works]]></category>
		<category><![CDATA[Grunt.js Precognitive Build]]></category>
		<category><![CDATA[HTML5 Texas Conference]]></category>
		<category><![CDATA[huge web application]]></category>
		<category><![CDATA[javascript code]]></category>
		<category><![CDATA[js files]]></category>
		<category><![CDATA[JSHint Lint]]></category>
		<category><![CDATA[Large Front-End Project]]></category>
		<category><![CDATA[large web application]]></category>
		<category><![CDATA[minifies. styles.stylus]]></category>
		<category><![CDATA[modular js]]></category>
		<category><![CDATA[multiple developers]]></category>
		<category><![CDATA[new automation tools]]></category>
		<category><![CDATA[old code]]></category>
		<category><![CDATA[Operations Automating tasks]]></category>
		<category><![CDATA[process. gruntjs.com]]></category>
		<category><![CDATA[project multiple js]]></category>
		<category><![CDATA[project standards]]></category>
		<category><![CDATA[quality assurance]]></category>
		<category><![CDATA[quality checking]]></category>
		<category><![CDATA[quality code]]></category>
		<category><![CDATA[quality control]]></category>
		<category><![CDATA[Software quality]]></category>
		<category><![CDATA[strong suit]]></category>
		<category><![CDATA[team meeting]]></category>
		<category><![CDATA[team member]]></category>
		<category><![CDATA[team members]]></category>
		<category><![CDATA[test suite]]></category>
		<category><![CDATA[Texas conference]]></category>
		<category><![CDATA[time Automation]]></category>
		<category><![CDATA[tool Automation]]></category>
		<category><![CDATA[Unit test runner]]></category>
		<category><![CDATA[Unit testing]]></category>
		<category><![CDATA[web app]]></category>
		<category><![CDATA[Web application]]></category>
		<category><![CDATA[web project]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1270</guid>
		<description><![CDATA[by kperch at HTML5 Texas Conference in Austin, TX How do you manage a huge web application&#8216;s front-end when you have a diverse team of programmers, and javascript is not a strong suit for all of them? How do you handle both new and old code from multiple developers, and make sure only quality code makes it [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F' data-shr_title='Managing+a+Large+Front-End+Project+with+Automated+Build+Tools'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F' data-shr_title='Managing+a+Large+Front-End+Project+with+Automated+Build+Tools'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F' data-shr_title='Managing+a+Large+Front-End+Project+with+Automated+Build+Tools'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p>by <a title="kperch" href="http://html5tx2013.sched.org/speaker/kperch">kperch</a> at HTML5 <a href="http://www.jonathanjeter.com/front-end-web-developer/texas-conference/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Texas Conference</a> in Austin, TX</p>
<blockquote><p>How do you manage a huge <a href="http://www.jonathanjeter.com/front-end-web-developer/web-application/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >web application</a>&#8216;s front-end when you have a diverse team of programmers, and javascript is not a strong suit for all of them? How do you handle both new and old code from multiple developers, and make sure only quality code makes it into your repos? Automated tools such as Yeoman and Grunt are not just for packaging your web project in a performant and clean package. They also allow you to enforce code quality and consistency through automated quality checking, testing, and beautification. This talk will go over the case study of a large web application in need of a refactor and test suite, and how tools such as Yeoman and Grunt allow you to implement a plan to bring projects like these back from the brink, without losing your sanity in the process.</p></blockquote>
<p><a href="http://www.jonathanjeter.com/images/Managing-a-Large-Front-End-Project-with-Automated-Build-Tools.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1297" alt="Managing a Large Front-End Project with Automated Build Tools" src="http://www.jonathanjeter.com/images/Managing-a-Large-Front-End-Project-with-Automated-Build-Tools-300x169.jpg" width="300" height="169" /></a>gruntjs.com (runs on node) &#8211; you just need <a class="zem_slink" title="JSON" href="http://json.org/" target="_blank" rel="homepage">JSON</a> and grunt commands</p>
<p>works with growl</p>
<p>pulls everything together, combines, concatenates and minifies.</p>
<p>styles.stylus combines css</p>
<p>You can set up watch tasks and it will check for errors as you code, but be careful because it can slow down your system if you&#8217;re trying to watch too much.</p>
<p><a href="http://www.jonathanjeter.com/images/gruntjs.png#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1351" alt="gruntjs" src="http://www.jonathanjeter.com/images/gruntjs-300x300.png" width="300" height="300" /></a>It has tons of plugins for jade, <a class="zem_slink" title="Markdown" href="http://daringfireball.net/projects/markdown/" target="_blank" rel="homepage">Markdown</a>, <a class="zem_slink" title="YAML" href="http://en.wikipedia.org/wiki/YAML" target="_blank" rel="wikipedia">YAML</a>, <a class="zem_slink" title="Web browser" href="http://en.wikipedia.org/wiki/Web_browser" target="_blank" rel="wikipedia">Browser</a> Refresh, Templates, Handlebar, dot, <a class="zem_slink" title="Compass" href="http://wiki.github.com/chriseppstein/compass" target="_blank" rel="homepage">Compass</a>, LESS, SASS, Stylus, Mocha, Jasmine, Beautifier, JSHint/Lint, Appcache Generation and more. Available on <a class="zem_slink" title="Npm" href="http://npmjs.org/" target="_blank" rel="homepage">NPM</a>.</p>
<p>How does this help with existing projects? Educate &#8211; Automate &#8211; Enforce</p>
<p>Educate team members about project standards and patterns</p>
<ul>
<li><span style="line-height: 13px;">At a team meeting, set the agenda in advance</span></li>
<li>Bring reasons and support for views on standards</li>
<li>Put it in writing, put it somewhere public to your team</li>
</ul>
<p>Automate common build steps and quality control</p>
<ul>
<li><span style="line-height: 13px;">Even if you don&#8217;t use grunt, just automate it!</span></li>
<li>It&#8217;s important that everyone uses the same process</li>
</ul>
<p>Use the new automation tools to enforce the standards</p>
<ul>
<li><span style="line-height: 13px;">Automated processes = easy commit hooks</span></li>
<li>Peer reviews allow for team accountability</li>
</ul>
<p>Case Study &#8211; what we have</p>
<ul>
<li><span style="line-height: 13px;">Large legacy project</span></li>
<li>multiple js files</li>
</ul>
<p>what we want</p>
<ul>
<li><span style="line-height: 13px;">modular js</span></li>
</ul>
<p>Step 1 &#8211; Educate</p>
<ul>
<li><span style="line-height: 13px;">get the team involved</span></li>
<li>JSHint &#8211; promote cleaner JS</li>
<li>Module system/automated build</li>
</ul>
<p>Step 2 &#8211; Automate</p>
<ul>
<li><span style="line-height: 13px;">Builds &#8211; concatenation, minifications</span></li>
<li>Quality Control &#8211; JSHint, Unit test runner</li>
</ul>
<p>Step 3 &#8211; Enforce</p>
<ul>
<li><span style="line-height: 13px;">Automation &#8211; easy commit hooks</span></li>
<li>peer reviews</li>
</ul>
<p>Take it in stages</p>
<ul>
<li><span style="line-height: 13px;">Enforce quality assurance on new files at first</span></li>
<li>Refactor, then add to JSHint Lint</li>
<li>Take it one step at a time</li>
</ul>
<p>Automation is a tool</p>
<p>Automation helps, but it doesn&#8217;t substitute for proper planning and framework</p>
<p>grunt is ready and simpler to use than yeoman</p>
<p>You can do automated testing against the dom using browserly</p>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.javacodegeeks.com/2013/01/good-bad-patterns-in-development-and-operations.html" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/141417249_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.javacodegeeks.com/2013/01/good-bad-patterns-in-development-and-operations.html" target="_blank">Good &amp; Bad Patterns in Development and Operations</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://ruudud.github.com/2012/12/22/grunt/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/noimg_123_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://ruudud.github.com/2012/12/22/grunt/" target="_blank">Automating tasks with Grunt.js</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://michaelfeathers.typepad.com/michael_feathers_blog/2012/09/precognitive-build-servers.html" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/113110320_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://michaelfeathers.typepad.com/michael_feathers_blog/2012/09/precognitive-build-servers.html" target="_blank">Precognitive Build Servers</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://blog.clinkerhq.com/tips-keep-your-javascript-code-under-control/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/141328117_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://blog.clinkerhq.com/tips-keep-your-javascript-code-under-control/" target="_blank">Tips: Keep your javascript code under control</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://technorati.com/tag/grunt+commands+works' rel='tag'>grunt commands works</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/enforce-automation/' rel='tag'>Enforce Automation</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/jshint-lint/' rel='tag'>JSHint Lint</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/test-suite/' rel='tag'>test suite</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/new-automation-tools/' rel='tag'>new automation tools</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/team-member/' rel='tag'>team member</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/browser-refresh/' rel='tag'>Browser Refresh</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/automated-builds-managing-large-projects/" title="automated builds managing large projects">automated builds managing large projects</a>, <a href="http://www.jonathanjeter.com/search/best-automated-tool-for-large-projects/" title="best automated tool for large projects">best automated tool for large projects</a>, <a href="http://www.jonathanjeter.com/search/best-front-end-automation-tool/" title="best front-end automation tool">best front-end automation tool</a>, <a href="http://www.jonathanjeter.com/search/gruntjs-png/" title="gruntjs png">gruntjs png</a>, <a href="http://www.jonathanjeter.com/search/how-i-can-comment-big-front-facebook/" title="how i can comment big front facebook">how i can comment big front facebook</a>, <a href="http://www.jonathanjeter.com/search/jeter-mobile-automation/" title="jeter mobile automation">jeter mobile automation</a>, <a href="http://www.jonathanjeter.com/search/managing-a-project-with-grunt/" title="managing a project with grunt">managing a project with grunt</a>, <a href="http://www.jonathanjeter.com/search/stylus-css-automation/" title="stylus css automation">stylus css automation</a>, <a href="http://www.jonathanjeter.com/search/what-automated-build-tools-have-you-used-in-programming/" title="What automated build tools have you used in programming">What automated build tools have you used in programming</a></p><div class="shr-publisher-1270"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F' data-shr_title='Managing+a+Large+Front-End+Project+with+Automated+Build+Tools'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F' data-shr_title='Managing+a+Large+Front-End+Project+with+Automated+Build+Tools'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fmanaging-a-large-front-end-project-with-automated-build-tools%2F' data-shr_title='Managing+a+Large+Front-End+Project+with+Automated+Build+Tools'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/8oI48ir5isM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/managing-a-large-front-end-project-with-automated-build-tools/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/managing-a-large-front-end-project-with-automated-build-tools/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
		<item>
		<title>Backbone: 3 Ways</title>
		<link>http://feedproxy.google.com/~r/JonathanJeter/~3/VqIpru66kzw/</link>
		<comments>http://www.jonathanjeter.com/web-development/backbone-3-ways/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 16:33:01 +0000</pubDate>
		<dc:creator>Jonathan Jeter</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[MVC]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[5-person frontend team]]></category>
		<category><![CDATA[Admin pieces]]></category>
		<category><![CDATA[Application programming interface]]></category>
		<category><![CDATA[backbone app]]></category>
		<category><![CDATA[backbone backend]]></category>
		<category><![CDATA[Backbone basics]]></category>
		<category><![CDATA[Backbone Beginner HTML5]]></category>
		<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Best Practices Backbone]]></category>
		<category><![CDATA[change log]]></category>
		<category><![CDATA[collaborative interface]]></category>
		<category><![CDATA[Collections group]]></category>
		<category><![CDATA[Common Services Best Practices Backbone]]></category>
		<category><![CDATA[controller framework]]></category>
		<category><![CDATA[CSS3 Resources]]></category>
		<category><![CDATA[current status]]></category>
		<category><![CDATA[custom router custom]]></category>
		<category><![CDATA[data binding]]></category>
		<category><![CDATA[data binding. Router]]></category>
		<category><![CDATA[Deck Backbone]]></category>
		<category><![CDATA[different applications]]></category>
		<category><![CDATA[different projects]]></category>
		<category><![CDATA[different technologies]]></category>
		<category><![CDATA[different ways]]></category>
		<category><![CDATA[entire site]]></category>
		<category><![CDATA[form building interfaces]]></category>
		<category><![CDATA[Front and back ends]]></category>
		<category><![CDATA[front-end MVC]]></category>
		<category><![CDATA[frontend application]]></category>
		<category><![CDATA[JavaScript micro-frameworks]]></category>
		<category><![CDATA[JavaScript micro-frameworks Backbone]]></category>
		<category><![CDATA[js files]]></category>
		<category><![CDATA[layer Entire page]]></category>
		<category><![CDATA[lightweight model view]]></category>
		<category><![CDATA[lightweight model view controller]]></category>
		<category><![CDATA[manager custom API layer]]></category>
		<category><![CDATA[Modularity Persistence Layer]]></category>
		<category><![CDATA[MVC framework]]></category>
		<category><![CDATA[MVC Frameworks]]></category>
		<category><![CDATA[Node.js App]]></category>
		<category><![CDATA[normal page loads]]></category>
		<category><![CDATA[options open Figure]]></category>
		<category><![CDATA[page load]]></category>
		<category><![CDATA[Pamela Fox]]></category>
		<category><![CDATA[Persistence Layer]]></category>
		<category><![CDATA[popular MVC frameworks]]></category>
		<category><![CDATA[real deletes]]></category>
		<category><![CDATA[relational models]]></category>
		<category><![CDATA[Server The rise]]></category>
		<category><![CDATA[Share models]]></category>
		<category><![CDATA[Single-page web apps]]></category>
		<category><![CDATA[static html pages]]></category>
		<category><![CDATA[Technology Internet]]></category>
		<category><![CDATA[Uniform Resource Locator]]></category>
		<category><![CDATA[web app]]></category>
		<category><![CDATA[Web apps]]></category>

		<guid isPermaLink="false">http://www.jonathanjeter.com/?p=1268</guid>
		<description><![CDATA[by Pamela Fox at HTML5 Texas Conference, Austin, Texas (Deck) Backbone is one of the most popular MVC frameworks for JavaScript these days, and one of the reasons for its popularity is that its minimal and lightweight. That makes it easy to use in different ways and adapt to different projects &#8211; but can also make it hard to learn. In [...]]]></description>
				<content:encoded><![CDATA[<!-- Start Shareaholic LikeButtonSetTop Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F' data-shr_title='Backbone%3A+3+Ways'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F' data-shr_title='Backbone%3A+3+Ways'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F' data-shr_title='Backbone%3A+3+Ways'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetTop Automatic --><p>by <a title="Pamela Fox" href="http://html5tx2013.sched.org/speaker/pamela.fox1">Pamela Fox</a> at HTML5 Texas Conference, Austin, Texas (<a title="Backbone: 3 Ways" href="http://backbone-3ways.appspot.com/" target="_blank">Deck</a>)</p>
<blockquote><p>Backbone is one of the most popular <a class="zem_slink" title="Model–view–controller" href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" target="_blank" rel="wikipedia">MVC</a> frameworks for <a class="zem_slink" title="JavaScript" href="http://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="wikipedia">JavaScript</a> these days, and one of the reasons for its popularity is that its minimal and lightweight. That makes it easy to use in different ways and adapt to different projects &#8211; but can also make it hard to learn. In this talk, I&#8217;ll start with Backbone basics, and then dive into three different ways that we use it to power the frontends of Coursera.org.</p></blockquote>
<p><a href="http://www.jonathanjeter.com/images/Backbone-3-Ways-HTML5TX.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1285" alt="Backbone 3 Ways HTML5TX" src="http://www.jonathanjeter.com/images/Backbone-3-Ways-HTML5TX-300x169.jpg" width="300" height="169" /></a></p>
<p>Why use an MVC framework? Website includes: 242 js files, 28848 lines of code &amp; 5-person frontend team. Needed more structure to their code.<br />
Why Backbone?</p>
<ul>
<li><span style="line-height: 13px;">Structure</span></li>
<li>Modularity</li>
<li><a class="zem_slink" title="Persistence (computer science)" href="http://en.wikipedia.org/wiki/Persistence_%28computer_science%29" target="_blank" rel="wikipedia">Persistence Layer</a></li>
<li>Common Services</li>
<li><a href="http://www.jonathanjeter.com/front-end-web-developer/best-practices/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >Best Practices</a></li>
</ul>
<p><a href="http://www.jonathanjeter.com/images/Backbone-JS-MVC-Diagram.png#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignright size-medium wp-image-1286" alt="Backbone JS MVC Diagram" src="http://www.jonathanjeter.com/images/Backbone-JS-MVC-Diagram-300x216.png" width="300" height="216" /></a></p>
<p>Backbone is a lightweight model view controller framework. <strong>Models</strong> use set &amp; get so the framework know what&#8217;s going on. <strong>Collections</strong> group objects together. <strong>Views</strong> with basic data binding. <strong>Router</strong> is available, but you don&#8217;t have to use it.</p>
<p>The backbone backend &#8211; pull the info from the server from the <a class="zem_slink" title="JSON" href="http://json.org/" target="_blank" rel="homepage">JSON</a> in the url.</p>
<p>Single-page <a href="http://www.jonathanjeter.com/front-end-web-developer/web-apps/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed" rel="tag nofollow" >web apps</a> can be crazy because you don&#8217;t have normal page loads, etc.</p>
<p>Backbon is integrated with <a class="zem_slink" title="JQuery" href="http://jquery.com/" target="_blank" rel="homepage">jQuery</a> and underscore, as well as RequireJS, which helps you put all the JavaScript files back together.</p>
<p>How do they use backbone at coursera?</p>
<ul>
<li>custom router</li>
<li>custom region manager</li>
<li>custom <a class="zem_slink" title="Application programming interface" href="http://en.wikipedia.org/wiki/Application_programming_interface" target="_blank" rel="wikipedia">API</a> layer</li>
</ul>
<p>Entire page is written in JavaScript. <a class="zem_slink" title="Pre-rendering" href="http://en.wikipedia.org/wiki/Pre-rendering" target="_blank" rel="wikipedia">Pre-render</a> static html pages for Google and Facebook.</p>
<p>&#8220;You don&#8217;t always have to do things the way they tell you to.&#8221;</p>
<p>Admin pieces require form building interfaces. Share models.</p>
<p>Enforce your permissions on the client, as well as the server or propagate them from the server.</p>
<p>The Router determines what models/collections are valid URLs based on groups in the cookie. Make sure you understand if what you&#8217;re building is a collaborative interface. Detect when others are entering the page or when the model was last saved. Don&#8217;t do real deletes. Make a deleted column and set it based on current status. Make a change log.</p>
<p>Using a front-end MVC allows you to easily connect to the backend, even if it changes.</p>
<p>You don&#8217;t have to use backbone for the entire site. You can pick and choose things that need to be fixed or updated and use a backbone app for one section at a time.</p>
<p>Backbone relational creates relational models.</p>
<p>Write all of your APIs consistently so that they can be used across different applications with different technologies.</p>
<p>If you want to start learning backbone, try a tutorial, not the docs.</p>
<h4>Keep your options open</h4>
<div>
<p>Figure out what&#8217;s important to you: modularity? data binding? testability? persistance?</p>
<p>Review your options: Ember? Spine? AngularJS? Enyo? and <a href="http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/">many more</a>&#8230;</p>
</div>
<h6 class="zemanta-related-title" style="font-size: 1em;">Related articles</h6>
<ul class="zemanta-article-ul zemanta-article-ul-image" style="margin: 0; padding: 0; overflow: hidden;">
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.sagarganatra.com/2012/12/applying-mvc-to-your-frontend-application-using-require-and-backbone.html" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/132723759_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.sagarganatra.com/2012/12/applying-mvc-to-your-frontend-application-using-require-and-backbone.html" target="_blank">Applying MVC to your frontend application using Require and Backbone</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://www.elijahmanor.com/2013/01/beginner-html5-javascript-jquery.html" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/141218802_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://www.elijahmanor.com/2013/01/beginner-html5-javascript-jquery.html" target="_blank">Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/141624022_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product" target="_blank">Our First Node.js App: Backbone on the Client and Server</a></li>
<li class="zemanta-article-ul-li-image zemanta-article-ul-li" style="padding: 0; background: none; list-style: none; display: block; float: left; vertical-align: top; text-align: left; width: 84px; font-size: 11px; margin: 2px 10px 10px 2px;"><a style="box-shadow: 0px 0px 4px #999; padding: 2px; display: block; border-radius: 2px; text-decoration: none;" href="http://greatfinds.icrossing.com/the-rise-of-javascript-micro-frameworks/" target="_blank"><img style="padding: 0; margin: 0; border: 0; display: block; width: 80px; max-width: 100%;" alt="" src="http://www.jonathanjeter.com/images/noimg_109_80_80.jpg" /></a><a style="display: block; overflow: hidden; text-decoration: none; line-height: 12pt; height: 80px; padding: 5px 2px 0 2px;" href="http://greatfinds.icrossing.com/the-rise-of-javascript-micro-frameworks/" target="_blank">The rise of JavaScript micro-frameworks</a></li>
</ul>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><img class="zemanta-pixie-img" style="border: none; float: right;" alt="" src="" /></div>


Here's what I think about   <A href='http://www.jonathanjeter.com/front-end-web-developer/real-deletes/' rel='tag'>real deletes</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/data-binding-router/' rel='tag'>data binding. Router</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/deck-backbone/' rel='tag'>Deck Backbone</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/css3-resources/' rel='tag'>CSS3 Resources</A>,  <A href='http://technorati.com/tag/web+apps' rel='tag'>Web apps</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/js-files/' rel='tag'>js files</A>,  <A href='http://www.jonathanjeter.com/front-end-web-developer/data-binding/' rel='tag'>data binding</A>  <BR/>

<p><strong>What people are looking for when they find this page: Jonathan Jeter, <a href="http://www.jonathanjeter.com/search/backbone-js-framework/" title="backbone js framework">backbone js framework</a>, <a href="http://www.jonathanjeter.com/search/backbonejs-architecture/" title="backbonejs architecture">backbonejs architecture</a>, <a href="http://www.jonathanjeter.com/search/common-services-best-practices/" title="common services best practices">common services best practices</a>, <a href="http://www.jonathanjeter.com/search/google-interface-backbone/" title="google interface backbone">google interface backbone</a></p><div class="shr-publisher-1268"></div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><div class='shareaholic-like-buttonset' style='float:right;height:30px;'><a class='shareaholic-fblike' data-shr_layout='button_count' data-shr_showfaces='false' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F' data-shr_title='Backbone%3A+3+Ways'></a><a class='shareaholic-fbsend' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F'></a><a class='shareaholic-googleplusone' data-shr_size='medium' data-shr_count='true' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F' data-shr_title='Backbone%3A+3+Ways'></a><a class='shareaholic-tweetbutton' data-shr_count='horizontal' data-shr_href='http%3A%2F%2Fwww.jonathanjeter.com%2Fweb-development%2Fbackbone-3-ways%2F' data-shr_title='Backbone%3A+3+Ways'></a></div><div style="clear: both; min-height: 1px; height: 3px; width: 100%;"></div><!-- End Shareaholic LikeButtonSetBottom Automatic --><img src="http://feeds.feedburner.com/~r/JonathanJeter/~4/VqIpru66kzw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.jonathanjeter.com/web-development/backbone-3-ways/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.jonathanjeter.com/web-development/backbone-3-ways/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</feedburner:origLink></item>
	</channel>
</rss><!-- This Quick Cache file was built for (  www.jonathanjeter.com/feed/ ) in 3.26020 seconds, on May 10th, 2013 at 11:42 pm UTC. --><!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on May 11th, 2013 at 12:42 am UTC -->
