The Found Corporation

Featured content from Ajaxian » Front Page

Displaying 10 most recent entries.

Ambilight Sample; video and canvas 12 Mar 2010

ambilight

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:

JAVASCRIPT:
  1.  
  2. function getMidColors(side) {
  3.         var w = buffer.width,
  4.                 h = buffer.height,
  5.                 lamps = getOption('lamps'),
  6.                 block_width = getOption('block_size'),
  7.                 block_height = Math.ceil(h / lamps),
  8.                 pxl = block_width * block_height * 4,
  9.                 result = [],
  10.  
  11.                 img_data = buffer_ctx.getImageData(side == 'right' ? w - block_width : 0, 0, block_width, h),
  12.                 total_pixels = img_data.data.length;
  13.  
  14.  
  15.         for (var i = 0; i <lamps; i++) {
  16.                 var from = i * w * block_width;
  17.                 result.push( calcMidColor(img_data.data, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) );
  18.         }
  19.  
  20.         return result;
  21. }
  22.  

Then, two canvas objects are placed, one on each side, of the video itself.

YQL Geo library – all your geo needs in pure JavaScript 11 Mar 2010

I just finished doing some talks on geo hacking (slides are available here) and how to use some of the Geo technologies Yahoo and Google provide as part of a University gig in Atlanta.

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

  • Detecting the visitor's location with the W3C geo API and with IP as a fallback
  • Find geo location from text
  • Find location from lat/lon pair
  • Find locations in a certain web document (by URL)
  • Get the location for a certain IP number

And all of that in pure JavaScript. For example:

JAVASCRIPT:
  1. yqlgeo.get(
  2.   'paris,fr',
  3.    function(o){
  4.      console.log(o);
  5.   }
  6. )

Will get you:

JAVASCRIPT:
  1. "place":{
  2.   "lang":"en-US",
  3.   "uri":"http://where.yahooapis.com/v1/place/615702",
  4.   "woeid":"615702",
  5.   "placeTypeName":{
  6.     "code":"7",
  7.     "content":"Town"
  8.   },
  9.   "name":"Paris",
  10.   "country":{
  11.     "code":"FR",
  12.     "type":"Country",
  13.     "content":"France"
  14.   },
  15.   "admin1":{
  16.     "code":"",
  17.     "type":"Region",
  18.     "content":"Ile-de-France"
  19.   },
  20.   "admin2":{
  21.     "code":"FR-75",
  22.     "type":"Department",
  23.     "content":"Paris"
  24.   },
  25.   "admin3":null,
  26.   "locality1":{
  27.     "type":"Town",
  28.     "content":"Paris"
  29.   },
  30.   "locality2":null,
  31.   "postal":null,
  32.   "centroid":{
  33.     "latitude":"48.856918",
  34.     "longitude":"2.341210"
  35.   },
  36.   "boundingBox":{
  37.     "southWest":{
  38.       "latitude":"48.658291",
  39.       "longitude":"2.086790"
  40.     },
  41.     "northEast":{
  42.       "latitude":"49.046940",
  43.       "longitude":"2.637910" 
  44.     }
  45.   }
  46. }

Other uses:

This gets the name and the country of a lat/lon pair:

JAVASCRIPT:
  1. yqlgeo.get(33.748,-84.393,function(o){
  2.   alert(o.place.name + ',' + o.place.country.content);
  3. })

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

JAVASCRIPT:
  1. yqlgeo.get('visitor',function(o){
  2.   alert(o.place.name + ',' + o.place.country.content + 
  3.         ' (' + o.place.centroid.latitude + ',' +
  4.                o.place.centroid.longitude + ')'
  5.         );
  6. });

Read all about it on my blog and enjoy!

SVG Wow! 11 Mar 2010

Erik Dahlström and Vincent Hardy have put together a cool website, called SVG Wow!, that showcases SVG doing things you didn't expect SVG can do:

svgwow1

There are alot of unique demos on there.

One of my favorites uses SVG, HTML5 Audio, Web Fonts, and YUI to play music accompanied by flying animated lyrics (Chrome and Safari only):

svgwow2

There are lots of other great samples for you to play with and study!

Ext JS 3.2 beta: stores, components, transitions, and themes 10 Mar 2010

The Ext JS team have announced the 3.2 beta which includes new components and goodness.

Take the animated DataView transitions for example:

On top of that, the release includes:

CSS3 Please! Instant results… Thank You 10 Mar 2010

css3please

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

  • border-radius
  • box shadow
  • gradients
  • rgba support in backgrounds
  • transforms
  • font-face

Really nice way to make tweaks inline in the page..... nicely done. Hope to see some other examples out there :)

HTML Minification 10 Mar 2010

Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage.

What does it do?

Kangax has forked John Resig's HTML parser which parses the HTML and sends that into the Minifier. This has rules that do things like whitespace optimization, comment removal, and collapsing boolean attributes (e.g. disabled="true" -> disabled).

He also has a linter going:

While working on minifier, I realized that oftentimes the most wasteful part of the markup is not white space, comments or boolean attributes, but inline styles, scripts, presentational or deprecated elements and attributes. None of these can be simply stripped, as that could affect state of the document and is just too obtrusive. What can be done, however, is reporting of these occurences to the user. HTMLLint is even a smaller script, whose job is exactly that—to log any deprecated or presentational elements/attributes encountered during parsing. Additionally, it detects event attributes (e.g. onclick, onmouseover, etc.). The rationale for this is that moving contents of event attributes to external script allows to take advantage of resource caching.

Harmony: Canvas Drawing Tool 10 Mar 2010

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.

harmony

(Thanks FND)

Spectrum Visualization with the HTML5 Audio Data API 9 Mar 2010

The HTML5 specification introduces the

The above quote is from the Audio Data API extension that joins a bunch of juicy developer work in Firefox 3.7.

Thomas Sturm has taken that API and created a spectrum visualization a kin to some of the great work by Scott Schiller (using Flash).

There is a new onaudiowritten attribute:

HTML:
  1.  
  2. <audio src="song.ogg" controls="true"
  3.            onaudiowritten="audioWritten(event);">
  4. </audio>
  5.  

that lets you get access to info such as the spectrum:

JAVASCRIPT:
  1.  
  2.       function audioWritten(event) {
  3.         spectrum = event.mozSpectrum;
  4.        
  5.         var specSize = spectrum.length, magnitude;
  6.        
  7.         // Clear the canvas before drawing spectrum
  8.         ctx.clearRect(0,0, canvas.width, canvas.height);
  9.        
  10.         for ( var i = 0; i <specSize; i++ ) {
  11.           magnitude = spectrum.item(i) * 4000; // multiply spectrum by a zoom value
  12.          
  13.           // Draw rectangle bars for each frequency bin
  14.           ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
  15.         }
  16.       }
  17.  

Add to that the ability to write audio....

JAVASCRIPT:
  1.  
  2. var audioOutput = new Audio();
  3. audioOutput.mozSetup(2, 44100, 1);
  4.  
  5. var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
  6. audioOutput.mozAudioWrite(samples.length, samples);
  7.  

Nice work all around.

modulr: a CommonJS module implementation in Ruby for client-side JavaScript 8 Mar 2010

modulr is a CommonJS module implementation in Ruby for client-side JavaScript

Ruby? what does that have anything to do with it? Ah, its from one of those Prototype guys isn't it.... Yup, Tobie is at it again, this time with modulr:

modulr accepts a singular file as input (the program) on which is does static analysis to recursively resolve its dependencies.

The program, its dependencies and a small, namespaced JavaScript library are concatenated into a single js file.

The bundled JavaScript library provides each module with the necessary require function and exports and module free variables.

This can also help sharing that CommonJS code. I recently did just that and had some:

JAVASCRIPT:
  1.  
  2. // check to see if you are running inside of node.js and export if you are
  3. if (typeof GLOBAL == "object" && typeof GLOBAL['node'] == "object") {
  4.     exports.Appetite = Appetite;
  5. }
  6.  

Friday fun: Let’s translate YUI3 to jQuery 5 Mar 2010

I just came across this wonderful Gist on gitHub:

JAVASCRIPT:
  1.  
  2. var $;
  3. YUI().use('*', function(Y){
  4.   $ = Y.get;
  5.   for(var p in Y) {
  6.       $[p] = Y[p];
  7.   }
  8. });
  9.  
  10. // test
  11. $('body').append("boo!");
  12.  

In case you want to use YUI3 but really really like jQuery syntax :) OK, it breaks the whole sandboxing idea of YUI3, but that's a small price to pay, right?

Page created in 0.264 seconds.