Thursday, July 2nd, 2009
Category: Component
, GWT, Library
John Gunther has released GChart 2.5, a client-side library that adds a new canvas-rendering option for sharper, better looking, alpha-transparent, pie, line, and area charts.
John told us:
Canvas-rendering corrects GChart’s most serious visual quality limitations (including the most often mentioned problem by its users: the banded-filled pie slice).
Coupled with its existing feature set and ease of GWT integration, the canvas-rendering option makes GChart an excellent choice for those who want to add basic charts to a GWT application without a lot of fuss.
To access these features, you’ll need to plug an external canvas library into GChart (GWTCanvas in the gwt-incubator is reccommended) as described in detail in the setCanvasFactory method.
With the external canvas in place, the next step is to tell GChart you want a curve to be “continuously filled” by invoking setFillSpacing(0).
With each such continuously filled curve, GChart automatically exploits your external canvas library to improved the quality and speed of that curve’s rendering. Specifically, banded-filled pie slices become solid filled, dotted connecting lines become continuously connected, and (the biggest stretch) bar charts become area charts. See the setFillSpacing method’s javadocs for a detailed description of how each existing symbol type implements this new “continuously-filled”, canvas-powered, rendering option.
Note that GChart’s previous HTML-only rendering is still available, and is the default rendering mode if you don’t bother to plug in an external canvas.
Check out the demo
Thursday, June 25th, 2009
Category: JavaScript, Library, Yahoo!
Congrats to the YUI team for releasing their first beta of YUI 3:
We’ve spent a lot of time in this release cycle refining the core elements of YUI 3 — YUI, Node, and Event — to ensure that we have the right API going forward. Performance is improved, and we’ve refined our module/submodule structure. In some cases we’ve added significant new features, including intrinsic support for event delegation in the Event package; however, the focus is on moving the base library to production quality.
Several YUI 2.x components make their YUI 3 debut in this release:
- DataSource: YUI’s data abstraction layer provides a standard interface into data sets, regardless of the data’s origin (local, XHR, XSS, etc.) and format (JSON, XML, CSV, etc.);
- ImageLoader: ImageLoader allows you to defer the loading of images that aren’t in the viewport when the page paints, throttling bandwidth usage and improving performance;
- History: The History component gives you control of the brower’s back button within the context of a single-page web application;
- StyleSheet: StyleSheet makes it easy to create and modify CSS rules on the fly, allowing you to dynamically style page elements with fewer repaints.
As part of the more granular packaging in the new codeline, we’ve created separate YUI 3 modules to house functionality that in YUI 2 was bundled with other components. Cache, DataType and DataSchema debut in this release; each of these used to be a part of DataSource.
To keep up to date, check out the roadmap and dashboard that the team keeps up to date.
Category: JavaScript, Library
We have been sandboxing JavaScript in iframes for a long time. The Web Worker API has the nice property that it doesn't have access to objects like document and the like, and just runs code that you can pass over to it.
With this, Elijah Grey has created an experimental jsandbox API that gives you an eval function that you pass in some code, and optionally input data, callback for results, and an onerror callback.
Code looks like this:
JAVASCRIPT:
-
-
jsandbox
-
.eval({
-
code : "x=1;Math.round(Math.pow(input, ++x))",
-
input : 36.565010597564445,
-
callback: function(n) {
-
console.log("number: ", n); // number: 1337
-
}
-
}).eval({
-
code : "][];.]\\ (*# ($(! ~",
-
onerror: function(ex) {
-
console.log("syntax error: ", ex); // syntax error: [error object]
-
}
-
}).eval({
-
code : '"foo"+input',
-
input : "bar",
-
callback: function(str) {
-
console.log("string: ", str); // string: foobar
-
}
-
}).eval({
-
code : "({q:1, w:2})",
-
callback: function(obj) {
-
console.log("object: ", obj); // object: object q=1 w=2
-
}
-
}).eval({
-
code : "[1, 2, 3].concat(input)",
-
input : [4, 5, 6],
-
callback: function(arr) {
-
console.log("array: ", arr); // array: [1, 2, 3, 4, 5, 6]
-
}
-
}).eval({
-
code : "function x(z){this.y=z;};new x(input)",
-
input : 4,
-
callback: function(x) {
-
console.log("new x: ", x); // new x: object y=4
-
}
-
});
-
Monday, June 15th, 2009
Category: JSON, JavaScript, Library
I just looked through the API of Microsoft's new Bing search and found an interesting step in protecting code from throwing errors.
When you provide a JSON output for developers it does make sense to also allow for a callback parameter. That way your code can be used in script nodes without having to use any backend at all. Commonly this is called JSON-P and has been covered here in the long long ago. One of the issues with JSON-P is that when the callback method is not defined it throws an error.
The Bing API is the first instance where I have seen that they worked around that as the output is this:
JAVASCRIPT:
-
if(typeof callback == 'function') callback(
-
{
-
"SearchResponse":
-
{
-
"Version":"2.2",
-
"Query":
-
{
-
"SearchTerms":"a hard day's night"
-
},
-
"Translation":
-
{
-
"Results":
-
[
-
{"TranslatedTerm":"einem harten Tag-Nacht "}
-
]
-
}
-
}
-
} /* pageview_candidate */);
I have no clue what the /* pageview_candidate */ is about and frown upon omitting the {} of the if statement, but I must say I do like this. One issue is that while end users don't get annoyed with errors, developers don't have a clue what happened either as the error is silent. One proposal would be to use a console.log() when there is an error:
JAVASCRIPT:
-
if(typeof callback === 'function') {
-
callback(... data ... );
-
} else {
-
if (typeof console!=='undefined' &&
-
typeof console.log !== 'undefined'){
-
console.log('Error: Callback method not defined');
-
}
-
}
More details about other ideas to improve this are here.
Friday, June 12th, 2009
Category: JavaScript, Library
Nicolas Garcia Belmonte has updated InfoViz with version 1.1.
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. The code has been updated:
- The library has been split into modules for code reuse.
- All visualizations are packaged in the same file. You can create multiple instances of any visualization. Moreover, you can combine and compose visualizations. If you want to know more take a look at the Advanced Demos.
-
This Toolkit is library agnostic. This means that you can combine this toolkit with your favorite DOM/Events/Ajax framework such as Prototype, MooTools, ExtJS, YUI, JQuery, etc.
-
You can extend this library in many ways by adding or overriding class methods. The JavaScript InfoVis Toolkit has a robust (and private) class system, heavily inspired by MooTools’, that allows you to implement new methods in the same class without having to define any new Class extension. By creating mutable classes you can add new custom Node and Edge rendering functions pretty easily.
-
Custom visualizations are created by adding or changing Node/Edge colors, shapes, rendering functions, etc. You can also implement many controller methods that are triggered at different stages of the animation, like onBefore/AfterPlotLine, onBefore/AfterCompute, onBefore/AfterPlotNode, request, etc.
You can also add new Animation transitions like Elastic or Back with easeIn/Out transitions.
If you want to know more about these features please take a look at the Demos code.
- A complete API documentation generated with Natural Docs, with some Narrative Documentation and Syntax Highlighted Code Examples.
Monday, June 8th, 2009
Category: Library, Yahoo!
One thing that annoys me is that in the days of geolocation and location recognition I still have to enter my country and city in forms over and over again. This is especially annoying when you like in the UK which could be anywhere in these wonderful large dropdowns (UK, England, Great Britain, United Kingdom, Blighty...).
There are many geo lookup tools and a lot of (at least UK) web sites started doing post code lookup tools. This is cool, but as annoying when I spent another reload of a full large form for a postcode lookup that went wrong. With the UK being quite a mess when it comes to post codes this is not uncommon.
Now, to work around these issues I've put together a small JavaScript wrapper library called GeoFill (also available on GitHub). This one makes it easy to provide a "is this your location" functionality in JavaScript:
GeoFill has two different methods to automatically fill forms with geo information:
geofill.find(properties) does an IP lookup of the current user and tries to get the geographical data from that one. geofill.lookup(properties,postcode) tries to get the geographical data from the postcode provided in your form.
Both methods can either automatically fill a form when you provide them with an object telling it which info should go into the form with a given ID, but also have a callback property that allows you to use the data immediately
JAVASCRIPT:
-
geofill.lookup(
-
{
-
callback:function(o){
-
console.log(o);
-
}
-
},'wc2h8ad');
The returned object is:
JAVASCRIPT:
-
{
-
city:"London",
-
country:"United Kingdom",
-
latitude:"51.51384",
-
longitude:"-0.12857",
-
postcode:"WC2H 8AD"
-
}
The find method uses the GeoIP lookup:
JAVASCRIPT:
-
geofill.find({
-
callback:function(o){
-
console.log(o);
-
}
-
});
And returns (in my case):
JAVASCRIPT:
-
{
-
city:"London",
-
country:"United Kingdom",
-
latitude:"51.5",
-
longitude:"-0.11670000106096",
-
postcode:"WC2H 8AD"
-
}
Friday, June 5th, 2009
Category: JavaScript, Library, MooTools
Zohaib Sibt-e-Hassan has created a Mootools based mouse gesture library Moousture that is based on simplicity:
- A probe, which probes the pointing device. Currently there
is a Moousture.MouseProbe (P.S. I am planning to test it on iPhone and
build any seprate probe for that).
- A monitor, which tests the stability of probed
device on given intervals and accordingly notifies Moousture events
(onStable, onUnstable, onMove).
- A Moousture recorder class that records the mouse
movements and invoke the guesture object passed to it.
You can easily work with gestures:
JAVASCRIPT:
-
-
// Create a guesture matcher, currently there are only two gesture objects Moousture.LevenMatcher, and Moousture.ReducedLevenMatcher.
-
-
gstr = new Moousture.ReducedLevenMatcher();
-
-
// Add gesture vectors to matcher object, (see details below in Create your own gestures).
-
-
gstr.addGesture([3,2,1,0,7,6,5,4], ccwCircle);
-
-
// Guesture callback function takes one parameter error recieved from matching algorithm. Threshold that value (if required) to make your gestures more sleek.
-
-
function ccwCircle(error) {
-
if(error>= 0.6) return;
-
...
-
}
-
-
// Create a probe object that will probe the pointing device. Currently there is a mouse probe that take the $(element) to probe for. So passing a div id will cause the probe to trigger events only when they occur on the passed DOM element.
-
probe = new Moousture.MouseProbe($(document));
-
-
// Create a recoder object to record the movement , maxSteps and minSteps in options object will specify the maximum and minimum number of steps to be recorded, and macher is required matcher object to trigger the appropriate gesture.
-
recorder = new Moousture.Recorder({maxSteps: 20, minSteps: 8, matcher: gstr});
-
-
// Create a monitor specifying the interval to poll and the amount of error allowed for gesture in pixels.
-
monitor = new Moousture.Monitor(30, 2);
-
-
// Finally start the monitor.
-
monitor.start(probe, recorder);
-
-
// You can stop the gesture triggering any time by calling .stop() of monitor object.
-
monitor.stop();
-
Friday, May 15th, 2009
Category: Framework, Library, Yahoo!
Talks about JavaScript are not a rare occasion any more, everybody has something to say about this wonderfully versatile language. Douglas Crockford taught us a lot about the language itself, John Resig and Peter Paul Koch taught us how browsers deal (and fail dealing) with it and there are dozens of screencasts of how to use this or that language.
What most of these talks and videos have in common is application of JavaScript and how to deal with issues that will occur. Information about designing and architecting large JavaScript solutions on the other hand are rare. Satyen Desai now broke the silence and gave a great talk on the architecture and design decisions of the the third generation of the Yahoo User Interface library:
Monday, May 4th, 2009
Category: JavaScript, Library
Ah Rico. It was a big shot when Ajax jumped on the scene and Bill Scott was lashing up the accordion landscape. Now time has moved on, and Bill keeps feeding us with usability goodness, but what about Rico?
Well, Matt Brown is now on the case and has an early preview of Rico 3.0 for us to check out:
While previous versions of Rico were tightly integrated with Prototype, the new version can work with any of 5 base libraries - Prototype, dojo, jQuery, MooTools, and ext-core. The event model, Ajax model, Animation model, and CSS selector model are tied to the base library, but adapters provide common calling conventions. So now if your project uses jQuery, you can still use Rico LiveGrids!
The second big change is that Rico 3.0 is compatible with jQuery Themeroller. There are 5 built-in Rico themes that have been extended to cover not just LiveGrid, but all Rico widgets. But if one of those isn't exciting enough for you, you can now style LiveGrid and the other widgets using Themeroller. And, you can use those Themeroller themes without using jQuery - they will run with any of the 5 base libraries that Rico 3.0 is compatible with.
Great to see this old favorite doing good things. It is also fun to see how much is going "meta". Remember when ExtJS was YUI only? Now Rico can run on top of Ext..... maybe one day everyone will be able to run on top of everyone else ;)
Monday, April 27th, 2009
Category: HTML, JavaScript, Library
Elijah Grey has a very cool new script CiteDrag that "adds automatically citation (ie. blockquotes, text quotes, ect.) to any dragged content off of the website which is using the script. CiteDrag requires no additional setup other than include the script somewhere on your website."
I just dragged that above text from my blog post where announced the creation of CiteDrag and dropped it into my WordPress “Edit Page” interface, where automatically appeared quoted. Looking into the <blockquote> we can see that it even has the cite attribute defined. That is just one example of how CiteDrag works.
In a browser such as Firefox 3.5 beta (Shiretoku or a Firefox Nightly) go over to the test page and then start to drag the links, text, and image over to the text area.
Very cool work!
Thursday, April 23rd, 2009
Category: JavaScript, Library
Nic Volanschi pointed us to myPatterns:
myPatterns is a new library adding custom notations for data structures in JS (and also C). It's really useful for writing elegant programs using general pattern matching.
To explain myPatterns, let's introduce a standard JavaScript object:
JavaScript:
-
{
-
name: { firstname: "John", lastname: "Smith" },
-
children: [
-
{ firstname: "Eric", gender: "male", born: 1991 },
-
{ firstname: "Deborah", gender: "female", born: 1996 }
-
]
-
}
Using myPattern, you can write a test to check if this object represents a person whose first child is a boy 18 years old:
JavaScript:
-
(s = match(x, "{name:{lastname: %l}, children:[{gender: 'male', born: %b} | %x]}"))
-
&& new Date().getFullYear() - s.b == 18
The website explains the pattern above:
In the above, the match() statement both checks whether the object has a certain form (e.g. that the children field is an array containing a first element of a given form), and returns a "substitution" object s having the following value: {l: "Smith", b: 1991, x: [ {firstname: "Deborah" , born: 1996} ]}.
Furthermore, using your own notations, you could write the same condition more concisely, and with your own personal touch, for example:
JavaScript:
-
s = match(x, "<%first ~ %last: [boy(18) | %rest]>")
In the above, the object is noted in a more concise way, and the age of the first son is directly specified in the pattern, as if it was stored in the object, taking advantage of active patterns to compute the age on the fly.
Neat!
Tuesday, April 21st, 2009
Category: Database, JSON, JavaScript, Library
Atul Varma, a fantastic colleague in Building "S" at Mozilla, has been playing with a JavaScript implementation of CouchDB called BrowserCouch:
BrowserCouch is an attempt at an in-browser MapReduce implementation. It's written entirely in JavaScript and intended to work on all browsers, gracefully upgrading when support for better efficiency or feature set is detected.
Not coincidentally, this library is intended to mimic the functionality of CouchDB on the client-side, and may even support integration with CouchDB in the future.
Why?
This prototype is intended as a response to Vladimir Vuki?evi?'s blog post entitled HTML5 Web Storage and SQL. A CouchDB-like API seems like a nice solution to persistent storage on the Web because so many of its semantics are delegated out to the JavaScript language, which makes it potentially easy to standardize. Furthermore, the MapReduce paradigm also naturally takes advantage of multiple processor cores—something that is increasingly common in today's computing devices.
There is also an interactive CouchDB project that "is an emulator written in 100% JavaScript with tons of jQuery thrown in. It also implements the collation schemes as well as the map/reduce algorithms. While it doesn’t demonstrate replication, conflict management and a host of other capabilities in CouchDB, it does strive to illustrate concepts like schema-less JSON documents, map/reduce and how these things fit together."
You can check out the emulator here.
Friday, April 17th, 2009
Category: JavaScript, Library
Eric Ferraiuolo, inspired by the deprecation notice of Alexa, wrote a webpage thumbnails JavaScript library that lets you grab web page thumbnails via Page Glimpse:
JAVASCRIPT:
-
-
var container = document.getElementById('container'),
-
thumbs = Thumbnails({ devkey:'xxx' });
-
-
thumbs.get('http://google.com', append);
-
thumbs.get([
-
'http://eric.ferraiuolo.name/',
-
'http://925html.com',
-
'http://oddnut.com'
-
], append);
-
-
function append ( url, img ) {
-
var link = document.createElement('a');
-
link.href = url;
-
link.appendChild(img);
-
container.appendChild(link);
-
}
-
Thursday, April 9th, 2009
Category: Canvas, JavaScript, Library, UI
Christian Effenberger wrote in with another impressive piece of work:
Gauge.js 1.0 allows you to add programmable gauges (with shading and reflection) to your webpages.
It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari.
On older browsers, it'll degrade and your visitors won't notice a thing.
Add to Firebug? ;-)
Category: JavaScript, Library, jQuery
JAVASCRIPT:
-
-
$(document).ready(function() {
-
$('.white').addGlow({ textColor: 'white', haloColor: '#aaa', radius: 100 });
-
$('.blue').addGlow({ textColor: '#00f', haloColor: '#00f', radius: 100 });
-
$('.green').addGlow({ textColor: '#0f0', haloColor: '#0f0', radius: 100 });
-
$('.red').addGlow({ textColor: '#f00', haloColor: '#f00', radius: 100 });
-
$('*').bind('glow:started', console.info);
-
$('*').bind('glow:canceled', console.info);
-
});
-
The code above, using jQuery Glow by Pat Nakajima, gives you a nice blur error on hover.
Make sure to mouse over the demo and check out the project.
Wednesday, April 1st, 2009
Category: JavaScript, Library
Brandon Aaron has a nice article on building a special event for triple clicking on an element using jQuery.
To illustrate the API I’m going to create a new event type called “tripleclick”. To be fired it will require the user click the element three times. If we were to make this a typical jQuery plugin we would create jQuery.fn.tripleclick. However, I want to be able to take advantage of the bind syntax along with the other benefits like event normalization, data, and namespaces that the jQuery event system provides.
The first thing we need to do is create the special event. Each special event has a setup and a teardown method. The setup method gets called when the event is bound and the teardown method gets called when the event is unbound.
It is important to note that these two methods only get called the first time an event of a particular type is bound/unbound per an element. This is because the jQuery event system actually only binds one handler per an event type per an element and manages the other bound handlers itself. In jQuery 1.3 there is a new special event type called “Special All” that operates for all handlers but has a slightly different behavior. However, that is for another article.
it leaves us with:
JAVASCRIPT:
-
-
jQuery.event.special.tripleclick = {
-
setup: function(data, namespaces) {
-
var elem = this, $elem = jQuery(elem);
-
$elem.bind('click', jQuery.event.special.tripleclick.handler);
-
},
-
-
teardown: function(namespaces) {
-
var elem = this, $elem = jQuery(elem);
-
$elem.unbind('click', jQuery.event.special.tripleclick.handler);
-
},
-
-
handler: function(event) {
-
var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
-
clicks += 1;
-
if ( clicks === 3 ) {
-
clicks = 0;
-
// set event type to "tripleclick"
-
event.type = "tripleclick";
-
// let jQuery handle the triggering of "tripleclick" event handlers
-
jQuery.event.handle.apply(this, arguments)
-
}
-
$elem.data('clicks', clicks);
-
}
-
};
-
Next Page »
