The Sea of Ideas

jQuery Site Redesign – The Community Speaks

As many of you have seen by now, the jQuery Project’s site has been redesigned. It had been a long overdue task and it was important to put a fresh new spin on the main hub, and the face, of jQuery. One of the things about the jQuery Project is that we’ve never run with the crowd or accepted the norm. By being pushing boundaries and sometimes being “in your face” we’ve not only grown tremendously in popularity but we’ve pushed most of the other JS library projects to rethink their own principles and make changes to improve their products. That’s a good thing for everyone as competition is always good.

So, it should come as no surprise by the drastic change in the jQuery website. So far, the single biggest complaint has been associated with the new banner (ie: rockstar caricature & slogan). Again, we wanted to push the boundaries and come up with something that would generate a lot of buzz. Overall, we’ve succeeded in that goal with plenty of positive feedback but unfortunately, with some very negative comments as well. We actually value both types of feedback and want more as it’s the only way to determine if we’re on the right track. As with any site redesign, you can’t please everyone and we understand that. But we also want everyone to realize that this is a first cut and it doesn’t mean that it can’t be tweaked.

We’re actively reviewing all of the feedback and will certainly be looking at how to best handle some of the concerns of the community. After all, the community is what makes the jQuery Project so special and so different from other projects. In addition, the jQuery team has always listened to the needs of the community and this time is no exception. Again, I think the team is unique in that we *DO LISTEN* to the community and we’re going to work on making the site an invaluable tool for everyone. So just give us some time to go through the messages and keep an eye on this blog for updates.

via Rey Bango’s Blog

Bringing CSS Transforms to Internet Explorer

Extending the teaser

So I hope I got you a bit excited with my little teaser, and yes, the second tab was opened on purpose to give you a hint. Indeed, I was talking about CSS transforms, and yes, I was talking about somehow successfully porting them to Firefox.

I won’t go into details of my implemention of it yet, but I can assure you it isn’t using any additional plugins. Anyway, during my CSS transformation research for possible other browser implementations, I came up with something entirely different, and it was completely unexpected to me. As it turns out, Internet Explorer already supports CSS transformations in some way for years!

I was telling myself that surely, this wouldn’t actually work, since the Matrix Filter would allow you to actually rotate, scale and do whatever you want with elements, in IE, natively. And then, someone must have figured before me, years ago. But it turns out that the Matrix filter isn’t that popular at all (yes, these are filters that we hated so much back in time, and I feel totally stupid doing so now), so I decided to give it a go and played around with it.

Transformie!

What I came up with, is my new jQuery plugin (though fairly easy to convert to other libs) “Transformie“, a javascript plugin that comes in less than 5k that you embed into web pages and that maps the native IE Filter API to CSS transitions as proposed by Webkit.

Transformie supports the following functions from Webkit’s syntax (in degrees, radians or grads):

• rotate
• scale, scaleX, scaleY
• skew, skewX, skewY
• matrix (with the exception of the last two modifiers, tx and ty)

The reason the translate functions are not yet supported is the fact that IE’s Matrix function is not as flexible as Webkit’s, since you’re not able to specify tx and ty, the third columns’ first row value and second row value in the actual matrix (there is a way, but then the auto scaling doesn’t work anymore – does’t help much).

However, it’s fairly easy to also add the translate functions and the last two missing values of the matrix function by simply modifying the position top/left values. The only problem is that the actual behaviour then is a bit different than Webkit’s – Webkit’s translate doesn’t modify layout.

Also good to understand is the -webkit-transform-origin css function, that defaults to the center of the element in Webkit. However, in IE, and therefore also in my implemention (at this moment), the top left corner is the origin for calculations. Again, this should be easy to fix using position values.

Anyway, let’s get to the point. To show you how simple it really is to get started with Transformie, I simply included Transformie, and its dependancies Sylvester (great javascript utility, very useful for matrix multiplication!) and jQuery (was already included there, obviously) into my last blog post’s entry Coverflow, and from then it’s prety straight forward – reload Internet Explorer, and you should have CSS transforms!

One implementation detail that stands out is the usage of the terribly handy event “onpropertychange“, which almost behaves like DOMAttrChanged, but is much finer grained. It is capable of telling you whenever a DOM property changes on an element, and when you track the style attribute, it actually passes the actual style that changed along with the event. Neat, huh?

Documentation

Anyway, enough said, give it a try. It’s tested in Internet Explorer 6 and 7 and simply does nothing in other browsers. The following can be optionally configured directly after script inclusion:

• Transformie.inlineCSS = jQuerySelector (default: “*”, defines if inline styles should be parsed for selected elements on page load [disable or narrow down for better performance])
• Transformie.stylesheets = Boolean (default: true, defines if stylesheets are parsed on page load)
• Transformie.trackChangesFor = jQuerySelector (default: “*”, defines for what elements changes should be tracked [disable or narrow down for better performance])

And when you’re done, simply use -webkit-transform or transform (thanks for the hint, John Resig!) in your Stylesheets or inline in the style tag.

Download

Here’s the download:

• Transformie 0.2 (bundle, also contains jQuery and Sylvester, recommended)
• Transformie 0.2 (5k, single file, uncompressed)
• Transformie 0.2 (3k, single file, minified)

Transformie is, like jQuery, MIT/GPL double licensed.

Enjoy and leave me comments!

Firefox.

Soon.

Coverflow, anyone?

The inspiration

So I was looking at all the nice things the WebKit folks did, and one particular feature really got his way into my thoughts, and I was playing with possible usecases for weeks.. I’m talking about the CSS transforms.

This handy nifty new css feature allows you to do all kinds of 2d transformations on any element on the page, by utilizing custom CSS tags. This means you can rotate and translate DOM elements, but you can also use a generic matrix function to do whatever you want.

So here is where it get’s interesting. The fun thing about CSS Transforms is that they work today, in Safari 3.1, and on the iPhone, not only in one of the nightly builds, so it’s possible to target real-world users.

So now that I had all this power, I didn’t know what to do with it, until I remembered that I always wanted to do a cool iTunes like coverflow effect, already seen countless times in flash. Also helping me to remember was an Ajaxian post about the dojo.workers a couple of days ago, which features the same coverflow effect, done by Peter Higgins.

While this dojo.workers example is absolutely fantastic work and looks brilliant however, it doesn’t feel quite like the effect: You can’t scroll at once through many items, there’s no real animation (the images are already prerendered).

The result

So after a couple hours of work, I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

While impossible to do a real perspective transformation using WebKit right now (that would require a 3d affine matrix), I’m using the matrix and scale css functions to create a somewhat similar experience, along with some viewport and zIndex logic.

To make a nice demonstration, it uses jQuery UI to create a actual coverflow widget, and jQuery UI’s slider to be able to slide through. You can also navigate through the items by clicking on them or using the left/right keys on your keyboard.

For those of you who would like to know how I was able to create the real experience: The refresh() function that updates the viewport does unlike other examples (i.e. frash coverflow scripts) not only handle single animations, but is capable of doing true half-state renderings. Right now, this is not shown too much in the demo, but it would be actually possible to change the next/prev keyboard behaviour to not move from one item to the other, but render each single half-state inbetween.

Finally, for those of you wondering if this will become a real plugin: Indeed, it’s already commited in the 1.7 branch of jQuery UI, and along with other Webkit specific plugins, come to UI in the near future. I’ll keep you updated!

Back in Tokyo

I finally combined two interests of mine into one: My love for Japan and my day job. From May 14th to May 20th, I will be in Tokyo participating and speaking on two great conferences.

The first conference is a great international hacker conference featuring both Perl and JavaScript sessions – its name is YAPC Asia , you can find their website here: http://conferences.yapcasia.org/ya2008/

Due to the popular demand, registration was already closed a couple of weeks ago, but they opened again to sell a couple of more tickets. So if you’re planning to attend, definitely register fast!

The second conference is a exclusive one-day event named JUI 2008 Tokyo, a day completely dedicated to JavaScript User Interface sessions. It will happen immediately after YAPC (after the weekend), on Monday, May 19th.

That one is most interesting – a couple of weeks ago, I wrote an email to Yusuke Kawasaki to find out about japanese conferences, because I wanted to get active in Japan. He was extremely kind and helpful, and immediately answered with a bunch of options, the most immediate was the YAPC Asia. Unfortunately, the call of papers was closed long ago, so he came up with the idea of a exclusive one day event, with the focus on jQuery UI (!).

Now that’s what we got – a great one-day event, featuring great japanese speakers and jQuery UI content all over, sponsored by Yusuke Kawasaki’s company RECRUIT. The details are still worked out, but we’ll soon post a timetable and more information (A facebook event page can be found here).

If you ever wanted to visit Tokyo, this would be a great time and chance to combine a holiday trip with a great business trip. Be sure to leave a a comment if you think about it!

---

On a sidenote: The japanese IT economy is the third largest in the world, but it was (and still is) very difficult to enter their market or exchange business ideas and knowledge. Of course, there are a couple of reasons, but from what I’ve seen, it’s a more trivial one: The language!

Most conferences hosted in Japan are japanese only, with only a few english speakers and no english website/marketing, and although you will see great code if you attend, you might easily become frustrated because you don’t understand the details. However, there seems to be a small revolution or evolution going on – YAPC Asia is getting very popular, and it’s completely international – all session slides are translated from japanese to english and vice versa. They even have english-speaking staff!

I always had the feeling that from a knowledge perspective, Japan is a pot full of gold – but only if you learn japanese, you’ll receive the golden key to open it. Now there might soon be an easier way