Activate your free membership today | Log-in

Thursday, April 3rd, 2008

qGallery: Prototype gallery application

Category: JavaScript, Prototype, Showcase

qGallery

Sebastian Brink has developed a nice looking gallery application called qGallery

It is really simple to use you just have to upload your images in full resolution together with a simple xml file and include the script and a simple div into the webpage. Everything else is done automatically. The gallery is creating every used image on the fly with the help of some php scripts in the background.

It is developed on top of Prototype and a bunch of other libraries.

Posted by Dion Almaer at 7:15 am
14 Comments

++++-
4.1 rating from 50 votes

Tuesday, April 1st, 2008

ECMAScript 4 Update: New Grammar, and No Tail Calls

Category: JavaScript

…. proper tail calls are out of ES4 as of yesterday’s Ecma TC39 meeting, by general (regretful, in Mozilla’s
case) agreement.

This is Brendan talking about the death of true tail calls in JavaScript 2 as the language gets tightened a la:

ES4 has overspent its complexity budget in order to explore a large design space. It is now shrinking to meet practical budgets involving Ecma member consensus, prime mover commitments, fatigue effects, community expectations, and the like. No one working on ES4 wants it to be like Perl 6. We aim to finish this year.

Chromatic jumped on this one.

Francis Cheng posted about the grammar update for ECMAScript 4 which has the following updates:

  • Rename ListExpression to CommaExpression;
  • Make CommaExpression a binary expression in the AST;
  • Change ParenExpression to ParenListExpression in SuperExpression;
  • Rename ParenListExpression to ParenExpression;
  • Remove Path qualified PropertyNames;
  • Mark reserved/deferred features with ‘x’;
  • Remove ‘wrap’;
  • Remove ‘like’ as a type;
  • Add ‘like’ as a binary type operator;
  • Remove LetStatement;
  • Remove UnitDefinition;
  • Fold NullableTypeExpression into TypeExpression;
  • Remove OverloadedOperator from QualifiedNameIdentifier;
  • Add distinguishing syntax for tuples and array types in ArrayType;
  • Add SplatExpression to arguments and array literals;
  • Add RestPattern to array patterns;
  • Add to ReservedIdentifiers ‘type’;
  • Add to ContextuallyReservedIdentifiers ‘external’;
  • Removed from ContextuallyReservedIdentifiers ‘decimal’, ‘double’, ‘generic’, ‘int’, ‘Number’, ‘precision’, ‘rounding’, ‘standard’, ‘to’, ‘uint’, ‘unit’;
  • Add LikedPattern to Parameter;
  • Add ‘like’ predicate to ResultType;
  • Remove ParameterKind and use in Parameter

Posted by Dion Almaer at 6:39 am
5 Comments

++---
2 rating from 4 votes

Google releases GWT for JavaScript 2

Category: GWT, JavaScript

GWT for JS2

The Google Web Toolkit has long been a bastion of Java developers who are able to chant “We don’t want your stinking JavaScript!”

GWT is a lot more than a client side framework that allows you to write code in Java. It is a productivity tool that lets you developer and test a solution that performs well and works cross browser (huge wins). In fact, when I talk to people that are using GWT, the most common comment that I hear is how happy they are with:

  • How the application just works cross browser
  • How great it is to get a new version of GWT, run the new compiler, and get substantive performance improvements

Why should this just live in a Java world? Today, it breaks out. Google has released GWT for JavaScript 2.

With the upcoming birth of JavaScript 2 hopefully hitting our browsers, wouldn’t it be nice to build your Ajax applications using JavaScript, but also having the cross browser helpfulness that GWT gets you.

How does it work?

You write an application using JavaScript 2, and you then run it through a compiler which spits out the same optimized JavaScript source code that works for the various browsers.

Why write cross browser JavaScript when you can just write JavaScript?

This fits in perfectly with Steve Yegge releasing js2-mode, a new JavaScript 2 module for Emacs that has a lot of great features:

  • Asynchronous highlighting
  • Code folding
  • Comment and string filling
  • Syntax errors
  • Strict warnings
  • jsdoc highlighting

Also, Didier has posted the news that GWT has been submitted to the JCP as JSR 404.

Posted by Dion Almaer at 12:24 am
10 Comments

+++--
3.1 rating from 22 votes

Monday, March 31st, 2008

Helpful JavaScript Date Operations

Category: JavaScript, Library

Tavs Dokkedahl has created a set of Date methods which people might find helpful in his JSLab standard libary.

Included are Date.getISOWeek, Date.setISOWeek, getFirstDateInWeek, Date.isLeapYear, and Date.format which works like the PHP equivalent.

In addition the library also includes other useful functions for Array, Math, Number, Function and other objects.

Posted by Dion Almaer at 3:24 am
2 Comments

++++-
4.7 rating from 11 votes

Friday, March 28th, 2008

Composing DSLs in JavaScript

Category: Articles, JavaScript

JAVASCRIPT:
  1.  
  2. TheRulesAre(function() { with(this) {
  3.  
  4.     a(Player).mayNot('buyProperty').unless(function(player, property) {
  5.         return property.owner === null &&
  6.                 player.funds>= property.price;
  7.     });
  8.  
  9.     a(Property).mayNot('addHouse').when(it().isMortgaged());
  10. }});
  11.  

Composing DSLs in JavaScript is James Coglan's latest perusal into fun with JavaScript and DSLs.

He walks through the building of this DSL in a step by step manner. He uses his JS.Class library, but you could of course substitute your favourite JavaScript library.

Posted by Dion Almaer at 7:27 am
1 Comment

++++-
4 rating from 8 votes

JavaScript and jQuery Talk

Category: JavaScript, Presentation, jQuery

John Resig has published his JavaScript and jQuery talk that he gave at Northeastern. What does he cover?

I covered the basics of JavaScript - targeted to a Computer Science major (in the case of the students at NU, they learn Scheme and Java so I emphasized the subject matter to that audience). I did a fast run-through of the whole language, covering the main points, and move on to a quick inspection of jQuery and the DOM - closing with some Q&A. The subject matter of JavaScript 2 (and 1.6-1.8) came up a couple times so discussion of that was interspersed throughout. There were a bunch of jQuery users in the audience and it was great to get to hear their feedback.

Posted by Dion Almaer at 4:43 am
4 Comments

+++--
3.7 rating from 18 votes

Thursday, March 27th, 2008

HotRuby: Run Ruby on a JavaScript interpreter?

Category: JavaScript, Library, Ruby, Showcase

This is from the "wow, really?" department. HotRuby is an implementation of Ruby in JavaScript!

The way it works is that a HotRuby "VM" takes the resulting output from YARV and can grok it via JSON:

RUBY:
    VM::InstructionSequence.compile(cgi['src'], "src", 1, OutputCompileOption).to_a.to_json

Thus, you can embed Ruby by doing something like this:

HTML:
  1.  
  2.         <script type="text/ruby">
  3. class Pi
  4.         def initialize
  5.                 @a = 355.0
  6.         end
  7.        
  8.         def calc
  9.                 b = 113.0
  10.                 return @a / b
  11.         end
  12.        
  13.         PI = 'PI is about'
  14. end
  15.        
  16. puts Pi::PI
  17. puts Pi.new.calc
  18.         </script>
  19.  
  20. <body onload="prettyPrint(); new HotRuby().runFromScriptTag('/compileRuby.cgi')">
  21.  

Since you can run on any JavaScript interpreter or VM, they also support Flash.

For example, check out this Box2D example written in Ruby, running in Flash:

HotRuby Example

Posted by Dion Almaer at 8:01 am
3 Comments

+++--
3.5 rating from 27 votes

Where is Firefox on Acid 3? Here.

Category: Browsers, JavaScript, Standards

Some people have been surprised to not hear much from Mozilla around Acid 3. WebKit and Opera are duking it out, but what about Firefox?

Mike Shaver of Mozilla has posted on his views that Acid 3 is a missed opportunity and is pretty damning of the whole thing:

Ian’s Acid 3, unlike its predecessors, is not about establishing a baseline of useful web capabilities. It’s quite explicitly about making browser developers jump — Ian specifically sought out tests that were broken in WebKit, Opera, and Gecko, perhaps out of a twisted attempt at fairness. But the Acid tests shouldn’t be fair to browsers, they should be fair to the web; they should be based on how good the web will be as a platform if all browsers conform, not about how far any given browser has to stretch to get there.

The selection of specifications is also troubling. First, there is a limitation that the specification had to be suitably finished by 2004, meaning that only standards that were finalized during the darkest period of web stagnation were eligible: standards that predate people actively reviving the web platform, through work like the WHATWG’s <canvas> specification. While this did protect us from tests requiring the worst of SVG’s excesses (1.2, with support for such key graphical capabilities as file upload and sockets, was promoted to CR in 2007), it also means that it includes @font-face, a specification which was so poorly thought of that it was removed in 2.1. I can think of no reason to place such time-based restrictions on specification selection other than perhaps to ensure that there has been time for errata to surface — but in the case of CSS, those errata are directly excluded! Similarly, the WHATWG’s work to finally develop an interoperable specification for such widely-used things as .innerHtml were excluded.

Mike also highlighted a couple of things of note:

"Due to late changes in the Cross Site XMLHttpRequest specification which made our implementation incomplete, it was decided to remove support for this technology rather than include only partial support."

It seems that there is flux in the spec around cookies, so Firefox 3 won't have cross domain XHR which is a disappointment. I really hope that the spec is finalized and we can get this out in browsers ASAP.

Mike points to John Resigs compatibility regression coming out due to code like:

JAVASCRIPT:
  1.  
  2. if (!document.getElementsByClassName)
  3.   document.getElementsByClassName = function(instanceMethods){
  4.     // ...
  5.   };
  6.  

The JavaScript implementations don't seem to be implementing the spec (often because they implemented the method before there was ever a spec!!!), so now with browsers coming online with implementations, they are different. The libraries cannot return a live nodelist, and some of them add on magic to the nodes that are returned, which the browser implementations do not.

Posted by Dion Almaer at 7:32 am
6 Comments

++++-
4.6 rating from 20 votes

Tuesday, March 25th, 2008

iPhone Optimization Script

Category: JavaScript, Usability, iPhone

iPhone Optimization Script

Bob Buffone has created a tool that can be used to output script and HTML to make your site more usable on an iPhone. He tells us about it here:

I bought an iPhone about six months ago; in that time I noticed that even though it had this part of the Web and that part of the Web. Every page I went to I was only reading this part and in order to do that, I needed to scroll it into view and resize the page the same way every time. When I go Ajaxian.com on my iPhone I need to scroll the content to the right location and scale it so the middle column fits the screen and then start reading. It’s a real pain in the ass.

This was the case for my blog as well. I didn’t want to rewrite it so I figured out a way to use a little JavaScript to set the scale and position of the page at start up so the main content area completely fills the screen for the iPhone.

Once you input the URL to your site, it gets loaded and you can interact with it to put the box in the right place. For Ajaxian, it then output the following HTML:

HTML:
  1.  
  2. <meta name="viewport" content="width=980; initial-scale=0.631163708086785"/>
  3.  

and JavaScript to do the right thing on the iPhone:

JAVASCRIPT:
  1.  
  2. (function(){
  3.        
  4.         //Variable used to control the zoom and
  5.         //position of the page when it is loaded.
  6.         var viewport = {
  7.                 initialScale: 0.631163708086785,
  8.                 width: 980
  9.         };
  10.         //(-80) is for the navigation bar, otherwise you can't read it
  11.         //until it is fully loaded
  12.         var scrollPosition = {
  13.                 left: 198,
  14.                 top: (188-80)
  15.         };     
  16.         if (/iPhone/i.test(navigator.userAgent)) { // sniff     
  17.                 //write the meta tag for the initial scale.  This should
  18.                 //happen in the <head> section of the html page.
  19.                 document.write('<meta name="viewport" content="width='+
  20.                                         viewport.width+'; initial-scale=' +
  21.                                         viewport.initialScale + '">');
  22.        
  23.                 //This loop will catch the page is loaded with out needing
  24.                 //to use the onLoad event.
  25.                 var _timer = setInterval(function(){
  26.                 if (/loaded|complete|interactive/.test(document.readyState)) {
  27.                         clearInterval(_timer);
  28.                                                                 
  29.                         //This will scroll the content into view,
  30.                         //could be enhanced with animated scrolling but less is more.
  31.                         //if the user started scrolling then let them handle it.
  32.                         if (window.pageXOffset == 0 && window.pageYOffset == 0)
  33.                                 window.scrollTo(scrollPosition.left,
  34.                                 scrollPosition.top);
  35.                 }}, 10);
  36.     }
  37. })();
  38.  

Posted by Dion Almaer at 6:23 am
11 Comments

++++-
4 rating from 16 votes

JavaScript Has Fashion and Luck to Thank?

Category: Articles, JavaScript

Because JavaScript is the language of the web browser, and because the web browser has become the dominant application delivery system, and because JavaScript isn't too bad, JavaScript has become the World's Most Popular Programming Language. Its popularity is growing. It is now being embedded in other applications and contexts. JavaScript has become important.

Douglas Crockford got to act all curmudgeonly as he talks on how The World's Most Popular Programming Language Has Fashion and Luck to Thank.

He starts out talking about the black art of languages:

The art in language design is knowing what to leave out. The features of a good language work together harmoniously. A good language helps us to better understand a problem and to find the best expression of its solution.

A good language is composed of a limited set of features. But there is little agreement on which features are best. Programmers can argue endlessly about features and whether a set of features makes one language better than another. Features matter, but we just don't understand yet how they matter.

Language design has more to do with fashion than technology. It may seem strange that fashion is a major factor in the nerdliest of arts, but it is true. A language with radically different syntax, for example, has no hope of finding broad adoption, regardless of the brilliance of its design. This tends to constrain the rate at which languages evolve.

Just like fashion, a programming language is often a product of its time. The deep problem in language design is not technological, it is psychological. A programming language should equip us with structures that help us to reason more effectively.

And then he gets to JavaScript itself, and how it has managed to become the most deployed language in history even with its foibles.

Posted by Dion Almaer at 5:06 am
5 Comments

+++--
3.6 rating from 12 votes

Friday, March 21st, 2008

Google AJAX Translation API

Category: Google, JavaScript, Library

Translation API

The game above uses the new Google AJAX Translation API that allows you to do two things via a simple JavaScript API.

Translation

If you want to take a word in one language, and translate it to another, you simply call something like this:

JAVASCRIPT:
  1.  
  2. google.language.translate('Gato', 'es', 'en', function(result) {
  3.   alert(result.translation);
  4. });
  5.  

Here are the languages we support.

What if you need to programatically grok which language a string is written in? You can use the detection algorythm:

JAVASCRIPT:
  1.  
  2. google.language.detect('Questa linea di rilevare che questa è la lingua.',
  3.  function(result) {
  4.   alert(result.language);
  5. });
  6.  

The detector doesn't just tell you the result, it also lets you know how reliable and confident it is.

Posted by Dion Almaer at 1:15 pm
15 Comments

++++-
4.3 rating from 30 votes

Snake

Category: Fun, Games, JavaScript

Snake

Andreas Kalsch has created a simple version of Snake in JavaScript that eats your feeds instead of food.

The first time I ever played snake was on a BBC Micro. I was small.

Posted by Dion Almaer at 7:55 am
4 Comments

+++--
3.9 rating from 14 votes

Thursday, March 20th, 2008

SMD: Pluggable Web Services

Category: Dojo, JSON, JavaScript, Library

JAVASCRIPT:
  1.  
  2. {target:"/jsonrpc", // this defines the URL to connect for the services
  3.  transport:"POST", // We will use POST as the transport
  4.  envelope:"JSON-RPC-1.2", // We will use JSON-RPC
  5.  SMDVersion:"2.0",
  6.  services: {
  7.    add : { // define a service to add two numbers
  8.    parameters: [