Blog


Javascript Diff in Action

Jon Udell just put up a screencast of Wikipedia Animate - one of the competing projects in the Animate Wikipedia competition.

I also created a submission for the contest, and submitted, but perhaps too late (as the first two entries received the most recognition, and a winner still has yet to be announced). My entry has a lot more features, albeit much more buggy. A lot of the technology that I created for my entry has been borrowed by Dan's entry (such as the Javascript Diff Algorithm and my use of Sparkline-like sliders). I have a number of other features in my submission, and if you're interested in playing with it you can check it out here: AniWiki. Hopefully a winner will be announced soon, I'll be sure to let everyone know when that happens.

Tags: screencast, udell, diff, javascript

Making Free Screencasts on OS X

One thing that I've been looking to do, lately, is to create a Screencast (much like the ones presented by Jon Udell). I went through all the dirty work, trying to find a way to do it that was completely free - no strings attached. The result is usable (albeit, without audio or a mouse cursor) - and certainly a good start. I hope some more (free) screencasting packages get released in the near future.

Software to Install:

  1. OS X Developer Tools - This package (which is distributed on the OS X install CD) installs all sorts of development goodies that are going to be needed for the next couple appliations. (Unless you already installed it, then just skip this step) If you no longer have your install CD, join the Developer Connection web site, and there should be a version available there for download.
  2. X11 The next step is to install X11 - again, this comes on the installation CD. It use to be available on the Apple web site, but seems to be MIA since Tiger was released.
  3. osxvnc This is a handy, free, application which gets you a super-simple VNC server up-and-running in no time.
  4. Fink Fink is a repository of common, open source, pieces of software. You may also want Fink Commander, which is a nice GUI frontend for Fink (it may come bundled with Fink by default, check first).
  5. ming - Open up Fink Commander and search for the 'ming' package (version 0.2a - not 0.3!) and install it.
  6. vnc2swf vnc2swf takes a VNC image stream and converts it into a Flash movie - making it viewable by most of the Web-browsing public. I like to download this package and extract it to my /Applications folder. Once you have it downloaded, open a new Command Line Terminal and type the following commands: 'cd /Applications/vnc2swf' (or wherever you extracted your vnc2swf package), './configure --with-ming=/sw', 'make', 'make install'. You should then have a vnc2swf binary sitting in that directory, ready to play with.

How To Capture A Screencast:

  1. Start osxvnc. Simply pick the default options and click 'Start Server'.
  2. Start X11.
  3. In the X11 command window that comes up, type 'cd /Applications/vnc2swf' (or wherever you extracted your vnc2swf package).
  4. To start recording, type the following: './vnc2swf -nowindow out.swf :0'. Press 'F9' to begin recording and 'F8' to stop.
  5. Now type 'open out.swf' on the command line to see your finished result! You will want to look over the vnc2swf documentation to see which options will suit your presentation best.

Happy Screencasting!

Tags: screencast, free, screencasts, osx, software, open_source

ideaShrub Screencast

I just finished up a mini-tour of the new web application that I'm working on: ideaShrub. The tour comes in the form of a mini-screencast for everyone to watch. This is my first attempt at making a screencast and I think it went fairly well (save for the lack of voice over and mouse cursor, but I'm working on fixing that for future 'casts).

In this tour I cover a couple different aspects of the new site:

  1. A user's main profile page
  2. A user's shrub list (and the Create A Set and Create A Shrub widgets)
  3. A user's contacts list
  4. All communities
  5. All people
  6. All shrubs
  7. Options, straight to Profile Editing
  8. A user's main profile page (again)
  9. Shrub Editing (I saved the best for last!)
    This portion includes moving leaves, creating leaves, editing leaves, navigation, changing text attributes (bold, underline, strikethrough), indenting, undenting)

As a note, the application itself is still a long ways off from being complete - I expect to be making a lot of progress within the next couple weeks and possibly launching at the beginning of July.

So, without further ado:

ideaShrub Screencast (06/14/05)
(3 Minutes 50 Seconds - Approx. 5Mb)

NOTE: Best if watched at 800x600, it gets kind of 'warped' otherwise.

Tags: mindmap, brainstorming, ideas, firefox, osx, screencast, ideashrub

Current Projects

jQuery JavaScript Library

jQuery

Comprehensive DOM, Event, Animation, and Ajax JavaScript Library.

Recent Projects

Pro JavaScript Techniques

JavaScript Book

The best techniques for professional JavaScript. Published by Apress.