General

Esta es la categoría general donde pongo los posts que no encajan con el resto de categorías. Y algunos posts, que aunque encajan en alguna otra categoría, también los he considerado de interés general en informática. Aquí puedes encontrar contenidos varios sobre utilidades como programas, sistemas operativos, herramientas de mantenimiento y cosas de este estilo que me han parecido interesantes.

CloudFront: cómo empezar a configurar el CDN de AWS

2020-07-07 - Categorías: Amazon Web Services / General / GNU/Linux

Me ha escrito una persona al blog preguntando sobre CloudFront 👍 así que aquí estoy de nuevo compartiendo mi granito de arena en todo esto de la informática. Expongo aquí algunos problemas, y soluciones, que he tenido al trabajar con CloudFront tiempo atrás. Es decir, esto es un howto para montar el CDN de AWS, llamado CloudFront.

CloudFront no es una simple red de distribución de contenidos, sino que hace muchas más cosas aparte de cachear y distribuir contenidos. Pero vayamos al grano..

* Si estás aquí deduzco que estás optimizando, te puede interesar también este post relacionado con las optimizaciones de aplicaciones web 😉

Continuar leyendo..

Drupal & GNU/Linux: cómo instalar drush globalmente

2020-06-24 - Categorías: Drupal / General / GNU/Linux

Comparto aquí otro post apunte, un resumen, un howto para instalar la herramienta de línea de comandos de Drupal nombrada como drush. Esto sirve ya sea en local como en remoto en un servidor GNU/Linux.

Drush es el commandline de Drupal, que sirve para cosas similares a los CLI de Symfony, WordPress o la shell y commandline de Magento..

Continuar leyendo..

Cómo acceder a localhost dentro del emulador de Android

2020-06-24 - Categorías: General

Dejo aquí un howto, un apunte resumen, para configurar el emulador de Android y poder programar accediendo a localhost, desde el dispositivo emulado. Se hace haciendo lo que se llama port forwarding en el dispositivo emulado desde ciertos puertos al host de nuestro sistema operativo. Esto sirve para probar Service Workers (PWAs) localmente, webs localmente, apps que accedan a servicios que estemos programando localmente, etc..

Continuar leyendo..

Borrando información sensible del historial de modificaciones Git

2020-06-21 - Categorías: General

Es es un post apunte, para borrar ficheros del historial de modificaciones, de un repositorio Git. Esta acción me ha costado un poco encontrarla, así que aquí me hago eco. Se trata de una acción de limpieza del historial, ya que quizá queremos sacar ficheros con información sensible, que no queremos que estén en el historial: configuraciones locales, ficheros con alguna contraseña, ficheros temporales, ficheros de configuración del entorno de desarrollo, ficheros que necesitan compilación en el servidor de instalación, etc..

¡Atención! Esta acción no deja rastro de dichos ficheros, pero luego te deja el historial que no puedes redistribuirlo como si no hubiera pasado nada. Las identificaciones de las cosas habrán cambiado, se habrán reescrito sólo guardando iguales las fechas y autores. Y en terceros repositorios con Git no vas a poder hacer ‘git pull’ como si no hubiera pasado nada. Luego dejo también una solución a esto último.

Continuar leyendo..

Rejilla de contenidos mobile-first con puro HTML y CSS

2020-06-18 - Categorías: General

El diseño sensible al dispositivo, responsive o mobile-first, que se adapta al tamaño de la pantalla en donde se visualiza una web, se puede construir con puro HTML y CSS. Con unos pocos estilos, y estructura en los contenidos, podemos manejar la disposición de éstos contenidos en pantalla.

Si nos fijamos en cómo se visualiza el contenido en rejilla de uno de los principales framework mobile-first, que se llama Bootstrap, salta a la vista que se basa en dos ideas. La primera es el visualizar las cajas en pocas filas con muchas columnas cuando la pantalla en lo bastante ancha. Y mostrar las cajas en muchas filas con pocas columnas cuando hay pocos pixeles de ancho de la pantalla.

Continuar leyendo..

GNU/Linux: montando un sistema de despliegue manual con Git

2020-05-10 - Categorías: General / GNU/Linux
GNULinux

Dejo aquí un pequeño howto o codekata para configurar un despliegue manual de una aplicación mediante Git. Con este codekata se instala el repositorio en un directorio, mientras que los ficheros de trabajo que finalmente corren la aplicación estarán en otro directorio diferente. Internamente los sistemas de despliegue automatizado usan configuraciones de este estilo para hacer lo que se llama Continuous Deployment (CD).

Para este post sólo se trabaja la forma manual de hacer el despliegue. Que si quisieras, podrás automatizarlo añadiendo luego webhooks a tu repositorio, y recibir estos webhooks para lanzar este despliegue.

Clonado del repositorio

Suponiendo que queremos poner la aplicación y repositorio en el mismo directorio, vamos al directorio y podemos ejecutar lo siguiente:

git --work-tree=./la_app/ clone git@servidor-de-repos.com:ruta/al/repo.git el_repo

Si estamos en el directorio /ruta/al/directorio/ entonces se crearán los siguientes directorio:

  • /ruta/al/directorio/el_repo/
  • /ruta/al/directorio/la_app/

No tienen que existir los directorios para que Git pueda crearlos.

Comandos de despliegue machacando modificaciones

cd /ruta/al/directorio/el_repo/
git checkout master
git fetch --all
git reset --hard origin/master
# aquí otros comandos especiales de tu app como borrar cachés, archivos temporales, etc..

JavaScript: las Progressive Web Apps y el futuro de las aplicaciones para móviles

2020-04-14 - Categorías: General / JavaScript / SEO

¿Qué te parece si te dicen que se puede desarrollar una web, que se puede instalar como si fuera una aplicación nativa, en cualquier sistema operativo como Android, iOS, Mac o Windows? Ya sea en móviles o PCs de escritorio.. ¿Y si no hace falta que se publique en las App Store de cada sistema operativo? ¿Y si se actualizara también automáticamente?

Pues esta tecnología ya está entre nosotros desde hace unos pocos años, y la mayoría de los navegadores más usados ya son compatibles. Estas aplicaciones también pueden almacenar información en el navegador, acceder a la cámara, micrófono, GPS, se pueden usar sin conexión, son seguras porque obligan al uso de SSL, pueden acceder a las notificaciones push para mostrar notificaciones de escritorio y de móviles, etc..

Continuar leyendo..

Javascript: objetos y ficheros, escalando un programa

2020-04-13 - Categorías: General / JavaScript
Logo de Javascript

Sencillo codekata o tutorial para comprender cómo en Javascript se importan ficheros, o se puede organizar el programa en varios ficheros. No es plan tener todo junto en un mismo fichero. Hay que encapsular todo en objetos, en ficheros, con funciones, todo bien desacoplado, etc.. para que el programa sea mantenible y legible.

A partir del Ecma Script 6 tenemos disponible en Javascript mecanismos para esto. Una sugerencia es lo siguiente. Cargar como módulo un fichero principal y dentro de este a base de import lo demás. Dependerá del proyecto que quizá entonces hay que usar una estructura definida..

Continuar leyendo..

JavaScript: tomando una foto de la cámara en una web

2020-04-13 - Categorías: General / JavaScript
Logo de Javascript

Pequeño howto o codekata para tomar una foto desde la webcam en una web. Con este script incrustado en una web, se le preguntará al usuario por el permiso para acceder a los dispositivos de vídeo y audio disponibles en el dispositivo. Entonces si el usuario da permiso para su uso, se mostrará una caja con el vídeo y audio que se reciben en tiempo real. Sólo se usa HTML y Javascript.

Simplemente se pinta en la caja de video el stream de vídeo con audio en tiempo real. Y tenemos también un canvas en donde podemos pintar una captura de un fotograma del vídeo que estamos viendo. La captura del fotograma que se pinta en el canvas se hace con el botón disponible.

Continuar leyendo..

Javascript: obtener las coordenadas geográficas de una visita a la web

2020-04-10 - Categorías: General / JavaScript

Sencillo codekata para obtener las coordenadas de una visita a una web mediante Javascript. Funciona en navegadores de ordenadores y dispositivos móviles. Mostrará un mensaje emergente cuando se haga la consulta de las coordenadas. Devuelve latitud y longitud según el navegador.

Este script pide al navegador las coordenadas. Si estamos en un móvil con Android con Google Chrome, por ejemplo, el GPS del dispositivo móvil le servirá las coordenadas exactas al navegador, y el navegador a la web, si el usuario da el permiso.

Al grano, el código fuente

<!DOCTYPE html>
<html lang="es" dir="ltr">

    <head>
        <meta charset="utf-8">
        <title>JnjSite.com: Javascript Geolocation</title>
    </head>

    <body>
        <h1>JnjSite.com: Javascript Geolocation</h1>
        <p>Your current location is latitude <span id="spanLatitude"></span> degrees and longitude <span id="spanLongitude"></span> degrees.</p>
        <p id="theError"></p>
        <script type="text/javascript">
            function positionSuccess(position) {
                alert('SUCCESS');
                document.getElementById('spanLatitude').innerHTML = position.coords.latitude;
                document.getElementById('spanLongitude').innerHTML = position.coords.longitude;
                console.log(position);
            }

            function positionError(error) {
                alert('ERROR');
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        document.getElementById('theError').innerHTML = "User denied the request for Geolocation."
                        break;
                    case error.POSITION_UNAVAILABLE:
                        document.getElementById('theError').innerHTML = "Location information is unavailable."
                        break;
                    case error.TIMEOUT:
                        document.getElementById('theError').innerHTML = "The request to get user location timed out."
                        break;
                    case error.UNKNOWN_ERROR:
                        document.getElementById('theError').innerHTML = "An unknown error occurred."
                        break;
                }
            }
            window.onload = () => {
                if (navigator.geolocation) {
                    alert('Browser has Geolocation');
                    navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
                } else {
                    alert('Browser do not support Geoloation');
                }
            };
        </script>
    </body>

</html>

Hola mundo con VueJS

2020-04-10 - Categorías: General / JavaScript
VueJS hola mundo 2

Uno de los principales frameworks Javascript a fecha de hoy es VueJS. Los más populares, según los resultados en varias páginas encontradas con Google, son Angular, React y VueJS. Y en concreto VueJS me ha sorprendido por lo sencillo de empezar a usarlo.

Es un framework progresivo para desarrollo del frontend, que hace que podamos comenzar a usarlo progresivamente. Es decir, podemos usarlo en parte para hacer algo muy concreto en una parte de la web, o más, incluso llegando a ponerlo a controlar el frontend al 100%. Es una librería muy ligera, que proporciona un sistema, a base de Javascript con el que con directivas y poco más, podemos hacer que la web sea mucho más interactiva sin tener que picar casi código Javascript.

Continuar leyendo..

Javascript: almacenando datos en el navegador de los visitantes

2020-04-08 - Categorías: General / JavaScript

Todos estamos como locos venga a poner mensajes de cookies en las webs 🤪 pero hay otras 4 formas, que aquí dejo en estos codekatas, para guardar información en los navegadores de los visitantes. Estas otras formas, además, permiten guardar incluso más información que con las cookies 🤔 información totalmente segura y única para cada visitante.

Esta es la evolución natural de las webs hacia el mundo de los escritorios de los PC y aplicaciones para móviles. Es el siguiente paso para convertir una web normal, en una aplicación web instalable en PCs y móviles. Estas webs que se pueden instalar, y pueden trabajar sin conexión a Internet, se llaman PWAs (Progressive Web Apps). Además, las PWAs no necesitan instalarse desde la App Store de Google, ni de Apple, ni de Microsoft 😜 se instalan directamente porque son la misma web.. pero esto es tema para otro post..

Continuar leyendo..

© 2021 JnjSite.com - MIT license

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