The JSONObject class: For reading and writing JSON in ActionScript

Back in February while working on an AIR application, I found myself dealing with a lot of JSON data in ActionScript. I was using the corelib library for parsing and generating JSON objects. It was all good until I realized I could improve it even further.

While the JSON class does its job perfectly well, it has one small drawback: it’s not object-oriented.

The static methods encode and decode take the data object as input and return a converted data object as output. The objects themselves have no knowledge of the conversion from JSON to ActionScript and back; they’re just dumb objects. Every time you want to generate a JSON string out of an ActionScript object, you have to invoke the encode method; every time you want to parse a JSON string into an ActionScript object, you have to invoke the decode method. That’s procedural programming. How about if the objects themselves knew how to do this conversion?

Enter the JSONObject class.

Instances of the JSONObject class can read and write JSON strings while at the same time serving up their data as ActionScript properties.

Let’s look at an example:

var data:String = "{\"name\":\"John Doe\",\"age\":28}";

var person:JSONObject = new JSONObject(data);

trace(person.name); // John Doe
trace(person.age); // 28

person.age++;

var newData:String = String(person);

trace(newData); // {"name":"John Doe","age":29}

A few things to notice:

  1. A JSONObject instance can be created by passing the JSON string to the constructor. If the JSON string is not available at the time of construction, the object can be populated later using the populate method.
  2. You can access the properties of the JSON object directly as properties of the JSONObject object.
  3. A JSONObject object can be converted to a JSON string by simply casting it to the String type.
...

Disabling site-specific zoom in Firefox 3

Firefox 3 added a new feature called Full Page Zoom. You can now zoom the entire page (as opposed to zooming just the text), and the browser remembers the zoom level for each website. i.e. if you visit en.wikipedia.org and increase the zoom level to 150%, the next time you visit the site, it’ll be opened to a zoom level of 150%. This is really useful. Some sites do use very small font sizes (including perhaps mine), and every time you visit them you have to increase the zoom level. It’s extremely cool that Firefox 3 does this automatically for you.

That said, I’ve found this feature to be annoying at times. Not every page on a site uses the same font, and not every page is structured the same way, with the same kind of content. Some pages may have photos, some long articles full of text. While browsing a site, if you open one of its pages in a new tab, or a new window, and adjust the zoom level, it also changes the zoom level for the other page you were viewing from the same site (now in the background). If you switch back and forth between the two pages, you end up having to adjust the zoom level each time you switch. I don’t know if this is a common use case, but I found myself doing this a few times, and so I finally decided to turn off this site-specific zoom feature altogether.

Here’s how you do it:

  1. Open a new browser window, type about:config in the address bar, and hit Enter.
  2. Click OK on the warning page.
  3. On the configuration page, type “zoom” in the filter box.
  4. Find the preference called browser.zoom.siteSpecific, and turn it to false (double-click on it).

Now Firefox shouldn’t use the same zoom level for every page on a site. It won’t remember the zoom levels either — that’s the tradeoff.

An ideal solution would be if Firefox just didn’t change the zoom level of a page once the page had been opened, unless the user changed it manually. Site-specific zoom by itself is nice, but this “trying to keep up with the current zoom level” behaviour is annoying. Applications on the desktop also try to remember their window sizes, but they don’t resize other windows when you resize one. The same policy should apply for site-specific zoom, in my opinion.

Bug #419612 in the Mozilla bugbase specifically addresses this issue. The request is to make this a hidden preference, though I think it should be the default behaviour. If you agree, go vote for it.

The Milgram Experiment: Video and links

In 1961, psychologist Stanley Milgram conducted a series of experiments to measure the influence of authority on human behaviour, specifically on people’s willingness to perform acts that conflicted with their personal conscience. The results were to shock the entire world as they revealed, yet again, the dark side of human nature. This seminal work in social psychology came to be known as the Milgram Experiment.

Later Prof. Milgram would discuss his findings in his book Obedience to Authority: An Experimental View.

Here’s a video of one of the experiments.

There’s a longer length one on Google Video, though not quite the same quality.

A few links:

And here’s wishing all my Indian friends a Happy Independence Day. With freedom comes responsibility. Let’s do our best, today and every day.

A case against CSS variables

Bert Bos of the W3C in a recent essay on the subject makes a good case against the inclusion of variables and macros in the CSS language. I’m not sure I buy all of his points, but the overall argument for simplicity makes sense.

Incidentally we have something similar in Issuu’s layout language, although in a limited sense. They’re called anchors, and you define them thus:

<anchor name="outerMargin" x="50" />
<anchor name="controlBarCenterLine" y="60" />

Then you can align objects to these anchors. e.g.:

<image source="#Logo" left="#outerMargin"
  verticalCenter="#controlBarCenterLine" />

Unlike CSS “variables” though, IML anchors can be truly dynamic, as in the case of the predefined anchors in the viewer:

<pageNumber top="20" right="#droppContentRight" />

The above aligns the right edge of the page number control to the right edge of the document object, represented by the droppContentRight anchor. You can see this in action in the Basic Grey theme: as you resize the browser window, the document object gets resized too and the page number control shifts position accordingly.

The idea behind anchors of course is to decouple the positioning attributes from their intended values by adding a layer of abstraction. The designer can set up grid lines which can then be used for aligning objects. i.e. instead of setting all objects in the first column to a margin of 50, you can set those objects to a variable called outerMargin, which can then be adjusted independently without touching the objects. The anchors defined in an IML document should give you a sense of the overall layout of its content.

To that extent, we have here what is the equivalent of CSS variables. I wouldn’t venture to add variables of other types to the language though, for the very same reason cited by Bert, i.e. in the interest of simplicity.

One-man ISV

There seems no dearth of inspiration in the micro-ISV world. Meet Giacomo “Peldi” Guilizzoni, former Adobe ConnectNow engineering lead and now owner and sole employee of Balsamiq Studios LLC. You might have known him for his work on the FLV player or his contributions to Breeze Live, but today he’s drawing attention for something entirely different: his income. I am not talking about his salary, of course, which, as he puts it, is “steady at $0”. Instead, I’m referring to his company’s earnings from the sales of its very first product. Three weeks into the launch of Balsamiq Mockups, a mockup creation tool for UI designers, the company was already making profits. Within 6 weeks it had grossed over $10,000 in revenue.

Everything in Peldi’s one-man company is handled entirely by him out of his home in Italy. The only thing he’s had to outsource is the legal stuff, which incidentally has accounted for 65% of his costs. If this isn’t inspiration, what is?

You can learn more about the Balsamiq story on the company’s blog.

As for the product, I’ve heard some very favourable reviews about it, and now I can hardly wait to take it for a spin.

Issuu Platform

Last night Issuu released its new platform site for developers, designers, and anyone interested in using the technology.

What can you build on the Issuu platform?

As of now, you can customise the online publication viewer to include your company logo, change the background, modify the buttons, and do pretty much anything to the UI — in other words, infuse it with your own branding. The viewer has already been available, since its very first release, in four different themes: Grey, Grass, White, and Wood. Now you can create your own themes, using a combination of XML and either Adobe Flash or any standard image editor like Adobe Photoshop or GIMP.

Moving forward, Issuu will be releasing new UI components and data APIs through the new Issuu Platform & Services site.

Issuu Markup Language

From the manual:

The user interface of Issuu’s online publication viewer is configured using a simple, dynamic, XML-based UI markup language called Issuu Markup Language (IML). Skin libraries in either SWF 9 or PNG, JPG, or GIF format provide the graphics for interface objects, whereas the objects themselves are laid out using IML markup.

What does IML markup look like?

Here’s an example:

<button action="openUrl:http://platform.issuu.com/"
  upState="#PlatformButton_up" overState="#PlatformButton_over"
  downState="#PlatformButton_down"
  toolTip="Issuu Platform &amp; Services"
  left="35" top="18" />

It’s not very different from HTML and other XML-based UI languages like Mozilla’s XUL and Adobe’s MXML (surprise!). If you’re familiar with any of these technologies, you should have no trouble picking up IML.

Is it a general-purpose language? Almost. Currently it’s tied to the Issuu platform, specifically the viewer.

You can learn more from the language reference and the many tutorials available on the site.

Also check out the sample themes (source included).

The Mashable Theme Example

Yesterday, I put together a quick ’n dirty Issuu theme for the popular social networking news site called Mashable. Essentially it’s a customisation of the Crayon theme with some Mashable branding thrown in. The header, in particular, looks exactly like the one you see on mashable.com. It took me 15 minutes to create the theme, an example of how even a person with absolutely no design skill whatsoever can easily customise the Issuu experience for potentially millions of users online.

Mashable actually used the theme in its story announcing the release.

Learn More

You can join the group on Google to participate and interact with other users of the Issuu platform, ask questions, and share your views and experiences with the community.

Aurora: Next-gen UX for the internet

Here’s the Aurora concept video (part 1) by Adaptive Path and Mozilla Labs, depicting what could be the future of user experience on the internet.

Future. User experience. Internet. Where have I heard that before?

<a href="http://www.vimeo.com/1450211?pg=embed&amp;sec=1450211">Aurora (Part 1)</a> from <a href="http://www.vimeo.com/user524591?pg=embed&amp;sec=1450211">Adaptive Path</a> on <a href="http://vimeo.com?pg=embed&amp;sec=1450211">Vimeo</a>.