sorted by: recent | see : popular

Content Tagged with Page + showcase

I work on Google Code. Hearing that Radiohead was going to release data with progressive licensing and wanted to do so on Google Code was awesome.

Now we see how cool it is that the data is open. People like Jacob Seidelin are doing interesting things with it.

In this case, Jacob has created amazing visualizations of the data using JavaScript and Canvas:

I figured it would be a nice little experiment to try visualizing this data using JavaScript and Canvas so I went and did just that. The data is simply point clouds, meaning a whole bunch of points with x,y,z values (and intensity) for each frame. The data on Google Code is about 800 MB, so obviously a bit of trimming had to be done. You can't expect 30 fps with Javascript doing with this kind of data, so I've only used every 5 frames giving us a framerate of 6 fps, not great but acceptable. Then the actual points, each frame has about 12,000 points. No way this will render with 6 fps in any browser, so again I've taken only 10% of the points. Additionally, I've tried to filter away the noise around Thom Yorke's head since that took up a good deal of points. The interesting bit is him singing, anyway. In the end, we have a dataset of about 4 MB (converted to a JS array) for the one minute clip they released.

Now the data is in a more manageable state and the visualization can begin. It's not as good as the real thing, obviously, but I think it's ok (it's best when you look at Thom in profile). The audio clip is as usual played via SoundManager 2 which also gives us free timing information to sync the rendering to. I've played around and made a few different effects that you can toggle on and off (by pressing keys 1-9). While it is playing you can also rotate around the vertical axis by moving the mouse horizontally over the video. Also try clicking/doubleclicking.

Great publicity for Radiohead too. When you are first to do something, that is often the case.

Thomas Fuchs and Amy Hoy have teamed up again for a micro-app called Creativescrape "an inspration utility for those moments when you just seem to be braindead. It comes with a OS X screensaver for your enjoyment."

All via 188 lines of fun living on top of Prototype and Script.aculo.us.

José Jeria pointed us to a great looking XUL application that allows you to sketch GUI's and then export them to PNG:

With the power of the underlying Mozilla Gecko engine, Pencil turns your excellent Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package.

Pencil will always be free and can run on virtually all platforms that Firefox 3 supports.

Always good to see people using the power of XUL that still has features that I hope to see HTML get.

Our Signal takes Digg, Reddit, Delicious, and Hacker News and creates a full page cloud visualization using jQuery.

The size of the box reflects the popularity, and the color lets you know the acceleration of that popularity. If the color is warm, it is on the rise, and vice versa for cool colors.

I like seeing alternative visualizations, but I have to admit I am not a huge fan of tag cloud style views. You?

Ever since Macromedia and Adobe merged, we have been waiting for a day where PDF and Flash played really nice together, and today is the day. Very symbolic for the folks from the companies before the merge.

As TechCrunch says:

At the same time Adobe is launching Acrobat.com, it is releasing Acrobat 9—a major upgrade to one of its anchor desktop apps. the big news here is that for the first time, Adobe’s PDF-creating desktop software will supports Flash. So people can now create documents with embedded Flash movies from YouTube, or developers can design entire new skins for electronic documents using Adobe’s Flex framework—the same programming tool they use to create Web applications.

PDF documents made with Acrobat 9 also support collaboration among multiple authors and reviewers over the Internet, making them connected documents. Best of all, they no longer take forever to load. The next step is for Adobe to make it easy to turn any PDF into a Web page, and vice versa.

This is the biggest news for me. Acrobat.com itself is a very nice integration of Buzzword, ConnectNow, PDF, and Share. It feels quite snappy (despite the "loading..."), and there are a lot of nice animations of course. A good showcase for Flex.

Pete Higgins of Dojo has created a nice example, dojo.workers, that puts together coverflow with Dijit and some dojo.query animations.

He even takes out his frustrations with IE 6 as he creates a branch that looks like this ;)

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:

Ben and I gave a presentation at JavaOne on what's new with Ajax. Since this was JavaOne, we skewed a little more than we normally would to Java topics, and one of them was using the new Java Plugin, that has great new features such as being able to take a running applet out of the web page, and having it continue to live after shutting down the browser. Java is running out of process here, which also helps the "Java crashing the entire browser" problem.

Anyway, back to our demo. For some context, last year at JavaOne had us performing Guitar Hero on stage, so we knew that we had to use a gaming console in some way. This year it had to be the Wii, but instead of using the console, we decided to just use the controllers.

Wouldn't it be cool to control a Web page using the controllers? We thought so, and we set to it. You can talk to the Wiimotes via Bluetooth, so we needed a stack that would allow us to do just that. Java has a bluetooth stack. We could get an applet to talk to the Java stack. Hmm.

It actually took quite some time to test out the various stacks out there. In the end we went with a native system called Wiiuse that a lot of Wii hackers use. There is a wrapper library called Wiiusej that gave us exactly what we needed.

A quick test later and we had an application that was talking between the remote and the program. It turns out that the main controller sees a series of IR lights that are in the Wii sensor bar, and this allows you to simulate the system with any decent IR source. In the presentation room the big lights that shine on stage were strong enough to act as a sensor bar so we won't even have to use it. We can just point out to the crowd.

Anyway, back to the application. We then wrote a Java class that acts as a state machine for what the remote is doing. It understands the movements, which buttons are pushed, how fast you are moving the device. With this data we could build a simple darts game. With the state machine Java code, and an Applet wrapper that exposed the information, we were ready to get to the Ajax side of the house.

We painted a darts board onto the screen and then had JavaScript start polling the Applet for information via JSObject (As simple as: document.nameofapplet.pollmethod()). This turned out to be more stable than talking the other way, even though it meant we were polling instead of being entirely event driven. When the JavaScript code polled the applet it would pass back a data structure with the data for the coordinates of the remote, and whether the dart had been fired (button A to fire, button B to reload). We would move the dart image on the screen as you move the remote, and when fired we kicked off an animation to fire the dart at the board.

At first, it was all too simple. You setup the shot and it would get the right area every time. Not a fun game. We then decided to add some simple physics to the Ajax game. We took into account the velocity of the throw (if weak it would fall down) and how straight your shot was. If you wiggle around, the dart will not be accurate.

Anyway, this was a lot of fun, and shows that as much as we mock Java applets, if we forget about using them as fancy blink tags, and instead think of them as more extension points, maybe there is life for them.

The video below shows you a demo of the application, the source code with an explanation, and more details.

PPK has published new event compatibility tables that test the event registration models (traditional, W3C and Microsoft) as well as event bubbling and capturing.

There is a lot of data here on the quirks of the various browsers.

Vishal Shah has put together TPHP, which stands for "The Perfect Home Page". It is just an HTML page with a bunch of JavaScript in it, that acts as a command line to a lot of things.

You can type in special codes to do smart things like search wikipedia, access domain tools, or what have you.

Of course, this is primitive compared to something like Enso, which was made open source when the team went to Mozilla. It is also now running on Mac and Linux, and it has the feeling that it could be a nice companion to the browser as a command line.

When I hear "email marketing" I can't help but think spam, but it is a legit tool too, and the latest tool in the pack is Mad Mimi.

Mad Mimi launched this week and consists of "state-of-the-art UI design makes for layouts that are easier to
create -– and easier to read – than emails generated by Constant Contact, Emma and others, who rely on rigid templates and cluttered,
dated layouts."

Mad Mimi's "modules-based" interface allows users to add picture and text fields, drag them around and add captions, links and dividers. Embedded constraints gently guide the layout, keeping the "designer" from getting into trouble, but providing more plasticity than templates.

The result: a fluid, flexible user interface, and clean, fashionable "Mimi-generated" promotions that represent a fresh approach to email marketing – at a subscription price that trumps the competition.

When I saw that Tobie Langel was on the team, I had to check it out. When you give it a spin you will be able to add images, and then use them to build out your email. There are some really nice subtle features such as the undo support.

I had a funny feeling that we would see frameworks and tools starting to support Google App Engine. Appcelerator has added support into their SDK, so you can now create an App Engine project.

They just ported Tejus’s appTunes demo to the App Engine and deployed it at http://apptunes.appspot.com.

The example uses embedded Flex components and sound.

If you take a look at the source, you will see the declarative markup that Appcelerator goes for: