Opera Developer Console

ByLuis

opera.pngOpera Developer Console es una herramienta realizada en Javascript que nos ayuda a inspeccionar y analizar durante el desarrollo o el debug diversos aspectos de las páginas web.

La herramienta dispone de varias pestañas que nos muestra la informacion sobre:

  • DOM: nos muestra un árbol de nodos, permitiendo seleccionar los elementos mediante los nodos o los nodos mediante la selección en el documento. A parte nos permite buscar entre los nodos, eliminar nodos, ver sus características y filtrar los nodos vacios.
  • JS: un inspector Javascript que nos da la posibilidad de ver los objetos y sus atributos y buscar entre ellos.
  • CSS: gracias a esta pestaña podemos obtener información de cada hoja de estilos, pudiendo activarlas o desactivarlas, editarlas y exportarlas.
  • HTTP: permite inspeccionar las cabeceras HTTP enviadas desde el servidor, ver y editar las cookies y saber qué peticiones Ajax se realizan desde el documento.

Una herramienta muy interesante, que parece estar al nivel de Firebug.

Using the Opera Developer Console

Vía / Ajaxian

Similar Posts

links for 2007-01-08

ByLuis

Estructura básica para eventos o plugins en PHP

ByLuis

Actualmente las aplicaciones web (por ejemplo WordPress) permiten la ampliación de sus funcionalidades con el uso de plugins o eventos, dependiendo lo que se quiera hacer.
En el artículo que referenciamos, el autor crea una estructura para poder añadir plugins o eventos (explicándolo con eventos en este caso). El funcionamiento es el siguiente, se tiene un array de eventos, organizado por nombre del evento: el índice del array es el nombre del evento, cada posición del array almacena otro array con cada acción que se debe ejecutar.
Existen tres métodos: añadir evento, quitarlo y ejecutar las acciones del evento. Cuando se quiera añadir una acción a un evento, se debe indicar el nombre del evento y pasar la función que se quiere ejecutar. Cuando se ejecute un evento, se ejecutarán cada una de las acciones almacenadas en el array para ese evento.
A basic plugin and event architecture…
Vía / Good PHP Tutorials

Sun crea OpenPortal como open source

ByLuis

openportal.pngSun ha librerado OpenPortal, el cual deriva de Sun Java System Portal Server 7, siguiendo así con su política de convertir todo su software en open source.
El objetivo principal de OpenPortal es la creación de una comunidad que participe en el desarrollo de componentes útiles para otras aplicaciones de tipo portal, y colaborar con otros proyectos open source para obtener beneficios mutuos.
Las características que nos ofrece OpenPortal son las siguientes: Portlet container, creación y utilización de web services, framework de administración, acceso a dispositivos móviles, integración con JavaServer Faces y mucho más.
OpenPortal
Vía / CNET News.com

links for 2006-12-10

ByLuis

PHPUnit: testing en aplicaciones PHP

ByLuis

phpunit.pngPHPUnit es un framework para PHP que nos facilita la creación de juegos de tests y la ejecución de estos y analiza sus resultados. Aunque inicialmente PHP empezó como complemento dinámico para pequeñas páginas web, actualmente PHP se utiliza para desarrollar aplicaciones web complejas, por lo que es importante poder realizar las pruebas pertinentes a nuestro código.

Entre las características nos encontramos con:

  • Forma parte del grupo de frameworks de xUnit
  • Puerto completo deJUnit para PHP5.
  • Soporte para Mock Objects (jMock).
  • Almacena los resultados en una Test Database.
  • Se integra con varias aplicaciones de test.

PHPUnit

|

CSS grid: filas con misma altura

ByLuis

Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.

Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:

.grid {
  margin: 0 auto;
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  grid-auto-rows: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid--same-height .cell {
  position: relative;
}
.grid--same-height .cell::before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.grid--same-height .content {
  height: 100%;
  position: absolute;
  margin-top: -100%;
}

Teniendo en cuenta que el HTML sería:

<div id="grid" class="grid">
  <div class="cell">
    <div class="content">
      <img src="https://picsum.photos/500/500"/>
    </div>
  </div>
  ...
</div>

Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.

Podéis ver un ejemplo en este pen