If you’re a web developer (or even mildly interested in the world of web development) you’ve probably heard of HTML5’s new Canvas tag. You’re probably also aware that the Canvas tag allows web developers to create some really great animations right in the browser. No plugins needed (well, depending on your browser, maybe one plugin).

As soon as I saw what was possible with the Canvas tag, I wanted to start using it myself. So, I looked at some of the Canvas tutorials available online and figured out how to create some simple drawings. It was fun, and simple, and I was happy.

And then I decided to try my hand at creating some Canvas animations.

The Problem

Now, I’m not a Canvas expert, so my analysis could be way off base, but I quickly came to the conclusion that creating a Canvas animation could be quite difficult. It’s fairly easy to do if your animation only has a few elements. And it’s manageable if you don’t mind having a lot of extra code for handling the animation’s timing and state variables. But, as time went on, I found that even simple animations became difficult to manage very quickly. My hat’s off to the developers that have created some of the more complex Canvas animations out there. I don’t know how you do it.

My first instinct when I began to run into problems with the Canvas animations I was trying to create was to look for a Canvas animation library that might help me out. It turns out that there are a few out there. Unfortunately, I didn’t find one that I felt fit well with the kinds of animations I wanted to create.

And so, with a stack of problems I intended to solve, I set out to create a Canvas animation library that would solve each and every one of them.

Candid Canvas

What I came up with was a new Canvas animation library that I call Candid Canvas.

• Unlike several of the other Canvas animation libraries out there, Candid Canvas doesn’t provide you with any special drawing tools. You’re still on your own when it comes to drawing your animation.
• Candid Canvas also doesn’t keep track of the elements that have been drawn to the Canvas tag. You’re on your own for that too.
• Candid Canvas is intended to help you manage the parts of creating a Canvas animation related to, well…animating it.
• Candid Canvas helps you break down your animation into separate scenes.
• And it helps you break your scenes down into individual elements responsible for drawing different pieces of the scene.
• Candid Canvas also helps you play, pause and reset your animation.

Candid Canvas is not a library for everyone. But if you’re looking for a little extra help when creating Canvas animation, I hope that Candid Canvas will work for you!

Download, contribute and submit bugs and feature requests at the Candid Canvas Github project.

Now, anyone who’s ever tried to choose a winner among a wide variety of competing scents knows that there’s really only one way to figure how a particular candle matches up with your own scent preferences. You pick it up. And you smell it. Unfotunately (as you will see below), with many candles this obvious scent comparision technique is difficult, if not impossible. Clearly, the companies who make the candles that are most difficult to smell are indifferent to or ignorant of how their target audience actually browses their products.

Perhaps it seems a little silly to analyze the usability (and sniffability) of scented candles. After all, candles come cheap. If you buy the wrong one, you can just buy another one next time. However, I would argue that a few simple packaging changes can make all the difference in the world when it comes to making a candle easy to smell.

And with that, I’d like to show you a few examples of what I found during my candle adventures.

First, the Good

The companies that make these first 3 candles clearly get it. The packaging is easy to open without breaking and one candle brand even includes holes to allow sniffing without opening the packaging. This is how candle packaging should be designed.

Now, the Bad

I’m not a candle expert, so I can’t tell you why so many candles come in glass jars. What I can tell you is that glass jars that aren’t easy to open make for a bad candle browsing experience. Not the worst candle browsing experience, mind you. That experience is reserved for the candles below.

And finally, the Ugly

Two types of candles, and two types of impossible to preview packaging. Let’s hope the description on the package is vivid enough to evoke an accurate scent in the consumer’s mind. Otherwise, you’re really rolling the dice when you choose to buy a candle that you can’t actually smell.

User experience is a hot topic in the world of web design right now. And usability certainly is key to making a good website. However, a good user experience is vital everywhere. Even when it comes to things as trivial as candle shopping. I’d like to think that the candle makers who took the time to truly consider how their customers would seek out their products will be rewarded with success.

And yes, I bought one of the easier to sniff candles.

I haven’t been following any of the rumor sites lately, so my predictions come from complete ignorance. Nevertheless, what follows are my completely baseless guesses and crazy dreams about what Steve Jobs will introduce today.

Naive Apple Tablet Predictions

• Apple will introduce not just a tablet computer or also-ran ebook reader, but a completely new class of device, or rather, line of devices. Steve Jobs will give a rundown of past innovations like the printing press, the personal computer, the Internet and finally the new Apple device. He will be dismissive of the terms “tablet” and “ebook reader” because of their limited scope and demonstrate how the Apple device goes forward into uncharted territory.
• The device will be thinner than any ebook reader or tablet currently on the market. It will be made of metal, probably aluminum and will feel very solid. It will also have a full color touch screen that covers almost the entire front side of the device, with practically no frame around the edges. It won’t look like a larger version of the iPhone. It will be much more visually stunning and innovative.
• The new line of devices won’t follow the “i” naming convention. So, no iTab or iSlab or anything along those lines. Rather, the new devices will have names like “Slate” and “Slate Pro”, with a small model targeted at consumers and a bigger model targeted at pro users. The iPhone will also be updated to support some of the features that the new devices offer.
• It doesn’t seem likely that the new device will use e-paper, as it will probably still need to function somewhat like a traditional computer. However, I could see the new device featuring a technology like OLED, which would allow for a high contrast screen that is also low power.
• The touch screen on the device will be amazing. The responsiveness, multi touch and included software will raise the bar for touch screens and tablets to the next level, similar to what the iPhone did for smartphones.
• The device will use solid state for storage and will have an impressive amount of storage space for a device so thin.
• Battery life will be amazing. Something like 10 to 15 hours on a charge and even longer when in a lower power mode.
• Apple will announce a list of partnerships with magazines like Time and newspapers like the New York Times for a new type of subscription that allows users to subscribe to a newspaper or magazine through the device and receive the latest copy wirelessly. The Media Store (maybe?) version of a magazine like Time will look nearly identical to the print version, but will also contain interactive ads, supplemental videos and links to related content online. Subscription fees will be in the area of $10 for most media offered.
• The new Media Store will also offer enhanced versions of books. The books will function similar to the way they do on most e-readers, but the Apple device will offer a new level of interactivity with the books. It will likely also include video and links to online content within books, just like the the other types of media.
• Finally, Apple will overhaul iTunes. The name “iTunes” is no longer relevant and hasn’t been for a long time. The existing iTunes software will be reworked into a new application that manages the different types of content that can be downloaded to the Apple device as well as the content on regular Apple computers and iPhones.

These are my pipe dreams. In reality, I expect something a lot closer to a big fat iPhone

raphael.draggable is fairly straightforward to use. You simply need to call the draggable.enable() on the raphael object you would like to enable the plugin for. raphael.draggable works for all raphael elements and for raphael sets as well. Sets that have raphael.draggable enabled will drag all elements in the set whenever any element in the set is dragged.

Using the raphael.draggable plugin

 // Creating a canvas and enabling draggable for it
var paper = Raphael(0,0, 800, 600);
paper.draggable.enable();

// Creating a rectangle element and enabling draggable for it
var rect = paper.rect(0, 0, 100, 100);
rect.attr({ 'fill': 'white' });
rect.draggable.enable();

// Creating a set and enabling draggable for it
var set = paper.set();
set.draggable.enable();
set.push(rect);

Currently, raphael.draggable has only been tested for Firefox and Safari. Those are the only two browsers I needed to test it for. Source code and documentation are available on github. Constructive criticism, and especially constructive contributions to the code are welcome!

When I first explored the Michael Reese campus, one of the buildings that stood out to me was the Friend Pavilion. At first glance, it looked like a simple, concrete structure. Small and nestled in a grove of trees and gardens, I didn’t immediately pay much attention to it among the other large, modern structures. However, when I got closer, I was drawn in by Friend’s expansive windows and simple interior.

Friend was built as a place where patients could rest and be rehabilitated. When I was finally able to explore the building from the inside, I struck by how truly peaceful the interior was. Despite being a hospital in the middle of a bustling metropolis, the world inside of the Friend Pavilion was surprisingly tranquil and relaxing. The simple, open rooms and picturesque landscape outside made for a very appealing place to rest. Pictures of the building don’t do it justice.

Not so long ago, not even that much more than a year ago, patients were still being served by the Friend Pavilion. When I first became interested in the hospital campus in early 2008, I visited the Friend pavilion several times and noted that it certainly wasn’t in pristine condition. But, at the same time, the building wasn’t in the dilapidated condition that the city of Chicago pretends that it was in. It was only through purposeful negligence by the city that Friend (like many of the other buildings on the campus) was allowed to deteriorate.

As sad as it makes me to say it, the building never will be restored or recognized for the sanctuary that it was and could have been. This week, the Friend Pavilion was destroyed with little fanfare.

The Friend Pavilion

More Michael Reese Photos

This week, despite Chicago losing its bid for the 2016 Olympics, demolition of the campus begins. There is hope that at least one of the buildings, the Singer Pavilion, might be saved. But, alas, the rest of the campus may be lost.

The Singer Pavilion

Thanks to the Gropius in Chicago Coalition and the rest of the architectural preservation community for all of your efforts in trying to save these buildings.

In my previous post, I talked about some of the issues I had with using Ghostscript from the command line. It wasn’t difficult, but it wasn’t something that I wanted to do. Finally, I ended up writing a C# wrapper that would talk to the Ghostscript library and generate the PDF thumbnail files that I wanted. I figured it was a common enough issue that at least someone else would find it useful.

Almost immediately, that post became the most popular post on my site. I still get 10 or so Google hits from it every day. So, I figured I’d clean up the code a little bit (which involved some helpful changes that people suggested in the comments of my post) and release it to the world.

I decided to call the library GhostscriptSharp and you can find it on Github. There are probably a lot of things that could be added or cleaned up, so if you’d like to contribute, feel free to create your own fork and let me know if you have changes I could pull in.

Seattle/Portland

Seattle/Portland

For example, maybe I want to change the contents of a few different directories on my file system. And say that I want to have a different rake task for each directory, so that I can type something like this:

rake modify:songs

Or like this:

rake modify:documents

With a small number of directories, it wouldn’t be a big deal to write a task for each directory. But, if I have 100 directories, that might get to be a little bit tedious. So, instead of writing the tasks manually, I’ll have Ruby do it:

namespace :modify do
	[:music, :documents, :application, :home].each do |directory|
		task directory do
			change_contents(directory)
		end
	end
end

In the code above I’m taking an array of 4 directories and using that array to call the Rake task function to create a new task for each directory. I’m also passing the name of the directory on to a function that changes the contents of the specific directory.

It’s a pretty simple trick, but it’s definitely come in handy for me.

This post has become somewhat popular (relative to my other posts anyway), so I decided to take the code and release it as an open source library. More information here

PDF thumbnails with Ghostscript

I’ve been looking for a while now for a simple solution for generating thumbnail images from PDF files. I wanted something that would let me programmatically load in a PDF file, choose a page, and generate a thumbnail from that page. As far as I can tell, there are only a few open source options and of those options I haven’t been able to find one that I could get working with C#.

After seeing it recommended a few times, I decided take a look at Ghostscript. Ghostscript is an open source interpreter for Postscript and PDF files. Among other things, Ghostscript allows you generate images from PDF pages. Which is exactly what I needed.

Ghostscript is a tool that can be used from the command line, which is how most of the examples I’ve found online have used it. Unfortunately, this is what a call to Ghostscript looks like:

gs -q -dQUIET -dPARANOIDSAFER  -dBATCH -dNOPAUSE \          
-dNOPROMPT -dMaxBitmap=500000000 -dFirstPage=1 \
-dAlignToPixels=0 -dGridFitTT=0 -sDEVICE=jpeg \
-dTextAlphaBits=4 -dGraphicsAlphaBits=4 -r100x100 \
-sOutputFile=output.jpg input.pdf

Not pretty. Luckily, I needed to automate the task of creating the thumbnails, so I wouldn’t need to manually generate the parameters to be passed to the command line tool. However, I still felt like there might be a better way to hook into Ghostscript’s functionality. So, I decided to take advantage of the API provided by Ghostscript by writing a simple C# wrapper for the API to use in my current ASP.Net project.

A simple Ghostscript wrapper

The first thing I needed was the Windows version of the Ghostscript DLL, which can be obtained here. Once I included the DLL in my project, I needed to expose the unmanaged API functions to my C# wrapper function.

[DllImport("gsdll32.dll", EntryPoint = "gsapi_new_instance")]
private static extern int CreateAPIInstance(out IntPtr pinstance, 
                                        IntPtr caller_handle);

[DllImport("gsdll32.dll", EntryPoint = "gsapi_init_with_args")]
private static extern int InitAPI(IntPtr instance, int argc, IntPtr argv);

[DllImport("gsdll32.dll", EntryPoint = "gsapi_exit")]
private static extern int ExitAPI(IntPtr instance);

[DllImport("gsdll32.dll", EntryPoint = "gsapi_delete_instance")]
private static extern void DeleteAPIInstance(IntPtr instance);

Above, I complained about the long list of parameters that need to be passed to the Ghostscript command line tool. Those same parameters need to be passed to the API, so the next thing I did was create a function that wrapped up the functionality for building the list of parameters. For simplicity, I left in a lot of default parameters, but the function could be expanded later on to allow more specific parameters.

private string[] GetArgs(string inputPath, string outputPath, 
                         int firstPage, int lastPage, int width, int height)
{
    return new[]
    {
        // Keep gs from writing information to standard output
        "-q",                     
        "-dQUIET",
       
        "-dPARANOIDSAFER", // Run this command in safe mode
        "-dBATCH", // Keep gs from going into interactive mode
        "-dNOPAUSE", // Do not prompt and pause for each page
        "-dNOPROMPT", // Disable prompts for user interaction           
        "-dMaxBitmap=500000000", // Set high for better performance
        
        // Set the starting and ending pages
        String.Format("-dFirstPage={0}", firstPage),
        String.Format("-dLastPage={0}", lastPage),   
        
        // Configure the output anti-aliasing, resolution, etc
        "-dAlignToPixels=0",
        "-dGridFitTT=0",
        "-sDEVICE=jpeg",
        "-dTextAlphaBits=4",
        "-dGraphicsAlphaBits=4",
        String.Format("-r{0}x{1}", width, height),

        // Set the input and output files
        String.Format("-sOutputFile={0}", outputPath),
        inputPath
    };
}

Once I had a way of creating a list of parameters, I could start using the Ghostscript API functions. I created a function called CallAPI that would accept an array of parameters and use them to call the Ghostcript API.

The function I created for building a list of arguments returned an array of strings, but to use the API I needed to convert each of those parameters into a ANSI null terminated byte array (I added the code I used to do this to the bottom of this post). Then I needed to allocate some space in memory for each of those arguments and get pointers to each one of them.

var argStrHandles = new GCHandle[args.Length];
var argPtrs = new IntPtr[args.Length];

// Create a handle for each of the arguments after 
// they've been converted to an ANSI null terminated
// string. Then store the pointers for each of the handles
for (int i = 0; i < args.Length; i++)
{
    argStrHandles[i] = GCHandle.Alloc(StringToAnsi(args[i]), GCHandleType.Pinned);
    argPtrs[i] = argStrHandles[i].AddrOfPinnedObject();
}

// Get a new handle for the array of argument pointers
var argPtrsHandle = GCHandle.Alloc(argPtrs, GCHandleType.Pinned);

Then, to use the newly converted parameters, I needed to create an instance of the Ghostscript API and pass them into the initialization function.

// Get a pointer to an instance of the GhostScript API 
// and run the API with the current arguments
IntPtr gsInstancePtr;
CreateAPIInstance(out gsInstancePtr, IntPtr.Zero);
InitAPI(gsInstancePtr, args.Length, argPtrsHandle.AddrOfPinnedObject());

The call to InitAPI runs Ghostscript and generates any requested files at the output path.

Now the only remaining thing I needed to do was clean up the memory that was allocated for the API. To handle this, I wrote a cleanup function that takes in the items that need to be cleaned up. The API provides some cleanup functions, so I called those in the cleanup function as well.

private void Cleanup(GCHandle[] argStrHandles, GCHandle argPtrsHandle, 
                                       IntPtr gsInstancePtr)
{
    for (int i = 0; i < argStrHandles.Length; i++)
        argStrHandles[i].Free();

    argPtrsHandle.Free();

    ExitAPI(gsInstancePtr);
    DeleteAPIInstance(gsInstancePtr);
}

One last thing I added to the wrapper was a simple function for generating thumbnails from a source PDF file. Technically, I could have just used the CallAPI function to do that, but I wanted to hide the details of working with the API from code outside of the wrapper class.

public void GeneratePageThumbs(string inputPath, string outputPath, 
                              int firstPage, int lastPage, int width, int height)
{
    CallAPI(GetArgs(inputPath, outputPath, firstPage, lastPage, width, height));
}

The GeneratePageThumbs doesn’t do anything other than calling the CallAPI function. However, in the future, I’d like to provide other functions that use the Ghostscript API as well. If anyone has any ideas for improving the code, drop me line.

Update: Here is the code I used to convert the arguments to null terminated byte arrays. There might be a better way to do this in .Net, this is just the quick solution I’m using.

public static byte[] StringToAnsi(string original)
{
       var strBytes = new byte[original.Length + 1];
       for (int i = 0; i < original.Length; i++)
            strBytes[i] = (byte)original[i];
        
        strBytes[original.Length] = 0;
        return strBytes;
}

Update: This code has been open sourced

One thing that I like about scripting languages is their ability to dynamically modify code during runtime. Ruby and JavaScript, for example, both give you the ability to load in code directly from a string and execute it as part of your program. While that sort of thing can be dangerous, it also gives you access to some really fun metaprogramming techniques.

While working on a simple DSL for one my ASP.NET sites, I started to wonder if C# had some similar functionality that I could take advantage of. In particular, I wanted to load in C# code from a file and execute the code inside of it. What I found was that C# does indeed have the ability to accomplish this task, albeit in sort of an ugly way.

Using C# to compile C#

Most scripting languages give you a function that allows you directly evaluate a block or raw string of code as soon as it’s encountered. Because C# is a compiled language, it’s a little bit more complicated. The C# code needs to be compiled into an assembly before it can be used. And then classes from the compiled code can be instantiated directly from the assembly.

C# code can be compiled on the fly with an instance of the CSharpCodeProvider class (there’s a similar class for VB.Net as well). Additionally, you can create an instance of the CompilerParameters class, which contains a collection of parameters that will be used when compiling your code. In the example below, I’m creating a new C# compiler and a set of parameters that will tell it not to create an assembly file, but to instead compile the new assembly in memory. I also tell the compiler to include System.dll as a reference assembly.

// Create a new instance of the C# compiler
var compiler = new CSharpCodeProvider();

// Create some parameters for the compiler
var parms    = new System.CodeDom.Compiler.CompilerParameters
{
    GenerateExecutable      = false,
    GenerateInMemory        = true
};
parms.ReferencedAssemblies.Add("System.dll");

Once a C# compiler has been created, you can use it to compile raw source into an assembly. CSharpCodeProvider allows you to compile code from a variety of sources. In the example below, I’m using the CompileAssemblyFromSource method to compile my code directly from an array of strings. CompileAssemblyFromSource will look at the code provided and return an instance of the CompilerResults class.

// Try to compile the string into an assembly
var results = compiler.CompileAssemblyFromSource(parms, new string[]
{@" using System;

    class MyClass
    {
        public void Message(string message)
        {
            Console.Write(message);
        }               
    }"});

One thing to note is that the compilation method will complete regardless of whether or not the code has compiled successfully. To make sure you code has compiled, you need to check the Errors collection that is part of the CompilerResults instance returned by CompileAssemblyFromSource. If there were no errors, the code was compiled successfully and you can begin using the assembly.

Using the compiled code

Once your code is compiled into an assembly, you can use that assembly to create instances of classes from your source code and use reflection to invoke methods and get and set properties of those classes. In the example below, I’m creating an instance of MyClass and storing it as an object. I’m then using reflection to invoke the Message method on the class.

// If there weren't any errors get an instance of "MyClass" and invoke
// the "Message" method on it
if (results.Errors.Count == 0)
{
    var myClass = results.CompiledAssembly.CreateInstance("MyClass");
    myClass.GetType().
            GetMethod("Message").
            Invoke(myClass, new []{ "Hello World!" });
}

It’s not exactly pretty, but it gets the job done. Scripting languages make it much easier to accomplish this sort of task, but it’s still nice to see that it can be done in C#.

One of the most tedious tasks I have to complete at work is importing excel spreadsheets into a database. Often, a client will give me a spreadsheet of data that needs to be imported into an existing database. And, if I’m really lucky, the data needs to be reformatted before it can be imported. I tried a few different methods of accomplishing this task before I settled on using the Ruby Spreadsheet gem to import and format the spreadsheet data. I then use the Ruby DBI library to import the data into a database.

Spreadsheet works great for reading data from a spreadsheet file, but one thing that always annoyed me was that I needed to know the index of a column before I could get the value from it. So, for example, if a spreadsheet stored the value for First Name in the 3rd column, I would need to know that the 3rd slot in each row array represented the the first name value. I thought it would be really nice if I could access that value for a row by saying something like row[:first_name]. I had a little bit of extra time over the holidays, so I decided to see if it would be possible to make this functionality happen.

My solution

The first thing I did was create my own row class for the Spreadsheet library. I decided that I would create a new class called HashRow that would allow you to access the values of each row by using symbols that represented each column header or by using the original method of accessing row values with an index number. For simplicity, I assumed that the first row of the spreadsheet was the header row. I also simplified values for each column header by stripping out any characters that couldn’t be represented by a symbol. So, a header value of First Name becomes :first_name.

I also added a few convenience methods to HashRow. The header? method returns true if the row is a header row and the empty? method returns true if the row is completely empty.

# Wraps Spreadsheet::Excel::Row row array with extra functionality
class Spreadsheet::HashRow < Spreadsheet::Excel::Row
	attr_reader :index
	
	# Keeps the original row value array 
	# and also creates a hash of values 
	def initialize(row, col_hash, index)
		@val_array = row
		@val_hash  = get_val_hash(col_hash)
		@index 	   = index
	end
	
	# Is this row the first row in the spreadsheet?
	def header?
		@index === 0
	end
	
	# Checks if every cell in the row is set to nil
	def empty?
		@val_array.compact.length === 0
	end
			
	# Returns the value in the row based on the index 
	# or key passed in. Integer values returns the row value 
	# by index in the array and symbols return the value 
	# for the symbol or string
	def [](value)
		if value.is_a? Integer
			@val_array[value]
		else
			@val_hash[value.to_s.downcase]
		end
	end
	
	private 
	
	# Uses a hash columns to build another hash for the 
	# values in the array with keys for the column heads
	def get_val_hash(col_hash)
		col_hash.keys.inject({}) do |acc, key|
			acc.merge(key => @val_array[col_hash[key]])
		end
	end
end

Once I had my HashRow class, I needed to open the Spreadsheet::Excel::Worksheet class so that I could replace the row method with a new method that returned an instance of the HashRow class. I aliased the old row method and used it inside my new row method to pass in a reference to the original row array. I also added a private method to help determine the index of each of column and a private method to format the column names.

# Extends Spreadsheet::Excel::Worksheet so that the Rows become HashRows
class Spreadsheet::Excel::Worksheet		
	# Override the original row method with a new method 
	# that returns the custom HashRow class instead of an array
	alias_method :old_row, :row
	def row(value)
	    Spreadsheet::HashRow.new(old_row(value), get_col_indexes, value)
	end
		
	private
		
	# Returns a hash that contains key/value pairs for the column 
	# headers and the the index of each header
	def get_col_indexes
	    @col_indexes ||= old_row(0).inject({}) do |hash, cell|
	        hash.merge(get_col_key(cell.to_s) => hash.length)
	    end
	end
			
	# Converts the name of a column header to a 
        # specially formatted string
	def get_col_key(col)
	    col.gsub(/[\(\)]+/, "").
	         gsub(/\s/, "_").
	         downcase
	end
end

Once I included my new spreadsheet extension file I could use the Spreadsheet library similar to the way I had used it before, only now I had access to the row values by the row and index and by the column header name.

Spreadsheet.open(FILE).worksheet(0).each do |row|
	unless row.empty? || row.header?
		puts row[:first_name]
		puts row[:last_name]
	end
end

describe("A simple hello world test", function()
{
    it("is a test for truth example", function()
    {
        expect(true).to(equal, true);
    };
};

If I were to run the test on a page that had the framework loaded in, I’d get a nice pretty rundown of my tests, showing that the hello world test had indeed passed (true does, in fact, equal true).

One thing that I immediately wondered about was how the keywords in the framework worked. At first, I assumed they were global variables and was a little put off by that idea. Would functionality like “describe”, “expect” and “it” interfere with other code that happened to use those same function names or variables? Fortunately, I was surprised to find this code in the framework:

var contents = fn.toString().match(/^[^\{]*{((.*\n*)*)}/m)[1];
var fn = new Function("matchers", "specifications",
  "with (specifications) { with (matchers) { " + contents + " } }"
);

fn.call(this, Screw.Matchers, Screw.Specifications);

Located in the initialization portion of Screw.Unit, this cryptic looking piece of code is actually doing something very clever. It’s using the Function.toString() method to extract the content of the function wrapper around all of your tests. It’s then taking the contents of that function and creating a new function that is using the “with” keyword to execute your code in the context of the framework’s keywords and functions.

In other words, it’s taking your tests and tricking JavaScript into thinking that your test functions have access to the properties and methods stored in Screw.Matchers and Screw.Specifications. This gives you access to the framework functionality without leaking any variables into the global namespace.

That sort of cleverness gives me hope that JavaScript has a bright future ahead.

FF 3 creates multiple #text nodes for elements with well under 
4096 characters of text data

Good to know I’m not crazy…

One of the utility files that TinyMCE allows you to include is a file called tiny_mce_popup.js. Including this file gives you access to a class called tinyMCEPopup. This class provides you with some helper functions that come in handy when developing the dialog box for a TinyMCE plugin. Unfortunately, including the helper file also has a side effect: the helper class will automatically include the current theme’s css file. In the case of my plugin, the css file for the current theme completely changed the way my plugin’s XHTML was styled. And not in a good way.

One solution would have been to modify my stylesheet or alter my XHTML so that the stylesheet didn’t interfere with the way I wanted the page to look. I tried to do this initially, but what I really wanted was for the theme stylesheet not to be included at all. As far as I can tell there’s no built in way to do force the tinyMCEPopup class to not include the stylesheet. So, I developed a workaround that seems to keep the stylesheet from loading without causing any side effects.

The first thing I needed to do was to unset the property that defined the theme stylesheet for popup dialogs. That way when the tinyMCEPopup class tried to include the file, it wouldn’t find anything to include. The location of the popup stylesheet is stored in the settings for the editor instance under editor.settings.popup_css. I figured out that the property could be unset at the beginning of the command that was executed when the button for my plugin was clicked.

editor.addCommand('mceMyPluginCommand', function() 
{		
	// Set the popup css to null while page loads 
	// because my plugin uses its own css
	editor.settings.popup_css = null; 
	...
});

This worked fine, but setting the popup_css property to null caused the stylesheet for any other plugin’s popup dialog to not load correctly. To get around this problem I needed to restore the original popup_css property once my plugin’s dialog box was finished loading. To do this, I simply added a command to the editor that would restore the original popup_css property.

// Registers an event that will 
// Add command to restore the original css file
ed.onInit.add(function() 
{ 
	var origCss = editor.settings.popup_css;
	editor.addCommand("mceMyPlugin_restoreCss", 
                       function() { editor.settings.popup_css = origCss; });
});

The previous two pieces of code could be run during the initialization of my plugin. Finally, I needed to use the tinyMCEPopup class inside of my popup dialog to call the function that restored the css.

// Restore the popup css to the original theme css
tinyMCEPopup.execCommand("mceMyPlugin_restoreCss");

It’s not the most elegant solution to the problem, but so far it’s the only way I’ve been able to figure out how to force the tinyMCEPopup class not to load the theme css file.

Unfortunately, it was too good to last. When I came home tonight my roommate told me, with a look of sadness, that something had happened to my seeds. Somehow, my mini green houses had fallen off the windowsill and onto the deck, spilling the seeds and the soil all over the place. By the time I came home my roommate and cleaned up the mess. A lot of the soil was gone and it appeared that the seeds had blown into a hole where no one can escape.

Miracle Fail

To be continued…?