News roundup: iOS viewport fixes, Mobile Boilerplate, CommunityJS, Ender.js
iOS Viewport Fixes
With the rise of mobile, desktop developers have had to wrestle with new and uncharted territories, particularly in cases where there’s no close resemblance to a familiar feature on desktop browsers. One good example of this is changing screen orientation, which is roughly analogous to a resize event (which by the way gets fired, along with the orientationchange event where supported). However, the different mobile browser implementations bring all sorts of new troubles and unexpected behaviors.
One case in point is iOS, which has had a bug (feature?) for a long while now that results in unexpected behavior when rotating a device. For instance, after applying a proper viewport metatag with width=device-width, a page might load and display properly, but when the user rotates the screen, the content explodes outside of the current viewport, forcing them to resize the viewport to see the content. One common workaround has been to force the initial and maximum scale to 1 as well as setting user-scalable=no, which has the effect of not allowing users to pinch-zoom. This viewport tag has been on many major sites, including one I helped work on (Yahoo Mobile), but it turns out that people really like pinch-zooming. Developers like it too (see here and here).
Just as with the desktop version, even if you don’t want to bite the bullet and use the entire boilerplate, it’s a treasure trove of best practices and is definitely worth a look now and again as it evolves.
The full package come comes in at just 7k and strikes a balance between the much more minimalistic Zepto and the much more bloated jQuery. Still, I’m unsure if I’d use Ender, if even just for prototyping. I’d rather use something more familiar that’s more importantly time-tested and less prone to unexpected behavior (as John-David Dalton pointed out with the small DOMReady code). Time will probably fix that (and likely increase the bytesize by at least a little with all the edge cases out there). But if you happen to be looking for something lightweight, this might be a good place to start!
codeconf (GitHub) (April 9-10, 2011 in San Francisco, US)
Breaking Development: design and development for the mobile web (April 11-12, 2011 in Dallas, TX)
Faster Facebook (Web Performance SF) (April 13, 2011 in San Francisco)
jQuery Conference 2011 (April 16-17, 2011 in Mountain View)
An Event Apart Boston 2011 (May 2-4, 2011 in Boston)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
Google I/O 2011 (May 10-11, 2011 in San Francisco)
Web Directions Unplugged (May 12–13 2011, Seattle)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
BrazilJS (May 13-14, 2011 in Brazil)
TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)
A Recipe for a YUI 3 Application – Satyen (Daniel Barreiro) goes into detail about how to organize a YUI application
WebGL clouds by mrdoob
Why You Should Never Use jQuery Live
How to Build Asteroids with the Impact HTML5 Game Engine
Splitview plugin for jQuery Mobile on the iPad
Physics engines for dummies
Felix’s Node.js Guide