Javascript syntax highligting for Firebug

The syntax highligting capabilities of CodeMirror, my favorite Javascript based code editor (for Web IDE-type applications) found their way into Firebug, currently available as additional extension.

Google App Engine limitations and workarounds

One of the current limitations of the Google App Engine is the lack of scheduled background processes. But early adapters are creative to circumnavigate this and other limitations. The most simple solution to this problem has William Vambenepe: he uses Google Reader to subscribe to a dummy RSS feed on his App Engine hosted test app, that results in some kind of regular polling with an interval of about 30 minutes. Of course this can't be used for any serious stuff, and the eight seconds maximum lifespan of a request also is not helping much to improve the situation. William concludes:

In the meantime, this was a fun exploration of the GAE environment. It makes it clear to me that this environment is still a toy. But a very interesting and promising one.

A more sophisticated but also much more complicated solution to the same problem has Peter Dolan: HTTPMR, a Map Reduce implementation in Python for running on HTTP based web clusters such as Google App Engine.

I am experimenting myself with a completely rewritten, not yet released version of ErlyComet, for adding a RESTful, highly scalable Comet layer with transactional cache in front of Google App Engine (or any other service which provides easy, cheap, reliable and scalable solution for persistence and shortlived HTTP requests)

Malicious Flash fullscreen mode

Go there an try it yourself. It doesn't do any real harm, but it can scare people, especially those not really familiar with the latest capabilities of the flash player, such as full screen mode. While this example is just fun and actually the first example of this kind I have seen, I guess the same principles could also be used for real malicious stuff (e.g.: a new kind of phishing).

IETester - makes web page testing on IE less painful

Previously I was switching between several virtually installed Windows XP instances on Parallels (for Mac OS X), just for testing a web page on different versions of Internet Explorer. Now I have installed IETester, a free Windows tool, which allows to run simultaneously (and switch between) the following IE versions:

• IE 5.5
• IE 6
  
• IE 7
• IE 8 beta 1

Notapad - the start of a dojo based WebIDE

Niccola Rizzo has been working for a couple of months now on the CodeTextArea dojo widget for in-browser Javascript code editing and he has just launched a public demo and test site named notaPad.

The editor provides Javascript syntax highlighting and additional functionalities with the following key bindings:

CTRL + space - autocomplete
CTRL + l - GOTO LINE
CTRL + b - GOTO MATCHING BRACKET
CTRL + c - COPY
CTRL + x - CUT
CTRL + v - PASTE
right click on the row numbers - BOOKMARKS

blogger.com not updating homepages

Shame on you, Google ! The last few posts of this blog did only update my blog homepage after about 24 hours. I guess updating the homepage is not part of the transaction when a new post gets stored somewhere on BigTable. So if you wanna see the actual homepage of this blog instead of an out-of-date cached version, type in:

http://rsaccon.com/index.html (instead of http://rsaccon.com)

Anyway, real men build their own blog engine, instead of complaining. Right now new blog engines are popping up like mushrooms, as result of some 60000 developers messing around with Google App Engine. Unfortunately those real men are facing real problems when trying to completely import old blogs into their custom blog engine, at least that is what happened to me when I tried some years ago with a custom Rails blog engine. So for now let's hope the blogger.com issues are just temporary ...

Update: It's getting worse. Right after posting, http://rsaccon.com/index.html also continued to serve the outdated cached version.

Update II: A couple of hours later, at least the .../index.html home page got updated.

js2-mode - the second most important Javascript tool

I have been using js2-mode (an Emacs Javascript mode) for a couple of weeks now. I started using it out of curiosity, at the time I gave up on TextMate as all-purpose editor and turned back to Emacs, mainly because Emacs has so much better Erlang support. Now I consider js2-mode as the second most important Javascript tool (nothing can beat Firebug of course, and Firebug 1.2B1 on Firefox 3RC1 really rocks !). It fits perfectly into my work flow, you don't have to learn anything specifically to use it, it shows on-the-fly any syntax errors, global variables (which usually are unintentional), does a great job of line indenting, but because line indenting is often a question of personal style, js2-mode offers several possibilities you can cycle through via TAB. And in case you don't like how js2-mode works out-of-the-box, there are tons of customization options.

The only thing I am missing: I would like to use js2-mode as well as minor mode in HTML, but that doesn't seem to work yet.

Update: After writing this post, I just discovered another recent article about js2-mode with focus on syntax highlighting.

Dojo Widget for in-browser editor CodeMirror

CodeMirror, a very impressive in-browser code editor for Javascript, XML/HTML or CSS (or any language, you just have to plug in a your own parser) made some nice progress in the last months. CodeMirror has no dependency on other frameworks or libraries. If you want to use it in a dojo environment as a dojo compatible widget, here I am gonna share here a little tutorial how to write such a thing:

First download CodeMirror and transform CodeMirror.js (the main file which loads the other files into an iframe), into something like this:

dojo.provide("mystuff.widget.CodeMirror");
dojo.require("dijit._Widget");


dojo.declare("mystuff.widget.CodeMirror", dijit._Widget, {

initialized: false,

// currently supported: 'xml' (HTML), 'js' or 'css'
type: 'xml',

options: {
stylesheet: "",
path: "/static/codemirror/js/",
parserfiles: [],
basefiles: ["codemirror_iframe.js"],
linesPerPass: 15,
passDelay: 200,
continuousScanning: false,
saveFunction: function() {
console.log('save');
},
content: " ",
undoDepth: 20,
undoDelay: 800,
disableSpellcheck: true,
textWrapping: true,
readOnly: false,
width: "100%",
height: "100%",
parserConfig: null
},

postMixInProperties: function() {
this.options.stylesheet = "/static/codemirror/css/" + this.type + "colors.css";
this.options.parserfiles = ["parse" + this.type + ".js"];
},

postCreate: function() {
this.inherited(arguments);
},

startup: function() {
if (dijit._isElementShown(this.domNode.parentNode))
this.initialize();
},

initialize: function() {
if (this.initialized)
return;

frame = document.createElement("IFRAME");
frame.style.border = "0";
frame.style.width = this.options.width;
frame.style.height = this.options.height;
// display: block occasionally suppresses some Firefox bugs, so we
// always add it, redundant as it sounds.
frame.style.display = "block";

this.domNode.appendChild(frame);

// Link back to this object, so that the editor can fetch options
// and add a reference to itself.
frame.CodeMirror = this;
this.win = frame.contentWindow;

var _this = this;
var html = ["<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"" + this.options.stylesheet + "\"/>"];
dojo.forEach(this.options.basefiles.concat(this.options.parserfiles), function(file) {
html.push("<script type=\"text/javascript\" src=\"" + _this.options.path + file + "\"></script>");
});
html.push("</head><body style=\"border-width: 0;\" class=\"editbox\" spellcheck=\"" +
    (this.options.disableSpellcheck ? "false" : "true") + "\"></body></html>");

var doc = this.win.document;
doc.open();
doc.write(html.join(""));
doc.close();

this.initialized = true;
},

getCode: function() {
return this.editor.getCode();
},

setCode: function(code) {
this.editor.importCode(code);
},

focus: function() {
this.win.focus();
},

jumpToChar: function(start, end) {
this.editor.jumpToChar(start, end);
this.focus();
},

jumpToLine: function(line) {
this.editor.jumpToLine(line);
this.focus();
},

currentLine: function() {
return this.editor.currentLine();
},

selection: function() {
return this.editor.selectedText();
},

reindent: function() {
this.editor.reindent();
},

replaceSelection: function(text, focus) {
this.editor.replaceSelection(text);
if (focus) this.focus();
},

replaceChars: function(text, start, end) {
this.editor.replaceChars(text, start, end);
},

getSearchCursor: function(string, fromCursor) {
return this.editor.getSearchCursor(string, fromCursor);
}
});

Then your should concatenate and minifiy (I use YUI compressor) all the JS files:

util.js, stringstream.js, select.js, undo.js, editor.js => codemirror_iframe.js

Also minify the parsers: parsejavascript.js, tokenizejavascript.js, parsecss.js, parsexml.js

At this point you can embed the widget into a test page:

<div
id="html_editor"
dojoType="mystuff.widget.CodeMirror"
type="xml"
style="height:100%;">
</div>

Now comes the tricky part: the editor does not initialize automatically at page load, because with dojo, chances are very high, you are gonna use this widget inside a container, where the editor is hidden at page load, and that would cause trouble with some browsers. So you need to subscribe to an event which triggers the visibility of the editor, so it can be lazy-initialized at first time it becomes visible. For example to use CodeMirror inside a tab container with a tab with id 'html_editor_tab' I do something like this:

dojo.declare("MyApp", null, {
main_tab_selected: function(page) {
if (page.id == 'html_editor_tab'){
dijit.byId('html_editor').initialize();
}
}
});

var myAppInstance = new MyApp();

dojo.subscribe("main_tabs-selectChild", myAppInstance, "main_tab_selected");

Update: Uhh, where was my brain when I wrote this article, I accidentally "misspelled" CodeMirror with CodePress at several places, including the title, it's corrected now ...

New Erlang web framework by Torbjorn Tornkvist

Tobbe just announced the very first release of a new, very simple Erlang based web framework fully integrated into erlware. It has support for sgte templates. Tobbe also has a collection of other highly interesting web related projects in his git repositry, including domerl, a simple, yaws and JQuery based Comet lib.

Hard to find technical docs about dojo internals

Of course an open source framework has no real untold secrets, but digging into the source code can be time consuming and and without in-deep documentation it's difficult to extract the authors thoughts behind it, so I was pleasantly surprised when I stumbled upon this links about dojo internals (which currently can't be found, or at least not by me, at dojo documentation):

• dojo.dnd 1.1 technical documentation
• dojox.gfx 1.1 documentation

Next flashplayer ships with speex audio codec

See the release notes. Speex is one of the best codecs for VoIP, and it is patent-free and open source. Related to this is also a new UDP-based network protocol called RTMFP for faster realtime media and P2P-capable, which will be part of flashplayer 10, now let's hope Adobe will release this protocol as part of their open specification initiative, but I guess they will try to keep RTMFP proprietary (at least until it gets reverse engineered), so they can sell their overpriced Media streaming servers.

Google JS library released

As part of Google's effort to better document the open web, they released today some of their Javascript libraries. I browsed a bit through the code, it is well documented and one thing grabbed my attention: the code structure looks similar to dojo, e.g. below a snippet from their DOM lib with ''provide" and "require" statements:

goog.provide('goog.dom');
goog.provide('goog.dom.DomHelper');
goog.provide('goog.dom.NodeType');

goog.require('goog.array');
goog.require('goog.math.Coordinate');
goog.require('goog.math.Size');
goog.require('goog.object');
goog.require('goog.string');
goog.require('goog.userAgent');
...

XHTML or HTML

I never really understood why people were using XHTML and I usually tried to clarify by pointing to articles by respected Web experts (e.g.: Ian Hickson, Brad Neuberg).
Today I read this and collected some more links about use and misuse of XHTML:

• Beware of XHTML
• Understanding HTML, XML and XHTML

Adobe "opening" a few more bits of Flash

Their new initiative is called Open Screen Project and is dedicated to drive consistent rich Internet experiences across devices. It is not about open sourcing the flash player, just about opening some specifications, such as FlashCast protocol and the AMF protocol. But AMF for example has been reverse engineered long time ago, in 2003 when I contributed to JavaAMF, this protocol has already been implemented in numerous other languages.

What I would like to see is RTMP (the Flash Video transport protocol) as open specification, so let's hope they consider this at their next round of "opening".

Firefox extensions for JS disabling and Python integration

My collection of Firefox extensions is mostly just the usual stuff you need for web development, such as Firebug, MeasureIt, ColorZilla, S3Fox, FlashSwitcher and a few more. After Firebug, for long time I didn't spot anything comparable spectacular. But recently I discovered some interesting extensions:

• QuickJava: Finally an extension which makes it dead simple to disable/re-enable Javascript (I use that often to see how Ajax enriched webpages look like without Javascript). Just one click on a status bar button to enable/disable and reloading the page. Here there is even room for improvement: I would like to have enabling/disabling optionally coupled with reloading. Anyway, other extensions which provide the same functionality require a lot more GUI interaction.
• Pyxpcomext: Python bindings (PyXPCOM). This extension doesn't provide any direct end user functionality, but makes it possible to write extensions in Python instead of Javascript. Just for fun I installed the Python Shell. I can think of many potential use cases, e.g. integration with the Python based App Engine SDK, so that web designers not comfortable with command line interfaces could easily interact with the local App Engine test webserver via such an extension, when testing their templates and stylesheets.
  

The missing feature of the Web: a DNS REST API

I have been waiting for years, that a quality DNS provider will a offer a REST API for setting DNS Records, but there is still no such a thing on the market. There is a SOAP based offering from Nettica (unfortunately I have an SOAP allergy). And there are the REST APIs some service providers are exposing for updating dynamic IPs.
DNS Made Easy, one of my preferred DNS providers, told me about a year ago they were working on such an API. I am still waiting. Anyway, if anybody is aware of such a service, please let me know.

Update: Found a possible solution (but I haven't actually tested their service yet): Slicehost, a similar service as Amazon EC2, they seem to have an API which allows to manipulate DNS records. But your domain has to be hosted on slicehost.

Update II: WorldwideDNS is another option.

It's getting cloudy - Yahoo Application Platform

Just read this on TechCrunch:

... Yahoo Application Platform (YAP) - which will be a direct competitor to Google App Engine. Users can host their independent applications on Yahoo’s bandwidth, storage, database and CPU resources. At first they’ll support SecurePHP applications only, but they’ll expand to additional languages over time. The model will be very similar to Google’s - free usage up to a point, metered after that. They’ll also offer various developer tools as well.

With Yahoo offering cloud based PHP app hosting, I hope Google will focus on soon adding the already announced really useful features to App Engine, and not waste engineering efforts for supporting PHP.

Cryptography API for Google Gears

Gears will provide native cryptography to web applications, at least this is what Google Summer of Code student Mike Ter Louw is planning to implement in the coming months. While it is possible to implement browser side cryptography in Javascript (e.g.: dojox.encoding), only few Ajax applications use this functionality, because it is slow and for communication purposes it only adds a very thin layer of security (requiring lots of tricks) , compared to HTTPS.
But HTTPS is a bit of a problem in todays clouding computing platforms, because it requires static IPs tied to a domain name for a valid certificate. So gears maybe will become a preferred option to increase poor man's web application security.

Flash done right and on Google App Engine

Often I criticize the usage of Flash for content centric pages, because often Flash is implemented in a way it causes a disastrous user experience (from arbitrarily resizing browser to sound which you can't turn off and fonts which you can't resize, just to mention the worst mistakes). Now I came across a new project, which advocates to do Flash the right way: gaeswf by Aral Balkan, a client and server side open source framework, based on a collection of best practices for using Flash on Google App Engine, in a way that Flash does NOT suck. The proof-of concept (live demo) implements techniques such as:

• Embedding Flash with SwfObject
• Deep linking (based on SwfAddress)
• Flash content that obeys browser text-size changes

Google App Engine Team fixing issues quickly

Toying around a bit today on Google App Engine, I found a minor issue (not security related, very easy to work around and only affecting Mac users) in an add-on for the actual SDK. Only 32 minutes after I reported the issue they had fixed it !