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:
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:
James Coglan has updated JS.Class, his implementation of Ruby's object system in JavaScript.
This release includes a Hash implementation, HashSet, an updated Ruby 1.9 Enumerable module with enumerators and Symbol#to_proc functionality, and an improved package loader that supports parallel downloads and runs on SpiderMonkey, Rhino and V8.
The package manager has been improved with a new API, parallel downloading of files, and support for server-side environments such as SpiderMonkey, Rhino and V8. It also supports user-defined loader functions for transparent integration with Google and Yahoo!’s packaging systems.
The Enumerable module has been updated with plenty of methods from Ruby 1.9, and now supports enumerators, and Symbol#to_proc-like functionality whereby a string, MethodChain or any object that implements toFunction() can be used as an iterator.
The core object methods now live in Kernel, and we’ve added new methods: tap(), equals(), hash() and enumFor().
The double inclusion problem is now fixed; no current Ruby implementation seems to support this properly.
Ancestor and method lookups are now cached so callSuper runs about twice as fast.
On the back of the first Jetpack announcement, we see new version announced, 0.2 that adds slidebars, jetpack.future, and persistent storage.
Slidebar isn't a spelling mistake, but a slightly different take on the traditional sidebar. Check out Aza in his screencast to see them in action, and wait for the part where he sucks in a playing video and lets you continue to browse the Web elsewhere.
but you have to use another new feature of Jetpack 0.2.... future:
Jetpack is two things at once: it is a platform for experimentation and it is also a solid set of APIs that anyone to easily build new Firefox features. To enable Jetpack to be both stable and — at the same time — to experiment with not-quite-yet-ready features we’ve added the ability to import new features from the “future”.
Slidebars, for example, are still highly experimental. To use them, you need to import them from the future first.
Read more about future in the Jetpack enhancement proposal (JEP) for jetpack.future.
jetpack.future.import("slideBar")
Persistent Storage and Clipboard Support
One of the most requested features in the Jetpack development mailing list was for the ability to persistently store data across restarts.
We’ve added simple storage to the future module. The API is defined in the storage JEP. Using it as simple as:
jetpack.future.import("storage.simple");
var db = jetpack.storage.simple;
var data = {name: "Firefox", twitter: "@firefox"};
db.set( "friend", data );
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 AdvancedDemos.
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.
Items are now automatically laid out when they are first shown - rather than trying to calculate dimensions when they are hidden. This will solve a number of layout issues that occur across all components.
The toolbar overflow has been improved to support all toolbar items, including CycleButtons and Buttons with toggle enabled (both grouping and otherwise).
Issues with some animations in the Fx library have been corrected.
There are newexamples that test out new features such as REST support and the DataWriter.
Ext GWT 2.0 works with GWT 1.6. With GWT 1.6, the application deployment design was changed to make it easier to integrate your GWT application into an existing J2EE application. Ext GWT 2.0 has been updated to take advantage of the new GWT design.
Ext GWT 2.0 introduces several new UI Components and enhancements to many existing components.
Abraham Elias sits down with the Zipwhip folks and shares a case study:
Zipwhip is a utility for text messaging from the web. Text messaging is the fastest growing communication medium, but is still locked inside the mobile phone. We aim to help bring text messaging everywhere.
To pull off our ambitious goals, we’re using just about every web 2.0 trick in the book—comet to send carrier delivery receipts back to the browser in real-time, Ajax for server communications, download-on-demand Javascript packages (with preloading), Flash for audio notifications, and many others.
Tero Piirainen has created a new package of jQuery Tools.
This library contains six of the most useful JavaScript tools available for today's website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.
This library is open source and dual licensed under MIT and GPL 2+ licenses.
Sergey Ilinsky, formerly of Ajax pioneer Backbase, has created a new Ajax toolkit called Ample SDK. The best way to describe Ample SDK is that it's a browser-within-a-browser, but not in the visual sense. Rather, it aims to implement in JavaScript the stack of rendering technologies typically delegated to the browser. For example, Ample currently lets you use Mozilla's XUL to create cross-browser applications.
Here's an example of how you could use Ample SDK to render a XUL interface in the browser:
<body>
<!-- other HTML code -->
<script type="text/javascript">ample.open()</script>
<xul:menulist xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<xul:menupopup id="items-popup">
<xul:menuitem label="Item 0" value="0"/>
<xul:menuitem label="Item 1" value="1"/>
<xul:menuitem label="Item 2" value="2"/>
</xul:menupopup>
</xul:menulist>
<script type="text/javascript">ample.close()</script>
<!-- other HTML code -->
</body>
(Sorry for the old-school, ugly <pre> above--our code formatter chokes on XML namespaces, used in the XUL elements above.)
The Ample SDK compatibility table, shown above, gives you a sense of the scope of the project: to implement technologies like XUL, SVG, HTML 5, XHTML, and so forth, all in JavaScript--and render them across modern and legacy browsers like IE 5.5.
When Brendan Eich first hinted several years ago that the browsers would get fast, it spurred a lot of folks to wondering whether the future of feature innovation would be primarily in the JavaScript library space, and the browsers would focus on being JavaScript run-times and graphics abstract layers.
Ample SDK raises the question anew. Should we push the rendering layer to JavaScript libraries? What do you think?
Over the years we are have mentioned many Firefox, and Firebug plugins to aid us Web developers. Wouldn't it be nice to subscribe to a bundle of these tools? The Firefox Add On team has now given us that ability with Add On Collections:
Today, we’re excited to introduce a new feature to our website that will expose the niche add-ons that can be hard to find, and gives users a more active role in helping outstanding add-ons bubble to the top. One thing we’ve learned as add-ons have grown in popularity over the years is that once a user finds an add-on they love, they become a fan for life. We see this all the time as people recommend add-ons to their friends and write great reviews.
You will notice the Web Developer collection that features:
Have you ever wanted to just <a href="path" action="post">? Remember the hub-ub with the old Google Web Accelerator and how it started to crawl links to delete actions that were mistakenly using GET?
Natalie Downe has written up a piece on styling HTML buttons as links which means that you can somewhat get the same effect. It shows how you can use an inline span to get the hover effect, taking:
Dave Burke just gave an awesome demo at GDD Beijing. Fire up Firefox 3.5beta (for now) and head over here and watch the human blink detection in action!
Here Dave tells us more about his awesome hack:
Inspired by a demo by Paul Rouget, I've created an image processing demo that detects eye blinks in real-time. It uses a combination of <video>, <audio>, <canvas> and worker threads. The <video> frames are "projected" on to a <canvas> to get access to the raw pixels. The Euclidean colour distance is calculated inter-frame and thresholded, resulting in a view that shows movement (shown on a second canvas). A worker thread then performs several algorithms including tracing, sorting, and positioning check of the blobs of pixels. If the worker thread determines an eye blink, it posts back to the main thread which uses the canvas to draw bounding boxes around the eyes. The algorithm is based on a paper I wrote almost 10 years ago describing a communication system I built for a patient with severe spinal injuries. I had originally implemented it in C++ using Microsoft's "Video For Windows" (a precursor to DirectShow). I bet I would have laughed if someone said that I'd be able to write the same system in JavaScript less than 10 yrs later!
Appcelerator has announced a Titanium beta that adds to their desktop vision with new APIs and developer tool but also allows you to create mobile applications using HTML/CSS/JavaScript (and in fact Ruby, Python, ...) that run on iPhone and Android.
You can take a look at what it takes to develop for desktop and mobile in this screencast from Kevin Whinnery:
I instantly thought of PhoneGap and asked Jeff Haynie about the differences. It appears that Titanium Mobile handles the device mapping in a different way. Instead of focusing just on device APIs and giving developers access to those APIs via JavaScript, it goes a little further. The Titanium tool will compile down your code and you will see that native widgets will be used in places. As the mobile version moves forward, they expect to do more of that kind of work, so instead of a WebView + APIs, you have native where you can, and WebView where you can't.
From watching the Titanium Developer tool at work, you can quickly see that it is nicely taking care of you, the Web developer, as you go through the process of dealing with phones. Dealing with the SDKs from Apple and Android can be messy business and the tool really tries to make it much more seamless. The same can be said for the packaging and deployment process.
It is great to see yet another product that comes along to help Web developers take their existing skills and have them work on mobile platforms. Personally, the thought of going to Objective-C land isn't a pleasant one for me, so this and PhoneGap make total sense. If other platforms such as Android and hopefully webOS catch on, then it will make even more sense to go cross platform. Who better to write code on difference devices that Web devs since we have to deal with it every day ;)
Need a visual builder? You could take the upcoming 280 Atlas, use Interface Builder or Atlas itself, and deploy your app to the phone. Great times for the Web platform.
Test Drive the latest Thusnelda theora encoder with in-browser Video Encoder Firefogg.
Firefogg is an open source extension written by xiph hacker Jan Gerber that lets web developers request ogg video from their users. Since Firefogg is a Firefox extension it allows users to stay up to date with the latest and greatest theora encoder improvements. Firefogg supports a rich api for enabling web applications to drive in-browser transcoding from any source footage to ogg theora video (and possibly other free formats in the future). Firefogg supports simultaneously uploading while its transcoding via resumable one meg post chunks. It also supports fall-back to HTTP POST all-at-once. Both methods include progress indicators.
Firefogg can also encode to a local file and an example local transcoding application is on the site. The sample application builds on jQuery UI so it supports custom themes. Integration for firefogg with wikimedia commons are in testing. With Firefoxs video tag support this should be a helpful extension for converting video to ogg theora or supporting ogg theora video contributions in your website.
Firefogg can minimize the need for costly server side transocding infrastructure. It also helps avoid the extra transcode problem that plagues net video where a user saves to a compressed format locally to save time uploading; then the server re-transcodes the video so others can view it with a flash plugin. With Fireofogg we can go strait from the high quality source to the format distributed on the web site.
Here is an example of using the API yourself to convert video:
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
Ben gave a fantastic talk on creating compelling user experiences that discussed craftmanship in software.
He details the somewhat opposing views of Alan Cooper (pictured above) and Joel Spolsky talking about how IT people are screwed when it comes to quality. A depressing thought, and one that we need to combat in the trenches by just creating great software at work and proving that it is a winning strategy.
One piece of the talk I wanted to highlight was when Ben discussed UI latency. He has a simple feedback test page that lets you see how various delays make you feel. Give it a go and think about what feels sluggish and annoying. It differs between people, but 100ms feels like the "noticeable" level and 200+ feels sluggish. We should have a page that doesn't show numbers and is randomly setup, and then do a test. What do you think?
Also, to finish off, you owe it to yourself to spend a couple of minutes watching this awesome rant of Louis C.K. as he discusses how screwed up we are wrt expectations:
This is actually incredibly relevant to us as developers, as we run up against expectations in software too. Do you want to meet expectations? Or set new boundaries?
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.
// 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.
, JavaScript
weight loss dr s tx? 
