Tagged: HTML5

Navigation Drawer Pattern With Topcoat CSS Library

Recently I have been playing around with the Topcoat library. Essentially Topcoat is a set of pure CSS-based components for building high performance HTML applications. These apps can be either hosted HTML web apps or native apps packaged with PhoneGap/Cordova. In the app that I’m currently working on I wanted to have a slideable navigation bar that follows the so-called Drawer or Off Canvas UI pattern. Topcoat itself doesn’t come with a built-in implementation of it but all the necessary components are there, so it was just a matter of few lines of CSS and JavaScript to have it running beautifully. In my implementation I also used a simple media query for high-resolution screens like on tablets or desktops where slideable navigation is not necessary. Continue reading

Responsive Inspector (beta) released!

Responsive Inspector logoI’m really proud to announce a beta release of Responsive Inspector extension for the Google Chrome browser. It’s a little side project that I’ve been working on together with Filip Łysyszyn – a colleague from Adobe and a great UI/UX designer. In a nutshell, Responsive Inspector allows viewing defined media queries of visited websites. It is very useful when developing responsive web layouts as it can show what min-width or max-width media queries are specified in CSS stylesheets. In addition it also enables pixel perfect browser resizing, taking and saving whole page screenshots, CSS media query code viewing, and sharing web designs on Behance service as Work In Progress.

You can find it here in the Chrome Web Store. Remember it is a beta release, so if you find any bugs or you would like to share your feedback with us you can use this contact form. Below you will find a screen shot of Responsive Inspector in action and a short video with an overview of all of its features.

Responsive Inspector screen shot

PhoneGap and Force.com in 69 minutes

I’m proud to present a series of seven video tutorials that teach how to build PhoneGap applications connected to Force.com (Salesforce). It is over an hour of content that goes step-by-step from project set up to packaging of applications ready for multiple platforms.
Continue reading

Fixing flickers & jumps of jQuery Mobile transitions in PhoneGap apps

Recently I have been working on a mobile app that uses jQuery Mobile 1.1.0 as a UI framework. In general I’ve had really good experience with jQuery Mobile except it gave me some headaches when it came to page transitions. Some really weird flickers and jumps started to popup when I deployed it on the iOS 5.x platform as a PhoneGap app. This was something I didn’t experience when the same code was running in a device browser. After a few hours of digging into the issue I came up with a workaround that I didn’t find anywhere else and that solved all my problems :) I actually have seen all kinds of fixes to similar issues but I think this one is least invasive, because it doesn’t involve any framework code tweaks.
Continue reading

HTML5 for App Developers: PhoneGap Build

Below you can find a short video tutorial on how to quickly get up and running with the PhoneGap Build service. PhoneGap Build allows you to compile and package your PhoneGap/Cordova apps for different platforms using an online service. This is especially useful when you are doing iOS development and you don’t have access to a Mac machine and Xcode. The same thing also applies if you would want to publish your app to Windows Phone devices and you are not a PC gal or guy 😉
Continue reading

JavaScript Prototypal inheritance for class’ical developers

Developers who are learning JavaScript and have prior experience with strongly typed classical languages like Java, C#, or C++ often have trouble using the JavaScript inheritance model. Some even think that JavaScript doesn’t support inheritance at least that’s what I thought when I first learned it. Well, I was completely wrong!
Continue reading

Intro to BackStack a Backbone.js views navigation library

Recently I’ve been working on several projects using PhoneGap/Cordova. These projects had a common requirement, and that was to have a custom UI look while preserving the interactions and feel that are common to mobile devices. Because of the custom UI look requirement I didn’t want to use any of the available mobile UI frameworks like jQuery Mobile, Sencha Touch, or jQTouch. Of course, those frameworks are really great and can save you ton of work, but at the same time they come with their own look-and-feel that often can be hard to re-skin to achieve what the app designer has proposed. That is why I decided to stick with pure HTML/CSS elements as much as possible and in some cases to build missing components from scratch. That is how BackStack came to life. In few simple words BackStack is an extension for Backbone.js that allows you to navigate between app views with nice mobile-style slide transitions, fade transitions, and no-effect transitions.
Continue reading