Friday, November 21st, 2008
Category: JavaScript
I had to hold this back until Friday, because you will need some time to read Steve Yegge talking about his new project Ejacs:
Ejacs is an Ecma-262 compliant JavaScript interpreter written entirely in Emacs Lisp. It should work in GNU Emacs versions 22 and higher.
The parser and evaluator are ports of Brendan Eich’s Narcissus (JavaScript in JavaScript). The runtime is my own implementation, with a few exceptions (notably the regular expression engine) that are ports of Mozilla Rhino code.
The post is true Steve-y. He rambles and loops in the way that Billy Connolly does in a standup routine, somehow managing to hold on to enough string to get his way back. Take some time to read the beast in full, but here is my translation:
Steve talks about playing guitar He then mentions Ejacs He talks about Narcissus the cheater Reading the ECMA-262 specification is a lot of fun Holy crap he had to learn a lot of elisp Emacs has arbitrary-precision mathematics, deep Unicode support, rich Date and Calendar support, and an extensive, fairly complete operating system interface. All that for a “text editor” huh. Oh, it is a platform. js2-mode came first Rewrite it by porting Mozilla Rhino’s parser, which is (only) about 2500 lines of Java code. Ejacs is something like 12,000 lines of Emacs-Lisp code, all told, so that didn’t seem like a big deal. JavaScript is better than elisp? Blashphemous Problem #1: Momentum Problem #2: No encapsulation Problem #3: No delegation Problem #4: Properties Problem #5: No polymorphic toString Emacs advantages: Macros and S-expressions That said, I suspect I would probably prefer Clojure over Rhino, if I ever get a chance to sit down with the durn thing and use it, so it’s not so much “JavaScript vs. Lisp” as it is vs. Emacs Lisp.
Category: Framework
Two years ago we covered JotForm, a Ajax-based web form builder. The folks behind it have been busy in the intervening time and have now released a more general tool: Memberkit.
Three years in development, Memberkit lets you
use the drag and drop tools to create listing pages, display pages or search forms. You can create multiple forms and create relationships between them… without writing any code.
While at present Memberkit targets a particular niche, it has ambitious plans.
We have released this first version specifically for membership and
social sites. Our plan is to first make it perfect for these specific
taks before turning it into a complete web framework.
The interface seems quite polished and responsive, and I like the narrow focus. You can check out a demo of the framework, view a screenshot tour, or watch a video.
What do you think? Do these VB-for-the-Web frameworks have a shot at any mainstream success?
Category: Canvas, Fun, Games
Fun news for a Friday. From Jacob Seidelin–the dude behind JavaScript Super Mario Brothers–comes Digg Attack, an original JavaScript game using <g;canvas> for visuals (and Flash for music).
As an added twist, the game uses Digg to provide a sort of unique twist; enemies in the game are based on stories in the Digg API feed and their ratings.
Category: Mobile, iPhone
John has done a really good job at wrapping up information on the various options for JavaScript developers on the iPhone platform.
He discusses the various approaches:
JiggyApp: JiggyApp provides a full API for developing an application - apparently separate from most of the typical APIs. Arguably, though, the code ends up being relatively usable (jailbroken only :( JSCocoa: JSCocoa is a full bridge that maps Cocoa development into JavaScript (instead of the typical Objective-C/Cocoa mapping). The result ends up working in both OS X and on the iPhone. PhoneGap: PhoneGap is an application that exposes a few JavaScript APIs to pages running MobileSafari. Right now this includes Geolocation and access to the Accelerometer. WebTouch: The other day “Dr Nic” wrote up an article on how he had used a WebKit instance (along with HTML, CSS, and JavaScript) to render a portion of his iPhone application.
I was chatting with someone on the PhoneGap team about their Android support. There is a play to be had to enable rich mobile applications all based on the Open Web stack that we know and love :)
Category: Fun
A little Friday fun here from Jacob Seidelin. He has added FlickrBrot to his other fun fractal examples of the past.
FlickrBrot commemorates the birthday of Mandelbrot himself:
Today is the birthday of Benoit Mandelbrot. About 30 years ago he pulled a bit of mathematical beauty out of his head that would make him father of what is called fractal geometry. Today, at 84, he’s a retired Sterling Professor from Yale but is still getting awards thrown his way and even planets named after him. I thought I’d make something to mark his birthday since I’ve been playing a bit with fractals and JavaScript lately and because he’s just damn cool.
What I’ve spent my morning doing is hacking together my fractal renderer with some of the Flickr stuff I’ve also been doing. Instead of drawing colored pixels, it now pulls in a (limited) number of Flickr images and uses those to paint a visualization of the Mandelbrot set.
Thursday, November 20th, 2008
Category: Ajax, Cloud, Ext, Yahoo!, jQuery
YUI and Google
Most everyone knows that Google has really stepped up to the plate by helping many JavaScript library projects host their builds on the Google AJAX Libraries API. Apart from providing a central distribution point for these libraries, the bandwidth cost savings alone go a long way in helping frameworks service their users in a sustainable manner.
Google continues it’s commitment to helping out by adding the Yahoo UI to the growing list of supported JavaScript libraries.
Thanks to Vadim Spivak at Google and Dion Almaer (now at Mozilla) for helping to make this additional option available to the YUI developer community. We love that Google is supporting web developers in this way — grabbing YUI files from Google’s global infrastructure is a fantastic option to have.
This is great news for YUI developers who now have a choice of linking directly to YUI via yui.yahooapis.com and ajax.googleapis.com. YUI team lead, Eric Miraglia, has a great write-up on the YUI blog about this and goes into detail on how the framework’s users can take advantage of this new hosting option.
jQuery and Amazon CloudFront
With nearly 2.5 million requests per day to the jQuery website, the jQuery project team is constantly on the look out for ways to decrease hosting costs while still managing the growing number of requests for the site’s resources. Originally leveraging Amazon S3 for many of their static pages, the project has now turned to Amazon’s new CloudFront CDN. The change has allowed for jQuery pages to be globally hosted as opposed to being centrally located in Amazon’s Seattle-based S3 hosting center.
In tests, John Resig, team lead for the jQuery project, noticed substantial performance gains based on the switch:
I ran a similar test here in Boston and even managed to see a large improvement. I was seeing latency of anywhere from 50-200ms on Amazon S3, but only a latency of 17-19ms with CloudFront.
What does all of this mean? It means that the jQuery site is going to load even faster than it does now. We already receive some excellent hosting from Media Temple but being able to off-load these static files to the fast-loading servers will only make for a better browsing experience.
In less than 24 hours the project had received almost 2.5 million requests for over 50GB of data. The only drawback is an increase in bandwidth costs but still substantially less than that of a traditional hosting plan. The jQuery project makes use of the Google AJAX API as well and recommends it as choice for linking to the jQuery and jQuery UI libraries.
Ext JS and CacheFly
The team at Ext JS has taken an interesting approach to CDN usage by extending their library build manager to allow users to host their own custom build on the CacheFly CDN.
The hosting is free and what makes it unique to something like the Google CDN is that it allows Ext developers a central access point for their own custom builds.
We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.
Category: Canvas, jQuery
JAVASCRIPT:
$(window).load(function() {
$("#example").liquidCanvas(
"[shadow border gradient] => roundedRect{radius:50}");
});
This is an example of Liquid Canvas, a new library from Steffen Rusitschka who created ShadedBorder and RUZEE.Borders.
Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.
Automatic generation of HTML canvas elements which scale with their HTML container, e.g. a floating DIV Abstraction of canvas - each HTML element gets a "paint" method Works with plugins for rendering Loads of plugins already exist Own plugins are possible Simplified render language for plugin-based rendering Rendering language uses a CSS-like syntax for plugin styles Based on HTML Canvas, jQuery, ExplorerCanvas Tested on Firefox, Internet Explorer, Safari, Chrome
Category: Firefox, HTML
Via Myk Melez comes word that Firefox 3 supports HTML 5 web protocol handlers, which I had not realized before. These are really nifty:
JAVASCRIPT:
window.navigator.registerProtocolHandler("mailto",
"https://www.example.com/?uri=%s",
"Example Mail");
This code creates a protocol handler for www.example.com that makes mailto links direct the user to the www.example.com web application, inserting the link into the URL given replacing the %s value. The final argument is the title of the protocol handler to present to the user.
There are obviously security limitations around this:
Note: Web sites may only register protocol handlers for themselves. For security reasons, it's not possible for an extension or web site to register protocol handlers targeting other sites...The URL template supplied when registering must be of the same domain as the webpage attempting to perform the registration or the registration will fail. For example, http://example.com/homepage.html can register a protocol handler for http://example.com/handle_mailto/%s, but not for http://example.org/handle_mailto/%s.
The user will be prompted on whether they want to allow this protocol handler:
Now, when the user clicks on a link that has a registered protocol handler, they will be prompted on how to work with it:
This feature is documented in the HTML 5 spec. You can find documentation on Firefox's implementation here and here.
Category: HTML
Mark Pilgrim is back telling us what is new in the world of HTML 5 and focuses on changes with the video tag and API:
The big news this week is a major revamping of how browsers should process multimedia in the <audio> and <video> elements.
r2404 makes a number of important changes. First, the canPlayType() method has moved from the navigator object to HTMLMediaElement (i.e. a specific <audio> or <video> element), and it now returns a string rather than an integer. [canPlayType() discussion]
The canPlayType(type) method must return the string "no" if type is a type that the user agent knows it cannot render; it must return "probably" if the user agent is confident that the type represents a media resource that it can render if used in with this audio or video element; and it must return "maybe" otherwise. Implementors are encouraged to return "maybe" unless the type can be confidently established as being supported or not. Generally, a user agent should never return "probably" if the type doesn't have a codecs parameter.
Wait, what codecs parameter? That's the second major change: the <source type> attribute (which previously could only contain a MIME type like "video/mp4", which is insufficient to determine playability) can now contain a MIME type and a codecs parameter. As specified in RFC 4281, the codecs parameter specifies the specific codecs used by the individual streams within the audio/video container. The section on the type attribute contains several examples of using the codecs parameter.
Video and the Open Web is a huge issue. The idea of having video be a native object that other components can integrate with (e.g. rotate in canvas) is great. We need codecs implemented. We need penetration. We need more.
Category: .NET
Regardless of whether you’re in the Google camp or in the Microsoft camp, I think it’s a fair statement to say that these differences of viewpoint accurately reflect each company’s core strength and focus: Google wants the browser to grow to subsume the desktop; Microsoft wants the desktop to grow to subsume the cloud.
This was the concluding paragraph in a post by Danny Thorpe of Microsoft (and formerly Google).
His post is itself a rebuttal on Dare's article: Live Framework (LiveFX), Is it Microsoft's GData or Something More?:
A number of LiveFX's additional features such as synchronization and resource introspection which have no analog in GData are fairly interesting and I wouldn't be surprised to see these ideas get further traction in the industry. On the flip side, the client-side Live Operating Environment is a technology whose benefits elude me. I admit it is kind of cool but I can't see its utility.
Danny answers:
The answer, in a word, is “offline.â€
The local Live Operating Environment (local LOE) is what makes running mesh-enabled web applications on the desktop, outside the browser, possible. The local LOE creates and manages a sandboxed execution environment for the mesh app, just like a browser would for an HTML+JavaScript or Silverlight application but without the browser UI frame looming overhead.
It seems like a trivial thing, whether or not the browser frame surrounds your app UI. Does it matter? The answer is yes - having your app surrounded by browser UI constantly and forcibly reminds the user that this isn’t a real app, it’s just a web page with lipstick.
The Live Framework local LOE is a client application that works like a browser. It may even create an instance of the browser internally (I don’t know the internal details of the LOE) but it is fundamentally treated as “not the browser.â€
I am trying to wrap my mind around this all myself :)
Wednesday, November 19th, 2008
Category: Canvas
Peter Nederlof of the infamous Dutch "Lost Boys" created a 3D engine in Canvas.
Straight from the horse's mouth:
I've been working on a 3D engine on canvas for some time, and as I was posting a message on our blog, I figured you guys might be interrested as well :)
The demo is over here: http://www.xs4all.nl/~peterned/3d/
Another (completely useless but fun to watch) one is over here (and
using chrome is strongly advised): http://www.xs4all.nl/~peterned/3d/psychedelic3D.html
Ultimately the purpose of this engine would be to provide an easy to
use platform/interface for creating 3D stuff, from degrading interface
elements for sites, to complete games. Collada support is en route,
and with squirrelfish hitting air, I'm considering trying that too :)
More details are available on the Lost Boys blog.
Category: Utility
Aaron Iba of AppJet has announced EtherPad a very cool product that is near and dear to Ben and I as we play with dev tools on the Web. I will let Aaron talk about it in his words:
It's a realtime collaborative text editor that runs in a web browser
(IE6+, FF1.5+, Safari 3+). It's implemented entirely in JavaScript
(server, client, and database), which I think speaks to the power of
JavaScript as a language.
It's great for anyone who wants to collaborate on a text document, but
especially great for JavaScrpt programmers to collaborate because it
supports realtime text highlighting of JavaScript source code. (To
enable this feature, click on the checkbox under "options" on the
right side of the screen).
In addition to being a cool product on its own, EtherPad is also the
first product built and hosted on the AppJet Web Platform. The AppJet
Web Platform is like a "grownup" version of the current appjet. It
will feature a JavaScript framework for writing client and server code
(think "JavaScript on Jets"), an in-memory database of JavaScript
objects, and utility hosting on our grid.
Category: Adobe, Aptana
AIR 1.5 has been released at MAX this week.
For the folks that like to write AIR apps that at least have some JavaScript, you will be happy to see that WebKit has been updated:
The version of WebKit included in AIR has been updated to a newer version. The updated version includes Squirrelfish, a new bytecode interpreter that improves the execution speed of JavaScript for common actions. Our internal tests show that HTML-based AIR applications run as much as 35% faster for many types of operations. We have also added support for interactive debuggin fo Ajax-based AIR applications.
There is also a nice sample app that uses jQuery called BlackbookSafe.
![[image]](http://mowser.com/img?url=http%3A%2F%2Fwww.aptana.com%2Fimages%2Fscreencast%2Fair_debug.jpg)
Aptana is also helping you out with their new Studio plugin for AIR debugging:
Today's release of the Adobe AIR Development Plug-in for Aptana Studio (beta) features, you guessed it — JavaScript debugging for Adobe AIR apps along with support for Adobe AIR 1.5 which Adobe announced earlier this week.
Category: Editorial, Flash, HTML
As it is Adobe MAX this week, there is a lot of talk about the Flash platform. How does this relate to the Open Web? Well, it turns out that Dion and I have been discussing how Flash can join and become a part of the Open Web.
Dion kicks things off with his blog post "The Flash Platform: How Adobe could join the Open Web to take on...". He first talks about how developers see Flash today versus other options:
Adobe (via Macromedia) has traditionally been a Web designer company, but developers haven’t jumped in to the same degree (note: not to say they haven’t been wildly successful!). I think that the perception is something like this:
Dion discusses how Adobe has an opportunity to position themselves relative to Silverlight much more strongly in the Open Web camp:
With Silverlight making a huge charge I worry about a world where you have “Best viewed in Silverlight and IE†(which in fact is “only viewed in…â€) and people often ask: “But isn’t Flash just as bad?â€
Adobe has an opportunity here. They can move to the right and Flash could become strongly in the Open Web camp. Then we would all be stronger as we come up against Silverlight :)
The next logical question related to this is open sourcing Flash:
The conversation tends to end up with opensourcing Flash, which I think will happen at some point through necessity, and the sooner the better (for everyones sake). Flex has a loyal base and has some open source help, but hasn’t gotten the love that it could get because it sits on top of something that isn’t open source itself. It is hard to get excited about an open source tech that sits on top of the same vendors proprietary platform!
I agree with Dion that open sourcing Flash and having it join the Open Web camp is a very compelling idea. Open source would just be the first step, though, so following up on Dion's post I put together an editorial titled "How Flash Can Integrate With The Open Web":
As Dion points out open sourcing Flash is one big part of making this happen, but another huge aspect would be to have Flash and Flex integrate better into the web stack and be less of a 'black box' on the screen...The important point is to integrate Flash and Flex more deeply into how the Open Web works:
Cross-Platform Standards No Vendor Lock-in Anyone Can Innovate Powerful, Universal Clients Open Source Implementations Mashable, Searchable, and Integrated
I give a list of suggested ways to do this; the important thing is to have Flash integrate more deeply -- these are just some suggestions to kick things off. Here are some of them; click on them to read more in-depth how this might work:
I wrap up with a conclusion:
At the end of the day Adobe is a tools company, a really damn good tools company actually. Doing the above should allow Adobe to continue creating powerful tools that help authors and content creators while expanding the size of the market they can target.
The above list was just a suggestion to kick things off. The real focus is on having Flash integrate into the web stack better itself (and evolving both Flash and the web stack themselves into the future).
How do you see this happening?
Category: Fun
The JavaScript below was pointed out by Aaron Newton, and it comes from SharePoint. Jim Wilson said about it: "and we wonder why windows has 40 million lines of code."
JAVASCRIPT:
function DeferCall() {
if (arguments.length == 0) {
return null;
}
var args = arguments;
var fn = null;
if (browseris.ie5up || browseris.nav6up) {
eval("if (typeof(" + args[0] + ")=='function') { fn=" + args[0] + "; }");
}
if (fn == null) { return null; }
if (args.length == 1) {
return fn();
} else if (args.length == 2) {
return fn(args[1]);
} else if (args.length == 3) {
return fn(args[1], args[2]);
} else if (args.length == 4) {
return fn(args[1], args[2], args[3]);
} else if (args.length == 5) {
return fn(args[1], args[2], args[3], args[4]);
} else if (args.length == 6) {
return fn(args[1], args[2], args[3], args[4], args[5]);
} else if (args.length == 7) {
return fn(args[1], args[2], args[3], args[4], args[5], args[6]);
} else if (args.length == 8) {
return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7]);
} else if (args.length == 9) {
return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
} else if (args.length == 10) {
return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8], args[9]);
} else {
var L_TooManyDefers_Text = "Too many arguments passed to DeferCall"
alert(L_TooManyDefers_Text);
}
return null;
}
Tuesday, November 18th, 2008
Category: Browsers, Plugins, Yahoo!
Austin Chau and I are here on the Yahoo campus for the Yahoo BrowserPlus release party. I'm going to blog the event as it happens here (Disclosure: I work for Google with the Open Web Advocacy and Gears teams).
First, Ernest Delgado, Canvas whiz here at Yahoo, sent me a cool demo showing a prototype he and Michael Johnston made of Yahoo Maps and Flickr integrating with Yahoo BrowserPlus using the native gyroscope on Macs. You just hit the side of the laptop, for example, in order to jump to the next Flickr picture, or tip your laptop to zoom around a Yahoo Map:
Eric Miraglia is opening the release party up with a nice Introduction to YUI:
* Starts with some really nice demos of things you can create in the browser using YUI.
* Underlying technologies driving browsers are very complicated.
* About 7 knowledge areas needed for web development -- each is different than the standard, with bugs and specialized expert knowledge. You get about 672 different permutations of things needed for you to know and test on.
* YUI focused on "A-grade browser support".
* Good to target toolkits like YUI, since it helps you be future-compatible when new browsers appear like iPhone and Google Chrome
* Goal of YUI: Have a sophisticated widget like a rich text editor work cross-browser using just a snippet small snippet of code.
* Also want things to be automatically accessible.
* Progressive enhancement should be easy and possible, showing a cool demo of hierarchical menus still being readable on Lynx, a version of Firefox with no JavaScript, and then a full IE with CSS and JavaScript on.
* YUI is ala carte, file sizes are small, between 15 and 30K for any given component (including gziped)
* Deployed at Yahoo for three years, on every major property, 400 million users/browsers consuming YUI every month. In properties like Flickr and on the front page, well tested.
* YUI in lots of places: iGoogle, Wall Street Journal, Mozilla, LinkedIn, Southwest.com, Obama website, more
* ~1,000,000 external downloads
Now Lloyd Hilaiel is getting up to present on Yahoo BrowserPlus, the focus of today's event:
* The teams motivations: people get browsers -- browsers could be so much more -- plugins aren't working! Takes too long for new innovations to propagate (5-7 years)!
* Non-goals: no fixing web UI, no web outside the web (like AIR or Mozilla Prism), no improving JavaScript (that's the domain of YUI, JQuery, Dojo, etc.)
* YES to new web features with low overhead. Low overhead: low intellectual overhead, low overhead to implement and get it into widespread production
* Plugins have strengths (scriptable, cross-browser), but they have problems... installing them sucks, writing them is hard, sharing doesn't happen, updating is clumsy, securing them is hard
* BrowserPlus enables in-browser desktop applications
* Abstraction layer over web plugins. Implements all the stuff common to web plugs, decreasing cost of development and helping end users with management and installation
* User install core platform just once
* Page requests distinct services it wants to use, if not installed user is prompted to accept services and they are installed on the fly
* Demo of Flickr uploader working in browser using Yahoo BrowserPlus - drag and drop into browser of images, even folders for recursive uploading, 100% leveraging client-side functionality, multiple file selection.
* Demo of a BrowserPlus marble maze game using the Mac's motion sensor that exposes a single function that gives the laptop's x and y position and acceleration. Idea is that you can expose simple functions for custom hardware -- rest of app can just use web technologies.
* Demo where you can drop a file into a page and then work with the files contents, service coming out soon. Took just one day for them to create. Imagine dragging and dropping vCards or iCal files for example for a web-based calendering system.
* Demo showing desktop notifications
* Services installed on demand, no more monolithic plugins -- instead smaller services, installation seemless, no browser restarts
* Authoring of new services currently restricted to Yahoo and partners
* BrowserPlus will be Open Source! Goal is to have Service API and services open source by end of year, everything else by mid next year.
* Need to figure out how to protect end-users while removing Yahoo from the loop of handling serving up the services
* Yahoo roles: consumer of the platform and the project maintainer (bug fixes, feature requested, service adoption)
After a short break the team (Lloyd Hilaiel, Steve Spencer, David Grigsby, and Gordon Durand) did a deep dive on the Yahoo BrowserPlus architecture, security model, user-facing interaction, how web developers interact with it, and how to create your own services. There is some really impressive engineering in here; they've tackled some hard problems. There's lots of great material they went over, too much to summarize here. You can download the presentations from here in Keynote format.
Here's a snippet of using BrowserPlus from some JavaScript:
Desktop notifications:
JAVASCRIPT:
BPTool.Notify.create().show("My Title", "My Message");
Drop-in uploading widget:
JAVASCRIPT:
BPTool.Uploader.create("uploader", {uploadUrl: "up.php"}).render();
Check out the full developer docs that went live for more details.
Services are either binary shared libraries (.so or .dll) or Ruby script! The Ruby interpreter itself is a Yahoo BrowserPlus service that other services can use (services can be composed together and can work with each other, similar to how Unix utilities work with piping).
Next Page »
![[image]](http://mowser.com/img?url=http%3A%2F%2Fajaxian.com%2Fwp-content%2Fthemes%2Fajaxian%2Fimages%2Ficon_feed.gif)
![[image]](http://mowser.com/img?url=http%3A%2F%2Fmedia.techtarget.com%2Fdigitalguide%2Fimages%2FMisc%2Fplatinum_site_sponsor.gif)
![[image]](http://mowser.com/img?url=http%3A%2F%2Fajaxian.com%2Fimages%2Fpragmatic-ajax-book-cover-sm.jpg)
