Postman Collection to HTML (node script)

If you use the excellent Postman for testing and developing your APIs (and if you don’t yet, please give it a try!) you may find this little node script helpful when generating documentation.

It simply converts your downloaded Postman collection file to HTML (with tables) for inserting into documentation or sharing with a 3rd party developer. The Postman collection is perfect for sharing with developers as it remains close to “live documentation”, but sometimes you need a more readable form.

https://github.com/richardleggett/postman2html

jQuery CSS3 3D Animation

I’ve just finished a jQuery extension which adds support for modifying and animating CSS3 transformations in 2D and 3D. This was based on the 2D transform monkey-patch by Zachary Johnson. I needed this for a project I’m working on which specificall…

Update: The code has now been updated to support jQuery 1.6+, thanks again to Zachstronaught. Please bear in mind the original date on the post below, there may be some inaccuracies due to new browser versions.

I’ve just finished a jQuery extension which adds support for modifying and animating CSS3 transformations in 2D and 3D. This was based on the 2D transform monkey-patch by Zachary Johnson.

I needed this for a project I’m working on which specifically targets Webkit (tablet devices), but I’m releasing the code under the existing MIT license for anyone to use as they wish. I’ve put together a little demo to show how it can be used. This demo has been tested on Safari and Chrome, in Firefox you’ll likely only see the 2D transformations, I haven’t tried IE.

DEMO

I had very little spare time to put this together so it’s rough around the edges, very basic, and doesn’t really show the full potential of this technique. But hopefully you’ll see that 3D transformations can be used in a subtle manner with your existing JS/CSS, or in a very obvious manner in a game perhaps.

Click image to see demo. Move mouse around to rotate images in 3D, roll-over buttons and click to view transform animations.

(images are CC non-commercial share-alike, link)

Notes

There has been quite some discussion regarding the position of “HTML5″ (usually referring to HTML5, CSS3 and JS), and Flash. Steve Jobs made his thoughts clear on the subject, even though that particular letter was full of inaccuracies and errors, in particular with regards to video and touch events. Personally I’ll always use whatever tech works for the job, many of the posts bashing Flash in the last decade have been written by people that haven’t necessarily tried it. Many refer to Flash from brief experiences they had many years ago, with the timeline, slow performance and pre-AS3 code. So I thought it might be useful to write up some of the notes I made along the way as I weighed up when I might use this.

CSS Animations/Transitions

So far it’s really only Webkit that supports these. Everything is optimised for fairly non-interactive content, animations are defined ahead of time, not very dynamic. You can do some cool stuff with keyframes (at 10%, 20% etc) but I see way too many holes if you want to use these in RIAs and games.

Of course using JavaScript you can pretty much animate things as you wish, which is why I wrote the jQuery extension to support the 3D CSS transformations in the animate() function. The downside is performance. Testing on the 1Ghz Nexus One webkit browser shows that JS powered CSS animation will be severely limited on devices, certainly when compared with performance tests shown for Flash Player 10.1.

I was unable to find a way to perform a circular path (orbit) animation in CSS, anyone know if this is possible? This is something very common in UI work, rather than sticking to straight lines, transitions can benefit from having a touch of curvature to soften the effect, as well as standard (non-mouse-related) “hover” type animation. So again in this case I had to resort to using JS for this, losing the benefit of CSS animations, if anyone knows how to do this I’d really appreciate the comment.

Filters

I can’t seem to find anything that works in Webkit or Mozilla, here I’m talking about the sorts of things you do to highlight something of importance to the user to subtly improve usability; things like glow and non-box-shaped shadows (I’m aware of text-shadows and box shadows). I would have thought this was a given when the spec was being written, this could make for a pretty dated look and feel.

Blend Modes

I really just expected these to be in… there are a few things in Webkit related to this, but it’s a worry; blend modes make for an improved look and feel in modern UIs (especially when dragging things around as objects become obscured). Will have to wait and see what happens with this. Of course all of this would be almost moot if the IE 9 team decided Canvas wasn’t too much of a threat and implemented support. So many great Canvas experiments are essentially in vain as a result, so many apps still only possible using the pixel manipulating features in Flash Player 8+.

CPU usage / Performance

I was using a jQuery plugin for animating elements on a curve/arc to get the circle animation but I found CPU usage went straight to 100% with the four animals, so I presume either my usage was wrong (there wasn’t much to it) or there’s something wrong with that plugin.

Safari uses 100% CPU just to run the setInterval() for the first 30 seconds before dropping down to <5%, Chrome doesn’t suffer from this. I’m not sure whether this is a bug in Safari or not, hopefully someone can shed some light on this. Outside of setInterval() there are no built in ways to do real-time games in JS that I am aware of (Flash has setInterval and Timers but it’s much more efficient to use the ENTER_FRAME event which results in no CPU overhead).

If you are doing real-time games in JS, I would probably avoid the overhead of jQuery for the most part and keep it as low-level as possible, the DOM with its history of laying out mostly static content doesn’t lend itself amazingly well to high-performance graphics, this is akin to building a game in the Flex (app) framework, you just wouldn’t, you’d use Sprite/MovieClip etc which doesn’t have the enormous measurement overheads for liquid layout, padding, margins, accessibility and so on. Perhaps Canvas is an option, which unfortunately still means Flash for the next few years (flashcanvas) due to IE9 (SVG could take up a large amount of slack, but that’s about equivalent to FP8 so not particularly exciting).

The other day I saw this video which appears to confirm my performance worries with HTML. It’s very easy to say HTML provides better performance than Flash until you try to do the same sort of things people do with Flash but I imagine the FUD will continue long after people start to question why we aren’t seeing these cutting edge apps being built with HTML.

Cross browser inconsistencies

I mentioned I’m only targeting Webkit, luckily the two big OSs in tablet devices (Apple iPhone OS and Android) both run Webkit, but I am a little worried by the fact that something as basic as text-stroke only works in Webkit, there’s nothing very concrete to go on as to who’s going to support what in the coming years. Even Firefox doesn’t support it, and that actually has a big impact on design as I’d also have to remove the (fairly supported) text drop-shadow because without the text stroke it just looks ugly. What a nightmare the next few years will be, with frustration and constant set-backs; I’ve gotten used to being 100% confident anything I can achieve in Flash will work across all browsers, the thought of hacking and rolling back to simpler times is a pain.

Conclusions

So this has been a learning experience… it certainly works for me when targeting mobile devices for fairly simple apps/games, where you don’t have a lot of heavy graphics or effects to deal with. I can definitely see a huge chunk of current-gen Flash web apps being cut-down a little and written in HTML+CSS+JS in order to support Apple devices and in favour of Web standards, but I fear if Flash becomes too niche we’re going to take one step forward and two steps back just as web apps and games were really beginning to rival the desktop; leaving us with a rather uninspiring experience based on what you simply can’t do in HTML5/JS/CSS3. In short it’s only about 60% of the way to Flash Player 10 in raw technical capabilities and before widespread use we’ll see Flash Player 11, 12, with who knows what.

So it’s not quite as great as I hoped, but I’m gonna jump on board as best I can and push it as far as I’m able. Still, what I’d really love to see is browser vendors pushed in the right direction by us developers demanding some of these things as soon as possible.

ActionScript and ECMAScript 3.1/4 – Inter-op is the Key

Like many other Flash devs I’ve been following the discussions surrounding the ECMAScript 4 decisions and the Harmony project quite closely. There are a few bloggers out there that appear to be stating that ActionScript will become divorced from the stan…

Like many other Flash devs I’ve been following the discussions surrounding the ECMAScript 4 decisions and the Harmony project quite closely. There are a few bloggers out there that appear to be stating that ActionScript will become divorced from the standards. To be honest only Adobe can decide that, but either way, that’s only half the story. In particular, it does not mean that ActionScript will not be able to inter-op, and that’s key…

Here’s a Google Spreadsheet containing the votes by Adobe, Mozilla, Google, Apple and most controversially Microsoft regarding the various features of ECMAScript 4, such as the notion of packages, new operators, and so on. So clearly everyone not in agreement, everyone with their own valid opinions and vested interests. And you can see already that there are rejections in the feature set of ECMA4 that AS3 has already implemented.

So does ActionScript 4 have to take a side step (and maybe a step backwards) to get in line? It doesn’t really matter. Whilst it’s nice to be able to jump between languages without having to change your mindset at all, it’s not a big deal. What is essential is that you can call functions and pass objects between those two VMs, or indeed, share the VM. And forgive me if I simply don’t understand enough about how this sort of thing works (very likely), but this is still possible.

Indeed right now we can very easily inter-op between the very old JavaScript 1.5 and ActionScript 3 via ExternalInterface. Yes there are limitations, but both environments (Flash and HTML) have many unique features and extensions that simply don’t cross the boundary very well. For example the HTML DOM (having said that you can still control it, see AIR), or in the case of Flash, cutting edge features like 3D, Adobe Pixel Bender (Hydra), or even simple Bitmap effects. Now I know these are not language features at all, but they are part and parcel with how we as developers use our language every day, and so there is no harm at all in having extensions that are unique to one environment, as long as they do not conflict with a similar feature of another. One example here is packages and namespaces… AS3 has them, it doesn’t look like JS will get them, but so what, as long as the code is similar enough to understand, porting code can be automated, and at the very least inter-op can still be easily achieved the fact that they differ is small fry.

Personally I would say the challenge now for Adobe will be to continue to develop ActionScript into a feature-rich language, whilst making sure it doesn’t begin to conflict with the ECMAScript standard it runs in parallel to. The nature of JavaScript following the committee-led ECMAScript standard means this is going to happen again and again, the process is simply too slow. Adobe (and now Microsoft) have set a new pace for the web.