Saltar al contenido

Categoría: Desarrollo y Programación

Cómo desactivar algunos módulos de Jetpack mejorar la cargar de un sitio

Para quienes tienen alojado un sitio WordPress en un servidor propio, probablemente estén usando el plugin Jetpack para aprovechar muchas de las funcionalidades de WordPress.org: estadísticas de visitas, botones para compartir, mejores comentarios, versión móvil, entre otros. Sin embargo, este plugin añade muchos archivos (innecesarios muchas veces) Javascript al sitio, aumentando el tamaño del sitio y ralentizando la carga del sitio.

Para evitar esto, podemos instalar adicional el plugin Jetpack Lite que elimina todos los módulos exceptuando el de estadísticas y enlaces cortos de wp.com, pero con pequeñas modificaciones en el ćodigo podemos controlar cuáles módulos cargar:

  • Abrimos el archivo jetpack-lite.php  y nos ubicamos en la linea 32.
  • Si observamos, hay una funcion llamada Leave_only_JetpackLite_modules que se llama en el hook jetpack_get_available_modules, esta función devuelve un arreglo con los módulos a activar, por eso debemos simplemente agregar nuevas entradas al arreglo $return desde $modules para activar módulos, por ejemplo:
    $return['stats'] = $modules['stats']; //Estadísticas
    $return['shortcodes'] = $modules['shortcodes']; //Código corto para vídeos
    $return['sharedaddy'] = $modules['sharedaddy']; //Botones para compartir en redes sociales
    $return['comments'] = $modules['comments'];//Mejoras en la caja de comentarios
  • Para obtener la lista de módulos, simplemente navega hasta la ruta /wp-content/plugins/jetpack/modules/ y cada carpeta representa a un módulo, si sabes inglés entenderás que hace cada uno de ellos por su nombre y debes agregarlo al vector comentado en el paso anterior.
  • Una vez agregado todos los módulos al vector $return, debes agregar cada uno de ellos en el array declarado en la función Activate_only_JetpackLite_modules: return array( 'stats', 'shortcodes', 'sharedaddy', 'comments','publicize' );
  • Una vez que subas los cambios y recargues el sitio, solo deberías tener activado los módulos necesarios y los archivos Javascript que se requieren sólo para las funcionalidades activas.

Nota: Al instalar Jetpack Lite debes tener instalado Jetpack. Pues el plugin no es un fork sino un pequeño código para eliminar la carga de todos los módulos. Y si tienes alguna duda o problema, no dudes en dejar un comentario para ayudarte.

Deja un comentario

Desarrollo de aplicaciones web con MEAN.io (Mongo, Express, Angular y NodeJS)

Hace unas semanas, elaborando un sistema interno para Oja.la tuve la libertad de escoger la plataforma a desarrollar y como este año me había decidido a realizar una aplicación web escrita 100% en Javascript empecé a investigar sobre como empezar con la plataforma  MEAN (Mongo, Express, Angular y NodeJS), para quienes no la conocen, es como LAMP (Linux, Apache, MySQL y PHP) pero orientada a usar JS tanto en frontend como en el backend. Investigando conseguí MEAN JS, un framework para desarrollar bajo esta plataforma.

Instalación

Al momento de iniciar el proyecto, no sabía utilizar Express ni Mongo, respecto a NodeJS sólo había hecho unos experimentos sencillos para ver como funcionaba, pero ya tenía experiencia en AngularJS y herramientas como: Yeoman, Grunt, Bower y NPM. Por ello, la instalación de este framework me pareció muy sencilla: clonar el repositorio y luego mediante bower instalar todas las dependencias automáticamente. Solo realicé algunos cambios para evitar actualizar versiones no estables de librerías (no me gusta actualizar  en pleno desarrollo para evitar incompatibilidades con funcionalidades ya escritas) y eliminar cosas innecesarias para el proyecto (como autenticación usando redes sociales).

Esqueleto inicial

La forma en como está estructurado me ha gustado mucho, la separación del backend y frontend se hace notable. Respecto a Express,  la estructura es muy sencilla, principalmente se divide en las carpetas: models (los objetos que permiten se comunican con la BD), controllers (donde se guarda la lógica del proceso), routes (maneja las rutas de las peticiones del servicio web), views (las vistas a mostrar desde el servidor, las cuales son diferentes de las vistas generadas en el frontend).

En la parte pública se trabaja como cualquier aplicación de Angular, se crean carpetas por cada módulo a desarrollar, por defecto vienen incluidas 2: auth y system. La primera es el módulo de autenticación que trae MEAN.io para permitir identificarse utilizando redes sociales y la segunda, donde va la aplicación como tal. También se incluyen los archivos para manejar las dependencias del proyecto usando npm, bower y se incluye un archivo de Grunt.

Este último, trae configuraciones para montar un servidor: de desarrollo, pruebas y producción. Cada uno de ellos tiene su propia  configuración, permitiéndote trabajar con diferentes bases de datos, bibliotecas comprimidas solo en la versión de producción y pruebas. Me pareció raro que no incluía la tarea grunt-ngmin, pues permite facilitar la compresión de archivos JS de AngularJS.

Logo de Mean.io
Logo de Mean.io, chévere que sea una chica ninja

Desarrollo

El desarrollo de la aplicación se me hizo fácil gracias a esta plantilla base, si nunca has desarrollado una aplicación bajo este modelo, te recomiendo iniciarte con MEAN.io. Lo único extraño es que generalmente en otras plataformas el código de backend es diferente al de frontend, permitiendo determinar fácilmente la ubicación del código que estas viendo, como aquí todo es JS a veces debes mirar la ruta para ver si estas en frontend o backend, además, probablemente llames a los modelos de Express y Angular con el mismo nombre, confundiendo a veces la apertura de archivos.

La desventajas que vi con esta plataforma fue: la poca documentación debido a su poco tiempo de disponibilidad e incompatibilidad para navegadores antiguos (Android 2.3, IE 8, entre otros), sé de la disminución de la cuota de mercado de estos navegadores, pero aún existen clientes/usuarios que lo utilizan y en el ambiente empresarial se les debe dar soporte. Y finalmente, no me gustó mucho trabajar con MongoDB, es muy chévere almacenar los objetos en JSON y la lectura se hace rápida, pero no sé si es por mi años utilizando BD relacionales pero la falta de restricciones de diseño o tanta libertad de almacenar lo que se desee allí, me parece que puede crear daños en la integridad de datos en el futuro. Tal vez porque estoy acostumbrado a manejar toda la validación de la data en la BD y no en la aplicación, me pareció inseguro que con MongoDB toda la validación se hace en la aplicación (si me equivoco, por favor me lo aclaran en los comentarios).

Recomendaciones

Te recomiendo utilizar Mean.io si deseas hacer una aplicación bajo esta plataforma en poco tiempo, realmente es sencilla de usar si tienes experiencia desarrollando aplicaciones web con Javascript. Probablemente la curva de aprendizaje para un novato sea fuerte pero vale la pena el esfuerzo. Si deseas algo mas sencillo o simple (sin sacrificar calidad), puedes probar Mean.JS un fork realizado por el autor de Mean.io para mejorar algunos problemas de diseño de la plataforma.

Actualización al 17/10/2019: El proyecto ha migrado a su fork MeanJS, realizado por el mismo autor del proyecto.

4 comentarios

Añadir soporte a Firefox OS en MobilePress

MobilePress es un buen complemento para WordPress para crear una versión móvil del sitio. Básicamente su función es detectar si se visita desde un dispositivo móvil (teléfono o tableta) y muestra un tema adaptado a las resoluciones que manejan las pantallas de esos.

Su funcionamiento es muy bueno y lo utilizo desde hace años por la facilidad para crear un tema móvil. Sin embargo, al acceder desde un dispositivo con Firefox OS me llevaba al sitio de escritorio, revisando me di cuenta que el «Agente de Usuario (User Agent)» del navegador utiliza:
Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0

Al verlo me llamó la atención la ausencia de identificación del sistema operativo, esto se debe según Mozilla a que la web es la plataforma y no Firefox OS. Como la mayoría de programas identifican a los sistemas móviles por su marca: Android, iPhone, etc. No suelen detectar la palabra Mobile. Revisando el plugin MobilePress, en el archivo mobilepress/classes/check.php hay una función llamada function is_mobile() donde a través de una expresión regular revisa varios agentes de usuario escritos y si lo encuentra muestra la versión móvil. Entonces al cambiar la expresión regular y añadir Mobile (con mayúscula):
preg_match( '/(Mobile|alcatel|

Una vez guardados los cambios, ahora podrás disfrutar de tu sitio móvil en Firefox OS.

Deja un comentario

Ponencia de John Carmack en el Quakecon 2013

Una de mis conferencias favoritas de todo el año es la de John Carmack (creador de Quake, Doom, Wolfeinstein) en el Quakecon,  porque suele hablar de la industria de los videojuegos y las futuras tecnologías desde el punto de vista de un programador. Sus charlas siempre suelen muy largas, mayores a 2 horas y aunque no entiendo mas de la mitad de lo que habla, siempre es interesante aprender lo poco que se entiende.

Este año habló sobre el futuro de los videojuegos, el piensa que es importante como el usuario interactúa con el juego y por ello empieza a comparar el PS Move con Kinect, para él ambas soluciones no son tan buenas como la realidad virtual usando un casco y como está invirtiendo en el desarrollo de estos dispositivos porque para él, es el futuro a seguir. De las consolas de la siguiente generación no quiso hablar porque no ha programado para ella por los momentos. Como defensor de OpenGL habla como ha logrado triunfar y estar en varios dispositivos, de hecho, como ahora cualquier teléfono celular soporta esta tecnología y la posibilidad crear juegos en OpenGL para disfrutar en cualquier lugar.

Como programador, hace una discusión entre la programación estático contra la dinámica. Dice preferir la estática por el poder que tiene y el control sobre cualquier aspecto del programa, pues en el dinámico se siente limitado con muchas cosas sobre todo en la optimización. También compara Nvidia con AMD, el dice preferir Nvidia por sus innovaciones y herramientas para los desarrolladores, pero realza que el equipo de personas que trabaja en AMD ha venido haciendo un buen trabajo.

John Carmack Keynote - Quakecon 2013

En fin, es mejor ver escuchar el video con calma y por partes, porque es mucha información en mucho tiempo.

Deja un comentario