Meteor Web Framework - Why I can't use it yet

1. Spent about 10 hours playing with Meteor http://www.meteor.com/

2. Web-app goal: Searching http://500px.com and http://instagr.am for interesting photos

3. 1st iteration: Using node.js + express + connect-auth to search

4. 2nd iteration: Trying to use Meteor to implement #3 above. Bump into a few obstacles and realised that Meteor use case is different.
-- Meteor is designed from the ground up to have a very tight integration between client/server stack (which is very good in some cases).

-- hence no REST end points implementation (is it coming? not sure... can't see it on Github issue tracker), refer how-should-i-run-a-rest-api-with-meteor
---- Meteor.call() defines an entry point on the server which the client can call, however this is not REST-based.

-- This means my native iPhone / Android app will have issues calling the server side end points

5. For now I'll go back to the Express land and implement my REST end points there, waiting for meteor to have REST end point,

and wondering when Node.js can hot-push code into the browser (save me from refreshing the browser manually)

OpenLayers Zoom Fade + Resize Transition Effect

Taking the inspiration from Leaffet which uses modern browsers' css3 transition effect to add a fade effect to map zoom/pan, I quickly customised OpenLayers to do similar thing.

The fade effect is supported well in modern version of Firefox and Chrome, as well as in IE10+.
For IE 6, 7 and 8, I use the javascript timer to transition the opacity of a tile.

Get the code from
https://github.com/lydonchandra/openlayers/blob/release-2.11/lib/OpenLayers/Tile/Image.js
or
OpenLayers-distro/OpenLayers-2.11/lib/OpenLayers/Tile/Image.js



    show: function(isResize, ratio) {

        if( OpenLayers.Util.getBrowserName() === 'msie' ) {

                if(  isResize &&  
                        this.frame.style.display === 'none' &&
                        ratio !== undefined && ratio > 1 ) {

                            //console.log( 'resizing, ratio==' + ratio + ' display==' + this.frame.style.display );

                            this.frame.style.display = '';

                            // style.opacity is only supported by IE9+
                            this.frame.style.opacity = 0;

                            // have to use filter for IE7 and IE8
                            this.frame.style.filter = 'alpha(opacity=' + 0 + ')';
                            var theFrame0 = this.frame;
                            window.setTimeout(
                                    function() {
                                        theFrame0.style.opacity = 0.5;

                                        theFrame0.style.filter = 'alpha(opacity=' + 50 + ')';
//                                        window.setTimeout(
//                                                function() {
//                                                    theFrame0.style.opacity = 0.4;
//                                                    theFrame0.style.filter = 'alpha(opacity=' + 40 + ')';
//                                                    window.setTimeout(
//                                                            function() {
//                                                                theFrame0.style.opacity = 0.6;
//                                                                theFrame0.style.filter = 'alpha(opacity=' + 60 + ')';
//                                                                window.setTimeout(
//                                                                        function() {
//                                                                            theFrame0.style.opacity = 0.8;
//                                                                            theFrame0.style.filter = 'alpha(opacity=' + 80 + ')';
//                                                                                      

                                                                                    window.setTimeout( function(){

                                                                                        theFrame0.style.opacity = 1;

                                                                                        theFrame0.style.filter = 'alpha(opacity=' + 100 + ')';

                                                                                    }, 100);

                                                                          

//                                                                        }, 100
//                                                              
//                                                                );
//                                                              
//                                                            }, 100
//                                                  
//                                                    );
//                                                  
//                                                }, 100
//                                           );

                                       

                                }, 100 );

                } else if( !isResize && ratio === 1 && this.frame.style.display === 'none'){

    //                console.log('resizing, ratio==' + ratio);
   
                    this.frame.style.opacity = 1;
                    this.frame.style.display = '';
                    this.frame.style.filter = 'alpha(opacity=' + 100 + ')';

                }  else {

//                console.log('else --- ratio==' + ratio + ' display==' + this.frame.style.display + ' isResize==' + isResize );
//                 this.frame.style.opacity = 1;
//                 this.frame.style.display = '';
//                 this.frame.style.filter = 'alpha(opacity=' + 100 + ')';

                if( this.frame.style.display === 'none' ) {

                        this.frame.style.display = '';

                        // style.opacity is only supported by IE9+
                        this.frame.style.opacity = 0;

                        // have to use filter for IE7 and IE8
                        this.frame.style.filter = 'alpha(opacity=' + 0 + ')';

                        var theFrame0 = this.frame;

                        window.setTimeout(

                                function() {

                                    theFrame0.style.opacity = 0.5;

                                    theFrame0.style.filter = 'alpha(opacity=' + 50 + ')';
                                  

//                                    window.setTimeout(

//                                            function() {

//                                                theFrame0.style.opacity = 0.4;
//                                                theFrame0.style.filter = 'alpha(opacity=' + 40 + ')';
//                                                window.setTimeout(
//                                                        function() {
//                                                            theFrame0.style.opacity = 0.6;
//                                                            theFrame0.style.filter = 'alpha(opacity=' + 60 + ')';
//                                                            window.setTimeout(
//                                                                    function() {
//                                                                        theFrame0.style.opacity = 0.8;
//                                                                        theFrame0.style.filter = 'alpha(opacity=' + 80 + ')';

                                                                                window.setTimeout( function(){
                                                                                        theFrame0.style.opacity = 1;
                                                                                        theFrame0.style.filter = 'alpha(opacity=' + 100 + ')';

                                                                                }, 200);

//                                                                    }, 100
//                                                            );
//                                                        }, 100

//                                                );
//                                              
//                                            }, 100
//                                       );

                            }, 200 );

                }
            }
        }

        else {
                                       

          if(  !isResize &&   
   
                  this.frame.style.display === 'none' ) {
   
                  this.frame.style.opacity = 0;
                this.frame.style.display = '';
                this.frame.style.transition = 'opacity 0.5s ease-in';
                this.frame.style.WebkitTransition = 'opacity 0.5s ease-in';
                this.frame.style.MozTransition = 'opacity 0.5s ease-in';
       
                var theFrame = this.frame;
                setTimeout( function() {
       
                // have to give it some time and then set the opacity
                // otherwise the transition effect won't kick in
                theFrame.style.opacity = 1;
                }, 50 );
   
            } else {
   
                this.frame.style.opacity = 1;
                // remove transition effect so it doesn't get applied everytime,
                // we control when it gets applied (only when showing the tile as above)
                this.frame.style.transition = '';
                this.frame.style.WebkitTransition = '';
                this.frame.style.MozTransition = '';
                this.frame.style.display = '';
            }
       }

       

        // Force a reflow on gecko based browsers to actually show the element

            // before continuing execution.

            if (OpenLayers.Util.indexOf(this.layer.SUPPORTED_TRANSITIONS,

                    this.layer.transitionEffect) != -1) {

                if (OpenLayers.IS_GECKO === true) {

//                    this.frame.scrollLeft = this.frame.scrollLeft;

                }

            }

        }