Monday, November 14, 2011

Ideas for improving GitHub's Gist

Lets list and acknowledge some of the work that has already started happening around GitHub's Gist when it comes to using it for embedding code snippets in blogs:
  • Loading the Gist through an iFrame to shorten page load times.
    • A nice side effect is the ability to get around any non-working Blogger templates like the Dynamic Template that was recently released but doesn't work with an embedded Gist (remark date: Nov. 14th 2011).
New Ideas:
  1. Tell the script to provide line numbers.
  2. Allow a line-start/offset and line-end/length attribute for the embedded script so that users can have one large file and then simply talk about the chunks in sections. This will remove the need to break up the original large Gist into multiple individual Gists.
  3. Tell the script the array or range of line numbers to highlight.
    • The following Gist will look for a div with the id of "foo" and place the script's formatted content in there. It is an actual example of the code running on this blog page to perform basic highlighting:
Until all this happens, Syntax Highlighter will remain # 1!



Saturday, November 12, 2011

FAIL: Installing Simon Listens on Mac

  1. Mac OS X 10.6.8 on MacBook Pro with an Intel Core
  2. Download and unzip Simon Listens, then:
  3. cd simon-0.3.0
    ./build.sh
    
  4. You will run into errors like kde and cmake are missing.
  5. Instructions for installing KDE on a mac (cmake is included) are available here.
  6. I chose to perform the MacPorts based installation. The following command takes a long time to run.
    sudo port -v install kdesdk4
    
    I waited an hour before I simply decided to leave the MacBook running overnight. So I don't know the total time it ended up taking.
  7. I was warned that macports in general is a bit out of date, so I decided to update that too.
    sudo port selfupdate
    
  8. I was also warned that some of the existing Macports installs may be outdated, so I fixed that as well. Though I wonder if this is what caused the overall experiment to fail in the end?
    sudo port upgrade outdated
    
  9. I decided to run some extra/redundant commands in order to make sure that the kdesdk4 really did install its counterparts:
    sudo port -v install cmake
    sudo port -v install qt4-mac
    sudo port -v install kdelibs4
    
    All of them were already installed so I was satisfied with the sanity test.
  10. I pasted whatever I was instructed to:
    cd ~
    mkdir bin
    vi bin/findup
    
  11. I decided to append-to/edit the .bash_profile instead of creating .profile file. And once again I pasted whatever I was told to:
    chmod 777 bin/findup
    vi .bash_profile
    
  12. Performed all the steps leading up to the checkout as instructed but did the checkout over a non-SSL (cleartext) channel:
    mkdir -p ~/Desktop/kde/build
    mkdir -p ~/Desktop/kde/home
    mkdir -p ~/Desktop/kde/inst
    mkdir -p ~/Desktop/kde/src
    mkdir -p ~/Desktop/kde/src/branches
    mkdir -p ~/Desktop/kde/src/trunk
    vi ~/kde/src/trunk/.my-setup
    cd ~/kde/src/trunk/
    env
    svn co svn://svn.kde.org/home/kde/trunk/kdesupport
    
  13. Performed the actual build and created a directory that didn't exist but I had put-off creating because I thought perhaps the KDE build/installation process would create it:
    cd kdesupport
    cmakekde
    sudo chown -R $USER ~/Library/Preferences/KDE
    mkdir ~/Library/Preferences/KDE
    sudo chown -R $USER ~/Library/Preferences/KDE/
    sudo launchctl load  -w /Library/LaunchDaemons/org.freedesktop.dbus-system.plist
    launchctl load -w /Library/LaunchAgents/org.freedesktop.dbus-session.plist
    
  14. This time the build for Simon Listens went much further but ultimately it failed!
    cd simon-0.3.0
    ./build.sh
    
  15. I lost the link but somewhere on the web it was suggested that the errors I saw in the build will happen when binary files have been built for a 32-bit on a 64-bit system! And the way to get around it was by passing some arguments to let Simon's build script skip this stuff. But I found way too many configure files and couldn't make heads or tails of which one to use and how to tell it do what I need to workaound the problem.
    find ./ -name configure
    <6-7 results all in different nested directories>
    
    cd simon-0.3.0
    grep "enable-charconv" julius/julius/*
    vi julius/julius/configure
    ./build.sh --enable-charconv=no
    vi julius/julius/configure.in 
    ./build.sh 
    
  16. The build error seemed to have the word iconv mentioned in a bunch of places so I decided to figure out which MacPorts install was part of the problem and remove them:
    port list | grep iconv
    sudo port uninstall libiconv @1.14_0
    sudo port uninstall libiconv @1.14_0+universal
    
    But then the one being used (libiconv @1.14_0+universal) couldn't actually be removed because there were dependencies present!
  17. I also found out that that Mac actually ships with a 64-bit flavor of libiconv by default and I was able to locate the said files on my system:
    find /usr/lib -name libiconv*
    /usr/lib/libiconv.2.4.0.dylib
    /usr/lib/libiconv.2.dylib
    /usr/lib/libiconv.dylib
    
  18. Found some clues on how to try out the Mac's system libiconv library as a fallback without uninstalling MacPorts' version of the lib ... but that too didn't help the Simon build work because now the Mac's system libiconv couldn't agree on version #s with some of the other MacPorts based libs ... so I reverted that trial change as well:
    mkdir ~/temp
    sudo mv /opt/local/lib/lib
    sudo mv /opt/local/lib/libiconv* ~/temp/
    ./build.sh 
    sudo mv ~/temp/libiconv* /opt/local/lib/
    
  19. Finally I decided to remove all the clutter that had been placed on my system during this FAIL-ed attempt to the best of my abilities:
    sudo port uninstall kdesdk4 @4.7.3_0
    sudo port uninstall cmake
    sudo port uninstall --follow-dependents qt4-mac
    sudo port uninstall --follow-dependents kdelibs4
    cd ~
    rm -rf kde/
    rm -rf ~/Library/Preferences/KDE
    vi /Library/LaunchDaemons/org.freedesktop.dbus-system.plist
    launchctl list
    launchctl list | grep dbus
    launchctl remove org.freedesktop.dbus-session
    launchctl list | grep dbus
    cd ~
    rm -rf bin/
    vi .bash_profile
    

Wednesday, November 2, 2011

Image Editing Toolset for Mac

All of the following are free and available on the Mac:
  • Grab - Awesome tool for taking snapshots of on screen material.
  • iPhoto - Decent~ish for cropping.
  • Preview - Pretty good for cropping. You can follow the instructions given here. Hint: Select what should remain then press "cmd+k" to crop out the rest.
  • Gimp

How to build a webapp with CouchApp and CouchDB

This is a chronicle of the additional work I had to do as I followed Ed Parcell's Tutorial: Using jQuery and CouchDB to build a simple AJAX web application. It is supposed to serve as a supplement.

Ed's post covers the use of CouchApp as far as generating templates to work on is concerned. As a supplement, my post will leverage the Evently framework (already a part of the generated CouchApp 0.8.1) to do the same exact thing.
  1. When asked to edit index.html for the first time in Ed's post, here is how the content will differ if you want to do things the Evently way:
    <!DOCTYPE html>
      <html>
    
      <head>
        <title>Address Book</title>
        <link rel="stylesheet" href="style/main.css" type="text/css">
      </head>
    
      <body>
        <h1>Address Book</h1>
        <div id="add"><button type="button" id="add">Add</button></div>
        <div id="addressbook"></div>
      </body>
    
      <script src="vendor/couchapp/loader.js"></script>
    
      <script type="text/javascript" charset="utf-8">
        $.couch.app(function(app) {
          $("#addressbook").evently("addressbook", app);
        });
      </script>
    </html>
    
  2. Lets take a moment to acknowledge all the differences:
    1. Links to json2.js, jquery.js or jquery.couch.js are not present in the head section. This is now taken care of by loader.js (view source +/-), which loads all of the required javascript files.
    2. An additional script section:
      $.couch.app(function(app) {
            $("#addressbook").evently("addressbook", app);
          });
      
      is used to wire-up the addressbook div element with an evently widget (also named addressbook but the names don't really have to match, its not a requirement) which we will be writing later in this tutorial.
  3. The Evently approach also mandates a rewrite of Ed's refreshAddressbook function such that the html and javascript are placed in separate files and tied together via the use of the Mustache template engine. So instead of injecting any more javascript into your index.html, follow these steps:
    1. Navigate to the addressbook directory, which was generated by couchapp for you when you ran, in the past:
      couchapp generate app addressbook
      cd addressbook
      
    2. Create an evently widget named addressbook by simply creating the appropriate directory structure:
      mkdir -p evently/addressbook/
      
    3. Create _query.js file to hold the view which should be loaded from CouchDB when the addressbook div element is hooked-up with the addressbook widget (refer to line # 19 in index.html source provided earlier):
      function () {
        $.log('Inside evently/addressbook/_init/query.js');
      
        return {
          "view" : "phonenumbers",
        };
      }
    4. Create data.js file to process the data returned by CouchDB which will be available for the Mustache template engine's use:
      function(data) {
        $.log('Inside evently/addressbook/_init/data.js');
        $.log(data.rows);
        return {
          "addressbook" : data.rows
        };
      }
    5. Create mustache.html file to substitute the data and render the html directly into the addressbook div element:
      {{#addressbook}}
      <div class="address">
        <span class="name">{{key}}</span>
        <span class="phonenumber">{{value}}</span>
        <a href="#edit" class="edit">edit</a>
        <a href="#delete" class="delete">delete</a>
      </div>
      {{/addressbook}}
      
    6. Uplaod the app:
      couchapp push
    7. Before we go any further let's test what we've written so far. You'll notice that I've thrown in logs and alerts into the javascript above. If all is well then we should see an alert pop up with the data being retrieved from the server. Also if you have debugging tools like Firebug or Web Inspector at your disposal, then you should be able to see the data printed out in the console.
      1. Safari and Firefox on my mac work well and I hope that you too see a popup stating [object Object] and your console output looks something like:
        Entering view callback in evently/addressbook/_init.js
        jquery...util.js (line 3)
        Object { total_rows=2, offset=0, rows=[2]}
        jquery...util.js (line 3)
        Exiting view callback in evently/addressbook/_init.js
        
      2. B U T ... if you head over to your iPhone's safari browser and try the same thing, you may be in for a huge disappointment! Nothing will happen. And if you enable the Debug Console, you'll see javascript errors stating that jQuery does not exist!
        • If you run into this then based on the wisdom gleaned from this post on stackoverflow, here's what you need to do:
          1. Get all the supporting JS files listed under the _utils URL to be directly present in your own addressbook couchapp:
            cd vendor/couchapp/_attachments/
            wget http://fermyon.iriscouch.com/_utils/script/jquery.couch.js
            wget http://fermyon.iriscouch.com/_utils/script/sha1.js
            wget http://fermyon.iriscouch.com/_utils/script/json2.js
            wget http://fermyon.iriscouch.com/_utils/script/jquery.js
            
          2. Update loader.js to serve the files out of your own addressbook couchapp:
            vi vendor/couchapp/_attachments/loader.js
            
            ...
            couchapp_load([
              "vendor/couchapp/sha1.js",
              "vendor/couchapp/json2.js",
              "vendor/couchapp/jquery.js",
              "vendor/couchapp/jquery.couch.js",
              "vendor/couchapp/jquery.couch.app.js",
              "vendor/couchapp/jquery.couch.app.util.js",
              "vendor/couchapp/jquery.mustache.js",
              "vendor/couchapp/jquery.evently.js"
            ]);
            
        • If things are still breaking then there is one other analysis & workaround for this dilemma presented here in a blog post by Lee Boonstra.
        • If you are still having issues then use the Safari on your Mac's iOS Simulator to browse the couchapp because it gives more detailed information in its Debug Console than the actual browser on the iPhone. If you are still seeing something like the following image:
          Then you still haven't fixed the problem as described in the steps above so go back and make sure you follow all the instructions to get it resolved.
    8. Now lets finish off editing _init.js:
      put code here...
      
  4. mustache stuff