Archivo de la categoría: internet

¡¿Cuanto dices que cuesta renovar el hosting?!

[internet]

Hace 3 años me despedí de 1and1, y me pasé a A2Hosting. Pagué unos 100€ por 3 años de hosting, y sinceramente pensaba que si todo iba bien, no volvería a cambiar de hosting en mucho tiempo.

Cúal fue mi sorpresa cuando hace unos días, recibí una factura por valor de 400€ para los próximos 3 años. ¡¡¡CUATROCIENTOS EUROS!!! Para el hosting de una página estática con un tráfico ridículo…

La factura se haría efectiva en unos días, así que rápidamente busqué alternativas, y encontré Hostinger, que ofrece 4 años por 115€. ¡Mejor oferta que lo que pagué hace 3 años, e infinitamente mejor que la renovación!

Por lo que he visto, todos los hostings hacen igual, y a la hora de renovar el precio se multiplica, así que me tocará volver a cambiar de hosting en 4 años.

Por suerte este blog es extremadamente sencillo de mover. Un simple comando de SSH, y ya está funcionando.

Importante para la próxima vez:

  • Recuerda cambiar las entradas MX para que siga funcionado el correo.

¡Sayōnara 1and1!

[internet]

Cuando migré el blog de Wordpress a Hugo en 2017, también cambié el plan que tenía contratado con 1and1, ya que no necesitaba que la página fuese dinámica, y podía usar un plan más económico.

Con el tiempo, 1and1 me quitó la habilidad de actualizar el blog por SSH, ya que imagino que no estaba incluido en el plan que tenía contratado. Pero se puede ver claramente que desde 2018 no he actualizado el blog tan a menudo, por lo que tampoco era un gran problema.

Pero a partir de 2020, sin motivo aparente (aunque sospecho que vino acompañado del cambio de branding a Ionos), decidieron cobrarme el doble, y después aplicar un “descuento”, dejando la factura en 20 € más al año.

He querido abandonar 1and1 desde entonces, pero han pasado un par de años sin dar ese paso…

Por otro lado, he estado reflexionando en quien es el público objetivo de mi blog, y la conclusión es clara. Yo soy mi propio público. Este blog siempre ha sido para mí como un cuaderno de bitácora, un lugar donde descargar mis pensamientos. Esto se ha acentuado con el planificador de recetas y todas las nuevas recetas que he añadido durante los últimos años. Sin duda soy yo quien más visita este blog.

Con esto en mente, he cambiado mi punto de vista sobre un par de temas. ¿Realmente me importan las estadísticas de visitas de este blog? ¿Realmente me importa que la gente comparta el blog en redes sociales?

Hubo un tiempo donde esto me importaba, pero ya no, me da bastante igual. Por lo que he quitado todo lo relacionado con Google Analytics y los enlaces para compartir en Facebook (ugh) y Twitter.

Siguiendo en esa línea, ¿le tengo un gran apego al dominio de KonnichiwaMundo? Me sigue gustando como nombre para el blog, pero el dominio me da igual. No me importa perder (si lo hay) algún enlace que me apunte. Por lo que aprovechando que tengo otro dominio personal, he decidido abandonar el dominio anterior.

Es aquí donde todo enlaza con el inicio de esta historia. Con toda esta inercia de cambios, parece el momento perfecto para cambiar también de hosting y librarme por fin de 1and1. Me he cambiado a a2Hosting y por el momento genial, es rápido, un buen panel de control y funcionando en 1 día, y por fin recupero el acceso por SSH.

Por último, con todos estos cambios he descubierto que algunos enlaces en el blog, que apuntaban a mi propio blog, estaban muertos. Cual ha sido mi sorpresa al descubrir que esos enlaces no llevaban a una página 404, sino a una página de Ionos donde aprovechan para meter publicidad y enlaces para SEO.

Página de SEO y publicidad de Ionos

Definitivamente, vete a la mierda 1and1/Ionos.

Herramientas de color para desarrolladores web

[internet]

Desde que empecé a trabajar como desarrollador web hace ya más de 8 años, siempre he trabajado en el frontend y el backend. Pero como no soy diseñador, aunque con el tiempo he ido aprendiendo que funciona y que no, elegir colores es algo que siempre me ha costado mucho esfuerzo. Es por eso que he ido recopilando herramientas que me permitan jugar e inspirarme para encontrar el color adecuado para cada ocasión. Aquí dejo una lista de las que uso más a menudo.

color-hex

Esta es probablemente la más sencilla, pero también la que más visito. Básicamente se trata de una base de datos con todos lo colores web existentes. Al introducir un color te muestra toda su información, distintas variaciones y como queda al ser usado sobre distintos colores de fondo. También te da ejemplos de código por lo que es muy útil cuando quieres convertir un color de hexadecimal a su nomenclatura rgb.

Name that Color

Desde hace un par de años estoy usando SASS para generar mi código CSS, y una de los cosas que intento es usar siempre variables para los colores. Cuando tienes un par de colores no hay mucho problema, pero cuando tienes más y más colores, y paletas de grises, empieza a ser complicado darle un nombre distintivo a cada uno. Ahí es donde esta página entra en juego, le das un código de color y te dice su nombre. ¡Perfecto para nombrar variables!

Coolors

Esta es la herramienta perfecta cuando quieres jugar con el color. Te permite tener hasta cinco colores a la vez y modificar todos sus parámetros en cualquiera de sus modelos de color (RGB, HSB y CMYK). Además, también le da nombre a los colores, por lo que si la página anterior me da un nombre repetido, siempre puedo usar esta para obtener otro.

HTML Color Codes

Esta es la última herramienta que he incorporado, y le doy un uso muy específico. En concreto, generar los colores triádicos y cuadráticos a partir de un color. Sin duda es la herramienta que menos uso, pero siempre viene bien tener algo con lo que poder generar colores complementarios.

Cómo saber cuando se actualizó una web por última vez

[internet] [programación]

Evidentemente esto solo funcionará en páginas estáticas, pero más de una vez me he encontrado con alguna librería de PHP o JQuery que no mostraban ninguna fecha de última actualización en su web. Para esas situaciones, podemos abrir el Firebug y en la consola escribir lo siguiente:

javascript:alert(document.lastModified)

Saltará una alerta con la fecha de la última modificación.

Excluir tus propias visitas de las estadísticas de Google Analytics

[internet]

Aquí hay un buen tutorial sobre como hacer esto mediante una cookie, a diferencia de hacerlo con el filtrado de IP, ya que si no tienes una IP estática, no es una solución satisfactoria.

Sin embargo, la solución que se ofrece en el enlace no funciona con el código asíncrono que utiliza actualmente Google Analytics. La solución es usa la función push para almacenar la variable:

_gaq.push(['_setVar','stop_counting_me']);

Podemos meter esta línea dentro del código del Google Analytics en la página stopcountingme.html, quedando de la siguiente manera:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setVar','stop_counting_me']);
(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();

Extensiones imprescindibles para Firefox

[internet] [software]

Estoy seguro que esta lista crecerá con el tiempo, pero por el momento estas son las extensiones que han pasado a ser imprescindibles en mi uso del Firefox:

Adblock Plus

Francamente, me resultaría muy difícil tener que volver a navegar sin esta excelente extensión bloqueando toda la publicidad de internet.

Firebug

Otra extensión que me resulta imprescindible, en esta ocasión para la creación de páginas web. Los navegadores están incorporando mejores herramientas para desarrolladores, pero por el momento Firebug sigue siendo la herramienta más versátil y fácil de usar.

Web Developer

Otra excelente herramienta para desarrollar webs, en esta ocasión con una gran variedad de utilidades para redimensionar, medir tamaños, limpiar caché/cookies, etc.

Stylish

Ya he hablado con anterioridad de Stylish, y es que esta sencilla extensión te permite modificar por completo el aspecto de cualquier página web para adecuarlo a tus gustos y necesidades. Eso unido a la gran variedad de temas existentes te permite ver las páginas a tu manera.

Brief

Este lo he empezado a usar hace poco, y se ha vuelto rápidamente en un imprescindible. Básicamente te avisa cuando hay algo nuevo en las webs que tengan RSS y las añadas a marcadores. Al menos me ha quitado el impulso de recorrer todas las webs buscando algo nuevo. Entre Brief y Twitter, casi todas las novedades me llegan automáticamente.

BlockSite

Esta extensión te permite bloquear una web para que ya no sea accesible. En ocasiones detecto que una web me está consumiendo más tiempo del que debería, sobre todo webs chorras, así que las voy añadiendo a la lista de bloqueadas para recordarme a mi mismo que debería estar haciendo otras cosas más productivas… 😛

Oscureciendo la web

[internet]

Últimamente, al final del día me duelen los ojos y la cabeza. Me paso el día frente a la pantalla del ordenador y la mayoría de aplicaciones que utilizo y webs que visito tienen un fondo blanco o muy claro, produciendo mucha luminosidad. He pensado que tal vez, si cambio esos fondos tan brillantes por otros más oscuros, me acabará doliendo menos la cabeza. Algunas webs ofrecen distintos temas que permiten cambiar los colores, pero la mayoría tienen un estilo único.

Aquí es donde entra Stylish en acción. Básicamente, es un complemento para Firefox que permite añadir código CSS a cualquier página web, y que este código se vuelva a cargar cada vez que visites la web (como si hicieses cambios con el Firebug, y los cambios siguen ahí cuando refrescas la página). En userstyles.org hay un montón de temas que ha subido la gente para una buena variedad de páginas web. Estas son las que estoy usando actualmente:

NeoGAF

NeoGAF Pro Dark: No solo lo vuelve oscuro, sino que además añade algunos estilos que lo hacen más bonito. NeoGAF ha lanzado su nuevo aspecto para 2013 y esta nueva versión trae la posiblidad de cambiar a un tema oscuro, así que ya no es necesario usar Stylish. Ha salido también la nueva versión de este estilo, y oscurece un poco más la web, así que vuelve a valer la pena usarlo.

Twitter

[Actualización: 7/2/2014] Con los últimos cambio en la interfaz online de Twitter, la combinación de estilos que usaba hasta ahora ya no es efectiva. Por suerte he encontrado Dark Twitter by Batmop que casi me gusta más que la conbinación anterior.

Twitter Dark CALM Blue Glow: Versión oscura con algunos toques de azul. Tiene algunos fallos, pero son facilmente corregibles.

Twitter Wide 1020px: Hace Twitter más ancho para aprovechar más la pantalla.

Gmail

Gmail Dark Theme Fix: ¡Este lo he hecho yo! Básicamente, le da un fondo oscuro a los mensajes, que actualmente es blanco.

Youtube

Black Youtube by Panos: Su nombre lo dice todo, Youtube con un fondo negro.

Youtube centered, no recomendations, no comments: Este también es creación mía. Elimino la barra derecha de recomendaciones y elimino los comentarios. Después hago más grande el vídeo y lo pongo todo centrado. Junto con el estilo de Panos para hacer Youtube oscuro se consigue una muy buena combinación.

Google

Black Google By Panos: Como su nombre indica, es Google pero en negro. La pena es que solo funciona para la búsqueda de texto. Para imágenes falla bastante y en el resto de aplicaciones de Google no parece hacer nada.

Wikipedia

Wikipedia – Dark, blue, simple: Como su nombre bien indica, fondo oscuro con letras blancas y enlaces en azul.

Wikipedia – Layout, enhanced: Este funciona en conjunción con el anterior, logrando un resultado muy agradable. Esconde todos lo menús en una barra superior, dejando en pantalla solo el texto para una mejor lectura.

Ocultar con Adblock un div que no tiene ni “class” ni “id”

[internet]

Ya expliqué en un artículo anterior como bloquear un div que tenía una clase. Ocultar un div que tiene un “id” es igual de sencillo:

Ocultar div con clase: ##div.la-clase

Ocultar div con “id”: ##div#el-id

¿Pero que ocurre cuando un div no tiene ni clase ni “id”? Entonces tendremos que recurrir a filtrar según sus atributos. Supongamos que tenemos este div:

<div style="width: 200px; height: 150px; background-color: blue; border-style: dotted; border-color: red;">
...
</div>

En este caso podriamos hacer un filtro con el contenido del “style”:

##div[style="width: 200px; height: 150px; background-color: blue; border-style: dotted; border-color: red;"]

Pero tal vez hay otros divs similares, con el mismo borde pero distintos tamaños, entonces haríamos lo siguiente:

##div[style*="border-style: dotted; border-color: red;"]

El asterisco indica cualquier elementos que incluya esos estilos.

En la documentación del Adblock tienen una completa lista de ejemplos de filtros.

La pregunta es, ¿se podría ocultar un div que no tiene clase, ni “id”, ni ningún atributo?

Ocultar “A quién seguir” en twitter usando AdBlock Plus

[internet]

Yo uso Twitter vía web, y sigo a poca gente y no me apetece tener un cuadro ofreciéndome seguir a gente que no me interesa, así que indagando un poco vi que se puede usar AdBlock Plus para ocultarlo con mucha facilidad. Esto es lo que hay que hacer:

  1. Instalar AdBlock Plus.
  2. En el menú del ABP, vamos a Preferencias de filtros…
  3. Pulsamos el botón Añadir grupo de filtros. Como nombre le he puesto Twitter.
  4. En el desplegable de Acciones para el filtro de Twitter seleccionamos Mostrar/ocultar filtros.
  5. Pulsamos en Añadir filtro y escribimos ##div.wtf-module

Y ya está, así de fácil. Los corchetes ## indican que queremos ocultar, div indica que lo que queremos ocultar es un div y .wtf-module indica que el elemento a ocultar tiene la clase wtf-module.

En la página de ABP tenéis una excelente documentación sobre como escribir filtros.

WordPress Error 403 – Forbidden: Access is denied

[internet]

Ayer por la noche terminé de ver el último anime que tenía pendiente de esta temporada, así que me metí en el blog para terminar el artículo con las recomendaciones. Lo escribí sin problemas, pero cuando intentaba previsualizarlo me llevaba a la página principal de Leadhoster. Se que algunos hostings gratuitos no soportan las páginas de error, así que imaginé que debía de estar dando algún error, y aunque me extrañó, no le di mayor importancia.

Termino el artículo, lo publico, y voy a la página principal para ver como ha quedado…. cuando para mi sorpresa me redirige de nuevo a la página del hoster. Claro, la primera impresión es “algo he tocado”. Antes funcionaba y después de publicar, ya no va. Intento mirar si hay algo raro con el artículo, pero es todo normal. Pienso que tal vez es algún plugin, ya que he instalado un par recientemente y los desactivo. Nada, sigue fallando. Tal vez es mi propio plugin, el acordeón de artículos, que con el cambio de mes (coincide que es 1 de octubre) puede estar dando algún error. Lo desactivo pero nada. Pienso en desactivar el resto, pero no veo como pueden estar afectando a la página principal.

Vuelvo a los articulos e intento previsualizar uno de ellos, ¡y funciona! Empiezo a visualizar el resto de artículos y todos funcionan. Puedo mostrar las categorías, puedo moverme por los artículos y el panel de control sigue funcionando sin problemas. El problema afecta únicamente a la página principal.

En la consola de errores de javascript no hay nada, y si es un error de php, no tengo forma de detectarlo. En ese momento me acuerdo del mejor complemento del mundo mundial, ¡el Firebug!

Abro la función de red para ver que peticiones se realizan, y veo que al cargar la página principal salta un error y hace una redirección. Demasiado rápido para leerlo. Reintento y esta vez detengo la carga.

Error 403 – Forbidden: Access is denied WTF! Empiezo a pensar que no va a ser culpa mía…..

Me pongo a buscar en Google el error, y parece bastante común. Las soluciones más planteadas fueron 3:

  1. El fichero o directorio no tiene los permisos adecuados. Hice la comprobación y estaban todos a 755, así que descartado.
  2. El fichero .htaccess está mal. Tal vez se había modificado de alguna manera, pero lo comparé con la copia de seguridad y estaba todo correcto. Descartado.
  3. Un problema con el servidor Apache. Ummm, si este es realmente el problema, teniendo en cuenta que no tengo acceso al servidor, estoy en un callejón sin salida.

Como ninguna de estas alternativas me proporcionaba una solución, opte por mi aproximación favorita a los problemas, ¡MATAR MOSCAS A CAÑONAZOS!

Me pongo a buscar un nuevo hosting, encuentro Freehostia que tiene muy buena pinta (además de un nombre gracioso ¡Hostias gratis para todos!). Subo la copia de seguridad por FTP, exporto/importo la base de datos, cambio los DNS del domino y ¡tachán! Migración express. Y oh! sorpresa! El blog vuelve a funcionar.

Así que ya tengo actualizado el artículo con la comparativa de hostings que hice hace un tiempo.