<?xml version="1.0" encoding="UTF-8"?><rss version="0.92">
<channel>
	<title>Edwin Webb</title>
	<link>http://edwinwebb.com</link>
	<description>HTLM5 Developer // Spitalfields</description>
	<lastBuildDate>Fri, 18 Nov 2011 16:18:03 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	<!-- generator="WordPress/3.2.1" -->

	<item>
		<title>Human Readable HTML5 Media Time</title>
		<description><![CDATA[This function takes a time string from HTML Media Items (Video/audio) and returns it in the format MM:SS:MS. secondsToTimeString(123.456789) // &#8220;02:03:45&#8243; secondsToTimeString = function (seconds) { var ms = Math.floor((seconds*1000) % 1000); var s = Math.floor(seconds%60); var m = Math.floor((seconds*1000/(1000*60))%60); var strFormat = "MM:SS:XX"; if(s < 10) s = "0" + s; if(m < 10) [...]]]></description>
		<link>http://edwinwebb.com/2011/html5-media-times/</link>
			</item>
	<item>
		<title>Centring block level content in Webkit</title>
		<description><![CDATA[This will centre block level content on both the vertical and horizontal axis. #overlay { width:480px; height:320px; position:absolute; -webkit-box-align: center; -webkit-box-pack: center; display: -webkit-box; } #overlay .centred-content { position:relative; }]]></description>
		<link>http://edwinwebb.com/2011/centring-block-level-content-in-webkit/</link>
			</item>
	<item>
		<title>Getting more performance out of chrome</title>
		<description><![CDATA[There are two useful command-line flags for Chrome to help debugging GPU acceleration: &#8211;show-composited-layer-borders shows a red border around elements that are being manipulated at the GPU level. Good for confirming your manipulations occur within the GPU layer. &#8211;show-paint-rects all non-GPU changes are painted and this throws a light border around all areas that are [...]]]></description>
		<link>http://edwinwebb.com/2011/getting-more-performance-out-of-crome/</link>
			</item>
	<item>
		<title>Extending events in backbone.js</title>
		<description><![CDATA[This is pretty straightforward but took a moments thought. Perhaps I can spare your brain a few cycles. Here I&#8217;m extending MediaControls view to MovieControls and adding a settings button. events: _.extend(aura.view.MediaControls.prototype.events , { "click #settings-button" : "settingsHandler" }),]]></description>
		<link>http://edwinwebb.com/2011/extending-events-in-backbone-js/</link>
			</item>
	<item>
		<title>Zepto Touch and Faux Swipe Acceleration</title>
		<description><![CDATA[A backbone.view zepto.touchevent handler for a touch based L-R swipe menu swipeLeft : function(e) { var d = e.data.x2 - e.data.x1; //distance var s = this.nav[0].style.WebkitTransform; var x = s.match(/[^()\s]+(?=,&#124;\))/g); //Npx var c = parseInt(x[0]); //N var t = c + d * 3; //current + distance * multiplier //calculate bounds if(t > 200) t [...]]]></description>
		<link>http://edwinwebb.com/2011/zepto-touch-and-faux-swipe-acceleration/</link>
			</item>
	<item>
		<title>Europcar Reactive Advert</title>
		<description><![CDATA[This project mixes a web-camera, some very clever software and HTML5 to make an advert which can identify when you are looking at it and then determine your age and gender. Setup The Quividi software is designed to run on a Windows Atom Netbook above an advert and gathers data on passers-by which is posted [...]]]></description>
		<link>http://edwinwebb.com/2011/europcar-reactive-advert/</link>
			</item>
	<item>
		<title>A neat FOR loop</title>
		<description><![CDATA[Counts 10, thought it looked neat. var i = 10; for(i; i; i--) { console.log(i); }]]></description>
		<link>http://edwinwebb.com/2011/a-neat-for-loop/</link>
			</item>
	<item>
		<title>Pie Chart Roundel in CSS3 Gradients</title>
		<description><![CDATA[CSS3 gradients make pie chart roundels. I will extend this to proper pie charts if I can. Not sure why I&#8217;m not using SVG but there you go. They need a lot of work but smaller and more accessible than images and SVG I guess. Webkit Only View source on this.nextSibling for the CSS .roundel [...]]]></description>
		<link>http://edwinwebb.com/2011/pie-chart-roundel-in-css3-gradients/</link>
			</item>
	<item>
		<title>Generating Unique IDs with Javascript</title>
		<description><![CDATA[This is ripped from Spine and is very tasty. I added some comments to my minor edit Spine.guid = function(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16&#124;0, v = c === 'x' ? r : (r&#38;0x3&#124;0x8); return v.toString(16); }).toUpperCase(); }; And my minor edit with comments //replace each occurance of "x" with value returned [...]]]></description>
		<link>http://edwinwebb.com/2011/generating-unique-ids-in-javascript/</link>
			</item>
	<item>
		<title>webpagetest.org results table data to JSON parse</title>
		<description><![CDATA[Quick script to parse the first two tables on the content breakdown tab into JS object notation. Modify .eq() to 1 for bytes table. var x = {};$(".google-visualization-table-table").eq(0).find("tr:gt(0) td:first-child").each(function(){var y = $(this).text(); var z = parseInt($(this).next().text()); x[y] ? x[y] += z : x[y] = z});JSON.stringify(x); Same shizzle, puts the data into arrays for http://g.raphaeljs.com var [...]]]></description>
		<link>http://edwinwebb.com/2011/webpagetest-org-results-table-data-to-json-parse/</link>
			</item>
</channel>
</rss>

