First and foremost, Coda 2 is out! Get it from Panic's site or the Mac App Store.
Now, what are Coda Pops? Coda 1 has an integrated CSS editor sidebar which provided some simple form elements for editing CSS styles. This sidebar has gone away in version 2, but the void has been filled by Coda Pops which are context-aware UI popups that provide controls for generating CSS. There are 10 of them in the current release and they look like this:
Each Pop is implemented in HTML/CSS/Javascript and lives within the Coda application bundle. An included .plist file tells Coda in which contexts a Pop should be presented.
The Coda application provides several methods to the Javascript environment to read-in the string contents being passed in from Coda, notify Coda of a string change in response to changes in the Pop UI, read/write Pop-specific preferences and finally dismiss the Pop.
To encapsulate these interactions and provide common utilities for all Pops, a library was created known as PopKit.js. This library is neither public or supported at this time, but Panic has plans to make Pops user-expandable in the future. For the curious, here are the details.
PopKit.js is built upon:
jQuery and jQuery UI provide a foundation most web developers would be comfortable working with. EmberJS is my preferred frameworks for Javascript applications which have interactive UI elements, must respond quickly and condense the state of the application. What this means is, EmberJS allows me to create controllers for every UI element and have their individual updates processed into a single string, the output CSS, quickly and easily. The Color and Gradient Pops are probably the most complex, with Hue, Opacity sliders interacting in real-time with the mouse loupe color picker.
The actual PopKit library is only 500 LOC. It provides a thin wrapper around the communication with the Coda App, a root "Application" class for Pops to extend from, Color parsing and manipulation, and UI controls for slider controls and buttons.
I've provides the HTML and Javascript contents of the Border Pop below. I'm personally proud of their brevity and readability, given that they create complex and beautiful UI.
Going forward, I'd like to see this library become a foundation for user-created Pops, but that's going to require some additional work.
I used CoffeeScript to quickly build the library, but if it were to become a public library, I would refactor away the cruft left behind by the CoffeeScript compiler. We only need to support WebKit so some shims could be removed and we could standardize our variable names and other basics.
There is inline-docs in my source CoffeeScript version, but these are stripped by the compiler.
This would mean waiting until Ember 1.0 and jQuery UI 1.9 are released.
Right now, each pop contains uncompressed versions of the entire stack. This isn't great for file size or re-usability. Once this is a supported library, it can be moved into a central location, compressed and made available to all Pops.
Finally, I just want to say thanks to Panic for letting me be part of this amazing app. They're great guys and it's wonderful to finally see Coda 2 in the wild.