Problem: jQuery UI doesn't support touch gestures
We are customizing a map application with swipe functionality which is based on some legacy code mash-up with dojo and jquery/jquery ui. Everything was nice and dandy until we tried swiping on the iPad for the first time. Bad awakening. jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that our mouse event simply don't work on touch devices. One might think the jQuery toolkit would take care of it... but no!
Solution A: For every mouse/keyboard event, provide the equivalent touch event: touchstart, touchmove, touchend,...
Solution B: Use a hack called jQuery UI Touch Punch that adds simulated events (that mimic touch events) to your app and respond to the mouse events you already have in your app. It's really simple:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <script src="jquery.ui.touch-punch.js"></script>
Add the jquery and jquery ui libraries (if you don't have them already or if you use older versions) plus the reference to your local copy of the touch-punch file (download the Development version!!)
Solution C: Go to github and get the really nice swipe story map template which works "out of the box" (but didn't satisfy our complex requirements)
When starting a new project it will probably take you at least 15-20 minutes of getting your stuff together. Many times I found that exactly these routine tasks are the most annoying which keep us from being productive (and happy). So, go get the html5boilerplate.com and be happy 🙂
This project by 5 driven guys, Nicolas Gallagher, Hans Christian Reinl, Mathias Bynens, Paul Irish, Cãtãlin Mariş, and Divya Manian is a great starting point for any HTML based web development. Simply awesome!
The boilerplate bundle includes:
- Directory structure (index file, img dir, js dir, css dir, etc.)
- CSS reset using normalize.css
- HTML5 feature detection through Modernizr
- Google Analytics snippet (just replace your own id)
- Other really useful tips and tricks for better development
Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome 🙂 Cheers!
- Cross Browser HTML5 Progress Bars In Depth (by Zoltan “Du Lac” Hawryluk)
- 15 Web Design Trends to Watch Out For in 2012 (by Jake Rocheleau)
- Profiling CSS for fun and profit. Optimization notes (by kangax)
- Google Maps: Designing the Modern Atlas (by Willem Van Lancker)
- Password strength verification with jQuery (by Jim Nielsen)
- 50+ PSD UI Web design elements (by Cameron Chapman)
- How to Develop Your Website’s Tone of Voice (by Ailsa Partridge)
- 25 jQuery image galleries and slideshow plugins (by Cameron Chapman)
- What’s the difference between a Heuristic Evaluation and a Cognitive Walkthrough? (by Jeff Sauro) - great description and overview together with a "What HE & CW have in common" section
- What’s new for designers – Aug 2011 (by Cameron Chapman)
- 40 Absolutely Brilliant Billboard Ads! (by Alvaris Falcon) - yes, simply brilliant, take 1 or 2 minutes and enjoy
- Your Meetings Suck (by Mitch Joel) - Solution: "a meeting cannot exist without a decision to support it that has already been made"
- 30 Beautiful Clean and Simple Web Designs for Inspiration (by Jacob Gube) - inspiration is always welcome, right?
- Strengthening behavioral cues in UX web design with Gestalt principles (by Shell Grenier) - all of reality is experienced and organized perceptually in the simplest and most stable manner possible, web design can utilize this principle
- How To Create a Slick Features Table in HTML & CSS (by Chris Spooner) - very slick 😉
- 10 Absentee UX Features on Top e-Commerce Sites (by Paul Bryan) - co-shopping? en espanol?
- 6 tips to create better one-page websites (by Kendra Gaines)
- 10 Unmissable TED Videos For Designers (by Alvaris Falcon) - love TED, and you should too
- 20 jQuery Tutorials Teaching Super Cool Visual Effects (by Chris Spooner) - that's why you must love jQuery
- Requirements-Driven Software Development Must Die (by Fred Beecher) - nice approach with really good arguments, but with any workflow it seems just a little bit off
- 70+ Awesome Tumblr themes (by Cameron Chapman) - got tumblr? get a theme - and a life 😉 ...and follow me on tumblr
- Examples of Sites where localStorage should or is being used (by Chris Coyier) - localStorage is to HTML5 what isolated storage is to Silverlight
- jQuery plugin: Chosen (by Harvest) - go check it out, nothing else to say
- Freelance Web Development: 9 Tips for Better Project Management (by Kelli Shaver) - you do freelance work? enhance your productivity with these tips, very nice!
- 10 Intermediate and Advanced Tips from PHP Masters (by Jolie O'Dell) - experts offer their advise; nice compilation.
- Beautiful (Free) Fonts for Titles and Headlines (by bellefoong) - niiice.
- Ways to Horrify Website Designers (by Alexander Dawson) - right in time for Halloween 😉
- Design is Choice (by Dmitry Fadeyev) - Dmitry's take on Google removing the "http://" portion in Chrome's address bar
- The Seven Deadly Sins of Design (by Rob Bowen) - a funny take on seven deadly sins.
- Google Chrome Extensions for Web Design Students (by Julia May ) - Ctrl/Cmd + Shift + J ... that's all I say...
- How to Design the Perfect Business Card (by Rob Bowen) - Great article that serves as categorization and motivation at the same time.
- jQuery 1.4.4 Released (by Addy Osmani) - may I introduce: .fadeToggle() - with 1.5 coming next year.
Anything I've missed?
Post it in the comments or drop me a note.