Crear una nube de etiquetas con jQuery

ByLuis

Aunque las nubes de etiquetas ya no están tan de moda como hace un tiempo, el tutorial donde explican cómo hacer un tagscloud mediante jQuery merece la pena, ya que se trata de una explicación detallada.
No solo se centra en jQuery, sino en la parte PHP que devuelve los datos en JSON y en los estilos CSS para mostrar las etiquetas según su relevancia.
Realmente la parte jQuery solo cambia el tamaño de la letra según la frecuencia de la etiqueta.
Building a jQuery-Powered Tag-Cloud

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

Evitar errores de producción debidos a Firebug

ByLuis

Aquellos que usamos Firebug para depurar nuestras aplicaciones, podemos cometer el error de dejar una traza (console.log())y que al subirlo a producción el usuario tenga un error de Javascript. Para evitar esto, podemos incluir en nuestro script lo siguiente:

if(!window.console) {
window.console = {
log: function() {}
}
}

Visto en este ejemplo

Comprobar si un puerto está abierto con PHP

ByLuis

Algo que nos puede ser muy útil cuando estamos haciendo aplicaciones distribuidas, es saber si el puerto de una máquina está abierto. Otro ejemplo es que si queremos incluir contenido de otro sitio en nuestra página y no queremos que nos devuelva una página de error no personalizado, podemos hacer lo mismo, comprobar si está el puerto 80 abierto:

<?php
// Dominio a comprobar
$sitio = "www.dominio.com";
// Puerto a comprobar, el web es el 80
$puerto = 80;
$fp = fsockopen($sitio,$puerto,$errno,$errstr,10);
if(!$fp)
{
echo "No ha sido posible la conexión";
// El modo de tratamiento del error puede ser el que se quiera, por ejemplo enviar un email.
}else{
echo "Conexión realizada con éxito.";
fclose($fp);
}
?>

PHP port check

linkNotify: plugin jQuery que indica que se carga un enlace

ByLuis

linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.

$('a').linkNotify('Espera mientras carga la pagina...');

linkNotify

Librería PHP para evitar SQL injection y XSS

ByLuis

Algo que debemos tener muy en cuenta cuando realizamos nuestra aplicación web es limpiar la entrada de datos de contenido malicioso, ya sea para SQL injection o cross-site scripting (XSS). Los frameworks suelen tener su propia librería que se encarga de ello, pero para aquellos que no usen framework o hagan una aplicación muy sencilla, esta librería les vendrá muy bien.

// Output an unsafe string, presumably user input
$xss = '';
echo 'If your entered your name as ' . $xss . ', we\'d be in trouble.
' . "\n";
 
// Sanitize that string, and output it safely
$htmlContentContext = sgSanitizer::sanitizeForHTMLContent($xss);
echo "But if we sanitize your name, " . $htmlContentContext . ", then all is well.
\n";

Genius Open Source Libraries

Vía / PHPDeveloper.org

Konstruktors: snippets CSS

ByLuis

konstruktor.pngKonstruktors es un lugar dónde podremos encontrar códigos CSS para copiar y pegar. No se trata de ficheros independientes, sino de trozos de código.
Mantener código CSS en ficheros de texto no es difícil, y es conveniente teniendo múltiples llamadas HTTP. Si tenemos bien organizados nuestros estilos, con estos trozos de código podremos modificar los estilos sin mayor dificultad.
Los trozos de código se dividen en uso para grid, aspectos básicos de HTML y menús.
Konstruktors
Vía / Posh CSS