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).

So what’s a developer to do? Well, as it turns out we can use some JavaScript fanciness to help us out. We can use iOS’s gesture events to dynamically rescale the viewport tag. Shi Chuan from the HTML5 Boilerplate team offered up his fix, with Paul Irish and Matthias Bynens offering up their own renditions.

Mobile Boilerplate

You’ve probably heard of HTML5 Boilerplate. Well, now there’s a Mobile Boilerplate to check out! Interestingly, this one comes with no JavaScript library prepackaged (the desktop version bundles jQuery with it).

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.

CommunityJS

CommunityJS is a webpage, not a library! Its simple purpose is to provide a place to find JavaScript meetups around the world. It’s also a nice way of indirectly showing hotspots of JavaScript jobs (the folks going to the meetups likely have jobs nearby).

Curiously enough, Asia only has one meetup in Singapore. There’s either lots of meetups still unaccounted for, or this means there’s a TON of opportunity for folks to organize new meetups there! It would be nice to see some meetups sprout up in China and Japan in particular. We know there’s people there who work with JavaScript!

Ender.js

If you’ve been following along these past few weeks, you’ll know that Dustin Diaz has been getting quite a bit of attention for releasing, one after the other, a few lightweight JavaScript utilities such as reqwest (an XHR wrapper), qwery (a selector engine), $script.js (a JavaScript loader), and tiny DOMReady code. These, along with other open-source components written by some other folks, have been subsumed into Ender.js.

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!

Upcoming Events

codeconf (GitHub) (April 9-10, 2011 in San Francisco, US)
Using AMD loaders, such as RequireJS, to write and manage modular javascript (Boston JavaScript) (April 11, 2011 in Boston)
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)

Tidbits

qooxdoo 1.4 and 1.3.1 released – qooxdoo, the most underrated JavaScript framework (at least according to Rey Bango), has released a bunch of new features in 1.4, including mobile support, a “Simple” theme, a new kitchen-sink-like Widget Browser, and more
A Recipe for a YUI 3 Application – Satyen (Daniel Barreiro) goes into detail about how to organize a YUI application
WebGL clouds by mrdoob
Sophisticated Sorting in JavaScript
The JavaScript Comma Operator
jsgif: A GIF player in JavaScript
jRumble
Slides: Rare JavaScript Operators
The JavaScript Disruption
ender
WebGL racecar
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
Native maps speed in Javascript
Physics engines for dummies
Video: why.js: Why JavaScript Matters (Douglas Crockford)
Felix’s Node.js Guide

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

4 Comments

  1. Grumpy says:

    Ok so in NewFire this was knocked under the January 7 post which says “Published: Today” for some reason…. I selected “Delete Items and Reset” in NewsFire and that redownloads the RSS articles in chronological order.

  2. Thanks for the shout out. “A Recipe for a YUI Application” was actually written by Satyam (aka Daniel Barreiro), one of our most prolific members of the YUI community.

  3. Satyam says:

    A Recipe for a YUI3 Application was not written by Satyen but by Daniel Barreiro, screen name Satyam, who is not a YUI Team member

  4. davidcalhoun says:

    Oops, sorry about that! It’s corrected now. :)

Leave a Reply




© webdevpublishing 2011