2017/12/13

Test de internet con ping en NodeJS


En estos días he tenido intermitencias en el servicio de internet.

Mi forma de comprobarlo es entrar en una consola y hacer ping a un host, como google.com, y ver si está ok o no.

$ ping google.com -t


El -t permite que el ping se haga indefinidamente, hasta que se presione CTR + C.

Sin embargo, quería una forma de mostrar los cambios de estado, a qué hora ocurrían y cuánto duraban.

Programé esta solución usando nodejs:

GitHub Gist: Internet test with ping in NodeJS

const ping = require('ping');

let host = '8.8.8.8';

if (process.argv[2]) {
  host = process.argv[2];
} else {
  console.log("Syntax: \nnode ping-test-ifchanges-host host");
}

console.log("Testing host: " + host);

let isAlivePrev = false;
let nowPrev = new Date();

function doPing() {
  ping.sys.probe(host, isAlive => {
    if (isAlive !== isAlivePrev) {
      let now = new Date();
      let diff = (now.getTime() - nowPrev.getTime())/1000;
      let timestamp = now.toISOString() + ' after: ' + diff + ' s';
      console.log("\n" 
        + host + ': ' 
        + (isAlive ? ' OK' : ' KO') 
        + ' ' + timestamp);
      isAlivePrev = isAlive;
      nowPrev = now;
    } else {
      process.stdout.write('.');
    }
  });
}

setInterval(doPing, 1000);

Para correrlo en consola:

$ node ping-test-ifchanges-host google.com

Idea

setInterval() establece un llamado, cada 1000 ms, a doPing(), que hace un ping al host que se haya indicado y revisa si hay un cambio de estado.

Si hay un cambio de estado, anota el tiempo y muestra las diferencias respecto al tiempo anterior.

Si no hay cambio de estado, imprime simplemente un punto.

2017/12/04

CSS: Checkbox hack para controles personalizados

¿Cómo aplicar un estilo como respuesta a un click, usando sólamente CSS?

Se puede hacer con el checkbox hack.

Principio

  • Un label asociado a un input puede recibir el click por él
    • Puede haber varios labels para un mismo input
    • Ocultando el input (difícil de personalizar), queda el label para contener un control más fácil de personalizar
  • La pseudoclass :checked permite ubicar un checkbox seleccionado
  • El selector aaa + bbb permite seleccionar un bbb que esté (declarado) inmediatamente después de un aaa

Patrón 1

HTML:
<input id="checkbox-control" type="checkbox">
<label for="checkbox-control">Control</label>

CSS:
#checkbox-control:checked + label {...}

Patrón 2

HTML:
<label for="checkbox-control">Control</label>
<input id="checkbox-control" type="checkbox">
<div class="target">Target</div>

CSS:
#checkbox-control:checked + .target {...} 

Patrón 3

HTML:
<input id="checkbox-control" type="checkbox">
<label for="checkbox-control">Control</label>
<div class="target">Target</div>

CSS:
#checkbox-control:checked + label {...}
#checkbox-control:checked + label + .target {...}

Ideas de aplicación

  • Checkbox personalizado
    • Toggle
  • Tabs
  • Dropdown menu
  • Dot control para slider
  • Árbol desplegable
Ver unos ejemplos en A check studio, en CodePen

Referencias