PHP: Ejemplo de mal lenguaje
Supongamos que tenemos 5 variables a, b, c, d y e. Y que todas y cada una de las siguientes evaluaciones devuelven TRUE.
$a === $b $b === $c $c === $d $d === $e
Además si hacemos lo siguiente:
var_dump($a); var_dump($b); var_dump($c); var_dump($d); var_dump($e);
Obtenemos exactamente la misma definición, repetida 5 veces, por salida estándar.
Llegados a este punto, hemos analizado -todo lo que el lenguaje nos permite- nuestras 5 variables. Todas parecen ser idénticas, no hay ninguna propiedad en ellas que podamos medir y que nos permitan diferenciar unas de otras.
Sin embargo, al hacer lo siguiente:
$b = new stdClass;
Al volver a repetir las evaluaciones iniciales el resultado es el siguiente:
$a === $b //FALSE $b === $c //TRUE $c === $d //TRUE $d === $e //TRUE
En conclusión: 5 entidades que según el lenguaje son idénticas y por lo tanto, deben comportarse de la misma forma, tienen un comportamiento diferente; debido a propiedades internas imposibles de discernir en la capa de código.
Este es un claro ejemplo de pésimo diseño a nivel de lenguaje y, por supuesto, una fuente potencial de fuertes dolores de cabeza para cualquier programador.
Como pequeño ejercicio: ¿alguien sabe cómo hay que inicializar las 5 variables para que se comporten de la forma descrita?
Leer másPara cada uno de mis descuidos…
Un problema rápido en PHP, un lenguaje que todo el mundo dice conocer… y del que en realidad muy pocos tienen algo de idea:
<?php
class Fruit
{
function __construct($name)
{
$this->name=$name;
$this->stock['current']=array('value' => 3);
$this->stock['cache']=array('value' => 3);
}
function setStock($new_stock)
{
foreach($this->stock as $key => $current_stock)
{
$current_stock['value']=$new_stock;
}
}
}
$fruits=array(
"apple" => new Fruit("Apple"),
"peach" => new Fruit("Peach")
);
//Run!
foreach($fruits as $fruit)
{
$fruit->setStock(8);
echo $fruit->name." = ".$fruit->stock['current']['value']."\n";
}
foreach($fruits as $fruit)
{
$fruit->stock['current']['value']=8;
$fruit->stock['cache']['value']=8;
echo $fruit->name." = ".$fruit->stock['current']['value']."\n";
}
Este código saca por pantalla:
Apple = 3
Peach = 3
Apple = 8
Peach = 8
¿Por qué en el primer foreach no funciona el setStock a 8? ¿Por qué en el segundo sí? Dad una explicación y proponed alguna solución para arreglarlo. El premio para el primero que acierte es, como de costumbre, es una botella de kilkenny 😉
Proporciones Perfectas
¿Alguna vez os habéis sentido atrapados? Ya sabéis; recluidos. Confinados en una vida de la que no podéis escapar…
Pasan los años hasta que nos damos cuenta. Probablemente, cuando ya desesperados intentamos movernos y cambiar. Descubrimos entonces cómo la inercia de lo que hemos creído que somos y el pasado son unas duras cadenas. El entorno y la rutina se han convertido en las paredes de una celda y fortaleza que sólo nos deja expandirnos con límites. Vuestra evolución queda a merced de un espacio reducido; os perdéis las posibilidades del mundo entero… para vivir encerrados y casi sin opciones.
¿Os suena?
Claro, en informática a eso le llamamos sandbox.
Un entorno “cerrado” en el que los coders programan con los dedos mutilados. Os lo venderán como un invento maravilloso en pro de la seguridad; la celda ya no será celda, será un refugio. Todos aplaudirán y morirá la libertad. Al fin y al cabo, para los usuarios, la libertad es sólo un pequeño precio a pagar ante un escudo de papel que les proteja de su la falta de sentido común.
No estoy hablando de nada extraño o exótico. La web es exactamente esto; un ejemplo perfecto (y por desgracia, no el único).
Y de este tema, sobre las deficiencias del diseño de esta jaula aceptada y autoimpuesta diseñada desde la w3c (formada por el trío de estándares HTML, CSS, y JS) llega el problema de hoy, el segundo que os proponen los laboratorios lambda.
El problema:
Uno de los pilares del diseño web responsivo son las imágenes flexibles. Bajo este nombre, que intenta vanamente hacerse creer sofisticado, se esconde una idea muy simple: imágenes que escalan automáticamente en función del tamaño (anchura) de su padre en el DOM.
En principio una imagen se mostrará a su tamaño original, y si para ello tiene que “empujar” a su padre (por ejemplo un div) a ser más alto o más ancho, lo hará. Sin embargo, al poner la propiedad de CSS max-width:100% en la imagen, le estamos diciendo al navegador que esa imagen como máximo sea igual de ancha que su padre, así que ya no le empujará, y variará su tamaño en consecuencia cada vez que lo haga su padre (que deberá, junto a todos sus ascendientes, tener anchos relativos que se propaguen hasta el viewport).
Os he preparado un ejemplo en Fiddle (clic aquí). En el ejemplo tenéis 4 ventanas para código html, css, js y el resultado final. Probad a cambiar el tamaño de la ventana del resultado final para ver cómo la imagen cambia su tamaño al del padre en todo momento.
¿Notáis algo raro?
Efectivamente, el navegador está cambiando también la altura de la imagen aún cuando le hemos especificado que sólo cambie el ancho. Esto es porque el navegador sabe que la imagen tiene unas proporciones que se deben respetar, al cambiar el ancho, cambia también el alto, y con el alto de la imagen, cambia también el alto de sus padres, ya que no tienen un alto definido ni hay otros elementos que le “empujen” a tener más altura.
Cuestión:
Nosotros no tenemos libertad para definir comportamientos nuevos en CSS, y, por desgracia, no hay ninguna forma (directa) de especificar proporciones a elementos HTML de la misma forma que lo tienen las imágenes. El problema de hoy es crear un div con un aspect-ratio concreto (el que sea) y hacerlo “flexible” como si fuera una imagen, de forma que ocupe a todo su padre en anchura y su altura varíe automáticamente manteniendo siempre la proporción respecto a la anchura.
Os he preparado un ejemplo para que lo completéis aquí.
¿Parece fácil? No lo es 😉 Pero este ejercicio os ayudará a descubrir hasta que punto la cárcel es una cárcel.
Por supuesto está prohibidísimo usar javascript (nada de chapuzas). Solo CSS y HTML.
Venga, ¡¡a por él!!
*** SOLUCIÓN ***
Una vez más no tenemos ningún ganador… 🙁 Esta vez ni siquiera han habido soluciones propuestas. La cerveza prometida se está calentando… y algunos me habéis transmitido que no sabéis ni por donde empezar con este problema.
La solución la tenéis aquí (link). Probad a redimensionar la ventana a lo ancho (con la barra gris del centro de la página) para ver como el div escala manteniendo la proporción.
El código está en la solución, y lo comento rápidamente:
Necesitamos crear un contenedor auxiliar para nuestro div. Así que lo envolvemos en otro div “aux” en la solución. ¿Por qué? Porque este div auxiliar podrá controlar la altura en función de la anchura con la propiedad padding-top. En CSS, podemos poner un padding-top porcentual que será siempre relativo a la anchura del padre; de esta forma podemos jugar con un porcentaje que represente un aspect-ratio concreto (en nuestro ejemplo el padding-top es 50%, representa un aspect-ratio de 2:1; para un aspect-ratio tipo pantalla de PC panorámica (16:9) usaríamos 56.25% = 9/16*100).
Ahora tenemos un div auxiliar que marca las proporciones, pero no puede tener contenido porque toda su altura es de padding. La solución es marcarle su propiedad position como relative, y la del div original con contenido como absolute, junto a su top y a su left iguales a 0. También establecemos su ancho y altura iguales a las de su padre auxiliar dando valores de 100% a width y a height.
Con esto, tenemos el div “c” ocupando todo el div auxiliar que tiene, exactamente, el tamaño que queremos en todo momento; escalando según las dimensiones del viewport.
Leer más