RSS Feed   Twitter

jQuery philosophical .is() extention

December 12th, 2010 Altryne

Love little snipplets that make your life better.

This snipplet by @doublerebel on github, extends the .is() function in jQuery, so that if it’s used without parameters inside, will return if the DOM has been found on page

Consider the following

if($('#somediv').is()) {
$('#somediv').ajax....
} else{
console.log('no ajax placeholder')
}

The script itself is pretty straightforward, so straightforward in fact, that one want’s this implemented in jQuery core

(function($) { $.fn.extend({ _is: $.fn.is, is: function(s) { return s ? this._is(s) : !!this.length; } }); })(jQuery);

You can fork this on github

Read More »

All you knew about javascript animation is wrong

December 6th, 2010 Altryne

Ok, atleast all I knew. And it’s in firefox, IE8 and Opera. But still… bare with me :

A little history about browser rendering. The are 3 browser events that happen depending on stuff you change dynamically with JS in DOM.

  1. restyle – recalculation of style for affected DOM element.
  2. reflow – recalculation of flow and all the Elements that are affected by your change.
  3. repaint /redraw - re-rendering of the element in it’s new position, style, whatever you changed.

These “events” happend each time you change something. I’m going to talk about repaint/redraw today.

When you animate a div for instance, each step in the animation, each frame if you will, fires a repaint function in the browser, that makes sense,  as the browser has to show us the updated position/style/whatever of the element.

You would suspect that a browser only repaints the individual animated element, and maybe its surrounding and dependent elements. And you would be right.

So why does some of your animation on the more heavy sites stugger in firefox and IE and Opera when they work like a charm in webkit browsers? Faster browser? Faster Rendering Engine?

All these are a factor, but there’s a hidden factor that you didn’t know about.

float:left;

“OMG? WTF? float? what’s float has to do with animation ??? Alex stop beating around and explain this to me” you must be saying.

It turns out that whenever you animate a div on a page, even if it’s position:relative, that if one of it’s ancestors has a floating (left or right), firefox/opera/ie8 fire a repaint function on ALL THE ANCESTORS content. Not Only the animated div.

So if for instance you have a tiny div that animates every 2 seconds, for every frame of that animation, firefox/opera/ie8 repaint the entire DOM tree up until the floated ancestor.

I don’t know wheather it’s a bug, or this is just how it’s suppose to be. But facts are facts.

I’ve created a small jsfiddle in order to test this.

http://fiddle.jshell.net/JeGKR/10/show/light/

The css3 stuff is there only to make the content heavy so you really notice the animation changes.

Run the animation with task manger open. Then click “add float:left” and see the difference. If you have a fast computer, click on “add content” a couple of times.

Workarounds :

There’s one workaround I’ve read about and it’s just disabling float:left on the ancestors up until the body Element. This won’t be applicable in many many cases I’m afraid.

I’ve yet to find another solution beside putting all the animated elements in a non floated container and positioning them accordingly.

Notes : if you want to see the redraw regions in firefox by yourself, you can download and install  firebug paint events

Credits : This post is a partial translation/adoption from Sergey Chikuyonok – all credits on this find go to him.

https://addons.mozilla.org/en-US/firefox/addon/9620/Fire
Read More »

Garbage collecting in IE with ajax heavy applicaitons

December 5th, 2010 Altryne

We have a very heavy Ajax application on one of our sites. It reloads block of html on the site every 5 seconds or every user click, so obviously it’s intense.

I was approached by our QA and he told me that he’s computer freezes after some time the site is running.

And I started to investigate. Turns out we haven’t been collecting our garbage ourselves, and the “good” browsers took care of that for us.

Not IE though. IE was stuck after some 5-6 requests, and would just come to a halt on page.unload()

Manual garbage collecting to the rescue.

_temp = $.ajax(/* get loads of html data from ajax here*/);
_temp = _temp.replace(/*apply needed transformations before outputing code to the page*/)
$('#updated_div').html(_temp);
//garbage collecting - very important
delete _temp;

As you can see, one small line of code can help so much to your heavy Ajax application in browsers like IE.

Read More »

Pure css3 analog clock (with a little cheat)

June 4th, 2010 Altryne

I love css3, have I told you already? Love it.

Anyway, I wanted to see what I can do with transitions and animations in webkit, and I made this :

Css only (well almost) analog clock

Click the Image to see the live demo

Support :

Firefox + Webkit browsers
In firefox I use javascript to move the properties
In Webkit, all the animation and the calculation is in CSS!!
I did cheat however : I used js to determine the current time. Now way to do that in css. I didn’t want to include jquery here, as u can see all the code is pure js, but I had to because it’s dufficult to do browser detection properly with js.

Lessons learned :

  • CSS3 is awesome!! Especially the way webkit does it (transitions, animations)
    But it still has a LONG way to go untill we see compability cross browsers
  • In Safari and Mobile safari, the arrows were jagged untill I gave the css-shadow, So it seems that giving this property turns on antialiasing somehow. Cool
Read More »

Html5 video puzzle – proof of concept

May 27th, 2010 Altryne


I’ve decided to learn more about html5, since Google and Apple and a lot of these BIG companies say it’s the future.

I went to http://canvasdemos.com and was amazed that all this can be achieved with canvas tag.

I specifically liked the blowing up video into pieces , check it out, it’s AWESOME.

Sean from craftymind.com has done and amazing proof of concept, you should really check it out. I played with it and then realized, that clicking is the only interactivity there is and it seems that there’s more there. much more.

Here’s what I came up with :

Click on Randomize Pieces to explode the video to pieces and Begin assembling.

demo2 has video courtecy of bigcbuckbunny movie and lots more pieces (use chome)

I’ve decided to try and make something using the drawImage() method for the canvas, and inserting the video feed.

Goals :

  • Learn a bit more about <canvas> ,html5 ,  video encoding
  • Use tools I know to interact with the new stuff (jquery, css)
  • Create something awesome!
  • Make it fun

The idea:

The idea was simple, take Sean’s example, and add interactivity, first I was leaning towards making a “pyatnashki” ор fifteenpuzzle puzzle game, only using video, but then I decided it’s cool to leave it as a regular puzzle without constraints.

The actual work:

First I had to use some movie, it had to loop good enough, since as it turned out later, video puzzle isn’t really easy. I’ve used video shot by my uncle I offcourse had to format it properly, well it turns out, right now there are weird ways to input <video> in html, since webkit browsers support h.264 and webM and firefox supports theora codec.

I’ve re-encoded the video to 2 files ( .ogv and .mp4) using this tutorial : http://diveintohtml5.org/video.html

I then had to choose what will I do the actual interactivity with, the canvas itself, or DOM elements. I’ve chosen DOM elements, that maybe slower, but it’s a diferent approach then I’ve seen, plus I already know how to manipulate DOM, and can use that to my advantage.

I’ve created a factory function, that picks up on original video width and height, and takes the number of pieces that I want, and creates the necessary amount of canvas elements.

I then use drawImage each frame of the video, and copy pixels to each canvas according to their location on the matrix.

Read More »
« Older Entries
Newer Entries »
Twitter Delicious Facebook Digg Stumbleupon Favorites More