openSuSE Leap 42.3 + Redis

Y una nueva aventura, instalando Redis en openSuSE Leap no podría ser más sencillo ya que Redis está disponible en los repositorios de la distribución.

Sin embargo para arrancarlo no basta con:

systemctl start redis.target

que parece no tuvo uso. Recien cuando ejecuté:

sudo redis-server

arrancó el servicio y pude tener acceso al cliente

redis-cli

Sin embargo el servidor presentó los siguientes mensajes:

WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxconn is set to the lower value of 128. 
... 
WARNING overcommit_memory is set to 0! Background save may fail under low memory condition. To fix this issue add 'vm.overcommit_memory = 1' to /etc/sysctl.conf and then reboot or run the command 'sysctl vm.overcommit_memory=1' for this to take effect. 
WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This will create latency and memory usage issues with Redis. To fix this issue run the command 'echo never > /sys/kernel/mm/transparent_hugepage/enabled' as root, and add it to your /etc/rc.local in order to retain the setting after a reboot. Redis must be restarted after THP is disabled. 
* The server is now ready to accept connections on port 6379

Las instrucciones están incluidas, pero si da flojera leer, StackOverflow tiene algo de información, aquí: Tech and me - Performance tips for Redis Cache Server

 Para el primer mensaje:

WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxconn is set to the lower value of 128.

Se debe escribir en consola:

sysctl -w net.core.somaxconn=65535

pero para ahorrarse el trabajo de tener que hacerlo cada vez que se inicia el sistema, se debe editar el archivo:

/etc/rc.d/boot.local

Para el segundo mensaje:

WARNING overcommit_memory is set to 0! Background save may fail under low memory condition. To fix this issue add 'vm.overcommit_memory = 1' to /etc/sysctl.conf and then reboot or run the command 'sysctl vm.overcommit_memory=1' for this to take effect.

se require editar el archivo:

/etc/sysctl.conf

para añadir la línea solicitada:

vm.overcommit_memory=1

Para la tercera línea:

WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This will create latency and memory usage issues with Redis. To fix this issue run the command 'echo never > /sys/kernel/mm/transparent_hugepage/enabled' as root, and add it to your /etc/rc.local in order to retain the setting after a reboot.

Se necesita editar nuevamente el archivo:

/etc/rc.d/boot.local
 
y añadir la línea:

echo never > /sys/kernel/mm/transparent_hugepage/enabled

El texto continúa con una descripción para dejar de usar TCP, puerto 6379, y usar el socket UNIX, "transmisión interna", para acelerar la respuesta en caso de que el servidor Redis se encuentre en el mismo equipo del cliente. Lo cual preferí no llevar a cabo.

Es recomendable revisar el tutorial interactivo disponible en la web de Redis. Es una manera sencilla para conocer la mayoría de comandos de Redis y la imortancia de los hashes.

Tomar en consideración que para la edición de los archivos necesarios para la ejecución correcta de Redis, es necesario disponer de permisos de usuario root, (su -) y saber usar un editor como nano o vim facilita el trabajo.

[Fullstack] Node + PostgreSQL

Ya hice algo de trabajo de esta forma, pero en lugar de PostgreSQL fue con MongoDB. Que registraré luego, lo que estoy registrando ahora es una parte.

No es que haya falta de documentación, pero no está organizada.
Hay información para crear API de NodeJS con PostgreSQL:
RisingStack - Node Hero: Node.JS Database Tutorial, pero no está actualizada para usar versiones de la librería pg (Node) actualizada. Lo que varia la sintaxis a usar. Pero los comentarios de ese artículo ayudan a:

• completar los requerimientos para usar el tutorial
• obtener información para corregir los problemas en la sintaxis
• extender recursos para probar la aplicación

Hay información para instalar y usar PostgreSQL en mi distro favorita (openSuSE), que es mejor que la disponible en los recursos únicos de la distribución. Incluye información para poder usar pgAdmin y phpPgAdmin: How to install PostgreSQL nd phpPgAdmin on openSuSE Leap 42.1, usable for v42.3. Sin embargo no tiene detalles y recomendaciones para asegurar adecuadamente la instalación.

También se encontró otro recurso, similar al mencionado primero, pero este no es parte de un tutorial para aprender del uso de Node.JS. Este enseña a usar Node.JS con la librería "pg" para crear un API REST que se comunicará con un frontend Angular JS: PostgreSQL and NodeJS.

Sin embargo, hasta el momento no he encontrado casualmente información de las partes y condiciones para un sistema API REST que proporcione CRUD.

También me hace falta repasar la parte de Angular (Angular 5) para proporcionar una interfaz adecuada y que optenga los datos necesarios del sistema API.

Pausa larga - Horrible Trabajo

Ha pasado tiempo desde el último post, el último divertido post con información de provecho, de experimentar y jugar.
Ha comenzado un aburrido y ridículo plazo de "trabajo", sin sentido particular y demasiado alejado de lo que es divertido e interesante. Me gustaría decir que no es de provecho, por lo monótono y perdida de tiempo que es, mas hay dinero de por medio.

Triste ver que también está afectando mi desempeño y trabajo para el curso de Angular que estoy llevando. Pero hay que poner esfuerzo, para aprovechar mejor las clases y obtener ganancias para continuar mejorando.

Espero no tener que quedarme atrapado en este ciclo de "trabajo insulso" por siempre. Y romper el ciclo para nunca más volver.

Usando Babel

Inicio de una nueva aventura

Para llegar a ser un buen desarrollador en FrontEnd, hay que conocer JavaScript y esta es la base para entender MEAN (Mongo, Express, Angular y Node).

Pero si tu sistema solo tiene Node 4.x no hay mucho que se pueda hacer. El problema es que Node 4.x no puede ejecutar ES2015 (ES6), versión de JavaScript disponible actualmente en los navegadores. Lo cual me obliga a algunas opciones:

Actualizar Node

Hay varias:

• desinstalar la versión disponible en el sistema y descargar el nuevo Node (v 8.x o el LTS 6.x),
• actualizar Node directamente, hay scripts disponibles que actualizan Node. Esta n, nvm, etc.
• Usar contenedores, como Docker para disponer de una versión actual de Node y no "malograr" la versión de Node disponible en el sistema.

Transpilar

La otra opción, aparentemente sencilla de entender y ejecutar es transpilar ES2015 a ES5 usando Babel. Esto me permite escribir código en ES2015 y "traducirlo" a ES5 para que pueda ser ejecutado por Node 4.x.

El camino sencillo y laborioso

Claro que continúa el sin sabor ya que la mayoría de navegadores actuales no tienen inconvenientes para ejecutar ES2015.

La instalación de Babel es relativamente sencilla:

npm init
npm install --save-dev babel-cli babel-preset-es2015
echo '{ "presets": ["es2015"] }' > .babelrc

para usar Babel, se usa el siguiente comando:

babel archivo_ES2015 -d carpeta_destino

Hay varia alternativas para automatizar el comando, usando Gulp o el mismo npm al procesar los archivos resultantes, pero si no se está trabajando sistemas grandes, el comando es más que suficiente para hacer que Node 4.x lo pueda ejecutar.

Fuentes: 

• StackOverflow - How do I update Nodejs?: Nota algo antigua pero con opciones válidas
• Getting Started with ES6 (ES2015) and Babel: explicación sencilla del proceso mostrado.
• Using Babel: con mayor detalle, una descripción de la variadas formas en las que se puede usar Babel, peligrosamente detallado para un usuario común.
• Dockerizing a Node.JS Webapp, no comments.

Nuevo botón para el menú Hamburguesa y problemas

Sigo trabajando en aprender el menú hamburguesa para aplicarlo en sitios responsive. Añadí un botón más para un formulario de búsqueda. El primer problema que se encuentra es que no hay código UTF-8 para el icono de lupa, hay algunos parecidos, inclusive variando la posición del mango pero no es consistente con el diseño de los iconos usados. Entonces se utiliza un SVG en el HTML. La otra opción sería usar una imagen.

See the Pen hamburger_menu_w/search by gerbo-san (@gerbosan) on CodePen.

Otro problema que no supe detectar en la primera prueba es que si se despliega el menú (o el input text) y se cambia la resolución inmediatamente, este se continua mostrando. Es decir, se mostrarían dos menús o dos espacios de búsqueda.

A seguir buscando.

Intentando crear un menu hamburguesa

Además del delicioso nombre, el menú hamburguesa ofrece una forma reducida para acceder a un menú, sea en un web en un escritorio o en un dispositivo móvil.

Codepen - Hamburger Menu

La parte más problemática puede ser JS (tal vez no elegí el mejor ejemplo, observaciones en el CSS).

Estoy considerando otras alternativas que no me desvíen a JS, pero por el diseño del sitio, tal vez no sea posible y la mejor idea es un menú flotante al pulsar un botón o enlace.

Aprendiendo webpack

Resumen adaptación para Webpack Se está usando la siguiente estructura:

webpack_origen/
+dist/
  +js/
    +bundle.js
  +css/
  +images/
  +index.html
+src/
  +js/
    +index.js
    +content.js
  +css/
    +index.css
  +images/
  +index.html
+node_modules/
+webpack.config.js
+package.json
+readme.md

La configuración de package.json es como sigue:

{
  "name": "prodinca_webpage",
  "version": "1.0.0",
  "description": "de PSD a HTML5 vol07",
  "main": "./src/js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch --colors",
    "start": "webpack-dev-server --progress --colors"
  },
  "keywords": [
    "udemy",
    "practica",
    "prueba",
    "maquetación",
    "página",
    "web"
  ],
  "author": "gerbo-san",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

La configuración de webpack.config.js es como sigue:

var path = require('path');

module.exports = {
  entry: {
    app: './src/js/index.js'
  },

  output: {
    path: path.resolve(__dirname,'dist'),
    filename: './js/bundle.js',
    publicPath: '/dist/'
  },

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    inline: true
  },

  module: {
    loaders: [
      {
        test: /(\.js |.jsx)$/,
        loader: 'babel',
        exclude: '/node_modules/',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        exclude: '/node_modules'
      }
    ]
  }
};

Las fuentes que utilicé para estos archivos son:
webpack - Tutorials/Getting started
webpack - Getting Started
Youtube - Webpack | Curso Completo Practico desde Cero
Youtube - Primeros pasos con Webpack

La definición de la plantilla para trabajar con webpack todavía no está completa, cuestión de tiempo.