RemoteSynthesis

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

Brian Rinaldi, content and community manager at Adobe, on development and technology topics including HTML5, JavaScript, CSS3, Apache Flex, Adobe ColdFusion and AIR.

encoding

UTF-8

generator

Mango 1.6

item

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

I obviously don't keep any statistics on this type of information, but just looking down the list of posts from this past week I feel safe is calling this the busiest week since I started doing this post many months ago. The topics were varied from discussions of JavaScript frameworks like Ember and Require to CSS pre processing with LESS and SASS to a variety of pure JavaScript and CSS tutorials. I know there's a lot of reading here, but trust me that I do my best to ensure that anything that makes this list is worth the time. Tutorials A good post by Joshua Bixby on ways to mitigate the performance risk of loading third-party JavaScript libraries. <a href="http://j.mp/KwA49k">Has your site's third-party content gone rogue? Here's how to regain control.</a> A great site by Dave DeSandro offering an intro to CSS 3D transforms with plenty of example code. <a href="http://j.mp/JTt0T3">Intro to CSS 3D transforms</a> Nicholas Zakas continues his tutorial on working with files in JavaScript by reading data using FileReader. <a href="http://j.mp/Mk5Eb5">Working with files in JavaScript, Part 2: FileReader</a> Learn to implement common JavaScript design patterns including adapter, decorator and factory by Joe Zim <a href="http://j.mp/JQTNiO">JavaScript design patterns – Part 2: Adapter, decorator, and factory</a> A good post with lots of great tips from Nicole Sullivan on cross-Browser debugging your CSS. <a href="http://j.mp/IUGHye">Cross-Browser Debugging CSS</a> Raymond Camden shows how he used key range objects to filter IndexedDB data and create a filter as you type interface. <a href="http://j.mp/IUFqam">Adding "Filter as you type" support to IndexedDB</a> A really slick animated annotation overlay effect using CSS3 by Mary Lou on Codrops <a href="http://j.mp/JbWRs0">Annotation Overlay Effect with CSS3</a> Another beginner discussion on understanding JavaScript prototypes, this one by DailyJS. It's a popular topic but still a worthwhile one. <a href="http://bit.ly/Lu5xKS">JS101: Prototypes</a> Umar Hansa posts a good tutorial on flowing content using CSS Regions. <a href="http://bit.ly/Lu8dYX">Diving Into CSS Regions</a> See how to create some really nice animated 3D bar chart using CSS3 in this tutorial by Sergey Lukin for Codrops. <a href="http://bit.ly/KrY7k1">Animated 3D Bar Chart with CSS3</a> Frameworks and Libraries A great beginner's guide and sample app for the Ember.js JavaScript framework from Andy Matthews. <a href="http://j.mp/J9wJx1">Flame on! A beginner's guide to Ember.js</a> Andrew Burgess posts a tutorial to get you started with Crockford's JSCheck spec-driven testing tool. <a href="http://bit.ly/Lu0AS0">Meet Crockford's JSCheck</a> Eric Feminella shows how to add and organize dependencies using the RequireJS JavaScript framework <a href="http://bit.ly/JmSgT1">Organizing Require JS Dependencies</a> A screencast by Chris Coyier on how to get started with CSS preprocessing using SASS, Jade and CodeKit. <a href="http://j.mp/JQgdAB">#111: Get Yourself Preprocessing in Just a Few Minutes</a> Chris Coyier compares SASS and LESS for CSS preprocessing and decides the winner is SASS - though his full answer isn't quite so simple. <a href="http://bit.ly/Lu9dw0">SASS vs. LESS</a> Good tutorial from Danny Croft on unit testing in JavaScript with PhantomJS headless WebKit and CasperJS for navigation scripting. <a href="http://bit.ly/KrTtCJ">Front-end Unit Testing with JavaScript</a> Mobile Andy Matthews on how to dynamically create radio buttons in jQuery Mobile with Mustache templates. <a href="http://bit.ly/Lu1iih">Dynamically creating jQuery Mobile radio buttons with Mustache</a> Christophe Coenraets shows a simple offline data synchronization strategy for mobile web and PhoneGap apps <a href="http://j.mp/LTinyF">Simple Offline Data Synchronization for Mobile Web and PhoneGap Applications</a> Andy Matthews released a new jQuery Mobile listview sorting plugin called jQM TinySort <a href="http://j.mp/Mk3KHt">New jQuery Mobile listview sorting plugin jQM TinySort</a> New and Updated Frameworks and Libraries lostorage.js is another HTML5 client-side storage microlibrary supporting localStorage and sessionStorage <a href="http://j.mp/IYABvq">lostorage.js</a> Vert.x is a server-side technology that lets you write your application components in JavaScript, Ruby, Groovy or Java <a href="http://j.mp/JQd7wz">Vert.x- Effortless asynchronous application development for the modern web and enterprise</a> Terrence Ryan created PhoneGap Starter Productivity project on GitHub with ANT tasks to improve PhoneGap Build workflow <a href="http://j.mp/MdhOT1">PhoneGap Starter Project - Productivity</a> leFunc provides type checking for functions and function overloads in JavaScript. <a href="http://j.mp/KWjCL7">leFunc</a> LLJS is another dialect that compiles to <a href="http://bit.ly/KrTtCJ">J</a>avaScript with a C-like type system with manual memory management. <a href="http://bit.ly/KrTSFa">LLJS : Low-Level JavaScript</a> Javascript MESS is an attempt to post the MESS open-source multi-system emulator to JavaScript. <a href="http://bit.ly/Lu4xpT">Javascript Hero: Success / Your Big Moment</a> Etc. Apparently Google now offers a web-based JavaScript file and project editor as part of Google Drive. <a href="http://j.mp/MlmTsl">Welcome to Google Docs</a> A good review of the status of proposals for supporting responsive images in HTML5 by Mat Wilto. <a href="http://j.mp/Mk9D7l">Responsive Images and Web Standards at the Turning Point</a> A web-based JavaScript to CoffeeScript syntax converter. <a href="http://j.mp/JQdbMW">javascript to coffeescript</a> The GreenSock Animation Platform now supports both JavaScript and ActionScript. <a href="http://bit.ly/Lu43Aj">Announcing GreenSock Animation Platform (GSAP) v12, now with tangy JavaScript flavor!</a> While admitting that it is still a super-beta (and technically still not intended for general use), Kevin Sweeney does an early review of Brackets for CreativeJS. <a href="http://bit.ly/Lu6hzs">Brackets Review</a>

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-may-14-2012

link

http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-may-14-2012

pubDate

Mon, 21 May 2012 15:00:17 GMT

title

Best of JavaScript, HTML5 & CSS3 - Week of May 14, 2012

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

One of the best things about my job with the Adobe Developer Connection is that I get to work with a ton of great authors writing about topics that I personally care about. Over the past months, we've already managed to publish a long list of fantastic tutorials and articles on JavaScript and mobile development using web standards and we've got a lot more in the pipeline that I am very excited about. Nonetheless, one thing we aren't always good at, but working to improve, is offering you a way to easily find these articles, especially once they are no longer new. Sure, we have a <a href="http://www.adobe.com/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_javascript.tse.html">tag browser</a>, but you would be forgiven for not knowing it existed prior to today. You can also follow our articles via <a href="http://feeds.feedburner.com/developer_center_tutorials">RSS</a> but, at the moment, there's no way to do so by topic (as far as I know). To try to temporarily remedy this, I wanted to share with my readers some of our recent articles covering JavaScript and mobile. While this isn't every article and video the ADC published on these these topics, it is every one I have personally recruited for our site - and I am, quite honestly, proud of every one. You can also learn about new articles via our <a href="https://blogs.adobe.com/adc/">ADC blog</a>, as I post the "story" of each one as they are published. Hopefully you've found these articles useful - and will check the <a href="http://www.adobe.com/devnet/html5.html">HTML5 and CSS3 developer center</a> each week for new articles like these. General JavaScript Development <a href="http://www.adobe.com/devnet/html5/articles/javascript-object-creation.html">JavaScript object creation</a> by Keith Peters <a href="http://www.adobe.com/devnet/html5/articles/object-types-in-javascript.html">Object types in JavaScript</a> by Keith Peters <a href="http://www.adobe.com/devnet/html5/articles/javascript-design-patterns-pt1-singleton-composite-facade.html">JavaScript design patterns – Part 1: Singleton, composite, and façade</a> by Joe Zim <a href="http://www.adobe.com/devnet/html5/articles/javascript-design-patterns-pt2-adapter-decorator-factory.html">JavaScript design patterns – Part 2: Adapter, decorator, and factory</a> by Joe Zim <a href="http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html">JavaScript motion detection</a> by Romuald Quantin <a href="http://www.adobe.com/devnet/html5/articles/real-world-example-html5-filesystem-api.html">Real-world example of the HTML5 FileSystem API</a> by Raymond Camden JavaScript Frameworks & Testing Backbone <a href="http://www.adobe.com/devnet/html5/articles/backbone-cellar-pt1.html">Backbone.js Wine Cellar tutorial – Part 1: Getting started</a> by Christophe Coenraets <a href="http://www.adobe.com/devnet/html5/articles/backbone-cellar-pt2.html">Backbone.js Wine Cellar tutorial – Part 2: CRUD</a> by Christophe Coenraets <a href="http://www.adobe.com/devnet/html5/articles/backbone-cellar-pt3.html">Backbone.js Wine Cellar tutorial – Part 3: Deep linking and application states</a> by Christophe Coenraets Ember.js <a href="http://www.adobe.com/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html">Flame on! A beginner's guide to Ember.js</a> by Andy Matthews Jasmine <a href="http://www.adobe.com/devnet/html5/articles/unit-test-javascript-applications-with-jasmine.html">Unit test JavaScript applications with Jasmine</a> by Dustin Butler Minion <a href="http://www.adobe.com/devnet/html5/articles/pseudo-classical-object-oriented-programming-in-javascript-with-minion.html">OOP in JavaScript with Minion</a> by Brian Rinaldi (i.e. me) Mobile PhoneGap <a href="http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html">Getting started with PhoneGap in Eclipse for Android</a> by Andrew Trice <a href="http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-xcode-for-ios.html">Getting started with PhoneGap in Xcode for iOS</a> by Andrew Trice <a href="http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-android.html">Extending PhoneGap with native plugins for Android</a> by Andrew Trice <a href="http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-ios.html">Extending PhoneGap with native plugins for iOS</a> by Andrew Trice

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/javascript-and-mobile-development-tutorials

link

http://www.remotesynthesis.com/post.cfm/javascript-and-mobile-development-tutorials

pubDate

Tue, 15 May 2012 19:48:15 GMT

title

JavaScript and Mobile Development Tutorials

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

Lots of new libraries and plugins this week as well as a number of great tutorials on HTML5 features like application cache, audio, drag and drop file handling and requestAnimationFrame. The application cache article seems to have garnered some unwanted attention for its language but it really is a fantastic article and worth the read. I post these links as I discover them on <a href="https://twitter.com/remotesynth">Twitter</a> or <a href="https://www.facebook.com/remotesynthesis">Facebook</a>. Tutorials Andy Trice shows how to use JavaScript's prototypal inheritance to help debug complex problems <a href="http://j.mp/K5EdQ0">Prototypal Inheritance & Strategies for Debugging Tough Problems</a> Leigh Kaszick explains prototypes in JavaScript. A common topic but still seems to trip people up. <a href="http://j.mp/IDjD79">Prototypes in JavaScript</a> A fantastic article on the many complications of working with Application Cache by Jake Archibald. <a href="http://j.mp/LG3mT8">Application Cache is a Douchebag</a> A great overview of the state of HTML5 Audio, both how to use it and cross-browser limitations. <a href="http://j.mp/KKDCiZ">HTML5 Audio — The State of Play</a> Nicholas Zakas shows how to get file references, drag and drop files and handle ajax uploading of files using JavaScript. <a href="http://j.mp/KKAKCR">Working with files in JavaScript, Part 1</a> Alan Stearns shows how some extra CSS rules can prevent your web fonts from using faux bold & italics <a href="http://j.mp/KKybk5">Say No to Faux Bold</a> David Walsh shares a method developed by a colleague for detecting DOM node insertions using JavaScript and CSS Animations <a href="http://j.mp/ISGOIO">Detect DOM Node Insertions with JavaScript and CSS Animations</a> DailyJS starts a new beginners JavaScript series by discussing primitive values and objects <a href="http://j.mp/ISFENt">JS101: Primitive Values and Objects</a> Learn how to use requestAnimationFrame for smooth animation in JavaScript with this video and code from Joe Zim. <a href="http://j.mp/Jb8NKz">requestAnimationFrame: Video Introduction to New Animation Techniques</a> Frameworks and Libraries Handling security with the Meteor JavaScript framework. <a href="http://j.mp/Jb9zXZ">Security with Meteor</a> Mobile Raymond Camden shows how to set up console debugging when developing for PhoneGap and Android. <a href="http://j.mp/Jj4GMj">Setting up console debugging for PhoneGap and Android</a> New and Updated Frameworks and Libraries jQuery.ish contains core jQuery features with a compatible syntax in only 500 bytes minified. <a href="http://j.mp/Jb8bV4">jQuery.ish</a> Restie is a JavaScript ORM for Node.js & browsers that talks to RESTful interface rather than database. <a href="http://j.mp/Jz2OdA">restie</a> HTML shell is a simple tool for generating the base HTML5 template for your pages. <a href="http://j.mp/KFdzQq">html shell</a> BetterExamples.js is designed to improve the experience of inline JavaScript code examples. <a href="http://j.mp/LGnjt3">BetterExamples.js</a> Illuminated.js is a 2D lights and shadows rendering engine for HTML5 applications via Gaetan Renaudeau. <a href="http://j.mp/KWbNVI">Illuminated.js – 2D lights and shadows rendering engine for HTML5 applications</a> AppJS for Node allows you to build cross-platform desktop applications with HTML, CSS and JavaScript. <a href="http://j.mp/Jb95RH">AppJS</a> Curtain.js jQuery plugin allows you to navigate multiple fixed panels that unroll with an curtain effect. <a href="http://j.mp/KWjknn">Curtain.js</a> leFunc provides type checking for functions and function overloads in JavaScript. <a href="http://j.mp/KWjCL7">leFunc</a>

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-may-7-2012

link

http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-may-7-2012

pubDate

Mon, 14 May 2012 14:15:25 GMT

title

Best of JavaScript, HTML5 & CSS3 - Week of May 7, 2012

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

This week features a lot of outstanding content including a number of new libraries and microlibraries this week as well as a couple tutorials on Adobe Shadow, jQuery Mobile, CoffeeScript and Node among others. Plus, the second issue of Appliness, the digital magazine for developers, is out and includes lots of great articles including original content. I definitely recommend checking it out. As always, if you want to get these updates as I discover them, follow me on <a href="https://twitter.com/remotesynth">Twitter</a> or <a href="https://www.facebook.com/remotesynthesis">Facebook</a>. Tutorials This is a cool real-world example and tutorial of the HTML5 FileSystem API from Raymond Camden <a href="http://adobe.ly/KoraFE">Real-world example of the HTML5 FileSystem API</a> I walk through getting started with browser testing across multiple devices with Adobe Shadow <a href="http://j.mp/JwP3tJ">Browser Testing Across Devices with Adobe Shadow</a> Improve form usability by enhancing required form fields with CSS3 via Mary Lou <a href="http://bit.ly/Ipn4hF">Enhance Required Form Fields with CSS3</a> Pamela Fox shows how to trigger numeric keyboards with HTML5 on iOS and Android (and hide the spinner on Chrome) <a href="http://bit.ly/Ipmr7M">Triggering Numeric Keyboards with HTML5</a> See how Adobe Shadow can simplify your device browser testing workflow in this complete video tour including integration with LiveReload by Christian Cantrell <a href="http://adobe.ly/IplFHP">A Complete Tour of Adobe Shadow in 10 Minutes (including integration with LiveRel</a><a href="http://adobe.ly/IplFHP">oad)</a> An excellent, comprehensive guide to JavaScript style guides and beautifiers by Addy Osmani <a href="http://bit.ly/IpjSm3">JavaScript Style Guides And Beautifiers</a> Frameworks and Libraries Learn how to unit test your JavaScript applications using BDD with Jasmine by Dustin Butler <a href="http://adobe.ly/KoqcZN">Unit test JavaScript applications with Jasmine</a> A getting started guide for building a NPM package for Node.JS via Ryan Neufeld <a href="http://j.mp/J6YGpA">Building a bare-bones NPM package</a> Get started with Node.js on Windows in the first in a series of tutorials from Alex Young. <a href="http://j.mp/JImVbB">Windows and Node: Getting Started</a> Jack Franklin shows how to learn a little CoffeeScript by using it to build a jQuery Plugin <a href="http://j.mp/JImwpu">A jQuery Plugin in CoffeeScript</a> Christophe Coenraets shares a single-page CRUD sample application built with Backbone.js and Twitter Bootstrap <a href="http://j.mp/JHKDVr">Single-Page CRUD Application with Backbone.js and Twitter Bootstrap</a> A nice comparison of the Spine and Backbone JavaScript MVC frameworks by Hjörtur Hilmarsson <a href="http://bit.ly/K4eMAv">Spine.js vs Backbone.js</a> Mobile An example and explanation of using Intents with PhoneGap from Raymond Camden <a href="http://bit.ly/IA98Wx">Example of Intents with PhoneGap</a> New and Updated Frameworks and Libraries HJ is a compiler for a subset of Haskell to JavaScript. <a href="http://j.mp/Iy0zXJ">HJ — Haskell-to-JavaScript compiler</a> JSCheck is a specification-driven JavaScript testing tool by Douglas Crockford <a href="http://j.mp/Iy0H9S">JSCheck</a> Laconic is a lightweight library for generating DOM content using JavaScript <a href="http://j.mp/Iy0QKo">Laconic DOM Library</a> CanvasJS is a small JavaScript helper library for the canvas 2d API <a href="http://j.mp/JImZrV">CanvasJS</a> Doppio is a project to get Java running in the browser without any plug-ins. Built with CoffeeScript. <a href="http://bit.ly/K4fWvP">DoppioVM: A JVM in Coffeescript</a> Keymaster is a JavaScript micro-library with no dependencies for defining & dispatching keyboard shortcuts <a href="http://bit.ly/ImaLq0">keymaster</a> PhoneGap 1.7.0 is released including tons of bug fixes and support for Bada 2.0. <a href="http://bit.ly/IHcfsQ">PhoneGap 1.7.0 Released!</a> Microsoft shares an open source Windows Metro style theme for jQuery Mobile <a href="http://j.mp/Iy1asE">Announcing the open source Metro style theme for jQuery Mobile</a> Etc. Latest issue of Appliness magazine for developers is out with tons of great content like an interview with Pamela Fox. <a href="http://bit.ly/JJhdnc">Download the second issue</a>

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-30-2012

link

http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-30-2012

pubDate

Mon, 07 May 2012 13:24:14 GMT

title

Best of JavaScript, HTML5 & CSS3 - Week of April 30, 2012

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

Lately you may have been hearing a lot about <a href="http://success.adobe.com/en/na/sem/products/shadow.html">Adobe Shadow</a>. It seems that I wasn't the only one who took some time to finally getting around to adding it to my workflow. The thing is that, once you do, you start to see how much Shadow improves that workflow when testing browser based applications on devices. While I only have a few devices, it seems obvious that the more devices you are testing, the more time this saves. This post will cover how to set up Shadow on your desktop and your devices and then discuss some of its capabilities and, also, some of its current limitations. Keep in mind that this product is still in a <a href="http://labs.adobe.com/technologies/shadow/">preview release on Adobe Labs</a>, so limitations are to be expected and many may be resolved in future updates. Also, as I was writing this, Christian Cantrell released a similar type of <a href="http://blogs.adobe.com/cantrell/archives/2012/05/a-complete-tour-of-adobe-shadow-in-10-minutes-including-integration-with-livereload.html">tutorial covering Shadow but in video format</a>. Setup One of the most impressive parts of Adobe Shadow, to me, was how quick and easy it was to set up. There are only three steps: <ol> <li>Install Shadow on your desktop;</li> <li>Install the Chrome Extension;</li> <li>Install the Shadow app on your iOS and/or Android devices.</li> </ol> Once you have everything installed, simply ensure that the Shadow service is open on your desktop. Next, open Shadow on any devices you intend to test. Assuming all devices are on the same network as your laptop, you should see your computer listed under connections. When you click the connection, you will see a passcode. Within Chrome, you may notice that a plus icon now displays on the Shadow extension (should be to the right of the address bar). Click on the extension, enter the passcode and you are all set to go. You should begin seeing Shadow on your device follow along with your browsing on your desktop. <img src="http://www.remotesynthesis.com/assets/content/shadow_chrome.jpg" alt="Shadow Chrome Extension" width="396" height="295" /> One item to note, which may be obvious, but if you are connected to a VPN you may encounter difficulty having Shadow on your device detect your desktop. Also, you can open and close Shadow on your desktop or device without having to re-enter the passcode. Browsing with Shadow Testing your pages with Shadow is even easier than the setup. Simply browse on your Chrome browser and any and all devices will follow along. This allows you to test the appearance and behavior or any page on a variety of devices at one time. Plus, Shadow will keep your device from going to sleep, meaning you no longer need to unlock the device every time you want to test the page. You aren't limited to just browsing within a single Tab, Shadow will display the content within each tab as you switch across tabs. Of course, browsing live web pages is useful but most of the time you will be developing locally. Thankfully, Shadow fully supports browsing on your localhost allowing you to test applications as you develop them. Not surprisingly, Shadow cannot load files browsed via "file:///" as the file doesn't exist on your devices. As you might expect, if you are browsing password protected pages, you will need to authenticate on each device. Refreshing the page on a device uses the common pull down and release "gesture." Debugging with Shadow Everything I have discussed above would be useful in and of itself, but the best feature of Shadow is its debugging capabilities. If you click on the Chrome extension, you'll see a little "<>" button next to each connection. Clicking this button will open the debugging panel that, under the covers, uses <a href="http://people.apache.org/~pmuellr/weinre/">Weinre</a> though it will look familiar to anyone Chrome's developer tools. <img src="http://www.remotesynthesis.com/assets/content/shadow_weinre.jpg" alt="Shadow debugging" width="600" height="434" /> Once in the debugging panel, you can view and edit the DOM and see those changes reflected on the specific device you are debugging. You can even view the console logs. As you probably know, these capabilities offer a lot of power for debugging issues in HTML, CSS and JavaScript. As of writing this, I did encounter a few limitations in debugging (which I'd argue are to be expected from a preview release of a product such as this). In my tests, the timeline and network tabs did not seem to give any data - even when refreshed. Also, while the console will show items logged once the page has fully loaded (for example, on a button click event), anything that might have been logged to the console on page load doesn't show. As you might expect, you will need to actually trigger this on the device (i.e. click the button on the tablet not on your desktop) to see the information sent to the console. While I could edit HTML, CSS and JavaScript, I couldn't determine how to add a new line (hitting enter or any combination of keys + enter, always just recorded my edits) - there were no edit as text or edit as HTML options as in the Chrome developer tools. Finally, the debugging seems to work off a weinre server on adobe.com which, on the occassion the service is down, won't work. Despite these limitations, <a href="http://www.raymondcamden.com/index.cfm/2012/5/2/This-is-why-Adobe-Shadow-rocks">debugging via Shadow is extremely powerful</a> and I fully expect that future versions will only see improvements to this process. Summing Up If you are building web applications that need to be tested on multiple devices (and, c'mon, very few of us should be building web apps and not testing on devices nowadays), then there is absolutely no reason I can see why you wouldn't immediately add Shadow to your toolset. It is easy to setup, easy to use and offers a lot of power and capabilities you don't currently have. Most importantly, it will save you time which you can put towards better use (such as obsessively finishing Miscellaneous quests on Skyrim - but maybe that's just me).

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/browser-testing-across-devices-with-adobe-shadow

link

http://www.remotesynthesis.com/post.cfm/browser-testing-across-devices-with-adobe-shadow

pubDate

Fri, 04 May 2012 14:21:08 GMT

title

Browser Testing Across Devices with Adobe Shadow

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

This was a really busy week with quite a few new libraries, a number of good tutorials on a wide variety of topics and even some excellent interviews and discussions. This really was a week overflowing with top-notch content. The bad news is that you have a lot of reading to catch up on. The good news is that it is all worthwhile and you’ll learn a ton. So get reading. Tutorials Brian Scaturro posts a great overview of closures in JavaScript <a href="http://bit.ly/KhJu3A">Closures: Front to Back</a> An awesome example of using JavaScript to create a real-time displacement map filter by Romuald Quantin <a href="http://bit.ly/InAsWV">javascript displacement mapping</a> Louis Lazaris explains and shows how to use CSS3 structural pseudo-class expressions <a href="http://bit.ly/IQiKID">CSS3 Structural Pseudo-class Expressions Explained</a> How to build a nice pure CSS3 cycling slideshow or a slideshow that syncs to audio using jPlayer <a href="http://bit.ly/JYPH94">Audio Slideshow with JPlayer</a> <a href="http://bit.ly/JYP8Mt">A Pure CSS3 Cycling Slideshow</a> Raymond Camden shows the JavaScript code for setting up your object store using IndexedDB <a href="http://bit.ly/JYEbKT">How to handle setup logic with IndexedDB</a> Good post showing how Google uses JavaScript rather than animated GIF to create smoothly animated doodles <a href="http://bit.ly/Im5MDr">How Do Google’s Animated Doodles Work?</a> Peter Michaux explores several ways to create observable mixins and multiple mixins in JavaScript. <a href="http://bit.ly/Im3ILI">Mixins and Constructor F</a><a href="http://bit.ly/Im3ILI">u</a><a href="http://bit.ly/Im3ILI">nctions</a> Joe Zim discusses JavaScript closures and how to use closures in the Module design pattern <a href="http://bit.ly/IimqlP">JavaScript Closures and the Module Pattern</a> Frameworks and Libraries Check out these demos, source provided, of using Microsoft Kinect plus JavaScript with the KinectJS library <a href="http://bit.ly/IxfOhL">Kinect plus JavaScript = KinectJS</a> Andrew Burgess shows how to install & use Grunt, a new JavaScript build tool created by Ben Alman. <a href="http://bit.ly/JYM2rK">Meet Grunt: The Build Tool for JavaScript</a> Jack Franklin shows how to create jQuery Plugin, test it with QUnit and build it with Grunt <a href="http://bit.ly/KhK3ui">A jQuery Plugin with Grunt & QUnit</a> Learn how to build a Todo App with Node.js and Express via Jack Franklin <a href="http://bit.ly/Iik6eS">Node.js: A Todo App with Express</a> Siddarth introduces using the Zepto.js jQuery-compatible framework for mobile development. Some debate over the value in the comments. <a href="http://bit.ly/Ik13o0">The Essentials of Zepto.js</a> Mobile Andrew Trice explains how to extend the capabilities of PhoneGap using native plugins on Android <a href="http://adobe.ly/I7N71m">Extending PhoneGap with native plugins for Android</a> New and Updated Frameworks and Libraries HTTPster is a command-line utility by Simeon Bateman that starts an HTTP server using Node.js and NPM to load files from any directory on your filesystem <a href="http://bit.ly/InyBBz">Introducing: HTTPster</a> Cubism.js is a new plugin for D3 data driven document library for creating complex timeline visualizations <a href="http://bit.ly/IrJr4Y">Cubism.js: a cool new way to display timeline data</a> Moobile is a brand new mobile application framework built on top of MooTools. <a href="http://bit.ly/IQhEg6">MooTools - Moobile 0.1 Released</a> Buster.JS is a browser testing toolkit with browser automation, static html page testing, headless browsers testing & more. Currently in beta. <a href="http://bit.ly/JYyAUK">Welcome! Buster.JS is...</a> idb.filesystem.js is a JavaScript polyfill of Filesystem API for browsers lacking native support. <a href="http://bit.ly/I7QnK3">idb.filesystem.js - Bringing the HTML5 Filesystem API to More Browsers</a> app-UI is a new, open-source HTML and JavaScript application framework by Andrew Trice with reusable application container UI components like ViewNavigator, SplitViewNavigator and SlidingView. <a href="http://bit.ly/K5G0k9">Introducing app-UI</a> The Miso.Dataset JavaScript library handles loading, parsing, sorting, querying & manipulating data from many sources <a href="http://bit.ly/JYp58a">The Miso Project - Dataset</a> Rice is a JavaScript library providing an easy-to-use chainable Web SQL database API that can be used with PhoneGap. <a href="http://bit.ly/Iig2em">rice</a> Etc. TodoMVC Labs showcases sample Todo apps for JavaScript MVC frameworks like Ember, Batman & Meteor <a href="http://bit.ly/JYps2m">TodoMVC Labs</a> Interesting look at the debate about adding classes in ECMAScript 6 occurring in TC39 standards body <a href="http://bit.ly/IjEC04">Class Warfare</a> Victor Carbune discusses Adobe's contributions to WebVTT for HTML5 video closed captions or subtitles <a href="http://adobe.ly/IifrcB">Native Browser Text Track Rendering</a> Jacob Cook interviews Yahoo!'s Doug Crockford on (what else?) JavaScript <a href="http://bit.ly/Ik0Gd2">How I Work: Yahoo!'s Doug Crockford On JavaScript</a>

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-23-2012

link

http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-23-2012

pubDate

Mon, 30 Apr 2012 13:47:29 GMT

title

Best of JavaScript, HTML5 & CSS3 - Week of April 23, 2012

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

By usual standards, this was kind of a light week. There were tons of posts but many people seemed focused on the great semicolon debate of 2012. At this point the number of time and words devoted to a single punctuation mark is rather astonishing. Nonetheless, there were still some great posts this week such as Mike Robinson's HTML5 semantics discussion and Tom Giannattasio showing how the Beercamp pop-up book site was built using CSS. Tutorials A thorough guide to how numbers are encoded in JavaScript from Dr. Axel Rauschmayer. <a href="http://bit.ly/HZ6NlH">How numbers are encoded in JavaScript</a> A good discussion on HTML5 semantics by Mike Robinson <a href="http://bit.ly/IBiWuJ">Let’s Talk about Semantic</a><a href="http://bit.ly/IBiWuJ">s</a> Tom Giannattasio discusses techniques used to create the experimental Beercamp site 3D pop-up book using CSS 3D <a href="http://bit.ly/IBdkk2">Beercamp: An Experiment With CSS 3D</a> Another really nice tutorial from Mary Lou on exchanging and animating words using CSS Animations <a href="http://bit.ly/HWcz8B">Rotating Words with CSS Animations</a> Terrence Ryan shows how to use CSS Regions but have them degrade gracefully on unsupported browsers <a href="http://bit.ly/J7J7YM">Using CSS Regions as an Enhancement</a> Frameworks and Libraries A nice demo of and introduction to Handlebars and why you should consider a templating engine from Raymond Camden <a href="http://bit.ly/HZ5H9y">Demo of Handlebars, and why you should consider a templating engine</a> Decouple Backbone modules to communicate with each other without referencing one another by Eric Feminella <a href="http://bit.ly/HWhwhP">Decoupling Backbone Modules</a> I share a fun demo on how to determine the language of text with JavaScript & cld.js <a href="http://bit.ly/J7FJ00">Determining the Language of Text Using JavaScript and cld.js</a> James Brown shows how to use Mockjax in testing for simulating ajax responses <a href="http://bit.ly/HTc7Ua">Adventures in Mockjax</a> New and Updated Libraries and Frameworks n8iv is an object-oriented & functional programming library which extends JavaScript Natives and provides other useful Classes. <a href="http://bit.ly/I5a0jl">n8iv</a> Etc. Want to know what Adobe is up to in HTML? Check out the new site. <a href="http://bit.ly/I3HPQK">Adobe & HTML</a> Adobe's Christian Cantrell built the virtual keyboard from TRON Legacy using web technologies and two iPads. <a href="http://adobe.ly/IBJSdL">Building the Keyboard from TRON Legacy with Web Technologies</a> My interview with Denise Jacobs on CSS3, RWD and her upcoming session at FITC Toronto. <a href="http://bit.ly/IBnWj1">Interview with Denise Jacobs on CSS3, RWD and more.</a> You have to see these impressive 2D & 3D CSS scroll effects by Hakim El Hattab. <a href="http://bit.ly/HWiM4r">CSS Scroll Effects</a>

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-16-2012

link

http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-16-2012

pubDate

Mon, 23 Apr 2012 14:07:00 GMT

title

Best of JavaScript, HTML5 & CSS3 - Week of April 16, 2012

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	Conferences & User Groups

Stomach Contents: Structure - struct
value	CSS3

description

Stomach Contents: Structure - struct

value

My second, and possibly final due to a lack time, interview with a speaker at next week’s FITC Toronto is <a href="http://denisejacobs.com/">Denise Jacobs</a>. Denise is presenting “<a href="http://www.fitc.ca/events/presentations/presentation.cfm?event=124&presentation_id=1918">How to be a Super CSS Detective</a>” which covers advanced CSS and problem solving techniques for debugging CSS issues. Denise is a well-known author and speaker, having published books on web design and CSS for Peachpit. You can follow Denise via <a href="http://denisejacobs.com/">her blog</a> or via <a href="http://denisejacobs/">Twitter</a>. While I have generally not been focused on design and layout in my career, I have done enough here and there to have admiration for those who are skilled at design and layout. It is an area that, like many others, continues to get more complex. Denise and I discuss what can make CSS complex and how things like RWD are impacting the work of designers. As a reminder, it is not too late to <a href="http://www.fitc.ca/events/about/?event=124">register for FITC in Toronto</a>. I see in your career as a trainer and author you teach on the topic of CSS a lot. Where do you find that people struggle with CSS? Is this different for beginner’s than more experienced web developers? I think that CSS can be quite complex, so I think it is difficult to know where to start and how everything works together to be able to feel confident about your coding skills. With the cascade, layers and layers of complexity can be added to one another, and sometimes it is hard to see both the big picture and pinpoint the source of problems when they come up. It seems like people really do struggle with zeroing in on the problems in the page -- at least I know I still do sometimes. When a problems comes up -- a style isn't loading, something's out of place, or the element is not doing what is expected -- it can be incredibly frustrating and can take a lot of time to get to the bottom of it. I do think it differs between beginners and experienced developers. I think for beginners, it takes time to figure out what all of the properties do and how they work together. When teaching beginners, I would spend a lot of time trying to map in the students' brains what the visual outcome of the properties are.For experienced developers, the issue then becomes a question of best practices, efficiency, and innovating new ways of doing old things better, all of which can change quite rapidly. Back when I started learning CSS, it was all about things like placement on the page, font and color scheme. Nowadays, with all the new features like media queries, selectors and animations, the capabilities of CSS have gotten inordinately more complex. How do you feel this has affected the skills necessary for doing design and layout in HTML? I think that a front-end developer really needs to understand the DOM and really needs to be a strong proponent of good page semantics in the HTML. We need to not only understand the content itself, but to also be able to think through prospective future scenarios for the website to build the proper structure that could be expanded if needed. Other factors to take into consideration is working with fluid grids (as a foundation for RWD), CMSes, and the ever-present spectre of backwards compatibility. Trying to make the code work well within all of these contexts means that front-end developers can really never become complacent with their knowledge base. We have to walk the balance between being aware of the most up-to-date information, while also being selective to what will work best for the needs of the project. Another factor that has made design more complex has been the proliferation of devices of varying screen sizes and densities. You’ve spoken on the rise of Responsive Web Design before. Can you briefly share your thoughts on the rapid growth of techniques like RWD and related strategies like mobile first and progressive enhancement? I think RWD and everything that has blossomed from the movement are all wonderful. However, I also believe that it is all still developing, and many kinks need to be worked out. The approach (or approaches) are all timely and necessary. I am excited to see the process and practice move out of the adolescent stage in and into its more mature incarnation, whenever that happens. Your sessions at <a href="http://www.fitc.ca/">FITC</a> is about being a CSS detective. You’ve also written a <a href="http://www.amazon.com/gp/product/0321683943">book</a> on the topic. What do you mean by this term? What about CSS requires “detective” work? As you know, our work is by no means simple. Computers have different operating systems, websites can be viewed on numerous devices and myriad browsers, and the specifications that we code by is constantly in flux to being developed and improved upon. This means that problems will invariably come up -- and many of them are mysterious due to the number of originating sources. When there is a mystery, who better to solve it than a detective? As mentioned earlier, an inordinate amount of time can be spent trying to figure out what the problems are within a coded design when things do not turn out as expected. This is especially true when doing cross-browser testing. While IE6 (and IE7) are thankfully of dwindling concern, we often still need to work with IE8, which, while being a very limited browser, is still used by a large population. With <a href="http://www.amazon.com/gp/product/0321683943">my book</a>, my hope was to give people some tools to tackle the often onerous task of targeting or pinpointing the source of any given issue on a page so that they have to spend less time on fixing things and more time on creating great sites and apps.

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/interview-with-denise-jacobs-on-css3-rwd-and-more

link

http://www.remotesynthesis.com/post.cfm/interview-with-denise-jacobs-on-css3-rwd-and-more

pubDate

Thu, 19 Apr 2012 17:56:13 GMT

title

Interview with Denise Jacobs on CSS3, RWD and more.

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

Recently I heard about the release of a library called <a href="https://github.com/jaukia/cld-js">cld-js</a> that, while having a limited scope, implemented something that seemed rather complex in pure JavaScript. The library is a port of the <a href="http://src.chromium.org/svn/trunk/src/third_party/cld">Compact Language Detector from Chromium</a> whose purpose is to determine the language of any given piece of text and was ported using <a href="https://github.com/kripken/emscripten">emscripten</a>. I thought the concept sounded interesting and, while the uses may not be widespread, there are a number interesting ideas one could imagine using a library like this. In this post, I will cover a little demo I wrote using cld-js that tries to filter a list of tweets from a Twitter search according to their language. As one might imagine, cld-js doing something rather complex means that it is on the large side for a library, so you probably need to consider when and where to use it carefully. The minified version I used for my demo was about 3MB. Nonetheless, the api of cld-js is very simple, you just pass the text you want it to test to the detectLanguage() function. One thing to watch out for is that the library adds the detectLanguage method to the global namespace which, given the rather generic method name, could be problematic. For my demo, I decided to pull in a list of tweets within a Twitter search for JavaScript. I follow this hashtag and it generally consists of a lot of different language tweets, so I thought it would be a good sample. My page consists of a select box that I will populate with the various language options - this will change depending on the languages in any given set of tweets when loaded. Upon selecting a language, I will display a simple list of the tweets that cld-js has identified as being of that language. I am also using jQuery for the DOM manipulation. Let’s look at the code: <code><!DOCTYPE html> <html> <head>    <meta charset="UTF-8">    <title>CLD JS Demo</title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    <script src="js/cld-min.js"></script>    <script>    var sortedList = {};    $.ajax({       url: "http://search.twitter.com/search.json",       dataType: "jsonp",       data: {          q: "javaScript"       },       success: function(data) {          var lan; $("#languages option:first").text("Choose a Language");          $.each(data.results, function(i,item){             lan = detectLanguage(item.text);             if (!sortedList[lan]) {                $("#languages")                   .append($("<option>")                   .text(detectLanguage(item.text)));                sortedList[lan] = [];             }             sortedList[lan].push(item);          });       },       crossDomain: true    });    $( function() {       $("#languages").change(function() {          var items = sortedList[$(this).val()];          var dt;          if (items) {             $("#tweets").html("");             $.each(items, function(i,item) {                dt = new Date(item.created_at);                $("#tweets").append($("")                      .append(item.text + " ")                      .append("by <a href='http://twitter.com/" + item.from_user + "'>" + item.from_user_name + "</a> on " + dt.toDateString()));             });          }       });    });    </script> </head> <body> Tweets about JavaScript: <select id="languages">    <option>loading...</option> </select> <div id="tweets"></div> </body> </html></code> The first thing you will notice within the JavaScript is an ajax call to Twitter’s API that gets a JSONP result. Inside the callback function is where I am using cld-js. Within this callback function I loop through each item returned and pass the text property, where Twitter sends the actual text of the tweet, to the detectLanguage() method. I then add a key to a structure/object for that language if one does not yet exist. Next, I append the full item containing all the tweets data from the API to an array under that language key. I use the structure of arrays later to pull the items for display when an option is selected. Speaking of selecting an item, within my onLoad function you’ll see that I add a change event handler to my select box. Within this change handler, I check to see if the list has an array items at that location (i.e. you haven’t chosen the first option) and, if so, I simply loop through and display the tweet along with the username and date posted. Of course, this is all just straight jQuery as the work of cld-js was completed in the prior method. As you can see if you <a href="http://remotesynthesis.com/projects/cldjs/index.html">try the demo</a>, the cld-js library works fairly well. There are a number of occasions where you might see an option "Tg_unkown_language" where it appears unable to identify the language of the text. On other occasions, it incorrectly identifies the language. Some of these seem to be because of the sloppy nature of tweet text (between hashtags and usernames) while in others the language seems obvious and the reason for the failure unclear. Nonetheless, in my basic testing it appeared to have a 75-80% success rate (that is purely a guesstimate though). I suspect that, as with any technology of this sort, if you absolutely must have perfection, you are out of luck. However, I would think that most uses of this library, that success rate would be considered sufficient enough.

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/determining-the-language-of-text-using-javascript-and-cld-js

link

http://www.remotesynthesis.com/post.cfm/determining-the-language-of-text-using-javascript-and-cld-js

pubDate

Tue, 17 Apr 2012 15:17:24 GMT

title

Determining the Language of Text Using JavaScript and cld.js

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

A lot of new libraries and general JavaScript, HTML5 and CSS3 tutorials this week (fewer framework specific tutorials than typical). Sorry for the slightly late posting but I am in Denver at the 360Flex conference - which may have led me to miss a few posts which I will include next week. If you happen to be at the conference, look me up. Tutorials Ivaylo Gerchev posts a good introduction to the HTML5 File System API. <a href="http://bit.ly/HzcO55">Toying With the HTML5 File System API</a> MVVM (Model View ViewModel) is an architectural pattern based on MVC & MVP. Learn more in Addy Osmani's excellent guide on the pattern for JavaScript Developers. <a href="http://bit.ly/Hzc5kr">Understanding MVVM - A Guide For JavaScript Developers</a> Build animated CSS3 content tabs using radio buttons with :checked pseudo-class & sibling combinators by Ring Wing <a href="http://bit.ly/HzbHlR">Animated Content Tabs with CSS3</a> Jeremy McPeak shows commonly used patterns when nesting functions can have negative performance impact. <a href="http://bit.ly/HAcmsv">Stop Nesting Functions! (But Not All of Them)</a> A good introduction to defining objects and inheritance in JavaScript from Manuel Kiessling <a href="http://bit.ly/HA9V9j">Object-orientation and inheritance in JavaScript: a comprehensive explanation</a> Websanova recommends a means of extending JavaScript and shares a number of useful string functions. <a href="http://bit.ly/HA7inV">Extending JavaScript – The Right Way</a> Manoela Ilic shows how to use CSS3 and jQuery to create a really nice direction-aware hover effect. <a href="http://bit.ly/HvTcjy">Direction-Aware Hover Effect with CSS3 and jQuery</a> Romuald Quantin shows how to use JavaScript and the getUserMedia API to create an interactive motion detection application using the user's camera. <a href="http://adobe.ly/Hy9CIC">JavaScript motion detection</a> Keith Peters looks at various ways to determine object types in JavaScript but then discusses whether there is much value in doing so in a dynamic language. Instead, he shows how to implement duck typing. <a href="http://adobe.ly/Hy8aGj">Object types in JavaScript</a> A cool demo of animated icons using CSS masks (WebKit only) via Simurai <a href="http://bit.ly/HvSi6z">Small demo of animated CSS Mask Icons.</a> Frameworks and Libraries Eric Feminella extended the Backbone to allow for persisting entire Backbone Collections. <a href="http://bit.ly/HzaHOt">Persisting Backbone Collections</a> Mobile Learn how to build mobile apps with HTML and a local database using PhoneGap via Christophe Coenraets <a href="http://bit.ly/Hzblf0">Building Mobile Apps with HTML and a Local Database</a> Ryan Stewart created the PhoneGap Starter Project on Github to help people get started building cross-platform mobile apps using PhoneGap Build. <a href="http://bit.ly/HyHg0Q">The PhoneGap Starter Project</a> New and Updated Frameworks and Libraries jQuery Mobile 1.1 Final is now available. <a href="http://bit.ly/IP4spM">jQuery Mobile 1.1 Final is now available</a> Meteor is a new & very buzzed about framework allowing you to write your entire app in pure JavaScript. <a href="http://bit.ly/HzeU4L">Meteor</a> CanJS is a new JavaScript framework with the MVC parts of JavaScriptMVC in a single script with additional features <a href="http://bit.ly/Hzd8kc">Introducing CanJS</a> locache is a new JavaScript caching framework for client side caching in localStorage. <a href="http://bit.ly/HzaYRD">locache</a> River is not another JavaScript MVC framework but rather a code organizing framework using the Facade/Mediator pattern <a href="http://bit.ly/HwhLwM">river-js</a> Qatrix is another new and open source (MIT license) JavaScript framework. <a href="http://bit.ly/HwdhGm">Qatrix - Easily build up high performance application with less code</a> Jonathan Snook created CoffeeConsole, a Chrome Extension for running CoffeeScript directly from the console <a href="http://bit.ly/HvRn62">CoffeeConsole: A Chrome Extension</a> PlastronJS is a new MVC application framework for the Google Closure library and Closure Compiler <a href="http://bit.ly/IqDuF1">PlastronJS</a> Etc. Krisztian Toth ports retro games to JavaScript and the browser and posts the source (via DailyJS) <a href="http://bit.ly/IqCOzs">Krisztian Toth's JavaScript Games</a> The new release of Adobe Shadow is out and has localhost support! <a href="http://bit.ly/IP2u90">Adobe Shadow Release 2 is out</a>

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-9-2012

link

http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-9-2012

pubDate

Mon, 16 Apr 2012 19:13:20 GMT

title

Best of JavaScript, HTML5 & CSS3 - Week of April 9, 2012

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

Some great posts this week including Yahoo open sourcing Mojito and Angus Croll discussing the new function expression syntax in ECMAScript 6 among many others. The community was seemingly occupied this past week both with JSConf and controversies over drinking at conferences and others - even controversies about the controversies (and whether arguing over Twitter is productive - as if anything over Twitter were productive). Anyway, despite all this, there were some great articles. Tutorials Terrence Ryan shows how he created a page slide effect using HTML5 and CSS3 without a framework. <a href="http://bit.ly/HbSqYq">HTML Page Slide Without a Framework</a> See how to drag and drop and automatically send to the server using HTML5 and JavaScript in this tutorial from Remy Sharp <a href="http://bit.ly/Hh6XD3">Drag and Drop and Automatically Send to the Server</a> See how to do face detection in the browser using getUserMedia and the Face.com API from Raymond Camden <a href="http://bit.ly/IqzW5C">Face detection with getUserMedia</a> Krisztian Toth ports retro games to JavaScript and the browser and posts the source (via DailyJS). <a href="http://bit.ly/IqCOzs">Krisztian Toth's JavaScript Games, XRegExp, PlastronJS</a> Frameworks and Libraries Good tutorial on creating browser-based slideshows with jmpress.js, a jQuery plugin based on impress.js. <a href="http://bit.ly/HbVCn0">Slideshow with jmpress.js</a> Dan Wellman posts the 5th & final part in his tutorial on building a contacts manager using Backbone.js <a href="http://bit.ly/HbUdN7">Build a Contacts Manager Using Backbone.js: Part 5</a> See how to build a basic contact manager web app with Backbone, CoffeeScript, MVC4 & Web API from Jonathan Creamer <a href="http://bit.ly/Hh5JYs">Backbone Contacts with CoffeeScript, MVC4 , and Web API</a> Doug Winnie shares his CreateJS / EaselJS boilerplate HTML and JavaScript setup that you can download. <a href="http://bit.ly/Hcjb3b">CreateJS – EaselJS Boilerplate Setup</a> See how to easily add gesture support to your web app using JavaScript with Hammer.js in my latest post <a href="http://bit.ly/HcntaP">Add Gesture Support to Your Web Application via Hammer.js</a> Mobile A nice tutorial and demo from Raymond Camden on how to add database synchronization to your PhoneGap project <a href="http://bit.ly/Hh31SJ">Adding database synchronization to your PhoneGap project</a> New and Updated Frameworks and Libraries Presenteer.js is a JavaScript & HTML5 presentation library that seems suitable for in-page presentation-like effects rather than a PowerPoint replacement. <a href="http://bit.ly/Hbv5or">Presenteer.js</a> cld-js is a JavaScript library that can detect the language of any given piece of text. <a href="http://bit.ly/HbuX8k">cld-js</a> Yahoo open sources Mojito, a JavaScript framework built on top of YUI 3 for writing apps that run on client (browser) and server (Node.js) <a href="http://bit.ly/HOIR3e">Yahoo open sources Mojito, a developer framework for any device</a> PlastronJS is a new MVC application framework for the Google Closure library and Closure Compiler. <a href="http://bit.ly/IqDuF1">PlastronJS</a> Etc. A really killer demo by Jaume Sanchez called Floating Shiny Knot does reflection mapping of Google Street Map images on a spherical object using three.js <a href="http://bit.ly/HbUH62">Floating Shiny Knot - Street View Panorama Reflection Mapping</a> I did an interview with designer/developer Val Head on CSS3, JavaScript, FITC Toronto and more. <a href="http://bit.ly/HNkUuH">Interview with Val Head on CSS3, JavaScript and more</a> Adobe's Rik Cabanier discusses draft spec for adding blend modes to CSS and how you'd implement. in HTML <a href="http://adobe.ly/HMG9wz">Bringing blending to the Web</a> Angus Croll shares his mixed feelings on the new, abbreviated JavaScript function expressions syntax in ECMAScript 6 <a href="http://bit.ly/IqBFaZ">JavaScript Fat City</a>

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-2-2012

link

http://www.remotesynthesis.com/post.cfm/best-of-javascript-html5-css3-week-of-april-2-2012

pubDate

Mon, 09 Apr 2012 13:51:19 GMT

title

Best of JavaScript, HTML5 & CSS3 - Week of April 2, 2012

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	Conferences & User Groups

Stomach Contents: Structure - struct
value	Misc

description

Stomach Contents: Structure - struct

value

Day two of PAX East for me is all about the kids - two boys ages 5 and 9. As you'll see, I didn't get to try a ton of new games but the kids had a great time nonetheless. We arrived early at opening to huge lines just to enter the expo floor. However, the morning crowd was nothing compared to the afternoon where even walking became difficult. Thus the day was cut a little shorter than usual. Probably the highlight of the day was all the attention my 5 year old received for being dressed as Mario. He was photographed countless times even by news media from Reuters and Wired. Needless to say, he loved it. If you also have kids I'll try to share their thoughts on what they tried as well. <img src="http://www.remotesynthesis.com/assets/content/PAXEast/mario_luigi.jpg" alt="Mario and Luigi" width="600" height="450" /> Sonic 4 Episode 2 - The first game we tried was the latest Sonic 4 episode which should be available next month. If you like Sonic, this should be fun and it is exactly what you'd expect especially if you played prior episode. I was told some of the physics were improved on jumping but overall it felt much like episiode one. I will say my eldest boy got frustrated with his level though the five year old seemed to be fine. Kinect Sports Season 2 Basketball DLC - This paid DLC just came out this week I believe. All of us, even including my wife, tried the three point contest which, besides standard three pointers includes half court shots. Given that it was a little ridiculously easy - I got 135 points missing even only a couple of half court shots at most. Even the five year old seemed to do extraordinarily well and this was the only game he came back to replay later in the day. Still, they all had fun and they are already clamoring to purchase it (it is a relatively cheap 400 points). <img style="vertical-align: middle;" src="http://www.remotesynthesis.com/assets/content/PAXEast/sam_kinect.jpg" alt="Kinect Sports Basketball" width="600" height="388" /> Wreckateer for Kinect - The concept of this game is essentially an Angry Birds catapult game but you are controlling the item being catapulted using a combination of gestures and body movement. The goal is to destroy as much of the castle as possible while also getting all the goblins in the various towers. In the first part I aimed and launched a cannonball (of sorts) and then could manipulate its direction with hand gestures. In the second, the cannonball had wings and I could direct it with my body movements. My 9 year old seemed to enjoy the game a lot but unfortunately they Kinect device would not properly see my youngest (they claimed their device had issues). The game will be available on Xbox Live Arcade this summer and will include 60 levels. Kid Icarus Uprising - This game, as you may know, is already out, having been released a couple weeks ago. The appearance of the game is great and the levels I tried were fun even though the controls are a little odd and take adjusting. I particularly had difficulty with the controls when Pit was on the ground rather than flying. My 9 year old was very into the augmented reality feature using cards (not sure if you can purchase them but they were giving them out at the conference). The cards feature characters that you can battle and other unlockable items. In fact, my 9 year old liked this game enough that he immediately went out to purchase it. I liked it as well. Dance Central 2 - This game has been out for a while but was still a highlight of the day as you can see from the photos. The kids love this game, especially my five year old, as does my wife. As you can see, DC2 allows two people at a time to dance which makes it more fun to play together. <img src="http://www.remotesynthesis.com/assets/content/PAXEast/mom_sam_dancing.jpg" alt="Dance Central 2" width="600" height="411" /> Joe Danger The Movie - I know I discussed this game yesterday, but I had the chance to play it some more with my 9 year old who really enjoyed it. I also came to realize there was a much greater variety of gameplay, from skiing to motorcycling and more, than I had noticed the day before. While there weren't huge differences in the gameplay between the various types, the variety made it more fun. <img src="http://www.remotesynthesis.com/assets/content/PAXEast/portal_attendees.jpg" alt="Portal" width="600" height="386" />

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/pax-east-2012-day-2-kinect-sonic-and-more

link

http://www.remotesynthesis.com/post.cfm/pax-east-2012-day-2-kinect-sonic-and-more

pubDate

Sun, 08 Apr 2012 18:19:24 GMT

title

PAX East 2012 Day 2 - Kinect, Sonic and more.

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	Conferences & User Groups

Stomach Contents: Structure - struct
value	Misc

description

Stomach Contents: Structure - struct

value

I've come to <a href="http://east.paxsite.com/">PAX East</a> each year since it began three years ago. Every year the event seems to get bigger. This year, with Friday being a holiday for many, the first day felt even more crowded than usual. The booths also seemed more over the top than in years past, many, like Borderlands 2, Max Payne 3 and Lollipop Chainsaw featuring large displays. Of course there are the very popular sessions going on too, but, as in years past, I spend all my time on the expo floor trying new and mostly unreleased games. Friday, being the day I come without my kids, is all about trying the games I can't try with them (though the only title that I tried today that really fell into this category would be Lollipop Chainsaw). Here are my impressions of the games I tried on PAX East day one in the order I tried them. <img src="http://www.remotesynthesis.com/assets/content/PAXEast/2012_expo_floor.jpg" alt="PAX East 2012 Expo Floor" width="600" height="285" /> Majestic 12 - This is a title slated for a summer release on services like XBox Live. It's a cartoonish shooter for up to 4 players. The gameplay is frenetic and fun but not particularly deep, at least not in the level I played. Seems like a good game if you have a group to play with but not so much solo. I am told the difficulty ramps up with more players making the on screen action even more chaotic, which can be entertaining. Double Dragon Neon - I always have fond memories of playing the original Double Dragon on my NES as a kid. However, my attempts to relive that nostalgia by playing it as an adult tend to ruin those memories as the game gets boring and repetitive quickly. This updated "remake" does seem to have little deeper combat than original but not much. There are a few extra moves added to the familiar punch, kick and throw but they didn't seem that varied and there weren't any combos to be found, at least not in level one. Obviously the game has received a significant graphic upgrade, while retaining a cartoonish appearance. There was no specific release date but I was told "summer-ish" on services like XBox Live. Crimson Dragon - This is one a a few Kinect titles that seemed geared towards more hardcore gamers. This game, created by the game designer behind the much beloved Panzer Dragoon, plays like a combination of Panzer Dragoon and Child of Eden. The controls function almost identical to the Child of Eden where you have different types of weapons on each hand and combos as a two-hand gesture. CoE was a totally on rails experience and while this is similar, you can move your dragon around screen with your body movements. While this is often unimportant it did play a role against certain types of enemies. The graphics were pretty impressive, especially for a Kinect game. Based on my experience, if you liked CoE you will like this game. I was told summer as the release timeframe. Ghostbusters Paranormal Blast - The developer of this said it was a playable prototype and that it will be available on iOS and Android phones and tablets. Their goal was to get feedback from users - and promote the game of course. The object of the game is to capture various ghosts across the city. You view the ghost over camera background and try to capture it as you'd expect. It seems as though it could be fun but, thankfully, based on feedback from PAX attendees, they plan to tone down the difficulty. In three tries I was unable to capture a ghost. The estimated release is in late July. <img style="float: right;" src="http://www.remotesynthesis.com/assets/content/PAXEast/lollipop_chainsaw.jpg" alt="Lollipop Chainsaw" width="300" height="308" />Lollipop Chainsaw - The wait to play this game was well over an hour and a half for only five minutes of gameplay time. It's not that the line was that long, just incredibly slow, allowing for only four players at a time playing inside a crazy school bus. In this very tongue in cheek game, you play as a cheerleader, in a cheerleader outfit including pom poms, who slays zombies with a chainsaw (see photo for an idea). It's a total button masher that is most similar to something like Bayonetta but seemed more fun and easy to get into. The story and dialogue might seem kind of embarrassing if your wife walks in, including having to control a dancing zombie. There were also some sexed up scenes such as one where you are required to chop a tree blocking your route, but really it's just an excuse for an "up-skirt." They tell me the dialogue is supposedly very funny but you couldn't hear in the demo. The new release date is June 12. Joe Danger The Movie - The original Joe Danger was a favorite of mine from the prior PAX East. At the time it was a PSN only release but now is available on Xbox Live as well. This new game featuring the title character is a lot like original but instead of motorcycles you are riding rails in mine cart. It's a lot of fun and if you like the original, which I recommend, you'll like this one. I will say, the third level was a bit unforgiving but overall the game seemed as good or better than original. It is also slated for a summer release. As noted earlier, tomorrow I will be attending with my kids, which makes for a different experience. However, I will try to blog any experiences I have with new or upcoming games then as well. <img src="http://www.remotesynthesis.com/assets/content/PAXEast/2012_borderlands.jpg" alt="" width="600" height="354" />

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/pax-east-2012-day-1-lollipop-chainsaw-crimson-dragon-double-dragon-more

link

http://www.remotesynthesis.com/post.cfm/pax-east-2012-day-1-lollipop-chainsaw-crimson-dragon-double-dragon-more

pubDate

Fri, 06 Apr 2012 21:48:41 GMT

title

PAX East 2012 Day 1 - Lollipop Chainsaw, Crimson Dragon, Double Dragon & more

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

<a href="http://www.fitc.ca/events/about/?event=124">FITC Toronto</a> is right around the corner and this year it features a ton of speakers focused on creating web applications with HTML5, CSS3 and JavaScript. Over the next couple weeks leading up to the conference, I plan to publish a handful of interviews with some of the speakers who have sessions focused on these topics. The first interview is with <a href="http://www.valhead.com/">Val Head</a> who is doing a session entitled "<a href="http://www.fitc.ca/events/presentations/presentation.cfm?event=124&presentation_id=1849">Designing Motion with CSS3 and JavaScript</a>" that focuses on helping web designers and developers leverage CSS3 and JavaScript for animations and transitions that enhance their application experience. She also has a short <a href="http://www.fitc.ca/events/schedule/?event=124">session on typography</a>. In addition to presenting, Val writes for <a href="http://creativejs.com/author/val/">CreativeJS</a> and, recently, for <a href="http://www.netmagazine.com/tutorials/get-more-out-your-css-transitions-jquery">.net Magazine</a> and runs a popular conference called Web Design Day. You can also follow Val on Twitter via <a href="http://www.twitter.com/vlh">@vlh</a>. Tell me a little bit about your skills and background? By your bio, you seem to be one of those rare designer/developers that people talk about? I guess I am! Though I hope we're not really that rare. I got my start in web design because my band needed a web site. I like to joke that that's how everyone got started making web sites because I've met so many colleagues with similar stories. Along the way I took an animation workshop that introduced me to animating with code in Flash. I'd never thought of programming as being something that was at all creative before that and it pretty much had me hooked. So that got me started in Flash, which lead to dabbling in Processing, and then most recently JavaScript. (Well, technically I've been using JavaScript for years, but it's only recently gotten fun so it seems new.) I've done lots of design work along the way as well. And combining the two as much as possible. Luckily, there's lots of opportunity for that when you're working on interactive projects. Your presentation at FITC is about using transitions. This seems like one of those things that developers like myself might overuse because it “looks cool” without giving much thought about the meaning a transition might be conveying to a user. Can you explain why you think transitions is an important topic? Transitions especially are an opportunity to communicate and add a little touch of surprise and delight to your site or app. The best transitions are ones that feel right and look cool. The same goes for any animations in an interface really. But that's easier said than done! Like you mentioned it's easy to overdo them, or just kind of plop them anywhere you can think of with no real plan. Those are both really common mistakes. Along with creating something that's so complicated it only gets in the way. So there's a lot to look out for besides just what's technically possible. You've written in the past about using JavaScript to enhance your CSS transitions. What kind of limitations do you see in CSS transitions that JavaScript can overcome? CSS transitions and animations are a huge step in what CSS can do, and they can really come in handy. But they often fall short when it comes to interactivity. If you want to get at all sophisticated with when or how you trigger your CSS animations/transitions, you have to turn to JavaScript to help you out. CSS and JavaScript have been working together for a long time though and this is a great way to pair them up. You can take advantage of what each does well and get creative with it. As a writer for CreativeJS, you cover a lot of cutting edge HTML5 and JavaScript projects. Are there any projects right now that you are particularly excited about? There's been so many amazing projects turning up lately, it's much too hard to pick just one. The thing I'm most excited about is how fast browser performance is improving. It's great when you go back to a demo from a few months ago and find that it runs noticeably faster. I think the "browser wars" (if you can still call it that) are really working in our favour there. A couple favourites that we've posted about recently are the multiplayer music making with Plink (<a href="http://creativejs.com/2012/03/plink/)">http://creativejs.com/2012/03/plink/)</a> and the highly entertaining MMOsteroids April fools joke. (<a href="http://creativejs.com/2012/04/fake-mmo-april-fool-makes-hacker-news/)">http://creativejs.com/2012/04/fake-mmo-april-fool-makes-hacker-news/)</a> Why should FITC attendees go to your session? What will they learn? I'll be talking all about the why and how of making awesome animations and transitions with web standards. So, anyone interest in those things should definitely come. I'll also be showing handy tricks for giving your animations and transitions that extra bit of polish, and some special considerations that go along with animating DOM elements. Some naming and shaming of sites that have done it all terribly wrong will come up I'm sure. Along with my suggestions on how they could do it better, of course :)

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/interview-with-val-head-on-css3-javascript-and-more

link

http://www.remotesynthesis.com/post.cfm/interview-with-val-head-on-css3-javascript-and-more

pubDate

Wed, 04 Apr 2012 19:01:54 GMT

title

Interview with Val Head on CSS3, JavaScript and more

Stomach Contents: Structure - struct

category

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
value	CSS3

Stomach Contents: Structure - struct
value	HTML5

Stomach Contents: Structure - struct
value	JavaScript

description

Stomach Contents: Structure - struct

value

As anyone who has viewed their web application on a mobile device, or developed one specifically for mobile, knows, by default your site does not understand gestures. Sure, tapping on a link acts the same as clicking with a mouse, but even that limited default gesture support doesn’t always behave the way we’d hoped. Thankfully, if you would like to add more advanced gesture support to your web application, there are JavaScript libraries out there to support this. In this post, we’ll take a look at one of them, <a href="http://eightmedia.github.com/hammer.js/">Hammer.js</a>, which was created by the team at <a href="http://www.eight.nl/" title="internetbureau">Eight Media</a>. Hammer.js was released recently and allows you to easily add support for tap, double-tap, hold, drag and transform gestures. In order to take a look at this library, I whipped up a quick demo. Since my design skills are only slightly better than <a href="http://coldfusionjedi.com">Ray Camden</a>’s (i.e. they are bad ;-) ), I decided to rely on a nice demo application created by <a href="http://www.valhead.com/">Val Head</a> in her recent <a href="http://www.netmagazine.com/tutorials/get-more-out-your-css-transitions-jquery">article for .net Magazine</a>. In this demo, she was showing how to use jQuery events to trigger CSS transitions. My demo will do the same but rely on touch events via Hammer.js instead of click events in jQuery. Using Hammer.js is pretty simple. While the documentation at the moment seems pretty limited, it does include some good examples that illustrate various uses as well as the source itself is very easy to read and discern what you need to know. Essentially, you instantiate Hammer on a DOM object and add a callback function for whatever gesture events you want to support. You can use Hammer.js independently or you can use the jQuery plugin. In the case of my demo, I am using the jQuery plugin as it simplifies quickly adding gesture events to multiple DOM elements. Let’s take a look at the code: <code><!DOCTYPE html> <html lang="en"> <head>    <title>CSS transitions triggered with Hammer.js demo</title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    <script src="hammer.js"></script>    <script src="jquery.hammer.js"></script> <style>    /* a few initial styles for our containing elements */    body {background:#282828 url(img/texture.jpg);}    #wrap {width:300px; height:300px; position:relative; overflow:hidden; margin:3em auto;}    #blocks {width:300px; height:300px; position:absolute; top:0; left:0; overflow:hidden;}        /* our "mask" image positions over top of the animated blocks */    .mask {position:absolute; top:118px; left:0; z-index:500; background-image: url("img/abcmask.png"); width: 269px; height: 160px;}        /*shared styles and animation definitions for all of our animated blocks*/    .col {       width:72px;       height:144px;       position:absolute;       top:10px;       -webkit-transition: all 225ms cubic-bezier(0.545, 0.165, 0.835, 0.425);        -moz-transition: all 225ms cubic-bezier(0.545, 0.165, 0.835, 0.425);        -ms-transition: all 225ms cubic-bezier(0.545, 0.165, 0.835, 0.425);        -o-transition: all 225ms cubic-bezier(0.545, 0.165, 0.835, 0.425);        transition: all 225ms cubic-bezier(0.545, 0.165, 0.835, 0.425); /* custom */    }        /* specific images and top positions for each of our blocks */    .col1 {background: url(img/aslider.png); top:22px; left:26px;}    .col2 {background:url(img/bslider.png); top:4px; left: 100px;}    .col3 {background:url(img/cslider.png); top:30px; left:174px;}    /* the class we'll toggle with jQuery to trigger our transitions */    .col-anim {top:96px;} </style> <script> // assign toggle the col-anim class for each of our columns when they are clicked $(function() {       // bind hammer to our columns tp listen for down drag    $(".col").hammer({prevent_default:true}).bind("drag", function(ev) {       if (ev.direction == "down") {          $(this).addClass("col-anim");       }    });    // once the columns are down, the drag event is triggered on the mask    $(".mask").hammer({prevent_default:true}).bind("drag", function(ev) {       // check the position in the mask to determine which item the user attempted to drag       if (ev.direction == "up") {          if (ev.position.x > 26 && ev.position.x < 98) {             $(".col1").removeClass("col-anim");          }          else if (ev.position.x > 100 && ev.position.x < 172) {             $(".col2").removeClass("col-anim");          }          else if (ev.position.x > 174 && ev.position.x < 246) {             $(".col3").removeClass("col-anim");          }       }    }); }); </script> </head> <body>    <div id="wrap">       <div class="mask"></div>       <div id="blocks">          <div class="col col1" ></div>          <div class="col col2"></div>          <div class="col col3"></div>       </div>    </div> </body> </html></code> For the most part I have left Val’s HTML and CSS intact. The only exception being that I changed the mask that was an image to be a div with an image background. The reason for this is in my desktop browser testing on Chrome, the browser actually supported dragging images by default (say, to the menu bar or desktop). Using a div with a background image prevented this unwanted behavior. Nonetheless, it also brings up a good point, which is that Hammer.js does a pretty good job of translating these gestures to your desktop mouse, allowing you to do a good deal of testing without a touch-enabled device. In fact, you can <a href="http://remotesynthesis.com/projects/hammerjs/">run this demo</a> on your laptop or device to see what I mean. Taking a closer look at the JavaScript code, you can see that within the jQuery load function I am first adding a listener for the drag function to all of the columns. I am supplying a configuration parameter, prevent_default, as this "seemed" to improve the reliability of capturing the drag event on an actual device (plus the source comments indicate behavior "might be buggy" when precent_default is left to false, which is the default value). There are a number of other configuration options for various events which you can easily find in the <a href="https://github.com/EightMedia/hammer.js/blob/master/hammer.js">source</a>. The callback function I define simply relies on the event passed back by Hammer.js to determine if you dragged the element down and, if so, it adds the style to the column triggering the CSS transition effect. Capturing the drag up though was slightly more complicated as the column elements were now behind the image mask. This meant that my touch events would not be triggered on the columns. Therefore, I ended up binding a drag event to the entire mask looking for up drags. Since each drag event in Hammer.js provides me a position object indicating the x and y coordinates of the touch event, I relied on this, plus the fixed position of the column elements, to determine which column you are dragging up. To be clear, I am only adding and removing CSS classes to trigger a CSS transition up and down. You could make a more advanced version of this demo by using Hammer.js to capture the drag start and end events as well as the intermediate drag coordinates to allow more direct control of the target object placement, as they do in <a href="http://eightmedia.github.com/hammer.js/drag.html">their drag demo</a>. Still, I hope that this illustrated how easy it is to use this library to touch-enable your web applications.

guid

Stomach Contents: Structure - struct
isPermaLink	NO
value	http://www.remotesynthesis.com/post.cfm/add-gesture-support-to-your-web-application-via-hammer-js

link

http://www.remotesynthesis.com/post.cfm/add-gesture-support-to-your-web-application-via-hammer-js

pubDate

Tue, 03 Apr 2012 12:37:33 GMT

title

Add Gesture Support to Your Web Application via Hammer.js

link

http://www.remotesynthesis.com/

title

Remote Synthesis

version

rss_2.0

RemoteSynthesis rich internet application goodness

RemoteSynthesis