Paul Irish

HI,
thank you, really nice presentation and really cool stuff

thank you again
i love your vision of the WEB

What! What, that mozilla reflow video was awesome, and great presentation.

@Antonio Fernandes
+1 For the insane slides! Look amazing in in Webkit Nightly Build

Paul, regarding the JavaScript code snippet with the function paintSlow() and paintFast().

I do not get how the browser knowns how to optimize.

It also seems that there is a typo in the function paintFast(), you initialize the variable left1 and left2 and then use a variable left.

Awesome slides! and the content and the way you explain everything is awesome. Keep it up!

if possible try to add the links to the material you use, at the end of the post so we can quickly view them!

Cheers.

Really interesting talk, I learned a lot from it also this is my first time visiting your blog and i liked, subscribing.

That is a really interesting presentation. Thanks a lot!

Thank You. It's simply awesome.

GREAT presentation and very interesting tips, thanks very much.
Is there a reason not to automatically hardware-accel all animations at all times? (Maybe this hack can be added to frameworks and save us from remembering it every time :)

It's probably a good idea to use "document.hasFocus()" on the fallback "setTimeout" when requestAnimationFrame() is not available. AFAIK "document.hasFocus()" has a better cross browser support and could also get used to prevent -unnecesary- work.

Damn cool presentation! Thanks a lot

Very interesting presentation.
Any chance of sharing how those slick slides were done? Looks really great.

solid talk. thanks for the break down.

Great watch. That Mozilla reflow video was fascinating. Does anyone know how to generate it on other sites?

@Duncan
Ah, found a link http://blog.mozilla.com/gen/2009/04/09/how-to-make-your-own-gecko-reflow-video/
A pity it looks like a mission to recompile FF.

Thank you to take your time to sharing this kind of information to us! I found your post when googling requestAnimationFrame. Your post is on the top of the search results.

Thanks for the video. Great walkthrough! Keep em coming. :)

Paul, I love your tutorials and insights, especially "11 things i learned from jQuery source" and the other one following that, And i must tell you that you really made me look and dig into that "black box" (jQuery source)

Keep up!
We would want more, more often,
Thanks

If you hide anything with "display: none", it will cause a reflow, but if you then manipulate it, all those manipulations while it's "display: none" will not cause reflows — except in IE.

That is so awesome. (Link spam) :)

Great stuff, BTW.

Great video. Just after watching, my new knowledge of how not to trigger a reflow solved a very difficult bug I'd been having. Except I needed to do the opposite…

Basically, if you have an element off-DOM, but with an ID or class that applies a CSS rule like "-webkit-transition: -webkit-transform 1s linear;"… Then if you attach it to the DOM, and then immediately set the element's style.webkitTransform to something like "translate3d(50px,50px,0)"… you might expect the element to animate to the new position, but it doesn't. Because WebKit queues the two repaint-triggering events (the DOM attachment, and the webkitTransform assignment) and executes them at once. Only then does it consider doing a transition – and in this case, it doesn't, because the element's style.webkitTransform hasn't changed since the element was painted.

I think that's a bug, and I've logged it here: http://crbug.com/82500

But in the meantime, the workaround (which I worked out from this video!) is simply to look at a property of the object like offsetHeight before setting the style.webkitTransform. The "get" flushes the queue, so the next "set" (the transform) happens after the element has been painted, thus WebKit animates it. This saved me a lot of time, thanks to your video.

on the paintSlow() / paintFast() slide what does it mean to say: var left2 =[k] ?
is =[k] some kind of assignment operator?

Thank You. Great video!

Paul, you are a fan Erasure? :)

This is unrelated, but how do you get Safari to look like that? Specifically, it looks like the toolbars have been hidden and opening a new tab opens some sort of lightbox/dialog.

Awesome lecture, thanks

i don’t get why the slides (obviously) work in webkit (“obviously”, because i didn’t test it, but you acually did the talk).

The .future slides are on top of the lower ones and don’t have pointer-events: none set, so you shouldn’t be supposed to be able to click on any links in all but the top-most slide.

By adding this rule with Firebug, the presentation ran flawlessly in Firefox (only without the 3d-transformations, which are currently still in development)

I was under the impression that in javascript all variable assignments get hoisted to the top of the function scope. How come that doesn't that make paintSlow() and paintFast() end up being the same?

p.s. Yes, much awesomeness.

@Colin May All variable declarations, not "assignments".