Tagged: JavaScript

Stay up-to-date with Node.js packages using npm-onupdate service

npm-onupdate-logoSome of you may know that I’ve been recently doing a lot of development using Node.js. One of my first creations that I’m really proud of (and one that is out there in the wild being used by my employer, Adobe) is the EventQs service. Of course when building EventQs I used several third-party packages (Node.js libs) starting with the Express framework and including libs like Moment.js for date manipulation. All of these are available through the npmjs.org registry, which is an essential element of Node development. One of the things I missed with the npmjs.org was some way to get notified when packages that I use are updated. I wanted to receive notifications without having to remember to periodically run commands like npm update or use the very helpful npm-police tool.

What I wanted were email notifications, which I could get even when I was asleep 😉 That is why I created this very simple service called npm-onupdate that is available here. Essentially it’s an NPM registry email notifications service that enables its users to stay up-to-date with the packages used in their Node.js projects. When an npm package is updated in the registry, users will receive an email message about it. Both the CLI tool and the server side code are open source and available on GitHub here and here (pull requests are welcome of course). For now the service is hosted on the OpenShift PaaS by Red Hat, with a single gear for a MongoDB and a two gear cluster for the Node.js app. Hopefully this will be enough to handle the load, at least for some time 😉

The main way of interacting with the npm-onupdate.info service is by using the npm-onupdate CLI tool, which is available from npmjs.org of course. Below is a list of commands that will get you up and running quickly. Please keep in mind that this is a beta release so things may not work as expected. If you happen to find any bugs or you have any feedback please report these through the issues page on GitHub. (The commands below use the express and ejs packages as examples.)

$ npm install -g npm-onupdate

Adding new package alert
$ npm-onupdate add express

Adding multiple package alerts
$ npm-onupdate add 'express ejs'

Adding alerts for all dependencies from package.info file in current dir
$ npm-onupdate add

Removing package alert
$ npm-onupdate rm express

Removing multiple package alerts
$ npm-onupdate rm 'express ejs'

Listing all registered alerts
$ npm-onupdate ls

Get account info
$ npm-onupdate account info

Change account password
$ npm-onupdate account password

Delete account
$ npm-onupdate account delete

$ npm-onupdate account logout

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

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

Native scrolling in jQuery Mobile/PhoneGap applications

In one of my previous blog posts I covered how to fix flickers and jumps during page transitions when using jQuery Mobile with PhoneGap. The good news is that flickers were eliminated with latest release of PhoneGap 2.1 and its departure from using IFrame for JavaScript to Native bridge. Unfortunately issue of 1px jumps is still there, but that is by design in jQuery Mobile. So this means my solution with additional div element hosting application content is still valid.
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

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