Coda Pops Technical Details
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:
.plist file tells Coda in which contexts a Pop should be presented.
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:
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.
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.
Consistent Code Style
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.
Depend on non-beta Libraries
This would mean waiting until Ember 1.0 and jQuery UI 1.9 are released.
Centrally Host Libraries
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.
Future Pop Ideas
- Expanding Pops outside of CSS
- A Style Guide Pop, which lets you setup themes and apply them.
- Sass color manipulation preview Pop
- Sprite image preview/picker Pop
- Multi-prefix editing (or prefix-free previewing)
- Diet Coda support?
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.