Activate your free membership today | Log-in

Thursday, March 11th, 2010

YQL Geo library – all your geo needs in pure JavaScript

Category: Geo, JavaScript, Library

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!

Posted by Chris Heilmann at 10:04 am
Comment here

+++++
5 rating from 1 votes

SVG Wow!

Category: SVG

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!

Posted by Brad Neuberg at 5:35 am
Comment here

++++-
4.3 rating from 10 votes

Ext JS 3.2 beta: stores, components, transitions, and themes

Category: Ext

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:

Posted by Dion Almaer at 1:12 am
2 Comments

+++--
3.6 rating from 19 votes

Wednesday, March 10th, 2010

CSS3 Please! Instant results… Thank You

Category: CSS, Examples

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 :)

Posted by Dion Almaer at 8:39 am
5 Comments

+++--
3.8 rating from 21 votes

HTML Minification

Category: HTML, Performance

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.

Posted by Dion Almaer at 6:14 am
16 Comments

+++--
3.7 rating from 28 votes

Harmony: Canvas Drawing Tool

Category: Canvas, Showcase, iPhone

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)

Posted by Michael Mahemoff at 4:50 am
5 Comments

++++-
4.6 rating from 42 votes

Tuesday, March 9th, 2010

Spectrum Visualization with the HTML5 Audio Data API

Category: Sound

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.

Posted by Dion Almaer at 6:20 am
3 Comments

++++-
4.2 rating from 20 votes

Monday, March 8th, 2010

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

Category: JavaScript, Ruby

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.  

Posted by Dion Almaer at 6:28 am
7 Comments

++---
2.3 rating from 30 votes

Friday, March 5th, 2010

Friday fun: Let’s translate YUI3 to jQuery

Category: Library, YUI, jQuery

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?

Posted by Chris Heilmann at 8:52 am
14 Comments

++---
2.1 rating from 60 votes

Firefox gets hardware acceleration in early stage

Category: Browsers, Performance

Bass Schouten is a cool name, and the Mozillan has presented Direct2D hardware acceleration.

You have to grab Firefox nightly, do the about:config / gfx.font_rendering.directwrite.enabled game, but then you get to see it in action.

IE9 showed off how they will support hardware rendering, and I am sure we will see more at MIX, but it is very cool to see this across the board.

CSS Transforms/Transitions/Animations are going to feel like butter in 2010!

Posted by Dion Almaer at 6:25 am
9 Comments

++++-
4.6 rating from 25 votes

Thursday, March 4th, 2010

Color Picker: Works even in IE6

Category: Component

Works even in IE6

Love that quote from the color picker over at RaphaelJS land. This plugin by Dmitry Baranovskiy gives you an easy color picker in short order:

JAVASCRIPT:
  1.  
  2. var icon = Raphael("picker", 23, 23).colorPickerIcon(11, 11, 10);
  3.  
  4. icon.attr({cursor: "pointer"}).node.onclick = function () {
  5.     document.getElementById("benefits").style.visibility = "visible";
  6.     var out = document.getElementById("output");
  7.     out.style.visibility = "visible";
  8.                
  9.     // this is where colorpicker created
  10.     var cp = Raphael.colorpicker(document.body.offsetWidth / 2 - 150, 250, 300, "#eee", document.getElementById("picker2"));
  11.                
  12.     out.onkeyup = function () {
  13.         cp.color(this.value);
  14.     };
  15.     // assigning onchange event handler
  16.     cp.onchange = function (clr) {
  17.         out.value = clr;
  18.         document.body.style.background = clr;
  19.         document.body.style.color = Raphael.rgb2hsb(clr).b <.5 ? "#fff" : "#666";
  20.      };
  21.      // that’s it. Too easy
  22.                
  23.      icon.node.onclick = null;
  24. };
  25.  

colorpicker

Posted by Dion Almaer at 6:02 am
20 Comments

+++--
3.4 rating from 35 votes

Wednesday, March 3rd, 2010

Touching Cloth; Canvas Fu

Category: Canvas

Andrew Hoyer shows his canvas Fu with Cloth, a great experiment using nice physics.

cloth

What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out every little detail that slows things down.

The most computationally expensive part is trying to satisfy the constraints. To do this requires the calculation of distance between two points. This is easy to do with a little math, but that often involves an expensive square root. This is something that cannot simply be thrown out either, so what do you do? You approximate it. There are lots of mathematical tools for approximating functions, in this case I chose the first couple terms of a taylor expansion.

Check out his fast vector, constraints, and finally the cloth itself.

Posted by Dion Almaer at 6:12 am
19 Comments

++++-
4.8 rating from 61 votes

Tuesday, March 2nd, 2010

Fin: self updating template language

Marcus Westin has created a new templating language called fin. It is an interesting beast, and he gave us a run down:

Since this past November I've been working on a realtime templating system I call "fin". I'd love to get some eyes on it, and hope that you'll find it exciting. There is no demo, but quite a bit of information and if you're on OS X it's trivial to get the system set up on your own machine.

The basic idea is this... Rather than describing your data, you describe how you want your data to be viewed. Fin takes it from there in terms of persisting new data as it gets created. In addition, all views of any piece of data is globally synchronized. If one computer makes changes to a user's name for example, then those edits are reflected for anyone viewing that user's name as well, keystroke by keystroke. The way you create value views and input views goes like

HTML:
  1.  
  2. <div> User name: (( Value user.name )) </div><div> Edit user name: (( Input user.name )) </div>
  3.  

More detailed examples can be found here.

You can also chain references to items, for example (( Value user.friend.name )). Now, if user.friend.name changes, then the Value view is instantly updated. Even cooler, if the user's friend reference changes to a new friend, then the value view will accurately reflect the new friend's name.

To get started on OS X 10.6 is as easy as

git clone git://github.com/marcuswestin/fin.git
cd fin
sudo make install-node
make deps
make run-couchdbx

And voila! Just navigate to localhost/path/to/fin/examples/from-html.html and you're good to go.

Posted by Dion Almaer at 11:35 am
4 Comments

++---
2.3 rating from 28 votes

Monday, March 1st, 2010

New performance case studies… starting with the Digg widget

Category: Performance

Would we all like Steve to sit down with us on our project and do a performance case study? Well, we may not get that, but we are getting to at least sit in on others.

Steve has kicked off his long awaited series that runs performance case studies on third party content. I have been talking to Steve about this for a couple of years, so it is great to see it. It is a sensitive topic as you never want to show up a team when you are just trying to help and educate.

First on the block? The Digg widget.

diggwidgetstats

Steve goes into detail and finds a lot of short comings. You could probably guess some of the bad actors. Mr. document.write() appears for example. We get the problems, and proposed solutions to the issue. Steve also tries to note what a user of third party content can do regardless of if the third party guys fix their issues (put in iframe!).

Here are the most important performance issues along with recommended solutions.

  1. 9 HTTP requests, 52 kB transferred over the wire, and 107 kB of JavaScript (uncompressed) is a lot of content for a single widget.

    Recommendations:

    • Concatenate these three scripts: JS_Libraries, widgetjsvars, and omnidiggthis. (eliminates 2 HTTP requests)
    • Run Page Speed’s “Defer loading JavaScript” feature and see how much of the JavaScript is not used. If it’s sizable, delete it. (This feature is currently broken in the latest version of Page Speed, but a fix is imminent.) (eliminates ?? kB)
    • Optimize the images – widget-logo.png and get-widget.png can both be reduced by ~3 kB. (eliminates ~6 kB)
    • Sprite widget-logo.png and shade-com.png. (eliminates 1 HTTP request)
  2. The widget’s scripts block the main page’s content from downloading. Looking at the waterfall chart, the main page includes the image “digg-waterfall.png” (row 10). Notice how this image doesn’t start downloading until after all the scripts for the Digg widget are received.
    Recommendations:

    • Instead of loading the scripts using document.write, load them without blocking other downloads. The scripts are already suffering from race condition behavior, as evidenced by this comment from widgetjsvars:
      1: if (!digg || !digg.$) setTimeout(function() { diggwb(obj); }, 200); //hack for IE not loading scripts that are included via document.write until it decides too

    So it probably isn’t too much work to avoid race conditions when making all the scripts load asynchronously.

  3. The widget’s stylesheet blocks the main page from rendering in IE.

    Recommendations:

    • Instead of loading the stylesheet using document.write, load it via JavaScript as described in 5d dynamic stylesheets.
  4. Four of the resources aren’t cached long enough.
    Recommendations:

    • Two scripts aren’t cacheable because they have an expiration date in the past. widgetjs is part of the snippet, so it can’t have a long expiration date, but something like an hour or a day would be better than a date in the past. widgetjsvars could have a far future expiration date since its URL is specified in widgetjs.
    • The three images are only cacheable for a day. They should have a far future expires header since the image filename can be change if it’s modified.
  5. There are approximately 30 inefficient CSS selectors. Because this stylesheet is part of the main page, the selectors will cause the overall page to render more slowly when these selectors are applied to the elements in the main page.
    Recommendations:

  6. Four of the resources have ETags which reduces their cacheability.

    Recommendations:

    • Configure the ETags for widget.css, widget-logo.png, get-widget.png, and shade-com.png.

This is just the first example. What else would you like to see Steve tackle?

Posted by Dion Almaer at 6:53 am
7 Comments

++++-
4.2 rating from 32 votes

Saturday, February 27th, 2010

Mozilla JägerMonkey: Method based JIT + Trace based JIT = speed

Category: JavaScript, Mozilla, Performance

David Anderson: "TraceMonkey has rocket boosters, so it runs really fast when the boosters are on, but the boosters can’t always be turned on."

Opera's new JIT compiler Carakan is doing well as we just posted. What is Mozilla doing with TraceMonkey? A lot.

Mozilla JägerMonkey adds method based JIT (of V8 and Nitro fame) to keep the boosters on.

We learn more from David Mandelin and David Anderson.

Posted by Dion Almaer at 12:05 am
10 Comments

++++-
4.7 rating from 23 votes

Friday, February 26th, 2010

Opera 10.50 out for Mac, impressive performance and more

Category: Browsers

The Opera team has released 10.50 for Mac and along with it some impressive performance numbers:

  • Stabilization Improvements: You will find that this build is much more stable than the pre-alpha build.
  • More polished user interface: The whole UI is more polished now. We're still not done yet, and expect more polishes and improvements in the builds to come.
  • Opera Unite: Opera Unite now works with this release. You can browse through and download unite apps through the Unite Apps Repository.
  • HTML5 <video>: This beta now supports the html5 <video> tag.
  • Widgets as standlone apps: We've already talked about widgets as standalone apps, but this functionality was till now, only available in windows builds. Now even in this build of 10.50 beta for mac, you can use widgets as standalone apps. Check out this ODIN post by Patrick Lauke on standalone widgets for more information.
  • New Developer Tools Menu: You can go to 'View->Developer Tools' Menu to access common and usefull tools for developers, such as Opera Dragonfly, cache information, the error console, the source code of the page, and more.

Gregg Keizer talks about the performance side of things

According to tests run by Computerworld, Opera 10.5 was nearly 15% faster than Safari for Windows and almost 20% faster than Google's Chrome, the previous No. 1 and No. 2 browsers. Opera's preview was more than twice as fast as Mozilla's Firefox 3.6, over eight times faster than Opera 10.10, and 10 times faster than Microsoft's Internet Explorer 8 (IE8).

We tend to talk a lot about WebKit, Moz, and IE.... congrats to the Opera team on their impressive work.

Posted by Dion Almaer at 4:27 pm
15 Comments

++++-
4.7 rating from 38 votes

Next Page »