I'm also working on something like the ToneMatrix or Tenori-on (Flash and actual devices, respectively) in pure HTML/JS. It works too, but the sounds aren't exactly designed to be great together (it's currently working on a C scale) and so if you're careful, you can get some decent sound but otherwise, it'll hurt your ears.
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:
Content extraction is still a hot topic on the web. We have lots of great text content but not much clue as to what those texts are. To make it more obvious we do term extraction for tagging but also geo location extraction for giving the text some spacial reference.
A fairly new web service that does this for us is Yahoo's Placemaker. What it does is analyze a text (or the document defined by an HTML or feed URL) and give you back all the geographical locations that are mentioned in it. Pretty awesome, but the problem is that the API only allows for POST values and has either XML or RSS output. This means you can't do it in simple XHR because of the cross-domain problem and you can't use generated script nodes as there is no JSON output. You'd have to use a server-side proxy service. This is pretty easy with PHP and cURL as explained in this blog post but can be annoying, too.
That's why I wrote a small wrapper in JavaScript that allows JS access to the Placemaker service called JS-Placemaker. I am not hosting a proxy for you, all you need to do is get your own application ID for Placemaker and use the JavaScript which you can host yourself if you wanted to.
Analyzing a text using JS-Placemaker is as easy as this:
Placemaker.getPlaces('Hi I am Chris, I live in London. Originally I am from Germany',
function(o){
console.log(o);
},
'en-uk');
The console output is an object or an array of places the service returned from the text:
The first parameter is the text you want to analyze (this could be a pointer to the innerHTML of a DOM element, for example), the second is the callback function and the third the locale of the text - the demo page shows that Placemaker groks several languages.
Under the hood, JS-Placemaker uses YQL to work around the issue of proxying the request. YQL allows you to define your own data tables and even allows for doing JavaScript conversion of data on the server-side before sending it on. YQL has JSON output, so I was able to use that to access Placemaker in JavaScript.
The geo.placemaker Open Table was built by Balaji Narayanan and Tom Hughes-Croucher and can be used in YQL directly. Say you want to get the geo location data from the Slashdot Homepage in JavaScript, you can do this with the following statement in YQL.
I am a big fan of YQL, a terribly easy and fuss-free way to access APIs and mix data retrieved from them in a simple, SQL style language. Say for example you want photos of Paris,France from Flickr that are licensed with Creative Commons attribution, you can do this with a single command:
select * from flickr.photos.info where photo_id in (select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='paris,france') and license=4)
One thing that's been burning on my tongue to tell the world about has been finally released now: YQL execute. Instead of making the YQL language itself much more complex (and thus running in circles) we now allow you to embed JavaScript in the Open Table XML that will run on the YQL server and allow you to access other web services, authenticate and scrape HTML with JavaScript and E4X. As Simon Willison put it:
This is nuts (in a good way). Yahoo!’s intriguing universal SQL-style XML/JSONP web service interface now supports JavaScript as a kind of stored procedure language, meaning you can use JavaScript and E4X to screen-scrape web pages, then query the results with YQL.
Using this, you can augment the original functionality of YQL to whatever you need. For example, you can scrape HTML with YQL using XPATH, but there was no way to use CSS selectors. Using an open table that invokes James Padolsey's css2xpath JavaScript on the server side, this is now possible.
use 'http://yqlblog.net/samples/data.html.cssselect.xml' as data.html.cssselect; select * from data.html.cssselect where url="www.yahoo.com" and css="#news a"
Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.
Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.
How did Paul do this? He told us:
Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a <canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.
A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.
When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.
Here are key things that occur during the main loop:
first, the content of the video is injected in the main canvas. That's why
the canvas element looks like a video element;
second, the position of the 2 brighter areas of the canvas are computed
(you have access to all pixels values);
third, the required transformation is computed (rotation, scale,
translation);
fourth, the content of the selected pattern is injected in the main canvas
following the transformation.
Paul Hayes is off doing more fun things, this time creating an auto scrolling parallax effect with CSS, specifically using multiple background images on a single element and the -webkit-transition property to provide the auto-scrolling.
If you ever go to the BBC website you will see the working clock in the top right:
It thus seems appropriate that Paul Hayes of London has created an interesting experiment that shows how you can create an analogue clock using just CSS and JavaScript is only used to get the current time.
Yvo Schaap has created a reasonably interesting real-time front-end to Reddit data over at erqqvg.com. It's actually a really cool visualization of how Reddit's stories change over time, with "yellow-fade" indications when new comments and votes and registered. Super-nice.
(The screenshot doesn't do it justice; go check it out.)
But that's only half the story. They've got a much-better-named service called "Vizeddit" that displays the same data with much richer graphics and animations:
Once again, you really need to go see it. The numbers along the bottom represent stories, and they grow and swap places over time, new ones are inserted, and so forth. You see the votes drop down in real-time, and new comments float in as well.
The main findings of the team were that eval() is not only evil but also very slow whereas dynamic script nodes are fast but insecure. The solution was to do a custom evaluation of string data rather than using JSON:
Having set the performance bar pretty high with the last approach, we dove into custom data formats. The challenge would be to create a format that we could parse ourselves, using JavaScript’s String and RegExp methods, that would also match the speed of JSON executed natively. This would allow us to use Ajax again, but keep the data restricted to our domain.
Since we had already discovered that some methods of string manipulation didn’t perform well on large strings, we restricted ourselves to a method that we knew to be fast: split(). We used control characters to delimit each contact, and a different control character to delimit the fields within each contact. This allowed us to parse the string into contact objects with one split, then loop through that array and split again on each string.
for(var n = 0, len = that.contacts.length, contactSplit; n <len; n++){
contactSplit = that.contacts[n].split("\\a");
that.contacts[n] = {};
that.contacts[n].n = contactSplit[0];
that.contacts[n].e = contactSplit[1];
that.contacts[n].u = contactSplit[2];
that.contacts[n].r = contactSplit[3];
that.contacts[n].s = contactSplit[4];
that.contacts[n].f = contactSplit[5];
that.contacts[n].a = contactSplit[6];
that.contacts[n].d = contactSplit[7];
that.contacts[n].y = contactSplit[8];
}
Once this had been speeded up, all they needed to use was the YUI AutoComplete control and voilà - fast client side searches even with massive datasets.
Ryan Morr has created a really fun experiment that shows the versatility of JavaScript. He just announced Aurora, fun times with class types and invariants in JavaScript.
He introduces the project:
The goal of the project is to provide a means of defining instance variables bound to a specific data type as you would find in Java or a variety of other languages. All subsequent calls to the methods of the instance result in automatic variable validation after the method call is complete. If a type violation is found, a descriptive exception is thrown and that specific variables value will be reverted back to what it was before the method call took place.
In addition to that, there is added support for class invariants, inspired by Eiffel, each class can declare a set of invariants for each instance variable which outlines the rules of that variable. For example, a variable called month in the class calendar must be an integer between the values of 1 and 12, if that rule is broken an exception is thrown.
The main pieces are:
Data Types: E.g., items: [Object], collection: Array(Element). You can create your own via define: Aurora.define('Hash', Aurora.isHash);
returnthis.year>= 1 && this.year <= new Date().getFullYear();
}
}
Classes: The declare method is used to define a new class and has a similar syntax to the dojo.declare method. The method can accept either two or three arguments depending on whether the new class will inherit from a superclass.
Inheritance: Classical inheritance is also supported and maintains the same behaviour and functionality that you would expect. However, in additon to the inherited methods and the ability to call superclass methods, both declared types and invariants of a superclass will also be inherited by all subclasses.
Exceptions: Whenever a violation occurs, whether it be a type or invariant violtation, an exception is thrown that indicates the type of violation, the class and method in which the violation occurred, the variable that failed the validation, and in the case of type violations the expected type.
Jacob is back, and this time he has a cheat sheet with him. It is nice to see the Canvas API fitting on one sheet here, and I really like the images showing how things look like and work.
Ryan Doherty has one of those really nice articles that walk you through how to do something that should be easy in CSS but isn't, until you know how: Cross Browser Inline Block.
