Sunday, May 13, 2012

Add support for LESS to Node.js connect-assetmanager package

The connect-assetmanager Node.js package allows you to combine multiple javascript and CSS files into one and also do other manipulations like minification.

It's part of Mathias Pettersson's (mape) excellent node-express-boilerplate template.

If you're also using LESS for CSS here is some code you can add to get connect-assetmanager to process you're LESS files:

var assetsSettings;
assetsSettings = {
  js: {
    route: /\/static\/js\/[a-z0-9]+\/.*\.js/,
    path: "./public/javascripts/",
    dataType: "javascript",
    files: ["libs/underscore-min.js" "libs/jquery.mobile-1.1.0.min.js", siteConf.uri + "/nowjs/now.js", "site.js"],
    debug: siteConf.debug,
    stale: !siteConf.debug
  },
  css: {
    route: /\/static\/css\/[a-z0-9]+\/.*\.css/,
    path: "./public/stylesheets/",
    dataType: "css",
    files: ["libs/jquery.mobile-1.1.0.min.css", "style.less"],
    debug: siteConf.debug,
    stale: !siteConf.debug,
    preManipulate: {
      "^": [
        function(file, path, index, isLast, callback) {
          var match;
          match = path.match(/\.less$/);
          if ((match != null) && match.length > 0) {
            return less.render(file, function(e, css) {
              return callback(css);
            });
          } else {
            return callback(file);
          }
        }
      ]
    }
  }
};

The import part is the preManipulate line under css but I include my entire assetsSettings from a project to make it easier to understand.

Tuesday, May 1, 2012

MonoTouch JsBridge - Communicate with the UIWebView

Today I'm open sourcing JsBridge for MonoTouch which allows for bidirectional communication between the javascript in your UIWebViews and your native C# code in your MonoTouch app. Go directly to GitHub for the documentation on how to use it.

This project was inspired by doing a project using Appcelerator's Titanium. In fact the javascript used in JsBridge was taken directly from that project, so if you're used to using Titanium you should be right at home using JsBridge.

At this time it requires MonoTouch 5.3.3, which as of 5/1/2012 is in Alpha, because JsBridge needs to register a custom url protocol using NSUrlProtocol.

I'm not 100% satisfied with the implementation of the event listeners on the native side, so I'm open to suggestions on how to make it better. Ideally some day the Xamarin team will implement something like this in a future version. ;)

I've already submitted my first app to use it the iOS AppStore and it relies heavily on bidirectional communication between javascript and native. The app is a remote control for Rdio's new UI. A nicely executed feature by Rdio (even if it came way after the chrome extension remote I made for their first UI ;) ), but unfortunately it doesn't work on iOS partially due to the Rdio servers not supporting the Websockets protocol that the UIWebView has. Using JsBridge I was able to implement the WebSocket connection on the native side and override the Rdio javascript calls that use WebSockets and pass them to the native side and vice versa. I'm quite pleased with the results so far. ;)