Gulp 4 + Browser-sync programando para varios navegadores

2020-12-04 - Categorías: JavaScript
Testing Browser-sync

Ando poniéndome al día de nuevo, mientras que les comparto en este post sobre estas joyas de la informática, con este howto o codekata. Se trata de Browser-sync y de Gulp, herramientas para desarrollar localmente más rápido páginas web.

Con Browser-sync nos evitamos el continuo F5 para refrescar los navegadores con cada cambio mientras que trabajamos, además de que podemos probar en múltiples dispositivos las páginas web mientras que vamos construyendo. Y además con Gulp, podemos tener programadas una serie de rutinas de trabajo, como combinar hojas de estilo, ficheros JavaScript, minificarlos, etc.. para así poder trabajar más rápido y mejor.

No he encontrado por Internet un howto para Gulp 4, así que aquí estoy compartiéndolo mientras que he conseguido hacerlo funcionar. Con este howto, queda programado en Gulp el lanzamiento de Browser-sync, junto con unas rutinas básicas de JavaScript y CSS, para un entorno básico de página web.

Continuar leyendo..

Carga opcional de Google Analytics y otros, desde JavaScript

2020-11-29 - Categorías: JavaScript

Hoy traigo de nuevo otro codekata, esta vez en JavaScript. Para evitar el uso de cookies, y la carga opcional de ficheros JS. Traigo el cómo cargar o no Google Analytics opcionalmente mediante JavaScript. Es decir, son unas rutinas de carga de ficheros JavaScript, o de funciones que se ejecuten, si el visitante ha aceptado o no el uso de ciertos servicios que usemos en una web.

Esto se puede usar para Google Analytics o para otros servicios que carguen a partir de JavaScript como anuncios, pixeles de conversión, etc..

Continuar leyendo..

Arduino: luz automática con temporizador de apagado

- Categorías: C/C++

¡Hola de nuevo! Comparto aquí un codekata para construir una luz automática con Arduino. La idea es que se encienda con un sensor, y se mantenga encendida durante 30 segundos. Si mientras está encendida, se producen nuevos movimientos, entonces resetea la cuenta atrás a 30 segundos de nuevo para que se mantenga la luz encendida. A los 30 segundos de no haber movimiento se apagará.

Como único input tiene un sensor PIR, el clásico sensor de movimiento basado en infrarojos. Como output usa 3 pines, dos son simplemente leds para ver que está activo o no, y un tercer output que es un relay para encender y apagar luces usando voltajes y amperajes más altos como lámparas a 220v, por ejemplo.

Continuar leyendo..


Scripts y técnicas de despliegue continuo para una web con Git

2020-11-16 - Categorías: General / Magento / PHP / Symfony / WordPress

Automatizar la publicación de nuevas versiones es una técnica de desarrollo de aplicaciones que se denomina Despliegue Continuo o Continuous Deployment en inglés (CD). Se suele usar junto con el Continuous Integration (CI), en el que se elabora una serie de pruebas automáticas sobre el software.

Tener esto automatizado nos ahorra mucho tiempo, nos dará velocidad en todos estos pasos intermedios ya que no tendremos que repetirlos continuamente, y podremos centrarnos en desarrollar para cada iteración.

Durante las pruebas puede notificarnos en caso de errores, realizar todo tipo de chequeos, o elaborar documentación sobre el proyecto para el resto del equipo. Pero una vez que tenemos el primer paso montado del CI, es interesante seguir con el segundo paso del CD. A continuación comparto unos scripts e instrucciones para una web en WordPress, Symfony o Magento 2, con GitHub o BitBucket. Así es como funciona también aquí en JnjSite.com..

Continuar leyendo..

PHP: una de arrays, strings, json y objetos

2020-10-25 - Categorías: PHP
Logo de PHP

Dejo aquí un post apunte o codekata, sobre cómo convertir los datos en PHP. Más bien unas líneas de acción para trabajar con la información dentro de los programas en PHP.

Lo lógico es tratar de utilizar programación orientada a objetos para tratar de organizar el código y que sea mantenible. Utilizar código limpio, estructurado en capas, dividido según funcionalidades, etc.. pero antes de llegar a esto tenemos que lidiar quizá con operaciones más sencillas.

Continuar leyendo..

Cómo hacer que Google Analytics no use cookies y otras configuraciones

- Categorías: General
Monstruo come galletas

Hoy dejo aquí un truco, y referencias, a la documentación oficial para cumplir con las Leyes sobre cookies y poder seguir disfrutando de la herramienta de análisis de visitas llamada Google Analytics.

Para el que no lo conozca, Google Analytics es una de las herramientas gratuitas de analítica web más usadas en Internet. Nos informa de cómo está funcionando nuestra web, al tiempo que nos da todo tipo de informes para que podamos saber qué tal se comportan los usuarios en general en una página web.

Continuar leyendo..

Preparando un plugin de WordPress para publicar, ahora con Gulp

2020-10-17 - Categorías: JavaScript / WordPress
Gulp

Dejo aquí otro pequeño codekata o howto sobre Gulp, en JavaScript, para preparar los directorios de publicación de un plugin para WordPress. La semana pasada publiqué lo mismo en Shell Script, pero como en JavaScript se puede hacer de todo, lo he transcrito para usar con Gulp. Así podemos automatizar el flujo de trabajo dentro de los otros flujos de trabajo Gulp. Así nos independizamos del sistema operativo y nos beneficiamos de los extras que nos trae Gulp con sus plugins, para hojas de estilo CSS, JavaScripts, tratamiento de imágenes, etcétera.

Simplemente genera una estructura de directorios bajo el directorio extra/ dentro del proyecto siguiendo el patrón de estructura propuesto para WordPress, a partir de un plugin en desarrollo bajo el directorio /wp-content/plugins/your-plugin-slug/. Es necesario tener instalado Nodejs, Gulp 4 por lo menos, y las dependencias necesarias. Al lanzarlo, si falta algo en tu sistema te lo dirá. En teoría es multiplataforma.

Continuar leyendo..

WordPress: preparando un plugin para publicar

2020-10-11 - Categorías: General / GNU/Linux
Logo de WordPress

¡Hola de nuevo! Dejo aquí un Shell Script de ayuda para preparar los ficheros de publicación para cada nueva versión de un plugin para WordPress. La idea es que estamos trabajando en un plugin en una instalación de WordPress. Por defecto en WordPress los plugins estarán en el directorio /wp-content/plugins/slug-de-tu-plugin/ y tendremos que preparar los ficheros antes de subirlos al repositorio de Subversion y publicarlos así en la comunidad de plugins para WordPress.

Este preparar los ficheros se puede hacer manualmente. Pero con cada nueva versión se puede volver tedioso, aburrido, el volver a generar la estructura. Así que si ya tenemos revisado y aceptado el publicar un plugin, podemos usar este Shell Script para ir publicando nuevas versiones.

Continuar leyendo..

El ABC con SVN Subversion

- Categorías: General
Subversion logo

Dejo aquí un howto sobre este sistema de control de versiones. Un sistema de control de versiones es una herramienta de trabajo para gestionar las modificaciones que se hacen en el software a lo largo del tiempo. Apache Subversion, cuya abreviatura es SVN, se lanzó en el año 2000 y desde entonces ha habido muchas aplicaciones en las que se ha utilizado.

En este post puedes encontrar un resumen de los principales comandos que hace falta usar para empezar a trabajar con subversion.

Continuar leyendo..

Creando un theme para WordPress from scratch

2020-10-04 - Categorías: General / WordPress
Home WP con nuevo tema en contrucción

Ya estoy por aquí de nuevo compartiendo en este blog. Esta vez tienes un pequeño howto o codekata para crear un theme from scratch, desde 0 y sin ningún punto de partida, para WordPress. Vengo de nuevo escribiendo sobre WordPress, ya que últimamente estoy poniéndome al día con este CMS.

He estado construyendo un par de plugins, practicando mientras leía la documentación oficial. También me propuse crear un theme propio para jnjsite.com para conseguir aumentar la puntuación SEO, aunque lo estaba abandonando un poco. He estado trabajando en un Service Worker para que puedas visitar offline jnjsite.com, aumentar con este la puntuación SEO, y también para que puedas instalarte la web como si fuera una app de móvil. Si has estado viendo las últimas entradas en jnjsite.com habrás notado, que por esto, estoy escribiendo más alrededor de WordPress, frontend, JavaScript, SASS, etc..

Continuar leyendo..

WordPress: generando al vuelo un fichero y descargándolo

2020-09-26 - Categorías: PHP / WordPress
Logo de WordPress

Hoy vuelvo con otro howto o codekata para WordPress. Esta vez es para hacer una descarga de un fichero que no existe, a partir de una URL. Es decir, es una forma de generar contenido de un fichero al vuelo, en forma de fichero y darlo en descarga al navegador que visita WP. En vez de devolver contenido HTML, CSS y JavaScript desde el servidor al navegador que nos visita, devolvemos el contenido de un fichero y le decimos al navegador que nos visita que hay que descargar.

Para hacer esto es simple la idea. Sólo hay que engancharse a un hook de WordPress antes de que se devuelva ninguna respuesta web normal al navegador. Entonces, si la URL de la petición es la que queremos, entonces devolvemos el contenido del fichero, y ponemos los HEADERS en la respuesta para que el navegador se descargue el contenido en forma de fichero.

Continuar leyendo..

© 2020 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.