Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.
Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:
The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.
You can also save images using data URI encoding.
As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.
Bastian Allgeier has developed a beautiful, native looking web application called ZooTool.
Zootool is a visual bookmark tool for images, videos, documents and links. It is completely based on Mootools, even though it looks more like a Cappuccino app!
eBooks have gone mainstream, and right now the open ePub format is getting a lot of attention, being the iPad’s book format of choice. Often overlooked in gadget-centric media is the fact that ePub is based on web standards, and therefore amenable to being rendered in the browser, sans plugins. Pure Javascript ePub readers are starting to crop up, and Keith Fahlgren has written about several of them:
Just in the last few days, details emerged of two new JavaScript ePub readers, rePublish from Blaine Cook (@blaine) and JSEpub (screenshot) from August Lilleaas (@augustl). These two new readers join @liza’s epubjs, which will be a year old on Tuesday. An improved version of epubjs powers the ePub Zen Garden, which helps “dispel the myth that digital books can’t also be crafted works of visual design.”
All are open source, and as Keith notes in the comments, there’s also the commercial BookGlutton project. BookGlutton (which we covered earlier) shows the promise of browser-based eBooks: it lets you embed books as lightbox-powered widgets, and supports annotation.
EPUB consists of three specifications:
Open Publication Structure (OPS) 2.0, contains the formatting of its content.[5]
Open Packaging Format (OPF) 2.0, describes the structure of the .epub file in XML.[6]
OEBPS Container Format (OCF) 1.0, collects all files as a ZIP archive.[7]
Basically, EPUB internally uses XHTML or DTBook (an XML standard provided by the DAISY Consortium) to represent the text and structure of the content document, and a subset of CSS to provide layout and formatting. XML is used to create the document manifest, table of contents, and EPUB metadata. Finally, the files are bundled in a zip file as a packaging format.
In the case of unzipping, Keith points out the inflate library has been around since 1999. One can imagine other applications for zip too; for example, it’s often used as a format for bundling code (Java JARs, Python Eggs, Firefox and Chrome extensions), so reliable unzipping makes it possible to build browser-based IDEs and exploration tools against such archives.
Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here!
At Google I/O the team showed a demo of YouTube running video right in the browser, instead of in the rectangle of Flash.
Now, that URL takes you to the beta, which you can opt-in too. I am torn on what to write on this showcase though.... so, especially since it is Friday, here are two takes:
Open Web Advocate
It is fantastic to see a massive site - the poster child of Flash video - implement HTML5 video. If you want to piss of an Adobean ask them "how do you feel about YouTube folks making millions off of the back of your work. Surely you got a bunch of license money... oh wait."
This is the first step for YouTube, and now that video is a native experience in the browser they can innovate in really interesting ways.
One bonus feature for trying the beta: "Videos with ads are not supported" :)
The Other Guy
It is great to see YouTube showing off HTML5 support, however you will notice that it only works in the Safari/Chrome world (saying it works in IE via ChromeFrame is cheating) due to the fact that YouTube only supports H.264 and hasn't done Ogg. Sure it would take a lot to get Ogg support at that scale, but it would also help the cause a lot.
When you test it at this early stage you also see that there isn't HD support or much of the other features of the Flash player, so instead of showing off how the experience can be better..... it is in catch up mode. Features such as full screen aren't even an option yet of course. We need to move faster.
I am looking forward how things play out over time. What guy are you today?
The example uses Ext JS web desktop and the code created delivers a special Panel that is able to deliver video, and then the simple act of grabbing a video frame and scaling it down for the tooltip:
We knew that we needed VCS support for Bespin. We also knew that we wanted to have support that is richer than just having command line access. Since we are in a rich UI environment we can do more, and one of the features I was excited to play with was diff visualization.
Well, the Atlassian FishEye crew just popped up with a preview of side by side diffs in the browser and the looks great, similar to FileMerge and the like. Pete Moore takes us on a walk through:
Phil Rabin of CBC Radio 3 has kindly written a guest post on his experience creating a fantastic Web interface for the station that uses Flash for audio, but a full HTML experience that maintains state from page to page.
CBC Radio 3 is a community, radio station and user-generated independent music library which is a small department of the Canadian Broadcasting Corporation. When the CBC Radio 3 web team was called upon to rebuild the site we were confronted with the technical problem of having an uninterrupted music experience for our users. The old design of the site (see image) achieved this by embedding a flash player in the body with the content being served through a statically positioned iframe in the center of the page. Radio 3's content offerings were outgrowing the design so we went with a full page 1000px-wide layout with the player resting in the page. This created an obvious hurdle being that with a fresh page load comes a bad listening experience like myspace where a single wrong click breaks the audio. Also, not having popup player was a design decision that was made to give the website a more integrated feel.
We decided to completely removed flash from the UI equation and went full html/ajax because we found that it offered more flexibility and play with the page. The hardest part was figuring out a way to maintain state on each page load while keeping the audio continuous.
We went with an old-school frameset to create a type of inter-frame communication with the top level frameset acting as the orchestrator/bootstrapper. The visible "UI Controller" frame is completely blown out with the stateful player frame hidden from view.
The stateful player frame contains hidden swfs to handle playing audio and connecting to RTMP for our live streaming. All the communication in and out of flash is handled by a couple gateway javascript classes to abstract out the flash from the rest of the application.
Here's an example of a communication gateway for wrapping the events coming to and from flash. The event objects are native flash event objects that get sent by Flash's ExternalInterface and come in as JSON that can:
An instance of the gateway has to be maintained by the player application because events coming from flash have no context. This way the application classes can subscribe to events coming from flash like this:
At the core, audio is always played by Flash. The swfs broadcast events, such as audio head position and download progress of mp3s, and connection, streaming, meta data events from RTMP. Those events get passed on the instance of the hidden stateful player.
Since the server frame is only loaded once when the site first loads, an instance of the stateful server player is instantiated for the entire session on the site. On each client frame page load, the server player instance is "injected" into the visible client UI controller by the "bootstrapper" top frame. State is maintained in that instance which allows for the controller to query the state of that object and reestablish everything like which track is playing, progress, time, thumbs up or down status, shuffle, play mode (stream or individual mp3 and playlists), etc. Everything had to be covered like if an mp3 was in mid-load when someone browsed to a new page, the loading progress had to pickup on the next page. Here's a example of the bootstrapper code contained in the frameset:
We used Prototype/Scriptaculous as the base for the entire site. All the AJAX communication is handled with asp.net web services with scripting enabled. ASP.NET takes care of all the serialization of DTO's (Data Transfer Object) into JSON which are specific to the player application.
All of the classes in the application are written using Prototype's Class/inheritance model. Most of the classes subclass from a base EventDispatcher much like AS3, which is adapted from Matthew Foster's example for Prototype and our own custom Event model. This allows for a nice separation of concerns and decoupled classes throughout the application and allows the UI Controller to add event listeners to custom events coming from the server player instance.
for(var i = 0; i <this.listenerChain[type].length; i++)
if(this.listenerChain[type][i] == listener)
this.listenerChain.splice(i, 1);
},
clearEventListeners:function()
{
this.listenerChain = {};
},
dispatchEvent:function(type, data, target)
{
var event = new CBCR3.Commons.Event(type, data, target || this);
this.buildListenerChain();
if(!this.hasEventListener(type))
returnfalse;
this.listenerChain[type].any(function(funct){
return(funct(event) == false ? true : false);
});
}
});
This also allows the UI Controller to unsubscribe from all events when the page unloads. This was key in memory management and so that we don't get orphaned references to instances of the UI Controller.
The most difficult part of the whole player project was re-establishing state of the controller on every page load. We hoped that we could implement some sort of state-pattern with no luck. In the end, the UI controller contains a couple monster resume methods that we haven't been able to abstract out of that class. We'd like to bring in some sort of MVC architecture that wires up the UI player view to a state object. Any suggestions would be welcome! Go check out the site and give us some feedback!
Dion: I then asked Phil about the CBCR3 library and he replied
CBCR3 is the base namespace for all th javascript controls and apps written for the site. Everything for the player is in CBCR3.Player, the concert calendar is CBCR3.Gigs, etc. We have a shared base lib which is in CBCR3.Commons.
An issue with Prototype that we had was some bug with including 1.6.1 in a frameset in Opera. So, right now the frameset is holding an older version of prototype while the frames have the latest. One thing that Prototype was seriously lacking was Date extensions. (like addDay, addMonth, addWeek) etc.
We ended up going with YUI's DateMath widget for that which really smoothed out working with dates.
Most of the issues we had cross-browser stuff was with IE6 (no surprise), which were almost all related to CSS rendering bugs, and IE DOM manipulation problems. A big one was upon the dynamic removal of items from lists. IE has a real hard time refreshing the positions of items. We had to write methods like
this would in effect "nudge" the browser and force it to update the position of the remaining DOM elements. In the end, we chose to drop IE6 support and to tell you the truth, we haven't heard a single complaint about it!
Aaron Miller and his team have released BookGlutton an online bookstore and social network meant to facilitate social reading. It features a Dojo-driven e-book reading app with chat and annotation, and the store now offers over 500 O'Reilly titles for sale.
The site is built using Dojo and PHP and features pagination, real-time chat, group and private modes and asynchronous annotation of each paragraph in a book. It can be embedded in other sites as a widget, and is one of only a few web-based apps which can read the open, reflowable e-book format known as ePub.
The CSS Ninja has created a Font Dragr drag and drop font tester:
Font dragr is an experimental web app that uses HTML5 & CSS3 to create a useful standalone web based application for testing custom fonts, once you visit it for the first time you don’t need to be online to use it after the initial visit. It allows you, in Firefox 3.6+, to drag and drop font files from your file system into the drop area. The browser will then create a data URL encoded copy to use in the page and render the content in the dropped font.
Used in the app:
HTML5
Offline access applicationCache
Drag and drop API
File API
contenteditable attribute set to true so the text can be edited.
Atlassian has created a new JIRA Interactive Tour that walks you through the application, live. We have seen a couple of these before, and this one is really cool. It is one thing watching a screencast of an application that you want to learn, but having an assistant that helps you inside the live app itself is the next level.
Thanks to the Web being so malleable, it is also a hell of a lot easier to do this than with other technologies!
Congrats to the Atlassian crew for such a nice showcase.
Apple has a fair amount of video on their site, and now you will find it displayed via <video> As always, it looks very nice indeed. The video controls look very much like the new Quicktime X:
Aaron Newton of MooTools fame is now at Cloudera, the awesome Hadoop startup, and has posted about the rich Cloudera Desktop project he has been working on.
In the post he discusses the implementation and how it uses new features in the new MooTools 1.2.4 release such as:
MooTools Depender
MooTools ships with a dependency map that powers its download builder. The modular nature of the library yields itself to custom builds, putting together a library specific to the task at hand. This allows MooTools to power, for instance, a mobile application with only a small amount of JavaScript. For the Cloudera Desktop, we knew we were going to end up with a LOT of JavaScript, and loading it all on startup didn’t make much sense. Instead, we authored the Depender application. It’s an easy-to-deploy, real-time library builder and dependency mapper. This allows our application to load with a minimum of JavaScript. When users launch specific applications, Depender loads any dependencies for that app that aren’t loaded already, and then display the application. In addition to the server side component (available in both PHP and Python/Django), there are two client side components: a stand alone version to be released in MooTools 1.2.4 and a server side application that ships with a client that talks to the server for you, which lets you do this slickness:
scripts: ['DatePicker', 'Logger'], //array or single string for one item
callback: function(){
//your code that needs DatePicker and Logger
}
});
//later, you need to load more dependencies...
Depender.require({
scripts: 'Fx.Reveal', //array or single string for one item
callback: function(){
//if, for some reason, Fx.Reveal is available already,
//then this function will exeute immediately, otherwise it will
//wait for the requirements to load
$('someElement').reveal();
}
});
MooTools ART
MooTools at the moment doesn’t have an official, public UI system, but that’s changing, and in no small part due to our contributions to the MooTools ART project. MooTools ART is an in-development UI library that currently outputs canvas. It’s an abstraction of the canvas API and it allows developers to make style-able UI elements like buttons, windows, and icons. At the moment it only outputs to canvas (limiting its support to browsers other than Internet Explorer), but we’re working on wrappers for VML and SVG.
In addition to these drawing tools provided by the ART API is a widget-based system that has numerous features including keyboard management, event bubbling, custom styling, and more. This widget system is the foundation for many of our UI elements, though not all of them. While the basic ART API was developed by the core MooTools Team (of which I am a part), we’ve contributed most of the widgets available in the library built with that API, including a window manager, a history interface, pop-ups for alert, confirm, and prompt, split views and more.
What are the major changes in MooTools 1.2.4?
Browser feature detection favoured over browser user agent sniffing
Added Trident 6 (IE8) detection
Request can take an instance of URI as a url
JSON.stringify and JSON.parse native methods are now accessible
DomReady always fires before load event
Fix for creating a Request in early versions of IE6
As soon as we developed Bespin we wanted a world where we could create an application in the editor and see it live... and then edit it all live too! Server-side JS makes this quite possible.
Clamato is experimenting in this way too, albeit slightly differently:
Clamato is a Smalltalk dialect that is designed to operate within the JavaScript runtime. (For non-Canadians: “clamato” is what you get when you add clams to tomato juice. Some consider this an unholy mixture; others, a tasty treat.)
You have to see it in action to appreciate it. Browse over to the tutorial to tweak the live application on the fly. Fun!
