Similar Posts

links for 2006-11-09

ByLuis

links for 2007-03-06

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

ntop: monitorización del uso de la red

ByLuis

ntop es una herramienta que permite medir el uso de la red, funciona tanto en Unix como en Windows y mediante navegación web podemos ver la información de tráfico y obtener un volcado del estado de la red.
ntop.png
Ofrece configuración y administración limitada vía web y poco consumo de memoria y CPU.
ntop

|

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