Now CSS3Machine 1.1 is now available in the App Store. It includes a couple of bugfixes as well as addressing the number one user enhancement request: easier access to view and edit the current HTML template.
There's now an Action button on the lower left of the preview pane. Tap it and you get this:
It should make CSS3Machine a lot more useful for some users.
Birthday Sale
In a bit of a digression from the usual subject matter, I'd like to introduce you to my daughter, Finch. She's one year old this week.
Developing CSS3Machine meant I had to spend a lot of hours away from her (and her lovely Mama). They're the most important things in the world to me. It was anything but easy, and it's a common heartache among solo developers such as myself; reaching 1.0 means missing a lot.
So I'll be taking a couple of days off, and in the meantime I'm putting CSS3Machine on sale: $4.99 through the weekend. If you haven't bought CSS3Machine yet, now's a great time. If you already have, just retweet this post and spread the word!
Enjoy your week, folks. I know I will.
I've been delighted by the response to CSS3Machine. It was immediately listed on iPad Apps That Don't Suck (always nice to know you don't suck) [Edit: looks like that site's disappeared and something unseemly has replaced it], has climbed into the Top Productivity apps section in the App Store and is featured in New and Notable. Andy and Emily at Shaping the Page said it's “like a CSS editor from the future.”
Thanks to everyone who tweeted, shared, emailed and sent carrier pigeons. I really appreciate it.
But I wanted to point out a few details about CSS3Machine that haven't been covered elsewhere. And when I say details, I mean details.
The Status Display
It's easy to get lost in a CSS text file, and abstracting that into a bunch of pretty tables and sliders could easily make it much worse.
But CSS3Machine features a status display that give a bit of context about where you are in your stylesheet. It says things like “CSS3 Properties for section#content img” and even shows a progress bar when an animation is playing.
A keypad for number entry
Sliders are abundant in CSS3Machine (exactly 42 sliders, if you can believe it), and they're great when you're roughing out an effect, but eventually you need more precise control.
In iOS on iPhones or iPod Touches, the developer can use a system-supplied number pad. The keys are arranged like a ten-key, and it makes for key efficient numeric entry.
Sadly, attempting to call that keyboard style on the iPad results in the regular keyboard in “numbers mode,” with the full alphabet and numbers in a row across the top. Not exactly great for serious numeric entry.
So I created a custom keypad, modeled after the one in Numbers for iPad:
It's easy to get something like a custom keyboard wrong. A quick tour through the App Store will illustrate some ways not to do it. There are some nice implementations out there, too, but here's a close up of our keys and Apple's.
The keys have the same depressed states, and make the same sound. Sadly, there's no approved way to discover what the user's "keyboard clicks" preference is set to, so I run the risk of annoying users who have keyboard clicks off. There's an open bug [rdar://7664981], so maybe soon there'll be a way to accommodate the user's preferences with something beside the physical mute switch.
The Preview Pane
It became apparent in even the early builds of CSS3Machine that the preview pane needed to be dynamic. Sometimes, it was just in the way. Sometimes, it needed to be bigger.
How to create the interface for that in a way that didn't clutter the interface with a lot of unnecessary chrome took a while to figure out. In the end I settled on a pane that slides in above the control surface with a couple of subtle, frameless buttons to control it. See the preview pane in action in the video below.
The Color Picker
Just like keyboards, there are a lot of crummy color pickers in iOS apps. Apple dodged the question altogether, providing a simple set of color swatches in the iWork iPad apps. Omni has two color pickers and a grayscale value picker along with a bunch of swatches in OmniOutliner on the iPad, which seems like overkill to me. Having to stop to think about specific RGBA or HSL values interrupts the creative process.
I created a custom color picker for CSS3Machine that's large and finger-friendly. Behind the scenes it writes CSS3-compatible RGBA values to the stylesheets.
But in certain cases more control is needed over specific RGBA values. Direct RGBA input will be included in an update to CSS3Machine soon.
Previewing Keyframes
When creating CSS3 animations, CSS3Machine shows you a preview of the keyframe you're currently editing. It's one of CSS3Machine's banner features, and unlike anything I've seen elsewhere.
It's accomplished by grabbing the elements to which an animation applies, and then overriding the styles declared in that keyframe. If you navigate to a keyframe preview and open up the live local preview of your stylesheet from your main development machine, (It's your iPad's name formatted as a URL. e.g., http://rick-astleys-ipad) you'll see something like the following at the end.
/* The following are overrides for live styling of the keyframe at 50%,
Delete them if you see them in the exported stylesheet.*/
.card p {
-webkit-transform: rotate(80.58deg) skew(7.15deg) scale(1.10) rotateY(-65deg);
-webkit-transform-style: preserve-3d;
-moz-transform: rotate(80.58deg) skew(7.15deg) scale(1.10) rotateY(-65deg);
-o-transform: rotate(80.58deg) skew(7.15deg) scale(1.10) rotateY(-65deg);
}
Much More to Come
Lots of work went into adding subtle niceties to CSS3Machine, and there are a few more refinements and a couple of sweet features that didn't quite make 1.0.
As always, I'm interested in your feedback and open to feature requests, criticism, and swift death by meteor.
An iPad app that brings powerful CSS3 styles to your fingertips is coming soon.
CSS3Machine isn't just a CSS3 Generator
There are already CSS3 Generators on the web. Some of them are fairly usable. But they all lack a few key things; they don't give live previews of what you're generating in a meaningful context, they don't save your work, they're not pretty, and they're not any damned fun.
CSS3Machine checks those boxes, then takes it further.
Webkit's Keyframe animations are powerful and flexible (and hardware-accelerated on iOS devices), and CSS3Machine brings them to life. With live previews of each keyframe and the ability to tweak the animation even as it plays, CSS3 Machine makes it simple to experiment with the cutting edge of web design.
CSS3Machine can store all the stylesheets you're using for your current projects, as well as custom HTML templates.
When you're ready to use the styles created, CSS3Machine makes that a breeze, too. Just hit http://your-ipad's-name.local to connect your browser to CSS3Machine over wifi and you'll see the full set of declarations you're working on in CSS3Machine, ready to do with what you will.
CSS3Machine will be available soon. Sign up to be notified at CSS3Machine.com or follow @CSS3Machine for updates.
Don't get bitten by WebKit Keyframe animations and Safari 5's new Extension feature.
It appears that conflicts can occur between animations on your page and animations declared by an extension. I put together a test page which demonstrates the problem. Specifically, animations with identical -webkit-animation-names collide, and weird things happen. My cursory testing indicates that animations declared in extensions will always take precedence as they are loaded last.
I ran into this phenomenon last week as I was putting together the teaser site for a (heretofore) secret iPad project. Most of my animations worked well, but one, in which an iPad drawn exclusively in CSS3 flips around, caused me no end of hell. In the end I discovered that my animation's name, "flip" was conflicting with one in Panic's Coda Notes extension. Their "flip" occurs when the page turns around to reveal a postcard on its back.
This is certainly no fault of Panic's, of course. The trouble is that it's natural to name animations simple verbs; slide, stutter, flip, spin, etc., but that only makes this more likely to bite you. And, frustratingly, when it does you'll still get an animation, and it may even be sorta like what you want, but it'll have parts someone else's swipe or flick or jiggle, like that freaky chimera at the end of "The Fly." Yeesh.
I'll be prefixing my animation names from here on out, and I wholeheartedly recommend that all of y'all do the same.
While preparing for a trip I came across this in the _pick your question_ selectbox on priceline.com.
I blinked. What? My "preferred internet password?" For access to your stinkin' worthless rewards program?
Let’s skip over the implication that I have just one password I use (or try to use) everywhere and concentrate on the fact that Priceline puts my “internet password” in the same bucket of superficially-meaningless-but-difficult-to-guess information as my dog’s name and my favorite movie.
Screw you, Priceline. First, for confusing _personal_ information with confidential information. Personal information is what color my house is. Very few people know (or care), but I do and can recall this information easily, and it can be used to distinguish me from some random jerk or bot. Confidential information is my social security number. Passwords are confidential; don’t ask for them in the same breath you ask my favorite flavor of ice cream.
Second, screw you for teaching my Mom that passwords aren’t confidential. (And here, I’m using "Mom" in the rhetorical sense. My actual mother is much smarter than my rhetorical mother.) The grocery store asks her phone number for their rewards program, and you ask her “preferred internet password?” To her, it makes these things equivalent. Never mind the point that the grocery store shouldn’t even be asking for her phone number. You’re undermining the work of those who care about her (and their own) security. In short, you’re behaving like a crook.
Third, screw you for reinforcing my rhetorical mom's notion that it’s okay to have one password everywhere. For God’s sake, it’s 2010, and it sucks that we don’t have some kind of retina-scan thing figured out, but EVERYONE on the honest web has an obligation be be responsible with users’ data and to reinforce (and sometimes require) good security habits in those users, and you're blowing it.
But CSS3Machine features a status display that give a bit of context about where you are in your stylesheet. It says things like “CSS3 Properties for 
