New Developer Tools in Firefox 11 Aurora ✩ Mozilla Hacks – the Web developer blog

Publicado el por

“Tilt” 3D View of Web Page Structure

Open up the Page Inspector Web Developer->Inspect from the menu, or Inspect Element in the context menu on the page, and you’ll see a new 3D button on the toolbar if your computer is compatible with WebGL. Click that, and you’re presented with a whole new perspective on web page structure.

This 3D view which was previously available in an add-on called Tilt, stacks elements as they are nested in the DOM and lets you see elements that are hidden or off the page. You can zoom in and out, rotate and pan the view to see the page from any angle that is helpful to you.

The 3D view is fully integrated with the rest of the Page Inspector functionality. You can open the HTML view or the Style Inspector for more information about the element you’ve clicked on in the 3D view. You can also change selected elements using the breadcrumbs on the toolbar.

The controls for the 3D view are easy:

Function Mouse Keyboard
Zoom Scroll up/down + and -
Rotate Click and drag a/d and w/s
Pan right-click and drag Arrow keys

vía New Developer Tools in Firefox 11 Aurora ✩ Mozilla Hacks – the Web developer blog.

Trucos para Internet Explorer 6 – OLD

Publicado el por
Son trucos para "ese viejo navegador" pero que los tendré como recordatorio:

Solución definitiva a los memory leaks de IE6

Cuando hablamos de Memory Leak (Fuga de memoria, no me gusta nada como suena), nos referimos a los problemas que un programa tiene para gestionar la memoria. En este caso, Internet Explorer 6 es un experto y siempre lo ha demostrado con famoso cuelgues y pantallazos azules que tan felices nos hacía. :D

Cuando hablamos de Memory Leak (Fuga de memoria, no me gusta nada como suena), nos referimos a los problemas que un programa tiene para gestionar la memoria. En este caso, Internet Explorer 6 es un experto y siempre lo ha demostrado con famoso cuelgues y pantallazos azules que tan felices nos hacía. :D

Uno de los mayores problemas con los que nos encontramos es que al crear objetos DOM, Internet Explorer 6 consume una memoria que al eliminar el elemento no termina de liberar. Douglas Crockford hace unos años comentaba este problema y nos ponía un ejemplo para ver el resultado en nuestras propias carnes.

Veamos un ejemplo que nos provoca este problema con el consumo de memoria:

/*global setTimeout */
            (function (limit, delay) {
                var queue = new Array(10);
                var n = 0;

                function makeSpan(n) {
                    var s = document.createElement('span');
                    document.body.appendChild(s);
                    var t = document.createTextNode(' ' + n);
                    s.appendChild(t);
                    s.onclick = function (e) {
                        s.style.backgroundColor = 'red';
                        alert(n);
                    };
                    return s;
                }

                function process(n) {
                    queue.push(makeSpan(n));
                    var s = queue.shift();
                    if (s) {
                        s.parentNode.removeChild(s);
                    }
                }

                function loop() {
                    if (n < limit) {
                        process(n);
                        n += 1;
                        setTimeout(loop, delay);
                    }
                }

                loop();
            })(10000, 10);

Como podemos ver si destripamos el código anterior, vemos como beneramos 10000 elementos <span /> y posteriormente los borramos. Si usamos la lógica al ejecutar este código, el consumo de memoria (Podemos verlo en Windows en Administrador de tareas de Windows > Uso de PF) se dispararía y despues volvería a su normalidad al eliminar los elementos, en Internet Explorer esto no ocurre así, cuando lanzamos el script este usa la memoria en crear los elementos, pero despues esta no se libera. Ahí el problema.

¿Como solucionarlo?

Veamos la función que devuelve el objeto que es la que ocasiona el problema.

 function createButton() {
      var obj = document.createElement("button");
      obj.innerHTML = "click me";
      obj.onclick = function() {
        //handle onclick
      }
      obj.onmouseover = function() {
        //handle onmouseover
      }
      return obj;//return a object which has memory leak problem in IE6
    }

    var dButton = document.getElementsById(”d1″).appendChild(createButton());
    //skipped….

En este punto estamos devolviendo la dirección de memoria en la que se encuentra el objeto que acabamos de crear, en Internet Explorer esta porción de memoria nunca termina de liberarse al eliminar el objeto.

function createButton() {
      var obj = document.createElement("button");
      obj.innerHTML = "click me";
      obj.onclick = function() {
        //handle onclick
      }
      obj.onmouseover = function() {
        //handle onmouseover
      }

      //this helps to fix the memory leak issue
      try {
        return obj;

      } finally {
        obj = null;
      }
    }

    var dButton = document.getElementsById(”d1″).appendChild(createButton());
    //skipped….

Gracias a try{} podemos lanzar finally{} que se ejecutará siempre despues de la ejecución, incluso despues del return de nuestras funciones, de esta forma vaciamos la porción de memoria y evitamos que posteriormente se quede inutilizada. Por otro lado, al estar devolviendo el objeto mediante el return, lo tenemos disponible como parámetro de la función padre que llame a esta.

Fuentes:

Deshabilitar el toolbar que pone IE 6 sobre las imágenes

Para desactivar el toolbar mostrado sobre cada imagen por este excelente navegador :D, pueden hacer lo siguiente:

Para desactivar el toolbar mostrado sobre cada imagen por este "excelente  navegador" Ojos en blanco , pueden hacer lo siguiente: 

<!-- deshabilita el toolbar en todas las imágenes -->
<meta http-equiv="imagetoolbar" content="no" />
<!-- deshabilita el toolbar en imagen.gif, pero el html no validará -->
<img src="imagen.gif" galleryimg="no" />

Fuentes:

Desarrollo web con FireFox

Publicado el por

<( Muy útil para los principiantes! )

Web Development with Firefox.- Rapid Web Development and Testing with Mozilla Firefox. Se trata de un documento formateado con el fantástico S5 de Eric Meyer, que nos cuenta cómo podemos hacer uso de la familia de productos Mozilla para nuestro trabajo como desarrolladores para la web. Hay una serie de extensiones, aplicaciones y trucos para sacar partido a todas ellas en el proceso de desarrollo web.

 

 – Web Development with Firefox.

 

Algunas extensiones útiles que aparecen, …para FireFox:

  • Extensión Web Developer — Extensión imprescindible para desarrollo web.
  • MeasureIt — en la página web que se está visualizando dibuja una regla con la que es posible medir en píxeles el alto, el ancho y la alineación de elementos.
  • Aardvark — identifica los distintos elementos de la página y permite ejercer acciones sobre ellos tales como colorear, ocultar, borrar, modificar…
  • LinkChecker — identifica cada enlace existente en una página y los identifica por colores si son correctos (verde), difusos (amarillo) o erróneos (en rojo).
  • User Agent Switcher — desde un menú desplegable en la barra del navegador permite elegir cómo se va a identificar éste (el USER-AGENT) al «hablar» con un servidor: como IExplorer, Netscape u Opera.