Javascript
SuperGenPass patched for Google Chrome
I am a huge fan of SuperGenPass. There are so many obvious reasons why it’s a great concept that I won’t bore you with a rehash of all of them.
Unfortunately, in Google Chrome, SuperGenPass chokes on some pages. I do not blame Chrome for that: it’s for security reasons.
I’ve patched the basic version of SuperGenPass so that it can now work on those pages. I am not sure that it fixes everything for everybody but I hope it makes your life easier, like it does mine.
Just go to this page and get the patched bookmark.
If you are using a customized bookmark, I am afraid that you will have to patch it yourself. Here is what the patch looks like:
Look for
var%20FrameTest=window.frames[i].src; |
Replace with
var%20FrameTest=window.frames[i].src;var%20FrameTest=window.frames[i].src;FrameTest=window.frames[i].document.forms; |
Done!
If you enjoyed this post, make sure you subscribe to my RSS feed!
S2ajax v1.0 connects simply PHP and JavaScript
Here comes S2ajax v1.0!
And it was long overdue. Six months already since I posted S2ajax says “hi()” I can hardly believe it.
What I think of as v1.0’s main feature is that it is now possible to simply export classes in PHP and these classes can be instantiated in JavaScript. Whenever these instances are modified through asynchronous method calls, these modifications are transparently persisted server-side.
The concept
Is it a PHP class? Is it a JavaScript class? Why, it’s both! The class is defined in PHP on the server. Instances of the class are created on demand using JavaScript on the client. Whatever modifications are made to an instance are serialized on the server.
You can create a complex application using as many classes and instances as you need.
Under the hood
The PHP class is exported; the proxy JavaScript code is generated.
Whenever the client needs to access one of the class’ properties/methods, the proxy transparently talks to the class; the class lives server-side.
The Client’s point of view
An arbitrary number of instances of the class can be created in JavaScript.
The only hint that you are using a client-server architecture is the fact that when invoking a method, its return value is obtained through a callback. This mechanism allows your client interface to remain responsive while the server is preparing a response.
The server’s point of view
S2ajax automatically persists your instances’ state and data between consecutive asynchronous calls. You still get the benefits of the “shared nothing” approach of PHP but complex objects can be manipulated through an unlimited number of clients requests.
A code sample
Server-side
Let’s create a class that will increment an instance variable every time a method is invoked. Let’s keep it as simple as possible:
class CounterTester { private $counter; function __construct() { $this->counter = 0; } public function increment_counter() { $this->counter++; return $this->counter; } } |
Clearly, every time increment_counter() is invoked, $counter will be incremented and its new value returned.
Client-Side
First, an instance of our class is created. Then, when a user click on the button labeled ‘Increment counter’, the instance’s increment_counter() method will be invoked and the new $counter value returned to our callback and displayed.
<script> function display_result(val) { alert(val); // Display new counter value } var counter = new CounterTester(); </script> <button onclick="counter.increment_counter(display_result);">Increment counter</button> |
Note that we could create as many instances of our class as we wish and provided we display the matching buttons, we could independently increment multiple counters.
Get it now!
Click our valiant friend “Octocat”, artistically represented below, to go to S2ajax’s Github page. If you just wish to use the library, look for the [Download] button:
Git!
If you enjoyed this post, make sure you subscribe to my RSS feed!
Bespin in Titanium: From The Jaws Of Victory…
bespin is really an intriguing project. Since I’ve grown frustrated with the inconsistencies between the various code editors that I have been using — I work on Leopard at home and Ubuntu at work — I thought that creating my own editor would be the answer to that. Nothing fancy, mind you. Just something consistent.
My first impulse was to use Flex. And it almost worked! Using mx:html I was able to wrap a nice web page in an otherwise very ActionScript-y application.
And then, catastrophe! Flex Webkit’s canvas implementation is subpar and I could only get a very mamed version of bespin. Nothing usable, anyway.
Thus, I turned to Titanium.
After some light trial and error, I got it to work!
Unfortunately, the result is less than awesome: Titanium’s Webkit gets easily overwhelmed and, worse, crashes reliably ( :g: ) as soon as I ask it to do some medium lifting.
This video shows the original victory followed by the vexing defeat:
Note that, to get it to work, I replaced embed.js with my own version that works around any dojo.request()/eval issue:
(function() { // -- Load Script var loadme = new Array(); var loadScript = function(src, onload) { var embedscript = document.createElement("script"); embedscript.type = "text/javascript"; embedscript.src = src; embedscript.onload = onload; document.getElementsByTagName("head")[0].appendChild(embedscript); } var onScriptLoaded = function() { var src = loadme.shift(); if(src) loadScript(src, onScriptLoaded); } var componentRequires = function() { dojo.require("bespin.bespin"); dojo.require("bespin.util.canvas"); dojo.require("bespin.util.keys"); dojo.require("bespin.util.navigate"); dojo.require("bespin.util.path"); dojo.require("bespin.util.tokenobject"); dojo.require("bespin.util.util"); dojo.require("bespin.util.mousewheelevent"); dojo.require("bespin.util.urlbar"); dojo.require("bespin.client.filesystem"); dojo.require("bespin.client.settings"); dojo.require("bespin.client.status"); dojo.require("bespin.client.server"); dojo.require("bespin.client.session"); dojo.require("bespin.editor.actions"); dojo.require("bespin.editor.clipboard"); dojo.require("bespin.editor.cursor"); dojo.require("bespin.editor.editor"); dojo.require("bespin.editor.events"); dojo.require("bespin.editor.model"); dojo.require("bespin.editor.toolbar"); dojo.require("bespin.editor.themes"); dojo.require("bespin.editor.undo"); dojo.require("bespin.syntax.base"); dojo.require("bespin.syntax.simple._base"); dojo.require("bespin.cmd.commandline"); dojo.require("bespin.cmd.commands"); dojo.require("bespin.cmd.editorcommands"); dojo.require("th.helpers"); // -- Thunderhead... hooooo dojo.require("th.css"); dojo.require("th.th"); dojo.require("th.models"); dojo.require("th.borders"); dojo.require("th.components"); } loadScript("js/dojo/dojo.js.uncompressed.js", function() { dojo.require = function(src) { loadme.push('js/' + src.replace(/\./g, '/') + '.js'); } componentRequires(); dojo.require("bespin.editor.component"); loadScript(loadme.shift(), onScriptLoaded); }); })(); |
As you can see, I override dojo.request() with my own, stack up all the component names, then load them one by one, waiting for each to be fully loaded before moving on.
If you enjoyed this post, make sure you subscribe to my RSS feed!
PHP classes and Javascript: S2ajax says “hi()”
Sajax is a ‘managed’ AJAX framework that was created by the fine folks at Modern Method a few years ago.
What’s so great about it is the seamless communication between your back-end and the web page itself: you write your PHP code, tell Sajax which functions to export and they are now accessible from Javascript.
For instance — from the ‘example_types.php’ file:
function return_string() { return "Name: Tom / Age: 26"; } |
The corresponding Javascript call would be:
<button onclick="x_return_string(display_result);">Return as string</button> |
OK so this is a pretty great package, no doubt.
Unfortunately there are exactly three things that bother me here:
- The choice to prefix all remote calls with ‘x_’ which feels less natural, even though it is a convenient way to avoid namespace collisions.
- More importantly, Sajax does not support PHP classes and I am not comfortable working with strictly procedural code. After all, object-oriented PHP has been around for quite some time now.
- Of course, it would seem that the last Sajax release happened sometime in 2006, which would explain #2
Thus, S2ajax was born.
If supports classes and methods, does not require prefixing and the export() calls are now more powerful.
The syntax is still very straightforward and relies on clean Javascript code.
And the license, obviously, is still the very open BSD.
Additionally, this S2ajax can be easily integrated with PHP 5’s magic class and methods loading. For instance, it works with my own PHP framework.
As usual, all this goodness is available at github.com!
If you enjoyed this post, make sure you subscribe to my RSS feed!
ExtPHP now on Github
About 10 months ago, I released this tool, allowing developers to handle ExtJS like “managed” code in PHP: ExtPHP.
Shortly thereafter, Jack Slocum changed ExtJS’ licensing model and it all became very muddy but my main question was: “As a commercial user, what would the status of the extensions be?”
It seems that it’s OK to create an extension and not GPL it as long as it doesn’t contain any ExtJS original code. The claim is that most extensions now fall under that category. Of course, there is still the risk of an extension still containing ExtJS code — hint: that’s very likely — and the company who paid for ExtJS commercial licensing is now burdened with…what? De-facto GPL code? Or does the code that was reused considered “commercially licensed” as well? Even though it is part of an open-source extension?
Ten months later, I am not getting a sense that things were clarified well enough. Look at this topic on ExtJS’ forums. It looks like, after September, everybody gave up.
So, what now?
Well, if anyone could point me to a comprehensive answer regarding this issue, that will sure help me decide whether to revisit my decision to give up on ExtJS from a commercial standpoint.
In the meantime, ExtPHP is now available at Github.
If you enjoyed this post, make sure you subscribe to my RSS feed!
typeface.js is promising
I read today about typeface.js and it’s exactly the lightweight replacement that sifr could use. If you are not familiar with sifr, in a nutshell: use whatever font you want, regardless of whether it is installed on your visitors’ computers or not.
Of course, these days, Flash is more popular than ever but if you are a purist, typeface allows you to do without Flash, using the Canvas element. And, even better, since it’s not Flash, it works on iPhone.
If you are looking for a pixel-perfect solution, however, it is not quite ready yet. Not far, but not quite:
- Text replacement does not allow the user to select text in either FireFox or Safari
- font-stretch support is not rendered correctly in Opera
Now, these weaknesses are, I am sure, only temporary and they are the price to pay for being able to specify your text’s rendering using pure CSS (font-stretch: normal)
If you enjoyed this post, make sure you subscribe to my RSS feed!
ExtPHP: An ExtJS Converter/Wrapper for PHP Developers
It is something that I had to think about in my day job, because my team is migrating to PHP for web development and I believe that we simply do not have enough time for them to learn JavaScript’s intricacies, I needed to be the one person who would have to wrestle JavaScript when problems happened. I therefore needed a way to insulate them from the gory details, which is why I created ExtPHP.
As you may have guessed from subtle hints, such as this entry’s 12-feet tall header, ExtPHP creates a PHP wrapper for ExtJS.
I noticed, at dzone.com, that the last time someone created a wrapper for JavaScript, many readers complained about how intrusive his approach was. Well, be assured that ExtPHP does not foil ExtJS’ non-intrusive take. Of course, with ExtJS itself, it’s up to the developer to decide what kind of style they wish to adopt, and ExtPHP follows suit.
I guess the introduction I wrote in ExtPHP’s documentation explains fairly clearly what the idea is: “ExtPHP is a wrapper for ExtJS. This is version 0.1, so I expect that a lot of things can be improved upon and your feedback is greatly appreciated. ExtPHP can be used to write both intrusive and non-intrusive Javascript, just like ExtJS itself. Use it responsibly. One of the many advantages of this design is that unknown/misspelled/misused methods are detected in your PHP editor rather than forcing you to debug your JavaScript code in your web browser. ”
Documentation? Indeed, I took some time to write a much-needed PDF document. Let me know how I can improve it, I am sure that you will find it lacking – because it is.
Anyway, I am releasing this as a “Technology Preview” and I will greatly appreciate your help beta-testing it.
Cheers.
If you enjoyed this post, make sure you subscribe to my RSS feed!
jQuery UI now professionally maintained!
Well, this is exciting:
Paul Bakaus, lead jQuery UI developer, announced today that he was hired by Liferay, Inc., of L.A., to work full time on his baby.
As an early adopter, I am very happy to see the project evolve this way. In case you are not familiar with Liferay, they develop open-source products, so all is well 
If you enjoyed this post, make sure you subscribe to my RSS feed!
About Events Capturing
Dusting Diaz blogs about consuming events in Mozilla.
I’ve always enjoyed his postings but I have to disagree about having to wait for a ‘better’ IE: the same tricks can already be performed in current version of IE.
Simply react to a click event with this code (pasted from nextBBS’ common.php):
// A very experimental private function: consume the original event, if possiblefunction _killEvent(e) { if(e.preventDefault) { e.preventDefault() e.stopPropagation(); } else { e.cancelBubble = true; e.returnValue = false; } } |
If you enjoyed this post, make sure you subscribe to my RSS feed!
Where is getElementsByClassName()?
Since one of the goals of this blog is to show you how we resolved some of the issues we encounter when writing modern Web applications, allow me to repost this short article that I originall posted at goodjavascript.com
It’s an extremely common problem: you want to retrieve all the “special” links embedded in your web page. Or all the text areas with a certain style.
You looked at someone else’s code and found that they use the method getElementsByClassName() profusely.
However, when you tried, there was no such method.
(more…)
If you enjoyed this post, make sure you subscribe to my RSS feed!
