CSS3 Transforms and YQL (part 2)

Jul 26, 2010
Episode 34
In this episode, Nick introduces the CSS3 transform property and Jim gets into part 2 of YQL.
Spotlight

Thanks to those who make Doctype possible!

Scaling & Rotation

Scaling

Transforms can be in either 2D or 3D, and in combination with transitions and animations, you can do some really neat stuff, but that’s outside the scope of this episode. For now, let’s start off basic.

The first thing to do is to type out the transform property, using the webkit vendor prefix. More on that in a second.

Next, you can apply a nice variety of functions to the transform property, and today we’re going to look at two.

First up is the scale function. Using scale, you can quickly resize the an element along the X axis, Y axis or both. You simply type scale, and then in parenthesis, you type your arguments. The first argument is the X axis, and the second is the Y axis. The values you pass to the scale function aren’t actually pixel or percentage values like normal. Rather, you pass a multiple. So for example, if you wanted to scale down the X value by half you would type 0.5 and if you wanted to scale up the Y value by one and a half times, you would type the number 1.5.

Right now, webkit and Firefox both support 2D transforms, and they work exactly the same. By changing the webkit vendor prefix to moz, all the examples in this episode should work in Firefox.

Rotation

Using the same webkit-transform property, you can also apply a function called rotate. You simply type out the word rotate and then put two parenthesis afterwards. Inside the parenthesis, there’s just a single argument, which takes the form of a CSS angle. A CSS angle can be expressed in radians, or degrees.

So, let’s say that we wanted to rotate our element by 45 degrees. You would simply pass 45deg to the function, and the element gets rotated. It’s as easy as that.

Now, if you want to rotate an element the opposite direction, you could go all the way around the 360 degree circle, but an easier way to express this is to use a negative number, such as negative 15 degrees.

The powerful thing about transforms, is that you can use these functions in combination. So, if I wanted to scale the X and Y, while also rotating the element, you would just put the functions after the single transform property, and separate them with spaces.

YQL html Table

YQL offers one table that is particularly useful, the html table. This table allows us to fetch any web page, and extract information from it.This is particularly useful if you want to create a web service for your site, but don’t have the time or ability to create an official API

For instance, if you wanted to get a list of all doctype episodes (without using the RSS feeds of course), you could use this query

SELECT * FROM html WHERE url="http://doctype.tv/episodes" AND
    xpath='//div[@class="episode"]'

We select everything (*), and we are using the html table

When we use the html table we need to pass two pieces of information to the query. The url of the page we want, and the xpath expression of the elements we want to select.

If you not used xpath before, there are some great tutorials online, and we may cover it in the future, but it’s a way to select elements in an XML document.

In this call, we want all the divs with class “episode”

In our case we start with a //, which means our expression may be at any depth in the tree, not neccesarrily at the root. We then say div, because we are looking for div elements, we the open the square brackets, this means we are going to restrict based on attributes of that element. To restrict to class we say @class="episode".

Results

The results from the html table when using JSON resemble the html of the data that was requested.

Since our results were divs, the results.divs object will be an array containing all of our episodes. Each of these objects will have a class attribute of episode, and an id episode that is the id of the div. They will also have an a atrribute, and a div attribute, since each of our episode divs contains an a and a div tag. inside of the div tag is an h4 tag, and another a tag, we can then call content to get the title of the episode. similarly if we got the href attribute of the a, we would get the url of the episode.

Convenience Function

Since YQL offers a JSONP interface, it is pretty easy to get a query into your page, but this piece of jQuery based javascript can save some typing and clean up your code.

YQL = function(query, callback){
  var YQLUrl = "http://query.yahooapis.com/v1/public/yql",
      data = {
        format: 'json',
        q: query
      }
  $.get(YQLUrl, data, callback,'jsonp');
}

We are creating a YQL function that takes a query string and a callback function . Inside of it we have the YQL URL, and we create a data object for our parameters, we set format to json, and q to the query. We then call jQuery.get with the YQL url, data, callback, and tell it it is JSONP. jQuery will then do all the work to connect your callback to the JSONP callback.