links for 2007-01-31

ByLuis

Similar Posts

|

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

links for 2007-01-12

ByLuis

Closures en PHP5.3

ByLuis

Closures son bloques de código que pueden ser pasados a una función y que pueden manejar variables que están definidas en el mismo ámbito. Algo que puede ser bastante útil cuando queremos repetir un código que solo se ejecutará en un lugar determinado y no queremos definir una función a nivel de clase para poder usarla.

Un vistazo a un ejemplo nos podrá ayudar de mejor manera:

function replace_in_array ($search, $replacement, $array) {
$map = function ($text) use ($search, $replacement) {
if (strpos ($text, $search) > 50) {
return str_replace ($search, $replacement, $text);
} else {
return $text;
}
};
return array_map ($map, $array);
}

Como se puede ver se trata de definir una función con una serie de parámetros, indicar qué variables del mismo ámbito puede usar y una vez definida, realizar la llamada a la función.

Closures en PHP5.3

Vía / Spinning de web

Librería OAuth para Twitter

ByLuis

Twitter OAuth PHP Class es una librería que nos vendrá muy bien para poder utilizar el API de Twitter usando OAuth, método de autenticación que no necesita que el usuario registre su usuario/contraseña en otras aplicaciones.

Un ejemplo de uso sería el siguiente:

$to = new TwitterOAuth($consumer_key, $consumer_secret);
$tok = $to->getRequestToken();
$request_link = $to->getAuthorizeURL($token);
$tok = $to->getAccessToken();
$to = new TwitterOAuth($consumer_key, $consumer_secret, $user_access_key, $user_access_secret);
$content = $to->OAuthRequest('https://twitter.com/account/verify_credentials.xml', array(), 'GET');
$content = $to->OAuthRequest('https://twitter.com/statuses/update.xml', array('status' => 'Test OAuth update. #testoauth'), 'POST');

Twitter OAuth PHP Class

Vía / PHPDeveloper.org

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

links for 2007-01-19

ByLuis