Christophe Coenraets

I have been delivering a few PhoneGap Architecture and Performance talks in recent weeks. One of the performance techniques I talk about is –no surprise– the use of Hardware (GPU) Accelerated animations when available on the device. A typical example in a mobile application, is to hardware accelerate your page transitions. Even though this capability has been around for some time now, I still get a lot of questions about it. So I figured I would discuss it in this blog post.

Basic Infrastructure

Here is a typical set up for sliding pages in an out of the viewport in a mobile app:

The white box in the middle represents the browser viewport (the window through which the visible part of the document is seen): that is where the current page of your app is displayed at the full (100%) width and height of the viewport.
Continue Reading →

I will be delivering a talk titled “Modern Tools for the Modern Web” at Skillsmatter in London tonight (Wednesday March 6th) at 6:30pm. It’s free and open to all. Simply register here.

I’ll be going over the new Edge Tools and Services (Edge Animate, Edge Reflow, Edge Inspect, Edge Code, PhoneGap and PhoneGap Build, etc), and discuss how they can be used to build modern content and applications. The Edge Tools and Services are all part of the Creative Cloud.
Continue Reading →

I’m excited to be speaking at QCon London again this year. The conference is next week, from Wednesday March 6th to Friday March 8th. As always at QCon, the sessions and the speaker lineup look great. I will be speaking in the “Next Generation Mobile Apps” track on Thursday. This year I’ll go well beyond the PhoneGap basics and focus on Architecting PhoneGap Applications. There are many other inspiring tracks and sessions.

I know this is last minute, but if you are interested in attending the conference, you can save £100 off the registration fee by using the promotion code COEN100. Hope to see some of you there!

Thanks to all of you who attended my “Architecting a PhoneGap Application” TechLive session on Tuesday, and thanks also for the great feedback. The recording is available here. A lot of my content was based on my PhoneGap Tutorial available here.

As promised, here are answers to the questions I didn’t have time to answer on Tuesday:

Q: I built an app using PhoneGap, jQuery, and LESS. There is a delay before the app responds to a button click.

A: After you tap a button, mobile browsers wait for about 300ms before they fire the click event. This is to make sure you are actually not performing a double tap. One simple solution is to use the touchend event instead of click. But there are two issues with that approach:
Continue Reading →

I’ve recently been working on a few applications that integrate with Facebook. As a reference for myself and other developers building similar applications, I thought it would be useful to put together a sample application that demonstrates some commonly used integration scenarios and workflows when using the Facebook JavaScript SDK and the Graph API. So, Sociogram is a sample application that demonstrates how to:
Continue Reading →

During the last couple of months, I have been on the road presenting our new HTML tools as part of the Create the Web tour with many other members of the team.

The tour was a lot of fun with a lot of great feedback from designers and developers. The main challenge of the event was to fit so much content into a short two-hour session. But it was a good challenge! It forced us to be laser focused, and clearly communicate the essence of each product in 5 to 10 minutes.

Since 5 minutes is also a good length for a video, I thought it would be a good idea to capture that succinct message in a series of screencasts. I posted the first one (Synchronized Browsing and Remote Inspection with Adobe Edge Inspect) last week. Here is the second one: “PhoneGap and PhoneGap Build in 5 minutes”.

I recorded a screencast providing a comprehensive overview of Edge Inspect.

Watch it here:

Edge Inspect is a new synchronized browsing, previewing, and remote inspection tool for designers, developers, and testers. You “drive” from Google Chrome on your computer, and all the connected devices follow along, allowing you to effortlessly preview a site or an application on multiple devices. If you identify a problem on a specific device, you can remotely inspect the application running on that device using the familiar Google Developer Tools interface on your computer: You can remotely view and manipulate the DOM, access the web resources, and even use the console to interact with the site running on the remote device.

You can find more information about Edge Inspect and the other Edge tools here.

A couple of weeks ago, I delivered a full day PhoneGap workshop at QCon San Francisco. The workshop went very well, and I thought the materials could be useful to a larger audience. So I turned the workshop instructions into more detailed tutorial instructions. This is a lot more than the usual Getting Started tutorial: In addition to introducing you to key PhoneGap APIs such as LocalStorage, Database, Notification, Geolocation, Contacts, and Camera, the tutorial focuses on how to architect a real-life PhoneGap application using a Single Page Architecture and HTML templates. Topics include:

• How to use different local data storage strategies.
• How to use several PhoneGap APIs such as Geolocation, Contacts, and Camera.
• How to handle specific mobile problems such as touch events, scrolling, styling, page transitions, etc.
• How to build an application using a single page architecture and HTML templates.
• How to build (compile and package) an application for 6 platforms using PhoneGap Build.

To complete this tutorial, all you need is a code editor, a modern browser, and a connection to the Internet.

The tutorial is available here.

A few months ago, Adobe unveiled Brackets, a new code editor for HTML, CSS and JavaScript that is written in HTML, CSS and JavaScript. Brackets is open source and is being developed in the open here. Brackets is still in early development and is not ready for general use yet.

One thing that I’m really excited about is the extensibility layer in Brackets. It is really easy to write extensions that augment Brackets capabilities in various ways. Just like Brackets itself, you write Brackets extensions using JavaScript, HTML, and CSS. A list of existing extensions is maintained here.

So, I decided to give it a try myself, and create a Dropbox integration extension that allows you to open a Dropbox folder in Brackets, edit the Dropbox files in the Brackets editors, and save the modified files back to Dropbox. The idea behind this extension is to be able to work on a project hosted in Dropbox from any computer without having to install and configure Dropbox. The extension uses dropbox.js to access the Dropbox OAuth and REST APIs.

Watch the video:

Continue Reading →

Every programming language, platform, or library has its go-to web site for documentation and API reference: You probably go here if you are a Java developer, here for PHP, here for Ruby, here for jQuery, here or here for your database documentation needs, etc.

But where do you go for HTML, JavaScript, and CSS documentation?
Continue Reading →

Social Networks

• Popular
• Latest
• Comments
• Tags

Follow @ccoenraets on Twitter