Javascript

Setting up TinyMCE with jQuery and CakePHP 1.2

CakePHP uses the Prototype Javascript library for its ajax helper class but I've come to prefer jQuery. Prototype is a fine library too but I've just gotten used to jQuery.

A web application I'm working on needed a ttw html editor so I grabbed TinyMCE and copied in some of the example code and everything seemed to work fine at first glance. Unfortunately TinyMCE has an issue with jQuery's $(document).ready function and it also has an issue with saving via ajax in CakePHP.

There's a helpful page on the Bakery that outlines some issues you'll run into trying to get CakePHP & Prototype working with TinyMCE but it's a little out of date now (I'm using CakePHP 1.2RC1, TinyMCE 3.09 and jQuery 1.2.6 at the moment). I'll go through examples that illustrate how I solved the two problems I ran in to but I'm not going to explain everything you need to do ajax submissions with CakePHP.

Animating Raster Frames in SVG and DHTML

I got a little furthur with the websprites demo I started earlier this month. I've decided to hold off on the XSLT source document for now since I find the development toolchain just gets too long for me at this stage. Maybe when I have more documents to generalize from I'll go back to using XSLT for the source. After all, isn't that what XSLT is for? Transforming many documents with the same semantics in a similar fashion? I found that I didn't have a thread to extend from. What I've done on this little sprite demo is just one document that I really don't have a concrete plan for right now. Really it's just a few documents. One HTML document, one SVG and a Javascript source file. So I went to work on building just the pieces as they're delivered to the browser. The DHTML document is similar to what I showed earlier, but with some more interaction. The SVG version provides the same visual result at a given resolution as the DHTML version, but through a slightly different mechanism. The two versions are similar enough that the same Javascript drives both with just a couple lines that are conditional on the file format.

Starting with Sprites and Animation

You might've guessed from the names in the example I gave the other day, getting Ant to process XSLT2 with Saxon, that I'm doing some sprite animation stuff. I am. And so far my output is in DHTML. The whole development isn't perfect yet, but I've got a simple DHTML sprite that seems to work. If you're not familiar with the term, a sprite is an animated block. Every time I hear the word it reminds me of myCommodore 128. Sprites on that machine could be set up by poking colour values into the right spots in memory, basically drawing out a bitmap. Sprites are basically just little raster images that are animated by replacing frames quickly. After the little CSS mouseover example I threw in last week, I started thinking about how simple it would be to use the same technique to animate the background-offset value to create the illusion of animation.

JSON and the Quest for the Javascript-friendly Feed

Johan and Jeff have started a discussion on the relative merits of JSON/JSONP. I think it's time I threw my two bits in. There are a couple compelling features of JSON as a format to Javascript coders (I count myself in here). Johan talks about getting around the same-origin policy. I understand the frustration, but I feel uncomfortable opening the door for someone else to execute whatever code they deem fit on my visitors' browsers. I know they're not supposed to, but the can. It's a lot of trust. It's true that Javascript executes in a sandbox, but the code in question doesn't have to be intentionally "bad" as Jeff implied. It could be accidentally bad code. Accidentally bad code happens a lot more often than intentionally bad code. It can be worse because it's Accidental. Accidentally bad code can excersise memory leaks or any other bugs in a browser. I'm not saying that I write better code than everyone else, just that I can debug more easily if it's all served from my site. Mixing code and data makes things tougher. Not that we haven't already gone pretty far down that road. After all, Javascript in a web page is executable code mixed in data. That said, JSON is clearly a simpler format to process on the client side for JS engines that are not inherently XML-aware. This is changing with support for XPath showing up in browsers, so JSON might be a shortcut for now. As a content-provider, it looks pretty simple to create a JSON feed from an existing XML feed, so I've got no issues with supporting it that way. Well not at first glance. Then again, the feed isn't guaranteed to be valid Javascript syntax though if I don't test every feed with a Javascript parser. If I'm doing that and the client also has to validate what I've sent them then suddenly we're both doing a lot more work. What's more, if users start throwing in references to their own scripts that the server producing the feed can't see, then how can the server possibly guarantee a valid feed? That's the problem with formats that look easy. Most of the time they end up needing some kind of patching later that starts quickly to look like a kludge. JSON's not the first place this has shown up, just the latest. I mean PHP has had plenty of growing pains and broken plenty of existing code in order to get more secure default behaviour in place. Things like register_globals and the ability to reference a variable without defining it first are places that PHP used the normal behaviour for a script, but that normal behaviour caused big security issues when the language was used to build huge applications. And don't even get me started on the nightmare of escaping script embedded in text embedded in XML embedded in PHP. Each of those started as an idea to make things simpler and more readable. When shorthand syntaxes like JSON crop up it indicates that developers feel that there's too much overhead in dealing with the predominent formats: Atom and RSS XML feeds. Someone could have come up with an equivalent PHP syntax. There's as much PHP code handling XML out there as there is Javascript handling XML. PHP has an eval() function analagous to Javascript. PHP supports associative arrays and objects. Why not feed my PHP script with PHP code? I don't know the answer for sure, but I'd guess that it has to do with the fact that PHP has an established method (well, many established methods) for handling XML. JSON just seems to be a request for data that's easier to parse. My answer? I guess I believe in proxying on my own server and getting the data ready for my clients in some Javascript that's easy to run.

Starting Point for a Puzzle Game Built with XSLT, SVG and Javascript

This one's for the casual game developers and the SVG folks I've been working off and on (okay, mostly off) on a simple puzzle game done in SVG and Javascript. I started on it almost a year ago and the idea was to just put up something simple as a guide to building SVG games. I got something that sort of worked pretty easily, but each time I added a feature it seemed like I had to rewrite the whole game. I guess that's just part of developing in a green field. One of the issues that bothered me most throughout the work I did was that I was transforming level files from a generic XML to SVG in the browser. I knew that every browser that downloads the level would perform the exact same transformations and every user would have to wait a few seconds while it happened. I also had to deal with the rather hairy Javascript code that handled those transformations and debug it every time it broke on one of the platforms I'm trying to support. Not every browser has a debugger as accessible as Venkman (and at the time I don't think there was a Venkman version for Deer Park). I'd rewrite the code, get a little more capability in it and tweak it for a day or two, then shelf it again until Jeff or Candace bugged me again to stop talking about it and get something done. Okay, so I finally did another rewrite on it a month or so ago that fixes the issue that I'd avoided for so long. See, I'd wanted to keep it in just Javascript and SVG since I thought that made things simpler. There's no build step that way and the design of the game is more obvious. Scripting languages don't generally need the kind of development pipeline that compiled languages do. In C or C++ the source code has to be built before results can be seen. In Javascript or HTML, the source is the executable. When XML is used to store information though, there's always some kind of interpretation that happens to display it. That can happen right when it's accessed (like viewing an SVG or XHTML document) or there can be interpretation first that creates another document that's actually viewed. The latter transformation can be done with XSLT.

SVG Fractal Demo

I always thought fractals were a great source of eye candy. I've been meaning to write something that plots a fractal using SVG for some time now, but I actually got started from this old post on VML fractals. I rewrote the code at first to use SVG, then I started reworking and optimizing to get something that runs at least decently in Firefox.

Javascript Animation Tutorial

I just noticed that Scott's got the second installment in his Javascript Animation Tutorial up. In part 1 he covered the very basics of animation with Javascript. Now he's getting into a little more detail about performance choices. It's great read, he gets right to the point with some insight on how to get smoother animation by avoiding extra rendering in the browser. His simple demo looks pretty cool too (as usual).
Syndicate content