Thursday, July 31st, 2008
Category: JSON
, Python
John Paulett wanted to be able to define complex Python model objects, then seamlessly pass them into CouchDB and to client-side Javascript.
To make this happen for objects that are beyond primitive sets he created JSON Pickle which has been used on the Universal Feed Parser, and lets you do the following:
PYTHON:
>>> import jsonpickle
>>> from jsonpickle.tests.classes import Thing
# Create an object.
>>> obj = Thing('A String')
>>> print obj.name
A String
# Use jsonpickle to transform the object into a JSON string.
>>> pickled = jsonpickle.dumps(obj)
>>> print pickled
{"child": null, "classname__": "Thing", "name": "A String", "classmodule__": "jsonpickle.tests.classes"}
# Use jsonpickle to recreate a Python object from a JSON string
>>> unpickled = jsonpickle.loads(pickled)
>>> print unpickled.name
A String
Monday, June 30th, 2008
Category: JSON, Utility
Tom Robinson has built a useful utility, JSON Diff, which gives you a graphical look at the difference.
Changed portions are displayed in yellow. Additions are displayed in green. Deletions are displayed in red.
The visualization is live itself, so you can move around the nodes using the triangles.
Monday, June 23rd, 2008
Category: JSON, JavaScript
Re-posted from my personal blog
Sometimes you can get in the zone just enough to be productive on a plane. On my flight to Mexico City yesterday, I created Endpoint a project that contains a server proxy, JavaScript client, and Greasemonkey Script with a mission. The mission is to take a URL, work out if it is a redirect (via a Location: header), and then return the final endpoint for it.
Why did I do this?
I was brainstorming functionality for a Twitter client with James Strachan (he is working on gtwit) and we talked about how annoying tinyurl / is.gd / snurl / you name it URLs are. They don't tell you where you are going, and you could get Rick Rolled (if you are lucky) or much much worse.
So, I wanted to create a library, and one client (Greasemonkey) to test it out. Then anyone else could use it too to resolve directly from their Web pages.
How does it work
You load up the JavaScript via script src and then you can call resolve, passing the URL and a callback that will get the result. A few examples:
JAVASCRIPT:
// Simple version
Endpoint.resolve('http://snurl.com/2luj3', function(url) {
alert(url);
});
// Using the original URL to work out if it has changed
Endpoint.resolve(
document.getElementById('testurl').value,
function(url, orig) {
alert(url);
alert(Endpoint.isRedirecting(url, orig));
}
);
// How it is used in the Twitter Endpoint Resolver
Endpoint.resolve(url, function(resulturl, originalurl) {
if (!Endpoint.isRedirecting(resulturl, originalurl)) return;
newtext = newtext.replace(originalurl, resulturl, "g");
jQuery(el).html(newtext);
});
Under the hood, a bunch of stuff is happening. I would love to be able to just use XMLHttpRequest to dynamically hit the URL and look at the headers, but the same-origin policy stops me.
This is why I have the server proxy, which returns a JSONP callback.
When you call resolve(url, callback) the script tag is created on the fly and added to the DOM. The callback function is all handled to allow multiple calls, and then the chain unravels.
Here you can see it all in action, showing how my Twitter stream will go through and the URLs will dynamically change from their tinyurl versions to whereyouaregoing.com:
I wanted to use App Engine to host the server proxy, but unfortunately I can't work out how to do that yet. You have access to the URLFetch API to access resources from App Engine. Unfortunately for me, one of the features is that it understands redirects and just goes on through to the full resource itself, with no way to get the endpoint from the headers in the response.
It was also interesting to read Steve Gilmor talk about these services all be it in a post that is hard to actually understand ;)
Also, Simon Willison just put up a simple service on App Engine, json-time, that "exposes Python’s pytz timezone library over JSON." I think that we will see a lot of these types of mini-Web services hosted on App Engine. Taking Python utility and making services from its goodness is an obvious choice.
Tuesday, May 13th, 2008
Category: JSON, Showcase
inputEx is "a javascript framework to build fields and forms" created by Eric Abouaf. The framework uses a JSON format to describe a form, such as:
JAVASCRIPT:
{
"fields" : [
{
"type" : "group",
"inputParams" : {
"fields" : [
],
"name" : "",
"tooltipIcon" : false,
"value" : {
},
"optionsLabel" : "Options"
}
}
],
"optionsLabel" : "Options"
}
which you can build with the help of the builder application.
Check out the getting started guide and if you like to build an application that looks like:
JAVASCRIPT:
init: function() {
this.buildTree();
this.initContextMenu();
this.buildForm();
this.initEvents();
this.queryData();
}
rather than HTML, then this could be the tool for you!
Category: Dojo, JSON, Showcase
![[image]](http://mowser.com/img?url=http%3A%2F%2Fwww.sitepen.com%2Fimages%2FlabsPersevereTitle.png)
Kris Zyp of Sitepen has released Persevere:
An open source set of tools for persistence and distributed computing using intuitive standards-based JSON interfaces of HTTP REST, JSON-RPC, JSONPath, and HTTP Channels. The core of the Persevere project is the Persevere Server. The Persevere server includes a Persevere JavaScript client, but the standards-based interface is intended to be used with any framework or client.
The Persevere Server is an object storage engine and application server
(running on Java/Rhino) that provides persistent data storage of dynamic
JSON data in an interactive server side JavaScript environment. It is
currently in beta, and boasts a very solid feature set that should
interest JavaScript, Dojo and Ajax developers:
Create, read, update, and delete access to persistent data through
a standard JSON HTTP/REST web interface Dynamic object persistence - expando objects, arrays, and
JavaScript functions can be stored, for extensive JavaScript persistence
support Remote execution of JavaScript methods on the server through
JSON-RPC for a consistent client/server language platform Flexible and fast indexed query capability through JSONPath Comet-based data monitoring capabilities through HTTP Channels
with Bayeux transport plugin/negotiation support Data-centric capability-based object level security with user
management, Persevere is designed to be accessed securely through Ajax
with public-facing sites Comprehensive referencing capabilities using JSON referencing,
including circular, multiple, lazy, non-lazy, cross-data source, and
cross-site referencing for a wide variety of object structures Data integrity and validation through JSON Schema Class-based data hierarchy - typed objects can have methods,
inheritance, class-based querying Pluggable data source architectures - SQL tables, XML files,
remote web services can be used as data stores Service discovery through Service Mapping Description
You can check out a live Persevere data grid demo that auto-syncs the grid using JS such as this:
JAVASCRIPT:
var persevereStores = dojox.data.PersevereStore.getStores(); // persevere stores are auto-generated
customerStore = persevereStores.Customer; // and get the Customer store
dataModel = new dojox.grid._data.DojoData(null,null,{/*rowsPerPage:12,*/store:customerStore,query:"",clientSort:true});
addItem = function() {
// need to specify the parent because the customerStore is hierarchical and the grid model will
// call newItem without any info who the parent
//customerStore.parentId="0.examples.customers";
grid.addRow({firstName: "firstName", lastName: "lastName",created:dojo.date.stamp.toISOString(new Date,{zulu:true})});
}
Tuesday, April 22nd, 2008
Category: Google, JSON, JavaScript, Library
The Google Ajax API team has been offering great services that you can use from JavaScript in the browser. I have talked about some of them on Ajaxian before (Feed API, Feed Discovery API, and the recent Language API) but now we have a great new release that enables you to access these APIs from Flash or the server side.
In fact, as long as your program can speak HTTP, you can have access to the services.
For example, you could now call this an REST API to Google Search.
To see it in action, point to something like http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Ajaxian and you will see the JSON output that is documented.
There are terms of use that you should abide by, and some other comments:
An area to pay special attention to relates to correctly identifying
yourself in your requests. Applications MUST always include a valid and accurate http referer header in their requests. In addition, we ask, but do not require, that each request contains a valid API Key. By providing a key, your application provides us with a secondary identification mechanism that is useful should we need to contact you in order to correct any problems.
Check out the updated documentation for more details on each API:
Including code snippets. For example, here is how you would access the search results in ActionScript:
JAVASCRIPT:
var service:HTTPService = new HTTPService();
service.url = 'http://ajax.googleapis.com/ajax/services/search/web';
service.request.v = '1.0';
service.request.q = 'Paris Hilton';
service.resultFormat = 'text';
service.addEventListener(ResultEvent.RESULT, onServerResponse);
service.send();
private function onServerResponse(event:ResultEvent):void {
try {
var json:Object = JSON.decode(event.result as String);
// now have some fun with the results...
} catch(ignored:Error) {
}
}
If you are interested in this kind of thing, as well as Gears, OpenSocial, AppEngine, or Android, check out the Google Developer Days coming to cities around the world or our big Google I/O event on May 28-29 in San Francisco.
Monday, April 21st, 2008
Category: Examples, JSON, JavaScript, Library
Jacob Seidelin went on a ( crazy :) ) mission to create a pure JavaScript video player that didn't use Flash:
My first thought was to read binary video files using a technique like the Andy Na posted about here, figuring that there must be some really simple to parse video formats around, but I soon changed directions and decided to make up a whole new video format. Enter.. JSONVid. Using a player like mplayer, it is easy to export all frames in a movie clip to individual jpeg files, and using whichever language you prefer it is also fairly trivial to collect these files, base64 encode the bunch of them and throw them all together in a nice JSON file (I used this PHP script).
The format uses good ole data: URLs, which are finally supported in IE with version 8:
JSON:
{
frm : "JSVID", // format id tag
ver : 1, // version number of format
width : 320, // width of video
height : 240, // height of video
rate : 15, // framerate (frames per second)
frames : 495, // number of frames in file
data : {
video : [ // here comes 495 data:uris containing base64 encoded jpeg image frames
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7gAOQWRv ... ",
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7gAOQWRv ... ",
...
]
}
}
Then he created the player:
First strategy was to create an Image object for each frame and render it on a canvas element using drawImage(). That worked fine and performance was nice (although Opera used a lot of CPU), but I figured I'd try just using a regular image tag and just change the src property to another data:uri each frame. The change was barely noticeably in Firefox and Safari and it ran a bit better in Opera, so I lost the canvas and stuck with plain old images.
Now, it seems that Firefox will eat up all the memory in the world if you keep throwing new data:uris at the same image tag, which led to another change, so for each frame a new Image object was created and saved for later and as the video played, the previous frame Image was replaced by the new Image object. That seemed to work, but introduced an annoying delay as all these Image objects were created before playing, so I ended up moving the Image creation to actual render cycle where it simply checks if the frame Image has already been created, and if not, creates it.
You can now get going with HTML such as:
HTML:
<script src="jsvideo.js" type="text/javascript"></script>
</head>
<div videosrc="myvideo.jsvid" videoautoplay="true"></div>
</body>
</html>
There are a couple of tests to play with. It was also pointed out that maybe an animated gif/png would be a choice (without controls), and of course, Flash is still the best choice here, until we get video support in most browsers.
Friday, April 18th, 2008
Category: JSON, Library
Oliver Steele is doing great work, and he has just released a gem called JCON which stands for JavaScript Conformance. It tests JSON values to make sure that they are valid for the new world of ECMAScript 4 type definitions (e.g. new { x:int, y:string }( 3, "foo" ) ).
Usage
RUBY:
type = JCON::parse "[string, int]"
type.contains?([‘a’, 1]) # => true
type.contains?([‘a’, ‘b’]) # => false
type.contains?([‘a’, 1, 2]) # => true
// via RSpec
[1, ‘xyzzy’].should conform_to_js(‘[int, string]’)
[1, 2, ‘xyzzy’].should_not conform_to_js(‘[int, string]’) # 2 isn’t a string
{:x => 1}.should conform_to_js(‘{x: int}’)
// with JavaScript Fu
# this will succeed if e.g. response contains a script tag that includes
# fn("id", {x:1, y:2}, true)
response.should call_js(‘fn’) do |args|
args[0].should conform_to_js(‘string’)
args[1].should conform_to_js(‘{x:int, y:int}’)
args[2].should conform_to_js(‘boolean’)
# or:
args.should conform_to_js(‘[string, {x:int, y:int}, boolean]’)
end
In other JSON news, it appears that new ECMAScript standard will no longer reserve the words:
abstract boolean byte char double final float implements int interface
long native package private protected public short static synchronized
throws transient volatile
And Douglas Crockford says that no browsers reserve them, and thus he is unreserving them from jsLint.
Thursday, March 20th, 2008
Category: Dojo, JSON, JavaScript, Library
JAVASCRIPT:
{target:"/jsonrpc", // this defines the URL to connect for the services
transport:"POST", // We will use POST as the transport
envelope:"JSON-RPC-1.2", // We will use JSON-RPC
SMDVersion:"2.0",
services: {
add : { // define a service to add two numbers
parameters: [
{name:"a",type:"number"}, // define the two parameters
{name:"b",type:"number"}],
returns:{"type":"number"}
},
foo : { // nothing is required to be defined, all definitions are optional.
//This service has nothing defined so it can take any parameters
//and return any value
},
getNews : {
// we can redefine the target, transport, and envelope for specific services
target: "/newsSearch",
transport: "GET",
envelope: "URL",
parameters:[ { name: "query", type: "string", optional: false, default: "" } ],
returns:{type:"array"}
}
}
What is that? Does it look a little WSDL-y without the XML? This format is Service Mapping Description (SMD), and Kris Zyp talks about how it enables pluggable Web services.
With the schema about you can wire it together (example using Dojo):
JAVASCRIPT:
var services = new dojox.rpc.Service("http://mydomain.com/mySMD");
var newsDeferred = services.getNews({query:"dojo"});
newsDeferred.addCallback(function(returnValue) {
alert("A news item: " + returnValue[0]);
});
Neil Roberts asked about cross domain SMDs and Kris said:
Yes, we will use JSONP, although we use a special form, where the callback function will be derived directly from the name of the SMD, in order to allow for static creation of SMDs that can be accessed cross-domain.
Monday, March 3rd, 2008
Category: .NET, JSON
![[image]](http://mowser.com/img?url=http%3A%2F%2Fjames.newtonking.com%2Fimages%2FJson.NET2.0Beta2_F573%2FreflectJson.NET2.0BETA.png)
James Newton-King has quickly released a new version of Json.NET that has a new easier syntax for querying and and creating JSON.
Creating JSON
JAVASCRIPT:
JObject o = JObject.FromObject(new
{
channel = new
{
title = "James Newton-King",
link = "http://james.newtonking.com",
description = "James Newton-King's blog.",
item =
from p in posts
orderby p.Title
select new
{
title = p.Title,
description = p.Description,
link = p.Link,
category = p.Categories
}
}
});
Querying JSON
JAVASCRIPT:
var categories =
from c in rss["channel"]["item"].Children()["category"].Values<string>()
group c by c into g
orderby g.Count() descending
select new { Category = g.Key, Count = g.Count() };
Check out the project.
Wednesday, February 20th, 2008
Category: Framework, JSON, JavaScript, Library, Yahoo!
Version 2.5 of the Yahoo User Interface Library (YUI) was released today. You can get all the details on the official blog post, but here's the "change log":
The new Layout Manager allows you to create multi-pane user interfaces that are collapsible and resizable. The Flash-enhanced File Uploader control might be known to you from Flickr and and allows you to easily batch-upload files and images with progress bars. The JavaScript Profiler now has a graphical front-end to make the information more easily understandable The YUI Data Table performs faster and got new features, including horizontal and vertical scrolling, a paginator class, drag and drop columns and an API to access, add and remove columns. The Image Cropper control allows you to pick a part of an image to be cropped server-side The Cookie Controller provides a wrapper for all things to do with cookies The Slider Control got updated to support multiple handles to define a range rather than just a state.
In addition to that, some of the components left beta status. These are the Get Utility to retrieve scripts and style sheets on the fly, the ColorPicker Control, the JSON Utility to validate JSON, the ImageLoader Utility to load images on-demand to increase page performance and the YUI Test Utility.
The really detailed report on all the changes is available on the YUI list/forum.
If you want to have a quick glimpse of what the Layout Control allows you to create, check out the demo application interface simulating simulating Yahoo Mail.
Tuesday, February 12th, 2008
Category: .NET, JSON
James Newton-King has posted a new bit of code called LINQ to JSON which is a .NET LINQ style API over JSON.
For example, here is how you could get out categories and how often they are used:
JAVASCRIPT:
var categories =
from c in rss.PropertyValue<jobject>("channel")
.PropertyValue<jarray>("item")
.Children<jobject>()
.PropertyValues<jarray>("category")
.Children<string>()
group c by c into g
orderby g.Count() descending
select new { Category = g.Key, Count = g.Count() };
There is also a project, JSLINQ which is an implementation of LINQ to Objects implemented in JavaScript. It is built using a set of extension methods built on top of the JavaScript Array object. If you are using an Array, you can use JSLINQ.
Friday, February 1st, 2008
Category: Google, JSON, Social Networks
Reposted from my blog
Would you like to be able to make a quick call to get a JSON response that ties together a social graph made up of resources available on the Web?
Brad Fitzpatrick, Kevin Marks, and others at Google have released a new Social Graph API that does just that:
The new Social Graph API makes information about the public connections between people on the Web easily available and useful. You can make it easy for users to bring their existing social connections into a new website and as a result, users will spend less time rebuilding their social networks and more time giving your app the love it deserves.
Here's how it works: we crawl the Web to find publicly declared relationships between people's accounts, just like Google crawls the Web for links between pages. But instead of returning links to HTML documents, the API returns JSON data structures representing the social relationships we discovered from all the XFN and FOAF. When a user signs up for your app, you can use the API to remind them who they've said they're friends with on other sites and ask them if they want to be friends on your new site.
This is exciting to me as:
I gave it a quick test drive, and when I say quick, I mean 5 minutes :)
I built a tiny JavaScript library that takes a base URL, and it graphs out the relationships using Canvas.
You get to call loadGraph(URL, { width: w, height: h }) and the graph will be injected away.
It needs to be nicely abstracted and isolated so you can call it willy-nilly, but it works.
Watch the introduction video:
Thursday, January 31st, 2008
Category: Browsers, JSON, JavaScript, Library
John is at it again, writing a piece on recent news surrounding JSON.
He links to an updated library by Douglas Crockford,
JAVASCRIPT:
JSON.stringify({name: "John", location: "Boston"});
// => "{'name':'John','location':'Boston'}"
JSON.parse("{'name':'John','location':'Boston'}");
// => {name: "John", location: "Boston"}
It also turns out that Mozilla implemented this functionality in the browser (time for a wrapper):
JAVASCRIPT:
var nativeJSON = Components.classes["@mozilla.org/dom/json;1"]
.createInstance(Components.interfaces.nsIJSON);
nativeJSON.encode({name: "John", location: "Boston"});
// => "{'name':'John','location':'Boston'}"
nativeJSON.decode("{'name':'John','location':'Boston'}");
// => {name: "John", location: "Boston"}
And in conclusion:
The final, and most important, step is being worked on right now - a way to access native JSON encoding and decoding from web pages. How it'll be accessible is up to some debate (as having its naming conflict with an existing object would be a really bad thing). Regardless, there should be something within the browser by the time the Firefox 3 betas wrap-up.
Friday, January 18th, 2008
Category: JSON, JavaScript, Library
Nicholas C. Zakas wanted to keep JSON out of JavaScript. He has patterned a new form of JSON support on E4X and wrote it up.
Nichole wants:
The addition of two new global types: JSON and JSONList. JSON represents a JSON object while JSONList represents a JSON array. Both types have a toJSONString() method that correctly encodes an object into a JSON string. The default toString() method is available but returns a string representation of the object (not a JSON string). This follows the convention set forth in E4X. The [[Put]] method is overridden in both types such that it will only accept values of type JSON, JSONList, Date, boolean, string, number, or null. Any other data types cause an error to be thrown. The JSON constructor allows an object to be passed in that has initial properties to add; the JSONList constructor allows an array to be passed in with items to add. The typeof operator should return "json" when used on a value of type JSON or JSONList. JSON strings are parsed via JSON.parse(), throwing syntax errors if they are found.
You can see it in action:
JAVASCRIPT:
var obj = JSON.parse("{\"name\":\"Nicholas\",\"age\":29}");
var json = new JSON();
json.put("name", "Nicholas");
json.put("age", 29);
var name = json.get("name");
var str = json.toJSONString();
var list = new JSONList();
list.put(0, "blah");
list.push(25);
list.push(true);
var val = list.get(1);
var len = list.getLength();
var str = list.toJSONString();
var json = new JSON({name:"Nicholas"});
var name = json.get("name");
Summary
It is slightly more verbose than the current methods for using JSON in JavaScript, however, I believe this solution keeps JSON out of the core of JavaScript and maintains useful access to JSON parsing and serialization. The key to understanding this approach is that JSON and JSONList are purely data storage objects without any additional functionality. They have one job and they do it well. Make sure you only use put() or other methods to add values to the objects instead of just assigning new properties.
Wednesday, January 16th, 2008
Category:
![[image]](http://mowser.com/img?url=http%3A%2F%2Fajaxian.com%2Fwp-content%2Fthemes%2Fajaxian%2Fimages%2Ficon_feed.gif)
![[image]](http://mowser.com/img?url=http%3A%2F%2Fmedia.techtarget.com%2Fdigitalguide%2Fimages%2FMisc%2Fplatinum_site_sponsor.gif)
