Categoría: Programacion
Nightmode: cómo resolverlo con CSS y Javascript
El otro día les comenté que había agregado el BB Code y el Nightmode, hoy les quería mostrar cómo es que se implementa esto último, no es para nada difícil!
Así que también aprovecho otra cosa que le agregué al blog la posibilidad de mostrar código con colores un poco más amenos que un simple cambio de tipografía.
Lo único que utilicé en este caso es Javascript y CSS porque es tan sólo visual, es un cambio que en cualquier browser moderno se debería ver sin problemas y no tengo idea si se ve bien en alguno viejo pero... vamos, acaso alguno sigue usando IE6? lo tiraría a la hoguera
BB Code para los comentarios
Bueno, anoche programé algo que me habían pedido varios: agregué al blog la posibilidad de utilizar BB Code.
¿Qué es el BBCode? es el sistema que tienen los foros para poder agregar en un comentario tanto formato de texto como enlaces, imagenes y videos sin que se rompa todo. ¿Por qué el blog no permite comentar con HTML? Sencillo, cuando esa función estaba liberada en muchos sitios algunos pillos la usaron para inyectar Javascript o código que rompía el sitio así que, de alguna forma, había que limitarlo.
El blog tenía, ya de por sí, su propio sistema que todavía funciona (no se chocan) así que los viejos comentarios deberían funcionar pero ahora pueden usar BBCode para los nuevos. ¿Cómo se usa? A continuación les comento un poco, después veo de ponerlo de alguna forma más amena.
Obviamente los cambios en el blog no se terminan, por eso es que sigo armando cosas y tirando algunas líneas de código.
Mysql: Cómo recuperar una tabla con caracteres Latin1 mal pasados a UTF-8
Demasiado específico el post así que le dejé un título acorde cada tanto hago posteos de "trabajo" con tips que voy descubriendo, sino ni yo me acuerdo cómo se hacía
Más de una vez en un servidor alguien "rompe" todos los textos porque hace una mala conversión, en alguna importación pasan una base de datos que estaba en Latin1 y no la convierten en UTF-8, la mandan así directo.
Los caracteres con tildes o símbolos quedan todos mal:
á = á
é = é
Ã- = í
ó = ó
ñ = ñ
á = Á
Le pasó a un amigo hoy y se lo solucioné de la forma más sencilla que existe, un simple query:
UPDATE tabla SET texto =
CONVERT(BINARY CONVERT(texto USING latin1) USING utf8);
Me encanta cuando una solución tiene tan pocos caracteres, es genialmente elegante.
Ahora bien, salvedades, si hay contenido mixto, algunos en UTF-8 y otros en Latin1 pueden romper lo que ya estaba bien, así que úsenlo con un WHERE que separe una cosa de la otra. Obviamente hagan el debido backup antes de usar esto.
Y para aquellos que quieran soporte de Emojis en la tabla sí o sí recomiendo usar utf8mb4 como Collation porque utf8 a secas no lo soporta y te va a dar error si querés insertar uno
Una ayudita para dos errores comunes en XAMPP y otros
Para aquellos web developers que tienen que trabajar en PCs con Windows una solución muy común es instalar a mano todo o utilizar un paquete como XAMPP o WAMP o similar. Hay varios pero eso no es lo relevante, el problema es el manejo (o más bien, la falta de...) de certificados en la Windola.
A veces por más que queramos no podemos instalar un Linux (mi PC de laburo tiene 6GB de RAM, olvídense de virtualizar) y siempre desarrollar en local es lo mejor, así que vamos con dos tips para dos errores comunes, usualmente cuando usamos CURL y cómo resolverlos. Y si, se que muchos ya no usan PHP porque no es "cool", pero ellos tienen otros problemas (dale Node, dejá de descargar mil paquetes para un puto hola mundo), pero todavía hay millones de desarrollos en esta plataforma.
Lo común es encontrarse con el error:
Fatal error: Uncaught CurlException: 77: error setting certificate verify locations
o similares, si justo estan trabajando con la API de Facebook (y su SDK) seguro que se les da, otro también es:
SSL certificate error: unable to get local issuer certificate
Mismo problema pero con el certificado SSL, pues bien, lo ideal en estos casos es descargar un certificado válido (el famoso cacert.pem o ca-bundle.crt) e instalarlo de forma local y manual.
Primero que nada apaguen Apache, stop al servicio, y busquen dónde está PHP en su instalación. Si utilizan XAMPP seguro es bajo C:\xampp\php\
Descarguen uno de estos certificados, este o este y lo guardan en la misma carpeta.
Luego editan el archivo php.ini y buscan dos tags en particular: curl.cainfo y openssl.cafile y agregan la ruta al certificado:
curl.cainfo="C:/xampp/ca-bundle.crt"
openssl.cafile="C:/xampp/ca-bundle.crt"
Ahora pueden reiniciar el Apache (o Nginx, lo que usen) y listo, su app de prueba de facebook o google o lo que sea que necesite certificado va a funcionar (si tienen suerte ).
El problema del volumen de datos que nunca pudiste probar
Más de una vez programamos algo pensando que está funcionando ok, que la solución fue bien pensada, que está todo como debería. Lo probamos, "en local funciona", armamos el deploy y lo mandamos al servidor sin volver a pensar en él.
Pero siempre, siempre, hay un problema de performance, y les puedo contar mil y una historias de problemas semejantes. Nadie testea una puta mierda con volúmen, nadie le da importancia y todo empieza a fallar.
Como sabrán algunos este blog no utiliza Wordpress, lo programé todo de cero y todavía sobrevive porque lo hackeo constantemente, un cachito aquí, otro allá, y más o menos sobrevive al paso del tiempo. Pero para cuestiones laborales o de otros clientes siempre utilizo Wordpress y un clásico allí son los plugins.
No voy a meterme en detalles técnicos demasiado complejos pero me dan ganas de contar un poco cómo es este tema para aquellos que putean desde el otro lado y no entienden qué está sucediendo en realidad, es como un pequeño rant para programadores, implementadores y usuarios que putean a diario
Contador de actividad en redes sociales
Estuve programando un poco para aliviar la carga en el blog, noté que el javascript necesario para imprimir los botones de Facebook, Google+ y Twitter era sencillamente demasiado.
El tiempo de carga de la web ya es alto porque, como casi todo blog, tiene un mínimo de una imagen por post, con diez posts por portada eso da un mínimo de 1Mb a 2Mb de datos, a eso súmenle todos los adornos, el CSS, fondo, íconos y avatares.
Pero esto era tan sólo transferencia, un segundo más, un segundo menos, optimizable y manejable, lo que no era optimizable eran los scripts externos.
Primero cambié post por post esto el año pasado:
Para contabilizar por cada post hice un script que toma justamente el mismo contador que ya tienen las redes para sus propios botones, pero a mediados del año pasado Twitter arruinó todo y quitó esa posibilidad. Actualmente es imposible saber, desde afuera de Twitter, cuánta gente compartió un enlace en particular. No importa, dejé el botón para que puedan seguir compartiendo la nota y así funciona.
Pero me quedaba otra parte del blog que todavía tomaba esa inmensidad de scripts, en el menú a la derecha. Tengan en cuenta que todos esos javascripts estaban tomando información de ustedes, trackeándolos, y ya bastante tenemos con los banners y analytics que el otro día Facebook anunció que empezaba a trackear usuarios externos a partir de estos botones y demás agregados. Basta, demasiado.
Así que me puse en campaña de reprogramar esta parte:
Toda consulta a las redes sociales se hace desde un cron en el servidor, no toca al usuario, evita ensuciar de más javascript el blog y acelera al menos un segundo la carga y ni hablar la presentación en PCs modestas o teléfonos.
El código fuente es sencillo y se los comparto aquí en mi Github ya que a alguno le puede llegar a servir. Está hecho en PHP pero tranquilamente lo pueden convertir a cualquier lenguaje, es una boludé.
Queda pendiente hacerle un template responsive al blog así no mantengo doble estructura y modernizarlo un poco, pero ¿Qué quieren? Bastante que sigue funcionando ¿No? Después les cuento más sobre el SSL que ya tienen funcionando hace semanas y que casi nadie notó.
Agregar Emojis en tu sitio o blog
Dato: si odiás a los emojis sos una persona completamente normal, si los amás sos Capitán Intriga
No, tranquilos, no voy a agregar Emojis aquí, es ya mucho peso y haría que la página tarde mucho en cargar, pero el otro día me pregunté si tenía a mano alguna librería que me permitiese hacerlo ¿De dónde los saco?
Para empezar no voy a juzgar demasiado (mentira) a quienes utilizan los emojis, para mi hay tres clases de personas, las que utilizan sólo palabras para expresarse (grandes escritores/redactores), los que utilizan palabras y gestos (yo me siento así) y los mudos que necesitan señas, claro. Pero los Emojis los ubico en un cuarto y nuevo grupo: los que no siendo mudos aun necesitan hacer señas porque no se saben ni una puta palabra
Bueno, no todos, si los usamos como los viejos símbolos ASCII que inventábamos, una vez cada tanto, estarías en el segundo grupo, son gestos, pero hay gente que no hace más que utilizar Emojis y encontré que existe forma de incorporarlos en un blog o sitio.
Scrapear Twitter sin consumir la API
Si algo está publicado en una web, se puede tomar, quiera o no el autor. Aun cuando te cierren o limiten una API, si es público, se puede obtener.
Así estaba yo ayer queriendo dejar de consumir tanto la API de Twitter cuando ejecutaba mi analizador de bots, estoy preparando una charla para el SM Day y quiero darla con data fresca y además un sistema mejorado (que publico en un git público, por si les interesa), pero me faltaba algo que le diese inteligencia al sistema para identificar bots más rápidamente.
La cuestión era sencilla, como humano basta con entrar al timeline de cualquier usuario de Twitter para darte cuenta si es un bot o no, hay patrones obvios que por más dedicación al spam que tengan no pueden evitar, de hecho, así es como funcionan la mayoría de los sistemas anti spam.
Por cada bot que identifico leo sus followers y followings, esta nueva lista de usuarios puede tener bots o gente común, si tenía de pronto 100 usuarios nuevos ¿Cómo podría identificar rápidamente si son potencialmente bots? si por cada uno vuelvo a consultar la API esto me dejaría sin API calls muy pronto, pero Twitter no te bloquea si simplemente entrás a la web de cada usuario.
Así pues ¿Podría identificar el texto en cada tuit publicado en su página sin tener que hacer una consulta a la API? Si, "scrapeando" la web de twitter...
Nuevo diseño en LinksDV
Así es, luego de mucho tiempo en desarrollo y principalmente porque no tenía un lapso de tiempo como para dedicarle, pude terminar el rediseño de todo el sitio de LinksDV.com
La nueva versión necesita MUCHO trabajo todavía, siempre se aceptan bugfixes y todo eso, principalmente del CSS que no es mi fuerte, pero básicamente lo que hice fue extender el diseño que ya tenía el RSS Reader a todo el sitio.
En esta primer etapa de rediseño las funcionalidades son casi las mismas de siempre, no quise agregar demasiado porque ya era mucho laburo arreglar mil y un formularios. Utilicé Bootstrap para hacer más fácil cualquier aporte, tiene incongruencias aquí y allá pero en líneas generales creo que quedó "usable".
Les cuento más detalles y novedades a continuación.
Un Putin en HTML5
Es un detallecito pero sirve como dato, hace ya un tiempo que más de un lector me había dicho que la página les estaba matando el procesador.
Hice la tarea (aunque haya mil cosas que mejorar en este blog, pero esta era jodida) sacando scripts innecesarios, hasta llegué a limpiar los headers y no dejar ni javascript alguno. El problema persistía.
Y ¿Saben qué era? el GIF de Putin!!!! ese que está en el pie de la página danzando y desconcentrando a todos así es, una boludez, miren que caía tanto Chrome como Firefox en esto, principalmente Chrome era el de peor performance, tienen algún drama con los GIFs grandes y por lo visto afectaba al procesador.
Pero como no voy a esperar a que Google le mejore la performance a eso (imagino que los Tumblr deben arruinar procesadores y la Ruleta Rusa ni me imagino), decidí cortar por lo sano, un Putin Danzarín pero en video:
Sencillamente cargarlo con el famoso tag Video de HTML5 y reubicarlo para que funcione mejor, creo que está óptimo ahora y seguramente no se ve bien con alguna versión de Internet Explorer o algún otro browser raro el cual no debe representar ni el 1% de ustedes así que, fuck you.
Miren con qué poco le podés cambiar la performance a un sitio
PS: lo loco es que todavía exista gente que nunca lo vió, ¿el scroll lo tienen difícil?