Browserify creates bundles from node.js-style CommonJS modules. It stubs out some core functionality so node.js modules with minimal dependencies can be used in the browser. Here is some JavaScript taken from the example, that creates a bundle:

var js = require('browserify')({
  require: {jquery: 'br-jquery'},
  entry: 'hello.js'
}).bundle()

The require property is used to , and the entry property is used to include a module that will be run when the bundle is loaded. The entry module starts by requiring jQuery:

var $ = require('jquery');
$(function() {
  // manipulate the DOM here...
});

I really like the browserify way of doing things. Instead of adapting browser code to run on the server, it adapts server code to run on the browser!

Jison

Jison is a parser generator for JavaScript that has separate lex and bnf definitions. It’s used by Handlebars.js.

Treetop

Treetop is a parser generator for Ruby. It’s installed with Ruby On Rails, through the mail gem which is installed by ActionMailer.

Citrus

Citrus is another promising parsing gem for Ruby. It seems to be very easy to get started with, and I like many of the design decisions.

Temple

Temple is a templating-specific library that helps with a lot of the AST transformation. It doesn’t seem to have a CFG syntax so it seems that using treetop or citrus would make sense for complex grammars. Otherwise, strscan could be used.

temple-mustache

This is an implementation of a mustache renderer in . It uses strscan to generate the initial parse tree, and Temple to generate the ruby code. It supports mustache sections.

Slim

Slim is a Haml-like templating library for Ruby that’s used in production by many. It uses Temple, with a line-based parser, which works well because it uses significant indentation for nesting.

I wrote some code that uses it, just for practice.

$.fn.tree = function(data) {
  var $el = $(this),
      html = [];

  function renderNode(node) {
    if (typeof node === "object") {
      html.push("<ul>");
      for (var key in node) {
        if (node.hasOwnProperty(key)) {
          html.push("<li><strong>" + key + ": </strong>");
          html.push(typeof node[key] == "object" ? renderNode(node[key]) : node[key]);
          html.push("</li>");
        }
      }
      html.push("</ul>");
    }
  }

  renderNode(data);
  $el.html(html.join(""));

  $el.on('click', 'strong', function() {
    $(this).closest('li').find('ul').toggle(200);
  });
};

$("<div>").appendTo("body").tree({
  name: {
    first: "Benjamin",
    last: "Atkin"
  },
  location: {
    city: "Boulder",
    state: "CO"
  },
  accounts: {
    social: {
      twitter: "http://twitter.com/benatkin",
      facebook: "http://facebook.com/atkin",
      gplus: "http://gplus.to/benatkin",
      identica: "http://identi.ca/benatkin",
      rstatus: "http://rstat.us/bat"
    },
    creative: {
      github: "http://github.com/benatkin",
      blog: "http://benatkin.com/"
    }
  }
});

Nothing too fancy.

• Code can be inserted using a Shortcode. Thanks to how Shortcodes work, HTML entities don’t need to be escaped in the HTML view.
• It uses a lot of Shortcode tags, one for each language, like php, so there is minimal overhead to inserting code snippets. This is a good decision in my opinion, because it gets used so often on code blogs.
• The underlying library, SyntaxHighlighter, has a core that contains generic features for highlighting code, and contains brushes for highlighting different languages. These are mostly data.
• The JavaScript code for SyntaxHighlighter is included at the end of the page, and only the needed brushes are included. Apparently when shortcodes are used, a language or brush name is added to a variable, and at the end of the page, it adds the appropriate script tag(s).

Finally, here are a couple of examples. This one is the included php brush:

function factorial($x) {
  if ($x > 1) {
    return $x * factorial($x-1);
  } else {
    return $x;
  }
}

And here is the CoffeeScript brush, which is provided by another plugin that depends upon the SyntaxHighlighter Evolved plugin:

passed = (score for score in scores when score > 60)

I really like this plugin. It’s a very complete solution. That said, I’d really like to be using ACE editor or CodeMirror to insert/edit snippets in blog posts.

Fortunately, jQuery UI has a widget framework, that makes setting up object-oriented widgets easy. After using it, I wanted to use it for everything, until I find something at least as easy to use as it. I didn’t, however, want to include a large dependency like jQuery UI if I was only using it for its widget framework.

I was glad to find, after a little experimentation with the Build Your Download page, that I can get jQuery UI’s widget framework in a download of only 9.06 kb minified. You can get this by clicking Deselect All and checking UI Core. After that, the theme drop-down box should be set to No Theme.

I made a geocoding widget for Django in a project for a client using this. It simplified my code a great deal.

One thing it does that’s good for projects that might have a lot of custom widgets on one page (which was not the case for this one) is it takes care of using jQuery’s data() method, which stores objects in a way that is less likely to cause memory leak issues in Internet Explorer than storing objects using closures.

1. gather.html – demo (my site)
2. gather.html – demo source (github)

1. jquery.convenience.js - plugin source (github)
2. convenience.html – demo (my site)
3. convenience.html – demo source (github)

The example shows one feature of custom events that I overlooked: propagation.

I am a big fan of twitter. I use it all the time. I follow a lot of people. Some I know personally, some I’ve only met online, and some I have never met. I like to interact with people on twitter in real time.

Of course, the benefits of twitter come at the cost of time. The little bits of time here and there spent reading and posting tweets add up. It can also cause interruptions, making it hard to focus.

twitter.com and twhirl

I used twitter.com at first, then twhirl, and twitter.com again before I discovered TwitterFox.

The biggest problem with using twitter.com is that I have to load twitter.com to check for new tweets, whether or not there are any new tweets. It takes a while to load a web page. Usually that is an interruption in itself. Usually I either miss the action on twitter or I obsessively check twitter.com to see if there are any new tweets. On days when I’m feeling less motivated or more curious about what’s happening on twitter it is usually the latter.

For a month or two I used twhirl to access twitter. There are two different ways of using it, each of which has its own problems. One way is the default, where it pops up new messages in the lower-right corner of the screen. This is the way most desktop twitter clients work. The problem with this is obvious: it’s an interruption, plain and simple. If I’m in the zone, I will likely get distracted. The other way of using twhirl is to turn off pop-up messages, and to either give the window some space on the screen or to switch to it using Alt-Tab to check tweets. The problem with this is it quickly devolves into a glancing or Alt-Tab frenzy, as at any time when I’m even slightly curious about what’s happening on twitter, I can check in an instant. Often times when I would check I would find no new tweets.

the twitter urge

Every so often I get the urge to check twitter. It’s perfectly natural for anyone who has discovered the joy of using twitter. What matters is what I do with those urges. If every urge turns into reading a list of twitter messages, it can turn into a real productivity killer.

For a while I’ve known the way that I would like to be able to use twitter. I would like a number of new messages on the screen. Then, if I got the twitter urge and there weren’t any new messages, it would only cause a split-second of interruption. If there were any new messages, I would know, and if I didn’t check even though there were new messages, I could give myself a pat on the back for staying productive, and know that once I got more work done I would have something to read.

After a week of being frustrated with twitter, I decided to do something about it. So I looked at the list of twitter clients again and tried a couple out. I wanted one that was open source and easy to customize.

TwitterFox

I spend enough time in Firefox, both at work and on my laptop, that having something in the Firefox status bar is pretty much as good as having something in the taskbar, if not better. Firefox extensions are also easy to customize (unless the code is a mess), so I gave it a try. When I saw the number of new tweets in the lower-right corner of my Firefox window, I was elated. This is exactly what I wanted!

It worked really well for me, once I figured out how to turn off popup balloons, where it would show the latest tweet(s) in the bottom-right corner, much like twhirl. At first, I thought the preference wasn’t working, so I made changes to the source code. I found tinkering with the source code to be relatively easy. Since I’m a web developer, I’m very comfortable working in JavaScript.

The tiny difference between TwitterFox and twhirl that makes it work for me is that the number of messages appears on a part of the screen that I see regularly. The information I need is there, and presented in a way that is not distracting. This is also the way I keep tabs on my e-mail (GMail) and my RSS Feeds (Google Reader), though I like the way TwitterFox shows the number better. GMail and Google Reader have the number of new items in their titles, which appear in the Firefox tab bar. Sometime I’d like to find or make extensions that will show the number of new items in those two web apps in the Firefox status bar.

Getting Started

The first thing I tried was creating a merb project with a single page referencing jQuery, and accessing CouchDB from there. The browser’s security model got in my way, however. A page on one port on localhost can’t access another port with AJAX. I searched for ways to give a page special permission, but my search turned up empty and I figured that I’d rather not go against the browser anyway, if I could help it.

The next thing I tried was getting a page that references jQuery to be served by CouchDB’s web server. That way the page and jQuery’s JSON API would be on the same port and Firefox would be happy. I opened up CouchDB’s Futon Utility Client at http://localhost:5984/_utils/ and found that it already had the latest version of jQuery included! Problem solved.

I opened the FireBug console (which was already enabled on localhost from when I was trying to get it working with my Merb project) and started trying out jQuery’s AJAX functions on CouchDB.

The GET request returned successfully! However, FireBug doesn’t retain the response, so I have to click Load Response to get it.

OK, there’s CouchDB’s welcome message! Expanding the GET request and clicking Load Response is tedious, though, so a better technique is needed. The first thing that comes to mind is doing a synchronous request. I find that get() doesn’t support this option, so I need to use ajax().

Aside from FireBug’s quoting FAIL, it works nicely. What I’d really like, though, is for FireBug to pretty-print the JSON. So I throw an eval() statement around it, and add the left side of an assignment statement because otherwise I would get an error (another way to get it working is to throw square brackets around the expression).

The output is quite a bit nicer, in my opinion.

Creating a Database

To create a database I use the HttpDatabaseApi page on the CouchDB wiki. Creating a database requires use of a PUT request, which can be made with jQuery’s ajax() function if the browser supports it (and Firefox does).

CouchDB returns a simple OK message to let me know it worked.

Creating a Document

Now that I have a database, I can create a document using the HttpDocumentApi. I opt to take the cavalier approach of having the server generate an ID rather than supplying an ID of my own. To do this, I send a POST with the database’s URL for the address and the document’s contents for the POST data. To send the POST data, I call ajax() with the document’s contents (as a JSON expression) for the data option and the string ‘json’ for the dataType option.

It didn’t work. I expand the POST and look at the data sent to find out why.

The ajax() function didn’t serialize the data! It’s not built into jQuery. It makes sense, given that one of jQuery’s features is its small footprint. I remember that when I viewed the source of the main page of CouchDB’s Futon Utility Client I saw a JSON include. It’s in http://localhost:5984/_utils/script/json2.js. It’s not a jQuery plug-in, but its interface is fairly simple. To serialize data, you call JSON.stringify() with an object as the first parameter. I add this to my statement and try again.

It worked! Or, at least, it didn’t error. It returned a globally unique ID (GUID) generated by the server. Now I use the ID to GET the document’s contents.

Only a summary of the object is shown. If I click the object it expands to a full view.

The data is there. The revision number is also present. One of CouchDB’s coolest features is built-in versioning.

After I realized that I was given only a summary of the object, I tried creating a document again and seeing if I missed any info that was supplied in the response to the POST request. It turns out that I did. The revision (_rev) was given. I’d like to have Firebug print out the whole response (and not a short summary), but I don’t see any way of doing so.

Updating a Document

Documents can be updated by sending a PUT request with the document’s URL as the address and the new contents as the data. The new contents must include the revision number upon which the update is based. This is to prevent conflicts. If a revision number other than that of the latest revision is supplied, it means that another client updated it first.

I update the document by getting the latest copy, storing it in a variable, removing the ID (since it’s already in the URL), changing the radius, and sending a PUT request with the new database contents.

The document is updated. If I expand the object I can see the new revision number.

Pretty cool, huh?

Conclusion & Next Steps

Before I tried using CouchDB with Firebug, I tried using the Futon Utility Client. I felt that I learned more and better retained what I learned when I used Firebug. Firebug as it is right now has a couple of issues that will keep me from using it as an environment in which to try doing different things with CouchDB. The first issue is that the pretty-print doesn’t show the full object in the console view, and there’s no option in the UI to make it do so. The second issue is that I find the editor to be insufficient. When the editor is in vertical mode, there’s no way to go through the history of commands entered. When the editor is in horizontal mode, it can’t expand beyond one line. When I switch between tabs, the text in the editor is often lost.

Firebug is, however, being actively worked on, and will hopefully get some features that will make it easier and more fun to use to play with JavaScript API’s and web services.

I would like to get the custom JavaScript environment mentioned at the top of this post set up and working with CouchDB. One way to get it working might be to set up a proxy of sorts to CouchDB. I could have any requests starting with /couchdb be forwarded to the CouchDB port with the /couchdb part stripped off.

This was fun. I think the next thing I’ll do with CouchDB is try writing a simple wiki using CouchDB and Merb.

]]> http://benatkin.com/2008/09/13/trying-out-couchdb-in-firebug/feed/ 5 http://benatkin.com/2008/08/28/on-finding-interesting-ubiquity-commands/ http://benatkin.com/2008/08/28/on-finding-interesting-ubiquity-commands/#comments Thu, 28 Aug 2008 23:26:18 +0000 Ben Atkin http://www.benatkin.com/weblog/?p=95 Continue reading →]]> I’ve been trying to find clever Ubiquity commands in the Herd. I want to see things that use the preview functionality in interesting ways, like the built-in map command does. What I’ve wound up doing so far, though, is sifting through dozens of commands that do nothing more than what could be done with a custom entry in the Firefox Search Bar, or commands that are nothing but links to another page.

While I think it’s useful to be able to search and go to websites from a command line, it’s not what I have in mind when I search for new commands.

I think that search engines and bookmarks should be separated from the rest of the commands, and that posting search engines or bookmarks as commands to the command part of the Herd should be discouraged. This will help in several ways:

• Users who don’t know JavaScript will have an easy time adding bookmarks and search engines to Ubiquity and assigning them strings
• I’ll be able to add search engines and bookmarks from websites without having to look at the code or decide whether I can trust the people who write the code
• If I provide a bookmark or search engine on my website I won’t have to worry about convincing my users to trust me enough to install it, since it won’t be able to send any information from their browser to my website except for a search query
• I won’t have to sift through bookmarks and search engines to find commands that provide advanced functionality
• It will encourage website owners to create more powerful Ubiquity commands

Ubiquity is at an early stage, so I won’t be surprised if someone’s already working on separating simple commands from more complex ones. I hope so. I really want to see Ubiquity catch on, and for that to happen I think it needs to be easier for users to customize their commands.