Wednesday, January 31st, 2007
Category: JavaScript
, Programming, Remoting
Plaxo’s Joseph Smarr has been playing with on-demand javascript, i.e. downloading extra JS code after the page has already loaded. When you grab the code via a remote call and eval() it, it doesn’t get into global scope. So here’s how he dealt with it.
Here’s a simplified version of the situation we faced:
function loadMyFuncModule() {
// imagine this was loaded via XHR/etc
var code = 'function myFunc() { alert(\"myFunc\"); }';
return eval(code); // doesn’t work in FF or IE
}
function runApp() {
loadMyFuncModule(); // load extra code “on demand”
myFunc(); // execute newly loaded code
}
The thing to note above is that just calling eval() doesn’t stick the code in global scope in either browser. Dojo’s loader code solves this in Firefox by creating a dj_global variable that points to the global scope and then calling eval on dj_global if possible:
function loadMyFuncModule() {
// imagine this was loaded via XHR/etc
var code = 'function myFunc() { alert(\"myFunc\"); }';
var dj_global = this; // global scope object
return dj_global.eval ? dj_global.eval(code) : eval(code);
}
This works in Firefox but not in IE (eval is not an object method in IE). So what to do? The answer turns out to be that you can use a proprietary IE method window.execScript to eval code in the global scope (thanks to Ryan “Roger” Moore on our team for figuring this out). The only thing to note about execScript is that it does NOT return any value (unlike eval). However when we’re just loading code on-demand, we aren’t returning anything so this doesn’t matter.
The final working code looks like this:
function loadMyFuncModule() {
var dj_global = this; // global scope reference
if (window.execScript) {
window.execScript(code); // eval in global scope for IE
return null; // execScript doesn’t return anything
}
return dj_global.eval ? dj_global.eval(code) : eval(code);
}
function runApp() {
loadMyFuncModule(); // load extra code “on demand”
myFunc(); // execute newly loaded code
}
And once again all is well in the world.
Category: Examples, Articles, Sound
Reinier Zwitserloot wanted to see if he could add sound support without embedding a Flash bridge, and shared his research in his article on Sound in Web Browsers without Flash.
Check out his test page for a Sound Check
An example API
JAVASCRIPT:
-
-
function sound2Play() {
-
if ( !sound2Embed ) {
-
sound2Embed = document.createElement("embed");
-
sound2Embed.setAttribute("src", "machinegun.wav");
-
sound2Embed.setAttribute("hidden", true);
-
sound2Embed.setAttribute("autostart", true);
-
} else sound2Stop();
-
sound2Embed.removed = false;
-
document.body.appendChild(sound2Embed);
-
}
-
-
function sound2Stop() {
-
if ( sound2Embed && !sound2Embed.removed ) {
-
document.body.removeChild(sound2Embed);
-
sound2Embed.removed = true;
-
}
-
}
-
Category: Articles
Mark Pruett did some experimenting with a hypothesis:
After launching a synchronous call, other browser windows or tabs will be frozen, and the asynchronous calls will not be serviced until the sync call completes.
For my experiment, I open up a browser window, then open a second browser window using the “New Window” menu option. This will (hopefully) assure that both windows are part of the same browser process.
In window #1, I load my synchronous test and start a server request with a delay of 60 seconds. In window #2, I load the asynchronous test with each of the five tests set to three seconds.
The results showed that browsers are playing nicely. Almost. Firefox didn't past the test in the current stable versions, but the nightly build was later tested and it was happy.
Category: JavaScript, Library, Component
The new Devjax library is a collection of plugins based on prototype library to add more functionality for scriptaculous, RICO and extends the DOM library of prototype.
An example of the work is a WYSIWYG component:
JAVASCRIPT:
-
-
editor = new Devjax.Editor('editor-example',
-
{ width: '100%',height: '200px',
-
ImagesFolder: '/images/editor/',
-
LoadURL: 'EditorExample',
-
LoadVARS: 'file=examples/editor/files/index.html',
-
SaveURL: 'editorsave',
-
OnDemand: true,
-
TextColors: ['red','blue','black','yellow','brown','white','blue','black','yellow','brown'],
-
ToolBox:['save','bold','italic','underline',
-
'insertorderedlist','insertunorderedlist','justifyleft',
-
'justifycenter','justifyright','font-color','back-color','insertimage','createlink']
-
});
-
Features
- WYSIWYG Ajax Editor
- Select input with CSS styles
- In place editor for prototype
- Image Ajax Fader for scriptaculous
- DOM API extention
- Rico draggables and droppables extension
The site itself is a single-page app that reloads the main content. This is frustrating as it doesn't have bookmarkable pages.
Category: JavaScript, Library, Toolkit, Announcements
Mootools 1.0 was officially announced to the world.
Big Changes
- All the MooTools Classes use now Events. No, not element events. Class Events. Right, you can add as many onCompletes as you want, onChange(s), onStart(s).. Well, you get the idea. Options starting with “on” become events, so need to change your code on this one.
- All the code, plugins, everything now uses element events. With a completely rewritten event system, its now less memory hungry and a whole lot easier to add events to your elements. You wont find another .onclick in MooTools. We’ve also added the ability to fire an event by hand, or remove all of the events from an element, or all of the events of a certain type (ex. click).
- There are also a number of new “Components”, like Color, to convert colors from HSB to RGB and vice-versa, Hash, to create more flexible javascript objects.
- New plugins have been added, like SmoothScroll, the Scroller, Slider, Assets and Json.Remote, to make Ajax requests directly with Javascript objects. As always, you decide which components to include, so your own version wont be bloated.
- Effects are now more powerful than ever, Fx.Style/Styles/Elements now can include colors and shorthand properties. They also support one value start (the starting value will be computed in real time). You have a div with height = 100 and want to go to 200? as easy as start(200). Fx will read your current style.
Read more
Any Mootools users out there? (I know there are). What do you like about it? What made you choose it as your library of choice?
Tuesday, January 30th, 2007
Category: JavaScript, Fun, Games
Jellyfish (previously mentioned here) took their "smack shopping" promo to the next level last week with the introduction of "The Smackwheel".
Billed as "The Internet's First Live Shopping Game Show", the user picking the closest percentage-off to the actual best deal gets a chance to step up and spin. The js wheel is "broadcast live" to the internet audience as the contestant hopes for prizes like (today) the Nintendo Wii - or if they're really lucky: a rubber chicken.
You've got to catch their game at the right point to see it in action yourself... normally this means tuning in sometime shortly after 1PM Eastern. Today there's a special promotion running "until ???", so you may still be able to catch it in action over there...
Category: Utility
Joe Hewitt (Firebug creator) gave a power-user demo of Firebug at the Yahoo! campus to share and explore the Firebug 1.0 release.
The video shows you the subtle features within:
- Highlighting the DOM that you know your Ajax call will eventually update, and see Firebug showing you what is updated
- The profiler at work: the difference between time spent only in that function, versus including recursive calls into other functions
- Tying into the profiler from your code
- Tips and tricks for the inspector, profiler, network, and more
It is always interesting to see the creator of a tool show you how they use it.
4.7 rating from 118 votes
Category: Yahoo!, Framework
Evgenios Skitsanos has created WAML: Web Application Markup Language:
WAML is another approach of combining existed AJAX frameworks under single Application Markup Language. WAML - Web Application Markup Language. WAML allows you to define your web application appearance and functionality by using simple XML like syntax mixed with HTML. The idea behind WAML is to simplify application functionality definition and provide flexible access to UI objects, data and communication services. WAML functionality build on top of existed AJAX frameworks available for public use. After all WAML is absolutely FREE.
You will probably recognize the markup from MXML and others.
Take a look at an example as source:
XML:
-
-
<?xml version="1.0" encoding="utf-8"?>
-
<wa :Application xmlns="http://www.w3.org/1999/xhtml" xmlns:wa="http://grafeio.eu/waml/" title="Skitsanos WAML Framework">
-
</wa><wa :Imports>
-
<wa :Resource type="stylesheet" url="/app.css"/>
-
</wa>
-
<wa :Module>
-
</wa><wa :Layout id="ltApplication">
-
</wa><wa :LayoutPanel initialSize="35" location="north" split="false">
-
<div id="ApplicationHeader">WAML Framework</div>
-
-
</wa>
-
<wa :LayoutPanel autoScroll="true" collapsible="true" initialSize="200" location="west" split="true" title="Actions" titlebar="true">
-
</wa><wa :Accordion id="acc1">
-
<wa :AccordionPanel contentUrl="/docs/waml-objects.waml" id="panel1" title="Documentation"/>
-
<wa :AccordionPanel contentUrl="/docs/waml-samples.waml" id="panel2" title="Samples"/>
-
<wa :AccordionPanel contentUrl="/docs/ajax-frameworks.htm" id="panel3" title="Frameworks Used"/>
-
</wa>
-
-
<wa :LayoutPanel autoScroll="true" location="center">
-
-
<div style="padding: 10px;">
-
<wa :Box id="boxRounded" Corners="all" CornerType="smooth" InnerColor="#888" OuterColor="#fff" style="width:600px; padding: 3px; color: #fff;" contentUrl="/docs/waml.waml"/>
-
</div>
-
</wa>
-
<wa :LayoutPanel initialSize="20" location="south" split="false">
-
<div style="background-color:#c3daf9;">© 2007, Evgenios Skitsanos. | <a href="http://www.skitsanos.com" target="_blank">http://www.skitsanos.com</a>
-
</div>
-
</wa>
-
-
-
-
-
and compare it to the output that will look familiar to those of you that use YUI.
Category: .NET, Articles
Milan Negovan has a new set of href="http://www.aspnetresources.com/blog/ms_ajax_cheat_sheets_batch2.aspx">cheat sheets for the Microsoft ASP.NET Ajax library.
The existing cheat sheets have been updated for the 1.0 final release, and Milan has added two new ones for DomElement and DomEvent.
Check out the 
Category: Showcase
Andrew Sutherland recently launched Quizlet, a site for learning vocabulary. It gives you tools to study vocabulary words that you enter.
Quizlet is a mootools based application, and is subtle in its use of the framework.
Monday, January 29th, 2007
Category: JavaScript, Library, Sound
Scott Schiller has come up with something very useful: SoundManager 2 a sound API which lets web developers easily load, play and control
sounds (via Flash 8) using Javascript.
Scott talks about his back story to how this API came about, for the jsAMP program.
There is a full project page with API documentation, some nifty examples and
demos, and a download (BSD license) here.
He also has a number of nifty demos for us to check out:
Check it out and give Scott some feedback.
Category: JavaScript, Library, Toolkit
Ondrej Zara and his team at Openlink Software have created a Openlink Software JS Toolkit, known as OAT. It is a full-blown JS framework, suitable for developing
rich applications with special focus to data access.
OAT works standalone, offers vast number of widgets and has some rarely seen features, such as on-demand library loading (which reduces the total amount of downloaded JS code).
OAT is one of the first JS toolkits which show full OpenAjax Alliance conformance: see the appropriate wiki page and conformance test page.
There is a lot to see with this toolkit:
You can see some of the widgets in a Kitchen sink application
Sample data access applications:
OAT is Open Source and GPL'ed over at sourceforge and the team has recently managed to incorporate our OAT data access layer as a
module to dojo datastore.
Category: Showcase
Pikapet is a system for creating and personalizing greeting cards completely made with Javascript.
Its features include text effects, borders, image adjusting (zoom, position) and simple card manipulation in general.
This is yet another example of WYSIWYG tools.
Category: JavaScript, Tip
Tobie Langel is having fun with for loops in JavaScript and wrote about how they are broken in Safari.
This is the classic issue of looping through properties of an object, and getting all properties:
JAVASCRIPT:
-
-
var Person = function(name) {
-
this.name = name;
-
};
-
-
Person.prototype.name = 'anonymous';
-
-
var john = new Person('John');
-
-
var result = '';
-
for (var property in john)
-
result += property + ': ' + john[property] + '\n';
-
Safari will display two name properties (one for the object itself, and one for the prototype).
You need to guard this via hasOwnProperty:
JAVASCRIPT:
-
-
for (var property in john)
-
if(john.hasOwnProperty(property))
-
result += property + ': ' + john[property] + '\n';
-
This doesn't work in Safari.current, but is fixed in WebKit.
Sunday, January 28th, 2007
Category: Usability, UI
Podtech's LunchMeet vidcast has done an interview with Kris Tate and Thomas Hawk of Flickr rival Zooomr. Zooomr has a lot of nice features, but one thing that stood out in the demo was the use of popup icons that appear when you hover over the photo. As you hover, they show up in the corner, and allow you to do things like open the photo up as a lightbox or toggle its "Fave" status (i.e. declare it as one your favorite pics).
The neat thing about this popup mechanism is that it's pretty consistent across the site...whether you're looking at thumbnails or a detailed view of the pic, you get that consistent set of icons. This means you can mark a pic as your favorite without having to open it up first. In the ongoing effort to build a rich collection of tags, it's also conceivable that users could tag the photo with a similar popup mechanism.
From an eye candy perspective, the Ajax-powered (or DHTML if you like) portal feature is pretty sweet too. Like Flickr's popup notes, the pic shows a box outline. With portals though, what you see when you hover over it is a new inset photo and you can actually scroll around the second photo while looking at the portal photo. And of course, clicking on the inset photo opens it up. Hard to explain, but easy to understand if you try it out.
Watch Lunchmeet's Eddy and Irene talk to Zooomr's Kris (founder/CTO) and Thomas (CEO) ...
Friday, January 26th, 2007
Category: Testing
Vitaliy Shevchuk has proposed SJAX: AJAX option for automated in-browser testing which makes testing of Ajax apps simpler with Selenium that having to waitForAjax and friends.
The Problem
However, things are getting more complicated with AJAX. No page is loaded, but the content has changed. And it hasn't changed instantly; AJAX is asynchronous by its definition. Setting a bug interval is a bad solution: it makes build cycle very slow without really solving the problem.
Some guys suggest using a "waitForCondition" command. In other word, every time AJAX is in action you need to manually add a waiting condition. This is much better then nothing; at least it is a real working solution. However, test creating is much longer and less fun.
Another option would be to extend Selenium to make it aware the underlying AJAX framework, so that the test case would pause until XMLHttpRequest is satisfied. Well, it requires extending Selenium, which is not very simple task neither. And there is a multitude of AJAX frameworks available, it would be impossible to adapt Selenium to every of them. And there are other in-browser testing solutions, not only selenium: both open source and commercial ones.
Solutions?
And the ideal scenario would be the following:
- Test, application itself or the in-browser testing framework raises a flag to mark the current session as the one of automated testing.
- AJAX framework detects the flag and passes to synchronous mode.
- In this case, a method of user action simulation (click/type) of Selenium will not return until the AJAX data is successful fetched and processed. So Selenium will not be able to continue before the page content is updated, and it's exactly what the user expects from his macros.
—
Next Page »
