Activate your free membership today | Log-in

Friday, April 25th, 2008

Immediate Translation and Mibbit

Category: Ajax, JavaScript, Screencast, Library

Translate Bookmarklet

I just posted on a a translate bookmarklet that uses the Google AJAX Language API:

I really liked getting the Ajax Language API out into developers hands as god knows we shouldn't have to worry about translations. Now we can use the API and have the Google back-end do all of the work.

I have recently had a couple of scenarios where I really wanted a quick translation. I had a few twitter messages pass through my stream in French and Spanish. I had the answer to some technical issues show up on foreign forums.

So, I decided to create a Translate bookmarklet that allows me to select any foreign text, click on the bookmark, and a little window pops up with the English translation if it can work it out. Automatic translation is far from perfect yet, but for many scenarios you can easily get the gist (e.g. you wouldn't want to automatically convert a book).

This is how I created the bookmarklet:

The source

First, I have the raw JavaScript source that will become the bookmarklet. There are a few sections of the code. First, we setup a method that will go off and call the Ajax Language API, passing in the translation and language that we want. This is where you would change the language code for non-English.

JAVASCRIPT:
  1.  
  2. if (!window['apiLoaded']) {
  3.   window.apiLoaded = function() {
  4.     var language = "en";
  5.     var text = window.getSelection().toString();
  6.     if (text) {
  7.       google.load("language", "1", { "callback" : function() {
  8.         google.language.detect(text, function(dresult) {
  9.           if (!dresult.error && dresult.language) {
  10.             google.language.translate(text, dresult.language, language, function(tresult) {
  11.               if (tresult.translation) {
  12.                 translationWindow(tresult, dresult);
  13.               } else {
  14.                 alert('No translation found for "' + text + '" guessing the language: ' + dresult.language);
  15.               }
  16.             });
  17.           }
  18.         });
  19.       }});
  20.     }
  21.   };
  22. }
  23.  

Then we setup a method that is able to display a window showing the result. I used the Prototype UI Window object if available, and good old alert() if not:

JAVASCRIPT:
  1.  
  2. if (!window['translationWindow']) {
  3.   window.translationWindow = function(tresult, dresult) {
  4.     if (window['UI']) {
  5.       new UI.Window({theme:  "black_hud",
  6.                    shadow: true,
  7.                    width:  350,
  8.                    height: 100}).setContent("<div style='padding:6px'>" + tresult.translation + "</div>")
  9.                    .setHeader("English Translation")
  10.                    .setFooter("Language detected: " + dresult.language)
  11.                    .center({top: 20}).show();
  12.     } else {
  13.       alert(tresult.translation + " [lang = " + dresult.language + "]");
  14.     }
  15.   }
  16. }
  17.  

Next, we load the Prototype UI window code, and accompanying CSS resources by dynamically adding the resources to the DOM:

JAVASCRIPT:
  1.  
  2. if (!window['UI']) {
  3.   var pw = document.createElement('script');
  4.   pw.src = 'http://almaer.com/downloads/protowindow/protowin.js';
  5.   pw.type = "text/javascript";
  6.   document.getElementsByTagName('body')[0].appendChild(pw);
  7.  
  8.   var pwdefault = document.createElement('link');
  9.   pwdefault.setAttribute('rel', 'stylesheet');
  10.   pwdefault.setAttribute('type', 'text/css');
  11.   pwdefault.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/window.css');
  12.   document.getElementsByTagName('body')[0].appendChild(pwdefault);
  13.  
  14.   var pwblack = document.createElement('link');
  15.   pwblack.setAttribute('rel', 'stylesheet');
  16.   pwblack.setAttribute('type', 'text/css');
  17.   pwblack.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/black_hud.css');
  18.   document.getElementsByTagName('body')[0].appendChild(pwblack);
  19. }
  20.  

Finally, we load the Google API loader, and use the dynamic loading option with the ?callback=apiLoaded. This kicks off the main driver that we saw first, and if it is already loaded we call it directly (for multiple translations on the same page).

JAVASCRIPT:
  1.  
  2. if (!window['google']) {
  3.   var s = document.createElement('script');
  4.   s.src = 'http://www.google.com/jsapi?callback=apiLoaded';
  5.   s.type = "text/javascript";
  6.   document.getElementsByTagName('body')[0].appendChild(s);
  7. } else {
  8.   apiLoaded();
  9. };
  10.  

"Compilation"

This is the raw form, and we need to get the bookmarklet form, which you can just use right away if you are wanting English. For this, I use John Grubber's makebookmarklet Perl script to do the conversion.

The Server

The Prototype UI code lives on the server, so I put a striped down version over there which just contains a combined Prototype + Window JavaScript file, and just the one theme CSS set.

In Action

Unsure what I am talking about? Just watch it in action:


I also saw that Mibbit, the Web based IRC application has a new "translate" function that auto translates in the chat rooms. It works two way, so you can go into a foreign channel and be seen to just be a bad speaker as you convert their words back.

Mibbit

Posted by Dion Almaer at 10:32 am
9 Comments

++++-
4.9 rating from 7 votes

Wednesday, March 12th, 2008

RadRails 1.0 Released

Category: Screencast, Rails, Announcements, Aptana

Aptana took over the RadRails open source project a few months back, and now have fully integrated it with Aptana Studio with the RadRails 1.0 release.

RadRails 1.0 runs as a plug-in to Aptana Studio. So in addition to all the Ruby on Rails IDE goodies and the integrated Rails shell command-line console, developers get the great HTML, CSS, DOM, JavaScript and Ajax features in Aptana Studio, which can run stand alone or within Eclipse to that all your other Eclipse tools can be right there as well.

The new version has a slew of new and enhanced functionality such as:

  • Rails 2.0 support
  • JRuby support
  • Bundled auto-installing gems for rails development
  • A Ruby profiler for Pro users
  • An RDoc preview view
  • Extended RHTML/ERb color preferences
  • Code completion for ActiveRecord model fields and finders
  • Code completion suggesting method call arguments
  • Significant expansion of code warnings and analysis, including syntax changes from Ruby 1.8 to 1.9
  • An improved look and feel

You can watch a screencast of the product at work or a full feature list.

Aptana continues to add new functionality to its products as it tries to hit the "best tools for Web development with scripting languages" vision.

Posted by Dion Almaer at 10:07 am
Comment here

++++-
4.5 rating from 12 votes

Tuesday, January 22nd, 2008

Aptana releases Jaxer, Ajax server built on Mozilla

Category: Ajax, JavaScript, Screencast, Library, Server, Aptana

Aptana Jaxer

Aptana has been known for its Eclipse based Ajax IDE Aptana Studio. Paul Colton, CEO, has impressed us at The Ajax Experience as he has shown of Studio, and how Aptana is fast to adapt and come out with support for iPhone development, Adobe AIR, and more.

But today Aptana is breaking out of the IDE world, and joining the server market with the release of Jaxer, which they are calling an "Ajax Server". Jaxer brings JavaScript, the DOM, HTML, CSS, to the server as it tries to unify the development model for developers.

You can think of the server as a Mozilla version of Tomcat. It plugs nicely into Apache (and more in the future), and handles the web application requests for you.

An example: validation

One solid way to understand Jaxer is to look at an example such as validation (screencast). Wouldn't it be nice to be able to reuse your validation logic on the client and the server? This example shows you how you do just that:

Part 1: Server Proxy

This code shows you how to use runat="server-proxy" to wrap that code in a way that the client can call it, but it gets seamlessly ran on the server:

HTML:
  1.  
  2. <script runat="server-proxy">
  3.         // Set the value of the input field 'name'
  4.         // to the initial value
  5.         document.getElementById("name").value =
  6.                 Jaxer.File.read("name.txt") || "A Long Entry";
  7.        
  8.         // Function to save the value to a file
  9.         // once validated
  10.         function saveToFile(value) {
  11.                 validate(value);
  12.                 Jaxer.File.write("name.txt", value);
  13.                 return new Date();
  14.         }
  15. </script>
  16.  

Part 2: Share code with 'both'

Then you write a simple validator that can be run on both client and server:

HTML:
  1.  
  2. <script runat="both">
  3.         // Use the same function to validate on the browser
  4.         // for user feedback and on the server for security
  5.         function validate(name) {
  6.                 if (name.length> 5)
  7.                         throw new Error("'" + name +
  8.                                 "' exceeds 5 characters!");
  9.         }
  10. </script>
  11.  

Part 3: Client side script

Finally you have the client side code that calls in:

HTML:
  1.  
  2.         // Browser-side script
  3.         function save(){
  4.                 // Runs when user clicks save
  5.                 var name = document.getElementById("name").value;
  6.                
  7.                 try {
  8.                         // Validate in browser, if successful
  9.                         // save on server
  10.                         validate(name);
  11.                        
  12.                         // Call server-side function 'saveToFile'
  13.                         // and get return value
  14.                         var savedDate = saveToFile(name);
  15.                        
  16.                         // Update the confirm DIV browser-side
  17.                         document.getElementById("confirm").innerHTML =
  18.                                 "Saved on " + savedDate;
  19.                 }
  20.                 catch (e) { alert(e.message); } // Show any errors to the user
  21.         }
  22. </script>
  23.  

This is the tip of the iceberg. There are other examples available as part of the download, and as screencasts.

What does this mean?

If you don't like context switching between the Web world of HTML/CSS/JS/DOM (Ajax) and the server side language of your choice, then this could be the programming model for you.

Unobtrusive Ajax

There are some interesting benefits, such as the ability to do a good job with certain accessibility without much work. If the browser doesn't have JavaScript turned on, the server can run the code and produce the HTML for you. Obviously, the HTML interface that is returned would be less dynamic.

The execution flow looks like this:

Jaxer Flow

Prototype/jQuery/Dojo/... on the server

You can use your client-side library of choice on the server (e.g. Prototype, Dojo, jQuery, etc). My screencast below in fact does just that. The aim isn't to create a totally new programming model, but to rather be part of the Web. That being said, they had to add a set of libraries to allow you to do things on the server that you can't on the client. For example, the file reading in the example above: Jaxer.File.read("name.txt").

Databases

To build server side Web applications you normally need to persist data. Database access is provided via Jaxer.DB.*, and SQLite is built in. As soon as I saw this, I pictured a wrapper for Jaxer that would bridge the Google Gears database API. There is the ability to build some simple syncing, and have the framework do the right thing depending on if you are offline or online, and shifting data between the local and remote SQLite database. Very promising.

Cross domain XHR

Since you can have XHR calls which are really coming from the server, you can talk to any domain. Again, in my example, I proxy through to Twitter, which allows me to do a Greasemonkey type solution that works in all browsers.

JavaScript 1.8

Since the latest Spidermonkey is available on the server, you can write JavaScript 1.8 using new features such as expression closures, generators, and more. You have to be careful here and remember that this will only work for code ONLY running on the server. For all other code, you have to do the usual thing and test it with the various browsers that matter to you.

Rails for JavaScript?

I hope that we do not see a lot of huge pages with runat="server" all over the shop. We did that in the ASP/PHP/JSP of old. I am sure that frameworks will pop up to do MVC nicely with Jaxer. One option would be having Jaxer work nicely with projects such as Trimpath Junction and the project that Steve Yegge often talks about.... which is Rails-like but for JavaScript (using Rhino). Integration will also be an issue for a certain class of applications. I can imagine there being a particularly strong connection for something like Java.

IDE independence

Although Aptana Studio has top notch support for Jaxer (it better!), the product does not depend on any IDE and you are free to use it with anything. To show this, I use the stand alone Jaxer server and write my code using vi.

In fact, let's check out the video that builds a Twitter proxy in a few lines of code, showing how the beast works.


(I recommend watching the video at Vimeo to make a larger window to see the type).

Posted by Dion Almaer at 3:00 pm
24 Comments

++++-
4 rating from 54 votes

Monday, November 12th, 2007

John Resig plays with ECMAScript 4

Category: JavaScript, Screencast

With all of the talk about ECMAScript 4, instead of opining about it, how about taking it for a test drive?

John has developed a screencast on how to start playing right away:

  • Read up:
    • ECMAScript 4 White Paper - This is a broad overview of all the features that are in the language along with some trivial examples of how they should work.
    • Tamarin and ECMAScript 4 Presentation - This is the presentation that I’ve given a couple times now showing examples of many of the aspects of the languages. Generally, the examples shown are more complete than those shown in the white paper.
  • Download it
  • Start coding.


Posted by Dion Almaer at 7:50 am
5 Comments

+++--
3.5 rating from 13 votes

Tuesday, October 30th, 2007

Xythos On Demand Ajax Revamp

Category: Screencast, Showcase

Xythos On Demand is a software as a service application that lets you share files. They have released a new version that uses YUI and various commercial components to create a desktop-like application.

Eric Preston is the team lead, and I got a chance to visit him in the Xythos San Francisco office to chat about the new launch. Eric chats with us about the new Ajax features, and then gives a full screencast of the application itself.


Posted by Dion Almaer at 8:26 am
1 Comment

+++--
3.9 rating from 31 votes

Friday, October 19th, 2007

Blog.gears: An offline Blogger client using the new GData Blogger JavaScript Client

Category: JavaScript, Screencast, Showcase, Examples, Google, Gears

I was excited when Google announced their first JavaScript API that allows you to write back to a service.

Now, they have released a Blogger client that does the same, which means that you can now manipulate your blog posts directly from JavaScript.

Along with the release there are a few examples such as:

  • A tool that takes your upcoming Calendar entries and creates blog posts of the events
  • A code snippet that you can add to your website that enables visitors to your site to click on a link to comment on your content on their own blog
  • Code that allows you to search blogs on various topics, find entries, and again allow users to comment on their own blog

And finally, Blog.gears, an offline blog editor:

I tend to write a fair share of blog posts, and whenever I am writing them while offline I tend to open up Textmate to do the write-up. Wouldn't it be nice if I could open up my blog editor and do it all while I am offline?

The architecture behind the editor follows the pattern of:

  • The UI looks to the local DB for data
  • When an event happens it gets queued
  • When an event happens the UI tries to send it to the cloud
  • Events have status flags to let the system know what is happening

We interviewed Pamela Fox about the application, and she went through the architecture at a high level, and also did a screencast of the application itself.


Posted by Dion Almaer at 5:37 pm
2 Comments

++++-
4.3 rating from 18 votes

Wednesday, September 19th, 2007

Google Docs: Presentations Are Here

Category: Screencast, Showcase, Google

Google Docs has been updated with a new presentation file type:

Starting today, presentations -- whether imported from existing files or created using the new slide editor -- are listed alongside documents and spreadsheets in the Google Docs document list. They can be edited, shared, and published using the familiar Google Docs interface, with several collaborators working on a slide deck simultaneously, in real time. When it's time to present, participants can simply click a link to follow along as the presenter takes the audience through the slideshow. Participants are connected through Google Talk and can chat about the presentation as they're watching.

Building applications like these with WYSIWYG editing always pushes the limits of browsers, so it is interesting to see them at work. The key for the presentation side of things is of course the collaboration features that we are all used to from docs and spreadsheets. Oh, and you can embed them too.


Posted by Dion Almaer at 12:46 am
8 Comments

+++--
3.4 rating from 15 votes

Friday, June 15th, 2007

TV Links DB

Category: Screencast, LiveSearch

TV Links DB is the site for you if you are into the telly. It will search 71548 links to your favourite TV shows in a split second using a nice live search.

Tom Wilson made it very clean, simple and fast.

TV Links DB

Posted by Dion Almaer at 5:47 am
16 Comments

+++--
3.6 rating from 18 votes

Thursday, May 10th, 2007

MooTools Video Tutorial

Category: Screencast, Examples, Recording, MooTools

Rick Blalock has released a free version of his MooTools video tutorial that covers:

  • Lesson Two - De-Cluttering the Membership Page
  • Lesson Three - Using MooTabs to Condense Related Products
  • Lesson Four - Using a MooTools 'Light Box' to Create a Friendly Gallery
  • Lesson Five - Using Fx.Styles to Control Font Size
  • Lesson Six - Creating a Sliding Sub Menu with MooTools
  • Lesson Seven - Implementing Reflection Javascript for Images
  • Lesson Eight - Creating a Sliding Image Menu
  • Lesson Nine - Using AJAX with the Sliding Image Menu

Posted by Dion Almaer at 9:06 am
18 Comments

++---
2.9 rating from 87 votes

Wednesday, April 4th, 2007

The Offline Battle: You aren’t on a plane

Category: Editorial, Screencast