sorted by: recent | see :
popular
Content Tagged Front
Getting method_missing, or _noSuchMethod into Harmony
Yehuda Katz saw the Harmony news, and wondered if there was a change to get _noSuchMethod, which currently works in implementations such as SpiderMonkey, into the new JavaScript world of: Harmony = ES3.1++.
In summary, it seems that the two groups agreed to focus cooperative effort of ECMAScript 3.1, a modest improvement of the current JavaScript that includes some new features like the ability to mark properties as non-enumerable and freezing objects (which can be used to implement classes).
After that is complete, the two groups have agreed to work on a new version of JavaScript dubbed “Harmony”, which will be a more modest evolution of the current JavaScript, minus some of the more ambitious features like namespaces and packages. Other features, like classes, will likely be implemented in terms of new features in ES3.1 like freeze().
Which brings me to the title of my post. Now that it seems as though ES3.1 will be embraced by all the browser vendors moving forward (and will likely be the implemented iteration of JS for at least a little while), I wondered what sorts of features might still make it into ES3.1 before the spec was closed.
Specifically, I’ve long been interested in trying to get method_missing into JavaScript, and in fact, it is already available in Firefox/Spidermonkey as __noSuchMethod__. In fact, Johnson makes use of noSuchMethod in its Ruby proxy.
Want to get it in ASAP? Make your voice heard to the technical committee.
Ajaxian Featured Tutorial: Show/Hide Login Panel Built with MooTools
Conserving screen real-estate while still providing good content to the user has always been a challenge for designers and developers and while larger screen dimensions are becoming more prominent, it's still important to take full advantage of the space available to you. Jeeremie over at Web Kreation came up with a very cool method of display a login panel using MooTools v1.2's built-in effects capabilities:
Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.
Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.
Reading ID3 tags with JavaScript
Jacob Seidelin is up to more tricks, this time playing with the binary side of life and writing a library that can reading ID3 tags from MP3 files and such.
-
-
// URL of the mp3 file (must be on the same domain!)
-
var file = "mymusicfile.mp3";
-
-
// define your own callback function
-
function mycallback() {
-
// either call the ID3.getAllTags([file]) function which returns an object holding all the tags
-
alert(
-
"All tags in this file: " + ID3.getAllTags(file).toSource()
-
);
-
-
// or call ID3.getTag([file], [tag]) to get a specific tag
-
alert(
-
"Title: " + ID3.getTag(file, "title") + " by artist: " + ID3.getTag(file, "artist")
-
);
-
}
-
-
ID3.loadTags(file, mycallback);
-
You can view a demo at work or download the code.
Of course, Jacob realises that this doesn't make sense for many use cases:
Of course, one big disadvantage of doing this on the client in JavaScript is that the you need to download the entire MP3 file before the tags are available, so it might be better to stick to server-side solutions in many cases if all you need is the tag info.
ECMA What? Harmony Who? TC39? Tamarin? JavaScript!
Alex Russell has seen the confusion of the many names that were bandied around with the Harmony news last week. There are so many names, that involve specs, projects, and general technical jargon that it can get a little confusing. Alex has made it very clear:
- ECMAScript 3
- Aka: JavaScript, ES3, ECMAScript 262-3, and JScript.
The current JavaScript that every browser implements (more or less). This is the current ratified standard and represents the 3rd edition of the ECMAScript spec. It is very old. Nothing else in this list is (yet) a ratified standard of any sort.
- ECMAScript 4
- Aka: ES4, “JavaScript 2?.
A new language which was to be mostly backwards compatible but add optional (gradual) typing and class-based inheritance. Based loosely on Adobe’s ActionScript 3. This is the language effort which died as a result of Harmony.
- ECMAScript 3.1
- Aka: ES3.1. A set of small additions to ES3.
Planning for this edition was started at Microsoft and Yahoo’s behest late last year, causing the split in the working group which has been healed by the Harmony announcement.
- ActionScript 3
- Aka: AS3
Adobe’s current JavaScript-like language, only with many features lifted from languages like Java which also enforce types and class-based semantics. This was the starting point for much of the work which became known as ES4.
- Tamarin
- A JIT-ing byte-code virtual machine (VM) which is at the core of the Flash Player and was donated by Adobe to the Mozilla Foundation. This is the VM that runs ActionScript 3 code today but will likely run “real” JavaScript for Mozilla in the future. It is not a full implementation of ES3 or ES4, but instead implements its own byte-code and needs to be wedded to a “front end” (like the ActionScript 3
compiler from Adobe) in order to be usable by programmers. - Tamarin-tracing
- A VM which implements the same byte-code language as Tamarin (known as “ABC”) but which is designed for use in mobile devices and other scenarios where code size and VM footprint are important. It implements trace-tree JIT-ing as a way to speed up hot-spots. Also donated to Mozilla by Adobe.
- TC39
- The name of the ECMA technical committee which is chartered to evolve the JavaScript language.
- Harmony
- A new code-name for a language which is to come after ES3.1. It will feature many of the things ES4 was trying to accomplish, but may attempt them from different directions and will
focus much more on incremental, step-wise evolution of the language. - JavaScript 2
- A now-defunct name. This name was originally given to Waldemar Horwat’s first proposal at a large-scale evolution of the JavaScript language in 1999. That effort did not succeed (although Microsoft implemented some of it in JScript.NET) and subsequent work via the current TC39 charter to build ES4 has sometimes been given the name “JavaScript 2?, but it never really stuck. Not a name that describes any ratified standard or current proposal.
- ECMAScript
- The formalized name of the JavaScript language. Since Sun Microsystems owns the name JavaScript and has no idea what to do with the trademark (but has been benevolent thus far), the ECMA committee which standardized the language was forced to adopt a different name.
SmartGWT: LGPL GWT wrapper on SmartClient
Sanjiv Jivan, original creator of GWT-Ext, posted on SmartGWT, a new wrapper on top of SmartClient.
Charles Kendrick of Isomorphic, creator of SmartClient, announced the new project as well as the approach they have taken:
we’ve taken an approach of generating GWT code from SmartClient’s documentation, combined with hand-coding portions that can’t feasibly be generated. By tweaking our documentation set to contain additional metadata (some of it GWT-specific), we’ve been able to generate code you might not otherwise expect, including things like enumerated constants and convenience constructors.
What this means is that the first release of SmartGWT will provide the complete SmartClient API, fully documented.
You can now write code such as:
-
-
import org.smartgwt;
-
import org.smartgwt.client.widgets.Button;
-
-
...
-
-
Button button = new Button("myButton", "Click me");
-
button.addClickListener(new ClickListener() {
-
public void onClick(ClickEvent event) {
-
ISC.say("Hello World!");
-
}
-
});
-
Sanjiv Jivan joined the project under the terms that Isomorphic sign a document that said:
The founders of Isomorphic Software are committed to keeping a complete, up-to-date version of SmartClient available under an LGPL license.
We continue to invest heavily in building new features, skins, tutorials, and tools for SmartClient LGPL.
We think it's normal and expected that some people receive great benefit from LGPL software and do not pay. The spirit of open source, in a nutshell, is that releasing free software creates so much wealth that the portion that flows back to you is more than enough.
Sincerely,
Charles Kendrick
Alex Shvedoff
Transformie: Implement WebKit CSS transforms in IE
Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE
When you include the library, it can scan for your -webkit-transform-* transforms (soon to support the standard transform-*) and will go to work for you using a couple of nifty technologies all put together:
- IE Filters such as
DXImageTransform.Microsoft.Matrixthat do the rotate, skew, scale, and general matrix work for you - onpropertychange "almost behaves like DOMAttrChanged, but is much finer grained. It is capable of telling you whenever a DOM property changes on an element, and when you track the style attribute, it actually passes the actual style that changed along with the event." Here it is at work in the library:
JAVASCRIPT:
-
-
jQuery(Transformie.trackChangesFor).bind('propertychange', function(e) {
-
if(e.originalEvent.propertyName == 'style.webkitTransform') {
-
Transformie.refreshMatrix(this);
-
}
-
});
-
-
From there you can see the transforms which look like:
-
-
// rotate
-
matrices.push($M([
-
[Math.cos(a), -Math.sin(a), 0],
-
[Math.sin(a), Math.cos(a), 0],
-
[0, 0, 1]
-
]));
-
Very nice indeed.
Nice new Dojo aggregate effects
Dojo has some nice new compound effects in the works. Some of the new effects include block fades, disintergrate, explode, shear, and pinwheel.
Each effect can be tweaked with config such as:
- The number of rows and columns in which to split the element
- The distance the pieces travel (as a multiple of the element's respective dimensions)
- Whether or not to fade the pieces in/out
- How much the effect should be randomized (a percentage)
- Whether or not the pieces should appear outside the element's boundaries
You will also see effects that work on the text within divs, as well as pieces of the div itself.
Getting a JavaScript stracktrace in any browser
Eric Wendelin has posted on getting a JavaScript stack trace no matter that the browser.
With Firebug you can call console.trace() but what about the rest?
Luke Smith took Eric's work and added to it, ending up with:
-
-
(function () {
-
YOUR_NAMESPACE.getStackTrace = (function () {
-
-
var mode;
-
try {(0)()} catch (e) {
-
mode = e.stack ? 'Firefox' : window.opera ? 'Opera' : 'Other';
-
}
-
-
switch (mode) {
-
case 'Firefox' : return function () {
-
try {(0)()} catch (e) {
-
return e.stack.replace(/^.*?\n/,'').
-
replace(/(?:\n@:0)?\s+$/m,'').
-
replace(/^\(/gm,'{anonymous}(').
-
split("\n");
-
}
-
};
-
-
case 'Opera' : return function () {
-
try {(0)()} catch (e) {
-
var lines = e.message.split("\n"),
-
ANON = '{anonymous}',
-
lineRE = /Line\s+(\d+).*?in\s+(http\S+)(?:.*?in\s+function\s+(\S+))?/i,
-
i,j,len;
-
-
for (i=4,j=0,len=lines.length; i<len; i+=2) {
-
if (lineRE.test(lines[i])) {
-
lines[j++] = (RegExp.$3 ?
-
RegExp.$3 + '()@' + RegExp.$2 + RegExp.$1 :
-
ANON + RegExp.$2 + ':' + RegExp.$1) +
-
' -- ' + lines[i+1].replace(/^\s+/,'');
-
}
-
}
-
-
lines.splice(j,lines.length-j);
-
return lines;
-
}
-
};
-
-
default : return function () {
-
var curr = arguments.callee.caller,
-
FUNC = 'function', ANON = "{anonymous}",
-
fnRE = /function\s*([\w\-$]+)?\s*\(/i,
-
stack = [],j=0,
-
fn,args,i;
-
-
while (curr) {
-
fn = fnRE.test(curr.toString()) ? RegExp.$1 || ANON : ANON;
-
args = stack.slice.call(curr.arguments);
-
i = args.length;
-
-
while (i--) {
-
switch (typeof args[i]) {
-
case 'string' : args[i] = '"'+args[i].replace(/"/g,'\\"')+'"'; break;
-
case 'function': args[i] = FUNC; break;
-
}
-
}
-
stack[j++] = fn + '(' + args.join() + ')';
-
curr = curr.caller;
-
}
-
return stack;
-
};
-
}
-
})();
A simple solution to the “other” problem with select boxes
Jeffrey Olchovy has posted a simple tutorial on using jQuery to solve a "select-to-input toggle" that shows and hides a text field when you select "Other". It overloads the same form name, so the server side gets just one value, and doesn't know or care if it was in the drop down or typed in. You can try it live here.
This is a simple little solution to the issue that there isn't a native control to really do the job. What you really probably want here is the ability to drop down and select items, or just type into the select box field itself. This is one reason why people implement auto-complete text fields instead of using select boxes for this case, but wouldn't it be nice to be able to tag your <select> and be done?
AppJet improves, and teaches you along the way
AppJet, the server side JavaScript Y Combinator startup, has been improving all the time, including these new updates which allow for better database work:
-
-
storage.threads
-
.sortBy('-timestamp') //sort first so we skip the right ones
-
.skip(start)
-
.limit(items)
-
.forEach(function(thread){
-
printp(thread.text)
-
})
-
Also, they just released a bunch of tutorials that cover JavaScript and HTML using an app that that they wrote on their engine itself.
For example, this will fire up an in-browser test area that you can tweak and play with to see what happens in real-time in front of your eyes.
ECMAScript Harmony: Brendan Eich, Douglas Crockford, Adobe, and more
ECMAScript Harmony has been the big news of the week. It isn't hard to see why, the next version of JavaScript is going to affect us all, for a long time (even more than a presidents term!)
Alex Russell, John Resig, and myself got Brendan Eich and Arun Ranganathan on the phone to talk about the news. This is episode 2 of the Open Web Podcast (see the new website, and subscribe to the series, including via iTunes.)
The podcast is over an hour long and goes into a ton of detail covering a lesson on language design, politics and process, a lot of history, and hopefully the path to a positive future.
We have other postings going on in the community too. Douglas Crockford writes an opinion on how The Only Thing We Have To Fear Is Premature Standardization, Mike Chambers wraps up the thoughts of Adobe on