What’s in a window.name?

View original post found on Ajaxian » Front Page authored by Chris Heilmann

Sometimes it is interesting to see that knowledge from the 10,000 B.C. period of web development can be used in new ways to create – to play it safely – interesting ideas.

Each window in a browser has a name property which became pretty much useless when we stopped using pop-up windows and tried to make them communicate with each other by name.

Thomas Frank, however wrote a small library that uses window.name to store session variables without having to resort to cookies and his research seems to prove that you can store up to two megabytes of data in window.name. As this property is available across page reloads it is a sort of session, but as the comments show the security aspects of it are just scary:

There is a cross domain flag in sessvars, but although it defaults to false, this just sees to that you don’t get any other sites window.name garbage inside your sessvars by mistake. The actual data you set will be available for other scripts on other domains to look at – and also to anyone able to type javascript:alert(window.name) in the browser’s address bar

oEmbed makes embedding third party videos and images a breeze

View original post found on Ajaxian » Front Page authored by Chris Heilmann

Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed, an easy way to allow embeding media from a certain URL in a third party site.

From the oEmbed site:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

This means that if you for example find a nice photo on flickr, you can take the URL and easily turn it into embed-able data:

Original URL: http://flickr.com/photos/codepo8/2475016321/

oEmbed URL: http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/

Result:

PLAIN TEXT
XML:

  1. <oembed>
  2.   <version>1.0</version>
  3.   <type>photo</type>
  4.   <title>? too much myspace error</title>
  5.   <author_name>codepo8</author_name>
  6.   <author_url>http://www.flickr.com/photos/codepo8/</author_url>
  7.   <cache_age>3600</cache_age>
  8.   <provider_name>Flickr</provider_name>
  9.   <provider_url>http://www.flickr.com/</provider_url>
  10.   <width>500</width>
  11.   <height>375</height>
  12.   <url>
  13.     http://farm4.static.flickr.com/3128/2475016321_982666ec95.jpg
  14.   </url>
  15. </oembed>

You can define the output format and the maximum width and height with URL parameters:

oEmbed URL:

http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/&format=json&maxwidth=200

Result:

PLAIN TEXT
JAVASCRIPT:

  1. {
  2.   version: ‘1.0′,
  3.   type: ‘photo’,
  4.   title: ‘? too much myspace error’,
  5.   author_name: ‘codepo8′,
  6.   author_url: ‘http://www.flickr.com/photos/codepo8/’,
  7.   cache_age: ‘3600′,
  8.   provider_name: ‘Flickr’,
  9.   provider_url: ‘http://www.flickr.com/’,
  10.   width: ‘100′,
  11.   height: ‘75′,
  12.   url: ‘http://farm4.static.flickr.com/3128/2475016321_982666ec95_t.jpg’
  13. }

Supported formats for responses so far are photo, video, link and rich.

Progressive Enhancement with CSS support

View original post found on Ajaxian » Front Page authored by Chris Heilmann

Via John Resig we just got to learn about a clever technique applied by the Filament group in Boston called Progressive Enhancement with CSS support.

The study rightfully claims that object detection to determine whether a user agent is capable of supporting a certain interface is not enough. You also need to make sure that the browser supports the right look and feel – in other words that the CSS you will apply can be rendered as intended.

I’ve done similar things in the past, reading out the offsetWidth of an element to determine if the browser is in standards or Quirksmode but Filamentgroup’s test script goes a lot further than this. It tests for the following CSS support:

  • Box model: make sure the width and padding of a div add up properly using offsetWidth
  • Positioning: position a div and check its positioning using offsetTop and offsetLeft
  • Float: float 2 divs next to each other and evaluate their offsetTop values for equality
  • Clear: test to make sure a list item will clear beneath a preceding floated list item
  • Overflow: wrap a tall div with a shorter div with overflow set to ‘auto’, and test its offsetHeight
  • Line-height (including unitless): test for proper handling of line-height using offsetHeight, primarily to rule out Firefox 1.0

For example the right box model support is tested with this script:

PLAIN TEXT
JAVASCRIPT:

  1. var newDiv = document.createElement(‘div’);
  2. document.body.appendChild(newDiv);
  3. newDiv.style.visibility = ‘hidden’;
  4. newDiv.style.width = ‘20px’;
  5. newDiv.style.padding = ‘10px’;
  6. var divWidth = newDiv.offsetWidth;
  7. if(divWidth != 40) {document.body.removeChild(newDiv); return false;}

When the browser passes, the script adds an “enhanced” class to the body that you can use in your style sheet.

Neat idea and very defensive programming.

The FireEagle has landed – personal location information for your applications

View original post found on Ajaxian » Front Page authored by Chris Heilmann

Yahoo’s Tom Coates today finally released FireEagle at ETech 2008. Seeing Tom in the office for quite a while getting everything ready makes me very happy to announce that it is out and invite you to come along and sign up for the beta to start testing and – even more importantly – developing applications for it. This is FireEagle:

Fire Eagle is an open location services platform offering web, mobile, and desktop developers a simple way to build new location-based applications while also ensuring that consumers have complete control over their data, including how, when and where their location is made available. Want to easily make your site responsive to a user’s location? Or, maybe you’ve found a way to capture someone’s location and you want to find cool apps to plug it into? By doing the heavy lifting and connecting you to a community of geo-developers, Fire Eagle makes it easier to build location-aware services.

Once you got in you’ll be able to download development kits in several languages including PHP, Python, Ruby and of course JavaScript. All the API calls are REST and the API authentication is handled via OAuth. The output format is either XML or JSON. The code is licensed with BSD and you can even contribute to the FireEagle source at a code repository.

The available API calls are:

user
Returns the location of a specific user in a location hierarchy format.
recent
Returns a list of users of the application who have updated their location within the given amount of time.
within
Takes a Place ID or a WoE ID and returns a list of users using your application who are within the bounding box of that location.
update
Sets a user’s current location using using a Place ID hash or a set of location parameters. If the user provides a location unconfirmed with lookup method then Fire Eagle makes a best guess as to the user’s location and updates.
lookup
Disambiguates potential values for update. Results from lookup can be passed to update to ensure that Fire Eagle will understand how to parse the location parameter.

You can learn more by watching the video of Tom explaining FireEagle at ETech.

The uses for a service like this are endless. From sensible search applications that show you places of interest nearby your current location up to real-life games of high-tech hide and seek everything is possible.

YUI 2.5 released – Layout Manager, File Uploader and graphical JavaScript Profiler – and that is just the start

View original post found on Ajaxian » Front Page authored by Chris Heilmann

Layout Manager in action - build your own Yahoo Mail

Version 2.5 of the Yahoo User Interface Library (YUI) was released today. You can get all the details on the official blog post, but here’s the “change log”:

  • The new Layout Manager allows you to create multi-pane user interfaces that are collapsible and resizable.
  • The Flash-enhanced File Uploader control might be known to you from Flickr and and allows you to easily batch-upload files and images with progress bars.
  • The JavaScript Profiler now has a graphical front-end to make the information more easily understandable
  • The YUI Data Table performs faster and got new features, including horizontal and vertical scrolling, a paginator class, drag and drop columns and an API to access, add and remove columns.
  • The Image Cropper control allows you to pick a part of an image to be cropped server-side
  • The Cookie Controller provides a wrapper for all things to do with cookies
  • The Slider Control got updated to support multiple handles to define a range rather than just a state.

In addition to that, some of the components left beta status. These are the Get Utility to retrieve scripts and style sheets on the fly, the ColorPicker Control, the JSON Utility to validate JSON, the ImageLoader Utility to load images on-demand to increase page performance and the YUI Test Utility.

The really detailed report on all the changes is available on the YUI list/forum.

If you want to have a quick glimpse of what the Layout Control allows you to create, check out the demo application interface simulating simulating Yahoo Mail.