The Phantom Inker's blog

I'd like to talk a little bit about web coding, specifically client-side Javascript and DOM coding.

For CMXpress, I needed a good drop-down/pop-up color-picker for use with Prototype, and it seemed to me like such a thing ought to be an easy thing to find, but in reality, it turned out to be as rare as a blue moon. There are some basic controls out there, some with irritating popups, some with tolerable design but ugly licensing, and I couldn't have any of that. CMXpress is open-source, under the BSD license, and I needed something that would play nice with that. I also needed something that would play nice with Prototype, and that ideally would be friendly to your garden-variety end-user and that would also ideally look like a control that was native to the browser.

So, since nothing fit the bill, I built ProColor. You can see a screenshot below, or you can visit ProColor's website and download yourself a copy.


In a future posting, I'll talk about how ProColor works internally. And if you want to learn how to use it, that's well-documented on ProColor's own website. Here, I'd just like to spend a little time elaborating on what it is, why it is that way, and what it can do for you.

( Read more... )

I've been spending a lot of my time developing a piece of software called CMXpress, a package which is designed for publishing webcomics. (Pronounce it like "Com-express" or "Comics press".)


I've actually been working on this thing for years, depending on how you look at it: The Wotch runs a (much) older version of the same software, and we've gotten a lot of requests there by other people to let them use our software on their site. For most of its history, the Wotch's software hasn't really been appropriate for other sites: The administrative side was ugly as sin, and much of the code behind the front page was custom code for the Wotch site: It simply wouldn't work on other sites.

But the demand is there, since there's not really another really sophisticated, professional-grade webcomic-publishing package out there. There's iStrip, but that feels more like a hacky student project than a professional software package, and as of a year ago, it's been officially abandoned. You could publish with a provider like DrunkDuck or ComicGenesis, but those don't help much if you want to run your own site, and from what I've heard, the administrative systems there aren't all that great either. There are addon packages for things like Drupal, but that's not really designed for the specific (and I believe unique) needs of webcomics. There's no good, open-source, professional-grade webcomic-publishing package. Yet.

As long as Anne and Robin keep writing and drawing the Wotch comics, they need something to power their site, and since I'm the head programmer around there, it's my responsibility to make it something good. That's why I've taken the backend there, given it a massive overhaul, and renamed it CMXpress. They're not using the new version yet, but they will be soon, probably by the end of October. The Wotch gets tens of thousands of readers every day, which means that CMXpress is gonna go through some pretty heavy testing before it ever gets released to the public. Actually, a lot of it already has gone through heavy testing, but even so, you're only gonna see it once it's had a chance to get most of the bugs worked out.

The three biggest foci (that's plural "focus," folks: check your dictionary) in CMXpress's design are:

• Security. Webcomics are a major mega-high-profile target for people who like to hack stuff, and I've put every bit of my two decades of experience into this code. Database calls are all carefully protected against injections; all I/O is wrapped and checked with calls like htmlspecialchars() and preg_match(), all necessary web requests are checked for XSS and CSRF attacks, and generally the software is just plain paranoid.
• Ease of use. Most webcomic authors know computers about as well as I know rap music: Not at all. CMXpress is designed with a hefty dose of Web-2.0 and AJAX and cool clicky-draggy-droppy stuff so that it feels easy to use. The admin system looks like a web site, but it really functions a lot closer to an application on your computer.
• Customizability. It's your site, not mine, which means I don't get to decide how your site looks. The front-end for CMXpress is built around a sophisticated templates-and-plugins system, which allows you to pick (literally) any design you want for your site. CMXpress does the grunt work, and if you want your site to look snazzy and cool or plain and ugly, that's your responsibility. I'm hoping that by the end, some people will contribute some initial style templates so that the system offers some nice defaults out-of-the-box: The standard one that CMXpress will come with is probably gonna be pretty plain, but you can readily alter the HTML and CSS and CMXpress will happily deal with whatever you come up with.
  

CMXpress runs under PHP4 or PHP5, and requires MySQL 3 or newer, and GD 2.0 or newer (GD is a common PHP extension). It's only been tested on 'nix servers (specifically Linux and Apache) and, for various reasons, probably will not run as-is on a Windows+IIS server. Sorry. CMXpress's administrative system requires a reasonably new-ish browser: IE 6+, Firefox 1.0+, Opera 9+, or Safari 1.2+. The user-side stuff requires whatever minimum browser your site template requires: If you design a template that's pure HTML 1.0, your site will run even in Lynx; in the case of the Wotch, we're targeting the same list of browsers I just gave, just because IE 5 and Netscape 4.7 are really old and moldy these days and not worth trying to support.

CMXpress will be released under the BSD open-source license when it's finally released.  It uses a number of other packages, including Prototype and script.aculo.us, Christian Seiler's BBcode parser, the Smarty template engine, Sebastian Gruhier's window library, the PEAR JSON encoder/decoder, and even some modified Nuvola icons.  All of these are also open-source, and are included with CMXpress.  (If you need to find 'em all, use Google; I don't feel like looking up all the links again right now.)

(And now this is the place where I get to gripe about IE, which I've been waiting to do this entire post. IE sucks. Do you hear me, Microsoft? IE is the least reliable, least compatible, most bug-ridden of any of the browsers I've been testing in. It's genuinely painful for me to have to see how IE mangled my code when all the other three browsers get it right, and there's a lot of IE-specific bugfixes in CMXpress, I'm sorry to say. About the only bad thing I can say about Firefox is that it doesn't support "inline-block," but IE has barfed on almost every line of CSS and Javascript in this thing. Market leader my ass! IE7 not only produces the worst appearance of any of the browsers I test in, it also is hands-down the slowest of the browsers I test in too! Drag-and-drop for rearranging things is almost unusable in IE7 --- you people should see how slick the Opera 9.5 beta handles that! Clean up your collective act or get your butts out of the browser business, because you're patently, obviously, utterly clueless. IE8 had better have a usable layout engine, or I'm coming over there and stapling a big sign to your foreheads that says, "HASLAYOUT IS STUPID!" Er... oy. End of rant.)

Anyway, let's show some screenshots! I snapped these just a short while ago of the CMXpress beta running on the Wotch site. There's a bit of work yet to do, but you can get a feel from these what it's gonna be like.