#98: AFNetworking, Helios, and mobile & iOS development with Mattt Thompson

Adam Stacoviak, Andrew Thorp and Kenneth Reitz talk with Mattt Thompson, Mobile Lead at Heroku, about his many contributions to open source. You can tune-in LIVE on Tuesday’s at 5pm CST. AFNetworking/AFNetworking AFNetworking – a delightful networking framework for iOS and OSX mattt (Mattt Thompson) Mattt Thompson (mattt) on Twitter Helios helios-framework/helios Postgres.app, an easier […]

gauges-android – Gaug.es Android Application #

Today GitHub announced Gaug.es for Android, but what you might have missed in that post was that they open sourced the code for it (the Android app) as well.

Gaug.es for Android

While Gaug.es remains a paid service, the Android app is free and is also open source under the Apache 2.0 license.

Gaug.es for Android is built on top of the Gaug.es API which also happens to have its realtime features built using Pusher, our lovely sponsor!

AnnouncementSource on GitHub

iOS-boilerplate: A base boilerplate template for iOS #

iOS Boilerplate is a base template for iOS apps inspired by HTML5 boilerplate.

iOS Boilerplate is tested on iPhone / iPod Touch devices with iOS 4.0 or greater. In a future it might support universal applications (iPhone + iPad)

As of this posting, iOS Boilerplate is just an XCode project and is planned to be released as a true XCode template in the near future.

Check out the source on GitHub and the project’s homepage for more details.

#64: Pow, Rails 3.1 Asset Pipeline, Cinco, CoffeeScript, and more with Sam Stephenson

Adam and Wynn caught up with Sam Stephenson from 37Signals to talk about his his many open source projects and developing Basecamp Mobile. Items mentioned in the show: Nathan Smith, friend of the show, creator of 960.gs, Adapt, Formalize, and featured in Episode 0.3.2 Sam Stephenson, programmer at 37signals, creator of massive amounts of open […]

Leaflet: JavaScript library for mobile and web open mapping #

While Google has done much to advance the art and science of maps on
the web and mobile devices, there is still room for innovation on a
number of fronts. OpenStreetMap, for
instance brings the power of social curation (read: wiki) to maps.

Leaflet from
CloudMade aims to create an elegant, open
JavaScript API for mapping for both the web and mobile devices.
Supporting OpenStreetMap, Bing, and
WMS, Leaflet offers a
unified API across a number of providers.

screencap

In addition to standard mapping features such as tile layers, polylins,
polygons, circles, markers, poups, image overlays, and pan/zoom/move
controls, one of Leaflet’s killer features is its pure CSS3 popups.

While powerful, the Leaflet API is also quite simple:

// initialize the map on the "map" div with a given center and zoom
var map = new L.Map('map', {
    center: new L.LatLng(51.505, -0.09),
    zoom: 13
});

// create a CloudMade tile layer
var cloudmadeUrl =
'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});

// add the CloudMade layer to the map
map.addLayer(cloudmade);

Project creator Vladimir Agafonkin also notes
that the project makes use of CSS3 3D Transforms and Transitions “to be smooth
and efficient on mobile platforms.”

Be sure and check out the great web
site
for advanced usage and examples as
well.

[Source on GitHub]

scrollability: Native scrolling for the mobile web #

Perhaps even more than advanced features like GPS, camera access, contacts, and
App stores, the lack of viewport-aware position:fixed is what drives
many apps to be developed as a native experience.

Joe Hewitt who brought us
Firebug and the Facebook iPhone app has
released Scrollability, a
single script with no external dependencies that allows developers to
achieve near-native feeling scrolling, just by adding a few CSS classes
to their markup. In just a few hours of its release, the project has over 250 watchers on GitHub.

Joe includes a simple demo for iOS devices that demonstrates super smooth scrolling as well as fixed header and footer elements.

Screencap

[Source on GitHub]

Titanium Modules: Starter pack for extending Appcelerator Titanium #

If you caught Episode 0.0.8 with Marshall Culpepper, then you already know that Appcelerator Titanium Mobile is a great way for JavaScript developers to write native mobile applications for iOS and Android without needing to learn Objective-C or Java.

However, if you do speak Objective-C or Java you might not know you can extend Titanium and provide JavaScript hooks for your own code that you might want to share with other projects (and even other folks) via custom modules. You can even build extensions in JavaScript as well. The Ti+Plus Modules Starter Pack is a bundle of sample projects demonstrating how to extend Titanium. The source code for these projects augment the iOS module development and Android module development guides on the Titanium documentation site.

Be sure to check out the sample source for Flurry, Paint, and this one from AdMob:

#import "TiAdmobModule.h"
#import "TiBase.h"
#import "TiHost.h"
#import "TiUtils.h"

@implementation TiAdmobModule

// this is generated for your module, please do not change it
-(id)moduleGUID
{
  return @"0d005e93-9980-4739-9e41-fd1129c8ff32";
}

// this is generated for your module, please do not change it
-(NSString*)moduleId
{
  return @"ti.admob";
}

#pragma mark Lifecycle

-(void)startup
{
  // this method is called when the module is first loaded
  // you *must* call the superclass
  [super startup];

  NSLog(@"[INFO] AdMob module loaded",self);
}

-(void)shutdown:(id)sender
{
  // this method is called when the module is being unloaded
  // typically this is during shutdown. make sure you don't do too
  // much processing here or the app will be quit forceably

  // you *must* call the superclass
  [super shutdown:sender];
}

If you’d like to get started with Titanium Mobile, I’ll be joining Kevin and Marshall at Red Dirt Ruby Conf and doing a special Zero-to-App training session to get you up and running with Titanium. We’ll even throw in a little CoffeeScript.

Episode 0.3.9 – Scripty2, Zepto.js, Vapor.js, and more with Thomas Fuchs

Wynn caught up with Thomas Fuchs to talk about script.aculo.us, Scripty2, Zepto.js and the future of Prototype. Items mentioned in the show: The Magic Roundabout is crazy Wynn got his UK badge on Gowalla script.aculo.us JavaScript effects framework built on top of Prototype Prototype – JavaScript Framework that aims to ease development of dynamic web […]

Deutsche Telekom releases Unify, metaframework for mobile built on HTML5, JavaScript, and Sass #

At JSConf.eu 2010, Deutsche Telekom took the wraps off of their Unify Project which aims to provide a unified API for building cross-platform mobile and desktop applications.

Unify looks to be a metaframework of sorts, wrapping other popular frameworks:

  • qooxdoo is a comprehensive and innovative framework for creating rich internet applications (RIAs) using object-oriented JavaScript
  • PhoneGap provides a native wrapper for web apps, providing interfaces for device features not supported with browser-based apps alone.
  • Sass is a superset of CSS3 syntax and provides programmatic features for CSS such as variables, mixins, and selector nesting, covered way back in Episode 0.0.1
  • Adobe AIR provides a cross-platform runtime for desktop applications.

Unify currently supports iOS, Android, and WebOS devices and plans to support BlackBerry OS 6.0 soon.

API

The Unify API provides a single progamming model to features such as IO, storage, cache, geolocation, and even UI.

Here’s the ScrollView class as an example:

unify.ui.mobile.ScrollView
  • Scrolling could be enabled/disabled separately for each axis.
  • Indicator style is changable through an API call (per instance)
  • Flips back when scrolling out of allowed ranges.
  • Smooth animations for deleleration and flip back
  • Page based scrolling where the content is auto-splitted into pages which are used for snapping into

Keep an eye on the Unify Roadmap for updates and real-world implementations.

[Source on GitHub] [Homepage]

jsconsole: JavaScript console now on the iPhone, iPad #

jsconsole

JSConsole from Remy Sharp is a great way to play with JavaScript in the browser, especially during live coding sessions.

Just like Firebug or the WebKit JavaScript consoles, simply type an expression and JSConsole will evaluate it:

Math.floor(-3.15)
> -4

JSConsole also serves up permalinks for each command: http://jsconsole.com/?Math.floor(-3.15). You can even load external JavaScript libraries with a single command:

:load jquery

Remy has now ported the console to mobile devices using PhoneGap, complete with Websockets support.

Screenshot of jsconsole on iPhone

[JSConsole on GitHub][JSConsole for iOS on GitHub]

snoopy and sniffer: Detection scripts and bookmarklets for mobile browsers #

One of the great things about being a front-end web developer is that you can always improve your craft. You can inspect the work of others by simply viewing the source for a web page to see what JavaScript libraries were used and how.

Mark Perkins offers a couple of projects to make the task a bit easier, especially on mobile devices.

Snoopy

Snoopy is a bookmarklet that lets you snoop on pages on mobile devices like the iPad (although it works on the desktop nicely, too). Simply add the script as a bookmark, navigate to your target page, and launch the bookmarklet. Here’s a screenshot of Snoopy snooping on the Modernizr web site.

screenshot

Sniffer

Snoopy uses Sniffer under the hood, if you want to use the detection in a close-to-the-metal script form.

Sniffer will detect:

  • Page info, including doctype and charset
  • Popular JavaScript libraries like jQuery, jQuery UI, Prototype, Dojo, Modernizr, and more
  • Popular CMS tools such as WordPress, Joomla, and MovableType
  • Analytics packages from Google, Clicky, and others
  • Typography toolkits like Cufon, TypeKit, sIFR, and Google’s Webfonts

[Snoopy on GitHub] [Sniffer on GitHub]

zepto.js: Minimalist JavaScript framework for mobile WebKit with jQuery-like chaining #

It may seem strange that the author of Prototype-based script.aculo.us would embark on creating a new jQuery-esque JavaScript library for mobile devices, but that’s exactly what Thomas Fuchs has done with zepto.js.

One reason JavaScript frameworks have become popular is because they abstract browser differences and let the developer focus on the work at hand, not on how it’s done. Since zepto.js targets only Webkit browsers, a lot of the cruft found in other frameworks can be eliminated. Modern JavaScript features such as forEach can be assumed so the framework is leaner, critical for building mobile apps.

zepto.js is under heavy development (growing by 2x since we first spotted it yesterday), but looks to deliver on its goal of being a “~2k library that handles most basic dredge work for you in a nice API so you can concentrate on getting stuff done.”

Features

zepto.js uses the familiar $ function and includes the usual suspects:

get(): return array of all elements found
get(0): return first element found
html('new html'): set the contents of the element(s)
css('css properties'): set styles of the element(s)
append, prepend: like html, but append or prepend to element contents

Ajax support

Methods you’d expect for Ajax-fied GETs and POSTs are there as well:

$.get(url, callback)
$.post(url, callback)
$.getJSON(url, callback)

Installing and using

Thomas recommends not linking to zepto.js directly in your document <head>, rather copy and paste the contents of zepto.min.js directly into a <script> tag.

Thomas knows a thing or two about mobile optimization. Be sure and catch his thoughts in how he optimized Every Time Zone for mobile devices.

[Source on GitHub]

html5-boilerplate: Best practices starting point project for HTML5 and mobile web apps #

While HTML5 is expanding in definition to include any whizz-bang feature in the post rounded corner web era, implementing actual HTML5 in your web app can be confusing. It’s a fast moving landscape that touches everything from traditional web apps to mobile.

Paul Irish, the Google Chrome dev relations guy who gave us the bulletproof syntax for @font-face, brings us his HTML5 Boilerplate a great tutorial/starting point for implementing a number of best practices in your desktop and mobile web applications including

  • HTML5 <!doctype> and CSS reset
  • Handheld stylesheets
  • CSS media queries for advanced mobile device targeting (even portrait or landscape layouts)
  • Paul’s Modernizr script for detecting device capabilities such as Modernizr.video.ogg

The current version is heavily documented. Paul promises a more slim, production ready version soon.

Check out the source on GitHub and the HTML5 Boilerplate homepage

Episode 0.2.8 – Mobile web development with John Resig

Adam and Wynn caught up with John Resig at TXJS and talked about mobile web development with jQuery and TestSwarm, a continuous integration project from Mozilla Labs. Items mentioned in the show: TestSwarm – Distributed continuous integration testing for JavaScript. Pro JavaScript Techniques John’s JavaScript book Secrets of the JavaScript Ninja John’s upcoming book of […]

Episode 0.0.8 – Marshall Culpepper from Appcelerator Titanium

Adam and Wynn spoke with Marshall Culpepper from Appcelerator about their open source projects Titanium Desktop and Titanium Mobile. Items mentioned in the show RaphaelJS WebGL CodeStrong Titanium developer docs Fix Me Titanium Desktop on GitHub Titanium Mobile on GitHub

Changelog Ads Ship it!

Continuous Deployment made simple. Codeship runs your tests & continuously deploys your code. Try it now for free!