I have been really into making App Engine sites lately and one of the developer itches I have had for a while was being able to just grab a valid OAuth2 token for Google Data APIs so I can use it in plugins like Rest Client or just on the URL bar in order to preview data. So I wrote a quick site to do it.

https://oauth2helper.appspot.com/

A sample use would be to get an XML feed of all of your Google Docs.

Scopes:

https://docs.google.com/feeds/

https://docs.googleusercontent.com/

https://spreadsheets.google.com/feeds/

URL to hit:

https://docs.google.com/feeds/default/private/full?v=3&access_token=[put your token here]

I used a CSS layout template called YAML to give the site a simple yet more elegant design.

http://www.yaml.de/

One of the lesser known features of Cascading Style Sheets is the ability to apply more than one class to a single element. Browser support for this is pretty good and goes back at least as far as Internet Explorer 6. I needed to put this feature to use, so I did a few experiments on how it works and thought I would share my notes here.

To give an element more than one class you just separate the class names with spaces. Below is an example of a div with three classes.

A couple of things I found about using multiple classes are:

1. The order of the classes makes no difference. class="one two" is the same as class="two one". Standard inheritance applies and if the classes are at the same level of inheritance (i.e. both classes are defined in style tags) the class that is defined last will have its rules take priority.
2. In Javascript, the className property returns all class names in a string (getAttribute('class') returns the same, doesn't work in IE6).
3. Also in Javascript if you are looking for a particular class it can be handy to use split to divide the className property into an array.

   String(document.getElementById('test').className).split(' ')

You can see the example code in action by clicking here. Take a look at the source to see how the multiple classes interact and override each other the generate the final look of the div.

This is a website that you can use to both format and optimize your css code. It can expand code so you can read and edit it or reduce your code to reduce size and increase performance. When optimizing it can even rewrite commands into the shorthand version, which is particularly nice.

http://www.cleancss.com

This is a trick that I have been doing for some time, but now that Internet Explorer 7 is out and it supports position fixed in css; I think this trick will been even more useful now that it will allow web developers to take better advantage of css and at the same time not leave out the Internet Explorer 6 user base. I am posting this here because I sent this to a friend a couple days ago and thought others might be able to use it as well.

The trick is really quite basic. For simplicity I am just putting this example inline, but you can put it where you want.

First your declare your intended style for IE7 (and basically every other browser):

<style type="text/css">
  #fixed_div {
    position: fixed;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
    /* add additional styling, etc. */
  }
</style>

Second add in your Javascript function which is going to be doing your movement for IE6:

<script type="text/javascript">
function move_box() {
    var offset = 0; // set offset (likely equal to your css top)
    var element = document.getElementById('fixed_div');

    element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}
</script>

Then declare the element itself:

<div id="fixed_div">I am fixed, even in IE6</div>

Lastly, implement your fix for IE6 only:

<!--[if lt IE 7]>
<style type="text/css">
  #fixed_div {
    position: absolute;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
  }
</style>
<script type="text/javascript">
window.setInterval(move_box, 100);
</script>
<![endif]-->

I usually put this last part right before the end of the body (I guess you could just put the whole script there). This is because you don't want the window.setInterval to fire before your fixed div is declared. You could use the body onload but I try to stay away from that because I know it is popular for other uses on more advanced pages and I don't want to run the risk of interfering.

Here is the whole script put together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 . . .
<style type="text/css">
  #fixed_div {
    position: fixed;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
    /* add additional styling, etc. */
  }
</style>
<script type="text/javascript">
function move_box() {
    var offset = 0; // set offset (likely equal to your css top)
    var element = document.getElementById('fixed_div');

    element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}
</script>
 . . .
</head>
<body>
 . . .
<div id="fixed_div">I am fixed, even in IE6</div>
 . . .
<!--[if lt IE 7]>
<style type="text/css">
  #fixed_div {
    position: absolute;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
  }
</style>
<script type="text/javascript">
window.setInterval(move_box, 100);
</script>
<![endif]-->
</body>
</html>

NOTE: This will only work properly on pages that have a valid doctype definition. If you don't use one [you should start or] you need to change document.documentElement.scrollTop to document.body.scrollTop in the move_box function.

You can also modify this script to apply to multiple elements by passing arguments to the function or something similar. If you are doing multiple elements on a single page, you may want to consider setting up some kind of Javascript array that tracks what elements need to be corrected, this could save you from having multiple window.setInterval instances running.