Tait Brown rich internet application goodness

Tait Brown

Some insight into how the Goog sees your feed. You might find it useful for trouble shooting - we certainly do.

Stomach Contents: Structure - struct
description	My name is Tait Brown, and I’m a Melbourne-based UI designer and a front end developer. I like to make stuff. taitbrown@gmail.com var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); try { var pageTracker = _gat._getTracker("UA-327294-3"); pageTracker._trackPageview(); } catch(err) {}
encoding	UTF-8
generator	Tumblr (3.0; @taitems)
item	Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct description Stomach Contents: Structure - struct value <p>David Calhoun&#8217;s <a href="http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range" target="_blank">iPhone slider built with an &lt;input type=&#8221;range&#8221;&gt;</a> is a fantastic example of what&#8217;s possible with a single native input element, combined with pseudo and shadow elements. But, like most things these days, it&#8217;s Webkit only.</p> <p>A recurring comment on HN goes something along the lines of:</p> <blockquote> <p>Webkit only? Webkit is the new IE6.</p> </blockquote> <p>But this is quite frankly <em>bullshit</em>. Firefox and Opera still streak ahead in other areas*, but the fact is that Webkit-based browsers consistently implement features we front end devs need on a day-to-day basis. Perhaps that&#8217;s a result of Google employing people like Paul Irish as a developer advocate. Perhaps he is responsible for prioritising features that real front ends like us actually want to use? I can only speculate, but the benefits cannot be denied.</p> <p>So what if you try and build an iOS-inspired toggle switch with a single, native checkbox? Dissecting it mentally, all the pieces seemed to be there. I can use :before and :after pseudo elements to construct the extra visual elements. Maybe I can use data attributes to set the on and off state text? In fact, I even expected Firefox to outshine all other browsers in this test as it would be the only one to animate pseudo elements.</p> <p>But this is the reality.</p> <p><strong>Webkit (Chrome/Safari):</strong></p> <p><img src="http://media.tumblr.com/tumblr_m42af2egfx1qawqhu.png"/></p> <p><strong>Firefox:</strong></p> <p><img src="http://media.tumblr.com/tumblr_m42afe3l6P1qawqhu.png"/></p> <p><strong>Opera:</strong></p> <p><img src="http://media.tumblr.com/tumblr_m42afn0uGp1qawqhu.png"/></p> <hr><p>Hacks I considered to try and get it working:</p> <ul><li><strong>Animating the checkbox element as the toggle handle, along the non animatable pseudo element background.</strong><br/>But this would occur the page to jump around, and is working around the unfortunate ability to animate pseudo elements. </li> <li><strong>Hide the native checkbox and use only two pseudo elements for the effect.</strong><br/>This meant no animation. Probably no text. And if animation of pseudo elements eventually drops, it wouldn&#8217;t be future proof as it would look a bit naff regardless.</li> <li><strong>Use the &lt;label&gt; for the on/off text.</strong><br/>This feels very hacky, and definitely like a compromise. This kind of stuff should ideally be able to plug into any existing solution and work straight away. No modifying of &lt;label&gt;s, just replacement of &lt;input&gt;s. Also, I guess the only way to change the text of the &lt;label&gt; via CSS would maybe be via a :target selector and a content property, which probably wouldn&#8217;t work and would require yet more pseudo elements. Slopsville.</li> <li><strong>Using JavaScript at all.</strong><br/>But that wasn&#8217;t the point of the exercise at all.</li> </ul><p>Anyhoo, the experiment is designed so that the second Firefox and others begin to implement the missing functionality, it should just work.</p> <div><a href="http://taitems.github.com/UX-Lab/CSSInputs/index.html" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/UX-Lab" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></div> <hr><p>* Firefox remains the only browser that can animate pseudo elements, and an Opera nightly is the only browser that currently implements the getUserMedia specification.</p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/23099016111 link http://taitems.tumblr.com/post/23099016111 pubDate Tue, 15 May 2012 11:28:29 GMT title CSS3 Input Styling, A State of the Union - UX Lab 009 2 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value phantomjs description Stomach Contents: Structure - struct value <p><a href="http://phantomjs.org/" target="_blank">PhantomJS</a> is a headless webkit-based browser with all kinds of nifty use cases. In it&#8217;s simplest form, it&#8217;s a javascript-driven web scraper. I&#8217;m writing this <strike>guide</strike> note for any novice users having problems installing it on OS X.</p> <p>Ariya Hidayat wrote instructions on <a href="http://ariya.ofilabs.com/2012/02/phantomjs-and-mac-os-x.html" target="_blank">installing PhantomJS on OSX</a>, but glosses over one of the most important steps that is assumed knowledge for competent devs. He has made it as simple as possible to download and extract the binary source as an executable, but as new Mac/Unix user I didn&#8217;t understand what was meant by references to changing the PATH.</p> <p>In order to run phantomjs as a command (and therefore pass another file to it), the folder phantomjs is stored in needs to be indexed via PATHs. This means you&#8217;ll be able to: phantomjs helloworld.js. Prior to adding it the PATH reference, phantomjs would not be recognised as a command - or if run from inside the executable, it would result in parse error.</p> <p>So, all you need to do is <a href="http://keito.me/tutorials/macosx_path" target="_blank">add the directory to the PATH variable</a> and you&#8217;ll be good to go.</p> <p>Again:</p> <ol><li><a href="http://code.google.com/p/phantomjs/downloads/list" target="_blank">Download and extract OSX static build</a></li> <li><a href="http://keito.me/tutorials/macosx_path" target="_blank">Add phantomjs directory to PATH variable</a></li> <li>You&#8217;re good to go.</li> </ol><p>This took me way longer to grasp than necessary, so hopefully this helps you avoid making the mistakes I did.</p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/22435182762 link http://taitems.tumblr.com/post/22435182762 pubDate Sat, 05 May 2012 07:40:57 GMT title Installing PhantomJS on OSX for Designers 3 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value iOS 2 Stomach Contents: Structure - struct value jQuery 3 Stomach Contents: Structure - struct value jQuery Mobile 4 Stomach Contents: Structure - struct value Gantt 5 Stomach Contents: Structure - struct value plugin 6 Stomach Contents: Structure - struct value design 7 Stomach Contents: Structure - struct value front ent dev 8 Stomach Contents: Structure - struct value guidelines 9 Stomach Contents: Structure - struct value css 10 Stomach Contents: Structure - struct value html 11 Stomach Contents: Structure - struct value iphone description Stomach Contents: Structure - struct value <h3>iOS Theme for jQuery Mobile</h3> <p>Good news! I&#8217;ve just pushed some major changes for my iOS jQuery Mobile theme. It now works with jQuery Mobile 1.1.0, which was a bit of a struggle. It also forced me to do some major code cleanup, delivering cross browser gradients and various enhancements I had been putting off.</p> <p>A full list of changes and resolved bugs follows:</p> <ul><li><span>Supports <a href="http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/" target="_blank">jQuery Mobile 1.1.0</a> (this was a nightmare)</span></li> <li>Code cleanup more strictly obeys <a href="http://taitems.github.com/Front-End-Development-Guidelines/#cssSection" target="_blank">my coding conventions</a></li> <li>All gradients and effects are now cross browser compatible (<a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues/2" target="_blank">Issue #2</a>)</li> <li>Updated slider toggle to iOS 5 style (<a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues/7" target="_blank">Issue #7</a>)</li> <li>Got dialogs looking as close to native as possible considering jQuery Mobile doesn&#8217;t support overlayed dialogs (they&#8217;re standalone pages) (<a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues/3">Issue #3</a>)</li> </ul><p>The changes have introduced a few minor visual quirks relating to the .ui-focus box shadows etc, but hopefully these will be rectified in the near future.</p> <p><a href="http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></p> <div></div> <hr><h3>jQuery Gantt</h3> <p>I made some minor code changes, but the most important thing here was the addition of documentation. The original creator didn&#8217;t provide any, so hopefully this makes a bit more sense. I&#8217;m sure I&#8217;ve missed something here and there (holidays?), but I&#8217;ll fix that up as we go.</p> <p>The changes:</p> <ul><li>Added documentation and better demo with bootstrap popovers</li> <li>Works with latest jQuery 1.7.2</li> <li>Merged pull request for &#8220;undefined error&#8221;, <a href="https://github.com/taitems/jQuery.Gantt/commit/e4cfe12a07f39f7233063a8cea0f19612b3ed53d" target="_blank">thanks Nathan Colgate</a>.</li> <li>Code and folder cleanup</li> </ul><div> <div><a href="http://taitems.github.com/jQuery.Gantt/" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/jQuery.Gantt" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></div> <div></div> <hr></div> <h3>Front End Development Guidelines</h3> <p>The page now passes HTML5 validation. Apparently some people care about this.</p> <div><a href="http://taitems.github.com/Front-End-Development-Guidelines/" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/Front-End-Development-Guidelines" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></div> <div></div> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/22042300212 link http://taitems.tumblr.com/post/22042300212 pubDate Sun, 29 Apr 2012 11:31:52 GMT title Repository Updates 4 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value bagels description Stomach Contents: Structure - struct value <img src="http://25.media.tumblr.com/tumblr_m30y7o1DMN1qadqixo1_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m30y7o1DMN1qadqixo2_500.jpg"/><br/> <br/><p>Made my first bagels. Boiled ‘em and everything.</p> <p>They taste amazing.</p> <p>Shit yeah!</p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/21773207899 link http://taitems.tumblr.com/post/21773207899 pubDate Wed, 25 Apr 2012 07:31:00 GMT title Made my first bagels. Boiled ‘em and everything. They... 5 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value bike 2 Stomach Contents: Structure - struct value bicycle 3 Stomach Contents: Structure - struct value apartment 4 Stomach Contents: Structure - struct value space 5 Stomach Contents: Structure - struct value space saver 6 Stomach Contents: Structure - struct value vintage description Stomach Contents: Structure - struct value <img src="http://25.media.tumblr.com/tumblr_m2v886eD4I1qadqixo1_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m2v886eD4I1qadqixo2_500.jpg"/><br/> <br/><p><span>I picked up a new </span><a href="http://cycloc.com/" target="_blank">Cycloc</a><span> from eBay for a slightly better deal than the $110 AUD they seem to go for. A little bit more difficult to put up than expected, mostly owing to some misdirection from a Bunnings employee and a too short drill bit.</span></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/21553652578 link http://taitems.tumblr.com/post/21553652578 pubDate Sun, 22 Apr 2012 05:23:08 GMT title I picked up a new Cycloc from eBay for a slightly better deal... 6 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value ios 2 Stomach Contents: Structure - struct value os x 3 Stomach Contents: Structure - struct value apple 4 Stomach Contents: Structure - struct value ios 6 5 Stomach Contents: Structure - struct value mountain lion 6 Stomach Contents: Structure - struct value rumours 7 Stomach Contents: Structure - struct value leaks 8 Stomach Contents: Structure - struct value patents 9 Stomach Contents: Structure - struct value concepts description Stomach Contents: Structure - struct value <p>Predicting development roadmaps is something best left to the <a href="http://daringfireball.net/" target="_blank">professionals</a>. Consider this list nothing more than a collection of rumours, leaks, patents and the musings of arm chair experts everywhere. Did I miss something? Think you know better? Sound off in the comments.</p> <hr><h3>Siri, Siri, Everywhere</h3> <p>The question is not if Siri will make it on to the remaining devices, but when.</p> <p>Server load and processing power were assumed to be the reason Siri was originally confined to the iPhone 4S. The recent release of the <strike>iPad 3</strike> new iPad only managed to bring Siri Dictation to the fold. So if the next major Apple TV release is expected to feature Siri-driven voice navigation, when can we expect to see Siri adoption across all Mac and iOS products? 2012? 2013? Later?</p> <h4>Siri on the Mac</h4> <p><a href="http://dribbble.com/shots/434145-Siri-on-Mountain-Lion" target="_blank"><img src="http://media.tumblr.com/tumblr_m207qmDnPg1qawqhu.jpg"/></a></p> <p><a href="http://dribbble.com/shots/434145-Siri-on-Mountain-Lion" target="_blank">&#8220;Siri on Mountain Lion&#8221; by Joe Hribar</a></p> <p><a href="http://dribbble.com/shots/305187-Siri-on-OSX" target="_blank"><img src="http://media.tumblr.com/tumblr_m207qwltES1qawqhu.png"/></a></p> <p><a href="http://dribbble.com/shots/305187-Siri-on-OSX" target="_blank">&#8220;Siri on OSX&#8221; by Aaron Hunt</a></p> <h4>Siri on the iPad</h4> <p>Commentators seem to question the use of Siri on the iPad. Some argue that it is something to be used &#8220;on the go&#8221;, not on your lap. Maybe you&#8217;re supposed to feel less odd talking to a phone than a tablet PC? Regardless, Apple is never going to achieve the original <a href="http://www.youtube.com/watch?v=_a0t2Eb7YJk" target="_blank">Knowledge Navigator concept</a> by handicapping devices.</p> <p><a href="http://dribbble.com/shots/485051-Siri-for-iPad-UI-mockup" target="_blank"><img src="http://media.tumblr.com/tumblr_m207r5qSki1qawqhu.jpg"/></a></p> <p><a href="http://dribbble.com/shots/485051-Siri-for-iPad-UI-mockup" target="_blank">&#8220;Siri for iPad UI Mockup&#8221; by Rene Ritchie</a></p> <p><a href="http://dribbble.com/shots/485070-Siri-Mountain-Lion-concept-for-iPad" target="_blank"><img src="http://media.tumblr.com/tumblr_m207rdPQKW1qawqhu.jpg"/></a></p> <p><a href="http://dribbble.com/shots/485070-Siri-Mountain-Lion-concept-for-iPad" target="_blank">&#8220;Siri Mountain Lion Concept for iPad&#8221; by Rene Ritchie</a></p> <p><strong>Likelihood:</strong> Inevitable.</p> <hr><h3>Retina Displays Galore</h3> <p>2012 has already brought about the retina iPad, so it&#8217;s not surprising that the rumour-mill continues to churn out &#8220;clues&#8221; and &#8220;leaks&#8221; regarding retina displays for the Mac. There&#8217;s a few reasons why this isn&#8217;t that unrealistic. Both the advent of Thunderbolt and the latest update to the Ivy Bridge processor allows for the greater through-put required to push that many pixels.</p> <p>The missing piece of the puzzle is already being filled by developers, seemingly of their own accord. GitHub for Mac <a href="https://github.com/blog/1102-github-for-mac-easier-updates" target="_blank">pushed an update</a> with support for HiDPI mode, driven by people using AirDisplay to enable their retina iPad to act as an extra monitor. This is fantastic, and on par with iPad developers who pre-emptively created retina graphics before a retina iPad had been officially confirmed.</p> <p><strong>Likelihood:</strong> Inevitable.</p> <p><strong>Further reading:</strong></p> <ul><li><a href="http://www.macrumors.com/2012/03/23/hidpi-retina-images-mountain-lion-already-enabled-10-7/" target="_blank">HiDPI Retina Images in Mountain Lion Messages.app</a> - but lets not forget the @2x iBooks graphics that leaked before the iPad 2, and guess what, no retina iPad 2.</li> <li><a href="http://www.theverge.com/2012/4/3/2922329/air-display-ipad-app-update-retina-support-hidpi" target="_blank">Using AirDisplay as a secondary (retina) Mac display.</a></li> </ul><hr><h3>Rethinking the Dock</h3> <p>Aside from the addition of &#8220;stacks&#8221;, the OSX dock remains relatively unchanged. Personally, I&#8217;m a big fan of using the <a href="http://iconfactory.com/search/freeware/flurry" target="_blank">Flurry icon set</a> by IconFactory to achieve a more iOS look and feel. Lion brought about the circular icon and user avatar styling that made this redundant, but I&#8217;m looking forward to either visual convergence or a strong divergence. All rounded rectangles, or all circular icons.</p> <p>The concept below includes a video showing a different take on spatial depth.</p> <p><a href="http://dribbble.com/shots/469480-Mountain-Lion-Dock-Concept" target="_blank"><img src="http://media.tumblr.com/tumblr_m23c7wlaFx1qawqhu.png"/></a></p> <p><a href="http://dribbble.com/shots/469480-Mountain-Lion-Dock-Concept" target="_blank">&#8220;Mountain Lion Dock Concept&#8221; by Marshall Bock</a></p> <p><strong>Likelihood:</strong> Unknown.</p> <hr><h3>Near Field Communication</h3> <p>The original concept of Square&#8217;s credit card system, and in turn the development of Card Case, seem to fill a void caused by the omission of NFC. The use of geolocation to tie Card Case users to stores always seemed like a bit of a hack, albeit necessary. But with the granting of the iWallet patent in March, is Apple going to enter the mix in a very big way?</p> <p>A hardware advantage is indisputable. But just because Apple sets its sights on an existing app (eg: Reader/Reading List vs. Instapaper/Readability), doesn&#8217;t mean the show is over. A designated application will always have the potential to beat out a vain attempt. Square is one of the most innovative and exciting startups I&#8217;ve ever come across. I don&#8217;t think they have much to worry about.</p> <p>On the other hand, it&#8217;s not unheard of for Apple to release a product with neutered hardware. It&#8217;s my understanding that earlier iPhones and Apple TVs had bluetooth chips included, but disabled pending software updates. Recent reports state that the latest Apple TV model has a dual core processor, but is only using one at most. Perhaps the iPhone 5 will roll out with a dormant NFC chip, while Apple waits for vendors and the infrastructure to catch up.</p> <hr><h3>Less Carrier Dependence</h3> <p>Before Apple announced it&#8217;s first dividend since 1995, people speculated what Apple would do with its billions. &#8221;I hope they buy AT&amp;T&#8221;, they said. &#8221;I hope they become a carrier&#8221;, they said. But why would you want anything to do with a carrier in this day and age?</p> <p>iMessage is doing a fantastic job of replacing SMS and MMS messages.</p> <p>Facetime, currently and foreseeably restricted to WiFi, has video calling locked down.</p> <p>The only remaining piece of the puzzle involves phone calls, and VOIP offers a lot. If Microsoft now owns Skype, will Apple roll their own solution?</p> <p>For a while now, the only thing separating an iPod Touch from an iPhone has been the whole, you know, <em>phone</em> thing. I think it&#8217;s inevitable that the devices will merge as one ubiquitous internet-based method of communication. When entire cities like San Fran and Seattle are offering city-wide WiFi, where does the carrier fit in? Oh damn, that&#8217;s right, they&#8217;ve got the 4G LTE.</p> <p><strong>Likelihood:</strong> Theoretical only.</p> <hr><h3>Mobile Safari Closing More Gaps</h3> <p>As a web dev, iOS 5 had me seriously fist pumping. It <a href="http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/" target="_blank">added missing features</a> as well as fixing some critical user experience bugs that prevented web apps from behaving like native apps. Position fixed support was absolutely critical, and jQuery Mobile benefited hugely from that. I really hope iOS 6 continues to enable web devs to deliver a rich experience by extending more hardware and software APIs to mobile Safari.</p> <p>Currently PhoneGap, Titanium and other app wrappers are the solutions to bridge the many gaps. They&#8217;re worth checking out if you absolutely must have access to the camera, vibration etc. immediately.</p> <ul><li>Safari in Mountain Lion will allow websites to push notifications to Notification Center. Maybe mobile Safari will do the same?  Until then, <a href="http://taitems.github.com/UX-Lab/iOSNotification/index.html" target="_blank">fake it till they make it</a>.</li> <li>Expect Apple to eventually implement <a href="http://caniuse.com/stream" target="_blank">getUserMedia</a>, although Opera is the only browser to have supported this outside of a nightly build.</li> <li>An exact replication of pull to refresh isn&#8217;t possible because of when Safari fires scroll events (hint: rarely). Until then, this is a <a href="http://codecanyon.net/item/jquery-pull-down-to-refresh/1157148" target="_blank">viable alternative</a>. </li> <li>Vibration API, photo stream access and whatever else is still missing.</li> </ul><div><strong>Likelihood:</strong> Bits and bobs. Dribs and drabs.</div> <hr><h3>It&#8217;s Time to Unplug the Antenna</h3> <p>There&#8217;s no doubt a complete shake up of the television industry is on its way. I&#8217;m really excited at the prospect of pulling the antenna out of the back of my TV and never looking back. All the innovative media startups like Netflix and Hulu never made it to Australia, at least in their true form.</p> <p>I&#8217;ve tried writing this up as a separate blog post about 5 times now. It&#8217;s very difficult to articulate just how important this is, and how it will shake up the entire media industry. Apple has the cash to ensure the production quality is world class. They&#8217;ve got the diversity in TV shows and movies to build comedy or action &#8220;channels&#8221; and such a massive archive of music videos that replicating MTV, VH1 etc would be a cinch.</p> <p>In terms of hardware, who knows if we&#8217;ll see a greater than 1080p resolution any time soon. Factors like viewing distance mean that most 1080p TVs are already retina-ish in quality. Digital TV here in Australia barely makes it above 720p, which is incredibly frustrating. On the other hand, Bluray or even true HD TV content always feels so unnatural, so I&#8217;m not sure of the appeal. But regardless, if anyone was going to push 4K quality film down the tubes, it would be Apple. They have their own distribution channels in the form of iTunes, working around TV bandwidth limitations - as well as a massive media library which would presumably include access to 4K film.</p> <p><strong>Likelihood:</strong> Long overdue, but we&#8217;ll believe it when we see it.</p> <hr><h3>Apps on the TV</h3> <p>Who knows if we&#8217;ll see this before or after a major overhaul, but it&#8217;s coming regardless. Apps on the Apple TV are possible if you&#8217;re willing to Jailbreak, and the image below hints at a browser being available in the latest JB.</p> <p><img src="http://media.tumblr.com/tumblr_m27mf0FMiy1qawqhu.png"/></p> <p><strong>Likelihood:</strong> Inevitable, already possible on jail broken devices.</p> <div><hr><h3>&#8220;Native&#8221; Facebook App</h3> <p>Facebook <a href="http://www.madebysofa.com/#facebook" target="_blank">acquired</a> the Mac software house <a href="http://www.madebysofa.com/" target="_blank">Sofa</a> back in 2011. They create beautiful UIs and were definitely a good pick up. So what will they be tasked with doing at Facebook? Pundits guessed native Facebook app, but we&#8217;re yet to see any information confirming this. The problem with this is that it flies in the face of Facebook&#8217;s current direction with Project Spartan. A native application would have to be a simple wrapper around a web view, as that&#8217;s what both the iOS apps currently are.</p> <p><a href="http://dribbble.com/shots/97053-Facebook-for-Mac" target="_blank"><img src="http://media.tumblr.com/tumblr_m27mmqIyLH1qawqhu.png"/></a></p> <p><a href="http://dribbble.com/shots/97053-Facebook-for-Mac" target="_blank">&#8220;Facebook for Mac&#8221; by Matt</a></p> <p><a href="http://dribbble.com/shots/206694-Facebook-App-for-Mac-OS-X-Lion" target="_blank"><img src="http://media.tumblr.com/tumblr_m27mp1v6621qawqhu.jpg"/></a></p> <p><a href="http://dribbble.com/shots/206694-Facebook-App-for-Mac-OS-X-Lion" target="_blank">&#8220;Facebook App for Mac OS X Lion&#8221; by Andrianov Oleg</a></p> <p><strong>Likelihood:</strong> Unknown, counter-intuitive.</p> <hr><h3>GitHub → Notification Center</h3> <p>There are already some scripts for automating <a href="http://thechangelog.com/post/1170147881/github-notifier-growl-notifications-for-github" target="_blank">Growl notifications</a> when Git repositories are pushed, pulled or committed to. I can imagine GitHub taking advantage of the new Notification Center framework in Mountain Lion to deliver these messages. Whether this spells the death of Growl remains to be seen. While features such as &#8220;Reading List&#8221; in Safari were seen as a direct attack on independent app developers such as Instapaper, it is still a clear choice for the pro user.</p> <p><strong>Likelihood:</strong> Would be awesome.</p> <hr><h3>Form Factor Changes</h3> <p>Budget 7&#8221; iPad?</p> <p>Teardrop shaped iPhone 5?</p> <p>Macbook Air sized Pros?</p> <p><em>Can&#8217;t say I really care.</em></p> <hr><h3>One More Thing - Calculator (and everything else) Facelift</h3> <p>Why not? Apple has demonstrated it is committed to bringing more useful iOS apps such as Reminders and Notes to the Mac with Mountain Lion. It would great to see the Braun-inspired look of the iOS calculator come over. And hey, Apple also loves to keep a little something up its sleeve for when media events look a bit thin. Just look at <em>Cards.app</em>.</p> <p><a href="http://dribbble.com/shots/290698-Mockup-Calculator" target="_blank"><img src="http://media.tumblr.com/tumblr_m23bs9vk6H1qawqhu.png"/></a></p> <p><a href="http://dribbble.com/shots/290698-Mockup-Calculator" target="_blank">Mockup Calculator by Susumu Yoshida</a></p> </div> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/21292967723 link http://taitems.tumblr.com/post/21292967723 pubDate Tue, 17 Apr 2012 23:34:00 GMT title iOS 6, Mountain Lion and Beyond 7 Stomach Contents: Structure - struct description Stomach Contents: Structure - struct value <img src="http://25.media.tumblr.com/tumblr_m2mbqgfWms1qadqixo1_500.jpg"/><br/> <br/><img src="http://24.media.tumblr.com/tumblr_m2mbqgfWms1qadqixo2_500.jpg"/><br/> <br/><p>Just a couple of shots from Hot Air Ballooning the other week ;)</p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/21262251873 link http://taitems.tumblr.com/post/21262251873 pubDate Tue, 17 Apr 2012 10:00:52 GMT title Just a couple of shots from Hot Air Ballooning the other week ;) 8 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value jquery 2 Stomach Contents: Structure - struct value mobile 3 Stomach Contents: Structure - struct value jquery mobile 4 Stomach Contents: Structure - struct value ios 5 Stomach Contents: Structure - struct value design 6 Stomach Contents: Structure - struct value css3 description Stomach Contents: Structure - struct value <p>I haven&#8217;t touched the iOS inspired jQuery Mobile theme in quite a while, but a few of you have been messaging, mailing at tweeting at me asking if I&#8217;ll support the jQuery Mobile 1.0 build. And&#8230;.. it&#8217;s done. Here&#8217;s the list of changes:</p> <ul><li>Updated to <a href="http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/" target="_blank">jQuery Mobile 1.0.1</a> build</li> <li>Fixed graphical issues stemming from this: <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues/23" target="_blank">#23</a>, <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues/24" target="_blank">#24</a> and <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues/25" target="_blank">#25</a></li> <li>Page buttons now take on gradient-less style (previously only &lt;a&gt; tags)</li> <li>Merged a <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/pull/22" target="_blank">pull request</a> related to a button icon bug fix</li> </ul><p>As always, the demo is up to date and available.</p> <p><a href="http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/20768414285 link http://taitems.tumblr.com/post/20768414285 pubDate Mon, 09 Apr 2012 07:15:57 GMT title jQuery Mobile 1.0.1 - iOS Theme Compatible 9 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value bootstrap 2 Stomach Contents: Structure - struct value twitter 3 Stomach Contents: Structure - struct value javascript 4 Stomach Contents: Structure - struct value jquery 5 Stomach Contents: Structure - struct value css 6 Stomach Contents: Structure - struct value js 7 Stomach Contents: Structure - struct value plugin 8 Stomach Contents: Structure - struct value ux 9 Stomach Contents: Structure - struct value ux lab description Stomach Contents: Structure - struct value <p>I love the Instapaper-style footnotes/endnotes that came about with the last major update. Here they are in web form, as a jQuery/Bootstrap plugin. Unfortunately there&#8217;s a dependency upon Bootstrap CSS/JS, but such is life. It&#8217;s retina ready too - as everything else should be these days.</p> <p>Here it is in action:</p> <p><img src="http://media.tumblr.com/tumblr_m26yc7jqVw1qawqhu.png"/></p> <p>Documentation and options are available on the demo page.</p> <p>It also has its own <a href="https://github.com/taitems/bootstrap.footnotes.js" target="_blank">GitHub repository</a>.</p> <p><a href="http://taitems.github.com/UX-Lab/BootstrapFootnotes/index.html" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/bootstrap.footnotes.js" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/20757542878 link http://taitems.tumblr.com/post/20757542878 pubDate Mon, 09 Apr 2012 03:02:00 GMT title bootstrap.footnotes.js - UX Lab 008 10 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value ios 2 Stomach Contents: Structure - struct value iphone 3 Stomach Contents: Structure - struct value ipad 4 Stomach Contents: Structure - struct value css3 5 Stomach Contents: Structure - struct value javascript 6 Stomach Contents: Structure - struct value library 7 Stomach Contents: Structure - struct value jquery 8 Stomach Contents: Structure - struct value css 9 Stomach Contents: Structure - struct value 3d 10 Stomach Contents: Structure - struct value github description Stomach Contents: Structure - struct value <p>I thought I&#8217;d build a facsimile iOS notification plugin for shits and giggles. It&#8217;s pretty much the exact opposite of a good UX, but it&#8217;s more of a proof of concept than anything else.</p> <p><img src="http://media.tumblr.com/tumblr_m1n710CCcz1qawqhu.png"/></p> <ul><li>It&#8217;s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions. </li> <li>It has built in retina icon handling.</li> <li><a href="http://taitems.github.com/Front-End-Development-Guidelines/#accessibilityMiddleMouse" target="_blank">Doesn&#8217;t break middle mouse clicks</a> when using a URL.</li> <li>Passes JSHint.</li> <li>It works with Chrome, Safari, Firefox and I believe Opera, but I haven&#8217;t tested.</li> </ul><p>Documentation and options are available on the demo page.</p> <p>It also has its own <a href="https://github.com/taitems/ios.notify.js" target="_blank">GitHub repository</a>.</p> <p><a href="http://taitems.github.com/UX-Lab/iOSNotification/index.html" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/UX-Lab" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/20267553455 link http://taitems.tumblr.com/post/20267553455 pubDate Sun, 01 Apr 2012 03:50:17 GMT title HTML iOS Notifications - UX Lab 007 11 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value css 2 Stomach Contents: Structure - struct value css3 3 Stomach Contents: Structure - struct value html 4 Stomach Contents: Structure - struct value ux 5 Stomach Contents: Structure - struct value javascript 6 Stomach Contents: Structure - struct value experiment 7 Stomach Contents: Structure - struct value dribbble 8 Stomach Contents: Structure - struct value ui 9 Stomach Contents: Structure - struct value design description Stomach Contents: Structure - struct value <p>I posted the following experiment as a way of demonstrating just how far the line has blurred between web based animation and OS based animation. I saw Dribbble shots (<a href="http://dribbble.com/shots/209716-Calendar-Idea" target="_blank">one</a> and <a href="http://dribbble.com/shots/478763-UI-Abstraction" target="_blank">two</a>) by Indian designer <a href="http://dribbble.com/pranav" target="_blank">Pranav Pramod</a> and was inspired to replicate the effect in CSS3.</p> <p><img src="http://media.tumblr.com/tumblr_m1qjl1MCCG1qawqhu.png"/></p> <p>Unfortunately nothing is ever as easy as it seems. If it was, someone else would have already posted a similar effect. The problem is that when animating something with a 3D transform with a forced perspective, there is no way to measure or mirror the actual height represented in the browser using CSS. If you animate the parent element from 0px in height to 30px, it&#8217;s a straightforward linear animation. The 3D transform, on the other hand, changes on a non-linear scale because of the perspective.</p> <p>There are two solutions, <em>neither of which are desirable</em>.</p> <p>The first involves JavaScript, which frankly I had tried to avoid. In this example, the animation is triggered by the addition of a CSS class via JavaScript - but could just as easily be bound to an :active:target CSS event. The only way to get the actual browser rendered height of the element is to get it via JavaScript with the obj.clientHeight getter. While discussion pointed to wrapping the object in a parent element and not needing JavaScript at all, this does not work in all browsers.</p> <p>Instead the JavaScript method involves binding a function with requestAnimationFrame which sets the parent objects height to mirror the calculated height of the transformed object. Accurate, but if we wanted to perform calculations many times per second, why did we bother animating with CSS at all?</p> <p>The other method, considerably less accurate and very fiddly, is to match the easing or timing of the two animations. It may be possible to create a custom timing function using cubic-bezier which matches the rate of easing of a 30px tall object, rotating from -90deg to 0deg, with a perspective of 400 units. But why would you? That&#8217;s shit house.</p> <p>Maybe in this instance a flat out Canvas animation would have been much more sensible. You&#8217;re still performing a function every &#8216;x&#8217; milliseconds, but at least the canvas itself may be hardware accelerated. Until CSS animation matures, we will most likely have to abuse the JavaScript add-ons such as the one described earlier. Or even better yet, sever the ties with HTML and CSS and - get this right - use graphical languages for what they&#8217;re intended.</p> <p><strong>Ninja Edit:</strong> Also, you can&#8217;t yet animate background gradients so the whole 3D effect on the depth of the flaps is kind of impossible for now.</p> <p><strong>Sad-face Edit:</strong> The second I posted this, someone posted pretty much the exact same thing to Hacker News in a much more polished way. Check out <a href="https://developer.mozilla.org/en-US/demos/detail/paperfold-css/launch" target="_blank">Paperfold CSS</a>.</p> <p><a href="http://taitems.github.com/UX-Lab/3DAccordion/index.html" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/UX-Lab" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/20267547479 link http://taitems.tumblr.com/post/20267547479 pubDate Sun, 01 Apr 2012 03:50:00 GMT title 3D Accordion Effect - UX Lab 006 12 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value iphone 2 Stomach Contents: Structure - struct value ios 3 Stomach Contents: Structure - struct value cydia 4 Stomach Contents: Structure - struct value app 5 Stomach Contents: Structure - struct value idea description Stomach Contents: Structure - struct value <img src="http://24.media.tumblr.com/tumblr_m16ivb3fov1qadqixo1_500.jpg"/><br/><br/><p>Imagine every time a phone call came from an unsaved, non-private number it did a quick API call to the numerous crowd-sourced websites such as <a href="http://whocallsme.com/" target="_blank">WhoCallsMe</a> or <a href="http://www.callercomplaints.com/" target="_blank">Caller Complaints</a>.</p> <p>Someone build this, if it doesn’t already exist on Cydia that is!</p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/19622368954 link http://taitems.tumblr.com/post/19622368954 pubDate Tue, 20 Mar 2012 10:41:10 GMT title Imagine every time a phone call came from an unsaved,... 13 Stomach Contents: Structure - struct description Stomach Contents: Structure - struct value <iframe width="400" height="225" src="http://www.youtube.com/embed/3NmTls6gQkk?wmode=transparent&autohide=1&egm=0&hd=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&showsearch=0" frameborder="0" allowfullscreen></iframe><br/><br/><p>I’ll never understand the anti mining tax commercials, but this one just does my head in.</p> <p><em>You can’t take your money with you. </em></p> <p><em>We’re practically giving it away to anyone willing to work for it. </em></p> <p><em>But you can get fucked if you even think of taxing the enormous profits we’re generating.</em></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/19620738294 link http://taitems.tumblr.com/post/19620738294 pubDate Tue, 20 Mar 2012 08:55:32 GMT title I’ll never understand the anti mining tax commercials, but... 14 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value vintage 2 Stomach Contents: Structure - struct value bike 3 Stomach Contents: Structure - struct value peugeot 4 Stomach Contents: Structure - struct value repco 5 Stomach Contents: Structure - struct value respray description Stomach Contents: Structure - struct value <img src="http://25.media.tumblr.com/tumblr_m12596RzYX1qadqixo1_500.jpg"/><br/><br/><p>Hooray! Mark from <a href="http://melbournevintagebikes.blogspot.com.au/" target="_blank">Wheels & Dames</a> has done a great job restoring my Peugeot racer back to (a slightly different) former glory. He stripped back the surface rust, powder coated the frame and applied the decals Lauren bought for me. He replaced derailers and cabling where he could (it was buggered) and polished the chrome. I couldn’t be happier.</p> <p>I’ve posted about Mark’s work before, because he also built Lauren’s <a href="http://taitems.tumblr.com/post/10782708549/this-is-laurens-new-bike-that-we-picked-up-monday" target="_blank">vintage Repco</a>.</p> <p><img height="330" src="http://media.tumblr.com/tumblr_m12spoqspK1qawqhu.jpg" width="500"/></p> <p><img height="330" src="http://media.tumblr.com/tumblr_m12spvDdn21qawqhu.jpg" width="500"/></p> <p><img height="330" src="http://media.tumblr.com/tumblr_m12sr4CgHJ1qawqhu.jpg" width="500"/></p> <p><img height="330" src="http://media.tumblr.com/tumblr_m12ssgCmqL1qawqhu.jpg" width="500"/></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/19538202823 link http://taitems.tumblr.com/post/19538202823 pubDate Sun, 18 Mar 2012 22:28:02 GMT title Hooray! Mark from Wheels & Dames has done a great job... 15 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value inspiration 2 Stomach Contents: Structure - struct value design 3 Stomach Contents: Structure - struct value innovation 4 Stomach Contents: Structure - struct value development 5 Stomach Contents: Structure - struct value quotes description Stomach Contents: Structure - struct value <iframe src="http://player.vimeo.com/video/36579366" width="400" height="225" frameborder="0"></iframe><br/><br/><p>You may have come across the work of <a href="http://worrydream.com/" target="_blank">Bret Victor</a> before. If not, prepare to lose a substantial part of your day investigating one of the most inspiring tech innovators of today. Not only does the following presentation challenge the mental model behind almost every IDE in the market today, it exposes the fundamental flaw in how we approach problems. It also helps identify those who had that special x-factor in devising solutions by understanding the motivating principles of users when faced with a problem.</p> <p>It makes me think of the particularly over-used but relevant quote:</p> <blockquote> <p><span>“If I had asked people what they wanted, they would have said faster horses.” </span><br/><span>― </span><a href="http://www.goodreads.com/author/show/203714.Henry_Ford">Henry Ford</a></p> </blockquote> <p>If you want to see some of Bret’s work in action but don’t know where to begin on his website, I highly recommend you check out his <a href="http://worrydream.com/Tangle/" target="_blank">Tangle</a> project.</p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/18819359764 link http://taitems.tumblr.com/post/18819359764 pubDate Tue, 06 Mar 2012 00:49:02 GMT title You may have come across the work of Bret Victor before. If not,... 16 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value diatribe 2 Stomach Contents: Structure - struct value ios 3 Stomach Contents: Structure - struct value advertising 4 Stomach Contents: Structure - struct value apps description Stomach Contents: Structure - struct value <p>The biggest benefit I get from iOS is difficult to quantify. It&#8217;s not a glorious, tangible feature that I can show off to friends and family. In fact it&#8217;s the absence of something that has changed the way I consume content. <strong>It&#8217;s advertising</strong>, and the lack there-of.</p> <p>Websites take off unexpectedly. User numbers boom. Weekend projects demand major man-hours. Scalable systems never seem to. Ensuring uptime and a good user experience means more, more, more. More developers, designers, team leads, infrastructure&#8230; Yikes! It all costs money, and wait, we&#8217;re providing a free service? How can you monetize what is sometimes simply a collection of words and data?</p> <p>I don&#8217;t know. It sounds hard. Let&#8217;s <em>slap an ad on it™</em>.</p> <p>And what if these words and data can be obtained elsewhere, just not in the same timely fashion or accuracy? What if you&#8217;re not offering a particularly unique insight on or interpretation of said data?</p> <p>You <em>slap an ad on it™</em>. Great big fucking ads. Everywhere. Obscuring content? No biggie. CPU spiking? Not our problem. The money&#8217;s good, and we don&#8217;t have to think about a business model.</p> <p>Most Australians would agree that <a href="http://theage.com.au/" target="_blank">The Age</a> is probably the worst offender. <a href="http://realestate.com.au" target="_blank">RealEstate.com.au</a> to a lesser degree, too. Essentially anything owned by a media giant struggling to remain relevant in today&#8217;s world. You might have thought these were primarily newspaper and real estate websites, but in reality they&#8217;re nothing more than advertising delivery networks.</p> <blockquote> <p><span>If you&#8217;re not paying for something, you&#8217;re not the customer; you&#8217;re the product being sold.</span></p> </blockquote> <p>But as monolithic companies rush to market with their latest &#8220;me too&#8221; iOS apps, something strange and wonderful happens. In the haste to slap a thin veneer over an API, they&#8217;ve forgotten to translate this horrible user experience over to the mobile device. iOS devices don&#8217;t support Flash, so Advertisers need to find a new way to be obnoxious. Skyscraper and leaderboard ads don&#8217;t particularly mean anything on a 320x480 iPhone. Android has clocked in over 500 different resolutions, good luck designing for that! Apple even gave it a red-hot go with iAds. Thank god that&#8217;s been a failure to date.</p> <p>So it seems that, at least for now, the powers-that-be have lost their way. It&#8217;s been a welcome return to the original purpose these websites existed. So until they figure out how to bugger that up too, let&#8217;s just enjoy the peace and quiet.</p> <blockquote> <p>People are taking the piss out of you everyday. They butt into your life, take a cheap shot at you and then disappear. They leer at you from tall buildings and make you feel small. They make flippant comments from buses that imply you’re not sexy enough and that all the fun is happening somewhere else. They are on TV making your girlfriend feel inadequate. They have access to the most sophisticated technology the world has ever seen and they bully you with it. They are The Advertisers and they are laughing at you.</p> <p>You, however, are forbidden to touch them. Trademarks, intellectual property rights and copyright law mean advertisers can say what they like wherever they like with total impunity.</p> <p>Fuck that. Any advert in a public space that gives you no choice whether you see it or not is yours. It’s yours to take, re-arrange and re-use. You can do whatever you like with it. Asking for permission is like asking to keep a rock someone just threw at your head.</p> <p>You owe the companies nothing. Less than nothing, you especially don’t owe them any courtesy. They owe you. They have re-arranged the world to put themselves in front of you. They never asked for your permission, don’t even start asking for theirs.</p> <p>- Banksy</p> </blockquote> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/18572032891 link http://taitems.tumblr.com/post/18572032891 pubDate Thu, 01 Mar 2012 22:56:40 GMT title A Thin Veneer, Sitting on an API 17 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value JavaScript 2 Stomach Contents: Structure - struct value jQuery 3 Stomach Contents: Structure - struct value jQuery UI 4 Stomach Contents: Structure - struct value toggle 5 Stomach Contents: Structure - struct value switch description Stomach Contents: Structure - struct value <p>The last thing web devs need is another toggle plugin. But this was developed for sites that already run jQuery UI and don&#8217;t want the extra bloat of yet another library. It draws upon the theme <em>.ui-slider</em> for the look and feel, and can be applied to <em>&lt;select&gt;</em>  elements with two child options.</p> <p>Configuration options and examples are contained within the UX Lab page. I guess this warrants it&#8217;s own GitHub repository for change management and issue tracking. I&#8217;ll get around to that eventually.</p> <p><img src="http://media.tumblr.com/tumblr_lzl59adpYG1qawqhu.png"/></p> <p><a href="http://taitems.github.com/UX-Lab/ToggleSwitch/index.html" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/UX-Lab" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/17853682273 link http://taitems.tumblr.com/post/17853682273 pubDate Sun, 19 Feb 2012 00:52:17 GMT title jQuery-UI.toggleSwitch() - UX Lab 005 18 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value jGrowl 2 Stomach Contents: Structure - struct value jQuery 3 Stomach Contents: Structure - struct value JavaScript 4 Stomach Contents: Structure - struct value UX 5 Stomach Contents: Structure - struct value lab description Stomach Contents: Structure - struct value <p>Paul Irish wrote a <a href="https://github.com/paulirish/jquery-idletimer" target="_blank">pretty chill script</a><span> back in 2009 for detecting when a user becomes inactive. It&#8217;s quite ingenious in its simplicity, as the best things usually are. What wasn&#8217;t explained fully is the ways in which this can be used to deliver a better user experience. It&#8217;s fantastic for preventing timed or asynchronous actions when users aren&#8217;t going to benefit from the action.</span></p> <p>This quick little experiment is aimed at demonstrating the concept in the simplest form.</p> <p>A jGrowl notification triggered every &#8216;x&#8217; seconds, or by a server event, isn&#8217;t of much use when the user isn&#8217;t around. They disappear after a few seconds. So instead, if the user is deemed inactive, you should make them &#8220;stick&#8221; or push them to a modal, similar to the loathed Growl notification rollup pictured below.</p> <p><img src="http://media.tumblr.com/tumblr_lzl4r8rUBr1qawqhu.png"/></p> <p>Obviously the linked example isn&#8217;t quite as eloquent, but it&#8217;s not like the Growl rollup was that well received to begin with. See what other cool shit you can come up with.</p> <p><a href="http://taitems.github.com/UX-Lab/PassiveGrowls/index.html" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2oxDe3P1qawqhu.png" width="93"/></a> <a href="https://github.com/taitems/UX-Lab" target="_blank"><img height="29" src="http://media.tumblr.com/tumblr_lnt2p5FsUm1qawqhu.png" width="116"/></a></p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/17853538031 link http://taitems.tumblr.com/post/17853538031 pubDate Sun, 19 Feb 2012 00:49:34 GMT title Idle jGrowl Re-routing - UX Lab 004 19 Stomach Contents: Structure - struct category Stomach Contents: Structure - array 1 Stomach Contents: Structure - struct value design 2 Stomach Contents: Structure - struct value css 3 Stomach Contents: Structure - struct value css3 4 Stomach Contents: Structure - struct value location 5 Stomach Contents: Structure - struct value javascript 6 Stomach Contents: Structure - struct value vcard 7 Stomach Contents: Structure - struct value mini site description Stomach Contents: Structure - struct value <img src="http://25.media.tumblr.com/tumblr_lzbufue9Sc1qadqixo1_500.png"/><br/><br/><p><a href="http://taitbrown.com" target="_blank"><strong>My new personal site is live!</strong></a></p> <p>It’s just a little micro-site tying together a range of social media websites. There’s some fancy coding behind the scenes that predicts where I’m going to be at any given time, because we’re all a walking bell curve. It’s good to get it out the door, because designers are notorious for over-designing and iterating their personal sites.</p> <p>Enjoy,<br/><a href="http://taitbrown.com" target="_blank">taitbrown.com</a> </p> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/17569814536 link http://taitems.tumblr.com/post/17569814536 pubDate Mon, 13 Feb 2012 22:04:28 GMT title My new personal site is live! It’s just a little... 20 Stomach Contents: Structure - struct description Stomach Contents: Structure - struct value <img src="http://24.media.tumblr.com/tumblr_lvmywn0VrQ1qd3rnuo1_500.jpg"/><br/><br/><p><a class="tumblr_blog" href="http://minimalmac.com/post/16599239944/ten-years-of-ipod-design">minimalmac</a>:</p> <blockquote> <p><a class="tumblr_blog" href="http://blog.warbyparker.com/post/14262519766/ten-years-of-ipod-design">warbyparker</a>:</p> <blockquote> <p>Ten years of evolution: 2011 iPod vs. 2001 iPod.</p> </blockquote> <p>Progress.</p> </blockquote> guid Stomach Contents: Structure - struct isPermaLink NO value http://taitems.tumblr.com/post/16602590106 link http://taitems.tumblr.com/post/16602590106 pubDate Fri, 27 Jan 2012 23:37:30 GMT title minimalmac: warbyparker: Ten years of evolution: 2011 iPod vs....
link	http://taitems.tumblr.com/
title	Nothing Insightful
version	rss_2.0

Tait Brown

I'm a UX designer/developer. I make stuff and tweet about shit user experience. http://taitbrown.com

RT @PrathyushPramod: The new Bond teaser trailer is here : http://t.co/OLIcoyB3@taitems

Melbourne, Australia