iOS5 introduced a new CSS property for allowing sections of content to be fluidly scrolled. We’ve integrated this into jQTouch and made it even easier: Just add a class of
.scroll onto your element, and it will vertically flex (so items around the div, like
.toolbar are automatically pushed to the top/bottom) and become scrollable.
Because this is an experimental feature, it can be disabled by setting
useTouchScroll: false in the initialization options.
One of the biggest goals of the release was simply reduced file size and improved performance. Here’s a quick chart comparing default download size for the previous release of jQTouch (beta 3), the current version of jQuery Mobile, and the upcoming jQTouch beta 4.
Vastly Improved Theming System
jQTouch now uses Sass and Compass for its theming, making the stylesheets way more maintainable and most importantly, way more flexible. The image above show what I was able to do in a few minutes, just changing a few simple variables. Additionally, we’ve gone through and replaced all of the images with CSS: Even things like the default “carbon fiber” header are created in CSS, so it can shift colors just as easily as the rest of your theme. A special thanks as well to Drew Wilson, whose research helped in creating the CSS-based back button — which again, is built completely in CSS and changes color with the rest of your theme.
You can see the start of the new theming documentation here.
jQTouch b4 will ship with both Zepto.js and jQuery as framework options. For those who don’t know, Zepto.js is a project by Thomas Fuchs that essentially recreates the jQuery API (dollar sign selector engine, $.ajax, etc.), but optimized for WebKit, our target mobile platform in iOS, Android, BlackBerry, and WebOS. The primary win here is filesize/loading speed — Zepto.js comes in, minified and gzipped, at ~8kb, while jQuery, under the same settings, comes in at about 34.7kb. I’ll post more detailed information on this improvement later, as I go more in depth about loading times. As it provides a similar API to jQuery at a fraction of the weight, Zepto.js will be the default library moving forward.
The 12 Hours of jQTouch
For the next 12 hours, I will be posting various bits of information regarding the upcoming release of jQTouch, beta 4. It’s been a while since we’ve had a proper release, but I’ve been secretly toiling for the past few months (alongside Thomas Yip, aka Beedesk), on a whole new release, with some fantastic features and fixes. It’s my goal to wrap up the evening tonight with releasing beta 4 (or at least a release candidate).
If you haven’t tried the recent release yet, you can clone/fork it from GitHub now. The official release will be a .zip download.
When we started designing our next jQTouch application we needed a simple way to try out different color schemes. We used a customized layout from an earlier app, but we really wanted to try some new colors. Changing each individual color, gradient, shadow, etc… was a time consuming task. So we started looking for a better way.
I got fed up with the bloated gym apps that were in the App Store, so I built one that only has the features I need:
- An easy way to organize specific exercises into a collection of “workout packs.”
- A quick way to record sets and sessions at the gym, storing data for posterity and long-term analysis.
- Data storage in a standardized format that will allow me to import into Excel easily, and backup and restore in a pinch.
…and not the features I don’t need:
- Videos of how to properly do an exercise.
- A pre-populated collection of thousands of exercises I will never do.
- A complicated scheduling system.
- A diet journal.
It’s called Pump. You can get it here.
It’s built using jQTouch and PhoneGap, which has disappointingly twitchy quasi-native behavior. I’m planning for the next version to be entirely native.